Added ability to bulk add and remove channels

src/components/Channel_Add.vue

@@ -1,7 +1,19 @@
 <template>
     <div>
         <div class="grid-x">
-            <div class="medium-11 cell"></div>
+            <div class="medium-7 cell"></div>
+            <div class="medium-1 cell">
+                <button type="button" class="button input-group" v-on:click='importchannel'>
+                    <i class="fa fa-plus" aria-hidden="true"></i> Import
+                </button>
+            </div>
+            <div class="medium-1 cell"></div>
+            <div class="medium-1 cell">
+                <button type="button" class="button input-group" v-on:click='exportchannel'>
+                    <i class="fa fa-plus" aria-hidden="true"></i> Export
+                </button>
+            </div>
+            <div class="medium-1 cell"></div>
             <div class="medium-1 cell">
                 <button type="button" class="button input-group" v-on:click='Expanded = !Expanded'>
                     <i class="fa fa-plus" aria-hidden="true"></i> Add
@@ -50,8 +62,59 @@
 import Vue from "vue";
 import * as DumbYT from "../dumbyt";
 import Axios from "axios";
-import SA2 from "sweetalert2";
+import SA2,{ SweetAlertType } from "sweetalert2";
 import * as _ from "lodash";
+import Sweetalert2, {SweetAlertOptions} from "sweetalert2";
+
+// Small wrapper to convert to and from channels and import/export possible channels.
+class OutChannel {
+    ID : string;
+    Tags : Array<string>;
+    Title: string;
+
+    constructor(channel :DumbYT.Channel) {
+        this.ID = channel.ID;
+        this.Title = channel.Title;
+        this.Tags = channel.User_Tags;
+    }
+};
+
+async function Channel_Bulk_Add() : Promise<void> {
+    // Ask user for the JSON file containing our channels.
+    const {value: uploadedfile} = await SA2({
+        title: 'Select image',
+        input: 'file',
+        inputAttributes: {
+            'aria-label': 'Upload your profile picture'
+        }
+    });
+    
+    // Check that we got an input file.
+    if (uploadedfile != null) {
+        // Read our file.
+        var reader = new FileReader();
+
+        // Tell reader to run upload our channels when it got a file.
+        reader.onload = async (e) => {
+            // Send all requested channel updates to the server.
+            const channels = JSON.parse(reader.result) as OutChannel[];
+            const attempts = await Promise.all(channels.map(c => DumbYT.API.channel_modify(c.ID, DumbYT.API.Modification.Add)));
+
+            // Get all the insertions which failed.
+            const bad = attempts.filter((a: any): a is string => !!a).map(a => {return { 
+                title: "Channel Add Fail!",
+                text: "The channel has not been added due to the following: \n" + a,
+                type: "error"} as SweetAlertOptions
+            });
+            
+            // Make dialog boxes for them.
+            await SA2.queue(bad);
+        }
+
+        // Give our uploader the data which was sent.
+        reader.readAsText(uploadedfile)
+    }
+}
 
 // Vue class for keeping state of the videos.
 export default Vue.extend({
@@ -99,9 +162,32 @@ export default Vue.extend({
             this.Channel_Identification_Box = "";
         },
 
-        // Clear the contents of the add video field.
+        // Export the channels as a json file.
-        clear() : void {
+        exportchannel() : void {
+            function download(filename: string, text: string) : void {
+                var element = document.createElement('a');
+                element.setAttribute('href', 'data:application/json;charset=utf-8,' + encodeURIComponent(text));
+                element.setAttribute('download', filename);
 
+                element.style.display = 'none';
+                document.body.appendChild(element);
+
+                element.click();
+
+                document.body.removeChild(element);
+            }
+
+            // Get all the youtube channels.
+            DumbYT.API.search_channels("").then(channels => 
+                download("Channel_Export.json", 
+                    JSON.stringify(channels.map(c => new OutChannel(c)))
+                )
+            );
+        },
+
+        // Import a channel list
+        importchannel() : void {
+            Channel_Bulk_Add();
         },
 
         GetChannelFromYT(Channel: string) : void {

src/components/Channel_Table.vue

@@ -5,7 +5,7 @@
                 <th>ID</th>
                 <th>Title</th>
                 <th>Description</th>
-                <th>User Tags</th>
+                <th>Tags</th>
             </tr>
         </thead>
         <tbody>