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

Washing Reservation dynamic content

This commit is contained in:
frederikpyt 2020-07-28 14:26:32 +02:00
parent e5e937b76c
commit c4e4d64014
8 changed files with 263 additions and 143 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 = [
//
];
/**

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

@ -153,5 +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);
}
}
}

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');

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

@ -1,34 +1,5 @@
// 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);
@ -107,73 +78,96 @@ function onDateSelect(date, dayHolder) {
dayHolder.classList.add("selected");
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";
axios({
method: 'get',
url: '/washing-reservationsapi',
data: { date: date }
}).then(function (response) {
var data = response.data();
console.log(data);
});
container.appendChild(span);
container.appendChild(select);
$.ajax({
type: 'get',
url: "/washing-reservationsapi",
data: {'date': date},
success:function (data) {
console.log(data);
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";
/*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 = "events";
let select = document.createElement("select");
select.classList.add("events__title");
select.id = "washing-machines";
container.appendChild(span);
container.appendChild(select);
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");
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";
button.id = "create-reservation";
button.innerText = "Reserver";
let select = document.createElement("select");
select.classList.add("events__title");
select.id = "events";
container.appendChild(button);
container.appendChild(span);
container.appendChild(select);
buttonz = document.getElementById("events");
}
events = document.getElementById("events");
}
if(document.getElementById("create-reservation") != undefined)
buttonz = document.getElementById("create-reservation");
else {
let button = document.createElement("button");
const machines = [
"Maskine 1",
"Maskine 2"
]
button.id = "create-reservation";
button.innerText = "Reserver";
machinez.innerHTML = "";
for (let i = 0; i < machines.length; i++) {
let option = document.createElement("option");
option.text = machines[i];
container.appendChild(button);
machinez.appendChild(option);
}
buttonz = document.getElementById("events");
}
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];
machinez.appendChild(option);
}
events.innerHTML = "";
for (let hour = 8; hour <= 20; hour++) {
events.innerHTML = "";
for (let hour = 8; hour <= 20; hour++) {
let option = document.createElement("option");
option.text = prependZero(hour);
let option = document.createElement("option");
option.text = prependZero(hour);
events.appendChild(option);
}
events.appendChild(option);
}*/
},
error:function (data) {
console.log("FEJL");
console.log(data);
}
});
}
function prependZero(value) {
@ -181,7 +175,3 @@ function prependZero(value) {
return "0" + value;
return value;
}
module.exports = {
generateCalendar
};

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

@ -4,6 +4,7 @@
<title>@yield("title")</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
{{-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">--}}
{{-- <script src="http://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>--}}
<link type="text/css" rel="stylesheet" href="{{ mix("/css/webapp.css") }}">
</head>
<body>

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

@ -34,3 +34,176 @@
</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;
//console.log(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";
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 button = document.createElement("button");
button.id = "create-reservation";
button.innerText = "Reserver";
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"];
machinez.appendChild(option);
}
events.innerHTML = "";
for (let hour = 8; hour <= 20; hour++) {
let option = document.createElement("option");
option.text = prependZero(hour);
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

2
skolehjem/routes/web.php
View File

@ -35,7 +35,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');