Mercurial > gemma

changeset 1871:8ae7a1fba4cd

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
prototypical listview for stretches. new and back buttons. have fun
author Thomas Junk <thomas.junk@intevation.de>
date Thu, 17 Jan 2019 17:29:39 +0100
parents 3050d702913a
children f63712670c25
files client/src/components/ImportStretches.vue client/src/components/Sidebar.vue
diffstat 2 files changed, 220 insertions(+), 146 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/components/ImportStretches.vue	Thu Jan 17 16:41:10 2019 +0100
+++ b/client/src/components/ImportStretches.vue	Thu Jan 17 17:29:39 2019 +0100
@@ -4,176 +4,209 @@
       <font-awesome-icon icon="road" class="mr-2"></font-awesome-icon>
       <translate>Define stretches</translate>
     </h6>
-    <div class="ml-3 mr-3">
-      <div class="d-flex flex-row justify-content-between">
-        <div class="mt-2 w-50 mr-2 text-left">
-          <small class="text-muted"> <translate>ID</translate> </small>
-          <input
-            id="id"
-            type="text"
-            class="form-control"
-            placeholder="AT_Section_12"
-            aria-label="id"
-            v-model="id"
-          />
-          <span class="text-left text-danger">
-            <small v-if="idError && !id">
-              <translate>Please enter an id</translate>
-            </small>
-          </span>
-        </div>
-        <div class="mt-2 w-50 ml-2 text-left">
-          <div>
-            <small class="text-muted">
-              <translate>Countrycode</translate>
-            </small>
+    <div v-if="!edit" class="mb-3">
+      <div
+        class="mt-3 mr-3 ml-3 d-flex flex-row justify-content-between border-bottom"
+      >
+        <div>id</div>
+        <div>funktion</div>
+        <div>startrhm</div>
+        <div>endrhm</div>
+      </div>
+      <div
+        class=" mr-3 ml-3 d-flex flex-row justify-content-between"
+        v-for="stretch in stretches"
+        :key="stretch.id"
+      >
+        <div>{{ stretch.id }}</div>
+        <div>{{ stretch.funktion }}</div>
+        <div>{{ stretch.startrhm }}</div>
+        <div>{{ stretch.endrhm }}</div>
+      </div>
+      <div class="mt-3" v-if="stretches.length == 0">
+        <translate>No results.</translate>
+      </div>
+    </div>
+    <div v-if="edit">
+      <div class="ml-3 mr-3">
+        <div class="d-flex flex-row justify-content-between">
+          <div class="mt-2 w-50 mr-2 text-left">
+            <small class="text-muted"> <translate>ID</translate> </small>
             <input
-              id="countryCode"
+              id="id"
               type="text"
               class="form-control"
-              placeholder="AT"
+              placeholder="AT_Section_12"
               aria-label="id"
               v-model="id"
             />
             <span class="text-left text-danger">
-              <small v-if="countryCodeError && !countryCode">
-                <translate>Please enter a countrycode </translate>
+              <small v-if="idError && !id">
+                <translate>Please enter an id</translate>
+              </small>
+            </span>
+          </div>
+          <div class="mt-2 w-50 ml-2 text-left">
+            <div>
+              <small class="text-muted">
+                <translate>Countrycode</translate>
+              </small>
+              <input
+                id="countryCode"
+                type="text"
+                class="form-control"
+                placeholder="AT"
+                aria-label="id"
+                v-model="countryCode"
+              />
+              <span class="text-left text-danger">
+                <small v-if="countryCodeError && !countryCode">
+                  <translate>Please enter a countrycode </translate>
+                </small>
+              </span>
+            </div>
+            <div class="w-50 ml-2"></div>
+          </div>
+        </div>
+        <div class="d-flex flex-column  justify-content-between">
+          <div class="mt-2 text-left">
+            <small class="text-muted"> <translate>Start rhm</translate> </small>
+            <div class="d-flex flex-row">
+              <input
+                id="startrhm"
+                type="text"
+                class="form-control"
+                placeholder="e.g. ATXXX00001000000019900"
+                aria-label="startrhm"
+                v-model="startrhm"
+              />
+              <span class="input-group-text">
+                <font-awesome-icon
+                  @click="togglePipette('start')"
+                  :class="{ 'text-info': pipetteStart }"
+                  icon="bullseye"
+                ></font-awesome-icon>
+              </span>
+            </div>
+            <span class="text-left text-danger">
+              <small v-if="startrhmError && !startrhm">
+                <translate>Please enter a start point</translate>
+              </small>
+            </span>
+          </div>
+          <div class="mt-2 text-left">
+            <small class="text-muted"> <translate>End rhm</translate> </small>
+            <div class="d-flex flex-row">
+              <input
+                id="endrhm"
+                type="text"
+                class="form-control"
+                placeholder="e.g. ATXXX00001000000019900"
+                aria-label="endrhm"
+                v-model="endrhm"
+              />
+              <span class="input-group-text">
+                <font-awesome-icon
+                  @click="togglePipette('end')"
+                  :class="{ 'text-info': pipetteEnd }"
+                  icon="bullseye"
+                ></font-awesome-icon>
+              </span>
+            </div>
+            <span class="text-left text-danger">
+              <small v-if="endrhmError && !endrhm">
+                <translate>Please enter an end point</translate>
               </small>
             </span>
           </div>
