vict3459
/
Ekapp
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Merge branch 'master' of https://github.com/sebathefox/skolehjem-webapp

This commit is contained in:
victor 2020-07-29 09:50:04 +02:00
parent 26c28d8e54 fc0f97b04e
commit 6a4cdbfb17
14 changed files with 304 additions and 666 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
skolehjem/app/Console/Kernel.php
View File

@ -2,6 +2,7 @@
namespace App\Console;
use App\Console\Commands\GenerateRoutesForJavascript;
use Illuminate\Console\Scheduling\Schedule;
use Illuminate\Foundation\Console\Kernel as ConsoleKernel;
@ -13,7 +14,7 @@ class Kernel extends ConsoleKernel
* @var array
*/
protected $commands = [
//
];
/**

12
skolehjem/app/Http/Controllers/WashingReservationController.php
View File

@ -153,4 +153,16 @@ class WashingReservationController extends Controller
return redirect()->route("washing-reservations.index", [ "reservations" => $reservations]);
}
public function api(Request $request){
if($request->ajax()){
$date = $request->date;
$machines = WashingMachine::all();
$output = json_encode(['date' => $date, 'washingmachines' => $machines]);
return Response($output);
}
}
}

66
skolehjem/public/css/webapp.css vendored
View File

@ -6669,13 +6669,6 @@ main {
width: 80px;
}
.header__btn:hover,
.header__btn:focus {
background: #005561;
transition: all 0.3s ease-in;
outline: none;
}
.header__btn .icon {
display: inline-block;
}
@ -6712,25 +6705,22 @@ main {
color: #E9E8E8;
}
.calendar-container__btn:hover,
.calendar-container__btn:focus {
color: #9FAAB7;
transition: all 0.3s ease-in;
}
.calendar-container__title {
color: #222741;
font-size: 20px;
font-weight: 700;
}
.calendar-table__col.selected > .calendar-table__item {
color: white;
}
.calendar-table {
margin-top: 12px;
width: 100%;
}
.calendar-table__item {
border: 2px solid transparent;
border-radius: 50%;
color: #424588;
font-size: 12px;
@ -6743,12 +6733,6 @@ main {
cursor: pointer;
}
.calendar-table__item:hover {
background: RGBA(0, 120, 138, 0.6);
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
transition: 0.2s all ease-in;
}
.calendar-table__item:hover > span {
color: white;
}
@ -6775,38 +6759,60 @@ main {
height: 18px;
}
@media (min-width: 360px) {
@media (min-width: 350px) {
.calendar-table__header .calendar-table__col {
width: 46px;
height: 20.7px;
}
}
@media (min-width: 410px) {
@media (min-width: 390px) {
.calendar-table__header .calendar-table__col {
width: 47.5px;
width: 56px;
height: 25.2px;
}
}
.calendar-table__body .calendar-table__col {
width: 40px;
height: 42px;
padding-bottom: 2px;
height: 40px;
border-radius: 50%;
}
@media (min-width: 360px) {
@media (min-width: 350px) {
.calendar-table__body .calendar-table__col {
width: 46px;
height: 24px;
height: 46px;
}
}
@media (min-width: 390px) {
.calendar-table__body .calendar-table__col {
width: 56px;
height: 56px;
}
}
@media (min-width: 410px) {
.calendar-table__body .calendar-table__col {
width: 54px;
width: 56px;
height: 56px;
}
}
@media (min-width: 460px) {
.calendar-table__body .calendar-table__col {
width: 61px;
height: 61px;
}
}
.calendar-table__body .calendar-table__col.selected {
background: #00788a;
transition: all 0.3s ease-in;
outline: none;
}
.calendar-table__today .calendar-table__item {
border-color: #FEFEFE;
background-color: #00788a;
@ -6826,7 +6832,6 @@ main {
.calendar-table__event--long .calendar-table__item {
border-radius: 0;
border-width: 2px 0;
}
.calendar-table__event--start .calendar-table__item {
@ -6872,7 +6877,10 @@ main {
}
.events-container {
display: flex;
flex-direction: column;
padding: 0 15px;
padding-bottom: 1rem;
}
.events__title {

57
skolehjem/resources/js/app.js vendored
View File

@ -1,8 +1,3 @@
/**
* First we will load all of this project's JavaScript dependencies which
* includes Vue and other libraries. It is a great starting point when
* building robust, powerful web applications using Vue and Laravel.
*/
//Bootstrap
require('./bootstrap');
@ -17,58 +12,6 @@ require('./sites/menuplan');
//Webapp hamburger menu
import { toggleMenu } from './navmenu/menu';
// require("./calendar/calendar");
// import { nextMonth, previousMonth, countDays, createCalendar, months, month, currentMonth, days, calendar } from "./calendar/calendar";
// window.Vue = require('vue');
import { generateCalendar } from "./calendar/calendar";
// createCalendar();
//
// document.getElementById("month-next").onclick = nextMonth;
// document.getElementById("month-previous").onclick = previousMonth;
/**
* The following block of code may be used to automatically register your
* Vue components. It will recursively scan this directory for the Vue
* components and automatically register them with their "basename".
*
* Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
*/
// const files = require.context('./', true, /\.vue$/i)
// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))
// Vue.component('example-component', require('./components/ExampleComponent.vue').default);
/**
* Next, we will create a fresh Vue application instance and attach it to
* the page. Then, you may begin adding components to this application
* or customize the JavaScript scaffolding to fit your unique needs.
*/
// const app = new Vue({
// el: '#app',
// });
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);
}
}
if(document.getElementById("toggle"))
document.getElementById("toggle").onclick = function () {
toggleMenu('menu');

208
skolehjem/resources/js/calendar/calendar.js vendored
View File

@ -1,208 +0,0 @@
// 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 buttonz;
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");
}
if(document.getElementById("create-reservation") != undefined)
buttonz = document.getElementById("create-reservation");
else {
// let span = document.createElement("span");
// span.classList.add("events__title");
// span.innerText = "Tider";
let button = document.createElement("button");
// button.classList.add("events__title");
button.id = "create-reservation";
button.innerText = "Reserver";
// container.appendChild(span);
container.appendChild(button);
buttonz = 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
};

