G3 hotfix

vue/xscratch-app/src/App.vue

@@ -34,9 +34,9 @@
       </router-link>
     </div>
     <div id="content">
-      <router-view @reloadPlaylists="loadPlaylists" class="pt-3" />
+      <router-view @reloadPlaylists="loadPlaylists" :reloadFlag="reloadFlag" class="pt-3" />
     </div>
-    <UploadVideo />
+    <UploadVideo @reloadVideos="reloadVideos" />
   </div>
 </template>
 
@@ -56,13 +56,17 @@ export default {
       playlists: [],
       loadingPlaylists: false,
       addingPlaylist: false,
-      addPlaylistValue: ''
+      addPlaylistValue: '',
+      reloadFlag: 0
     }
   },
   mounted: function () {
     this.loadPlaylists()
   },
   methods: {
+    reloadVideos () {
+      this.reloadFlag += 1
+    },
     async loadPlaylists () {
       this.loadingPlaylists = true
       this.playlists = await api.getPlaylists()

vue/xscratch-app/src/api.js

@@ -86,17 +86,25 @@ export default {
     const response = await this.execute('get', '/tlp')
     return JSON.parse(response.data.body).listOfTLP
   },
-  
+
   async deleteTLP (id) {
     const response = await this.execute('post', '/tlp/delete', id)
     return JSON.parse(response.data.body)
   },
-  
+
   async appendVideo (playlistID, videoID) {
     const body = {
       'id': videoID
     }
     const response = await this.execute('post', '/playlists/' + playlistID + '/video', body)
     return JSON.parse(response.data.body)
+  },
+
+  async removeVideo (playlistID, videoID) {
+    const body = {
+      'id': videoID
+    }
+    const response = await this.execute('post', '/playlists/' + playlistID + '/video/delete', body)
+    return JSON.parse(response.data.body)
   }
 }

vue/xscratch-app/src/components/UploadVideo.vue

@@ -11,32 +11,40 @@
     title="Upload Video"
     @hidden="reset"
   >
-    <form>
-      <b-form-group label="Video Title:" label-cols-sm="3" label-for="input">
-        <b-form-input v-model="upload.title" :state="titleState" placeholder="Enter video title" />
-        <b-form-invalid-feedback :state="titleState">You must give this video a title</b-form-invalid-feedback>
+    <div v-if="submitting">
+      <h2>Submitting</h2>
+    </div>
+    <div v-else>
+      <form>
+        <b-form-group label="Video Title:" label-cols-sm="3" label-for="input">
+          <b-form-input v-model="upload.title" :state="titleState" placeholder="Enter video title" />
+          <b-form-invalid-feedback :state="titleState">You must give this video a title</b-form-invalid-feedback>
+        </b-form-group>
+        <b-form-group label="Video Dialogue:" label-cols-sm="3" label-for="input">
+          <b-form-input
+            v-model="upload.dialogue"
+            :state="dialogueState"
+            placeholder="Enter video dialogue"
+          />
+          <b-form-invalid-feedback :state="dialogueState">
+            Every video has to have dialogue.... even if it's just
+            <code>SCREAMING</code>
+          </b-form-invalid-feedback>
+        </b-form-group>
+        <b-form-group label="Video Characters:" label-cols-sm="3" label-for="input">
+          <b-form-input
+            v-model="upload.characters"
+            :state="characterState"
+            placeholder="Enter video characters"
+          />
+          <b-form-invalid-feedback :state="titleState">You must give this video characters</b-form-invalid-feedback>
+        </b-form-group>
+      </form>
+      <b-form-group label="Video File" label-cols-sm="3" label-for="input">
+        <label for="file">Choose file to upload</label>
+        <input type="file" @change="processFile($event)" name="avatar" accept=".ogg" />
       </b-form-group>
-      <b-form-group label="Video Dialogue:" label-cols-sm="3" label-for="input">
-        <b-form-input
-          v-model="upload.dialogue"
-          :state="dialogueState"
-          placeholder="Enter video dialogue"
-        />
-        <b-form-invalid-feedback :state="dialogueState">
-          Every video has to have dialogue.... even if it's just
-          <code>SCREAMING</code>
-        </b-form-invalid-feedback>
-      </b-form-group>
-      <b-form-group label="Video Characters:" label-cols-sm="3" label-for="input">
-        <b-form-input v-model="upload.characters" :state="characterState" placeholder="Enter video characters" />
-        <b-form-invalid-feedback :state="titleState">You must give this video characters</b-form-invalid-feedback>
-      </b-form-group>
-    </form>
-    <b-form-group label ="Video File" label-cols-sm="3" label-for="input">
-      <label for = "file">Choose file to upload</label>
-      <input type="file" @change="processFile($event)"
-        name="avatar" accept=".ogg">
-         </b-form-group>
+    </div>
     <template #modal-footer>
       <div>
         <b-btn type="reset" @click="reset" variant="outline-danger">Reset</b-btn>
@@ -58,7 +66,8 @@ export default {
         characters: '',
         encodedVideo: ''
       },
-      failedValidation: false
+      failedValidation: false,
+      submitting: false
     }
   },
   computed: {
@@ -93,23 +102,25 @@ export default {
       }
       reader.readAsDataURL(data)
     },
