Show thumbnails for programmes #20

web/src/Programme.vue

@@ -3,6 +3,7 @@
     <div class="container">
       <div v-if="content">
         <h4>{{ content[0].programme.title }}</h4>
+        <img :src="content[0].programme | imageURL"/>
         <p v-for="(item, key) in content" :key="key" :id="item.time_start">
           {{ item.time_start | formatTime }}: {{ item.content }}
         </p>

web/src/ProgrammeList.vue

@@ -5,7 +5,10 @@
         <li v-for="(programme, key) in programmeList" :key="key">
           <router-link
             :to="{ name: 'programme-details', params: { id: programme.id } }"
-            class="nav-link">{{ programme.title }}</router-link>
+            class="nav-link">
+              <img :src="programme | imageURL"/>
+              {{ programme.title }}
+          </router-link>
         </li>
       </ul>
     </div>

web/src/main.js

@@ -16,13 +16,20 @@ Vue.use(DateRangePicker)
 
 Vue.config.productionTip = false
 
-// Utility function used by different components
+// Utility functions used by different components
 Vue.filter('formatTime', time => {
   const min = Math.floor(time / 60)
   const sec = time % 60
   return `${min}'${sec < 10 ? '0' + sec : sec}''`
 })
 
+Vue.filter('imageURL', programme => {
+  // We don't have the URL in the database right now, so we generate it from its id,
+  // which is not totally robust, but works ok right now.
+  const filename = programme.title.toLowerCase().replace(/[ \/]/g, '-').replace(/-+/g, '-')
+  return `http://img2.rtve.es/v/${filename}_${programme.id}.png`
+})
+
 // Use a plugin to wrap all access to the API
 Vue.use(VerbaAPI)