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

Fixed washing reservation bugs

This commit is contained in:
frederikpyt 2020-07-28 09:21:41 +02:00
parent 4eaf3de6d5
commit 282ac8e735
6 changed files with 85 additions and 362 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -154,3 +154,4 @@ class WashingReservationController extends Controller
return redirect()->route("washing-reservations.index", [ "reservations" => $reservations]); return redirect()->route("washing-reservations.index", [ "reservations" => $reservations]);
} }
} }

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

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

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

@ -52,6 +52,7 @@ function generateCalendar(weekOffset = 0) {
let calendarRow = document.createElement("div"); let calendarRow = document.createElement("div");
calendarRow.classList.add("calendar-table__row") calendarRow.classList.add("calendar-table__row")
calendarRow.id = "calenderRow";
weekDays.forEach(function (weekDay) { weekDays.forEach(function (weekDay) {
let headerDay = document.createElement("div"); let headerDay = document.createElement("div");
@ -76,7 +77,7 @@ function generateCalendar(weekOffset = 0) {
dayHolder.appendChild(day); dayHolder.appendChild(day);
dayHolder.onclick = function() { dayHolder.onclick = function() {
onDateSelect(date); onDateSelect(date, dayHolder);
} }
calendarRow.appendChild(dayHolder); calendarRow.appendChild(dayHolder);
@ -90,13 +91,21 @@ function generateCalendar(weekOffset = 0) {
calendar.appendChild(calendarBody); calendar.appendChild(calendarBody);
} }
function onDateSelect(date) { function onDateSelect(date, dayHolder) {
let events; let events;
let machinez; let machinez;
let buttonz; let buttonz;
let container = document.getElementById("event-container"); 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");
if(document.getElementById("washing-machines") != undefined) if(document.getElementById("washing-machines") != undefined)
machinez = document.getElementById("washing-machines"); machinez = document.getElementById("washing-machines");
@ -133,28 +142,22 @@ function onDateSelect(date) {
if(document.getElementById("create-reservation") != undefined) if(document.getElementById("create-reservation") != undefined)
buttonz = document.getElementById("create-reservation"); buttonz = document.getElementById("create-reservation");
else { else {
// let span = document.createElement("span");
// span.classList.add("events__title");
// span.innerText = "Tider";
let button = document.createElement("button"); let button = document.createElement("button");
// button.classList.add("events__title");
button.id = "create-reservation"; button.id = "create-reservation";
button.innerText = "Reserver"; button.innerText = "Reserver";
// container.appendChild(span);
container.appendChild(button); container.appendChild(button);
buttonz = document.getElementById("events"); buttonz = document.getElementById("events");
} }
// events.innerHTML = "";
const machines = [ const machines = [
"Maskine 1", "Maskine 1",
"Maskine 2" "Maskine 2"
] ]
machinez.innerHTML = "";
for (let i = 0; i < machines.length; i++) { for (let i = 0; i < machines.length; i++) {
let option = document.createElement("option"); let option = document.createElement("option");
option.text = machines[i]; option.text = machines[i];
@ -163,37 +166,13 @@ function onDateSelect(date) {
} }
events.innerHTML = "";
for (let hour = 8; hour <= 20; hour++) { for (let hour = 8; hour <= 20; hour++) {
let option = document.createElement("option"); let option = document.createElement("option");
option.text = prependZero(hour); option.text = prependZero(hour);
events.appendChild(option); 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);
} }
} }

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

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

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

@ -30,28 +30,6 @@
<p> <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! 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> </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> </main>