31
skolehjem/resources/js/calendar/month.js vendored
View File

@ -1,31 +0,0 @@
class Month {
constructor(year, monthOffsetNormalized) {
this.year = year;
this.normalizedOffset = monthOffsetNormalized;
}
init() {
this.firstDay = (new Date(this.year, month - 1)).getDay();
}
draw(render) {
this.clearRender(render);
}
clearRender(render) {
let renderElement = document.getElementById(render);
renderElement.innerHTML = "";
}
createDay() {
}
countDays() {
return 32 - new Date(this.year, this.normalizedOffset - 1, 32).getDate();
}
}

64
skolehjem/resources/sass/webapp/_default.scss vendored
View File

@ -184,13 +184,6 @@ $primary-color: $blue;
top: -25px;
width: 80px;
&:hover,
&:focus {
background: darken($primary-color, 8%);
transition: all 0.3s ease-in;
outline: none;
}
.icon {
display: inline-block;
}
@ -226,12 +219,6 @@ $primary-color: $blue;
font-size: 16px;
outline: none;
color: $calendar-button-color;
&:hover,
&:focus {
color: palette(gray-shades, darker);
transition: all 0.3s ease-in;
}
}
@include e(title) {
@ -241,12 +228,15 @@ $primary-color: $blue;
}
}
.calendar-table__col.selected > .calendar-table__item {
color: white;
}
.calendar-table {
margin-top: 12px;
width: 100%;
@include e(item) {
border: 2px solid transparent;
border-radius: 50%;
color: $calendar-item-text;
font-size: $sm-font-size;
@ -258,14 +248,6 @@ $primary-color: $blue;
justify-content: center;
cursor: pointer;
&:hover {
background: RGBA(0, 120, 138, 0.6);
-moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
transition: 0.2s all ease-in;
}
&:hover > span {
color: white;
}
@ -291,12 +273,14 @@ $primary-color: $blue;
width: 40px;
height: 18px;
@include mq(360) {
@include mq(350) {
width: 46px;
height: 20.7px;
}
@include mq(410) {
width: 47.5px;
@include mq(390) {
width: 56px;
height: 25.2px;
}
}
}
@ -304,18 +288,34 @@ $primary-color: $blue;
@include e(body) {
.calendar-table__col {
width: 40px;
height: 42px;
padding-bottom: 2px;
height: 40px;
border-radius: 50%;
@include mq(360) {
@include mq(350) {
width: 46px;
height: 24px;
height: 46px;
}
@include mq(390) {
width: 56px;
height: 56px;
}
@include mq(410) {
width: 54px;
width: 56px;
height: 56px;
}
@include mq(460) {
width: 61px;
height: 61px;
}
}
.calendar-table__col.selected {
background: $blue;
transition: all 0.3s ease-in;
outline: none;
}
}
@ -344,7 +344,6 @@ $primary-color: $blue;
.calendar-table__item {
border-radius: 0;
border-width: 2px 0;
}
}
@ -407,7 +406,10 @@ $primary-color: $blue;
}
.events-container {
display: flex;
flex-direction: column;
padding: 0 15px;
padding-bottom: 1rem;
}
.events {

245
skolehjem/resources/views/app/bookings/index.blade.php
View File

@ -1,245 +0,0 @@
@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__header calendar-table__row">
{{-- <div class="">--}}
<div class="calendar-table__col">Mon</div>
<div class="calendar-table__col">Tue</div>
<div class="calendar-table__col">Wed</div>
<div class="calendar-table__col">Thu</div>
<div class="calendar-table__col">Fri</div>
<div class="calendar-table__col">Sat</div>
<div class="calendar-table__col">Sun</div>
{{-- </div>--}}
</div>
<div class="calendar-table__body">
<div class="calendar-table__row">
<div class="calendar-table__col calendar-table__inactive">
<div class="calendar-table__item">
<span>30</span>
</div>
</div>
<div class="calendar-table__col calendar-table__today">
<div class="calendar-table__item">
<span>1</span>
</div>
</div>
<div class="calendar-table__col">
<div class="calendar-table__item">
<span>2</span>
</div>
</div>
<div class="calendar-table__col">
<div class="calendar-table__item">
<span>3</span>
</div>
</div>
<div class="calendar-table__col">
<div class="calendar-table__item">
<span>4</span>
</div>
</div>
<div class="calendar-table__col">
<div class="calendar-table__item">
<span>5</span>
</div>
</div>
<div class="calendar-table__col">
<div class="calendar-table__item">
<span>6</span>
</div>
</div>
</div>
<div class="calendar-table__row">
<div class="calendar-table__col">
<div class="calendar-table__item">
<span>7</span>
</div>
</div>
<div class="calendar-table__col">
<div class="calendar-table__item">
<span>8</span>
</div>
</div>
<div class="calendar-table__col">
<div class="calendar-table__item">
<span>9</span>
</div>
</div>
<div class="calendar-table__col">
<div class="calendar-table__item">
<span>10</span>
</div>
</div>
<div class="calendar-table__col">
<div class="calendar-table__item">
<span>11</span>
</div>
</div>
<div class="calendar-table__col">
<div class="calendar-table__item">
<span>12</span>
</div>
</div>
<div class="calendar-table__col">
<div class="calendar-table__item">
<span>13</span>
</div>
</div>
</div>
<div class="calendar-table__row">
<div class="calendar-table__col">
<div class="calendar-table__item">
<span>14</span>
</div>
</div>
<div class="calendar-table__col">
<div class="calendar-table__item">
<span>15</span>
</div>
</div>
<div class="calendar-table__col">
<div class="calendar-table__item">
<span>16</span>
</div>
</div>
<div class="calendar-table__col">
<div class="calendar-table__item">
<span>17</span>
</div>
</div>
<div class="calendar-table__col">
<div class="calendar-table__item">
<span>18</span>
</div>
</div>
<div class="calendar-table__col">
<div class="calendar-table__item">
<span>19</span>
</div>
</div>
<div class="calendar-table__col">
<div class="calendar-table__item">
<span>20</span>
</div>
</div>
</div>
<div class="calendar-table__row">
<div class="calendar-table__col">
<div class="calendar-table__item">
<span>21</span>
</div>
</div>
<div class="calendar-table__col">
<div class="calendar-table__item">
<span>22</span>
</div>
</div>
<div class="calendar-table__col">
<div class="calendar-table__item">
<span>23</span>
</div>
</div>
<div class="calendar-table__col">
<div class="calendar-table__item">
<span>24</span>
</div>
</div>
<div class="calendar-table__col">
<div class="calendar-table__item">
<span>25</span>
</div>
</div>
<div class="calendar-table__col">
<div class="calendar-table__item">
<span>26</span>
</div>
</div>
<div class="calendar-table__col">
<div class="calendar-table__item">
<span>27</span>
</div>
</div>
</div>
<div class="calendar-table__row">
<div class="calendar-table__col">
<div class="calendar-table__item">
<span>28</span>
</div>
</div>
<div class="calendar-table__col">
<div class="calendar-table__item">
<span>29</span>
</div>
</div>
<div class="calendar-table__col">
<div class="calendar-table__item">
<span>30</span>
</div>
</div>
<div class="calendar-table__col">
<div class="calendar-table__item">
<span>31</span>
</div>
</div>
<div class="calendar-table__col calendar-table__inactive">
<div class="calendar-table__item">
<span>1</span>
</div>
</div>
<div class="calendar-table__col calendar-table__inactive">
<div class="calendar-table__item">
<span>2</span>
</div>
</div>
<div class="calendar-table__col calendar-table__inactive">
<div class="calendar-table__item">
<span>3</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="events-container">
<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

2
skolehjem/resources/views/app/layout/base.blade.php
View File

@ -25,7 +25,7 @@
<img src="{{URL::asset('/images/icons/Aktiviteter.svg')}}" alt="Aktiviteter">
Aktiviteter
</a>
<a href="{{ route("washing-reservations.index") }}">
<a href="{{ route("washing-reservations.create") }}">
<img src="{{URL::asset('/images/icons/Vaske booking liste.svg')}}" alt="Reservationer">
Reservationer
</a>

34
skolehjem/resources/views/app/layout/header.blade.php
View File

@ -1,34 +0,0 @@
@section("header")
<header class="row align-items-center">
<img class="w-50" id="sdeLogo" src="{{URL::asset('/images/logos/Logo-normal.svg')}}" alt="Syddansk Erhvervsskole">
<a class="ml-auto" href="javascript:void(0)" id="toggle">
<img src="{{URL::asset('/images/icons/icon.svg')}}" id="menuIcon" alt="-">
</a>
</header>
<div class="d-none bg-sde-blue col" id="menu">
<a href="">
<img src="{{URL::asset('/images/icons/Menuplan.svg')}}" alt="Menuplan">
Menuplan
</a>
<a href="">
<img src="{{URL::asset('/images/icons/Aktiviteter.svg')}}" alt="Aktiviteter">
Aktiviteter
</a>
<a href="">
<img src="{{URL::asset('/images/icons/Vaske booking liste.svg')}}" alt="Vaske booking liste">
Vaske booking liste
</a>
<a href="">
<img src="{{URL::asset('/images/icons/Galleri.svg')}}" alt="Galleri">
Galleri
</a>
<a href="">
<img src="{{URL::asset('/images/icons/Kontoret.svg')}}" alt="Kontoret">
Kontoret
</a>
<a href="">
<img src="{{URL::asset('/images/icons/Vagttelefon-hvid.svg')}}" alt="Vagttelefon">
Vagttelefon
</a>
</div>
@endsection

213
skolehjem/resources/views/app/washing-reservations/create.blade.php Normal file
View File

@ -0,0 +1,213 @@
@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 fas fa-arrow-left" title="Previous">
<i class="icon ion-ios-arrow-back"></i>
</button>
<h2 id="title" class="calendar-container__title">{Måned} {År}</h2>
<button id="week-next" class="calendar-container__btn fas fa-arrow-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>
<form method="post" action="{{ route("washing-reservations.store") }}" id="event-container" class="events-container">
@csrf
<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>
</form>
</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;
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";
select.name = "machine";
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";
select.name = "time";
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";
button.type = "submit";
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"];
option.value = machines[i]["id"];
machinez.appendChild(option);
}
events.innerHTML = "";
for (let hour = 8; hour <= 20; hour++) {
let option = document.createElement("option");
option.text = prependZero(hour) + ":00";
option.value = data["date"].split("T")[0].slice(1, data["date"].split("T")[0].length) + "T" + prependZero(hour) + ":00";
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

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

@ -25,34 +25,10 @@
</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></div>
</div>
</main>
@endsection
@section("scripts")
@endsection

2
skolehjem/routes/web.php
View File

@ -36,7 +36,7 @@ Route::get("/eventsapi", "EventController@search")->name("events.search");
Route::get("/menuplansapi", "MenuPlanController@search")->name("menu-plans.search");
Route::get("/rolesapi", "RolesController@search")->name("roles.search");
Route::get("/userapi", "UserController@search")->name("users.search");
Route::get("/washing-reservationsapi", "WashingReservationController@api")->name("washing-reservations.api");

1
skolehjem/webpack.mix.js vendored
View File

@ -14,6 +14,7 @@ const mix = require('laravel-mix');
//JS
mix.js('resources/js/app.js', 'public/js');
//SCSS
mix.sass('resources/sass/app/app.scss', 'public/css');
mix.sass('resources/sass/webapp/webapp.scss', 'public/css');