Fixed basic calendar functionality
This commit is contained in:
parent
ecf1488bef
commit
de607a2d3c
|
|
@ -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");
|
||||
calendarRow.classList.add("calendar-table__row")
|
||||
|
||||
weekDays.forEach(function (value, index) {
|
||||
let date = moment().locale("da").day(value).week(week);
|
||||
let date = moment().locale("da").day(weekDay).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");
|
||||
|
|
|
|||
|
|
@ -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
|
||||
Loading…
Reference in New Issue