# HG changeset patch
# User Markus Kottlaender <markus@intevation.de>
# Date 1559728943 -7200
# Node ID a8190a570b7135482799faf3d8af0616ddc481d8
# Parent  d02d4e31491b3e7c357f3159bb3c4c4753a7593c
client: configuration: prepared morphology classbreaks UI

diff -r d02d4e31491b -r a8190a570b71 client/src/components/systemconfiguration/DataAccuracy.vue
--- a/client/src/components/systemconfiguration/DataAccuracy.vue	Wed Jun 05 11:48:15 2019 +0200
+++ b/client/src/components/systemconfiguration/DataAccuracy.vue	Wed Jun 05 12:02:23 2019 +0200
@@ -1,5 +1,5 @@
 <template>
-  <div class="d-flex flex-column pb-4">
+  <div class="d-flex flex-column pb-4 border-bottom">
     <h5 class="py-2 px-3 mb-2 m-0">
       <translate>Data Availability/Accuracy</translate>
     </h5>
diff -r d02d4e31491b -r a8190a570b71 client/src/components/systemconfiguration/MorphologyClassbreaks.vue
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/components/systemconfiguration/MorphologyClassbreaks.vue	Wed Jun 05 12:02:23 2019 +0200
@@ -0,0 +1,130 @@
+<template>
+  <div class="d-flex flex-column pb-4 border-bottom">
+    <h5 class="py-2 px-3 mb-2 m-0">
+      <translate>Bottleneck Morphology Classbreaks</translate>
+    </h5>
+    <div class="px-3">
+      <h6 class="font-weight-bold"><translate>Sounding Result</translate></h6>
+      <div class="d-flex flex-wrap">
+        <div
+          class="input-group mb-3 mr-2 classbreak"
+          v-for="(value, i) in classbreaks"
+          :key="i"
+        >
+          <select class="form-control form-control-sm">
+            <option>&lt;</option>
+            <option>&le;</option>
+            <option>&gt;</option>
+            <option>&ge;</option>
+          </select>
+          <input
+            v-model="classbreaks[i]"
+            type="number"
+            min="0"
+            step="0.1"
+            class="form-control form-control-sm"
+          />
+          <div class="input-group-append">
+            <button
+              class="btn btn-sm btn-danger"
+              type="button"
+              @click="classbreaks.splice(i, 1)"
+            >
+              <font-awesome-icon icon="trash" />
+            </button>
+          </div>
+        </div>
+        <button
+          class="btn btn-sm btn-success mb-3"
+          @click="classbreaks.unshift(classbreaks.length ? classbreaks[0] : 1)"
+        >
+          <font-awesome-icon icon="plus" />
+        </button>
+      </div>
+    </div>
+    <div class="px-3">
+      <h6 class="font-weight-bold">
+        <translate>Sounding Result Comparison</translate>
+      </h6>
+      <div class="d-flex flex-wrap">
+        <div
+          class="input-group mb-3 mr-2 classbreak"
+          v-for="(value, i) in compareClassbreaks"
+          :key="i"
+        >
+          <select class="form-control form-control-sm">
+            <option>&lt;</option>
+            <option>&le;</option>
+            <option>&gt;</option>
+            <option>&ge;</option>
+          </select>
+          <input
+            v-model="compareClassbreaks[i]"
+            type="number"
+            step="0.1"
+            class="form-control form-control-sm"
+          />
+          <div class="input-group-append">
+            <button
+              class="btn btn-sm btn-danger"
+              type="button"
+              @click="classbreaks.splice(i, 1)"
+            >
+              <font-awesome-icon icon="trash" />
+            </button>
+          </div>
+        </div>
+        <button
+          class="btn btn-sm btn-success mb-3"
+          @click="
+            compareClassbreaks.unshift(
+              compareClassbreaks.length ? compareClassbreaks[0] : 1
+            )
+          "
+        >
+          <font-awesome-icon icon="plus" />
+        </button>
+      </div>
+    </div>
+    <div class="mt-4 px-3">
+      <a @click.prevent="submit" class="btn btn-info btn-sm text-white">
+        <translate>Send</translate>
+      </a>
+    </div>
+  </div>
+</template>
+
+<style lang="sass" scoped>
+.classbreak
+  width: 130px
+  input
+    width: 30px
+</style>
+
+<script>
+/* This is Free Software under GNU Affero General Public License v >= 3.0
+ * without warranty, see README.md and license for details.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ * License-Filename: LICENSES/AGPL-3.0.txt
+ *
+ * Copyright (C) 2018 by via donau
+ *   – Österreichische Wasserstraßen-Gesellschaft mbH
+ * Software engineering by Intevation GmbH
+ *
+ * Author(s):
+ * Markus Kottländer <markus@intevation.de>
+ */
+
+export default {
+  data() {
+    return {
+      classbreaks: [],
+      compareClassbreaks: []
+    };
+  },
+  methods: {
+    submit() {}
+  }
+};
+</script>