TimeDispatcher/dispatcher/static/dashboard.js

let prevMonthBtn, nextMonthBtn, month
let prevWeekBtn, nextWeekBtn, week
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) {
        curMonth += 12
        curYear -= 1
    }
    updateListMonthly()
}
function nextMonth() {
    curMonth = curMonth + 1
    if (curMonth >= 12) {
        curMonth -= 12
        curYear += 1
    }
    updateListMonthly()
}
function prevWeek() {
    curWeekDate = new Date(curWeekDate.valueOf() - 7 * DAY_MS)
    updateListWeekly()
}
function nextWeek() {
    curWeekDate = new Date(curWeekDate.valueOf() + 7 * DAY_MS)
    updateListWeekly()
}

function updateListMonthly() {
    let year = curYear.toString().padStart(4, "0")
    let month = (curMonth + 1).toString().padStart(2, "0")
    let today = new Date()
    let txt = MONTHS[curMonth]
    if (today.getFullYear() !== curYear) {
        txt += " " + year.toString().padStart(4, "0")
    }
    document.getElementById("month").innerText = txt

    fetch(`stats/by-month/${year}/${month}/`).then(res => {
        return res.json()
    }).then(res => {
        if (res.status !== "success") {
            return
        }
        setListElements(res.data.parents)
    })
}

function updateListWeekly() {
    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()}`
    if (startDate.getFullYear() !== today.getFullYear()) {
        txt += " " + startDate.getFullYear().toString().padStart(4, "0")
    }
    document.getElementById("week").innerText = txt

    fetch(`stats/between/${formatDate(startDate)}/${formatDate(endDate)}/`).then(res => {
        return res.json()
    }).then(res => {
        if (res.status !== "success") {
            return
        }
        setListElements(res.data.parents)
    })
}

function setListElements(data) {
    data = data.filter(parent => parent.duration !== null)
    let list = document.getElementById("list")
    let template = document.querySelector(".by-range .template.row").cloneNode(true)
    template.classList.remove("template")
    list.innerHTML = ""
    if (data.length === 0) {
        let noData = document.querySelector(".by-range .template.no-data").cloneNode(true)
        noData.classList.remove("template")
        list.appendChild(noData)
        return
    }
    data.forEach(parent => {
        let row = template.cloneNode(true)
        row.querySelector(".name").innerText = `${parent.name} (${parent.project_num})`
        row.querySelector(".duration").innerText = formatDuration(parent.duration)
        list.appendChild(row)
    })
}

window.addEventListener("load", () => {
    prevMonthBtn = document.getElementById("prev-month")
    nextMonthBtn = document.getElementById("next-month")
    month = document.getElementById("month")

    prevWeekBtn = document.getElementById("prev-week")
    nextWeekBtn = document.getElementById("next-week")
    week = document.getElementById("week")

    prevMonthBtn.addEventListener("click", () => prevMonth())
    nextMonthBtn.addEventListener("click", () => nextMonth())
    prevWeekBtn.addEventListener("click", () => prevWeek())
    nextWeekBtn.addEventListener("click", () => nextWeek())

    let monthGrp = document.getElementById("month-sel")
    let weekGrp = document.getElementById("week-sel")

    rangeSel = document.getElementById("range-sel")
    rangeSel.addEventListener("change", () => {
        let mode = rangeSel.value
        if (mode === "weekly") {
            monthGrp.classList.add("hidden")
            weekGrp.classList.remove("hidden")
            updateListWeekly()
        } else {
            monthGrp.classList.remove("hidden")
            weekGrp.classList.add("hidden")
            updateListMonthly()
        }
    })

    updateListMonthly()
})