diff --git a/.idea/php.xml b/.idea/php.xml index ea2c04b..f1a82aa 100644 --- a/.idea/php.xml +++ b/.idea/php.xml @@ -9,16 +9,12 @@ - - - - @@ -27,7 +23,6 @@ - @@ -36,18 +31,7 @@ - - - - - - - - - - - @@ -75,12 +59,9 @@ - - - @@ -89,30 +70,12 @@ - - - - - - - - - - - - - - - - - - diff --git a/.idea/skolehjem-webapp.iml b/.idea/skolehjem-webapp.iml index 924e151..0da7fb8 100644 --- a/.idea/skolehjem-webapp.iml +++ b/.idea/skolehjem-webapp.iml @@ -12,22 +12,15 @@ - - - - - - - @@ -42,30 +35,15 @@ - - - - - - - - - - - - - - - @@ -76,19 +54,6 @@ - - - - - - - - - - - - - @@ -118,11 +83,9 @@ - - diff --git a/skolehjem/resources/js/app.js b/skolehjem/resources/js/app.js index 3b72321..4dd2dd9 100644 --- a/skolehjem/resources/js/app.js +++ b/skolehjem/resources/js/app.js @@ -7,7 +7,7 @@ require('./bootstrap'); //Dependencies -require("moment"); +const moment = require("moment"); require('./date'); @@ -23,7 +23,7 @@ import { toggleMenu } from './navmenu/menu'; // window.Vue = require('vue'); -//import { generateCalendar } from "./calendar/calendar"; +import { generateCalendar } from "./calendar/calendar"; // createCalendar(); // @@ -53,8 +53,23 @@ import { toggleMenu } from './navmenu/menu'; // el: '#app', // }); -//generateCalendar(); +let weekOffset = 0; -document.getElementById("toggle").onclick = function () { - toggleMenu('menu'); -}; +if(document.getElementById("calendar")) { + generateCalendar(); + + document.getElementById("week-previous").onclick = function () { + weekOffset--; + generateCalendar(weekOffset); + } + + document.getElementById("week-next").onclick = function () { + weekOffset++; + generateCalendar(weekOffset); + } +} + +if(document.getElementById("toggle")) + document.getElementById("toggle").onclick = function () { + toggleMenu('menu'); + }; diff --git a/skolehjem/resources/js/calendar/calendar.js b/skolehjem/resources/js/calendar/calendar.js index 356982f..b0035a0 100644 --- a/skolehjem/resources/js/calendar/calendar.js +++ b/skolehjem/resources/js/calendar/calendar.js @@ -22,229 +22,134 @@ const moment = require("moment"); -const calendar = document.getElementById("calendar"); -const title = document.getElementById("month"); +// const calendar = document.getElementById("calendar"); +// const title = document.getElementById("month"); -const days = [ - "Mandag", - "Tirsdag", - "Onsdag", - "Torsdag", - "Fredag", - "Lørdag", - "Søndag" -]; + + +// calendar.innerHTML = ""; + +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"); + }); + // 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"); + + weekDays.forEach(function (weekDay) { + let headerDay = document.createElement("div"); + headerDay.classList.add("calendar-table__col"); + + 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); + + // 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); + + // 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 = [ // -// const months = [ -// "January", -// "February", -// "March", -// "April", -// "May", -// "June", -// "July", -// "August", -// "September", -// "October", -// "November", -// "December", // ] -// const month = document.getElementById("month"); -// -// const year = 2020; -// -// let currentMonth = 0; -// -// let firstDay = (new Date(year, month)).getDay(); -// -// function createCalendar() { -// -// calendar.innerHTML = ""; -// -// // HEADER -// let header = document.createElement("div"); -// header.classList.add("calendar-table__header", "calendar-table__row"); -// -// days.forEach((value) =>{ -// let head = document.createElement("div"); -// head.classList.add("calendar-table__col"); -// -// head.innerText = value; -// -// header.appendChild(head); -// }); -// -// calendar.appendChild(header); -// -// -// // BODY -// -// let date = new Date(Date.now()); -// -// months.forEach((value, index) => { -// if(index === date.getMonth()) { -// -// } -// }); -// -// -// //
-// //
-// // 2 -// //
-// //
-// -// // let intDay = 1; -// // for(let columns = 0; columns < 5; columns++) -// // { -// // let row = document.createElement("div"); -// // row.classList.add("calendar-table__row"); -// // -// // for (let i = 0; i < 7; i++) -// // { -// // let day = document.createElement("div"); -// // day.classList.add("calendar-table__col", "calendar-table__item"); -// // day.innerText = intDay; -// // // let -// // -// // row.appendChild(day); -// // -// // intDay++; -// // } -// // calendar.appendChild(row); -// // } -// drawMonth(6); -// } -// -// function drawMonth(monthId) { -// -// -// let dateObject = new Date() -// -// let date = 1; -// for(let columns = 0; columns < 6; columns++) -// { -// let row = document.createElement("div"); -// row.classList.add("calendar-table__row"); -// -// for (let i = 0; i < 7; i++) -// { -// if(columns === 0 && i < firstDay) { -// let day = document.createElement("div"); -// day.classList.add("calendar-table__col", "calendar-table__item"); -// // day.innerText = date; -// -// row.appendChild(day); -// } -// else if(date > countDays(year, 6)) { -// break; -// } -// -// else { -// let day = document.createElement("div"); -// day.classList.add("calendar-table__col", "calendar-table__item"); -// day.innerText = date; -// -// row.appendChild(day); -// date++; -// } -// -// // let day = document.createElement("div"); -// // day.classList.add("calendar-table__col", "calendar-table__item"); -// // day.innerText = date; -// // // let -// // -// // row.appendChild(day); -// // -// // date++; -// } -// calendar.appendChild(row); -// } -// } -// -// function nextMonth() { -// currentMonth++; -// -// if(currentMonth > 11) -// currentMonth = 0; -// -// months.forEach((value, index) => { -// if(index === currentMonth) -// month.innerText = value; -// }); -// -// drawMonth(currentMonth); -// } -// -// function previousMonth() { -// currentMonth--; -// -// if(currentMonth < 0) -// currentMonth = 11; -// -// months.forEach((value, index) => { -// if(index === currentMonth) -// month.innerText = value; -// }); -// -// drawMonth(currentMonth); -// } -// -// -// function countDays(year, month) { -// return 32 - new Date(year, month, 32).getDate(); -// } -// -// // Monday -// // Tuesday -// // Wednesday -// // Thursday -// // Friday -// // Saturday -// // Sunday -// // -// // mon tue wed thu fri sat sun -// -// -// module.exports = { -// createCalendar, -// countDays, -// nextMonth, -// previousMonth, -// calendar, -// days, -// months, -// currentMonth, -// month, -// }; +function onDateSelect(date) { + const events = document.getElementById("events"); + + events.innerHTML = ""; + for (let hour = 8; hour <= 20; hour++) { -calendar.innerHTML = ""; -// -// cal.forEach(value => { -// let elem = document.createElement("div"); -// elem.innerText = value; -// console.log(value); -// calendar.appendChild(elem); -// }); -// -// title.innerText = moment().format("DD/MM/YYYY"); + let option = document.createElement("option"); + option.text = prependZero(hour); -function generateCalendar() { - const startWeek = moment().startOf("month").week(); - 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")) - }); + // 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 = { diff --git a/skolehjem/resources/views/app/bookings/index.blade.php b/skolehjem/resources/views/app/bookings/index.blade.php index a56e30a..b9202f6 100644 --- a/skolehjem/resources/views/app/bookings/index.blade.php +++ b/skolehjem/resources/views/app/bookings/index.blade.php @@ -10,11 +10,11 @@
-

{Måned} {År}

-
@@ -223,22 +223,22 @@
Tider -
    -
  • -
    - Vaskemaskine Tid - {Dato} -
    - Book -
    • -
  • -
    - Vaskemaskine Tid - {Dato} -
    - Book -
    • -
+