Ekapp/skolehjem/resources/js/calendar/calendar.js

const moment = require("moment");

function generateCalendar(weekOffset = 0) {
    const week = (moment().week() + weekOffset);

    document.getElementById("title").innerText = week;

    let weekDays = Array.apply(null, Array(7)).map((value, index) => {
        return moment(index, "e").locale("da").startOf("week").weekday(index).format("ddd");
    });
    // weekDays.push(weekDays.shift());

    // console.log(week);
    // console.log(weekDays);

    const calendar = document.getElementById("calendar");

    let header = document.createElement("div");
    header.classList.add("calendar-table__header", "calendar-table__row");

    let calendarBody = document.createElement("div");
    calendarBody.classList.add("calendar-table__body");

    let calendarRow = document.createElement("div");
    calendarRow.classList.add("calendar-table__row")
    calendarRow.id = "calenderRow";

    weekDays.forEach(function (weekDay) {
        let headerDay = document.createElement("div");
        headerDay.classList.add("calendar-table__col");

        headerDay.innerText = weekDay;

        header.appendChild(headerDay);


        let date = moment().locale("da").day(weekDay).week(week);

        // onDateSelect(date);

        let dayHolder = document.createElement("div");
        dayHolder.classList.add("calendar-table__col");

        let day = document.createElement("div");
        day.classList.add("calendar-table__item");
        day.innerText = date.date();

        dayHolder.appendChild(day);

        dayHolder.onclick = function() {
            onDateSelect(date, dayHolder);
        }

        calendarRow.appendChild(dayHolder);
    });

    calendarBody.appendChild(calendarRow);

    calendar.innerHTML = "";

    calendar.appendChild(header);
    calendar.appendChild(calendarBody);
}

function onDateSelect(date, dayHolder) {
    let events;
    let machinez;
    let buttonz;

    let container = document.getElementById("event-container");

    NodeList.prototype.forEach = Array.prototype.forEach
    var children = document.getElementById("calenderRow").childNodes;

    children.forEach(function(item){
        item.classList.remove("selected");
    });

    dayHolder.classList.add("selected");


    axios({
        method: 'get',
        url: '/washing-reservationsapi',
        data: { date: date }
    }).then(function (response) {
        var data = response.data();
        console.log(data);
    });

    $.ajax({
        type: 'get',
        url: "/washing-reservationsapi",
        data: {'date': date},
        success:function (data) {
            console.log(data);

            /*if(document.getElementById("washing-machines") != undefined)
                machinez = document.getElementById("washing-machines");
            else {
                let span = document.createElement("span");
                span.classList.add("events__title");
                span.innerText = "Maskiner";

                let select = document.createElement("select");
                select.classList.add("events__title");
                select.id = "washing-machines";

                container.appendChild(span);
                container.appendChild(select);

                machinez = document.getElementById("washing-machines");
            }
            if(document.getElementById("events") != undefined)
                events = document.getElementById("events");
            else {
                let span = document.createElement("span");
                span.classList.add("events__title");
                span.innerText = "Tider";

                let select = document.createElement("select");
                select.classList.add("events__title");
                select.id = "events";

                container.appendChild(span);
                container.appendChild(select);

                events = document.getElementById("events");
            }
            if(document.getElementById("create-reservation") != undefined)
                buttonz = document.getElementById("create-reservation");
            else {
                let button = document.createElement("button");

                button.id = "create-reservation";
                button.innerText = "Reserver";

                container.appendChild(button);

                buttonz = document.getElementById("events");
            }

            const machines = [
                "Maskine 1",
                "Maskine 2"
            ]

            machinez.innerHTML = "";
            for (let i = 0; i < machines.length; i++) {
                let option = document.createElement("option");
                option.text = machines[i];

                machinez.appendChild(option);
            }


            events.innerHTML = "";
            for (let hour = 8; hour <= 20; hour++) {

                let option = document.createElement("option");
                option.text = prependZero(hour);

                events.appendChild(option);
            }*/
        },
        error:function (data) {
            console.log("FEJL");
            console.log(data);
        }
    });
}

function prependZero(value) {
    if(value < 10)
        return "0" + value;
    return value;
}