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

// class Calendar {
//     constructor() {
//
//     }
//
//     nextMonth() {
//
//     }
//
//     previousMonth() {
//
//     }
//
//     addEvent() {
//
//     }
//
//     removeEvent() {
//
//     }
// }

const moment = require("moment");

// const calendar = document.getElementById("calendar");
// const title = document.getElementById("month");



// calendar.innerHTML = "";

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")

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

        calendarRow.appendChild(dayHolder);
    });

    calendarBody.appendChild(calendarRow);

    calendar.innerHTML = "";

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

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

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


    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 span = document.createElement("span");
        // span.classList.add("events__title");
        // span.innerText = "Tider";

        let button = document.createElement("button");
        // button.classList.add("events__title");
        button.id = "create-reservation";
        button.innerText = "Reserver";

        // container.appendChild(span);
        container.appendChild(button);

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

    // events.innerHTML = "";

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

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

        machinez.appendChild(option);
    }


    for (let hour = 8; hour <= 20; hour++) {

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

        events.appendChild(option);

        // let item = document.createElement("li");
        // item.classList.add("events__item");
        //
        // let itemData = document.createElement("div");
        //
        // let head = document.createElement("span");
        // head.classList.add("events__name");
        // head.innerText = "Vaskemaskine Tid";
        //
        // let dat = document.createElement("span");
        // dat.classList.add("events__date");
        // dat.innerText = "Klokken " + prependZero(hour);
        //
        // itemData.appendChild(head);
        // itemData.appendChild(dat);
        // item.appendChild(itemData);
        //
        // let button = document.createElement("span");
        // button.classList.add("events__tag");
        // button.innerText = "Book";
        //
        // item.appendChild(button);
        //
        // events.appendChild(item);
    }
}

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

module.exports = {
    generateCalendar
};