edx-notices 0.1.1

Developing in Devstack

Make sure the LMS container is running in Devstack, then

git clone git@github.com:tuchfarber/platform-plugin-notices.git <devstack_folder>/src
cd <devstack_folder>/devstack
make dev.shell.lms
pip install -e /edx/src/platform-plugin-notices
cd /edx/app/edxapp/edx-platform
./manage.py lms migrate

Once that is done, LMS will pickup the plugin and saves to existing files should cause a devserver restart with your changes. Occasionally when adding a new file, you may need to restart the LMS container in order for it to pickup the changes.

Example client side code

This is example plain JS code that will call the API, then show a fixed banner across the top with a button to acknowledge. This is only supposed to be a proof of concept and thus no guarantees are made for this code.

// Gets cookie by name
const getCookie = (cookieName) =>
  document.cookie
    .split("; ")
    .filter((cookie) => cookie.startsWith(`${cookieName}=`))[0]
    .split("=")[1];

// Adds banner to screen with an OK button that acknowledges the notice
const addBanner = (htmlContent, noticeId) => {
  let banner = document.createElement("div");
  let html = document.querySelector("html");
  let acknowledgeButton = document.createElement("button");

  banner.style =
    "padding: 50px; background-color: black; color: white; position: fixed; top: 0%; width: 100%; z-index: 1010";

  acknowledgeButton.textContent = "OK";
  acknowledgeButton.onclick = () => {
    let params = { notice_id: noticeId };
    let postRequest = new XMLHttpRequest();
    postRequest.open("POST", "/api/notices/v1/acknowledge");
    postRequest.setRequestHeader("Content-type", "application/json");
    postRequest.setRequestHeader("X-CSRFToken", getCookie("csrftoken"));
    postRequest.send(JSON.stringify(params));
    postRequest.onreadystatechange = () => {
      if (postRequest.readyState === 4 && postRequest.status === 200) {
        console.log("acknowledgment successful");
        banner.remove();
      }
    };
  };
  banner.innerHTML = htmlContent;
  banner.append(acknowledgeButton);
  html.append(banner);
};

// Check for unacknowledged notices. If they exist add an banner to the screen
function checkForNotices() {
  let request = new XMLHttpRequest();
  request.open("GET", "/api/notices/v1/unacknowledged");
  request.responseType = "json";
  request.send(null);
  request.onreadystatechange = () => {
    if (request.readyState === 4 && request.status === 200) {
      if (request.response.length > 0) {
        let firstNotice = request.response[0];
        addBanner(firstNotice.html_content, firstNotice.id);
      }
    }
  };
}

To see this proof of concept once the app is install in LMS, you can: 1. Load an LMS page (e.g. localhost:18000/dashboard) 2. Open the console of your browser 3. Copy and paste the code above [NOTE: Only paste code in your browser that you trust and have reviewed!!!] 4. Run checkForNotices() in your browser console.

Unreleased

[0.1.0] - 2021-08-19

Added

• First release on PyPI.