# HG changeset patch
# User Thomas Junk <thomas.junk@intevation.de>
# Date 1549978156 -3600
# Node ID 3203c53a8d29ba65d3ad12b89040e614a511d524
# Parent  e57ba9585aaa2aa5253a1f0d2c02b38baece9a76
import_schedule: user is able to choose between file upload or URL as import type for bottleneckimport

diff -r e57ba9585aaa -r 3203c53a8d29 client/src/components/importschedule/Importscheduledetail.vue
--- a/client/src/components/importschedule/Importscheduledetail.vue	Tue Feb 12 13:04:48 2019 +0100
+++ b/client/src/components/importschedule/Importscheduledetail.vue	Tue Feb 12 14:29:16 2019 +0100
@@ -72,14 +72,33 @@
               </div>
             </div>
           </div>
-
+          <div v-if="directImportAvailable" class="flex-column">
+            <div class="flex-row text-left">
+              <small class="text-muted">
+                <translate>Import via</translate>
+              </small>
+            </div>
+            <div class="flex-flex-row text-left">
+              <toggle-button
+                v-model="directImport"
+                class="mt-2"
+                :speed="100"
+                :labels="{
+                  checked: this.$options.FILE,
+                  unchecked: this.$options.URL
+                }"
+                :width="60"
+                :height="30"
+              />
+            </div>
+          </div>
           <Availablefairwaydepth
             v-if="import_ == $options.IMPORTTYPES.FAIRWAYAVAILABILITY"
             @urlChanged="setUrl"
             :url="url"
           ></Availablefairwaydepth>
           <Bottleneck
-            v-if="import_ == $options.IMPORTTYPES.BOTTLENECK"
+            v-if="import_ == $options.IMPORTTYPES.BOTTLENECK && !directImport"
             @urlChanged="setUrl"
             :url="url"
           ></Bottleneck>
@@ -153,7 +172,7 @@
             :sortBy="sortBy"
           ></Waterwayaxis>
 
-          <div class="d-flex flex-row">
+          <div v-if="!directImport" class="d-flex flex-row">
             <div class="flex-column mt-3 mr-4">
               <div class="flex-row text-left">
                 <small class="text-muted">
@@ -196,7 +215,7 @@
               </div>
             </div>
           </div>
-          <div class="flex-column w-100 mr-2">
+          <div v-if="!directImport" class="flex-column w-100 mr-2">
             <div class="flex-row text-left">
               <small class="text-muted">
                 <translate>Schedule</translate>
@@ -354,7 +373,27 @@
               </div>
             </div>
           </div>
-          <button type="submit" class="shadow-sm btn btn-info submit-button">
+          <div v-if="directImport" class="d-flex flex-row text-left">
+            <div class="mt-3 mb-3 flex-column w-100">
+              <div class="custom-file">
+                <input
+                  accept=".csv"
+                  type="file"
+                  @change="fileSelected"
+                  class="custom-file-input"
+                  id="uploadFile"
+                />
+                <label class="pointer custom-file-label" for="uploadFile">
+                  {{ uploadLabel }}
+                </label>
+              </div>
+            </div>
+          </div>
+          <button
+            v-if="!directImport"
+            type="submit"
+            class="shadow-sm btn btn-info submit-button"
+          >
             <translate>Save</translate>
           </button>
           <button
@@ -423,7 +462,10 @@
   },
   data() {
     return {
+      directImport: false,
       passwordVisible: false,
+      uploadLabel: this.$gettext("choose file to upload"),
+      uploadFile: null,
       ...initializeCurrentSchedule()
     };
   },
@@ -470,6 +512,14 @@
       if (this.id) return this.$gettext("Import") + " " + this.id;
       return this.$gettext("New Import");
     },
+    directImportAvailable() {
+      switch (this.import_) {
+        case this.$options.IMPORTTYPES.BOTTLENECK:
+          return true;
+        default:
+          return false;
+      }
+    },
     isCredentialsRequired() {
       switch (this.import_) {
         case this.$options.IMPORTTYPES.WATERWAYGAUGES:
@@ -519,6 +569,12 @@
     }
   },
   methods: {
+    fileSelected(e) {
+      const files = e.target.files || e.dataTransfer.files;
+      if (!files) return;
+      this.uploadLabel = files[0].name;
+      this.uploadFile = files[0];
+    },
     setUrl(value) {
       this.url = value;
     },
@@ -609,6 +665,14 @@
     triggerManualImport() {
       if (!this.triggerActive) return;
       if (!this.import_) return;
+      if (this.directImport) {
+        if (!this.uploadFile) return;
+        displayInfo({
+          title: this.$gettext("Direct Import"),
+          message: this.$gettext("Not Implemented")
+        });
+        return;
+      }
       let data = {};
       if (this.isURLRequired) {
         if (!this.url) return;
@@ -785,6 +849,8 @@
   IMPORTTYPES: IMPORTTYPES,
   on: "on",
   off: "off",
+  FILE: app.$gettext("File"),
+  URL: app.$gettext("URL"),
   EVERY: app.$gettext("Every"),
   MINUTESPAST: app.$gettext("minutes past"),
   ON: app.$gettext("on"),