Calendar.vue 8.75 KB
Newer Older
Kent Nielsen's avatar
Kent Nielsen committed
1
2
3
4
<template>
<div id="calendar">
    <table>
        <thead>
5
          <!-- Generating first header of schema -->
6
          <tr>
7
8
            <th>
              <div>
Kent Nielsen's avatar
Kent Nielsen committed
9
                <button id="offSizeButton" @click="prevWeek()"> &larr; </button>
10
11
              </div>
            </th>
Kent Nielsen's avatar
Kent Nielsen committed
12
            <th colspan="4">Uge: {{getWeek(today)}} - {{getMonthName(today.getMonth())}}</th>
13
14
15
16
17
            <th>
              <div>
                <button @click="nextWeek()"> &rarr; </button>
              </div>
            </th>
18
          </tr>
19
          <!-- Empty cell to make monday move 1 cell left -->
Kent Nielsen's avatar
Kent Nielsen committed
20
          <th></th>
21
          <!-- Generating weekday names and month number-->
22
          <th v-for="(day,i) in weekDays" :key="day">
23
              {{day}} - {{getDateOfISOWeek(getWeek(today), today.getFullYear(), i).getDate()}}
24
          </th>
Kent Nielsen's avatar
Kent Nielsen committed
25
26
        </thead>
        <tbody>
27
          <!-- Generating time rows -->
Kent Nielsen's avatar
Kent Nielsen committed
28
          <tr v-for="(time,i) in time" :key="time" :style="{height: halfHourSpace*2 + 'px'}">
29
30
            <td>{{time}}</td>
            <!-- Generating schema based on first row-->
Kent Nielsen's avatar
Kent Nielsen committed
31
32
            <template v-if="firstIndex(i)">
              <td id="skematd"  v-for="day in schedule" :key="day">
33
                  <!-- Adding and calculatings divs for each task, offset form the first row -->
34
35
36
37
38
39
                  <a href="/about">
                    <div v-for="task in day" :key="task" 
                    :style="{height: (task.stop-0.25-task.start)*halfHourSpace + 'px', top: task.start*halfHourSpace + 'px'}">
                      {{task.name}}
                    </div>
                  </a>
Kent Nielsen's avatar
Kent Nielsen committed
40
41
              </td>
            </template>
42
            <!-- All other rows than the first are empty, but full of cells -->
Kent Nielsen's avatar
Kent Nielsen committed
43
44
45
46
47
48
49
50
51
52
53
            <template v-else>
              <td v-for="n in 5" :key="n"></td>
            </template>
          </tr>
        </tbody>
    </table>
</div>
</template>

<script>
export default {
54
55
56
  name: 'Cal',
  data() {
    return {
57
      // Currently showing schema data
58
59
60
61
62
63
64
      schedule: [
        {a: {name: "Exsys", start: 2*6, stop: 2*8}},
        {a: {name: "CompArk", start: 2*2, stop: 2*4}, b: {name: "Numla", start: 2*4, stop: 2*6}},
        {a: {name: "Numla TØ", start: 2*3, stop: 2*5}, b:{name: "Exsys", start: 2*6, stop: 2*7}},
        {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}}
      ],
65
66
      
      // Dummy data for week 12 
67
68
69
70
71
72
73
      scheduleWeek12: [
        {a: {name: "Exsys", start: 2*6, stop: 2*8}},
        {a: {name: "CompArk", start: 2*2, stop: 2*4}, b: {name: "Numla", start: 2*4, stop: 2*6}},
        {a: {name: "Numla TØ", start: 2*3, stop: 2*5}, b:{name: "Exsys", start: 2*6, stop: 2*7}},
        {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}}
      ],
74
75

      // Dummy data for week 14 (Monday is a day off in this week)
76
77
78
79
80
81
82
      scheduleWeek14: [
        {},
        {a: {name: "CompArk", start: 2*2, stop: 2*4}, b: {name: "Numla", start: 2*4, stop: 2*6}},
        {a: {name: "Numla TØ", start: 2*3, stop: 2*5}, b:{name: "Exsys", start: 2*6, stop: 2*7}},
        {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}}
      ],
83
84
      
      // Dummy data for an empty week
85
86
87
      scheduleEmpty: [
        {},{},{},{},{}
      ],
