spritzschema/public/javascripts/script.js

document.addEventListener('DOMContentLoaded', async function () {
    const  DateTime = luxon.DateTime;
    let curdate = ''

    const dt = DateTime.now()
    const dt1 = dt.plus({month:1})
    curdate = `${dt.toFormat('LLLL')}/${dt1.toFormat('LLLL_y')}`
    document.querySelector('#curmon').innerHTML = curdate.replace('_',' ')


    initSchema('2023-05-01')

    let ret = await getData()
    fillSchema(ret.data)

    document.querySelector('#sptab').addEventListener('click',  markField);	  

    function markField (e) { 
        let field = e.target;
        field.setAttribute('aria-label','x'); 
        field.setAttribute('disabled','disabled');
        let data = {curdate: curdate}
        let setArray = []
        let fields = document.querySelectorAll('#sptab button')
        for (i = 0; i < fields.length; i++) {
            let status = { day: fields[i].innerHTML, status: false }
            if (fields[i].hasAttribute('disabled')) {
                status.status = true
            }
            setArray.push(status)
        }
        data.data = setArray
        storeData(data)
        if (e.srcElement.id === 'bt35') {
            showNextMonth(e.srcElement.innerHTML)
        }
    }

    function fillSchema(data) {
        const setArray = data.data
        for(let i = 0; i < 35; i++) {
            let sel = '#bt'+(i+1)
            if (setArray[i].day !== '') {
                document.querySelector(sel).innerHTML = DateTime.fromISO(setArray[i].day).toFormat('d')
                if (setArray[i].status) {
                    document.querySelector(sel).setAttribute('aria-label', 'x')
                    document.querySelector(sel).setAttribute('disabled', 'disabled')
                }
            } else {
                document.querySelector(sel).setAttribute('disabled', 'disabled')
            }
        }
    }

    async function getData() {
        let erg = await fetch('data')
        return erg.json()
    }

    async function storeData(data) {
        const response = await fetch('/data', {
            method: "POST",
            body: JSON.stringify(data),
            headers: {
                'Content-Type':"application/json"
            }
        })
        return response.json()
    }

    function showNextMonth() {
        const dt = DateTime.now()
        const dt1 = dt.plus({month:1})
        curdate = `${dt.toFormat('LLLL')}/${dt1.toFormat('LLLL_y')}`
        document.querySelector('#curmon').innerHTML = curdate.replace('_',' ')

                fillSchema(ret.data)
    }

    function initSchema(startdate) {
        let setArray = []
        let ld0 = DateTime.fromISO(startdate)
        let k = 0
        for(let i = 0; i < 35; i++) {
            let elem = {status: false}
            if (i === 17) {
                elem.day = ''
            } else {
                let ld = ld0.plus({day: k})
                elem.day = ld.toFormat('y-LL-dd')
                k++
            }
            setArray.push(elem)
        }
        let data = {curdate: startdate, data: setArray}
        storeData(data)
    }

});