add Home and Episode routes, full quote display and viewing, simple quote counter, fixed episode list breaking sections with soft-copy, column changes

client/src/App.vue

@@ -1,16 +1,25 @@
 <template>
     <div id="app">
-        <router-view/>
-        <b-container fluid=true class="py-5 px-5">
+        <b-container :fluid=true class="py-5 px-5">
             <b-row>
                 <b-col lg="3" xl="2" md="12">
                     <SeasonList></SeasonList>
                 </b-col>
+                <b-col>
+                    <router-view/>
+                </b-col>
+                <b-col md="0" lg="1" xl="2">
+
+                </b-col>
             </b-row>
         </b-container>
     </div>
 </template>
 
+<style>
+    body { background-color: #0a0a0a; }
+</style>
+
 <script>
 import SeasonList from './components/SeasonList.vue';
 

client/src/components/Episode.vue

@@ -0,0 +1,50 @@
+<template>
+    <div>
+        <b-card :title="`Season ${this.$route.params.season} Episode ${this.$route.params.episode}`" class="mb-4">
+            <span v-if="episode">
+                {{ episode.description }}
+            </span>
+        </b-card>
+        <b-card v-for="(scene) in episode.scenes" :key="scene.text" class="mb-1" body-class="pb-0">
+            <b-card-text>
+                <p v-for="quote in scene.quotes" :key="quote.text">
+                    <strong>{{ quote.speaker }}</strong>: {{ quote.text }}
+                </p>
+            </b-card-text>
+        </b-card>
+    </div>
+</template>
+
+<script>
+import axios from 'axios';
+
+export default {
+  name: 'Episode',
+  data() {
+    return {
+      episode: null,
+    };
+  },
+  methods: {
+    getEpisode() {
+      const path = `http://localhost:5000/api/episode/${this.$route.params.season}/${this.$route.params.episode}/`;
+      axios.get(path)
+        .then((res) => {
+          this.episode = res.data;
+        })
+        .catch((error) => {
+          // eslint-disable-next-line no-console
+          console.error(error);
+        });
+    },
+  },
+  created() {
+    this.getEpisode();
+  },
+  watch: {
+    $route() {
+      this.getEpisode();
+    },
+  },
+};
+</script>

client/src/components/Home.vue

@@ -0,0 +1,48 @@
+<template>
+    <b-card title="The Office Quotes">
+        <b-card-text>
+            A Vue.js application serving you {{ stats.totals.quote }} quotes from your favorite show - The Office.
+            <br>
+            Click on a Season and Episode on the left-hand sidebar to view quotes.
+            Search for quotes with the instant searchbox.
+        </b-card-text>
+    </b-card>
+</template>
+
+<style>
+    .card {
+        color: #888888;
+        background-color: #161616;
+        border-bottom: 1px solid rgba(0, 0, 0, 0.88);
+        border-radius: 0;
+    }
+</style>
+
+<script>
+import axios from 'axios';
+
+export default {
+  name: 'Home',
+  data() {
+    return {
+      stats: null,
+    };
+  },
+  methods: {
+    getStats() {
+      const path = 'http://localhost:5000/api/stats/';
+      axios.get(path)
+        .then((res) => {
+          this.stats = res.data;
+        })
+        .catch((error) => {
+          // eslint-disable-next-line no-console
+          console.error(error);
+        });
+    },
+  },
+  created() {
+    this.getStats();
+  },
+};
+</script>

client/src/components/SeasonList.vue

@@ -13,9 +13,9 @@
                 <b-card-body class="h-100 px-0">
                     <b-list-group>
                         <b-list-group-item v-for="episode in season.episodes" :key="episode.episode_id">
-                            <a class="no-link" href="#">
+                            <router-link class="no-link" :to="`/${season.season_id}/${episode.episode_id}`">
                                 Ep. {{ episode.episode_id }} - "{{ episode.title }}"
-                            </a>
+                            </router-link>
                         </b-list-group-item>
                     </b-list-group>
                 </b-card-body>
@@ -25,8 +25,6 @@
 </template>
 
 <style lang="scss">
-    body { background-color: #0a0a0a; }
-
     .season-title { color: #888888; }
 
     .accordion.list-group-item {
@@ -45,14 +43,13 @@
     .accordion {
         .list-group-item {
             a { display: block; }
+
             .badge { float: right; min-width: 36px; }
         }
 
         .card-body { padding: 0; }
     }
 
-    a > .list-group-item { color: white; }
-
     .card-header {
         background-color: #161616;
         border-bottom: 1px solid rgba(0, 0, 0, 0.88);
@@ -60,14 +57,19 @@
 
     .card {
         background-color: inherit;
-        border: 1px solid rgba(0, 0, 0, .125);
-        border-bottom-color: rgba(0, 0, 0, 0.125);
-        border-radius: 0;
+        /*border: 3px solid #0a0a0a;*/
+        /*border-radius: 0;*/
+        padding-bottom: 0px;
+        /*&:not(:first-child) { border-top-width: 0; }*/
+        /*&:not(:last-child) { border-bottom-width: 0; }*/
     }
 
     .list-group-item {
+        border-color: rgba(24, 24, 24, 0.82);
         background-color: #111111;
         color: grey;
+        border-left-width: 0;
+        border-right-width: 0;
     }
 
     .no-link {

client/src/router.js

@@ -1,5 +1,7 @@
 import Vue from 'vue';
 import Router from 'vue-router';
+import Home from './components/Home.vue';
+import Episode from './components/Episode.vue';
 
 Vue.use(Router);
 
@@ -7,5 +9,15 @@ export default new Router({
   mode: 'history',
   base: process.env.BASE_URL,
   routes: [
+    {
+      path: '/',
+      name: 'Home',
+      component: Home,
+    },
+    {
+      path: '/:season/:episode',
+      name: 'Episode',
+      component: Episode,
+    },
   ],
 });

server/api.py

@@ -5,14 +5,35 @@ Provides a accessible protected backend API. JSON I/O only, CSRF protected.
 """
 import json
 import os
+from copy import deepcopy
 
 import flask_wtf
 from flask import current_app, jsonify
 
+from server.helpers import default
+
 BASE_DIR = os.path.dirname(os.path.abspath(__file__))
 with open(os.path.join(BASE_DIR, 'data', 'data.json'), 'r', encoding='utf-8') as file:
     data = json.load(file)
 
+stats = {
+    'totals': {
+        'quote': 0,
+        'scene': 0,
+        'episode': 0,
+        'season': 0
+    }
+}
+
+
+stats['totals']['season'] += len(default(data, []))
+for season in data:
+    stats['totals']['episode'] += len(default(season.get('episodes'), []))
+    for episode in season['episodes']:
+        stats['totals']['scene'] += len(default(episode.get('scenes'), []))
+        for scene in default(episode.get('scenes'), []):
+            stats['totals']['quote'] += len(default(scene.get('quotes'), []))
+
 
 @current_app.route('/api/csrf/')
 def api_csrf():
@@ -24,6 +45,17 @@ def api_csrf():
     return jsonify(flask_wtf.csrf.generate_csrf())
 
 
+@current_app.route('/api/episode/<int:season>/<int:episode>/')
+def api_episode(season: int, episode: int):
+    print(data[season - 1]['episodes'][episode - 1])
+    return jsonify(data[season - 1]['episodes'][episode - 1])
+
+
+@current_app.route('/api/stats/')
+def api_stats():
+    return jsonify(stats)
+
+
 @current_app.route('/api/episodes/')
 def api_episodes():
     """
@@ -31,7 +63,7 @@ def api_episodes():
     Used for the left side season bar.
     """
     seasons = []
-    copy = list(data)
+    copy = deepcopy(data)
     for season in copy:
         for episode in season.get('episodes'):
             if 'scenes' in episode.keys():

server/helpers.py

@@ -3,3 +3,7 @@ episode_counts = [6, 22, 23, 14, 26, 24, 24, 24, 23]
 
 def check_validity(season: int, episode: int):
     return (1 <= season <= 9) and (1 <= episode <= episode_counts[season])
+
+
+def default(value, other):
+    return value if value is not None else other