Added tag searching

YTManager/frontend/package-lock.json

@@ -4,6 +4,12 @@
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
+    "@types/lodash": {
+      "version": "4.14.104",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.104.tgz",
+      "integrity": "sha512-ufQcVg4daO8xQ5kopxRHanqFdL4AI7ondQkV+2f+7mz3gvp0LkBx2zBRC6hfs3T87mzQFmf5Fck7Fi145Ul6NQ==",
+      "dev": true
+    },
     "accepts": {
       "version": "1.3.5",
       "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.5.tgz",

YTManager/frontend/package.json

@@ -7,6 +7,7 @@
   "author": "hak8or",
   "license": "MIT",
   "devDependencies": {
+    "@types/lodash": "^4.14.104",
     "axios": "^0.18.0",
     "css-loader": "^0.28.10",
     "style-loader": "^0.20.2",

YTManager/frontend/src/components/Video_Grid.vue

@@ -1,4 +1,6 @@
 <template>
+    <div>
+        <input id="searchbox0" class="searchbox" type="text" v-model="searchbox_str" placeholder="Search String goes here, for example: >5m,c++"/>
         <div class="grid-x large-up-6">
             <div v-for="video in Videos" :key="video.ID" class="cell">
                 <div class="card ytcard">
@@ -10,11 +12,13 @@
                 </div>
             </div>
         </div >
+    </div>
 </template>
 
 <script lang="ts">
 import Vue from "vue";
 import Axios from "axios";
+import * as _ from "lodash";
 
 // Wrapper for videos returned from our server.
 class Video {
@@ -55,6 +59,36 @@ class Video {
     }
 }
 
+async function search_videos(searchstr : string): 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/search/' + searchstr).catch(e => console.log(e));
+
+    // Handle all our nulls.
+    if (resp == null || resp.data == null)
+        console.log("server /api/videos/search 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);
+}
+
 async function get_videos(): Promise<Array<Video>> {
     // How many chars at most for the description.
     const maxcharsdescriptionfield = 100;
@@ -89,12 +123,28 @@ async function get_videos(): Promise<Array<Video>> {
 export default Vue.extend({
     data() {
         return {
+            searchbox_str: "",
             Videos: Array<Video>()
         }
     },
 
+    // Manually attaching functions to watchers of data.
+    watch: {
+        // Searchbox updater.
+        searchbox_str (s: string) {
+            if (s.trim().length > 0){
+                var v = _.debounce((s) => {
+                    search_videos(s).then(e => this.Videos = e);
+                })
+                v(s);
+            } else {
+                get_videos().then(e => this.Videos = e );
+            }
+        }
+    },
+
     // Ugh, vue doesn't have async support for computed, wow ...
-    mounted() { get_videos().then(e => this.Videos = e ) }
+    mounted() { get_videos().then(e => this.Videos = e ); }
 });
 </script>
 
@@ -119,4 +169,12 @@ export default Vue.extend({
         font-size: 10px;
         text-align: right;
     }
+
+    .searchbox {
+        font-size: 1.2em;
+        max-width: 70em;
+        margin-left: auto;
+        margin-right: auto;
+        margin-top: 2em;
+    }
 </style>