Deadlines.vue 1.64 KB
Newer Older
1
<template>
2
  <BlockTemplate heading="Deadlines" :row="row" :col="col">
3
4
5
    <ul>
      <li v-for="(deadline, index) in deadlines" :key="index">
        <span class="course-name">{{ deadline.course }}</span>
6
        <span class="due-date" :class="{ close: (deadline.date - new Date()) / (1000 * 60 * 60 * 24) < 1 }"><strong>
7
          {{ deadline.date.toLocaleDateString('da-dk').replace(/\./g, '/') + ' ' + deadline.date.toLocaleTimeString('da-dk').slice(0, -3) }}
8
        </strong></span>
9
10
11
12
13
        <br/>
        <a class="handin-name" href="#">{{ deadline.name }}</a>
        <hr/>
      </li>
    </ul>
14
  </BlockTemplate>
15
16
17
</template>

<script>
Lasse Overgaard Møldrup's avatar
Lasse Overgaard Møldrup committed
18
19
20
21
22
23
24
25
26
27
28
29
Date.prototype.addDays = function(days) {
  const date = new Date(this.valueOf());
  date.setDate(date.getDate() + days);
  return date;
}

Date.prototype.toMidnight = function() {
  const date = new Date(this.valueOf());
  date.setHours(0, 0, 0, 0);
  return date;
}

30
31
export default {
  name: 'Deadlines',
32
33
34
  
  props: ['row', 'col'],

35
36
37
  data() {
    return {
      deadlines: [{ course: "Calculus Beta", name: "Aflevering 1", date: new Date() },
Lasse Overgaard Møldrup's avatar
Lasse Overgaard Møldrup committed
38
39
                  { course: "Databaser", name: "SQL", date: new Date().addDays(2).toMidnight() },
                  { course: "Numerisk Lineær Algebra", name: "Python for dummies", date: new Date().addDays(3).toMidnight() }]
40
41
42
43
44
45
    }
  }
}
</script>

<style scoped lang="scss">
Kent Nielsen's avatar
Kent Nielsen committed
46
47
48
49
  .block{
    min-width: 350px;
  }

50
51
  ul {
    margin-top: 8px;
52
53
  }

54
  li:nth-child(even) {
55
    background-color: $lighter-green-theme-color;
56
57
  }

58
59
  .due-date {
    float: right;
60
    vertical-align: center;
61
62
63
64
65
66
67
68
69
70

    &.close {
      color: rgb(220, 0, 0)
    }
  }

  .handin-name {
    font-size: 1.1em;
  }
</style>