added weekly total + highlight clocking inconsistencies

dispatcher/static/table.css

@@ -1,3 +1,7 @@
+:root {
+    --invalid-col: #f1232394;
+}
+
 #table {
     border-collapse: collapse;
     font-size: 80%;
@@ -49,6 +53,11 @@
                 border-top: solid #71717185 1px;
                 td {
                     padding: 0.4em;
+                    font-style: italic;
+                    &.invalid {
+                        background-color: var(--invalid-col);
+                        font-weight: bold;
+                    }
                 }
             }
 
@@ -85,6 +94,17 @@
         border-bottom: var(--border);
     }
 
+    .day-totals {
+        td {
+            text-align: right;
+            font-style: italic;
+            &.invalid {
+                background-color: var(--invalid-col);
+                font-weight: bold;
+            }
+        }
+    }
+
     col.day-5, col.day-6 {
         background-color: var(--dark3);
     }

dispatcher/static/table.js

@@ -9,6 +9,7 @@ class Table {
         this.weekNames = elmt.querySelector(".week-names")
         this.dayNames = elmt.querySelector(".day-names")
         this.dayDates = elmt.querySelector(".day-dates")
+        this.dayTotals = elmt.querySelector(".day-totals")
         this.columns = elmt.querySelector(".columns")
 
         this.timeInputTemplate = getTemplate("time-input")
@@ -22,6 +23,7 @@ class Table {
         this.endDate = today
 
         this.totalProjects = 0
+        this.dailyTotals = []
         this.clockingTotals = []
         this.clockingRemotes = []
 
@@ -67,6 +69,7 @@ class Table {
         this.weekNames.querySelectorAll("td").forEach(c => c.remove())
         this.dayNames.querySelectorAll("td").forEach(c => c.remove())
         this.dayDates.innerHTML = ""
+        this.dayTotals.querySelectorAll("td").forEach(c => c.remove())
         this.times.querySelectorAll("tr.project").forEach(r => r.remove())
         this.nDays = 0
     }
@@ -112,6 +115,7 @@ class Table {
             this.addClockings(date)
             let dayName = this.dayNames.insertCell(this.nDays + 2)
             let dayDate = this.dayDates.insertCell(this.nDays)
+            this.dayTotals.insertCell(this.nDays + 1)
             let weekDay = (date.getDay() + 6) % 7
             dayName.innerText = DAYS_SHORT[weekDay]
             dayDate.innerText = `${dayPadded}/${monthPadded}`
@@ -211,6 +215,7 @@ class Table {
     displayData(data) {
         this.displayClockings(data.clockings)
         this.totalProjects = 0
+        this.dailyTotals = Array(this.nDays).fill(0)
         data.parents.forEach(parent => {
             let parentDurations = Array(this.nDays).fill(0)
 
@@ -224,6 +229,7 @@ class Table {
                     durations[i] = hours
                     total += hours
                     parentDurations[i] += hours
+                    this.dailyTotals[i] += hours
                 })
                 return {
                     id: project.id,
@@ -337,6 +343,24 @@ class Table {
             let sagexTime = imputedTimeRatio * totalClockings
             parent.cells[this.nDays + 5].innerText = Math.round(sagexTime * 100) / 100
         })
+
+        for (let i = 0; i < this.nDays; i++) {
+            let total = this.dailyTotals[i]
+            let cell = this.dayTotals.cells[i + 1]
+            if (total === 0) {
+                cell.innerText = ""
+            } else {
+                cell.innerText = Math.round(total * 100) / 100
+            }
+            let clocking = this.clockings.querySelector(".clocking.total").cells[i + 1]
+            if (total > this.clockingTotals[i]) {
+                clocking.classList.add("invalid")
+                cell.classList.add("invalid")
+            } else {
+                clocking.classList.remove("invalid")
+                cell.classList.remove("invalid")
+            }
+        }
     }
 
     post(endpoint, data) {

templates/table.html

@@ -63,6 +63,9 @@
                 <th rowspan="2">N° sagex</th>
             </tr>
             <tr class="day-dates"></tr>
+            <tr class="day-totals">
+                <th colspan="2">TOTAL</th>
+            </tr>
         </tbody>
     </table>
 {% endblock %}