Merge pull request 'v0.1.3: minor fixes' (#4) from dev into main

Reviewed-on: #4

TimeDispatcher/settings.py

@@ -17,7 +17,7 @@ from dotenv import load_dotenv
 # Build paths inside the project like this: BASE_DIR / 'subdir'.
 BASE_DIR = Path(__file__).resolve().parent.parent
 
-APP_VERSION = "0.1.0"
+APP_VERSION = "0.1.3"
 
 load_dotenv(BASE_DIR / ".env")
 

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,37 +215,46 @@ 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)
 
             let projects = parent.projects.map(project => {
                 let durations = Array(this.nDays).fill("")
+                let total = 0
                 project.tasks.forEach(task => {
                     let date = new Date(task.date)
                     let i = Math.floor((date.valueOf() - this.startDate.valueOf()) / DAY_MS)
                     let hours = task.duration / 60
                     durations[i] = hours
+                    total += hours
                     parentDurations[i] += hours
+                    if (parent.is_productive) {
+                        this.dailyTotals[i] += hours
+                    }
                 })
                 return {
                     id: project.id,
                     name: project.name,
-                    durations: durations
+                    durations: durations,
+                    total: total
                 }
             })
 
-            this.addProject(
+            if (parentDurations.reduce((a, b) => a + b, 0) !== 0) {
-                parent.id,
+                this.addProject(
-                parent.name,
+                    parent.id,
-                parent.project_num,
+                    parent.name,
-                parentDurations.map(v => v === 0 ? "" : v),
+                    parent.project_num,
-                true,
+                    parentDurations.map(v => v === 0 ? "" : v),
-                parent.is_productive
+                    true,
-            )
+                    parent.is_productive
+                )
 
-            projects.forEach(project => {
+                projects.filter(p => p.total !== 0).forEach(project => {
-                this.addProject(project.id, project.name, "", project.durations)
+                    this.addProject(project.id, project.name, "", project.durations)
-            })
+                })
+            }
         })
         this.updateTotals()
     }
@@ -334,6 +347,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 Productive</th>
+            </tr>
         </tbody>
     </table>
 {% endblock %}