88
89

      // Time intervals, each time segment is contained in a single tr in the table
90
      time: ["8:00", "9:00", "10:00", "11:00", "12:00", "13:00", "14:00", "15:00", "16:00"],
91
92
      
      // the size of an half hour of time in the schema
93
      halfHourSpace: [19],
94
95

      // Names of all month, used in the schema header
96
97
98
      monthName: ["January", "Februar", "Marts", "April", "Maj", "Juni",
                    "Juli", "August", "September", "Oktober", "November", "December"
                    ],
99
100

      // Shorthands of names of weekday, used in the schema header
Kent Nielsen's avatar
Kent Nielsen committed
101
      weekDays: ["Man", "Tirs", "Ons", "Tors", "Fre"],
102
103

      // The current date the schema is showing. This is changed on each movement of schema
104
105
106
107
      today: new Date()
    }
  },
  methods: {
108
    // Move the date 7 days back
109
110
    prevWeek(){
      this.today = new Date(this.today.getFullYear(), this.today.getMonth(), this.today.getDate() - 7);
111
112
      this.changeSchedule();
    },
113
114

    // Move the date 7 days forward
115
116
    nextWeek(){
      this.today = new Date(this.today.getFullYear(), this.today.getMonth(), this.today.getDate() + 7);
117
118
      this.changeSchedule();
    },
119
120

    // Changes the schedule to the current week, is invoked each time the date is changed
121
122
123
124
125
    changeSchedule(){
      const week = this.getWeek(this.today);
      if(week == "12"){this.schedule=this.scheduleWeek12}
      else if(week == "13"){
        this.schedule = this.scheduleEmpty;
Kent Nielsen's avatar
Kent Nielsen committed
126
      }
127
128
129
130
131
132
133
      else if(week == "14"){
        this.schedule=this.scheduleWeek14;
      }
      else if(week < 6 || week > 20){
        this.schedule=this.scheduleEmpty;
      }
      else{this.schedule = this.scheduleWeek12}
Kent Nielsen's avatar
Kent Nielsen committed
134
    },
135
136

    // Check for first index in a loop
137
138
139
    firstIndex(index){
      return index === 0
    },
140

141
    // Source: https://stackoverflow.com/questions/6117814/get-week-of-year-in-javascript-like-in-php
142
    // Calculate the ISO week, of the current date. Used to show week number
143
144
145
146
147
148
149
150
    getWeek(day) {
      var date = new Date(day.getTime());
      date.setHours(0, 0, 0, 0);
      date.setDate(date.getDate() + 3 - (date.getDay() + 6) % 7);
      var week1 = new Date(date.getFullYear(), 0, 4);
      return 1 + Math.round(((date.getTime() - week1.getTime()) / 86400000
                      - 3 + (week1.getDay() + 6) % 7) / 7);
    },
151
152
153
154

    // Source: Stackexchange - lost link in battle
    // Calculate the first day of a iso week in a given year
    // Used to calculate the datenumber for the schema header
155
    getDateOfISOWeek(w, y, offset) {
156
157
158
159
160
161
162
163
164
      var simple = new Date(y, 0, 1 + (w - 1) * 7);
      var dow = simple.getDay();
      var ISOweekStart = simple;
      if (dow <= 4) {
        ISOweekStart.setDate(simple.getDate() - simple.getDay() + 1);
      }
      else {
        ISOweekStart.setDate(simple.getDate() + 8 - simple.getDay());
      }
165
      ISOweekStart.setDate(ISOweekStart.getDate() + offset)
166
167
      return ISOweekStart;
    },
168
169

    // Returns the month name of a given month number
170
171
    getMonthName(month){
      return this.monthName[month];
Kent Nielsen's avatar
Kent Nielsen committed
172
173
    }
  }
174
}
Kent Nielsen's avatar
Kent Nielsen committed
175
176
</script>

Kent Nielsen's avatar
Kent Nielsen committed
177
<style lang="scss" scoped>
Kent Nielsen's avatar
Kent Nielsen committed
178

