changeset 1996:fda5c78fb7d3 importschedulerefac

moved components
author Thomas Junk <thomas.junk@intevation.de>
date Thu, 24 Jan 2019 13:43:36 +0100
parents 29f02d0043a9
children 74c03fec0a91
files client/src/components/importschedule/Availablefairwaydepth.vue client/src/components/importschedule/Bottleneck.vue client/src/components/importschedule/Distancemarksvirtual.vue client/src/components/importschedule/Fairwaydimensions.vue client/src/components/importschedule/Gaugemeasurement.vue client/src/components/importschedule/Importscheduledetail.vue client/src/components/importschedule/Waterwayarea.vue client/src/components/importschedule/Waterwayaxis.vue client/src/components/importschedule/Waterwaygauges.vue client/src/components/importschedule/importtypes/Availablefairwaydepth.vue client/src/components/importschedule/importtypes/Bottleneck.vue client/src/components/importschedule/importtypes/Distancemarksvirtual.vue client/src/components/importschedule/importtypes/Fairwaydimensions.vue client/src/components/importschedule/importtypes/Gaugemeasurement.vue client/src/components/importschedule/importtypes/Waterwayarea.vue client/src/components/importschedule/importtypes/Waterwayaxis.vue client/src/components/importschedule/importtypes/Waterwaygauges.vue client/src/store/imports.js
diffstat 18 files changed, 837 insertions(+), 699 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/components/importschedule/Availablefairwaydepth.vue	Wed Jan 23 16:50:33 2019 +0100
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,52 +0,0 @@
-<template>
-  <div>
-    <div class="d-flex flex-row">
-      <div class="flex-column mt-3 mr-3 w-100">
-        <div class="flex-row text-left">
-          <small class="text-muted"> <translate>URL</translate> </small>
-        </div>
-        <div class="w-100">
-          <input v-model="url" class="form-control" type="url" />
-        </div>
-      </div>
-      <div v-if="false" class="flex-column mt-3 text-left">
-        <div class="d-flex flex-row">
-          <small class="text-muted mr-2"
-            ><translate>Insecure</translate>
-          </small>
-        </div>
-        <div class="d-flex flex-row">
-          <toggle-button
-            v-model="insecure"
-            class="mt-2"
-            :speed="100"
-            :color="{
-              checked: '#FF0000',
-              unchecked: '#E9ECEF',
-              disabled: '#CCCCCC'
-            }"
-            :labels="{
-              checked: this.$options.on,
-              unchecked: this.$options.off
-            }"
-            :width="60"
-            :height="30"
-          />
-        </div>
-      </div>
-    </div>
-    <div v-if="!url" class="d-flex flex-row">
-      <small
-        ><translate class="text-danger">Please enter a URL</translate></small
-      >
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "availablefairwaydepth"
-};
-</script>
-
-<style></style>
--- a/client/src/components/importschedule/Bottleneck.vue	Wed Jan 23 16:50:33 2019 +0100
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,52 +0,0 @@
-<template>
-  <div>
-    <div class="d-flex flex-row">
-      <div class="flex-column mt-3 mr-3 w-100">
-        <div class="flex-row text-left">
-          <small class="text-muted"> <translate>URL</translate> </small>
-        </div>
-        <div class="w-100">
-          <input v-model="url" class="form-control" type="url" />
-        </div>
-      </div>
-      <div v-if="false" class="flex-column mt-3 text-left">
-        <div class="d-flex flex-row">
-          <small class="text-muted mr-2"
-            ><translate>Insecure</translate>
-          </small>
-        </div>
-        <div class="d-flex flex-row">
-          <toggle-button
-            v-model="insecure"
-            class="mt-2"
-            :speed="100"
-            :color="{
-              checked: '#FF0000',
-              unchecked: '#E9ECEF',
-              disabled: '#CCCCCC'
-            }"
-            :labels="{
-              checked: this.$options.on,
-              unchecked: this.$options.off
-            }"
-            :width="60"
-            :height="30"
-          />
-        </div>
-      </div>
-    </div>
-    <div v-if="!url" class="d-flex flex-row">
-      <small
-        ><translate class="text-danger">Please enter a URL</translate></small
-      >
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "bottleneckimport"
-};
-</script>
-
-<style></style>
--- a/client/src/components/importschedule/Distancemarksvirtual.vue	Wed Jan 23 16:50:33 2019 +0100
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,92 +0,0 @@
-<template>
-  <div>
-    <div class="d-flex flex-row">
-      <div class="flex-column mt-3 mr-3 w-100">
-        <div class="flex-row text-left">
-          <small class="text-muted"> <translate>URL</translate> </small>
-        </div>
-        <div class="w-100">
-          <input v-model="url" class="form-control" type="url" />
-        </div>
-      </div>
-      <div v-if="false" class="flex-column mt-3 text-left">
-        <div class="d-flex flex-row">
-          <small class="text-muted mr-2"
-            ><translate>Insecure</translate>
-          </small>
-        </div>
-        <div class="d-flex flex-row">
-          <toggle-button
-            v-model="insecure"
-            class="mt-2"
-            :speed="100"
-            :color="{
-              checked: '#FF0000',
-              unchecked: '#E9ECEF',
-              disabled: '#CCCCCC'
-            }"
-            :labels="{
-              checked: this.$options.on,
-              unchecked: this.$options.off
-            }"
-            :width="60"
-            :height="30"
-          />
-        </div>
-      </div>
-    </div>
-    <div v-if="!url" class="d-flex flex-row">
-      <small
-        ><translate class="text-danger">Please enter a URL</translate></small
-      >
-    </div>
-    <div class="d-flex flex-row">
-      <div class="flex-column mt-3 mr-3 w-50">
-        <div class="flex-row text-left">
-          <small class="text-muted"> <translate>Username</translate> </small>
-        </div>
-        <div class="w-100">
-          <input v-model="username" class="form-control" type="text" />
-        </div>
-        <div v-if="!username" class="d-flex flex-row">
-          <small
-            ><translate class="text-danger"
-              >Please enter a Username</translate
-            ></small
-          >
-        </div>
-      </div>
-      <div class="flex-column mt-3 w-50">
-        <div class="flex-row text-left">
-          <small class="text-muted"> <translate>Password</translate> </small>
-        </div>
-        <div class="w-100 d-flex flex-row">
-          <input v-model="password" class="form-control" :type="showPassword" />
-          <span
-            class="input-group-text ml-2"
-            @click="passwordVisible = !passwordVisible"
-          >
-            <font-awesome-icon
-              :icon="passwordVisible ? 'eye-slash' : 'eye'"
-            ></font-awesome-icon>
-          </span>
-        </div>
-        <div v-if="!password" class="d-flex flex-row">
-          <small
-            ><translate class="text-danger"
-              >Please enter a Password</translate
-            ></small
-          >
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "distancemarksvirtual"
-};
-</script>
-
-<style></style>
--- a/client/src/components/importschedule/Fairwaydimensions.vue	Wed Jan 23 16:50:33 2019 +0100
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,178 +0,0 @@
-<template>
-  <div>
-    <div class="d-flex flex-row">
-      <div class="flex-column mt-3 mr-3 w-100">
-        <div class="flex-row text-left">
-          <small class="text-muted"> <translate>URL</translate> </small>
-        </div>
-        <div class="w-100">
-          <input v-model="url" class="form-control" type="url" />
-        </div>
-      </div>
-      <div v-if="false" class="flex-column mt-3 text-left">
-        <div class="d-flex flex-row">
-          <small class="text-muted mr-2"
-            ><translate>Insecure</translate>
-          </small>
-        </div>
-        <div class="d-flex flex-row">
-          <toggle-button
-            v-model="insecure"
-            class="mt-2"
-            :speed="100"
-            :color="{
-              checked: '#FF0000',
-              unchecked: '#E9ECEF',
-              disabled: '#CCCCCC'
-            }"
-            :labels="{
-              checked: this.$options.on,
-              unchecked: this.$options.off
-            }"
-            :width="60"
-            :height="30"
-          />
-        </div>
-      </div>
-    </div>
-    <div v-if="!url" class="d-flex flex-row">
-      <small
-        ><translate class="text-danger">Please enter a URL</translate></small
-      >
-    </div>
-    <div class="d-flex flex-row">
-      <div class="flex-column mt-3 mr-3 w-50">
-        <div class="flex-row text-left">
-          <small class="text-muted"> <translate>Featuretype</translate> </small>
-        </div>
-        <div class="w-100">
-          <input v-model="featureType" class="form-control" type="text" />
-        </div>
-        <div v-if="!featureType" class="d-flex flex-row">
-          <small
-            ><translate class="text-danger"
-              >Please enter a Featuretype</translate
-            ></small
-          >
-        </div>
-      </div>
-      <div class="flex-column mt-3 w-50">
-        <div class="flex-row text-left">
-          <small class="text-muted"> <translate>SortBy</translate> </small>
-        </div>
-        <div class="w-100">
-          <input v-model="sortBy" class="form-control" type="text" />
-        </div>
-        <div v-if="!sortBy" class="d-flex flex-row">
-          <small
-            ><translate class="text-danger"
-              >Please enter SortBy</translate
-            ></small
-          >
-        </div>
-      </div>
-    </div>
-    <div class="d-flex flex-row">
-      <div class="flex-column mt-3 mr-3 w-50">
-        <div class="flex-row text-left">
-          <small class="text-muted"> <translate>LOS</translate> </small>
-        </div>
-        <div class="w-100">
-          <select v-model="LOS" class="form-control">
-            <option value="1">1</option>
-            <option value="2">2</option>
-            <option value="3">3</option>
-          </select>
-        </div>
-        <div v-if="!LOS" class="d-flex flex-row">
-          <small
-            ><translate class="text-danger"
-              >Please enter a level of service</translate
-            ></small
-          >
-        </div>
-      </div>
-      <div class="flex-column mt-3 w-50">
-        <div class="flex-row text-left">
-          <small class="text-muted"> <translate>Depth</translate> </small>
-        </div>
-        <div class="d-flex flex-row">
-          <input v-model="depth" class="form-control" type="number" />
-          <div class="ml-2 my-auto">cm</div>
-        </div>
-        <div v-if="!depth" class="d-flex flex-row">
-          <small
-            ><translate class="text-danger"
-              >Please enter a depth</translate
-            ></small
-          >
-        </div>
-      </div>
-    </div>
-    <div class="d-flex flex-row">
-      <div class="flex-column mt-3 mr-3 w-50">
-        <div class="flex-row text-left">
-          <small class="text-muted"> <translate>MinWidth</translate> </small>
-        </div>
-        <div class="d-flex flex-row">
-          <input v-model="minWidth" class="form-control" type="number" />
-          <div class="ml-2 my-auto">&nbsp;m</div>
-        </div>
-        <div v-if="!minWidth" class="d-flex flex-row">
-          <small
-            ><translate class="text-danger"
-              >Please enter a minimum width</translate
-            ></small
-          >
-        </div>
-      </div>
-      <div class="flex-column mt-3 w-50">
-        <div class="flex-row text-left">
-          <small class="text-muted"> <translate>MaxWidth</translate> </small>
-        </div>
-        <div class="d-flex flex-row">
-          <input v-model="maxWidth" class="form-control" type="number" />
-          <div class="ml-2 my-auto">&nbsp;m</div>
-        </div>
-        <div v-if="!maxWidth" class="d-flex flex-row">
-          <small
-            ><translate class="text-danger"
-              >Please enter a maximum width</translate
-            ></small
-          >
-        </div>
-      </div>
-    </div>
-    <div class="d-flex flex-row">
-      <div class="flex-column mt-3 mr-3 w-50">
-        <div class="flex-row text-left">
-          <small class="text-muted">
-            <translate>Source orgranization</translate>
-          </small>
-        </div>
-        <div class="w-100">
-          <input
-            v-model="sourceOrganization"
-            class="form-control"
-            type="text"
-          />
-        </div>
-        <div v-if="!sourceOrganization" class="d-flex flex-row">
-          <small
-            ><translate class="text-danger"
-              >Please enter a source orgranization</translate
-            ></small
-          >
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "fairwaydimensions"
-};
-</script>
-
-<style></style>
--- a/client/src/components/importschedule/Gaugemeasurement.vue	Wed Jan 23 16:50:33 2019 +0100
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,52 +0,0 @@
-<template>
-  <div>
-    <div class="d-flex flex-row">
-      <div class="flex-column mt-3 mr-3 w-100">
-        <div class="flex-row text-left">
-          <small class="text-muted"> <translate>URL</translate> </small>
-        </div>
-        <div class="w-100">
-          <input v-model="url" class="form-control" type="url" />
-        </div>
-      </div>
-      <div v-if="false" class="flex-column mt-3 text-left">
-        <div class="d-flex flex-row">
-          <small class="text-muted mr-2"
-            ><translate>Insecure</translate>
-          </small>
-        </div>
-        <div class="d-flex flex-row">
-          <toggle-button
-            v-model="insecure"
-            class="mt-2"
-            :speed="100"
-            :color="{
-              checked: '#FF0000',
-              unchecked: '#E9ECEF',
-              disabled: '#CCCCCC'
-            }"
-            :labels="{
-              checked: this.$options.on,
-              unchecked: this.$options.off
-            }"
-            :width="60"
-            :height="30"
-          />
-        </div>
-      </div>
-    </div>
-    <div v-if="!url" class="d-flex flex-row">
-      <small
-        ><translate class="text-danger">Please enter a URL</translate></small
-      >
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "gaugemeasurement"
-};
-</script>
-
-<style></style>
--- a/client/src/components/importschedule/Importscheduledetail.vue	Wed Jan 23 16:50:33 2019 +0100
+++ b/client/src/components/importschedule/Importscheduledetail.vue	Thu Jan 24 13:43:36 2019 +0100
@@ -72,27 +72,73 @@
 
           <Availablefairwaydepth
             v-if="import_ == $options.IMPORTTYPES.FAIRWAYAVAILABILITY"
