changeset 1992:29f02d0043a9 importschedulerefac

split imports out
author Thomas Junk <thomas.junk@intevation.de>
date Wed, 23 Jan 2019 16:50:33 +0100
parents f9f1babe52ae
children fda5c78fb7d3
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
diffstat 9 files changed, 722 insertions(+), 294 deletions(-) [+]
line wrap: on
line diff
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/components/importschedule/Availablefairwaydepth.vue	Wed Jan 23 16:50:33 2019 +0100
@@ -0,0 +1,52 @@
+<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>
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/components/importschedule/Bottleneck.vue	Wed Jan 23 16:50:33 2019 +0100
@@ -0,0 +1,52 @@
+<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>
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/components/importschedule/Distancemarksvirtual.vue	Wed Jan 23 16:50:33 2019 +0100
@@ -0,0 +1,92 @@
+<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>
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/components/importschedule/Fairwaydimensions.vue	Wed Jan 23 16:50:33 2019 +0100
@@ -0,0 +1,178 @@
+<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>
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/components/importschedule/Gaugemeasurement.vue	Wed Jan 23 16:50:33 2019 +0100
@@ -0,0 +1,52 @@
+<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:25:43 2019 +0100
+++ b/client/src/components/importschedule/Importscheduledetail.vue	Wed Jan 23 16:50:33 2019 +0100
@@ -69,252 +69,32 @@
               </div>
             </div>
           </div>
-          <div v-if="isURLRequired">
-            <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>
-          <div v-if="isCredentialsRequired">
-            <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>
-          <div v-if="isFeatureTypeRequired">
-            <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>
-          <div v-if="import_ == $options.IMPORTTYPES.FAIRWAYDIMENSION">
-            <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>
+
+          <Availablefairwaydepth
+            v-if="import_ == $options.IMPORTTYPES.FAIRWAYAVAILABILITY"
+          ></Availablefairwaydepth>
+          <Bottleneck
+            v-if="import_ == $options.IMPORTTYPES.BOTTLENECK"
+          ></Bottleneck>
+          <Distancemarksvirtual
+            v-if="import_ == $options.IMPORTTYPES.DISTANCEMARKSVIRTUAL"
+          ></Distancemarksvirtual>
+          <Faiwaydimensions
+            v-if="import_ == $options.IMPORTTYPES.FAIRWAYDIMENSION"
+          ></Faiwaydimensions>
+          <Gaugemeasurement
+            v-if="import_ == $options.IMPORTTYPES.GAUGEMEASUREMENT"
+          ></Gaugemeasurement>
+          <Waterwayarea
+            v-if="import_ == $options.IMPORTTYPES.WATERWAYAREA"
+          ></Waterwayarea>
+          <Waterwaygauges
+            v-if="import_ == $options.IMPORTTYPES.WATERWAYGAUGES"
+          ></Waterwaygauges>
+          <Waterwayaxis
+            v-if="import_ == $options.IMPORTTYPES.WATERWAYAXIS"
+          ></Waterwayaxis>
+
           <div class="d-flex flex-row">
             <div class="flex-column mt-3 mr-4">
               <div class="flex-row text-left">
@@ -563,6 +343,16 @@
 
 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")
+  },
   data() {
     return {
       passwordVisible: false,
@@ -650,54 +440,6 @@
     dialogLabel() {
       if (this.id) return this.$gettext("Import") + " " + this.id;
       return this.$gettext("New Import");
-    },
-    isCredentialsRequired() {
-      switch (this.import_) {
-        case this.$options.IMPORTTYPES.WATERWAYGAUGES:
-        case this.$options.IMPORTTYPES.DISTANCEMARKSVIRTUAL:
-          return true;
-        default:
-          return false;
-      }
-    },
-    isURLRequired() {
-      switch (this.import_) {
-        case this.$options.IMPORTTYPES.BOTTLENECK:
-        case this.$options.IMPORTTYPES.WATERWAYAXIS:
-        case this.$options.IMPORTTYPES.GAUGEMEASUREMENT:
-        case this.$options.IMPORTTYPES.FAIRWAYAVAILABILITY:
-        case this.$options.IMPORTTYPES.WATERWAYAREA:
-        case this.$options.IMPORTTYPES.FAIRWAYDIMENSION:
-        case this.$options.IMPORTTYPES.WATERWAYGAUGES:
-        case this.$options.IMPORTTYPES.DISTANCEMARKSVIRTUAL:
-          return true;
-        default:
-          return false;
-      }
-    },
-    isFeatureTypeRequired() {
-      switch (this.import_) {
-        case this.$options.IMPORTTYPES.WATERWAYAXIS:
-        case this.$options.IMPORTTYPES.WATERWAYAREA:
-        case this.$options.IMPORTTYPES.FAIRWAYDIMENSION:
-          return true;
-        default:
-          return false;
-      }
-    },
-    isSortbyRequired() {
-      switch (this.import_) {
-        case this.$options.IMPORTTYPES.WATERWAYAXIS:
-        case this.$options.IMPORTTYPES.WATERWAYAREA:
-        case this.$options.IMPORTTYPES.FAIRWAYDIMENSION:
-          return true;
-        default:
-          return false;
-      }
-    },
-    fixedSource() {
-      if (this.import_ === this.$options.IMPORTTYPES.BOTTLENECK) return true;
-      return false;
     }
   },
   methods: {
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/components/importschedule/Waterwayarea.vue	Wed Jan 23 16:50:33 2019 +0100
@@ -0,0 +1,84 @@
+<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>
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/components/importschedule/Waterwayaxis.vue	Wed Jan 23 16:50:33 2019 +0100
@@ -0,0 +1,84 @@
+<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>
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/components/importschedule/Waterwaygauges.vue	Wed Jan 23 16:50:33 2019 +0100
@@ -0,0 +1,92 @@
+<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>