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

191 lines
4.7 KiB
JavaScript

// 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 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++) {
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
};