Add programme list #20

api/src/captions.js

@@ -152,4 +152,27 @@ export default class Captions {
     })
     return results.hits.hits.map(this.mapResult)
   }
+
+  async fetchProgrammeList() {
+    const query = {
+      size: 0,
+      aggs: {
+        programmes: {
+          composite: {
+            sources: [
+              { id: { terms: {field: 'programme_id.keyword' } } },
+              { title: { terms: {field: 'programme_title.keyword' } } },
+              { date: { date_histogram: { field: 'programme_date', calendar_interval: '1d', format: 'yyyy-MM-dd' } } }
+            ],
+            size : 10000
+          }
+        }
+      }
+    }
+    const results = await this.client.search({
+      index: 'captions',
+      body: query
+    })
+    return results.aggregations.programmes.buckets.map(d => { return d.key })
+  }
 }

api/src/index.js

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

web/src/App.vue

@@ -7,6 +7,9 @@
           <li class="nav-item">
             <router-link :to="{ name: 'search' }" class="nav-link">Search</router-link>
           </li>
+          <li class="nav-item">
+            <router-link :to="{ name: 'programmes' }" class="nav-link">Programmes</router-link>
+          </li>
           <li class="nav-item">
             <router-link :to="{ name: 'about' }" class="nav-link">About</router-link>
           </li>

web/src/Programmes.vue

@@ -0,0 +1,30 @@
+<template>
+  <div>
+    <div class="container">
+      <ul class="list-unstyled">
+        <li v-for="(programme, key) in programmeList" :key="key">
+          {{ programme }}
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+
+export default {
+  data() {
+    return {
+      programmeList: []
+    }
+  },
+  mounted() {
+    axios
+      .get(process.env.VUE_APP_API_URL + 'fetchProgrammeList')
+      .then(response => {
+        this.programmeList = response.data
+      })
+  }
+}
+</script>

web/src/main.js

@@ -5,6 +5,7 @@ import { sync } from 'vuex-router-sync'
 
 import App from './App.vue'
 import Search from './Search.vue'
+import Programmes from './Programmes.vue'
 import About from './About.vue'
 
 import DateRangePicker from '@gravitano/vue-date-range-picker'
@@ -31,6 +32,11 @@ global.router = new VueRouter({
       component: Search,
       name: 'search'
     },
+    {
+      path: '/programmes',
+      component: Programmes,
+      name: 'programmes'
+    },
     {
       path: '/about',
       component: About,