fully converted to proper bootstrap-vue, black theme styling, api routes for data retrieval,

client/src/App.vue

@@ -1,5 +1,23 @@
 <template>
-  <div id="app">
-    <router-view/>
-  </div>
+    <div id="app">
+        <router-view/>
+        <b-container fluid=true class="py-5 px-5">
+            <b-row>
+                <b-col lg="3" xl="2" md="12">
+                    <SeasonList></SeasonList>
+                </b-col>
+            </b-row>
+        </b-container>
+    </div>
 </template>
+
+<script>
+import SeasonList from './components/SeasonList.vue';
+
+export default {
+  name: 'App',
+  components: {
+    SeasonList,
+  },
+};
+</script>

client/src/components/Books.vue

@@ -1,36 +0,0 @@
-<template>
-  <div class="container">
-    <div class="row">
-      <div class="col-sm-10">
-        <h1>Books</h1>
-        <hr>
-        <br><br>
-        <button type="button" class="btn btn-success btn-sm">Add Book</button>
-        <br><br>
-        <table class="table table-hover">
-          <thead>
-            <tr>
-              <th scope="col">Title</th>
-              <th scope="col">Author</th>
-              <th scope="col">Read?</th>
-              <th></th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td>foo</td>
-              <td>bar</td>
-              <td>foobar</td>
-              <td>
-                <div class="btn-group" role="group">
-                  <button type="button" class="btn btn-warning btn-sm px-2">Update</button>
-                  <button type="button" class="btn btn-danger btn-sm px-1">Delete</button>
-                </div>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
-  </div>
-</template>

client/src/components/Ping.vue

@@ -1,28 +0,0 @@
-<script>
-import axios from 'axios';
-
-export default {
-  name: 'Ping',
-  data() {
-    return {
-      msg: '',
-    };
-  },
-  methods: {
-    getMessage() {
-      const path = 'http://localhost:5000/ping';
-      axios.get(path)
-        .then((res) => {
-          this.msg = res.data;
-        })
-        .catch((error) => {
-          // eslint-disable-next-line
-          console.error(error);
-        });
-    },
-  },
-  created() {
-    this.getMessage();
-  },
-};
-</script>

client/src/components/SeasonList.vue

@@ -0,0 +1,111 @@
+<template>
+    <div class="accordion" role="tablist">
+        <b-card v-for="season in seasons" :key="season.season_id">
+            <b-card-header header-tag="header" role="tab">
+                <a class="no-link" v-b-toggle="'accordion-' + season.season_id">
+                    <h5 class="mb-0 pu-0 mu-0 season-title">
+                        Season {{ season.season_id }}
+                        <i class="fas fa-chevron-down float-right"></i>
+                    </h5>
+                </a>
+            </b-card-header>
+            <b-collapse :id="'accordion-' + season.season_id" accordion="accordion-season-list">
+                <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="#">
+                                Ep. {{ episode.episode_id }} - "{{ episode.title }}"
+                            </a>
+                        </b-list-group-item>
+                    </b-list-group>
+                </b-card-body>
+            </b-collapse>
+        </b-card>
+    </div>
+</template>
+
+<style lang="scss">
+    body { background-color: #0a0a0a; }
+
+    .season-title { color: #888888; }
+
+    .accordion.list-group-item {
+        border-radius: 0;
+        border-width: 0 0 0 0;
+        border-bottom-width: 1px;
+        padding-left: 30px;
+        font-weight: 500;
+
+        &:first-child { border-top-width: 1px; }
+
+        &:last-child { border-bottom-width: 0; }
+
+    }
+
+    .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);
+    }
+
+    .card {
+        background-color: inherit;
+        border: 1px solid rgba(0, 0, 0, .125);
+        border-bottom-color: rgba(0, 0, 0, 0.125);
+        border-radius: 0;
+    }
+
+    .list-group-item {
+        background-color: #111111;
+        color: grey;
+    }
+
+    .no-link {
+        color: inherit;
+        text-decoration: none;
+
+        &:hover {
+            color: inherit;
+            text-decoration: none;
+        }
+    }
+</style>
+
+<script>
+import axios from 'axios';
+
+export default {
+  name: 'SeasonList',
+  data() {
+    return {
+      seasons: [],
+    };
+  },
+  methods: {
+    getSeasons() {
+      const path = 'http://localhost:5000/api/episodes/';
+      axios.get(path)
+        .then((res) => {
+          this.seasons = res.data;
+        })
+        .catch((error) => {
+          // eslint-disable-next-line no-console
+          console.error(error);
+        });
+    },
+  },
+  created() {
+    this.getSeasons();
+  },
+};
+</script>

client/src/main.js

@@ -1,11 +1,13 @@
 import 'bootstrap/dist/css/bootstrap.css';
 import Vue from 'vue';
+import BootstrapVue from 'bootstrap-vue';
 import App from './App.vue';
 import router from './router';
 
+Vue.use(BootstrapVue);
 Vue.config.productionTip = false;
 
 new Vue({
   router,
-  render: h => h(App),
+  render: (h) => h(App),
 }).$mount('#app');

client/src/router.js

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