Added API for managing job of updating videos

YTManager/wwwroot/admin.html

@@ -12,6 +12,8 @@
     <div class="pageheader">
         <h1>Dumb YT Manager</h1>
         <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 id="apistatus-0"></div>
     </div>
 
     <hr />

YTManager/wwwroot/admin.js

@@ -67,8 +67,6 @@ var addchanel0 = new Vue({
                     this.entry.thumbnailURL = "";
                     this.expanded = false;
                     tbody0.retrieve();
-
-                    axios.post('/api/admin/refreshytvids');
                     setTimeout(() => videostb.retrieve(), 1000);
                 }.bind(this))
                 .catch(function (error) {
@@ -129,6 +127,7 @@ var tbody0 = new Vue({
                 <th>Title</th>
                 <th>Description</th>
                 <th>ID</th>
+                <th>Update</th>
             </tr>
         </thead>
         <tbody>
@@ -137,6 +136,7 @@ var tbody0 = new Vue({
                 <td class="tinytext12px">{{entry.title}}</td>
                 <td class="tinytext12px">{{entry.description}}</td>
                 <td class="tinytext12px">{{entry.channelId}}</td>
+                <td><i class="fa fa-refresh" aria-hidden="true" :id="entry.ytChannelID" @click="forcerefresh"/></td>
             </tr>
         </tbody>
     </table>
@@ -159,6 +159,49 @@ var tbody0 = new Vue({
                 .catch(function (error) {
                     console.log(error);
                 });
+        },
+        forcerefresh: function (event) {
+            console.log("Refreshing for ID: " + event.target.id);
+            axios
+                .post('/api/Admin/job_update/' + event.target.id)
+                .catch(function (error) { console.log(error); });
+        }
+    }
+});
+
+// Bind to our table of entries.
+var apistatus = new Vue({
+    el: '#apistatus-0',
+    data: {
+        apiaccessible: false,
+        updatingjobactive: false
+    },
+    template: `
+    <div class="grid-x">
+        <div class="medium-1 cell">API Status</div>
+        <div class="medium-1 cell">
+            <i class="fa fa-thumbs-o-up apistatusicon fa-2x" aria-hidden="true" v-if="apiaccessible"></i>
+            <i class="fa fa-thumbs-o-down apistatusicon fa-2x" aria-hidden="true" v-else></i>
+        </div>
+        <div class="medium-7 cell"></div>
+        <div class="medium-2 cell">Video Fetching Status</div>
+        <div class="medium-1 cell">
+            <i class="fa fa-thumbs-o-up apistatusicon fa-2x" aria-hidden="true" v-if="updatingjobactive"></i>
+            <i class="fa fa-thumbs-o-down apistatusicon fa-2x" aria-hidden="true" v-else></i>
+        </div>
+    </div>
+    `,
+    methods: {
+        update: function (event) {
+            axios.get('/api/Admin/job_periodicupdate')
+                .then(function (response) {
+                    this.apiaccessible = (response.status == 200);
+                    this.updatingjobactive = (response.data != "false")
+                }.bind(this)
+            )
+            .catch(function (error) {
+                console.log(error);
+            });
         }
     }
 });
@@ -215,6 +258,7 @@ var videostb = new Vue({
 });
 
 window.addEventListener('load', function () {
+    apistatus.update();
     tbody0.retrieve();
     videostb.retrieve();
 });

YTManager/wwwroot/index.css

@@ -47,3 +47,20 @@
 .fade-enter, .fade-leave-to {
     opacity: 0;
 }
+
+.apistatusicon {
+    animation-duration: 1s;
+    animation-name: spinny;
+    animation-iteration-count: infinite;
+    animation-direction: alternate;
+}
+
+@keyframes spinny {
+    from {
+        transform: rotate(-15deg);
+    }
+
+    to {
+        transform: rotate(15deg);
+    }
+}