-          <div class="w-50 ml-2"></div>
         </div>
-      </div>
-      <div class="d-flex flex-column  justify-content-between">
-        <div class="mt-2 text-left">
-          <small class="text-muted"> <translate>Start rhm</translate> </small>
-          <div class="d-flex flex-row">
+        <div class="d-flex flex-row justify-content-between">
+          <div class="mt-2  mr-2 w-50  text-left">
+            <small class="text-muted">
+              <translate>Object name</translate>
+            </small>
             <input
-              id="startrhm"
+              id="objbn"
               type="text"
               class="form-control"
-              placeholder="e.g. ATXXX00001000000019900"
-              aria-label="startrhm"
-              v-model="startrhm"
+              placeholder=""
+              aria-label="objbn"
+              v-model="objbn"
             />
-            <span class="input-group-text">
-              <font-awesome-icon
-                @click="togglePipette('start')"
-                :class="{ 'text-info': pipetteStart }"
-                icon="bullseye"
-              ></font-awesome-icon>
+            <span class="text-left text-danger">
+              <small v-if="objbnError && !objbn">
+                <translate>Please enter an objectname</translate>
+              </small>
             </span>
           </div>
-          <span class="text-left text-danger">
-            <small v-if="startrhmError && !startrhm">
-              <translate>Please enter a start point</translate>
+          <div class="mt-2  ml-2 w-50  text-left">
+            <small class="text-muted">
+              <translate>National Object name</translate>
             </small>
-          </span>
-        </div>
-        <div class="mt-2 text-left">
-          <small class="text-muted"> <translate>End rhm</translate> </small>
-          <div class="d-flex flex-row">
             <input
-              id="endrhm"
+              id="nobjbn"
               type="text"
               class="form-control"
-              placeholder="e.g. ATXXX00001000000019900"
-              aria-label="endrhm"
-              v-model="endrhm"
+              placeholder=""
+              aria-label="nobjbn"
+              v-model="nobjbn"
             />
-            <span class="input-group-text">
-              <font-awesome-icon
-                @click="togglePipette('end')"
-                :class="{ 'text-info': pipetteEnd }"
-                icon="bullseye"
-              ></font-awesome-icon>
+            <span class="text-left text-danger">
+              <small v-if="nobjbnError && !nobjbn">
+                <translate>Please enter an objectname</translate>
+              </small>
             </span>
           </div>
-          <span class="text-left text-danger">
-            <small v-if="endrhmError && !endrhm">
-              <translate>Please enter an end point</translate>
-            </small>
-          </span>
+        </div>
+        <div class="d-flex flex-row justify-content-between">
+          <div class="mt-2 mr-2 w-50 text-left">
+            <small class="text-muted"> <translate>Date info</translate> </small>
+            <input
+              id="date_info"
+              type="date"
+              class="form-control"
+              placeholder="date_info"
+              aria-label="date_info"
+              v-model="date_info"
+            />
+            <span class="text-left text-danger">
+              <small v-if="date_infoError && !date_info">
+                <translate>Please enter a date</translate>
+              </small>
+            </span>
+          </div>
+          <div class="mt-2 ml-2 w-50 text-left">
+            <small class="text-muted"> <translate>Source</translate> </small>
+            <input
+              id="source"
+              type="text"
+              class="form-control"
+              placeholder="source"
+              aria-label="source"
+              v-model="source"
+            />
+            <span class="text-left text-danger">
+              <small v-if="sourceError && !source">
+                <translate>Please enter a source</translate>
+              </small>
+            </span>
+          </div>
         </div>
       </div>