Kent Nielsen's avatar
Kent Nielsen committed
179
180
  table{
    width: 100%;
181
    position: absolute;
Kent Nielsen's avatar
Kent Nielsen committed
182
183
    border-collapse: collapse;

184
185
186
187
188
189
    thead{
      border: 0;
      padding: 0;
      height: 100%;

      tr{
190
191
        height: 37px;

192
        th{
193
194
          height: 28px;
          font-size: 106%;
195
          box-sizing: border-box;
196
197
198
199
          vertical-align: middel;
        }

        div{
Lasse Overgaard Møldrup's avatar
Lasse Overgaard Møldrup committed
200
          height: 28px;
201
          vertical-align: middle;
Lasse Overgaard Møldrup's avatar
Lasse Overgaard Møldrup committed
202
          margin-bottom: 4px;
203
204
205
206
        }
      }

      th{
207
208
        background-color: $theme-color;
        color: $lightest-theme-color;
209
        width: 16.6666%;
210
        padding: 1px;
Kent Nielsen's avatar
Kent Nielsen committed
211
        &:first-of-type{
212
          width: 7%;
Kent Nielsen's avatar
Kent Nielsen committed
213
214
        }
        
215
216
      }

Kent Nielsen's avatar
Kent Nielsen committed
217
218
219
220
221
222
223
224
225
226
227
228
    }
    
    tbody tr{
      margin: 0px;
      padding: 0px;
    }
  
    td{
      vertical-align: top;
      border:1px solid rgb(185, 185, 185);
      padding: 0;
      align-items: center;
229
      vertical-align: middle;
230

Kent Nielsen's avatar
Kent Nielsen committed
231
232
233
234
      &:first-child{
        background-color: $theme-color;
        color: $lightest-theme-color;
      }
235
236
237
238
      a:hover{
        color: $text-color;
      }

Kent Nielsen's avatar
Kent Nielsen committed
239
      div{
240
        background-color: $light-theme-color+af;
Kent Nielsen's avatar
Kent Nielsen committed
241
242
243
244
245
246
        position: absolute;
        offset-position: 0 0;
        width: 90%;
        margin-left: 5%;
        margin-right: 5%;
        box-sizing: border-box;
247
        box-shadow: 1px 1px 2px;
248
        padding-top: 5px;
249
250
251
        &:hover{
          box-shadow: 1px 1px 6px;
        }
Kent Nielsen's avatar
Kent Nielsen committed
252
253
254
255
256
257
258
      }
    }
    
    tr{
      td:last-child {
        border-right: 0;
      }
Kent Nielsen's avatar
Kent Nielsen committed
259

Kent Nielsen's avatar
Kent Nielsen committed
260
261
262
263
      td:first-child {
        border-left: 0;
      }
    }
Kent Nielsen's avatar
Kent Nielsen committed
264

Kent Nielsen's avatar
Kent Nielsen committed
265
266
267
    button{
      cursor: pointer;
      border: 0;
268
269
270
271
272
      border-radius: 3px;
      box-sizing: border-box;
      width: 50%;
      height: 100%;
      font-size: 125%;
273
274
      background-color: $dark-theme-color;
      color: $lightest-theme-color;
275
      vertical-align: bottom;
276
      display: inline-block;
277
      padding-bottom: 11px;
278
279
      padding-top: 0px;
      box-sizing: border-box;
Kent Nielsen's avatar
Kent Nielsen committed
280
      box-shadow: 1px 1px 3px black;
Kent Nielsen's avatar
Kent Nielsen committed
281
    }
Kent Nielsen's avatar
Kent Nielsen committed
282
283

    #offSizeButton{
284
285
      width: 122%;
      margin-left: 60%;
Kent Nielsen's avatar
Kent Nielsen committed
286
    }
Kent Nielsen's avatar
Kent Nielsen committed
287
288
  }

Kent Nielsen's avatar
Kent Nielsen committed
289
290
  #skematd{
    position: relative;
Kent Nielsen's avatar
Kent Nielsen committed
291
292
293
294
    vertical-align: top;
  }
  
  #calendar{
295
    min-width: 250px;
296
    width: 100%;
297
    height: 100%;
298
    position: relative;
Kent Nielsen's avatar
Kent Nielsen committed
299
300
    //overflow: auto;
    box-sizing: content-box;
Kent Nielsen's avatar
Kent Nielsen committed
301
  }
302
</style>