From f0ac0f615349b8bdd9145314061904ed4dd76f1c Mon Sep 17 00:00:00 2001
From: Steven Tang <steven@steventang.net>
Date: Sun, 29 Aug 2021 11:10:54 +1000
Subject: [PATCH] fix: ui errors from conditional HasData on summary

---
 static/assets/app.js   | 17 ++++++++++-------
 views/login.tpl.html   |  4 ++--
 views/summary.tpl.html | 24 +++++++++++-------------
 3 files changed, 23 insertions(+), 22 deletions(-)

diff --git a/static/assets/app.js b/static/assets/app.js
index ce97786..20324e4 100644
--- a/static/assets/app.js
+++ b/static/assets/app.js
@@ -80,7 +80,7 @@ function draw(subselection) {
         .filter((c, i) => shouldUpdate(i))
         .forEach(c => c.destroy())
 
-    let projectChart = !projectsCanvas.classList.contains('hidden') && shouldUpdate(0)
+    let projectChart = projectsCanvas && !projectsCanvas.classList.contains('hidden') && shouldUpdate(0)
         ? new Chart(projectsCanvas.getContext('2d'), {
             type: 'horizontalBar',
             data: {
@@ -125,7 +125,7 @@ function draw(subselection) {
         })
         : null
 
-    let osChart = !osCanvas.classList.contains('hidden') && shouldUpdate(1)
+    let osChart = osCanvas && !osCanvas.classList.contains('hidden') && shouldUpdate(1)
         ? new Chart(osCanvas.getContext('2d'), {
             type: 'pie',
             data: {
@@ -158,7 +158,7 @@ function draw(subselection) {
         })
         : null
 
-    let editorChart = !editorsCanvas.classList.contains('hidden') && shouldUpdate(2)
+    let editorChart = editorsCanvas && !editorsCanvas.classList.contains('hidden') && shouldUpdate(2)
         ? new Chart(editorsCanvas.getContext('2d'), {
             type: 'pie',
             data: {
@@ -191,7 +191,7 @@ function draw(subselection) {
         })
         : null
 
-    let languageChart = !languagesCanvas.classList.contains('hidden') && shouldUpdate(3)
+    let languageChart = languagesCanvas && !languagesCanvas.classList.contains('hidden') && shouldUpdate(3)
         ? new Chart(languagesCanvas.getContext('2d'), {
             type: 'pie',
             data: {
@@ -224,7 +224,7 @@ function draw(subselection) {
         })
         : null
 
-    let machineChart = !machinesCanvas.classList.contains('hidden') && shouldUpdate(4)
+    let machineChart = machinesCanvas && !machinesCanvas.classList.contains('hidden') && shouldUpdate(4)
         ? new Chart(machinesCanvas.getContext('2d'), {
             type: 'pie',
             data: {
@@ -257,7 +257,7 @@ function draw(subselection) {
         })
         : null
 
-    let labelChart = !labelsCanvas.classList.contains('hidden') && shouldUpdate(5)
+    let labelChart = labelsCanvas && !labelsCanvas.classList.contains('hidden') && shouldUpdate(5)
         ? new Chart(labelsCanvas.getContext('2d'), {
             type: 'pie',
             data: {
@@ -305,9 +305,12 @@ function parseTopN() {
 }
 
 function togglePlaceholders(mask) {
-    const placeholderElements = containers.map(c => c.querySelector('.placeholder-container'))
+    const placeholderElements = containers.map(c => c ? c.querySelector('.placeholder-container'): null)
 
     for (let i = 0; i < mask.length; i++) {
+        if (placeholderElements[i] === null) {
+            continue;
+        }
         if (!mask[i]) {
             canvases[i].classList.add('hidden')
             placeholderElements[i].classList.remove('hidden')
diff --git a/views/login.tpl.html b/views/login.tpl.html
index 37fa54a..4972f2e 100644
--- a/views/login.tpl.html
+++ b/views/login.tpl.html
@@ -23,13 +23,13 @@
             <div class="mb-8">
                 <label class="inline-block text-sm mb-1 text-gray-500" for="username">Username</label>
                 <input class="shadow appearance-none bg-gray-800 focus:bg-gray-700 text-gray-300 border-green-700 focus:border-gray-500 border rounded w-full py-1 px-3"
-                       type="text" id="username"
+                       type="text" id="username" autocomplete="username"
                        name="username" placeholder="Enter your username" minlength="1" required autofocus>
             </div>
             <div class="mb-8">
                 <label class="inline-block text-sm mb-1 text-gray-500" for="password">Password</label>
                 <input class="shadow appearance-none bg-gray-800 focus:bg-gray-700 text-gray-300 border-green-700 focus:border-gray-500 border rounded w-full py-1 px-3"
-                       type="password" id="password"
+                       type="password" id="password" autocomplete="current-password"
                        name="password" placeholder="******" minlength="6" required>
             </div>
             <div class="flex justify-between items-center">
diff --git a/views/summary.tpl.html b/views/summary.tpl.html
index 8dda612..fddb064 100644
--- a/views/summary.tpl.html
+++ b/views/summary.tpl.html
@@ -232,12 +232,6 @@
 
 {{ template "foot.tpl.html" . }}
 
-<script>
-    window.addEventListener('load', function() {
-        document.getElementById('api-key-instruction').innerHTML = document.getElementById('api-key-container').value
-    })
-</script>
-
 <script>
     const languageColors = {{ .LanguageColors | json }}
     const editorColors = {{ .EditorColors | json }}
@@ -251,14 +245,18 @@
     wakapiData.machines = {{ .Machines | json }}
     wakapiData.labels = {{ .Labels | json }}
 
-    document.getElementById("to-date-picker").onchange = function () {
-        var input = document.getElementById("from-date-picker");
-        input.setAttribute("max", this.value);
-    }
+    if (document.getElementById('to-date-picker') !== null) {
+        document.getElementById("to-date-picker").onchange = function () {
+            var input = document.getElementById("from-date-picker");
+            input.setAttribute("max", this.value);
+        }
 
-    document.getElementById("from-date-picker").onchange = function () {
-        var input = document.getElementById("to-date-picker");
-        input.setAttribute("min", this.value);
+        document.getElementById("from-date-picker").onchange = function () {
+            var input = document.getElementById("to-date-picker");
+            input.setAttribute("min", this.value);
+        }
+    } else {
+        document.getElementById('api-key-instruction').innerHTML = document.getElementById('api-key-container').value
     }
 
 </script>