-      <div class="d-flex flex-row justify-content-between">
-        <div class="mt-2  mr-2 w-50  text-left">
-          <small class="text-muted"> <translate>Object name</translate> </small>
-          <input
-            id="objbn"
-            type="text"
-            class="form-control"
-            placeholder=""
-            aria-label="objbn"
-            v-model="objbn"
-          />
-          <span class="text-left text-danger">
-            <small v-if="objbnError && !objbn">
-              <translate>Please enter an objectname</translate>
-            </small>
-          </span>
-        </div>
-        <div class="mt-2  ml-2 w-50  text-left">
-          <small class="text-muted">
-            <translate>National Object name</translate>
-          </small>
-          <input
-            id="nobjbn"
-            type="text"
-            class="form-control"
-            placeholder=""
-            aria-label="nobjbn"
-            v-model="nobjbn"
-          />
-          <span class="text-left text-danger">
-            <small v-if="nobjbnError && !nobjbn">
-              <translate>Please enter an objectname</translate>
-            </small>
-          </span>
-        </div>
-      </div>
-      <div class="d-flex flex-row justify-content-between">
-        <div class="mt-2 mr-2 w-50 text-left">
-          <small class="text-muted"> <translate>Date info</translate> </small>
-          <input
-            id="date_info"
-            type="date"
-            class="form-control"
-            placeholder="date_info"
-            aria-label="date_info"
-            v-model="date_info"
-          />
-          <span class="text-left text-danger">
-            <small v-if="date_infoError && !date_info">
-              <translate>Please enter a date</translate>
-            </small>
-          </span>
-        </div>
-        <div class="mt-2 ml-2 w-50 text-left">
-          <small class="text-muted"> <translate>Source</translate> </small>
-          <input
-            id="source"
-            type="text"
-            class="form-control"
-            placeholder="source"
-            aria-label="source"
-            v-model="source"
-          />
-          <span class="text-left text-danger">
-            <small v-if="sourceError && !source">
-              <translate>Please enter a source</translate>
-            </small>
-          </span>
-        </div>
+      <div class="text-right mt-2 mr-3 mb-3">
+        <button @click="edit = false" class="btn btn-warning mr-2">Back</button>
+        <button
+          @click="save"
+          type="submit"
+          class="shadow-sm btn btn-info submit-button"
+        >
+          <translate>Submit</translate>
+        </button>
       </div>
     </div>
-    <div class="text-right mt-2 mr-3 mb-3">
-      <button
-        @click="submit"
-        type="submit"
-        class="shadow-sm btn btn-info submit-button"
-      >
-        <translate>Submit</translate>
+    <div class="text-right mr-3">
+      <button v-if="!edit" @click="startEdit()" class="btn btn-info">
+        <translate>New stretch</translate>
       </button>
     </div>
   </div>
@@ -200,6 +233,8 @@
   name: "importstretches",
   data() {
     return {
+      stretches: [],
+      edit: false,
       id: "",
       funktion: "",
       startrhm: "",
@@ -222,7 +257,36 @@
       countryCodeError: false
     };
   },
+  mounted() {
+    this.edit = false;
+  },
   methods: {
+    clean() {
+      this.id = "";
+      this.funktion = "";
+      this.startrhm = "";
+      this.endrhm = "";
+      this.objbn = "";
+      this.nobjbn = "";
+      this.countryCode = "";
+      this.date_info = new Date().toISOString().split("T")[0];
+      this.source = "";
+      this.pipetteStart = false;
+      this.pipetteEnd = false;
+      this.idError = false;
+      this.funktionError = false;
+      this.startrhmError = false;
+      this.endrhmError = false;
+      this.objbnError = false;
+      this.nobjbnError = false;
+      this.date_infoError = false;
+      this.sourceError = false;
+      this.countryCodeError = false;
+    },
+    startEdit() {
+      this.clean();
+      this.edit = true;
+    },
     togglePipette(t) {
       if (t === "start") {
         this.pipetteStart = !this.pipetteStart;
@@ -251,8 +315,20 @@
         }
       });
     },
-    submit() {
+    save() {
       this.validate();
+      this.stretches.push({
+        id: this.id,
+        funktion: this.funktion,
+        startrhm: this.startrhm,
+        endrhm: this.endrhm,
+        objbn: this.objbn,
+        nobjbn: this.nobjbn,
+        countryCode: this.countryCode,
+        date_info: this.date_info,
+        source: this.source
+      });
+      this.edit = false;
       displayInfo({
         title: this.$gettext("Sections"),
         message: this.$gettext("Not implemented!")
--- a/client/src/components/Sidebar.vue	Thu Jan 17 16:41:10 2019 +0100
+++ b/client/src/components/Sidebar.vue	Thu Jan 17 17:29:39 2019 +0100
@@ -52,9 +52,7 @@
             fixed-width
             icon="road"
           ></font-awesome-icon>
-          <span class="fix-trans-space" v-translate
-            >Define sections and stretches</span
-          >
+          <span class="fix-trans-space" v-translate>Define stretches</span>
         </a>
       </div>
       <div v-if="isWaterwayAdmin">