Fixed sidebar toggle in Query Results

The element was replaced so the click event listener
was destroyed in the process.

- Added onclick inside the rendered html
- Additional refactoring inside this commit

Plan/common/src/main/resources/assets/plan/web/js/query.js

@@ -36,6 +36,73 @@ const InvalidEntries = {
     }
 }
 
+function loadFilters(json) {
+    filters.push(...json.filters);
+
+    filterView = json.view;
+
+    document.getElementById('viewFromDateField').setAttribute('placeholder', json.view.afterDate);
+    document.getElementById('viewFromTimeField').setAttribute('placeholder', json.view.afterTime);
+    document.getElementById('viewToDateField').setAttribute('placeholder', json.view.beforeDate);
+    document.getElementById('viewToTimeField').setAttribute('placeholder', json.view.beforeTime);
+
+    const s = {
+        name: {playersOnline: 'Players Online'},
+        tooltip: {zeroDecimals: {valueDecimals: 0}},
+        type: {areaSpline: 'areaspline'}
+    };
+
+    const playersOnlineSeries = {
+        name: 'Players Online', type: 'areaspline', tooltip: {valueDecimals: 0},
+        data: json.viewPoints, color: '#9E9E9E', yAxis: 0
+    }
+
+    graphs.push(Highcharts.stockChart('viewChart', {
+        rangeSelector: {
+            selected: 3,
+            buttons: linegraphButtons
+        },
+        yAxis: {
+            softMax: 2,
+            softMin: 0
+        },
+        title: {text: ''},
+        plotOptions: {
+            areaspline: {
+                fillOpacity: 0.4
+            }
+        },
+        series: [playersOnlineSeries],
+        xAxis: {
+            events: {
+                afterSetExtremes: function (event) {
+                    if (this) {
+                        const afterDate = Highcharts.dateFormat('%d/%m/%Y', this.min);
+                        const afterTime = Highcharts.dateFormat('%H:%M', this.min);
+                        const beforeDate = Highcharts.dateFormat('%d/%m/%Y', this.max);
+                        const beforeTime = Highcharts.dateFormat('%H:%M', this.max);
+                        document.getElementById('viewFromDateField').value = afterDate;
+                        document.getElementById('viewFromTimeField').value = afterTime;
+                        document.getElementById('viewToDateField').value = beforeDate;
+                        document.getElementById('viewToTimeField').value = beforeTime;
+                        const dontUpdateGraph = true;
+                        setFilterOption('view', 'viewFromDateField', 'afterDate', isValidDate, correctDate, dontUpdateGraph);
+                        setFilterOption('view', 'viewFromTimeField', 'afterTime', isValidTime, correctTime, dontUpdateGraph);
+                        setFilterOption('view', 'viewToDateField', 'beforeDate', isValidDate, correctDate, dontUpdateGraph);
+                        setFilterOption('view', 'viewToTimeField', 'beforeTime', isValidTime, correctTime, dontUpdateGraph);
+                    }
+                }
+            }
+        }
+    }));
+
+    let filterElements = '';
+    for (let i = 0; i < filters.length; i++) {
+        filterElements += createFilterSelector('#filters', i, filters[i]);
+    }
+    document.getElementById('filter-dropdown').innerHTML = filterElements;
+}
+
 class Filter {
     constructor(kind) {
         this.kind = kind;
@@ -439,7 +506,7 @@ function renderDataResultScreen(resultCount, view) {
     document.querySelector('#content .tab').innerHTML =
         `<div class="container-fluid mt-4">
             <div class="d-sm-flex align-items-center justify-content-between mb-4">
-                <h1 class="h3 mb-0 text-gray-800"><i class="sidebar-toggler fa fa-fw fa-bars"></i>Plan &middot;
+                <h1 class="h3 mb-0 text-gray-800"><i class="sidebar-toggler fa fa-fw fa-bars" onclick="toggleSidebar()"></i>Plan &middot;
                     Query Results</h1>
                 <p class="mb-0 text-gray-800">(matched ${resultCount} players)</p>
             </div>

Plan/common/src/main/resources/assets/plan/web/js/sb-admin-2.js

@@ -100,15 +100,16 @@ reduceSidebar();
 $(window).resize(reduceSidebar);
 
 function toggleSidebar() {
-    $('body').toggleClass('sidebar-hidden');
+    document.querySelector('body').classList.toggle('sidebar-hidden');
     $('.sidebar .collapse').collapse('hide');
 
-    const closeModal = $('.sidebar-close-modal');
+    const closeModal = document.querySelector('.sidebar-close-modal');
     if ($(window).width() < 900) {
-        closeModal.toggleClass('hidden');
+        closeModal.classList.toggle('hidden');
-    } else {
+    } else if (!closeModal.classList.contains('hidden')) {
-        if (!closeModal.hasClass('hidden')) closeModal.addClass('hidden');
+        closeModal.classList.add('hidden');
     }
 }
 
-$('.sidebar-toggler,.sidebar-close-modal').on('click', toggleSidebar);
+document.querySelectorAll('.sidebar-toggler,.sidebar-close-modal')
+    .forEach(element => element.addEventListener('click', toggleSidebar));

Plan/common/src/main/resources/assets/plan/web/login.html

@@ -27,7 +27,7 @@
 
 <script>
     function login() {
-        msg.addClass('hidden');
+        errorElement.classList.add('hidden');
         const user = $('#inputUser').val();
         if (!user || user.length < 1) {
             return displayError('You need to specify a Username');
@@ -58,7 +58,6 @@
     }
 
     document.addEventListener('keydown', (event) => {
-        console.log(event.key);
         if (event.key === 'Enter') login();
     });
 </script>
@@ -225,14 +224,14 @@
         login();
     });
 
-    const msg = $(`#fail-msg`);
+    const errorElement = document.getElementById("fail-msg");
 
     function displayError(message) {
-        msg.text(message);
+        errorElement.innerText = message;
-        msg.removeClass('hidden');
+        errorElement.classList.remove('hidden');
     }
 
-    $('#forgot-button').click(() => $('#forgotModal').modal());
+    document.getElementById('forgot-button').addEventListener('click', () => $('#forgotModal').modal());
 </script>
 </body>
 

Plan/common/src/main/resources/assets/plan/web/query.html

@@ -86,6 +86,9 @@
                         <div class="col-xs-12 col-sm-12 col-lg-12">
                             <div class="card shadow mb-4">
                                 <div class="card-body" id="data_player_info">
+                                    <div class="hidden alert alert-danger" id="fail-msg">
+                                        Failed
+                                    </div>
                                     <label class="mt-2 mb-0" for="viewFromDateField">Show a view</label>
                                     <div class="mt-2 input-group input-row">
                                         <div class="col-auto">
@@ -347,70 +350,13 @@
         runQuery();
     } else {
         jsonRequest("./v1/filters", function (json, error) {
-            filters.push(...json.filters);
+            if (json) {
-
+                loadFilters(json);
-            filterView = json.view;
+            } else if (error) {
-
+                const errorElement = document.getElementById("fail-msg");
-            document.getElementById('viewFromDateField').setAttribute('placeholder', json.view.afterDate);
+                errorElement.innerText = error;
-            document.getElementById('viewFromTimeField').setAttribute('placeholder', json.view.afterTime);
+                errorElement.classList.remove('hidden');
-            document.getElementById('viewToDateField').setAttribute('placeholder', json.view.beforeDate);
-            document.getElementById('viewToTimeField').setAttribute('placeholder', json.view.beforeTime);
-
-            const s = {
-                name: {playersOnline: 'Players Online'},
-                tooltip: {zeroDecimals: {valueDecimals: 0}},
-                type: {areaSpline: 'areaspline'}
-            };
-
-            const playersOnlineSeries = {
-                name: 'Players Online', type: 'areaspline', tooltip: {valueDecimals: 0},
-                data: json.viewPoints, color: '#9E9E9E', yAxis: 0
             }
-
-            graphs.push(Highcharts.stockChart('viewChart', {
-                rangeSelector: {
-                    selected: 3,
-                    buttons: linegraphButtons
-                },
-                yAxis: {
-                    softMax: 2,
-                    softMin: 0
-                },
-                title: {text: ''},
-                plotOptions: {
-                    areaspline: {
-                        fillOpacity: 0.4
-                    }
-                },
-                series: [playersOnlineSeries],
-                xAxis: {
-                    events: {
-                        afterSetExtremes: function (event) {
-                            if (this) {
-                                const afterDate = Highcharts.dateFormat('%d/%m/%Y', this.min);
-                                const afterTime = Highcharts.dateFormat('%H:%M', this.min);
-                                const beforeDate = Highcharts.dateFormat('%d/%m/%Y', this.max);
-                                const beforeTime = Highcharts.dateFormat('%H:%M', this.max);
-                                document.getElementById('viewFromDateField').value = afterDate;
-                                document.getElementById('viewFromTimeField').value = afterTime;
-                                document.getElementById('viewToDateField').value = beforeDate;
-                                document.getElementById('viewToTimeField').value = beforeTime;
-                                const dontUpdateGraph = true;
-                                setFilterOption('view', 'viewFromDateField', 'afterDate', isValidDate, correctDate, dontUpdateGraph);
-                                setFilterOption('view', 'viewFromTimeField', 'afterTime', isValidTime, correctTime, dontUpdateGraph);
-                                setFilterOption('view', 'viewToDateField', 'beforeDate', isValidDate, correctDate, dontUpdateGraph);
-                                setFilterOption('view', 'viewToTimeField', 'beforeTime', isValidTime, correctTime, dontUpdateGraph);
-                            }
-                        }
-                    }
-                }
-            }));
-
-            let filterElements = '';
-            for (let i = 0; i < filters.length; i++) {
-                filterElements += createFilterSelector('#filters', i, filters[i]);
-            }
-            document.getElementById('filter-dropdown').innerHTML = filterElements;
         });
     }
 </script>

Plan/common/src/main/resources/assets/plan/web/register.html

@@ -184,11 +184,11 @@
 <script src="js/color-selector.js"></script>
 
 <script id="mainScript">
-    const msg = $(`#fail-msg`);
+    const errorElement = document.getElementById("fail-msg");
 
     function displayError(message) {
-        msg.text(message);
+        errorElement.innerText = message;
-        msg.removeClass('hidden');
+        errorElement.classList.remove('hidden');
     }
 
     function checkIfRegistered(code) {
@@ -204,8 +204,8 @@
         })
     }
 
-    $('#register-button').click(() => {
+    document.getElementById('register-button').addEventListener('click', () => {
-        msg.addClass('hidden');
+        errorElement.classList.add('hidden');
         const user = $('#inputUser').val();
         if (!user || user.length < 1) {
             return displayError('You need to specify a Username');