Initial commit moving front end out of main repo

src/index.ts

@@ -0,0 +1,67 @@
+import Vue from "vue";
+import VGC from "./components/Video_Grid.vue";
+import SCH from "./components/Search.vue";
+import VTBL from "./components/Video_Table.vue";
+import CTBL from "./components/Channel_Table.vue";
+import CADD from "./components/Channel_Add.vue";
+import './index.css';
+import { Video, search_videos, Channel, search_channels } from "./dumbyt";
+
+let MainApp = new Vue({
+    el: "#app",
+    template: `
+    <div>
+        <SCH v-on:search_complete="search_completed"/>
+        <VGC v-bind:Videos="Videos"/>
+    </div>
+    `,
+    components: {
+        SCH,
+        VGC
+    },
+    data() {
+        return {
+            Videos: Array<Video>()
+        }
+    },
+    methods: {
+        // Callback for when the search component got results back.
+        search_completed(videos : Array<Video>) : void {
+            this.Videos = videos;
+        }
+    }
+});
+
+let AdminApp = new Vue({
+    el: "#admin_app",
+    template: `
+    <div>
+        <SCH v-on:search_complete="search_completed"/>
+        <CADD/>
+        <CTBL v-bind:Channels="Channels"/>
+        <VTBL v-bind:Videos="Videos"/>
+    </div>
+    `,
+    components: {
+        SCH,
+        CADD,
+        CTBL,
+        VTBL
+    },
+    data() {
+        return {
+            Videos: Array<Video>(),
+            Channels: Array<Channel>()
+        }
+    },
+    methods: {
+        // Callback for when the search component got results back.
+        search_completed(videos : Array<Video>) : void {
+            this.Videos = videos;
+        }
+    },
+    mounted(){
+        // Populate the channels field immediatly on start up.
+        search_channels("").then(channels => this.Channels = channels);
+    }
+});