Add programme transcription page #20

api/src/captions.js

@@ -175,4 +175,25 @@ export default class Captions {
     })
     return results.aggregations.programmes.buckets.map(d => { return d.key })
   }
+
+  async fetchProgrammeTranscription(
+    programme_id
+  ) {
+    const query = {
+      query: {
+        bool: {
+          filter: [
+            { term: { programme_id: programme_id } }
+          ]
+        }
+      },
+      size: 10000,
+      sort: { start: { order: 'asc' }}
+    }
+    const results = await this.client.search({
+      index: 'captions',
+      body: query
+    })
+    return results.hits.hits.map(this.mapResult)
+  }
 }

api/src/index.js

@@ -48,5 +48,12 @@ app.get('/fetchProgrammeList', cors(), async (request, response) => {
   response.json(results)
 })
 
+app.get('/fetchProgrammeTranscription', cors(), async (request, response) => {
+  const results = await captions.fetchProgrammeTranscription(
+    request.query.programme_id
+  )
+  response.json(results)
+})
+
 // Register express routes & serve
 app.listen(PORT, () => console.log(`Server running on port ${PORT}`))

web/src/Programme.vue

@@ -0,0 +1,32 @@
+<template>
+  <div>
+    <div class="container">
+      <div v-if="content">
+        <h4>{{ content[0].programme.title }}</h4>
+        <p v-for="(item, key) in content" :key="key" :id="item.time_start">
+          {{ item.time_start | formatTime }}: {{ item.content }}
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Vue from 'vue'
+
+export default {
+  data() {
+    return {
+      content: null
+    }
+  },
+  mounted() {
+    const params = {
+      programme_id: this.$route.params.id
+    }
+    Vue.verbaAPI('fetchProgrammeTranscription', params, response => {
+      this.content = response.data
+    })
+  }
+}
+</script>

web/src/Programmes.vue → web/src/ProgrammeList.vue

@@ -3,7 +3,9 @@
     <div class="container">
       <ul class="list-unstyled">
         <li v-for="(programme, key) in programmeList" :key="key">
-          {{ programme }}
+          <router-link
+            :to="{ name: 'programme-details', params: { id: programme.id } }"
+            class="nav-link">{{ programme.title }}</router-link>
         </li>
       </ul>
     </div>

web/src/main.js

@@ -5,7 +5,8 @@ import { sync } from 'vuex-router-sync'
 
 import App from './App.vue'
 import Search from './Search.vue'
-import Programmes from './Programmes.vue'
+import ProgrammeList from './ProgrammeList.vue'
+import Programme from './Programme.vue'
 import About from './About.vue'
 import VerbaAPI from './verba-api.js'
 
@@ -33,18 +34,23 @@ global.router = new VueRouter({
   routes: [
     {
       path: '/',
-      component: Search,
-      name: 'search'
+      name: 'search',
+      component: Search
     },
     {
       path: '/programmes',
-      component: Programmes,
-      name: 'programmes'
+      name: 'programmes',
+      component: ProgrammeList
+    },
+    {
+      path: '/programmes/:id',
+      name: 'programme-details',
+      component: Programme
     },
     {
       path: '/about',
-      component: About,
-      name: 'about'
+      name: 'about',
+      component: About
     }
   ]
 })

web/src/verba-api.js

@@ -2,12 +2,12 @@ import axios from 'axios'
 
 const VerbaAPI = {
   install(Vue, options) {
-    Vue.verbaAPI = function (methodName, params, callback) {
+    Vue.verbaAPI = function(methodName, params, callback) {
       axios
         .get(process.env.VUE_APP_API_URL + methodName, { params })
         .then(callback)
     }
   }
 }
 
-export default VerbaAPI;
+export default VerbaAPI