From 2ead7115e854936e04719d5ea477ee849b7b116a Mon Sep 17 00:00:00 2001
From: hak8or <hak8or@gmail.com>
Date: Wed, 28 Feb 2018 23:48:00 -0500
Subject: [PATCH] Put in a rough attempt at web api using typescript vue

---
 YTManager/frontend/index.html                 |  2 -
 YTManager/frontend/src/components/Hello.vue   | 45 -----------
 .../frontend/src/components/Video_Grid.vue    | 77 +++++++++++++++++++
 YTManager/frontend/src/index.ts               |  7 +-
 YTManager/frontend/tsconfig.json              |  5 +-
 5 files changed, 83 insertions(+), 53 deletions(-)
 delete mode 100644 YTManager/frontend/src/components/Hello.vue
 create mode 100644 YTManager/frontend/src/components/Video_Grid.vue
diff --git a/YTManager/frontend/index.html b/YTManager/frontend/index.html
index 50647a4..222a565 100644
--- a/YTManager/frontend/index.html
+++ b/YTManager/frontend/index.html
@@ -6,7 +6,6 @@
 
     <!-- Compressed CSS -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation.min.css" />
-    <link rel="stylesheet" type="text/css" href="./dist/index.css">
 </head>
 <body>
     <div class="pageheader">
@@ -14,7 +13,6 @@
         <p>Youtube banned my account and refuses to say why, taking all my subscribed channels with it. This is a simple scrubscribed channel manager, showing recent releases from each channel and finally proper sub-catagory functionality!</p>
     </div>
 
-            
     <div id="app"></div>
 
     <script src="./dist/build.js"></script>
diff --git a/YTManager/frontend/src/components/Hello.vue b/YTManager/frontend/src/components/Hello.vue
deleted file mode 100644
index 299ceef..0000000
--- a/YTManager/frontend/src/components/Hello.vue
+++ /dev/null
@@ -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>
\ No newline at end of file
diff --git a/YTManager/frontend/src/components/Video_Grid.vue b/YTManager/frontend/src/components/Video_Grid.vue
new file mode 100644
index 0000000..034dff7
--- /dev/null
+++ b/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>
diff --git a/YTManager/frontend/src/index.ts b/YTManager/frontend/src/index.ts
index 1071f4a..a69b04c 100644
--- a/YTManager/frontend/src/index.ts
+++ b/YTManager/frontend/src/index.ts
@@ -1,17 +1,16 @@
 import Vue from "vue";
-import HelloComponent from "./components/Hello.vue";
+import VGC from "./components/Video_Grid.vue";
 import './index.css';
 
 let v = new Vue({
     el: "#app",
     template: `
     <div>
-        Name: <input v-model="name" type="text">
-        <hello-component :name="name" :initialEnthusiasm="5" />
+        <VGC/>
     </div>
     `,
     data: { name: "something" },
     components: {
-        HelloComponent
+        VGC
     }
 });
diff --git a/YTManager/frontend/tsconfig.json b/YTManager/frontend/tsconfig.json
index b8f6335..a3ad19b 100644
--- a/YTManager/frontend/tsconfig.json
+++ b/YTManager/frontend/tsconfig.json
@@ -4,9 +4,10 @@
     "sourceMap": true,
     "strict": true,
     "noImplicitReturns": true,
-    "module": "es2015",
+    "module": "commonjs",
     "moduleResolution": "node",
-    "target": "es5"
+    "target": "es6",
+    "noImplicitAny": true
   },
   "include": [
     "./src/**/*"