-    submit (event) {
+    async submit (event) {
       this.upload.encodedVideo = globalEncodedVideo
       if (this.upload.title === '' || this.upload.dialogue === '' || this.upload.characters === '' || this.upload.encodedVideo === '') {
         this.failedValidation = true
         return
       }
+      this.submitting = true
       var videoBody = {
         name: this.upload.title,
         dialogue: this.upload.dialogue,
         characters: this.upload.characters.split(','),
         video: this.upload.encodedVideo
       }
       console.log(videoBody)
-      console.log(api.createVideo(videoBody))
-      api.getVideos()
-      this.$bvModal.hide('Upload')
-      // event.target.hide()
+      await api.createVideo(videoBody)
+      await api.getVideos()
+      this.submitting = false
+      this.$emit('reloadVideos')
+      this.$bvModal.hide('upload')
     },
     reset () {
       this.upload = {

vue/xscratch-app/src/pages/AdminPage.vue

@@ -15,13 +15,19 @@
         </div>
       </b-col>
     </b-row>
-    <b-table dark :items="tlps" :fields="tlpFields" class="mt-2 w-50">
+    <b-table dark :busy="loadingTLP" :items="tlps" :fields="tlpFields" class="mt-2 w-50">
       <template v-slot:cell(url)="row">
         <b-button size="sm" class="mr-2" variant="outline-danger" @click="deleteTLP(row.item.id)">
           <font-awesome-icon icon="trash" size="sm" />
         </b-button>
         {{row.item.url}}
       </template>
+      <template v-slot:table-busy>
+        <div class="text-center text-danger my-2">
+          <b-spinner class="align-middle"></b-spinner>
+          <strong>Loading...</strong>
+        </div>
+      </template>
     </b-table>
 
     <hr class="bg-success" />
@@ -96,6 +102,14 @@ export default {
   components: {
     Loading
   },
+  props: {
+    reloadFlag: Number
+  },
+  watch: {
+    reloadFlag: function (val) {
+      this.loadVideos()
+    }
+  },
   data: function () {
     return {
       videos: [],
@@ -106,7 +120,8 @@ export default {
       ],
       activeTLP: '',
       activeSearch: '',
-      loading: false
+      loading: false,
+      loadingTLP: false
     }
   },
   mounted: function () {
@@ -116,17 +131,19 @@ export default {
   methods: {
     async registerTLPProcess () {
       if (this.activeTLP !== '') {
+        this.loadingTLP = true
         await api.registerTLP(this.activeTLP)
           .catch(error => {
             this.errors = []
             console.log(error)
           })
         this.loadTLPs()
-        this.loading = false
+        this.loadingTLP = false
         this.activeTLP = ''
       }
     },
     async deleteVidProcess (idNum) {
+      this.loading = true
       this.videos = await api.deleteVideo(idNum)
         .catch(error => {
           this.errors = []
@@ -159,17 +176,21 @@ export default {
       this.activeSearch = ''
     },
     async loadTLPs () {
+      this.loadingTLP = true
       var allTLPs = await api.getTLPs()
       console.log(allTLPs)
       this.tlps = allTLPs
       console.log(this.tlps)
+      this.loadingTLP = false
     },
     async deleteTLP (idNum) {
+      this.loadingTLP = true
       var idBody = {
         id: idNum
       }
       await api.deleteTLP(idBody)
       this.loadTLPs()
+      this.loadingTLP = false
     }
   }
 }

vue/xscratch-app/src/pages/PlaylistPage.vue

@@ -31,7 +31,7 @@
           <b-row align-h="between">
             <b-col cols="auto" class="pt-1">{{video.name}}</b-col>
             <b-col cols="auto" class="mb-1 pr-3">
-              <b-button variant="outline-danger">
+              <b-button variant="outline-danger" @click="removeVideo(video.id)">
                 <font-awesome-icon icon="minus-circle" />
               </b-button>
             </b-col>
@@ -43,6 +43,7 @@
       </b-card>
       <!-- Add Video Card -->
       <b-card
+        v-if="!loading"
         class="vidContainer addVideoCard m-2"
         bg-variant="dark"
         footer="Append a video to this playlist"
@@ -92,6 +93,7 @@ export default {
   },
   methods: {
     async deletePlaylistProcess (idNum) {
+      this.loading = true
       var idBody = {
         id: idNum
       }
@@ -113,8 +115,10 @@ export default {
       })
       this.loading = false
     },
-    async addVideo () {
-      console.log('adding')
+    async removeVideo (videoID) {
+      this.loading = true
+      await api.removeVideo(this.playlist.id, videoID)
+      this.loadPlaylist()
     }
   }
 }

vue/xscratch-app/src/pages/VideosPage.vue

@@ -60,6 +60,14 @@ export default {
   components: {
     Loading
   },
+  props: {
+    reloadFlag: Number
+  },
+  watch: {
+    reloadFlag: function (val) {
+      this.loadVideos()
+    }
+  },
   data: function () {
     return {
       loading: false,
@@ -73,6 +81,7 @@ export default {
   },
   methods: {
     async deleteVidProcess (idNum) {
+      this.loading = true
       this.videos = await api.deleteVideo(idNum)
         .catch(error => {
           this.errors = []