+            @urlChanged="setUrl"
+            :url="url"
           ></Availablefairwaydepth>
           <Bottleneck
             v-if="import_ == $options.IMPORTTYPES.BOTTLENECK"
+            @urlChanged="setUrl"
+            :url="url"
           ></Bottleneck>
           <Distancemarksvirtual
             v-if="import_ == $options.IMPORTTYPES.DISTANCEMARKSVIRTUAL"
+            @urlChanged="setUrl"
+            @usernameChanged="setUsername"
+            @passwordChanged="setPassword"
+            :url="url"
+            :username="username"
+            :password="password"
           ></Distancemarksvirtual>
           <Faiwaydimensions
             v-if="import_ == $options.IMPORTTYPES.FAIRWAYDIMENSION"
+            @urlChanged="setUrl"
+            @featureTypeChanged="setFeatureType"
+            @sortByChanged="setSortBy"
+            @LOSChanged="setLOS"
+            @depthChanged="setDepth"
+            @minWidthChanged="setMinWidth"
+            @maxWidthChanged="setMaxWidth"
+            @sourceOrganizationChanged="setSourceOrganization"
+            :url="url"
+            :featureType="featureType"
+            :sortBy="sortBy"
+            :LOS="LOS"
+            :minWidth="minWidth"
+            :maxWidth="maxWidth"
+            :sourceOrganization="sourceOrganization"
+            :depth="depth"
           ></Faiwaydimensions>
           <Gaugemeasurement
             v-if="import_ == $options.IMPORTTYPES.GAUGEMEASUREMENT"
