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,
+    },
   ],
 });