Letter.vue 4.8 KB
Newer Older
Markus Opolka's avatar
Markus Opolka committed
1
<template>
Markus Opolka's avatar
Markus Opolka committed
2
3
4
5
6
7
<v-container grid-list-md>
  <v-layout row wrap>
    <v-flex xs12>
      <h3>{{underscore(lettername)}}</h3>
    </v-flex>
  </v-layout>
8

Markus Opolka's avatar
Markus Opolka committed
9
10
11
12
13
14
15
16
17
18
19
20
21
  <v-layout row wrap v-if="letter">
    <!-- Author Data -->
    <v-flex xs6>
      <v-card flat>
        <v-card-text>
          <ul style="list-style-type:none;">
            <li v-for="(value, key) in letter.teiHeader.fileDesc.titleStmt">
              <span class="body-2">{{ capitalize(key) }}:</span> {{ value._text }}
            </li>
          </ul>
        </v-card-text>
      </v-card>
    </v-flex>
22

Markus Opolka's avatar
Markus Opolka committed
23
24
25
26
    <!-- Images -->
    <v-flex xs6>
      <v-layout row wrap>
        <v-flex d-flex v-for="(image,i) in images" :key="i" >
Markus Opolka's avatar
Markus Opolka committed
27
          <v-card flat hover target="_blank" :href="imgfolder(image._attributes.url)">
Markus Opolka's avatar
Markus Opolka committed
28
29
30
31
32
33
34
35
36
            <v-card-text class="text-xs-center">
              <v-avatar size="120px">
                <img v-bind:src="imgfolder(image._attributes.url)" :alt="image._attributes.url">
              </v-avatar>
            </v-card-text>
          </v-card>
        </v-flex>
      </v-layout>
    </v-flex>
37

Markus Opolka's avatar
Markus Opolka committed
38
    <!-- Text -->
39
    <v-flex xs5>
Markus Opolka's avatar
Markus Opolka committed
40
41
      <v-card>
        <v-card-text>
Markus Opolka's avatar
Markus Opolka committed
42
          <v-checkbox label="Montrer commentaires" v-model="showComments"></v-checkbox>
Markus Opolka's avatar
Markus Opolka committed
43
          <ul style="list-style-type:none;" class="letter-text">
44
45
            <li v-for="(value, key) in letter.text.body.l" :class="value._attributes.no" v-if="hasText(formatText(value._text))">
              {{value._attributes.no }}: {{ formatText(value._text) }}
Markus Opolka's avatar
Markus Opolka committed
46
              <div class="teal--text" v-if="value.note && showComments">
47
48
49
50
                <div v-for="note in value.note">
                  <span v-if="note._attributes">{{note._text}}:  {{note._attributes.text}}</span>
                  <span v-else>{{note.text}}</span>
                </div>
Markus Opolka's avatar
Markus Opolka committed
51
              </div>
Markus Opolka's avatar
Markus Opolka committed
52
53
54
55
56
            </li>
          </ul>
        </v-card-text>
      </v-card>
    </v-flex>
57

Markus Opolka's avatar
Markus Opolka committed
58
    <!-- Features -->
59
    <v-flex xs7>
Markus Opolka's avatar
Markus Opolka committed
60
      <v-expansion-panel>
Markus Opolka's avatar
Markus Opolka committed
61
62
        <v-expansion-panel-content v-for="feature in features" :key="feature.text">
          <div slot="header">{{feature.text}}</div>
Markus Opolka's avatar
Markus Opolka committed
63
          <v-card>
64
            <v-card-text>
Markus Opolka's avatar
Markus Opolka committed
65
              <feature :root="feature.root" />
Markus Opolka's avatar
Markus Opolka committed
66
67
68
69
70
71
            </v-card-text>
          </v-card>
        </v-expansion-panel-content>
      </v-expansion-panel>
    </v-flex>
  </v-layout>
Markus Opolka's avatar
Markus Opolka committed
72

