fix change template mode; fix schedule view; minor fixes

project/assets/app.js

@@ -14,4 +14,7 @@ import './styles/main.less';
 global.jQuery = global.$ = require('jquery');
 require('@fortawesome/fontawesome-free/css/all.min.css');
 require('bootstrap');
-$('[data-toggle="tooltip"]').tooltip();
+
+$(function () {
+    $('[data-toggle="tooltip"]').tooltip()
+})

project/assets/bootstrap.js

@@ -1,9 +1,11 @@
 import { startStimulusApp } from '@symfony/stimulus-bridge';
-import './services/theme_controller'
+import {tmp} from "./services/theme_controller";
+
 // Registers Stimulus controllers from controllers.json and in the controllers/ directory
 export const app = startStimulusApp(require.context(
     '@symfony/stimulus-bridge/lazy-controller-loader!./controllers',
     true,
     /\.[jt]sx?$/
 ));
+new tmp()
 // register any custom, 3rd party controllers here

project/assets/controllers/thememode_controller.js

@@ -1,4 +1,6 @@
 import { Controller } from '@hotwired/stimulus';
+import { tmp } from '../services/theme_controller'
+
 export default class extends Controller {
     modes;
     currentState;
@@ -6,6 +8,8 @@ export default class extends Controller {
         this.modes = $(this.element).find('p');
         this.currentState = localStorage.getItem('themeMode');
         this.changeState()
+        var tmp1 = new tmp();
+        tmp1.update();
     }
     switch(event) {
         var mode = event.params.mode;

project/assets/services/theme_controller.js

@@ -1,29 +1,38 @@
-(() => {
-    'use strict'
+export class tmp {
+    constructor() {
+        const getStoredTheme = () => localStorage.getItem('theme')
+        const getPreferredTheme = () => {
+            const storedTheme = getStoredTheme()
+            if (storedTheme) {
+                return storedTheme
+            }
 
-    const getStoredTheme = () => localStorage.getItem('theme')
-    const setStoredTheme = theme => localStorage.setItem('theme', theme)
-
-    const getPreferredTheme = () => {
-        const storedTheme = getStoredTheme()
-        if (storedTheme) {
-            return storedTheme
+            return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
         }
 
-        return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+        this.setTheme(getPreferredTheme())
+        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+            const storedTheme = getStoredTheme()
+            if (storedTheme !== 'light' && storedTheme !== 'dark') {
+                this.setTheme(getPreferredTheme())
+            }
+        })
+
+        window.addEventListener('DOMContentLoaded', () => {
+            this.showActiveTheme(getPreferredTheme())
+            this.update();
+        })
     }
 
-    const setTheme = theme => {
+    setTheme = theme => {
         if (theme === 'auto') {
             document.documentElement.setAttribute('data-bs-theme', (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'))
         } else {
             document.documentElement.setAttribute('data-bs-theme', theme)
         }
     }
-
-    setTheme(getPreferredTheme())
-
-    const showActiveTheme = (theme, focus = false) => {
+    setStoredTheme = theme => localStorage.setItem('theme', theme)
+    showActiveTheme = (theme, focus = false) => {
         const themeSwitcher = document.querySelector('#bd-theme')
 
         if (!themeSwitcher) {
@@ -50,26 +59,15 @@
             themeSwitcher.focus()
         }
     }
-
-    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
-        const storedTheme = getStoredTheme()
-        if (storedTheme !== 'light' && storedTheme !== 'dark') {
-            setTheme(getPreferredTheme())
-        }
-    })
-
-    window.addEventListener('DOMContentLoaded', () => {
-        showActiveTheme(getPreferredTheme())
-
+    update() {
         document.querySelectorAll('[data-bs-theme-value]')
             .forEach(toggle => {
                 toggle.addEventListener('click', () => {
                     const theme = toggle.getAttribute('data-bs-theme-value')
-                    console.log(theme)
-                    setStoredTheme(theme)
-                    setTheme(theme)
-                    showActiveTheme(theme, true)
+                    this.setStoredTheme(theme)
+                    this.setTheme(theme)
+                    this.showActiveTheme(theme, true)
                 })
             })
-    })
-})()
+    }
+}

project/assets/styles/main.less

@@ -59,5 +59,10 @@ body {
 /*    background-color: lightgray;*/
 /*}*/
 a {
-  text-decoration: none !important;
+  //text-decoration: none !important;
+}
+.spinner-grow.overdue {
+  position: absolute;
+  top: 2px;
+  right: 2px;
 }