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

View File

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

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 {

View File

@ -52,6 +52,7 @@ function generateCalendar(weekOffset = 0) {
let calendarRow = document.createElement("div");
calendarRow.classList.add("calendar-table__row")
calendarRow.id = "calenderRow";
weekDays.forEach(function (weekDay) {
let headerDay = document.createElement("div");
@ -76,7 +77,7 @@ function generateCalendar(weekOffset = 0) {
dayHolder.appendChild(day);
dayHolder.onclick = function() {
onDateSelect(date);
onDateSelect(date, dayHolder);
}
calendarRow.appendChild(dayHolder);
@ -90,13 +91,21 @@ function generateCalendar(weekOffset = 0) {
calendar.appendChild(calendarBody);
}
function onDateSelect(date) {
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");
if(document.getElementById("washing-machines") != undefined)
machinez = document.getElementById("washing-machines");
@ -133,28 +142,22 @@ function onDateSelect(date) {
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"
]
machinez.innerHTML = "";
for (let i = 0; i < machines.length; i++) {
let option = document.createElement("option");
option.text = machines[i];
@ -163,37 +166,13 @@ function onDateSelect(date) {
}
events.innerHTML = "";
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);
}
}

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 {

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

View File

@ -30,28 +30,6 @@
<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>