TimeDispatcher/dispatcher/static/table.js

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())
})