Put in a rough attempt at web api using typescript vue

YTManager/frontend/src/components/Hello.vue

@@ -1,45 +0,0 @@
-<template>
-    <div>
-        <div class="greeting">Hello {{name}}{{exclamationMarks}} :D</div>
-        <button @click="decrement">-</button>
-        <button @click="increment">+</button>
-    </div>
-</template>
-
-<script lang="ts">
-import Vue from "vue";
-import Axios from "axios";
-
-export default Vue.extend({
-    props: ['name', 'initialEnthusiasm'],
-    data() {
-        return {
-            enthusiasm: this.initialEnthusiasm,
-        }
-    },
-    methods: {
-        increment() { this.enthusiasm++; },
-        decrement() {
-            if (this.enthusiasm > 1) {
-                this.enthusiasm--;
-            }
-            Axios.get("https://jsonplaceholder.typicode.com/posts/1").then(resp => {
-                if (resp == null) {} else {
-                console.log(resp.data);
-            }}).catch(() => console.log("Uh ohhh"));
-            
-        },
-    },
-    computed: {
-        exclamationMarks(): string {
-            return Array(this.enthusiasm + 1).join('!');
-        }
-    }
-});
-</script>
-
-<style>
-.greeting {
-    font-size: 20px;
-}
-</style>

YTManager/frontend/src/components/Video_Grid.vue

@@ -0,0 +1,77 @@
+<template>
+    <div>
+        <div>{{Videos}}</div>
+    </div>
+</template>
+
+<script lang="ts">
+import Vue from "vue";
+import Axios from "axios";
+
+class Video {
+    public Title: string;
+    public Description: string;
+    public ID: string;
+    public Thumbnail: string;
+    public Channel: string;
+    public Seconds: number;
+    public Tags: Array<string>;
+    public URL: string;
+
+    constructor(v: any){
+        this.Title = v.title;
+        this.Description = v.description;
+        this.ID = v.id;
+        this.Thumbnail = v.thumbnail;
+        this.Channel = v.channel;
+        this.Seconds = v.seconds;
+        this.Tags = v.tags;
+        this.URL = "https://www.youtube.com/watch?v=" + v.id;
+    }
+}
+
+async function get_videos(): Promise<Array<Video>> {
+    // How many chars at most for the description.
+    const maxcharsdescriptionfield = 100;
+
+    // Temporary holder for videos.
+    let Videos : Array<Video> = [];
+
+    // Ask server for videos.
+    let resp = await Axios.get('http://localhost:62214/api/Videos').catch(e => console.log(e));
+    console.log("Got reply!");
+
+    // Handle all our nulls.
+    if (resp == null || resp.data == null)
+        console.log("server /api/videos return is null");
+    else {
+        // Parse our videos.
+        resp.data.forEach((v: any) => {
+            // Trim description if needed.
+            if (v.description.length > maxcharsdescriptionfield) {
+                v.description = v.description.substring(0, maxcharsdescriptionfield) + " ...";
+            }
+
+            // Add it to our array
+            Videos.push(new Video(v));
+        });
+    }
+    
+    // Send back the resulting videos.
+    return Promise.resolve(Videos);
+}
+
+export default Vue.extend({
+    data() {
+        return {
+            Videos: Array<Video>()
+        }
+    },
+    methods: {
+        
+    },
+
+    // Ugh, vue doesn't have async support for computed, wow ...
+    mounted() { get_videos().then(e => this.Videos = e ) }
+});
+</script>