From d13127a2730c2ad435e5366f1c049d094053eecc Mon Sep 17 00:00:00 2001 From: LordBaryhobal Date: Sun, 2 Feb 2025 15:15:25 +0100 Subject: [PATCH] added clockings/remote weekly total + minor improvements --- dispatcher/static/base.js | 80 +++++++++++++++++++++++++ dispatcher/static/dashboard.js | 47 ++------------- dispatcher/static/table.css | 12 +++- dispatcher/static/table.js | 106 +++++++++++---------------------- templates/table.html | 14 +++-- 5 files changed, 139 insertions(+), 120 deletions(-) diff --git a/dispatcher/static/base.js b/dispatcher/static/base.js index d985181..57a40e0 100644 --- a/dispatcher/static/base.js +++ b/dispatcher/static/base.js @@ -1,7 +1,87 @@ +const SEC_MS = 1000 +const MIN_MS = SEC_MS * 60 +const HOUR_MS = MIN_MS * 60 +const DAY_MS = HOUR_MS * 24 + +const DAYS_SHORT = [ + "Mon", + "Tue", + "Wed", + "Thu", + "Fri", + "Sat", + "Sun" +] + +const MONTHS = [ + "January", + "February", + "March", + "April", + "May", + "June", + "July", + "August", + "September", + "October", + "November", + "December" +] + +////////////////////////////////////////////////////////// +// // +// Taken from: https://weeknumber.com/how-to/javascript // +// // +////////////////////////////////////////////////////////// +Date.prototype.getWeek = function() { + let date = new Date(this.getTime()) + date.setHours(0, 0, 0, 0) + + // Thursday in current week decides the year. + date.setDate(date.getDate() + 3 - (date.getDay() + 6) % 7) + + // January 4 is always in week 1. + let week1 = new Date(date.getFullYear(), 0, 4) + + // Adjust to Thursday in week 1 and count number of weeks from date to week1. + return 1 + Math.round(((date.getTime() - week1.getTime()) / 86400000 - 3 + (week1.getDay() + 6) % 7) / 7) +} + +function formatDate(date) { + let year = date.getFullYear().toString().padStart(4, "0") + let month = (date.getMonth() + 1).toString().padStart(2, "0") + let day = date.getDate().toString().padStart(2, "0") + return `${year}-${month}-${day}` +} + +function formatDuration(duration) { + let hours = Math.floor(duration / 60) + duration -= hours * 60 + let res = "" + if (hours > 0) { + res += hours.toString() + "h" + res += duration.toString().padStart(2, "0") + } else { + res += duration.toString() + "min" + } + return res +} + +function formatPercentage(ratio) { + let percentage = Math.round(ratio * 100) + return percentage + "%" +} + function req(url, options) { let headers = options.headers || {} let csrftoken = document.querySelector("input[name='csrfmiddlewaretoken']").value headers["X-CSRFToken"] = csrftoken options.headers = headers return fetch(url, options) +} + +function getTemplate(cls) { + let elmt = document.querySelector(".template." + cls).cloneNode(true) + elmt.classList.remove("template") + return elmt } \ No newline at end of file diff --git a/dispatcher/static/dashboard.js b/dispatcher/static/dashboard.js index 4fa8a37..d7e19f6 100644 --- a/dispatcher/static/dashboard.js +++ b/dispatcher/static/dashboard.js @@ -4,46 +4,6 @@ let curYear = new Date().getFullYear() let curMonth = new Date().getMonth() let curWeekDate = new Date() -const SEC_MS = 1000 -const MIN_MS = SEC_MS * 60 -const HOUR_MS = MIN_MS * 60 -const DAY_MS = HOUR_MS * 24 - -const MONTHS = [ - "January", - "February", - "March", - "April", - "May", - "June", - "July", - "August", - "September", - "October", - "November", - "December" -] - -function formatDate(date) { - let year = date.getFullYear().toString().padStart(4, "0") - let month = (date.getMonth() + 1).toString().padStart(2, "0") - let day = date.getDate().toString().padStart(2, "0") - return `${year}-${month}-${day}` -} - -function formatDuration(duration) { - let hours = Math.floor(duration / 60) - duration -= hours * 60 - let res = "" - if (hours > 0) { - res += hours.toString() + "h" - res += duration.toString().padStart(2, "0") - } else { - res += duration.toString() + "min" - } - return res -} - function prevMonth() { curMonth = curMonth - 1 if (curMonth < 0) { @@ -90,16 +50,17 @@ function updateListMonthly() { } function updateListWeekly() { + let weekNum = curWeekDate.getWeek() let weekDay = (curWeekDate.getDay() + 6) % 7 let startDate = new Date(curWeekDate.valueOf() - weekDay * DAY_MS) let endDate = new Date(startDate.valueOf() + 6 * DAY_MS) let today = new Date() - let txt = `Week of ${MONTHS[startDate.getMonth()]} ${startDate.getDate()}` + let date = `${MONTHS[startDate.getMonth()]} ${startDate.getDate()}` if (startDate.getFullYear() !== today.getFullYear()) { - txt += " " + startDate.getFullYear().toString().padStart(4, "0") + date += " " + startDate.getFullYear().toString().padStart(4, "0") } - document.getElementById("week").innerText = txt + document.getElementById("week").innerText = `Week ${weekNum} (${date})` fetch(`stats/between/${formatDate(startDate)}/${formatDate(endDate)}/`).then(res => { return res.json() diff --git a/dispatcher/static/table.css b/dispatcher/static/table.css index b364357..ae2ab52 100644 --- a/dispatcher/static/table.css +++ b/dispatcher/static/table.css @@ -35,6 +35,8 @@ input { width: 100%; text-align: right; + background: none; + color: var(--light1); } input[type="time"]::-webkit-calendar-picker-indicator { @@ -44,6 +46,14 @@ &.total { text-align: right; + border-top: solid #71717185 1px; + td { + padding: 0.4em; + } + } + + &.total2, &.remote-total { + text-align: center; td { padding: 0.4em; } @@ -127,7 +137,7 @@ } .separator { - height: 2em; + height: 4em; } } diff --git a/dispatcher/static/table.js b/dispatcher/static/table.js index 9dedb11..9ebbb62 100644 --- a/dispatcher/static/table.js +++ b/dispatcher/static/table.js @@ -1,73 +1,6 @@ let table let prevMonthBtn, nextMonthBtn, month -const DAYS_SHORT = [ - "Mon", - "Tue", - "Wed", - "Thu", - "Fri", - "Sat", - "Sun" -] - -const MONTHS = [ - "January", - "February", - "March", - "April", - "May", - "June", - "July", - "August", - "September", - "October", - "November", - "December" -] - -const SEC_MS = 1000 -const MIN_MS = SEC_MS * 60 -const HOUR_MS = MIN_MS * 60 -const DAY_MS = HOUR_MS * 24 - -////////////////////////////////////////////////////////// -// // -// Taken from: https://weeknumber.com/how-to/javascript // -// // -////////////////////////////////////////////////////////// -Date.prototype.getWeek = function() { - let date = new Date(this.getTime()) - date.setHours(0, 0, 0, 0) - - // Thursday in current week decides the year. - date.setDate(date.getDate() + 3 - (date.getDay() + 6) % 7) - - // January 4 is always in week 1. - let week1 = new Date(date.getFullYear(), 0, 4) - - // Adjust to Thursday in week 1 and count number of weeks from date to week1. - return 1 + Math.round(((date.getTime() - week1.getTime()) / 86400000 - 3 + (week1.getDay() + 6) % 7) / 7) -} - -function formatDate(date) { - let year = date.getFullYear().toString().padStart(4, "0") - let month = (date.getMonth() + 1).toString().padStart(2, "0") - let day = date.getDate().toString().padStart(2, "0") - return `${year}-${month}-${day}` -} - -function formatPercentage(ratio) { - let percentage = Math.round(ratio * 100) - return percentage + "%" -} - -function getTemplate(cls) { - let elmt = document.querySelector(".template." + cls).cloneNode(true) - elmt.classList.remove("template") - return elmt -} - class Table { constructor(elmt) { this.table = elmt @@ -90,6 +23,7 @@ class Table { this.totalProjects = 0 this.clockingTotals = [] + this.clockingRemotes = [] this.update() } @@ -148,8 +82,11 @@ class Table { let clockings = this.clockings.querySelectorAll(".clocking") clockings.forEach((clocking, i) => { + if (!(clocking.dataset.type || clocking.classList.contains("total"))) { + return; + } let cell = clocking.insertCell(this.nDays + 1) - if (i === 5) { + if (clocking.classList.contains("total")) { return } @@ -164,7 +101,6 @@ class Table { addWeek(startDate, length=7) { let weekNum = startDate.getWeek() - let weekName = this.weekNames.insertCell(-1) weekName.innerText = `Week n° ${weekNum}` weekName.colSpan = length @@ -185,6 +121,10 @@ class Table { this.columns.appendChild(col) this.nDays++ } + let weekRemoteTotalCell = this.clockings.querySelector(".clocking.remote-total").insertCell(-1) + weekRemoteTotalCell.colSpan = length + let weekTotalCell = this.clockings.querySelector(".clocking.total2").insertCell(-1) + weekTotalCell.colSpan = length } addProject(id, name, sagexNum, times, isParent=false) { @@ -245,7 +185,7 @@ class Table { monday = nextMonday } - this.clockings.querySelector(".clocking.total").insertCell(-1) + this.clockings.querySelector(".clocking.total").insertCell(-1).rowSpan = 2 this.endDate = new Date(monday.valueOf() - monday.getDate() * DAY_MS) } @@ -302,6 +242,7 @@ class Table { displayClockings(clockings) { this.clockingTotals = Array(this.nDays).fill(0) + this.clockingRemotes = Array(this.nDays).fill(0) clockings.forEach(clocking => { let date = new Date(clocking.date) if (date < this.startDate || date > this.endDate) { @@ -320,6 +261,15 @@ class Table { let hours = +clocking.total / 60 this.clockingTotals[i] = hours totalCell.innerText = hours === 0 ? "" : Math.round(hours * 100) / 100 + + if (clocking.remote !== null) { + let remoteParts = clocking.remote.split(":").map(v => +v) + let remoteHours = remoteParts[0] + remoteParts[1] / 60 + if (remoteParts.length >= 3) { + remoteHours += remoteParts[2] / 3600 + } + this.clockingRemotes[i] = remoteHours + } }) } @@ -343,6 +293,22 @@ class Table { let totalProjects = this.totalProjects this.clockings.querySelector(".clocking.total").cells[this.nDays + 1].innerText = Math.round(totalClockings * 100) / 100 + let startI = 0 + Array.from(this.clockings.querySelector(".clocking.remote-total").cells).forEach((cell, i) => { + let endI = startI + cell.colSpan + let remote = this.clockingRemotes.slice(startI, endI).reduce((a, b) => a + b, 0) + cell.innerText = Math.round(remote * 100) / 100 + startI = endI + }) + + startI = 0 + Array.from(this.clockings.querySelector(".clocking.total2").cells).forEach((cell, i) => { + let endI = startI + cell.colSpan + let total = this.clockingTotals.slice(startI, endI).reduce((a, b) => a + b, 0) + cell.innerText = Math.round(total * 100) / 100 + startI = endI + }) + if (totalClockings === 0) { console.log("Total clockings = 0") return diff --git a/templates/table.html b/templates/table.html index 330e2bf..31196c9 100644 --- a/templates/table.html +++ b/templates/table.html @@ -30,10 +30,10 @@ Check-IN AM - TOTAL - % working time - % imputed time - time on sagex + TOTAL + % working time + % imputed time + time on sagex Check-OUT AM @@ -45,11 +45,13 @@ Check-OUT PM - Remote + Remote + - TOTAL + TOTAL +