272 lines
8.2 KiB
JavaScript
272 lines
8.2 KiB
JavaScript
let table
|
|
let prevMonthBtn, nextMonthBtn, month
|
|
let curMonth = new Date().getMonth()
|
|
|
|
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 getTemplate(cls) {
|
|
let elmt = document.querySelector(".template." + cls).cloneNode(true)
|
|
elmt.classList.remove("template")
|
|
return elmt
|
|
}
|
|
|
|
class Table {
|
|
constructor(elmt) {
|
|
this.table = elmt
|
|
this.clockings = elmt.querySelector(".clockings")
|
|
this.times = elmt.querySelector(".times")
|
|
this.weekNames = elmt.querySelector(".week-names")
|
|
this.dayNames = elmt.querySelector(".day-names")
|
|
this.dayDates = elmt.querySelector(".day-dates")
|
|
this.columns = elmt.querySelector(".columns")
|
|
|
|
this.timeInputTemplate = getTemplate("time-input")
|
|
|
|
this.nDays = 0
|
|
|
|
let today = new Date()
|
|
this.curMonth = today.getMonth()
|
|
this.curYear = today.getFullYear()
|
|
this.startDate = today
|
|
this.endDate = today
|
|
|
|
this.update()
|
|
}
|
|
|
|
update() {
|
|
let year = this.curYear.toString().padStart(4, "0")
|
|
let month = (this.curMonth + 1).toString().padStart(2, "0")
|
|
let date = new Date(`${year}-${month}-01`)
|
|
let txt = MONTHS[this.curMonth]
|
|
if (new Date().getFullYear() !== this.curYear) {
|
|
txt += " " + year
|
|
}
|
|
document.getElementById("month").innerText = txt
|
|
this.clear()
|
|
this.addMonth(date)
|
|
this.fetchData()
|
|
}
|
|
|
|
prevMonth() {
|
|
this.curMonth--
|
|
if (this.curMonth < 0) {
|
|
this.curMonth += 12
|
|
this.curYear -= 1
|
|
}
|
|
this.update()
|
|
}
|
|
|
|
nextMonth() {
|
|
this.curMonth++
|
|
if (this.curMonth >= 12) {
|
|
this.curMonth -= 12
|
|
this.curYear += 1
|
|
}
|
|
this.update()
|
|
}
|
|
|
|
clear() {
|
|
this.columns.innerHTML = ""
|
|
this.clockings.querySelectorAll(".dates th").forEach(c => c.remove())
|
|
this.clockings.querySelectorAll(".clocking td").forEach(c => c.remove())
|
|
this.weekNames.querySelectorAll("td").forEach(c => c.remove())
|
|
this.dayNames.querySelectorAll("td").forEach(c => c.remove())
|
|
this.dayDates.innerHTML = ""
|
|
this.times.querySelectorAll("tr.project").forEach(r => r.remove())
|
|
this.nDays = 0
|
|
}
|
|
|
|
addClockings(date) {
|
|
let dates = this.clockings.querySelector(".dates")
|
|
let dateCell = document.createElement("th")
|
|
let weekDay = DAYS_SHORT[(date.getDay() + 1) % 7]
|
|
let monthDay = date.getDate().toString().padStart(2, "0")
|
|
dateCell.innerText = `${weekDay} ${monthDay}`
|
|
dates.appendChild(dateCell)
|
|
|
|
let clockings = this.clockings.querySelectorAll(".clocking")
|
|
|
|
clockings.forEach((clocking, i) => {
|
|
let cell = clocking.insertCell(this.nDays + 1)
|
|
if (i === 5) {
|
|
return
|
|
}
|
|
|
|
cell.replaceWith(this.timeInputTemplate.cloneNode(true))
|
|
})
|
|
}
|
|
|
|
addWeek(startDate, length=7) {
|
|
let weekNum = startDate.getWeek()
|
|
|
|
let weekName = this.weekNames.insertCell(-1)
|
|
weekName.innerText = `Week n° ${weekNum}`
|
|
weekName.colSpan = length
|
|
for (let i = 0; i < length; i++) {
|
|
let date = new Date(startDate.valueOf() + i * DAY_MS)
|
|
let dayPadded = date.getDate().toString().padStart(2, "0")
|
|
let monthPadded = (date.getMonth() + 1).toString().padStart(2, "0")
|
|
|
|
this.addClockings(date)
|
|
let dayName = this.dayNames.insertCell(this.nDays + 2)
|
|
let dayDate = this.dayDates.insertCell(this.nDays)
|
|
let weekDay = (date.getDay() + 6) % 7
|
|
dayName.innerText = DAYS_SHORT[weekDay]
|
|
dayDate.innerText = `${dayPadded}/${monthPadded}`
|
|
|
|
let col = document.createElement("col")
|
|
col.classList.add(`day-${weekDay}`)
|
|
this.columns.appendChild(col)
|
|
this.nDays++
|
|
}
|
|
}
|
|
|
|
addProject(id, name, sagexNum, times, isParent=false) {
|
|
let row = this.times.insertRow(-1)
|
|
row.classList.add("project")
|
|
if (isParent) {
|
|
row.classList.add("parent")
|
|
}
|
|
row.dataset.id = id
|
|
row.insertCell(-1).innerText = name
|
|
row.insertCell(-1).innerText = sagexNum
|
|
times.forEach(time => {
|
|
let t = time.toString().split(".")
|
|
if (t.length > 1 ){
|
|
t[1] = t[1].slice(0, 2)
|
|
}
|
|
row.insertCell(-1).innerText = t.join(".")
|
|
})
|
|
}
|
|
|
|
addMonth(anchorDate) {
|
|
this.startDate = new Date(anchorDate)
|
|
this.startDate.setDate(1)
|
|
|
|
let startDay = (this.startDate.getDay() + 6) % 7
|
|
let length = 7 - startDay
|
|
this.addWeek(this.startDate, length)
|
|
let monday = new Date(this.startDate.valueOf() + length * DAY_MS)
|
|
let nextMonday
|
|
|
|
let startMonth = this.startDate.getMonth()
|
|
|
|
while (monday.getMonth() === startMonth) {
|
|
nextMonday = new Date(monday.valueOf() + 7 * DAY_MS)
|
|
|
|
let len = 7
|
|
if (nextMonday.getMonth() !== startMonth) {
|
|
len -= nextMonday.getDate() - 1
|
|
}
|
|
this.addWeek(monday, len)
|
|
monday = nextMonday
|
|
}
|
|
this.endDate = new Date(monday.valueOf() - monday.getDate() * DAY_MS)
|
|
}
|
|
|
|
fetchData() {
|
|
let startDate = formatDate(this.startDate)
|
|
let endDate = formatDate(this.endDate)
|
|
fetch(`/table/${startDate}/${endDate}/`).then(res => {
|
|
if (res.ok) {
|
|
return res.json()
|
|
}
|
|
}).then(res => {
|
|
if (res && res.status === "success") {
|
|
this.displayData(res.data)
|
|
}
|
|
})
|
|
}
|
|
|
|
displayData(data) {
|
|
data.parents.forEach(parent => {
|
|
this.addProject(
|
|
parent.id,
|
|
parent.name,
|
|
parent.project_num,
|
|
Array(this.nDays).fill(""),
|
|
true
|
|
)
|
|
|
|
parent.projects.forEach(project => {
|
|
let durations = Array(this.nDays).fill("")
|
|
project.tasks.forEach(task => {
|
|
let date = new Date(task.date)
|
|
let i = Math.floor((date.valueOf() - this.startDate.valueOf()) / DAY_MS)
|
|
durations[i] = task.duration / 60
|
|
})
|
|
this.addProject(
|
|
project.id,
|
|
project.name,
|
|
"",
|
|
durations
|
|
)
|
|
})
|
|
})
|
|
}
|
|
}
|
|
|
|
window.addEventListener("load", () => {
|
|
prevMonthBtn = document.getElementById("prev-month")
|
|
nextMonthBtn = document.getElementById("next-month")
|
|
month = document.getElementById("month")
|
|
|
|
table = new Table(document.getElementById("table"))
|
|
|
|
prevMonthBtn.addEventListener("click", () => table.prevMonth())
|
|
nextMonthBtn.addEventListener("click", () => table.nextMonth())
|
|
}) |