Ekapp/skolehjem/resources/views/app/washing-reservations/create.blade.php

@extends("app.layout.base")

@section("title")
    Booking Liste
@endsection

@section("content")
    <main>
        <h1 class="text-center sde-blue mb-0">Booking Liste</h1>
        <div class="col w-100 mt-auto">
            <div class="calendar-container">
                <div class="calendar-container__header">
                    <button id="week-previous" class="calendar-container__btn fas fa-arrow-left" title="Previous">
                        <i class="icon ion-ios-arrow-back"></i>
                    </button>
                    <h2 id="title" class="calendar-container__title">{Måned} {År}</h2>
                    <button id="week-next" class="calendar-container__btn fas fa-arrow-right" title="Next">
                        <i class="icon ion-ios-arrow-forward"></i>
                    </button>
                </div>
                <div class="calendar-container__body">
                    <div id="calendar" class="calendar-table">
                        <div class="calendar-table__body">
                        </div>
                    </div>
                </div>
            </div>
            <form method="post" action="{{ route("washing-reservations.store") }}" id="event-container" class="events-container">
                @csrf
            </form>
        </div>
    </main>
@endsection

@section("scripts")
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.27.0/moment-with-locales.min.js" integrity="sha512-qSnlnyh7EcD3vTqRoSP4LYsy2yVuqqmnkM9tW4dWo6xvAoxuVXyM36qZK54fyCmHoY1iKi9FJAUZrlPqmGNXFw==" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.27.0/locale/da.min.js" integrity="sha512-rybyYvSnwg3zAZ/vjTTMoh8tOK0Z6tC2XCzr9e27M0xr8WU40IGo6SOP7FXXCyWgMyd3wZ8ln2nY4ce1ysYUfw==" crossorigin="anonymous"></script>
    <script>
        function generateCalendar(weekOffset = 0) {
            const week = (moment().week() + weekOffset);

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

            document.getElementById("title").innerHTML = 'Uge ' + moment().locale("da").day(weekDays[0]).week(week).isoWeek().toString();

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

                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) {
            console.log("Opdaterer selects");
            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");

            let machine_id;

            if(document.getElementById('washing-machines'))
                machine_id = document.getElementById('washing-machines').value;
            else
                machine_id = 0;

            axios({
                method: 'get',
                url: '{{ route("washing-reservations.api") }}',
                params: { 'date': date, 'machine_id': machine_id }
            }).then(function (response) {
                console.log(response.data["unavailable_times"]);
                var data = response.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";
                    select.name = "machine_id";

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

                    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 = "Tilgængelige tider";

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

                    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";
                    button.type = "submit";

                    container.appendChild(button);

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

                let machines = data["washingmachines"];

                machinez.innerHTML = "";
                machinez.onchange = function () {
                    onDateSelect(date, dayHolder);
                }

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

                    if(machine_id == machines[i]["id"])
                        option.selected = "selected";

                    machinez.appendChild(option);
                }

                events.innerHTML = "";
                for (let hour = 8; hour <= 20; hour++) {
                    let value = data["date"].split("T")[0].slice(1, data["date"].split("T")[0].length) + "T" + prependZero(hour) + ":00";
                    let option = document.createElement("option");

                    option.text = prependZero(hour) + ":00";
                    option.value = value;
                    option.id = value;
                    events.appendChild(option);
                }

                let unavailable_times = data["unavailable_times"];

                unavailable_times.forEach(function (item, index) {
                    document.getElementById(item).remove();
                });

                if(events.childElementCount == 0){
                    let option = document.createElement("option");
                    option.disabled = "disabled";
                    option.text = "Der er ingen tilgængelige tider";
                    option.selected = "selected";
                    events.appendChild(option);

                    document.getElementById("create-reservation").disabled = "disabled";
                } else {
                    document.getElementById("create-reservation").disabled = "";
                }
            });
        }

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

        let weekOffset = 0;

        if(document.getElementById("calendar")) {
            generateCalendar();

            document.getElementById("week-previous").onclick = function () {
                weekOffset--;
                generateCalendar(weekOffset);
            }

            document.getElementById("week-next").onclick = function () {
                weekOffset++;
                generateCalendar(weekOffset);
            }
        }
    </script>
@endsection