Add option to load configuration from local file.

Supports both JSON and YAML.

lib/www/client/source/src/views/ProjectSettings.vue

@@ -111,6 +111,7 @@
             </v-btn>
             <v-dialog
               max-width="400px"
+              v-model.sync="fileLoadDialog"
             >
               <template v-slot:activator="{ on, attrs }">
                 <v-btn
@@ -126,12 +127,14 @@
               <v-card flat>
                 <v-card-text class="pt-5">
                   <v-file-input
+                    v-model="files"
                     class="mt-4"
                     show-size
-                    accept="application/json"
+                    accept="application/json,application/yaml,.json,.yaml"
                     label="Select configuration file"
-                    append-outer-icon="mdi-cloud-upload"
-                    @click-append-outer="upload"
+                    append-outer-icon="mdi-folder-open-outline"
+                    :error-messages="fileInputErrors"
+                    @click:append-outer="loadFromFile"
                   ></v-file-input>
                 </v-card-text>
               </v-card>
@@ -255,6 +258,7 @@ export default {
       configuration: null,
       active: [],
       open: [],
+      files: [],
       treeview: [
       /*
         {
@@ -418,6 +422,7 @@ export default {
         }
       ],
 
+      fileLoadDialog: false,
 
       viewMode: 0,
       dialog: false,
@@ -491,6 +496,29 @@ export default {
       }
     },
 
+    fileInputErrors () {
+      const messages = [];
+
+      const validTypes = [
+        "application/json",
+        "application/yaml",
+        "application/x-yaml"
+      ];
+
+      if (this.files instanceof File) {
+        if (!validTypes.includes(this.files.type)) {
+          messages.push(`Invalid file type: ${this.files.type}`);
+          messages.push("Please select a JSON or YAML file");
+        } else if (this.files.size < 32) { // 32 is an arbitrary small value
+          messages.push("File too small to be a valid Dougal configuration");
+        }
+      } else if (this.files && this.files.length) {
+        messages.push("Invalid file path");
+      }
+
+      return messages;
+    },
+
     ...mapGetters(['user', 'writeaccess', 'loading', 'serverEvent'])
   },
 
@@ -551,6 +579,22 @@ export default {
 
     upload () {
       console.log("UPLOAD");
+
+    async loadFromFile () {
+      if (!this.fileInputErrors.length) {
+        if (this.files.type == "application/json") {
+          this.configuration = JSON.parse(await this.files.text());
+          this.showSnack(["Configuration loaded from file", "primary"]);
+        } else if (this.files.type == "application/yaml" || this.files.type == "application/x-yaml") {
+          this.configuration = YAML.parse(await this.files.text());
+          this.showSnack(["Configuration loaded from file", "primary"]);
+        } else {
+          console.error("Unknown file format (shouldn't happen)", this.files.type);
+        }
+        this.fileLoadDialog = false;
+      }
+    },
+
     async saveToFile () {
       const payload = YAML.stringify(this.configuration);
       const blob = new Blob([payload], {type: "application/yaml"});