Washing Reservation dynamic content
This commit is contained in:
parent
e5e937b76c
commit
c4e4d64014
|
@ -2,6 +2,7 @@
|
||||||
|
|
||||||
namespace App\Console;
|
namespace App\Console;
|
||||||
|
|
||||||
|
use App\Console\Commands\GenerateRoutesForJavascript;
|
||||||
use Illuminate\Console\Scheduling\Schedule;
|
use Illuminate\Console\Scheduling\Schedule;
|
||||||
use Illuminate\Foundation\Console\Kernel as ConsoleKernel;
|
use Illuminate\Foundation\Console\Kernel as ConsoleKernel;
|
||||||
|
|
||||||
|
@ -13,7 +14,7 @@ class Kernel extends ConsoleKernel
|
||||||
* @var array
|
* @var array
|
||||||
*/
|
*/
|
||||||
protected $commands = [
|
protected $commands = [
|
||||||
//
|
|
||||||
];
|
];
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
|
@ -153,5 +153,16 @@ class WashingReservationController extends Controller
|
||||||
|
|
||||||
return redirect()->route("washing-reservations.index", [ "reservations" => $reservations]);
|
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);
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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
|
//Bootstrap
|
||||||
require('./bootstrap');
|
require('./bootstrap');
|
||||||
|
|
||||||
|
@ -17,58 +12,6 @@ require('./sites/menuplan');
|
||||||
//Webapp hamburger menu
|
//Webapp hamburger menu
|
||||||
import { toggleMenu } from './navmenu/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"))
|
if(document.getElementById("toggle"))
|
||||||
document.getElementById("toggle").onclick = function () {
|
document.getElementById("toggle").onclick = function () {
|
||||||
toggleMenu('menu');
|
toggleMenu('menu');
|
||||||
|
|
|
@ -1,34 +1,5 @@
|
||||||
// class Calendar {
|
|
||||||
// constructor() {
|
|
||||||
//
|
|
||||||
// }
|
|
||||||
//
|
|
||||||
// nextMonth() {
|
|
||||||
//
|
|
||||||
// }
|
|
||||||
//
|
|
||||||
// previousMonth() {
|
|
||||||
//
|
|
||||||
// }
|
|
||||||
//
|
|
||||||
// addEvent() {
|
|
||||||
//
|
|
||||||
// }
|
|
||||||
//
|
|
||||||
// removeEvent() {
|
|
||||||
//
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
|
|
||||||
const moment = require("moment");
|
const moment = require("moment");
|
||||||
|
|
||||||
// const calendar = document.getElementById("calendar");
|
|
||||||
// const title = document.getElementById("month");
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// calendar.innerHTML = "";
|
|
||||||
|
|
||||||
function generateCalendar(weekOffset = 0) {
|
function generateCalendar(weekOffset = 0) {
|
||||||
const week = (moment().week() + weekOffset);
|
const week = (moment().week() + weekOffset);
|
||||||
|
|
||||||
|
@ -107,73 +78,96 @@ function onDateSelect(date, dayHolder) {
|
||||||
|
|
||||||
dayHolder.classList.add("selected");
|
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");
|
axios({
|
||||||
select.classList.add("events__title");
|
method: 'get',
|
||||||
select.id = "washing-machines";
|
url: '/washing-reservationsapi',
|
||||||
|
data: { date: date }
|
||||||
|
}).then(function (response) {
|
||||||
|
var data = response.data();
|
||||||
|
console.log(data);
|
||||||
|
});
|
||||||
|
|
||||||
container.appendChild(span);
|
$.ajax({
|
||||||
container.appendChild(select);
|
type: 'get',
|
||||||
|
url: "/washing-reservationsapi",
|
||||||
|
data: {'date': date},
|
||||||
|
success:function (data) {
|
||||||
|
console.log(data);
|
||||||
|
|
||||||
machinez = document.getElementById("washing-machines");
|
/*if(document.getElementById("washing-machines") != undefined)
|
||||||
}
|
machinez = document.getElementById("washing-machines");
|
||||||
if(document.getElementById("events") != undefined)
|
else {
|
||||||
events = document.getElementById("events");
|
let span = document.createElement("span");
|
||||||
else {
|
span.classList.add("events__title");
|
||||||
let span = document.createElement("span");
|
span.innerText = "Maskiner";
|
||||||
span.classList.add("events__title");
|
|
||||||
span.innerText = "Tider";
|
|
||||||
|
|
||||||
let select = document.createElement("select");
|
let select = document.createElement("select");
|
||||||
select.classList.add("events__title");
|
select.classList.add("events__title");
|
||||||
select.id = "events";
|
select.id = "washing-machines";
|
||||||
|
|
||||||
container.appendChild(span);
|
container.appendChild(span);
|
||||||
container.appendChild(select);
|
container.appendChild(select);
|
||||||
|
|
||||||
events = document.getElementById("events");
|
machinez = document.getElementById("washing-machines");
|
||||||
}
|
}
|
||||||
if(document.getElementById("create-reservation") != undefined)
|
if(document.getElementById("events") != undefined)
|
||||||
buttonz = document.getElementById("create-reservation");
|
events = document.getElementById("events");
|
||||||
else {
|
else {
|
||||||
let button = document.createElement("button");
|
let span = document.createElement("span");
|
||||||
|
span.classList.add("events__title");
|
||||||
|
span.innerText = "Tider";
|
||||||
|
|
||||||
button.id = "create-reservation";
|
let select = document.createElement("select");
|
||||||
button.innerText = "Reserver";
|
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 = [
|
button.id = "create-reservation";
|
||||||
"Maskine 1",
|
button.innerText = "Reserver";
|
||||||
"Maskine 2"
|
|
||||||
]
|
|
||||||
|
|
||||||
machinez.innerHTML = "";
|
container.appendChild(button);
|
||||||
for (let i = 0; i < machines.length; i++) {
|
|
||||||
let option = document.createElement("option");
|
|
||||||
option.text = machines[i];
|
|
||||||
|
|
||||||
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 = "";
|
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);
|
||||||
}
|
}*/
|
||||||
|
},
|
||||||
|
error:function (data) {
|
||||||
|
console.log("FEJL");
|
||||||
|
console.log(data);
|
||||||
|
}
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function prependZero(value) {
|
function prependZero(value) {
|
||||||
|
@ -181,7 +175,3 @@ function prependZero(value) {
|
||||||
return "0" + value;
|
return "0" + value;
|
||||||
return value;
|
return value;
|
||||||
}
|
}
|
||||||
|
|
||||||
module.exports = {
|
|
||||||
generateCalendar
|
|
||||||
};
|
|
||||||
|
|
|
@ -4,6 +4,7 @@
|
||||||
<title>@yield("title")</title>
|
<title>@yield("title")</title>
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<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">--}}
|
{{-- <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") }}">
|
<link type="text/css" rel="stylesheet" href="{{ mix("/css/webapp.css") }}">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
|
@ -34,3 +34,176 @@
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
@endsection
|
@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
|
||||||
|
|
|
@ -35,7 +35,7 @@ Route::get("/eventsapi", "EventController@search")->name("events.search");
|
||||||
Route::get("/menuplansapi", "MenuPlanController@search")->name("menu-plans.search");
|
Route::get("/menuplansapi", "MenuPlanController@search")->name("menu-plans.search");
|
||||||
Route::get("/rolesapi", "RolesController@search")->name("roles.search");
|
Route::get("/rolesapi", "RolesController@search")->name("roles.search");
|
||||||
Route::get("/userapi", "UserController@search")->name("users.search");
|
Route::get("/userapi", "UserController@search")->name("users.search");
|
||||||
|
Route::get("/washing-reservationsapi", "WashingReservationController@api")->name("washing-reservations.api");
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -14,6 +14,7 @@ const mix = require('laravel-mix');
|
||||||
//JS
|
//JS
|
||||||
mix.js('resources/js/app.js', 'public/js');
|
mix.js('resources/js/app.js', 'public/js');
|
||||||
|
|
||||||
|
|
||||||
//SCSS
|
//SCSS
|
||||||
mix.sass('resources/sass/app/app.scss', 'public/css');
|
mix.sass('resources/sass/app/app.scss', 'public/css');
|
||||||
mix.sass('resources/sass/webapp/webapp.scss', 'public/css');
|
mix.sass('resources/sass/webapp/webapp.scss', 'public/css');
|
||||||
|
|
Loading…
Reference in New Issue