Merge branch 'master' of https://github.com/sebathefox/skolehjem-webapp
This commit is contained in:
@@ -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
|
||||
@@ -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>
|
||||
|
||||
@@ -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
|
||||
@@ -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
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user