+            @urlChanged="setUrl"
+            :url="url"
           ></Gaugemeasurement>
           <Waterwayarea
             v-if="import_ == $options.IMPORTTYPES.WATERWAYAREA"
+            @urlChanged="setUrl"
+            @featureTypeChanged="setFeatureType"
+            @sortByChanged="setSortBy"
+            :url="url"
+            :featureType="featureType"
+            :sortBy="sortBy"
           ></Waterwayarea>
           <Waterwaygauges
             v-if="import_ == $options.IMPORTTYPES.WATERWAYGAUGES"
+            @urlChanged="setUrl"
+            @usernameChanged="setUsername"
+            @passwordChanged="setPassword"
+            :url="url"
+            :username="username"
+            :password="password"
           ></Waterwaygauges>
           <Waterwayaxis
             v-if="import_ == $options.IMPORTTYPES.WATERWAYAXIS"
+            @urlChanged="setUrl"
+            @featureTypeChanged="setFeatureType"
+            @sortByChanged="setSortBy"
+            :url="url"
+            :featureType="featureType"
+            :sortBy="sortBy"
           ></Waterwayaxis>
 
           <div class="d-flex flex-row">
@@ -344,14 +390,22 @@
 export default {
   name: "importscheduledetail",
   components: {
-    Availablefairwaydepth: () => import("./Availablefairwaydepth"),
-    Bottleneck: () => import("./Bottleneck"),
-    Distancemarksvirtual: () => import("./Distancemarksvirtual"),
-    Faiwaydimensions: () => import("./Fairwaydimensions"),
-    Gaugemeasurement: () => import("./Gaugemeasurement"),
-    Waterwayarea: () => import("./Waterwayarea"),
-    Waterwaygauges: () => import("./Waterwaygauges"),
-    Waterwayaxis: () => import("./Waterwayaxis")
+    Availablefairwaydepth: () =>
+      import("@/components/importschedule/importtypes/Availablefairwaydepth"),
+    Bottleneck: () =>
+      import("@/components/importschedule/importtypes/Bottleneck"),
+    Distancemarksvirtual: () =>
+      import("@/components/importschedule/importtypes/Distancemarksvirtual"),
+    Faiwaydimensions: () =>
+      import("@/components/importschedule/importtypes/Fairwaydimensions"),
+    Gaugemeasurement: () =>
+      import("@/components/importschedule/importtypes/Gaugemeasurement"),
+    Waterwayarea: () =>
+      import("@/components/importschedule/importtypes/Waterwayarea"),
+    Waterwaygauges: () =>
+      import("@/components/importschedule/importtypes/Waterwaygauges"),
+    Waterwayaxis: () =>
+      import("@/components/importschedule/importtypes/Waterwayaxis")
   },
   data() {
     return {
@@ -433,16 +487,42 @@
   },
   computed: {
     ...mapState("imports", ["importScheduleDetailVisible", "currentSchedule"]),
-    showPassword() {
-      if (this.passwordVisible) return "text";
-      return "password";
-    },
     dialogLabel() {
       if (this.id) return this.$gettext("Import") + " " + this.id;
       return this.$gettext("New Import");
     }
   },
   methods: {
+    setUrl(value) {
+      this.url = value;
+    },
+    setFeatureType(value) {
+      this.featureType = value;
+    },
+    setSortBy(value) {
+      this.sortBy = value;
+    },
+    setUsername(value) {
+      this.username = value;
+    },
+    setPassword(value) {
+      this.password = value;
+    },
+    setLOS(value) {
+      this.LOS = value;
+    },
+    setMinWidth(value) {
+      this.minWidth = value;
+    },
+    setMaxWidth(value) {
+      this.maxWidth = value;
+    },
+    setDepth(value) {
+      this.depth = value;
+    },
+    setSourceOrganization(value) {
+      this.sourceOrganization = value;
+    },
     calcCronString() {
       let getValue = value => {
         return this[value] ? this[value] : "*";
--- a/client/src/components/importschedule/Waterwayarea.vue	Wed Jan 23 16:50:33 2019 +0100
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,84 +0,0 @@
-<template>
-  <div>
-    <div class="d-flex flex-row">
-      <div class="flex-column mt-3 mr-3 w-100">
-        <div class="flex-row text-left">
-          <small class="text-muted"> <translate>URL</translate> </small>
-        </div>
-        <div class="w-100">
-          <input v-model="url" class="form-control" type="url" />
-        </div>
-      </div>
-      <div v-if="false" class="flex-column mt-3 text-left">
-        <div class="d-flex flex-row">
-          <small class="text-muted mr-2"
-            ><translate>Insecure</translate>
-          </small>
-        </div>
-        <div class="d-flex flex-row">
-          <toggle-button
-            v-model="insecure"
-            class="mt-2"
-            :speed="100"
-            :color="{
-              checked: '#FF0000',
-              unchecked: '#E9ECEF',
-              disabled: '#CCCCCC'
-            }"
-            :labels="{
-              checked: this.$options.on,
-              unchecked: this.$options.off
-            }"
-            :width="60"
-            :height="30"
-          />
-        </div>
-      </div>
-    </div>
-    <div v-if="!url" class="d-flex flex-row">
-      <small
-        ><translate class="text-danger">Please enter a URL</translate></small
-      >
-    </div>
-    <div class="d-flex flex-row">
-      <div class="flex-column mt-3 mr-3 w-50">
-        <div class="flex-row text-left">
-          <small class="text-muted"> <translate>Featuretype</translate> </small>
-        </div>
-        <div class="w-100">
-          <input v-model="featureType" class="form-control" type="text" />
-        </div>
-        <div v-if="!featureType" class="d-flex flex-row">
-          <small
-            ><translate class="text-danger"
-              >Please enter a Featuretype</translate
-            ></small
-          >
-        </div>
-      </div>
-      <div class="flex-column mt-3 w-50">
-        <div class="flex-row text-left">
-          <small class="text-muted"> <translate>SortBy</translate> </small>
-        </div>
-        <div class="w-100">
-          <input v-model="sortBy" class="form-control" type="text" />
-        </div>
-        <div v-if="!sortBy" class="d-flex flex-row">
-          <small
-            ><translate class="text-danger"
-              >Please enter SortBy</translate
-            ></small
-          >
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "waterwayarea"
-};
-</script>
-
-<style></style>
--- a/client/src/components/importschedule/Waterwayaxis.vue	Wed Jan 23 16:50:33 2019 +0100
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,84 +0,0 @@
-<template>
-  <div>
-    <div class="d-flex flex-row">
-      <div class="flex-column mt-3 mr-3 w-100">
-        <div class="flex-row text-left">
-          <small class="text-muted"> <translate>URL</translate> </small>
-        </div>
-        <div class="w-100">
-          <input v-model="url" class="form-control" type="url" />
-        </div>
-      </div>
-      <div v-if="false" class="flex-column mt-3 text-left">
-        <div class="d-flex flex-row">
-          <small class="text-muted mr-2"
-            ><translate>Insecure</translate>
-          </small>
-        </div>
-        <div class="d-flex flex-row">
-          <toggle-button
-            v-model="insecure"
-            class="mt-2"
-            :speed="100"
-            :color="{
-              checked: '#FF0000',
-              unchecked: '#E9ECEF',
-              disabled: '#CCCCCC'
-            }"
-            :labels="{
-              checked: this.$options.on,
-              unchecked: this.$options.off
-            }"
-            :width="60"
-            :height="30"
-          />
-        </div>
-      </div>
-    </div>
-    <div v-if="!url" class="d-flex flex-row">
-      <small
-        ><translate class="text-danger">Please enter a URL</translate></small
-      >
-    </div>
-    <div class="d-flex flex-row">
-      <div class="flex-column mt-3 mr-3 w-50">
-        <div class="flex-row text-left">
-          <small class="text-muted"> <translate>Featuretype</translate> </small>
-        </div>
-        <div class="w-100">
-          <input v-model="featureType" class="form-control" type="text" />
-        </div>
-        <div v-if="!featureType" class="d-flex flex-row">
-          <small
-            ><translate class="text-danger"
-              >Please enter a Featuretype</translate
-            ></small
-          >
-        </div>
-      </div>
-      <div class="flex-column mt-3 w-50">
-        <div class="flex-row text-left">
-          <small class="text-muted"> <translate>SortBy</translate> </small>
-        </div>
-        <div class="w-100">
-          <input v-model="sortBy" class="form-control" type="text" />
-        </div>
-        <div v-if="!sortBy" class="d-flex flex-row">
-          <small
-            ><translate class="text-danger"
-              >Please enter SortBy</translate
-            ></small
-          >
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "waterwayaxis"
-};
-</script>
-
-<style></style>
--- a/client/src/components/importschedule/Waterwaygauges.vue	Wed Jan 23 16:50:33 2019 +0100
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,92 +0,0 @@
-<template>
-  <div>
-    <div class="d-flex flex-row">
-      <div class="flex-column mt-3 mr-3 w-100">
-        <div class="flex-row text-left">
-          <small class="text-muted"> <translate>URL</translate> </small>
-        </div>
-        <div class="w-100">
-          <input v-model="url" class="form-control" type="url" />
-        </div>
-      </div>
-      <div v-if="false" class="flex-column mt-3 text-left">
-        <div class="d-flex flex-row">
-          <small class="text-muted mr-2"
-            ><translate>Insecure</translate>
-          </small>
-        </div>
-        <div class="d-flex flex-row">
-          <toggle-button
-            v-model="insecure"
-            class="mt-2"
-            :speed="100"
-            :color="{
-              checked: '#FF0000',
-              unchecked: '#E9ECEF',
-              disabled: '#CCCCCC'
-            }"
-            :labels="{
-              checked: this.$options.on,
-              unchecked: this.$options.off
-            }"
-            :width="60"
-            :height="30"
-          />
-        </div>
-      </div>
-    </div>
-    <div v-if="!url" class="d-flex flex-row">
-      <small
-        ><translate class="text-danger">Please enter a URL</translate></small
-      >
-    </div>
-    <div class="d-flex flex-row">
-      <div class="flex-column mt-3 mr-3 w-50">
-        <div class="flex-row text-left">
-          <small class="text-muted"> <translate>Username</translate> </small>
-        </div>
-        <div class="w-100">
-          <input v-model="username" class="form-control" type="text" />
-        </div>
-        <div v-if="!username" class="d-flex flex-row">
-          <small
-            ><translate class="text-danger"
-              >Please enter a Username</translate
-            ></small
-          >
-        </div>
-      </div>
-      <div class="flex-column mt-3 w-50">
-        <div class="flex-row text-left">
-          <small class="text-muted"> <translate>Password</translate> </small>
-        </div>
-        <div class="w-100 d-flex flex-row">
-          <input v-model="password" class="form-control" :type="showPassword" />
-          <span
-            class="input-group-text ml-2"
-            @click="passwordVisible = !passwordVisible"
-          >
-            <font-awesome-icon
-              :icon="passwordVisible ? 'eye-slash' : 'eye'"
-            ></font-awesome-icon>
-          </span>
-        </div>
-        <div v-if="!password" class="d-flex flex-row">
-          <small
-            ><translate class="text-danger"
-              >Please enter a Password</translate
-            ></small
-          >
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "waterwaygauges"
-};
-</script>
-
-<style></style>
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/components/importschedule/importtypes/Availablefairwaydepth.vue	Thu Jan 24 13:43:36 2019 +0100
@@ -0,0 +1,38 @@
+<template>
+  <div>
+    <div class="d-flex flex-row">
+      <div class="flex-column mt-3 mr-3 w-100">
+        <div class="flex-row text-left">
+          <small class="text-muted"> <translate>URL</translate> </small>
+        </div>
+        <div class="w-100">
+          <input
+            @keyup="urlChanged"
+            class="form-control"
+            type="url"
+            :value="url"
+          />
+        </div>
+      </div>
+    </div>
+    <div v-if="!url" class="d-flex flex-row">
+      <small
+        ><translate class="text-danger">Please enter a URL</translate></small
+      >
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "availablefairwaydepth",
+  props: ["url"],
+  methods: {
+    urlChanged(e) {
+      this.$emit("urlChanged", e.target.value);
+    }
+  }
+};
+</script>
+
+<style></style>
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/components/importschedule/importtypes/Bottleneck.vue	Thu Jan 24 13:43:36 2019 +0100
@@ -0,0 +1,63 @@
+<template>
+  <div>
+    <div class="d-flex flex-row">
+      <div class="flex-column mt-3 mr-3 w-100">
+        <div class="flex-row text-left">
+          <small class="text-muted"> <translate>URL</translate> </small>
+        </div>
+        <div class="w-100">
+          <input
+            @keyup="urlChanged"
+            class="form-control"
+            type="url"
+            :value="url"
+          />
+        </div>
+      </div>
+      <div v-if="false" class="flex-column mt-3 text-left">
+        <div class="d-flex flex-row">
+          <small class="text-muted mr-2"
+            ><translate>Insecure</translate>
+          </small>
+        </div>
+        <div class="d-flex flex-row">
+          <toggle-button
+            v-model="insecure"
+            class="mt-2"
+            :speed="100"
+            :color="{
+              checked: '#FF0000',
+              unchecked: '#E9ECEF',
+              disabled: '#CCCCCC'
+            }"
+            :labels="{
+              checked: this.$options.on,
+              unchecked: this.$options.off
+            }"
+            :width="60"
+            :height="30"
+          />
+        </div>
+      </div>
+    </div>
+    <div v-if="!url" class="d-flex flex-row">
+      <small
+        ><translate class="text-danger">Please enter a URL</translate></small
+      >
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "bottleneckimport",
+  props: ["url"],
+  methods: {
+    urlChanged(e) {
+      this.$emit("urlChanged", e.target.value);
+    }
+  }
+};
+</script>
+
+<style></style>
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/components/importschedule/importtypes/Distancemarksvirtual.vue	Thu Jan 24 13:43:36 2019 +0100
@@ -0,0 +1,105 @@
+<template>
+  <div>
+    <div class="d-flex flex-row">
+      <div class="flex-column mt-3 mr-3 w-100">
+        <div class="flex-row text-left">
+          <small class="text-muted"> <translate>URL</translate> </small>
+        </div>
+        <div class="w-100">
+          <input
+            @keyup="urlChanged"
+            class="form-control"
+            type="url"
+            :value="url"
+          />
+        </div>
+      </div>
+    </div>
+    <div v-if="!url" class="d-flex flex-row">
+      <small
+        ><translate class="text-danger">Please enter a URL</translate></small
+      >
+    </div>
+    <div class="d-flex flex-row">
+      <div class="flex-column mt-3 mr-3 w-50">
+        <div class="flex-row text-left">
+          <small class="text-muted"> <translate>Username</translate> </small>
+        </div>
+        <div class="w-100">
+          <input
+            @keyup="usernameChanged"
+            class="form-control"
+            type="text"
+            :value="username"
+          />
+        </div>
+        <div v-if="!username" class="d-flex flex-row">
+          <small
+            ><translate class="text-danger"
+              >Please enter a Username</translate
+            ></small
+          >
+        </div>
+      </div>
+      <div class="flex-column mt-3 w-50">
+        <div class="flex-row text-left">
+          <small class="text-muted"> <translate>Password</translate> </small>
+        </div>
+        <div class="w-100 d-flex flex-row">
+          <input
+            @keyup="passwordChanged"
+            class="form-control"
+            :type="showPassword"
+            :value="password"
+          />
+          <span
+            class="input-group-text ml-2"
+            @click="passwordVisible = !passwordVisible"
+          >
+            <font-awesome-icon
+              :icon="passwordVisible ? 'eye-slash' : 'eye'"
+            ></font-awesome-icon>
+          </span>
+        </div>
+        <div v-if="!password" class="d-flex flex-row">
+          <small
+            ><translate class="text-danger"
+              >Please enter a Password</translate
+            ></small
+          >
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "distancemarksvirtual",
+  props: ["url", "username", "password"],
+  data() {
+    return {
+      passwordVisible: false
+    };
+  },
+  computed: {
+    showPassword() {
+      if (this.passwordVisible) return "text";
+      return "password";
+    }
+  },
+  methods: {
+    urlChanged(e) {
+      this.$emit("urlChanged", e.target.value);
+    },
+    usernameChanged(e) {
+      this.$emit("usernameChanged", e.target.value);
+    },
+    passwordChanged(e) {
+      this.$emit("passwordChanged", e.target.value);
+    }
+  }
+};
+</script>
+
+<style></style>
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/components/importschedule/importtypes/Fairwaydimensions.vue	Thu Jan 24 13:43:36 2019 +0100
@@ -0,0 +1,223 @@
+<template>
+  <div>
+    <div class="d-flex flex-row">
+      <div class="flex-column mt-3 mr-3 w-100">
+        <div class="flex-row text-left">
+          <small class="text-muted"> <translate>URL</translate> </small>
+        </div>
+        <div class="w-100">
+          <input
+            @keyup="urlChanged"
+            class="form-control"
+            type="url"
+            :value="url"
+          />
+        </div>
+      </div>
+    </div>
+    <div v-if="!url" class="d-flex flex-row">
+      <small
+        ><translate class="text-danger">Please enter a URL</translate></small
+      >
+    </div>
+    <div class="d-flex flex-row">
+      <div class="flex-column mt-3 mr-3 w-50">
+        <div class="flex-row text-left">
+          <small class="text-muted"> <translate>Featuretype</translate> </small>
+        </div>
+        <div class="w-100">
+          <input
+            @keyup="featureTypeChanged"
+            class="form-control"
+            type="text"
+            :value="featureType"
+          />
+        </div>
+        <div v-if="!featureType" class="d-flex flex-row">
+          <small
+            ><translate class="text-danger"
+              >Please enter a Featuretype</translate
+            ></small
+          >
+        </div>
+      </div>
+      <div class="flex-column mt-3 w-50">
+        <div class="flex-row text-left">
+          <small class="text-muted"> <translate>SortBy</translate> </small>
+        </div>
+        <div class="w-100">
+          <input
+            @keyup="sortByChanged"
+            class="form-control"
+            type="text"
+            :value="sortBy"
+          />
+        </div>
+        <div v-if="!sortBy" class="d-flex flex-row">
+          <small
+            ><translate class="text-danger"
+              >Please enter SortBy</translate
+            ></small
+          >
+        </div>
+      </div>
+    </div>
+    <div class="d-flex flex-row">
+      <div class="flex-column mt-3 mr-3 w-50">
+        <div class="flex-row text-left">
+          <small class="text-muted"> <translate>LOS</translate> </small>
+        </div>
+        <div class="w-100">
+          <select @keyup="LOSChanged" class="form-control">
+            <option :value="{ LOS: 1 }">1</option>
+            <option :value="{ LOS: 2 }">2</option>
+            <option :value="{ LOS: 3 }">3</option>
+          </select>
+        </div>
+        <div v-if="!LOS" class="d-flex flex-row">
+          <small
+            ><translate class="text-danger"
+              >Please enter a level of service</translate
+            ></small
+          >
+        </div>
+      </div>
+      <div class="flex-column mt-3 w-50">
+        <div class="flex-row text-left">
+          <small class="text-muted"> <translate>Depth</translate> </small>
+        </div>
+        <div class="d-flex flex-row">
+          <input
+            @keyup="depthChanged"
+            @input="depthChanged"
+            class="form-control"
+            type="number"
+            :value="depth"
+          />
+          <div class="ml-2 my-auto">cm</div>
+        </div>
+        <div v-if="!depth" class="d-flex flex-row">
+          <small
+            ><translate class="text-danger"
+              >Please enter a depth</translate
+            ></small
+          >
+        </div>
+      </div>
+    </div>
+    <div class="d-flex flex-row">
+      <div class="flex-column mt-3 mr-3 w-50">
+        <div class="flex-row text-left">
+          <small class="text-muted"> <translate>MinWidth</translate> </small>
+        </div>
+        <div class="d-flex flex-row">
+          <input
+            @keyup="minWidthChanged"
+            @input="minWidthChanged"
+            class="form-control"
+            type="number"
+            :value="minWidth"
+          />
+          <div class="ml-2 my-auto">&nbsp;m</div>
+        </div>
+        <div v-if="!minWidth" class="d-flex flex-row">
+          <small
+            ><translate class="text-danger"
+              >Please enter a minimum width</translate
+            ></small
+          >
+        </div>
+      </div>
+      <div class="flex-column mt-3 w-50">
+        <div class="flex-row text-left">
+          <small class="text-muted"> <translate>MaxWidth</translate> </small>
+        </div>
+        <div class="d-flex flex-row">
+          <input
+            @keyup="maxWidthChanged"
+            @input="maxWidthChanged"
+            class="form-control"
+            type="number"
+            :value="maxWidth"
+          />
+          <div class="ml-2 my-auto">&nbsp;m</div>
+        </div>
+        <div v-if="!maxWidth" class="d-flex flex-row">
+          <small
+            ><translate class="text-danger"
+              >Please enter a maximum width</translate
+            ></small
+          >
+        </div>
+      </div>
+    </div>
+    <div class="d-flex flex-row">
+      <div class="flex-column mt-3 mr-3 w-50">
+        <div class="flex-row text-left">
+          <small class="text-muted">
+            <translate>Source orgranization</translate>
+          </small>
+        </div>
+        <div class="w-100">
+          <input
+            @keyup="sourceOrganizationChanged"
+            class="form-control"
+            type="text"
+            :value="sourceOrganization"
+          />
+        </div>
+        <div v-if="!sourceOrganization" class="d-flex flex-row">
+          <small
+            ><translate class="text-danger"
+              >Please enter a source orgranization</translate
+            ></small
+          >
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "fairwaydimensions",
+  props: [
+    "url",
+    "featureType",
+    "sortBy",
+    "depth",
+    "LOS",
+    "minWidth",
+    "maxWidth",
+    "sourceOrganization"
+  ],
+  methods: {
+    urlChanged(e) {
+      this.$emit("urlChanged", e.target.value);
+    },
+    featureTypeChanged(e) {
+      this.$emit("featureTypeChanged", e.target.value);
+    },
+    sortByChanged(e) {
+      this.$emit("sortByChanged", e.target.value);
+    },
+    depthChanged(e) {
+      this.$emit("depthChanged", e.target.value);
+    },
+    LOSChanged(e) {
+      this.$emit("LOSChanged", e.target.value);
+    },
+    minWidthChanged(e) {
+      this.$emit("minWidthChanged", e.target.value);
+    },
+    maxWidthChanged(e) {
+      this.$emit("maxWidthChanged", e.target.value);
+    },
+    sourceOrganizationChanged(e) {
+      this.$emit("sourceOrganizationChanged", e.target.value);
+    }
+  }
+};
+</script>
+
+<style></style>
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/components/importschedule/importtypes/Gaugemeasurement.vue	Thu Jan 24 13:43:36 2019 +0100
@@ -0,0 +1,38 @@
+<template>
+  <div>
+    <div class="d-flex flex-row">
+      <div class="flex-column mt-3 mr-3 w-100">
+        <div class="flex-row text-left">
+          <small class="text-muted"> <translate>URL</translate> </small>
+        </div>
+        <div class="w-100">
+          <input
+            @keyup="urlChanged"
+            class="form-control"
+            type="url"
+            :value="url"
+          />
+        </div>
+      </div>
+    </div>
+    <div v-if="!url" class="d-flex flex-row">
+      <small
+        ><translate class="text-danger">Please enter a URL</translate></small
+      >
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "gaugemeasurement",
+  props: ["url"],
+  methods: {
+    urlChanged(e) {
+      this.$emit("urlChanged", e.target.value);
+    }
+  }
+};
+</script>
+
+<style></style>
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/components/importschedule/importtypes/Waterwayarea.vue	Thu Jan 24 13:43:36 2019 +0100
@@ -0,0 +1,86 @@
+<template>
+  <div>
+    <div class="d-flex flex-row">
+      <div class="flex-column mt-3 mr-3 w-100">
+        <div class="flex-row text-left">
+          <small class="text-muted"> <translate>URL</translate> </small>
+        </div>
+        <div class="w-100">
+          <input
+            @keyup="urlChanged"
+            class="form-control"
+            type="url"
+            :value="url"
+          />
+        </div>
+      </div>
+    </div>
+    <div v-if="!url" class="d-flex flex-row">
+      <small
+        ><translate class="text-danger">Please enter a URL</translate></small
+      >
+    </div>
+    <div class="d-flex flex-row">
+      <div class="flex-column mt-3 mr-3 w-50">
+        <div class="flex-row text-left">
+          <small class="text-muted"> <translate>Featuretype</translate> </small>
+        </div>
+        <div class="w-100">
+          <input
+            @keyup="featureTypeChanged"
+            class="form-control"
+            type="text"
+            :value="featureType"
+          />
+        </div>
+        <div v-if="!featureType" class="d-flex flex-row">
+          <small
+            ><translate class="text-danger"
+              >Please enter a Featuretype</translate
+            ></small
+          >
+        </div>
+      </div>
+      <div class="flex-column mt-3 w-50">
+        <div class="flex-row text-left">
+          <small class="text-muted"> <translate>SortBy</translate> </small>
+        </div>
+        <div class="w-100">
+          <input
+            @keyup="sortByChanged"
+            class="form-control"
+            type="text"
+            :value="sortBy"
+          />
+        </div>
+        <div v-if="!sortBy" class="d-flex flex-row">
+          <small
+            ><translate class="text-danger"
+              >Please enter SortBy</translate
+            ></small
+          >
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "waterwayarea",
+  props: ["url", "featureType", "sortBy"],
+  methods: {
+    urlChanged(e) {
+      this.$emit("urlChanged", e.target.value);
+    },
+    featureTypeChanged(e) {
+      this.$emit("featureTypeChanged", e.target.value);
+    },
+    sortByChanged(e) {
+      this.$emit("sortByChanged", e.target.value);
+    }
+  }
+};
+</script>
+
+<style></style>
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/components/importschedule/importtypes/Waterwayaxis.vue	Thu Jan 24 13:43:36 2019 +0100
@@ -0,0 +1,86 @@
+<template>
+  <div>
+    <div class="d-flex flex-row">
+      <div class="flex-column mt-3 mr-3 w-100">
+        <div class="flex-row text-left">
+          <small class="text-muted"> <translate>URL</translate> </small>
+        </div>
+        <div class="w-100">
+          <input
+            @keyup="urlChanged"
+            class="form-control"
+            type="url"
+            :value="url"
+          />
+        </div>
+      </div>
+    </div>
+    <div v-if="!url" class="d-flex flex-row">
+      <small
+        ><translate class="text-danger">Please enter a URL</translate></small
+      >
+    </div>
+    <div class="d-flex flex-row">
+      <div class="flex-column mt-3 mr-3 w-50">
+        <div class="flex-row text-left">
+          <small class="text-muted"> <translate>Featuretype</translate> </small>
+        </div>
+        <div class="w-100">
+          <input
+            @keyup="featureTypeChanged"
+            class="form-control"
+            type="text"
+            :value="featureType"
+          />
+        </div>
+        <div v-if="!featureType" class="d-flex flex-row">
+          <small
+            ><translate class="text-danger"
+              >Please enter a Featuretype</translate
+            ></small
+          >
+        </div>
+      </div>
+      <div class="flex-column mt-3 w-50">
+        <div class="flex-row text-left">
+          <small class="text-muted"> <translate>SortBy</translate> </small>
+        </div>
+        <div class="w-100">
+          <input
+            @keyup="sortByChanged"
+            class="form-control"
+            type="text"
+            :value="sortBy"
+          />
+        </div>
+        <div v-if="!sortBy" class="d-flex flex-row">
+          <small
+            ><translate class="text-danger"
+              >Please enter SortBy</translate
+            ></small
+          >
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "waterwayaxis",
+  props: ["url", "featureType", "sortBy"],
+  methods: {
+    urlChanged(e) {
+      this.$emit("urlChanged", e.target.value);
+    },
+    featureTypeChanged(e) {
+      this.$emit("featureTypeChanged", e.target.value);
+    },
+    sortByChanged(e) {
+      this.$emit("sortByChanged", e.target.value);
+    }
+  }
+};
+</script>
+
+<style></style>
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/components/importschedule/importtypes/Waterwaygauges.vue	Thu Jan 24 13:43:36 2019 +0100
@@ -0,0 +1,105 @@
+<template>
+  <div>
+    <div class="d-flex flex-row">
+      <div class="flex-column mt-3 mr-3 w-100">
+        <div class="flex-row text-left">
+          <small class="text-muted"> <translate>URL</translate> </small>
+        </div>
+        <div class="w-100">
+          <input
+            @keyup="urlChanged"
+            class="form-control"
+            type="url"
+            :value="url"
+          />
+        </div>
+      </div>
+    </div>
+    <div v-if="!url" class="d-flex flex-row">
+      <small
+        ><translate class="text-danger">Please enter a URL</translate></small
+      >
+    </div>
+    <div class="d-flex flex-row">
+      <div class="flex-column mt-3 mr-3 w-50">
+        <div class="flex-row text-left">
+          <small class="text-muted"> <translate>Username</translate> </small>
+        </div>
+        <div class="w-100">
+          <input
+            @keyup="usernameChanged"
+            class="form-control"
+            type="text"
+            :value="username"
+          />
+        </div>
+        <div v-if="!username" class="d-flex flex-row">
+          <small
+            ><translate class="text-danger"
+              >Please enter a Username</translate
+            ></small
+          >
+        </div>
+      </div>
+      <div class="flex-column mt-3 w-50">
+        <div class="flex-row text-left">
+          <small class="text-muted"> <translate>Password</translate> </small>
+        </div>
+        <div class="w-100 d-flex flex-row">
+          <input
+            @keyup="passwordChanged"
+            class="form-control"
+            :type="showPassword"
+            :value="password"
+          />
+          <span
+            class="input-group-text ml-2"
+            @click="passwordVisible = !passwordVisible"
+          >
+            <font-awesome-icon
+              :icon="passwordVisible ? 'eye-slash' : 'eye'"
+            ></font-awesome-icon>
+          </span>
+        </div>
+        <div v-if="!password" class="d-flex flex-row">
+          <small
+            ><translate class="text-danger"
+              >Please enter a Password</translate
+            ></small
+          >
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "waterwaygauges",
+  props: ["username", "password", "url"],
+  data() {
+    return {
+      passwordVisible: false
+    };
+  },
+  computed: {
+    showPassword() {
+      if (this.passwordVisible) return "text";
+      return "password";
+    }
+  },
+  methods: {
+    urlChanged(e) {
+      this.$emit("urlChanged", e.target.value);
+    },
+    usernameChanged(e) {
+      this.$emit("usernameChanged", e.target.value);
+    },
+    passwordChanged(e) {
+      this.$emit("passwordChanged", e.target.value);
+    }
+  }
+};
+</script>
+
+<style></style>
--- a/client/src/store/imports.js	Wed Jan 23 16:50:33 2019 +0100
+++ b/client/src/store/imports.js	Thu Jan 24 13:43:36 2019 +0100
@@ -88,7 +88,7 @@
     sortBy: null,
     username: "",
     password: "",
-    LOS: null,
+    LOS: 1,
     minWidth: null,
     maxWidth: null,
     depth: null,