Updated readme/deployment

app/static/admin/css/dark_mode.css

@@ -0,0 +1,137 @@
+@media (prefers-color-scheme: dark) {
+    :root {
+      --primary: #264b5d;
+      --primary-fg: #f7f7f7;
+
+      --body-fg: #eeeeee;
+      --body-bg: #121212;
+      --body-quiet-color: #e0e0e0;
+      --body-loud-color: #ffffff;
+
+      --breadcrumbs-link-fg: #e0e0e0;
+      --breadcrumbs-bg: var(--primary);
+
+      --link-fg: #81d4fa;
+      --link-hover-color: #4ac1f7;
+      --link-selected-fg: #6f94c6;
+
+      --hairline-color: #272727;
+      --border-color: #353535;
+
+      --error-fg: #e35f5f;
+      --message-success-bg: #006b1b;
+      --message-warning-bg: #583305;
+      --message-error-bg: #570808;
+
+      --darkened-bg: #212121;
+      --selected-bg: #1b1b1b;
+      --selected-row: #00363a;
+
+      --close-button-bg: #333333;
+      --close-button-hover-bg: #666666;
+    }
+  }
+
+
+html[data-theme="dark"] {
+    --primary: #264b5d;
+    --primary-fg: #f7f7f7;
+
+    --body-fg: #eeeeee;
+    --body-bg: #121212;
+    --body-quiet-color: #e0e0e0;
+    --body-loud-color: #ffffff;
+
+    --breadcrumbs-link-fg: #e0e0e0;
+    --breadcrumbs-bg: var(--primary);
+
+    --link-fg: #81d4fa;
+    --link-hover-color: #4ac1f7;
+    --link-selected-fg: #6f94c6;
+
+    --hairline-color: #272727;
+    --border-color: #353535;
+
+    --error-fg: #e35f5f;
+    --message-success-bg: #006b1b;
+    --message-warning-bg: #583305;
+    --message-error-bg: #570808;
+
+    --darkened-bg: #212121;
+    --selected-bg: #1b1b1b;
+    --selected-row: #00363a;
+
+    --close-button-bg: #333333;
+    --close-button-hover-bg: #666666;
+}
+
+/* THEME SWITCH */
+.theme-toggle {
+    cursor: pointer;
+    border: none;
+    padding: 0;
+    background: transparent;
+    vertical-align: middle;
+    margin-inline-start: 5px;
+    margin-top: -1px;
+}
+
+.theme-toggle svg {
+    vertical-align: middle;
+    height: 1rem;
+    width: 1rem;
+    display: none;
+}
+
+/*
+Fully hide screen reader text so we only show the one matching the current
+theme.
+*/
+.theme-toggle .visually-hidden {
+    display: none;
+}
+
+html[data-theme="auto"] .theme-toggle .theme-label-when-auto {
+    display: block;
+}
+
+html[data-theme="dark"] .theme-toggle .theme-label-when-dark {
+    display: block;
+}
+
+html[data-theme="light"] .theme-toggle .theme-label-when-light {
+    display: block;
+}
+
+/* ICONS */
+.theme-toggle svg.theme-icon-when-auto,
+.theme-toggle svg.theme-icon-when-dark,
+.theme-toggle svg.theme-icon-when-light {
+    fill: var(--header-link-color);
+    color: var(--header-bg);
+}
+
+html[data-theme="auto"] .theme-toggle svg.theme-icon-when-auto {
+    display: block;
+}
+
+html[data-theme="dark"] .theme-toggle svg.theme-icon-when-dark {
+    display: block;
+}
+
+html[data-theme="light"] .theme-toggle svg.theme-icon-when-light {
+    display: block;
+}
+
+.visually-hidden {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    overflow: hidden;
+    clip: rect(0,0,0,0);
+    white-space: nowrap;
+    border: 0;
+    color: var(--body-fg);
+    background-color: var(--body-bg);
+}

app/static/admin/js/filters.js

@@ -0,0 +1,30 @@
+/**
+ * Persist changelist filters state (collapsed/expanded).
+ */
+'use strict';
+{
+    // Init filters.
+    let filters = JSON.parse(sessionStorage.getItem('django.admin.filtersState'));
+
+    if (!filters) {
+        filters = {};
+    }
+
+    Object.entries(filters).forEach(([key, value]) => {
+        const detailElement = document.querySelector(`[data-filter-title='${CSS.escape(key)}']`);
+
+        // Check if the filter is present, it could be from other view.
+        if (detailElement) {
+            value ? detailElement.setAttribute('open', '') : detailElement.removeAttribute('open');
+        }
+    });
+
+    // Save filter state when clicks.
+    const details = document.querySelectorAll('details');
+    details.forEach(detail => {
+        detail.addEventListener('toggle', event => {
+            filters[`${event.target.dataset.filterTitle}`] = detail.open;
+            sessionStorage.setItem('django.admin.filtersState', JSON.stringify(filters));
+        });
+    });
+}