Markus Opolka's avatar
Markus Opolka committed
73
74
75
76
77
78
79
  <!-- Progress Bar -->
  <v-layout v-else>
    <v-flex xs12 >
      <v-progress-linear indeterminate color="primary"></v-progress-linear>
    </v-flex>
  </v-layout>
</v-container>
Markus Opolka's avatar
Markus Opolka committed
80
81
82
83
</template>

<script>
export default {
Markus Opolka's avatar
Markus Opolka committed
84
  // Single Letter Component
Markus Opolka's avatar
Markus Opolka committed
85
86
87
  name: 'Letter',
  data () {
    return {
88
      lettername: '',
89
      letter: null,
Markus Opolka's avatar
Markus Opolka committed
90
      images: [],
91
      showComments: true,
Markus Opolka's avatar
Markus Opolka committed
92
      features: []
Markus Opolka's avatar
Markus Opolka committed
93
94
    }
  },
95
  methods: {
96
97
98
99
100
101
102
103
104
105
106
    hasText (text) {
      // Check if string is empty
      return text.length !== 0
    },
    formatText (text) {
      // Remove [Stuff] from text
      if (!this.showComments) {
        text = text.replace(/\[.*\]/, '')
      }
      return text
    },
107
    capitalize (word) {
Markus Opolka's avatar
Markus Opolka committed
108
      // Capitalize first letter of a String
109
      return word.charAt(0).toUpperCase() + word.slice(1)
Markus Opolka's avatar
Markus Opolka committed
110
    },
111
    imgfolder (img) {
Markus Opolka's avatar
Markus Opolka committed
112
      // Add static image folder to path
Markus Opolka's avatar
Markus Opolka committed
113
      return '/static/' + img
Markus Opolka's avatar
Markus Opolka committed
114
    },
115
    underscore (str) {
Markus Opolka's avatar
Markus Opolka committed
116
      return str.replace('_', ' ')
117
118
    }
  },
Markus Opolka's avatar
Markus Opolka committed
119
  created () {
120
    // Get Name from Router and call API
121
122
    this.lettername = this.$route.params.letter
    this.$http.get('http://localhost:3000/api/letters/' + this.lettername).then(function (data) {
Markus Opolka's avatar
Markus Opolka committed
123
      // If there's only one element xml-js makes no array... great stuff -.-
124

Markus Opolka's avatar
Markus Opolka committed
125
126
127
128
129
      if (data.body.TEI.text.head.graphic instanceof Array) {
        this.images = data.body.TEI.text.head.graphic
      } else {
        this.images.push(data.body.TEI.text.head.graphic)
      }
Markus Opolka's avatar
Markus Opolka committed
130
131

      // So we can iterate in the template
Markus Opolka's avatar
Markus Opolka committed
132
133
134
135
136
137
      this.features.push({text: 'caractéristiques visuelles', root: data.body.TEI.teiHeader.xenoData.paratext})
      this.features.push({text: 'caractéristiques graphiques', root: data.body.TEI.teiHeader.xenoData.sprachliche_ebene.graphische_charaktersitika})
      this.features.push({text: 'caractéristiques lexicales', root: data.body.TEI.teiHeader.xenoData.sprachliche_ebene.lexikalische_charaktersitika})
      this.features.push({text: 'caractéristiques morphosyntaxiques', root: data.body.TEI.teiHeader.xenoData.sprachliche_ebene.morphosyntaktische_charakterisitka})
      this.features.push({text: 'caractéristiques  pragmatiques', root: data.body.TEI.teiHeader.xenoData.sprachliche_ebene.textstrukturelle_pragmatische_charakterisitka})
      this.features.push({text: 'caractéristiques de tradition discursive', root: data.body.TEI.teiHeader.xenoData.sprachliche_ebene.diskurstraditionelle_ebene})
Markus Opolka's avatar
Markus Opolka committed
138
139
140

      // Do this last for progress bar
      this.letter = data.body.TEI
141
142

      console.log(data.body.TEI.text.body.l[0].note)
143
    })
Markus Opolka's avatar
Markus Opolka committed
144
145
146
  }
}
</script>