added real sagex hours + changed to DurationField

dispatcher/static/base.js

@@ -57,6 +57,7 @@ function formatDate(date) {
 function formatDuration(duration) {
     let hours = Math.floor(duration / 60)
     duration -= hours * 60
+    duration = Math.round(duration)
     let res = ""
     if (hours > 0) {
         res += hours.toString() + "h"

dispatcher/static/dashboard.css

@@ -92,4 +92,51 @@
 
 #projects-table th, #projects-table td {
     border-left: solid var(--light4) 1px;
+}
+
+.by-range tr.real-sagex-hours .sagex-hours {
+    height: 2em;
+
+    input {
+        max-width: 3em;
+        background: none;
+        color: var(--light1);
+
+        &:focus-visible {
+            outline: solid var(--dark4) 1px;
+        }
+
+        &::-webkit-inner-spin-button {
+            display: none;
+        }
+
+        &.hours {
+            text-align: right;
+        }
+        &.minutes {
+            text-align: left;
+            max-width: 2em;
+        }
+    }
+
+    &.saved {
+        input {
+            animation-name: sagex-saved;
+            animation-duration: 1s;
+        }
+    }
+}
+
+@keyframes sagex-saved {
+    0% {
+
+    }
+
+    10%, 60% {
+        border-color: var(--accent);
+    }
+
+    100% {
+
+    }
 }

dispatcher/static/dashboard.js

@@ -95,6 +95,8 @@ function updateTable(data) {
     headers.querySelector(".total-clocking").innerText = formatDuration(totalWorked)
     headers.querySelector(".total-duration").innerText = formatDuration(totalImputed)
 
+    let sagexHoursTemplate = getTemplate("sagex-hours")
+
     let totalSagex = 0
     parents.forEach(parent => {
         let duration = +parent.duration
@@ -112,11 +114,66 @@ function updateTable(data) {
         let sagexDuration = duration * totalWorked / totalImputed
         totalSagex += sagexDuration
         sagexHours.insertCell(-1).innerText = formatDuration(sagexDuration)
-        realSagexHours.insertCell(-1)
+        let td = sagexHoursTemplate.cloneNode(true)
+        let [h, m, s] = parent.real_sagex_hours.split(":")
+        let hoursInput = td.querySelector("input.hours")
+        let minutesInput = td.querySelector("input.minutes")
+        hoursInput.value = h
+        minutesInput.value = m
+        let timeout = null
+        minutesInput.addEventListener("input", () => reformatTime(minutesInput))
+        td.addEventListener("change", () => {
+            if (timeout !== null) {
+                clearTimeout(timeout)
+            }
+            timeout = setTimeout(() => {
+                updateSagex(parent.id, td)
+            }, 1000)
+        })
+        realSagexHours.appendChild(td)
     })
     headers.querySelector(".sagex-hours-total").innerText = formatDuration(totalSagex)
 }
 
+function reformatTime(input) {
+    let value = input.value
+    if (value.length === 1) {
+        input.value = "0" + value
+    } else if (value.length > 2) {
+        input.value = value.slice(value.length - 2)
+    }
+}
+
+function updateSagex(id, cell) {
+    let hoursInput = cell.querySelector(".hours")
+    let minutesInput = cell.querySelector(".minutes")
+    reformatTime(minutesInput)
+
+    let hours = +hoursInput.value
+    let minutes = +minutesInput.value
+    let year = curYear.toString().padStart(4, "0")
+    let month = (curMonth + 1).toString().padStart(2, "0")
+    let date = `${year}-${month}`
+    let fd = new FormData()
+    fd.set("minutes", hours * 60 + minutes)
+
+    req(`/sagex/${id}/${date}/`, {
+        method: "POST",
+        body: fd
+    }).then(res => {
+        return res.json()
+    }).then(res => {
+        if (res.status === "success") {
+            cell.classList.add("saved")
+            cell.addEventListener("animationend", () => {
+                cell.classList.remove("saved")
+            }, {once: true})
+        } else {
+            alert(res.error)
+        }
+    })
+}
+
 window.addEventListener("load", () => {
     prevMonthBtn = document.getElementById("prev-month")
     nextMonthBtn = document.getElementById("next-month")