Letters.vue 1.19 KB
Newer Older
Markus Opolka's avatar
Markus Opolka committed
1
2
3
4
5
6
7
<template>
 <v-container grid-list-md>
    <v-layout row wrap>
      <v-flex xs12>
        <h3>{{header}}</h3>
      </v-flex>

Markus Opolka's avatar
Markus Opolka committed
8
      <!-- List of all Letters -->
9
      <v-flex xs12 v-if="letters">
Markus Opolka's avatar
Markus Opolka committed
10
11
        <v-list>
          <template v-for="letter in letters">
Markus Opolka's avatar
Markus Opolka committed
12
            <v-list-tile avatar v-bind:key="letter.url" :to="letter.link">
Markus Opolka's avatar
Markus Opolka committed
13
              <v-list-tile-avatar>
Markus Opolka's avatar
Markus Opolka committed
14
                <v-icon grey lighten-1 white--text>mail</v-icon>
Markus Opolka's avatar
Markus Opolka committed
15
16
17
18
19
20
21
22
23
              </v-list-tile-avatar>
              <v-list-tile-content>
                <v-list-tile-title v-html="letter.name"></v-list-tile-title>
              </v-list-tile-content>
            </v-list-tile>
            <v-divider></v-divider>
          </template>
        </v-list>
      </v-flex>
24

25
      <!-- Progress Bar -->
26
      <v-flex xs12 v-else>
27
        <v-progress-linear indeterminate color="primary"></v-progress-linear>
28
29
      </v-flex>

Markus Opolka's avatar
Markus Opolka committed
30
31
32
33
34
35
36
37
38
39
40
    </v-layout>
 </v-container>

</template>

<script>
export default {
  name: 'Letters',
  data () {
    return {
      header: 'Letters',
41
      letters: null
Markus Opolka's avatar
Markus Opolka committed
42
43
44
    }
  },
  created () {
45
    this.$http.get('http://localhost:3000/api/metadata/table').then(function (data) {
Markus Opolka's avatar
Markus Opolka committed
46
47
48
49
50
      this.letters = data.body
    })
  }
}
</script>