fix: ui errors from conditional HasData on summary

This commit is contained in:
Steven Tang 2021-08-29 11:10:54 +10:00
parent 6aad1633e1
commit f0ac0f6153
No known key found for this signature in database
GPG Key ID: AA0C5A4496B7ADF5
3 changed files with 23 additions and 22 deletions

View File

@ -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')

View File

@ -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">

View File

@ -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>