reworked dashboard with table summary

dispatcher/static/dashboard.css

@@ -34,6 +34,7 @@
     background-color: var(--dark4);
 }
 
+/*
 .by-range #list {
     display: flex;
     flex-direction: column;
@@ -51,4 +52,44 @@
     font-style: italic;
     padding: 0.4em 0.8em;
     background-color: var(--dark2);
+}
+*/
+
+.by-range .tables {
+    display: flex;
+}
+
+.by-range .tables table {
+    border-collapse: collapse;
+}
+
+.by-range .tables tr {
+    height: 2em;
+}
+
+.by-range .tables td {
+    padding: 0 0.4em;
+    min-width: 3em;
+}
+
+#headers-table th {
+    text-align: right;
+    padding: 0 0.8em;
+}
+
+#projects-table th {
+    text-align: center;
+    padding: 0 0.4em;
+}
+
+#projects-table td {
+    text-align: right;
+}
+
+.by-range tr.project-nums {
+    border-bottom: solid var(--light1) 2px;
+}
+
+#projects-table th, #projects-table td {
+    border-left: solid var(--light4) 1px;
 }

dispatcher/static/dashboard.js

@@ -10,7 +10,7 @@ function prevMonth() {
         curMonth += 12
         curYear -= 1
     }
-    updateListMonthly()
+    updateTableMonthly()
 }
 function nextMonth() {
     curMonth = curMonth + 1
@@ -18,18 +18,18 @@ function nextMonth() {
         curMonth -= 12
         curYear += 1
     }
-    updateListMonthly()
+    updateTableMonthly()
 }
 function prevWeek() {
     curWeekDate = new Date(curWeekDate.valueOf() - 7 * DAY_MS)
-    updateListWeekly()
+    updateTableWeekly()
 }
 function nextWeek() {
     curWeekDate = new Date(curWeekDate.valueOf() + 7 * DAY_MS)
-    updateListWeekly()
+    updateTableWeekly()
 }
 
-function updateListMonthly() {
+function updateTableMonthly() {
     let year = curYear.toString().padStart(4, "0")
     let month = (curMonth + 1).toString().padStart(2, "0")
     let today = new Date()
@@ -45,11 +45,11 @@ function updateListMonthly() {
         if (res.status !== "success") {
             return
         }
-        setListElements(res.data.parents)
+        updateTable(res.data)
     })
 }
 
-function updateListWeekly() {
+function updateTableWeekly() {
     let weekNum = curWeekDate.getWeek()
     let weekDay = (curWeekDate.getDay() + 6) % 7
     let startDate = new Date(curWeekDate.valueOf() - weekDay * DAY_MS)
@@ -68,28 +68,53 @@ function updateListWeekly() {
         if (res.status !== "success") {
             return
         }
-        setListElements(res.data.parents)
+        updateTable(res.data)
     })
 }
 
-function setListElements(data) {
-    data = data.filter(parent => parent.duration !== null)
-    let list = document.getElementById("list")
-    let template = document.querySelector(".by-range .template.row").cloneNode(true)
-    template.classList.remove("template")
-    list.innerHTML = ""
-    if (data.length === 0) {
-        let noData = document.querySelector(".by-range .template.no-data").cloneNode(true)
-        noData.classList.remove("template")
-        list.appendChild(noData)
-        return
-    }
-    data.forEach(parent => {
-        let row = template.cloneNode(true)
-        row.querySelector(".name").innerText = `${parent.name} (${parent.project_num})`
-        row.querySelector(".duration").innerText = formatDuration(parent.duration)
-        list.appendChild(row)
+function updateTable(data) {
+    let totalWorked = data.clockings.map(c => c.total).reduce((a, b) => a + b, 0)
+
+    let parents = data.parents.filter(parent => parent.duration !== null && parent.is_productive)
+
+    let headers = document.getElementById("headers-table")
+    let table = document.getElementById("projects-table")
+    let projNames = table.querySelector(".project-names")
+    let projNums = table.querySelector(".project-nums")
+    let totDurations = table.querySelector(".total-durations")
+    let workingRatios = table.querySelector(".working-time-ratios")
+    let imputedRatios = table.querySelector(".imputed-time-ratios")
+    let sagexHours = table.querySelector(".sagex-hours")
+    let realSagexHours = table.querySelector(".real-sagex-hours")
+    table.querySelectorAll("tr").forEach(row => row.innerHTML = "")
+
+    let totalImputed = 0
+    parents.forEach(parent => {
+        totalImputed += +parent.duration
     })
+    headers.querySelector(".total-clocking").innerText = formatDuration(totalWorked)
+    headers.querySelector(".total-duration").innerText = formatDuration(totalImputed)
+
+    let totalSagex = 0
+    parents.forEach(parent => {
+        let duration = +parent.duration
+        let name = document.createElement("th")
+        name.innerText = parent.name
+        projNames.appendChild(name)
+        projNums.insertCell(-1).innerText = parent.project_num
+        table.querySelector(".clocking").insertCell(-1)
+        totDurations.insertCell(-1).innerText = formatDuration(duration)
+
+        let ratioWorking = duration / totalWorked
+        let ratioImputed = duration / totalImputed
+        workingRatios.insertCell(-1).innerText = formatPercentage(ratioWorking)
+        imputedRatios.insertCell(-1).innerText = formatPercentage(ratioImputed)
+        let sagexDuration = duration * totalWorked / totalImputed
+        totalSagex += sagexDuration
+        sagexHours.insertCell(-1).innerText = formatDuration(sagexDuration)
+        realSagexHours.insertCell(-1)
+    })
+    headers.querySelector(".sagex-hours-total").innerText = formatDuration(totalSagex)
 }
 
 window.addEventListener("load", () => {
@@ -115,13 +140,13 @@ window.addEventListener("load", () => {
         if (mode === "weekly") {
             monthGrp.classList.add("hidden")
             weekGrp.classList.remove("hidden")
-            updateListWeekly()
+            updateTableWeekly()
         } else {
             monthGrp.classList.remove("hidden")
             weekGrp.classList.add("hidden")
-            updateListMonthly()
+            updateTableMonthly()
         }
     })
 
-    updateListMonthly()
+    updateTableMonthly()
 })