app/static/admin/js/theme.js

@@ -0,0 +1,56 @@
+'use strict';
+{
+    window.addEventListener('load', function(e) {
+
+        function setTheme(mode) {
+            if (mode !== "light" && mode !== "dark" && mode !== "auto") {
+                console.error(`Got invalid theme mode: ${mode}. Resetting to auto.`);
+                mode = "auto";
+            }
+            document.documentElement.dataset.theme = mode;
+            localStorage.setItem("theme", mode);
+        }
+
+        function cycleTheme() {
+            const currentTheme = localStorage.getItem("theme") || "auto";
+            const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+
+            if (prefersDark) {
+                // Auto (dark) -> Light -> Dark
+                if (currentTheme === "auto") {
+                    setTheme("light");
+                } else if (currentTheme === "light") {
+                    setTheme("dark");
+                } else {
+                    setTheme("auto");
+                }
+            } else {
+                // Auto (light) -> Dark -> Light
+                if (currentTheme === "auto") {
+                    setTheme("dark");
+                } else if (currentTheme === "dark") {
+                    setTheme("light");
+                } else {
+                    setTheme("auto");
+                }
+            }
+        }
+
+        function initTheme() {
+            // set theme defined in localStorage if there is one, or fallback to auto mode
+            const currentTheme = localStorage.getItem("theme");
+            currentTheme ? setTheme(currentTheme) : setTheme("auto");
+        }
+
+        function setupTheme() {
+            // Attach event handlers for toggling themes
+            const buttons = document.getElementsByClassName("theme-toggle");
+            Array.from(buttons).forEach((btn) => {
+                btn.addEventListener("click", cycleTheme);
+            });
+            initTheme();
+        }
+
+        setupTheme();
+    });
+}

app/static/notifications/notify.js

@@ -0,0 +1,92 @@
+var notify_badge_class;
+var notify_menu_class;
+var notify_api_url;
+var notify_fetch_count;
+var notify_unread_url;
+var notify_mark_all_unread_url;
+var notify_refresh_period = 15000;
+// Set notify_mark_as_read to true to mark notifications as read when fetched
+var notify_mark_as_read = false;
+var consecutive_misfires = 0;
+var registered_functions = [];
+
+function fill_notification_badge(data) {
+    var badges = document.getElementsByClassName(notify_badge_class);
+    if (badges) {
+        for (var i = 0; i < badges.length; i++) {
+            badges[i].innerHTML = data.unread_count;
+        }
+    }
+}
+
+function fill_notification_list(data) {
+    var menus = document.getElementsByClassName(notify_menu_class);
+    if (menus) {
+        var messages = data.unread_list.map(function (item) {
+            var message = "";
+
+            if (typeof item.actor !== 'undefined') {
+                message = item.actor;
+            }
+            if (typeof item.verb !== 'undefined') {
+                message = message + " " + item.verb;
+            }
+            if (typeof item.target !== 'undefined') {
+                message = message + " " + item.target;
+            }
+            if (typeof item.timestamp !== 'undefined') {
+                message = message + " " + item.timestamp;
+            }
+            return '<li>' + message + '</li>';
+        }).join('')
+
+        for (var i = 0; i < menus.length; i++) {
+            menus[i].innerHTML = messages;
+        }
+    }
+}
+
+function register_notifier(func) {
+    registered_functions.push(func);
+}
+
+function fetch_api_data() {
+    // only fetch data if a function is setup
+    if (registered_functions.length > 0) {
+        var r = new XMLHttpRequest();
+        var params = '?max=' + notify_fetch_count;
+
+        if (notify_mark_as_read) {
+            params += '&mark_as_read=true';
+        }
+
+        r.addEventListener('readystatechange', function(event) {
+            if (this.readyState === 4) {
+                if (this.status === 200) {
+                    consecutive_misfires = 0;
+                    var data = JSON.parse(r.responseText);
+                    for (var i = 0; i < registered_functions.length; i++) {
+                       registered_functions[i](data);
+                    }
+                } else {
+                    consecutive_misfires++;
+                }
+            }
+        });
+        r.open("GET", notify_api_url + params, true);
+        r.send();
+    }
+    if (consecutive_misfires < 10) {
+        setTimeout(fetch_api_data, notify_refresh_period);
+    } else {
+        var badges = document.getElementsByClassName(notify_badge_class);
+        if (badges) {
+            for (var i = 0; i < badges.length; i++) {
+                badges[i].innerHTML = "!";
+                badges[i].title = "Connection lost!"
+            }
+        }
+    }
+}
+
+setTimeout(fetch_api_data, 1000);

app/static/rest_framework/js/load-ajax-form.js

@@ -0,0 +1,3 @@
+$(document).ready(function() {
+  $('form').ajaxForm();
+});