Commit 911662d5 authored by Johan Tanderup Degn's avatar Johan Tanderup Degn
Browse files

Merge branch 'feature/calendar-fix' into 'develop'

Feature/calendar fix

See merge request !19
parents 848114c2 a6593891
Pipeline #52375 passed with stages
in 2 minutes and 47 seconds
......@@ -1651,87 +1651,6 @@
"webpack-chain": "^6.4.0",
"webpack-dev-server": "^3.11.0",
"webpack-merge": "^4.2.2"
},
"dependencies": {
"ansi-styles": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
"dev": true,
"optional": true,
"requires": {
"color-convert": "^2.0.1"
}
},
"chalk": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
"integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
"dev": true,
"optional": true,
"requires": {
"ansi-styles": "^4.1.0",
"supports-color": "^7.1.0"
}
},
"color-convert": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
"dev": true,
"optional": true,
"requires": {
"color-name": "~1.1.4"
}
},
"color-name": {
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
"dev": true,
"optional": true
},
"has-flag": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
"dev": true,
"optional": true
},
"loader-utils": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
"integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
"dev": true,
"optional": true,
"requires": {
"big.js": "^5.2.2",
"emojis-list": "^3.0.0",
"json5": "^2.1.2"
}
},
"supports-color": {
"version": "7.2.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
"dev": true,
"optional": true,
"requires": {
"has-flag": "^4.0.0"
}
},
"vue-loader-v16": {
"version": "npm:vue-loader@16.2.0",
"resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.2.0.tgz",
"integrity": "sha512-TitGhqSQ61RJljMmhIGvfWzJ2zk9m1Qug049Ugml6QP3t0e95o0XJjk29roNEiPKJQBEi8Ord5hFuSuELzSp8Q==",
"dev": true,
"optional": true,
"requires": {
"chalk": "^4.1.0",
"hash-sum": "^2.0.0",
"loader-utils": "^2.0.0"
}
}
}
},
"@vue/cli-shared-utils": {
......@@ -11354,6 +11273,87 @@
}
}
},
"vue-loader-v16": {
"version": "npm:vue-loader@16.2.0",
"resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.2.0.tgz",
"integrity": "sha512-TitGhqSQ61RJljMmhIGvfWzJ2zk9m1Qug049Ugml6QP3t0e95o0XJjk29roNEiPKJQBEi8Ord5hFuSuELzSp8Q==",
"dev": true,
"optional": true,
"requires": {
"chalk": "^4.1.0",
"hash-sum": "^2.0.0",
"loader-utils": "^2.0.0"
},
"dependencies": {
"ansi-styles": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
"dev": true,
"optional": true,
"requires": {
"color-convert": "^2.0.1"
}
},
"chalk": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
"integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
"dev": true,
"optional": true,
"requires": {
"ansi-styles": "^4.1.0",
"supports-color": "^7.1.0"
}
},
"color-convert": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
"dev": true,
"optional": true,
"requires": {
"color-name": "~1.1.4"
}
},
"color-name": {
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
"dev": true,
"optional": true
},
"has-flag": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
"dev": true,
"optional": true
},
"loader-utils": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
"integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
"dev": true,
"optional": true,
"requires": {
"big.js": "^5.2.2",
"emojis-list": "^3.0.0",
"json5": "^2.1.2"
}
},
"supports-color": {
"version": "7.2.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
"dev": true,
"optional": true,
"requires": {
"has-flag": "^4.0.0"
}
}
}
},
"vue-router": {
"version": "4.0.5",
"resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.0.5.tgz",
......
<template>
<div id="calendar">
<table>
<table id="calendarTable">
<thead :draggable="dragEnabled.value" @dragstart="startDrag($event, row, col)" @dragend.prevent="stopDrag()">
<!-- Generating first header of schema -->
<tr>
<th>
<div>
<button id="offSizeButton" @click="prevWeek()"> &larr; </button>
</div>
</th>
<th colspan="4">Uge: {{getWeek(today)}} - {{getMonthName(today.getMonth())}}</th>
<th>
<div>
<button @click="nextWeek()"> &rarr; </button>
<th id="calendarHead" colspan="6">
<div id="headerDiv">
<div>
<button id="leftButton" @click="prevWeek()"> &larr; </button>
</div>
<div>
Uge: {{getWeek(today)}} - {{getMonthName(today.getMonth())}}
</div>
<div>
<button id="rightButton" @click="nextWeek()"> &rarr; </button>
</div>
</div>
</th>
</tr>
<!-- Empty cell to make monday move 1 cell left -->
<th></th>
<!-- Generating weekday names and month number-->
<th v-for="(day,i) in weekDays" :key="day">
{{day}} - {{getDateOfISOWeek(getWeek(today), today.getFullYear(), i).getDate()}}
</th>
<tr>
<!-- Empty cell to make monday move 1 cell left -->
<th></th>
<!-- Generating weekday names and month number-->
<template v-if="schedule.length == 1">
<th v-bind:colspan="colSpanValue" v-for="(n,i) in schedule" :key="i">
{{weekDays[today.getDay()-1]}} - {{today.getDate()}}
</th>
</template>
<!-- Generate a single day, if size is too small -->
<template v-else>
<th v-bind:colspan="colSpanValue" v-for="(n,i) in schedule" :key="i">
{{weekDays[i]}} - {{getDateOfISOWeek(getWeek(today), today.getFullYear(), i).getDate()}}
</th>
</template>
</tr>
</thead>
<tbody>
<!-- Generating time rows -->
<tr v-for="(time,i) in time" :key="time" :style="{height: halfHourSpace*2 + 'px'}">
<tr v-for="(time,i) in time" :key="time" >
<td>{{time}}</td>
<!-- Generating schema based on first row-->
<template v-if="firstIndex(i)">
<td id="skematd" v-for="day in schedule" :key="day">
<td :colspan="colSpanValue" id="skematd" v-for="day in schedule" :key="day">
<!-- Adding and calculatings divs for each task, offset form the first row -->
<a href="/about">
<div v-for="task in day" :key="task"
......@@ -41,7 +53,7 @@
</template>
<!-- All other rows than the first are empty, but full of cells -->
<template v-else>
<td v-for="n in 5" :key="n"></td>
<td :colspan="colSpanValue" v-for="n in schedule" :key="n"></td>
</template>
</tr>
</tbody>
......@@ -67,6 +79,9 @@ export default {
{a: {name: "CompArk", start: 2*2, stop: 2*4}, b:{name: "Numla", start: 2*4, stop: 2*6}, c:{name: "Exsys TØ", start: 2*6, stop: 2*9}},
{a: {name: "CompArk TØ", start: 0, stop: 2*3}}
],
scheduleDay:[
{a: {name: "Exsys", start: 2*6, stop: 2*8}}
],
// Dummy data for week 12
scheduleWeek12: [
......@@ -96,6 +111,8 @@ export default {
// the size of an half hour of time in the schema
halfHourSpace: [19],
colSpanValue: [1],
calendarDayWidth: [400],
// Names of all month, used in the schema header
monthName: ["January", "Februar", "Marts", "April", "Maj", "Juni",
......@@ -110,16 +127,43 @@ export default {
}
},
methods: {
// Move the date 7 days back
// Calculate how many days a movement in the calendar should be
// forward: boolean - whether the move is forward or not, changes
// the calculate on friday and monday
daysToAdd (forward){
// If in week view, move 7 days
if(this.schedule.length != 1){
return 7;
}
// If in day view and at friday or monday
// The calendar should move 3 days
if((this.today.getDay() == 5 && forward) || (this.today.getDay() == 1 && !forward)){
return 3;
}
// Neither week view nor friday or monday
return 1;
},
// Move the date back based on calendar view
prevWeek(){
this.today = new Date(this.today.getFullYear(), this.today.getMonth(), this.today.getDate() - 7);
const currentYear = this.today.getFullYear();
const currentMonth = this.today.getMonth();
const dayToMoveCalendarBackTo = this.today.getDate() - this.daysToAdd(false);
this.today = new Date(currentYear, currentMonth, dayToMoveCalendarBackTo);
this.changeSchedule();
this.updateDaysInDisplay();
},
// Move the date 7 days forward
// Move the date forward based on calendar view
nextWeek(){
this.today = new Date(this.today.getFullYear(), this.today.getMonth(), this.today.getDate() + 7);
const currentYear = this.today.getFullYear();
const currentMonth = this.today.getMonth();
const dayToMoveCalendarForwardTo = this.today.getDate() + this.daysToAdd(true);
this.today = new Date(currentYear, currentMonth, dayToMoveCalendarForwardTo);
this.changeSchedule();
this.updateDaysInDisplay();
},
// Changes the schedule to the current week, is invoked each time the date is changed
......@@ -140,7 +184,7 @@ export default {
// Check for first index in a loop
firstIndex(index){
return index === 0
return index === 0;
},
// Source: https://stackoverflow.com/questions/6117814/get-week-of-year-in-javascript-like-in-php
......@@ -167,14 +211,71 @@ export default {
else {
ISOweekStart.setDate(simple.getDate() + 8 - simple.getDay());
}
ISOweekStart.setDate(ISOweekStart.getDate() + offset)
ISOweekStart.setDate(ISOweekStart.getDate() + offset);
return ISOweekStart;
},
// Returns the month name of a given month number
getMonthName(month){
return this.monthName[month];
},
// Update the vertical size of events within the calendar
updateHalfHourSize(){
const tbody = document.getElementById("calendar").getElementsByTagName("tbody")[0];
this.halfHourSpace = (parseInt(window.getComputedStyle(tbody).height)/(2*9));
},
// Update the amount of days in the display
// Therefor changes form week to day view
updateDaysInDisplay(){
if(parseInt(document.getElementById("calendar").clientWidth) < this.calendarDayWidth){
if(this.schedule.length == 5){
this.colSpanValue = 5;
const day = this.schedule[this.today.getDay() - 1];
this.scheduleDay[0] = day;
this.schedule = this.scheduleDay;
const buttons = document.getElementsByTagName("button");
for (let i = 0; i < buttons.length; i++) {
const element = buttons[i];
element.style.width = 40 + "px";
}
}
}else{
this.colSpanValue = 1;
this.schedule = this.scheduleWeek12;
this.changeSchedule();
const buttons = document.getElementsByTagName("button");
for (let i = 0; i < buttons.length; i++) {
const element = buttons[i];
element.style.width = 60 + "px";
}
}
this.updateHalfHourSize();
},
// Initilized the current day on mount of calendar
initToday(){
const firstDayOfWeek = this.getDateOfISOWeek(this.getWeek(this.today), this.today.getFullYear(),0).getDate();
const lastDayOfWeek = this.getDateOfISOWeek(this.getWeek(this.today), this.today.getFullYear(),4).getDate();
const isCurrentDayAfterFriday = this.today.getDate() > lastDayOfWeek;
const isCurrentDayBeforeMonday = this.today.getDate() < firstDayOfWeek;
if(isCurrentDayAfterFriday || isCurrentDayBeforeMonday){
while(this.today.getDate() < lastDayOfWeek){
const currentYear = this.today.getFullYear();
const currentMonth = this.today.getMonth();
const dayToInitCalendarTo = this.today.getDate() - 1;
this.today = new Date(currentYear, currentMonth, dayToInitCalendarTo);
}
}
}
},
mounted(){
this.initToday();
this.updateHalfHourSize();
this.updateDaysInDisplay();
new ResizeObserver(() => this.updateDaysInDisplay()).observe(document.getElementById("calendar"));
}
}
</script>
......@@ -183,17 +284,17 @@ export default {
table{
width: 100%;
position: absolute;
height: 100%;
border-collapse: collapse;
thead{
border: 0;
padding: 0;
height: 100%;
cursor: move;
tr{
height: 37px;
&:first-of-type{
height: 37px;
}
th{
height: 28px;
......@@ -212,21 +313,18 @@ export default {
th{
background-color: $theme-color;
color: $lightest-theme-color;
width: 16.6666%;
padding: 1px;
&:first-of-type{
width: 7%;
}
padding: 1px;
}
}
tbody tr{
margin: 0px;
padding: 0px;
tbody{
tr{
margin: 0px;
padding: 0px;
}
}
td{
vertical-align: top;
border:1px solid rgb(185, 185, 185);
......@@ -234,6 +332,10 @@ export default {
align-items: center;
vertical-align: middle;
&:first-of-type{
width: 10%;
}
&:first-child{
background-color: $theme-color;
color: $lightest-theme-color;
......@@ -252,6 +354,7 @@ export default {
box-sizing: border-box;
box-shadow: 1px 1px 2px;
padding-top: 5px;
&:hover{
box-shadow: 1px 1px 6px;
}
......@@ -259,12 +362,21 @@ export default {
}
tr{
&:first-child td{
border-top: none;
}
&:last-child td{
border-bottom: none;
}
td:last-child {
border-right: 0;
}
td:first-child {
border-left: 0;
padding: 0 3px 0 3px;
}
}
......@@ -285,16 +397,39 @@ export default {
box-sizing: border-box;
box-shadow: 1px 1px 3px black;
}
}
#rightButton{
float: right;
margin-right: $default-margin;
}
#offSizeButton{
width: 122%;
margin-left: 60%;
#leftButton{
float: left;
margin-left: $default-margin;
}
#headerDiv{
display: flex;
div{
flex-grow: 20;
}
div+div{
&:not(:last-of-type){
flex-grow: 60;
}
}
}
#skematd{
position: relative;
vertical-align: top;
div{
overflow: hidden;
}
}
#calendar{
......@@ -302,7 +437,21 @@ export default {
width: 100%;
height: 100%;
position: relative;
//overflow: auto;
box-sizing: content-box;
box-sizing: border-box;
overflow: auto;
}
#calendarHead{
width: 100%;
padding: 0;
div{
margin: 0;
line-height: 28px;
button{
width: 60px;
}
}
}
</style>
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment