added theory/real SageX hours difference row

dispatcher/static/base.js

@@ -55,10 +55,15 @@ function formatDate(date) {
 }
 
 function formatDuration(duration) {
+    let res = ""
+    if (duration < 0) {
+        duration *= -1
+        res += "-"
+    }
     let hours = Math.floor(duration / 60)
     duration -= hours * 60
     duration = Math.round(duration)
-    let res = ""
+
     if (hours > 0) {
         res += hours.toString() + "h"
         res += duration.toString().padStart(2, "0")

dispatcher/static/dashboard.css

@@ -70,6 +70,7 @@
 .by-range .tables td {
     padding: 0 0.4em;
     min-width: 3em;
+    text-align: right;
 }
 
 #headers-table th {
@@ -82,14 +83,14 @@
     padding: 0 0.4em;
 }
 
-#projects-table td {
-    text-align: right;
-}
-
 .by-range tr.project-nums {
     border-bottom: solid var(--light1) 2px;
 }
 
+#projects-table tr.project-nums td {
+    text-align: center;
+}
+
 #projects-table th, #projects-table td {
     border-left: solid var(--light4) 1px;
 }

dispatcher/static/dashboard.js

@@ -86,6 +86,7 @@ function updateTable(data) {
     let imputedRatios = table.querySelector(".imputed-time-ratios")
     let sagexHours = table.querySelector(".sagex-hours")
     let realSagexHours = table.querySelector(".real-sagex-hours")
+    let differences = table.querySelector(".sagex-diff")
     table.querySelectorAll("tr").forEach(row => row.innerHTML = "")
 
     let totalImputed = 0
@@ -98,6 +99,7 @@ function updateTable(data) {
     let sagexHoursTemplate = getTemplate("sagex-hours")
 
     let totalSagex = 0
+    let totalRealSagex = 0
     parents.forEach(parent => {
         let duration = +parent.duration
         let name = document.createElement("th")
@@ -113,7 +115,10 @@ function updateTable(data) {
         imputedRatios.insertCell(-1).innerText = formatPercentage(ratioImputed)
         let sagexDuration = duration * totalWorked / totalImputed
         totalSagex += sagexDuration
-        sagexHours.insertCell(-1).innerText = formatDuration(sagexDuration)
+        let sagexCell = sagexHours.insertCell(-1)
+        sagexCell.innerText = formatDuration(sagexDuration)
+        sagexCell.dataset.duration = sagexDuration
+
         let td = sagexHoursTemplate.cloneNode(true)
         let [h, m, s] = parent.real_sagex_hours.split(":")
         let hoursInput = td.querySelector("input.hours")
@@ -131,8 +136,14 @@ function updateTable(data) {
             }, 1000)
         })
         realSagexHours.appendChild(td)
+        let real = (+h)*60 + (+m)
+        let diff = real - sagexDuration
+        differences.insertCell(-1).innerText = formatDuration(diff)
+        totalRealSagex += real
     })
     headers.querySelector(".sagex-hours-total").innerText = formatDuration(totalSagex)
+    headers.querySelector(".real-sagex-hours-total").innerText = formatDuration(totalRealSagex)
+    headers.querySelector(".sagex-diff-total").innerText = formatDuration(totalRealSagex - totalSagex)
 }
 
 function reformatTime(input) {
@@ -144,18 +155,22 @@ function reformatTime(input) {
     }
 }
 
+function getDuration(td) {
+    let hours = +td.querySelector(".hours").value
+    let minutes = +td.querySelector(".minutes").value
+    return hours * 60 + minutes
+}
+
 function updateSagex(id, cell) {
-    let hoursInput = cell.querySelector(".hours")
     let minutesInput = cell.querySelector(".minutes")
     reformatTime(minutesInput)
 
-    let hours = +hoursInput.value
+    let newDuration = getDuration(cell)
-    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)
+    fd.set("minutes", newDuration)
 
     req(`/sagex/${id}/${date}/`, {
         method: "POST",
@@ -168,6 +183,24 @@ function updateSagex(id, cell) {
             cell.addEventListener("animationend", () => {
                 cell.classList.remove("saved")
             }, {once: true})
+            let theoreticalRow = document.querySelector("#projects-table tr.sagex-hours")
+            let realRow = document.querySelector("#projects-table tr.real-sagex-hours")
+            let diffRow = document.querySelector("#projects-table tr.sagex-diff")
+            let totalRealCell = document.querySelector("#headers-table tr.real-sagex-hours .real-sagex-hours-total")
+            let totalDiffCell = document.querySelector("#headers-table tr.sagex-diff .sagex-diff-total")
+
+            let durationsTheory = Array.from(theoreticalRow.cells).map(c => +c.dataset.duration)
+            let durationsReal = Array.from(realRow.cells).map(getDuration)
+            let totalTheory = durationsTheory.reduce((a, b) => a + b, 0)
+            let totalReal = durationsReal.reduce((a, b) => a + b, 0)
+            let totalDiff = totalReal - totalTheory
+            totalRealCell.innerText = formatDuration(totalReal)
+            totalDiffCell.innerText = formatDuration(totalDiff)
+
+            let theory = +theoreticalRow.cells[cell.cellIndex].dataset.duration
+            let diff = newDuration - theory
+            diffRow.cells[cell.cellIndex].innerText = formatDuration(diff)
+
         } else {
             alert(res.error)
         }

templates/dashboard.html

@@ -60,7 +60,11 @@
                 </tr>
                 <tr class="real-sagex-hours">
                     <th>Hours on SageX (real)</th>
-                    <td class="sagex-hours-diff"></td>
+                    <td class="real-sagex-hours-total"></td>
+                </tr>
+                <tr class="sagex-diff">
+                    <th>Difference</th>
+                    <td class="sagex-diff-total"></td>
                 </tr>
             </table>
             <table id="projects-table">
@@ -72,6 +76,7 @@
                 <tr class="imputed-time-ratios"></tr>
                 <tr class="sagex-hours"></tr>
                 <tr class="real-sagex-hours"></tr>
+                <tr class="sagex-diff"></tr>
             </table>
         </div>
     </div>