Working on calendar.js
This commit is contained in:
parent
d7d33d1696
commit
47161e2615
|
|
@ -19,7 +19,7 @@ class EventController extends Controller
|
|||
{
|
||||
$events = Event::query()->paginate($request->input("limit", 20));
|
||||
|
||||
return Response::detect("events.index", [ "events" => $events]);
|
||||
return Response::detect("bookings.index", [ "events" => $events]);
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -29,7 +29,7 @@ class EventController extends Controller
|
|||
*/
|
||||
public function create()
|
||||
{
|
||||
return Response::detect("events.create");
|
||||
return Response::detect("bookings.create");
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -49,7 +49,7 @@ class EventController extends Controller
|
|||
|
||||
$event->save();
|
||||
|
||||
return Response::detect("events.store");
|
||||
return Response::detect("bookings.store");
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -60,7 +60,7 @@ class EventController extends Controller
|
|||
*/
|
||||
public function show(Event $id)
|
||||
{
|
||||
return Response::detect("events.show", [ "event" => $id ]);
|
||||
return Response::detect("bookings.show", [ "event" => $id ]);
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -71,7 +71,7 @@ class EventController extends Controller
|
|||
*/
|
||||
public function edit(Event $id)
|
||||
{
|
||||
return Response::detect("events.edit", [ "event" => $id ]);
|
||||
return Response::detect("bookings.edit", [ "event" => $id ]);
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -91,7 +91,7 @@ class EventController extends Controller
|
|||
$id->update($requestBody);
|
||||
$id->save();
|
||||
|
||||
return Response::detect("events.update");
|
||||
return Response::detect("bookings.update");
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -105,6 +105,6 @@ class EventController extends Controller
|
|||
{
|
||||
$id->delete();
|
||||
|
||||
return Response::detect("events.destroy");
|
||||
return Response::detect("bookings.destroy");
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,8 +15,17 @@ require('./sites/menuplan');
|
|||
//Webapp hamburger menu
|
||||
require('./navmenu/menu');
|
||||
|
||||
// require("./calendar/calendar");
|
||||
|
||||
import { nextMonth, previousMonth, countDays, createCalendar, months, month, currentMonth, days, calendar } from "./calendar/calendar";
|
||||
|
||||
// window.Vue = require('vue');
|
||||
|
||||
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
|
||||
|
|
|
|||
|
|
@ -0,0 +1,216 @@
|
|||
// class Calendar {
|
||||
// constructor() {
|
||||
//
|
||||
// }
|
||||
//
|
||||
// nextMonth() {
|
||||
//
|
||||
// }
|
||||
//
|
||||
// previousMonth() {
|
||||
//
|
||||
// }
|
||||
//
|
||||
// addEvent() {
|
||||
//
|
||||
// }
|
||||
//
|
||||
// removeEvent() {
|
||||
//
|
||||
// }
|
||||
// }
|
||||
|
||||
const calendar = document.getElementById("calendar");
|
||||
const days = [
|
||||
"Mandag",
|
||||
"Tirsdag",
|
||||
"Onsdag",
|
||||
"Torsdag",
|
||||
"Fredag",
|
||||
"Lørdag",
|
||||
"Søndag"
|
||||
];
|
||||
|
||||
const months = [
|
||||
"January",
|
||||
"February",
|
||||
"March",
|
||||
"April",
|
||||
"May",
|
||||
"June",
|
||||
"July",
|
||||
"August",
|
||||
"September",
|
||||
"October",
|
||||
"November",
|
||||
"December",
|
||||
]
|
||||
|
||||
const month = document.getElementById("month");
|
||||
|
||||
const year = 2020;
|
||||
|
||||
let currentMonth = 0;
|
||||
|
||||
let firstDay = (new Date(year, month)).getDay();
|
||||
|
||||
function createCalendar() {
|
||||
|
||||
calendar.innerHTML = "";
|
||||
|
||||
// HEADER
|
||||
let header = document.createElement("div");
|
||||
header.classList.add("calendar-table__header", "calendar-table__row");
|
||||
|
||||
days.forEach((value) =>{
|
||||
let head = document.createElement("div");
|
||||
head.classList.add("calendar-table__col");
|
||||
|
||||
head.innerText = value;
|
||||
|
||||
header.appendChild(head);
|
||||
});
|
||||
|
||||
calendar.appendChild(header);
|
||||
|
||||
|
||||
// BODY
|
||||
|
||||
let date = new Date(Date.now());
|
||||
|
||||
months.forEach((value, index) => {
|
||||
if(index === date.getMonth()) {
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// <div class="calendar-table__col">
|
||||
// <div class="calendar-table__item">
|
||||
// <span>2</span>
|
||||
// </div>
|
||||
// </div>
|
||||
|
||||
// let intDay = 1;
|
||||
// for(let columns = 0; columns < 5; columns++)
|
||||
// {
|
||||
// let row = document.createElement("div");
|
||||
// row.classList.add("calendar-table__row");
|
||||
//
|
||||
// for (let i = 0; i < 7; i++)
|
||||
// {
|
||||
// let day = document.createElement("div");
|
||||
// day.classList.add("calendar-table__col", "calendar-table__item");
|
||||
// day.innerText = intDay;
|
||||
// // let
|
||||
//
|
||||
// row.appendChild(day);
|
||||
//
|
||||
// intDay++;
|
||||
// }
|
||||
// calendar.appendChild(row);
|
||||
// }
|
||||
drawMonth(6);
|
||||
}
|
||||
|
||||
function drawMonth(monthId) {
|
||||
|
||||
|
||||
let dateObject = new Date()
|
||||
|
||||
let date = 1;
|
||||
for(let columns = 0; columns < 6; columns++)
|
||||
{
|
||||
let row = document.createElement("div");
|
||||
row.classList.add("calendar-table__row");
|
||||
|
||||
for (let i = 0; i < 7; i++)
|
||||
{
|
||||
if(columns === 0 && i < firstDay) {
|
||||
let day = document.createElement("div");
|
||||
day.classList.add("calendar-table__col", "calendar-table__item");
|
||||
// day.innerText = date;
|
||||
|
||||
row.appendChild(day);
|
||||
}
|
||||
else if(date > countDays(year, 6)) {
|
||||
break;
|
||||
}
|
||||
|
||||
else {
|
||||
let day = document.createElement("div");
|
||||
day.classList.add("calendar-table__col", "calendar-table__item");
|
||||
day.innerText = date;
|
||||
|
||||
row.appendChild(day);
|
||||
date++;
|
||||
}
|
||||
|
||||
// let day = document.createElement("div");
|
||||
// day.classList.add("calendar-table__col", "calendar-table__item");
|
||||
// day.innerText = date;
|
||||
// // let
|
||||
//
|
||||
// row.appendChild(day);
|
||||
//
|
||||
// date++;
|
||||
}
|
||||
calendar.appendChild(row);
|
||||
}
|
||||
}
|
||||
|
||||
function nextMonth() {
|
||||
currentMonth++;
|
||||
|
||||
if(currentMonth > 11)
|
||||
currentMonth = 0;
|
||||
|
||||
months.forEach((value, index) => {
|
||||
if(index === currentMonth)
|
||||
month.innerText = value;
|
||||
});
|
||||
|
||||
drawMonth(currentMonth);
|
||||
}
|
||||
|
||||
function previousMonth() {
|
||||
currentMonth--;
|
||||
|
||||
if(currentMonth < 0)
|
||||
currentMonth = 11;
|
||||
|
||||
months.forEach((value, index) => {
|
||||
if(index === currentMonth)
|
||||
month.innerText = value;
|
||||
});
|
||||
|
||||
drawMonth(currentMonth);
|
||||
}
|
||||
|
||||
|
||||
function countDays(year, month) {
|
||||
return 32 - new Date(year, month, 32).getDate();
|
||||
}
|
||||
|
||||
// Monday
|
||||
// Tuesday
|
||||
// Wednesday
|
||||
// Thursday
|
||||
// Friday
|
||||
// Saturday
|
||||
// Sunday
|
||||
//
|
||||
// mon tue wed thu fri sat sun
|
||||
|
||||
|
||||
module.exports = {
|
||||
createCalendar,
|
||||
countDays,
|
||||
nextMonth,
|
||||
previousMonth,
|
||||
calendar,
|
||||
days,
|
||||
months,
|
||||
currentMonth,
|
||||
month,
|
||||
};
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
class Month {
|
||||
constructor(year, monthOffsetNormalized) {
|
||||
this.year = year;
|
||||
this.normalizedOffset = monthOffsetNormalized;
|
||||
}
|
||||
|
||||
init() {
|
||||
this.firstDay = (new Date(this.year, month - 1)).getDay();
|
||||
|
||||
|
||||
}
|
||||
|
||||
draw(render) {
|
||||
this.clearRender(render);
|
||||
|
||||
|
||||
}
|
||||
|
||||
clearRender(render) {
|
||||
let renderElement = document.getElementById(render);
|
||||
renderElement.innerHTML = "";
|
||||
}
|
||||
|
||||
createDay() {
|
||||
|
||||
}
|
||||
|
||||
countDays() {
|
||||
return 32 - new Date(this.year, this.normalizedOffset - 1, 32).getDate();
|
||||
}
|
||||
}
|
||||
|
|
@ -10,26 +10,26 @@
|
|||
<div class="col w-100 mt-auto">
|
||||
<div class="calendar-container">
|
||||
<div class="calendar-container__header">
|
||||
<button class="calendar-container__btn calendar-container__btn--left" title="Previous">
|
||||
<button id="month-previous" class="calendar-container__btn calendar-container__btn--left" title="Previous">
|
||||
<i class="icon ion-ios-arrow-back"></i>
|
||||
</button>
|
||||
<h2 class="calendar-container__title">{Måned} {År}</h2>
|
||||
<button class="calendar-container__btn calendar-container__btn--right" title="Next">
|
||||
<h2 id="month" class="calendar-container__title">{Måned} {År}</h2>
|
||||
<button id="month-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 class="calendar-table">
|
||||
<div class="calendar-table__header">
|
||||
<div class="calendar-table__row">
|
||||
<div class="calendar-table__col">Man</div>
|
||||
<div class="calendar-table__col">Tir</div>
|
||||
<div class="calendar-table__col">Ons</div>
|
||||
<div class="calendar-table__col">Tor</div>
|
||||
<div class="calendar-table__col">Fre</div>
|
||||
<div class="calendar-table__col">Lør</div>
|
||||
<div class="calendar-table__col">Søn</div>
|
||||
</div>
|
||||
<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">
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
{{--@extends("app.vagttelefons.index")--}}
|
||||
|
||||
{{--Booking Liste--}}
|
||||
{{--@extends("app.bookings.index")--}}
|
||||
@extends("app.bookings.index")
|
||||
|
||||
{{----}}
|
||||
{{------Admin Panel
|
||||
|
|
@ -35,7 +35,7 @@
|
|||
{{--@extends("admin.menuplans.create")--}}
|
||||
|
||||
{{--Read Menuplan--}}
|
||||
{{----}}@extends("admin.menuplans.show")
|
||||
{{--@extends("admin.menuplans.show")--}}
|
||||
|
||||
{{--Update Menuplan--}}
|
||||
{{--@extends("admin.menuplans.update")--}}
|
||||
|
|
|
|||
Loading…
Reference in New Issue