Washing Reservation dynamic content

2020-07-28 14:26:32 +02:00
parent e5e937b76c
commit c4e4d64014
8 changed files with 263 additions and 143 deletions
@@ -4,6 +4,7 @@
    <title>@yield("title")</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
 {{--    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">--}}
+{{--    <script src="http://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>--}}
    <link type="text/css" rel="stylesheet" href="{{ mix("/css/webapp.css") }}">
 </head>
 <body>
@@ -34,3 +34,176 @@
        </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").innerText = 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) {
+            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',
+                params: { 'date': date }
+            }).then(function (response) {
+                var data = response.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");
+                }
+
+                let machines = data["washingmachines"];
+
+                machinez.innerHTML = "";
+                for (let i = 0; i < machines.length; i++) {
+                    let option = document.createElement("option");
+                    option.text = machines[i]["name"];
+
+                    machinez.appendChild(option);
+                }
+
+                events.innerHTML = "";
+                for (let hour = 8; hour <= 20; hour++) {
+
+                    let option = document.createElement("option");
+                    option.text = prependZero(hour);
+
+                    events.appendChild(option);
+                }
+            });
+        }
+
+        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