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

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>