Fixed basic calendar functionality

skolehjem/resources/js/calendar/calendar.js

@@ -44,6 +44,12 @@ function generateCalendar(weekOffset = 0) {
     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");
@@ -51,16 +57,9 @@ function generateCalendar(weekOffset = 0) {
         headerDay.innerText = weekDay;
 
         header.appendChild(headerDay);
-    });
 
-    let calendarBody = document.createElement("div");
-    calendarBody.classList.add("calendar-table__body");
 
-    let calendarRow = document.createElement("div");
+        let date = moment().locale("da").day(weekDay).week(week);
-    calendarRow.classList.add("calendar-table__row")
-
-    weekDays.forEach(function (value, index) {
-        let date = moment().locale("da").day(value).week(week);
 
         // onDateSelect(date);
 
@@ -82,35 +81,65 @@ function generateCalendar(weekOffset = 0) {
 
     calendarBody.appendChild(calendarRow);
 
-
     calendar.innerHTML = "";
 
     calendar.appendChild(header);
     calendar.appendChild(calendarBody);
-
-    // const endWeek = moment().endOf("month").week();
-
-    // let cal = [];
-    // for (let week = startWeek; week < endWeek; week++) {
-    //     cal.push({
-    //         week : week,
-    //         days : Array(7).fill(0).map((n, i) => moment().week(week).startOf("week").clone().add(n + i, "day"))
-    //     });
-    // }
-
-
-
-    // console.log(cal);
 }
 
-// const eventArray = [
-//
-// ]
-
 function onDateSelect(date) {
-    const events = document.getElementById("events");
+    let events;
+    let machinez;
 
-    events.innerHTML = "";
+    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");
+    }
+
+    // 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++) {
@@ -118,6 +147,7 @@ function onDateSelect(date) {
         let option = document.createElement("option");
         option.text = prependZero(hour);
 
+        events.appendChild(option);
 
         // let item = document.createElement("li");
         // item.classList.add("events__item");

skolehjem/resources/views/app/washing-reservations/index.blade.php

@@ -0,0 +1,58 @@
+@extends("app.layout.base")
+@extends("app.layout.header")
+@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 calendar-container__btn--left" title="Previous">
+                        <i class="icon ion-ios-arrow-back"></i>
+                    </button>
+                    <h2 id="month" class="calendar-container__title">{Måned} {År}</h2>
+                    <button id="week-next" class="calendar-container__btn calendar-container__btn--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>
+            <div id="event-container" class="events-container">
+
+                <p>
+                    Maskiner skal dynamisk opdateres alt efter om det er en fra bygning E eller en af de andre bygninger der vil vaske, da bygning E har egen vaskekælder!
+                </p>
+{{--                <span class="events__title">Maskiner</span>--}}
+{{--                <select id="washing-machines" class="events__list">--}}
+
+{{--                </select>--}}
+
+{{--                <span class="events__title">Tider</span>--}}
+{{--                <select id="events" class="events__list">--}}
+                    {{--                    <li class="events__item">--}}
+                    {{--                        <div class="events__item--left">--}}
+                    {{--                            <span class="events__name">Vaskemaskine Tid</span>--}}
+                    {{--                            <span class="events__date">{Dato}</span>--}}
+                    {{--                        </div>--}}
+                    {{--                        <span class="events__tag">Book</span>--}}
+                    {{--                    </li>--}}
+                    {{--                    <li class="events__item">--}}
+                    {{--                        <div class="events__item--left">--}}
+                    {{--                            <span class="events__name">Vaskemaskine Tid</span>--}}
+                    {{--                            <span class="events__date">{Dato}</span>--}}
+                    {{--                        </div>--}}
+                    {{--                        <span class="events__tag">Book</span>--}}
+                    {{--                    </li>--}}
+                </select>
+            </div>
+        </div>
+    </main>
+@endsection