Mercurial > gemma

--- a/client/src/components/Identify.vue	Thu Feb 21 14:57:04 2019 +0100
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,127 +0,0 @@
-<template>
-  <div
-    :class="[
-      'box ui-element rounded bg-white text-nowrap',
-      { expanded: showIdentify }
-    ]"
-  >
-    <div style="width: 18rem">
-      <h6 class="mb-0 py-2 px-3 border-bottom d-flex align-items-center">
-        <font-awesome-icon icon="info" class="mr-2"></font-awesome-icon>
-        <translate>Identified</translate>
-        <font-awesome-icon
-          icon="times"
-          class="ml-auto text-muted"
-          @click="$store.commit('application/showIdentify', false)"
-        ></font-awesome-icon>
-      </h6>
-      <div class="d-flex flex-column features p-3 flex-grow-1 text-left">
-        <div v-if="currentMeasurement">
-          <b>
-            {{ currentMeasurement.quantity }} ({{
-              currentMeasurement.unitSymbol
-            }}):
-          </b>
-          <br />
-          <small>{{ currentMeasurement.value }}</small>
-        </div>
-        <div v-for="(feature, i) of identifiedFeatures" :key="feature.getId()">
-          <div v-if="feature.getId()" :class="{ 'mt-2': i }">
-            <strong>
-              {{
-                feature.getId().replace(/[.][^.]*$/, "")
-                /* cut away everything from the last . to the end */
-              }}:
-            </strong>
-            <small
-              v-for="(value, key) in prepareProperties(feature)"
-              :key="key"
-            >
-              <div v-if="value">{{ key }}:{{ value }}</div>
-            </small>
-          </div>
-        </div>
-        <div
-          v-if="!currentMeasurement && !identifiedFeatures.length"
-          class="text-muted small text-center my-auto"
-        >
-          <translate>No features identified.</translate>
-        </div>
-      </div>
-      <div class="versioninfo border-top p-3 text-left">
-        <span v-translate="{ license: 'AGPL-3.0-or-later' }">
-          This app uses <i>gemma</i>, which is Free Software under <br />
-          %{ license } without warranty, see docs for details.
-        </span>
-        <br />
-        <a href="https://hg.intevation.de/gemma/file/tip">
-          <translate>source-code</translate>
-        </a>
-        {{ versionStr }} <br />© via donau. &#x24D4; Intevation. <br />
-        <span v-translate="{ name: 'OpenSteetMap' }"
-          >Some data ©
-          <a href="https://www.openstreetmap.org/copyright">%{ name }</a>
-          contributors.
-        </span>
-        <br />
-        <span v-translate="{ geoLicense: 'CC-BY-4.0' }">
-          Uses
-          <a href="https://download.geonames.org/export/dump/readme.txt"
-            >GeoNames</a
-          >
-          under %{ geoLicense }.
-        </span>
-        <translate>Generated PDFs use font: </translate>
-        <a href="http://libertine-fonts.org">LinBiolinum</a>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.features {
-  max-height: 19rem;
-  overflow-y: auto;
-}
-
-.versioninfo {
-  font-size: 60%;
-  white-space: normal;
-}
-</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, 2019 by via donau
- *   – Österreichische Wasserstraßen-Gesellschaft mbH
- * Software engineering by Intevation GmbH
- *
- * Author(s):
- * Thomas Junk <thomas.junk@intevation.de>
- * Bernhard E. Reiter <bernhard.reiter@intevation.de>
- * Markus Kottländer <markus.kottlaender@intevation.de>
- */
-import { mapState, mapGetters } from "vuex";
-
-export default {
-  name: "identify",
-  computed: {
-    ...mapGetters("application", ["versionStr"]),
-    ...mapState("application", ["showIdentify"]),
-    ...mapState("map", ["identifiedFeatures", "currentMeasurement"])
-  },
-  methods: {
-    prepareProperties(feature) {
-      // return dict object with propertyname:plainvalue prepared for display
-      var properties = feature.getProperties();
-      delete properties[feature.getGeometryName()];
-      return properties;
-    }
-  }
-};
-</script>
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/components/identify/Identify.vue	Thu Feb 21 15:22:10 2019 +0100
@@ -0,0 +1,162 @@
+<template>
+  <div
+    :class="[
+      'box ui-element rounded bg-white text-nowrap',
+      { expanded: showIdentify }
+    ]"
+  >
+    <div style="width: 18rem">
+      <h6 class="mb-0 py-2 px-3 border-bottom d-flex align-items-center">
+        <font-awesome-icon icon="info" class="mr-2"></font-awesome-icon>
+        <translate>Identified</translate>
+        <font-awesome-icon
+          icon="times"
+          class="ml-auto text-muted"
+          @click="$store.commit('application/showIdentify', false)"
+        ></font-awesome-icon>
+      </h6>
+      <div class="features flex-grow-1 text-left">
+        <div v-if="currentMeasurement">
+          <small class="d-block bg-dark text-light text-center px-2 py-1">
+            {{ $gettext("Measurement") }}
+          </small>
+          <small class="d-flex justify-content-between px-2">
+            <b>
+              {{ currentMeasurement.quantity }}
+            </b>
+            {{ currentMeasurement.value }} {{ currentMeasurement.unitSymbol }}
+          </small>
+        </div>
+        <div
+          v-for="feature of filteredIdentifiedFeatures"
+          :key="feature.getId()"
+        >
+          <small class="d-block bg-dark text-light text-center px-2 py-1">
+            {{ $gettext(featureLabel(feature)) }}
+          </small>
+          <small
+            v-for="prop in featureProps(feature)"
+            :key="prop.key"
+            v-if="prop.val"
+            class="d-flex justify-content-between px-2"
+          >
+            <b>{{ $gettext(prop.key) }}</b>
+            {{ prop.val }}
+          </small>
+        </div>
+        <div
+          v-if="!currentMeasurement && !filteredIdentifiedFeatures.length"
+          class="text-muted small text-center my-auto py-3 px-2"
+        >
+          <translate>No features identified.</translate>
+        </div>
+      </div>
+      <div class="versioninfo border-top p-3 text-left">
+        <span v-translate="{ license: 'AGPL-3.0-or-later' }">
+          This app uses <i>gemma</i>, which is Free Software under <br />
+          %{ license } without warranty, see docs for details.
+        </span>
+        <br />
+        <a href="https://hg.intevation.de/gemma/file/tip">
+          <translate>source-code</translate>
+        </a>
+        {{ versionStr }} <br />© via donau. &#x24D4; Intevation. <br />
+        <span v-translate="{ name: 'OpenSteetMap' }"
+          >Some data ©
+          <a href="https://www.openstreetmap.org/copyright">%{ name }</a>
+          contributors.
+        </span>
+        <br />
+        <span v-translate="{ geoLicense: 'CC-BY-4.0' }">
+          Uses
+          <a href="https://download.geonames.org/export/dump/readme.txt"
+            >GeoNames</a
+          >
+          under %{ geoLicense }.
+        </span>
+        <translate>Generated PDFs use font: </translate>
+        <a href="http://libertine-fonts.org">LinBiolinum</a>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.features {
+  max-height: 19rem;
+  overflow-y: auto;
+  small:nth-child(even) {
+    background: #f2f2f2;
+  }
+}
+
+.versioninfo {
+  font-size: 60%;
+  white-space: normal;
+}
+</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, 2019 by via donau
+ *   – Österreichische Wasserstraßen-Gesellschaft mbH
+ * Software engineering by Intevation GmbH
+ *
+ * Author(s):
+ * Thomas Junk <thomas.junk@intevation.de>
+ * Bernhard E. Reiter <bernhard.reiter@intevation.de>
+ * Markus Kottländer <markus.kottlaender@intevation.de>
+ */
+import { mapState, mapGetters } from "vuex";
+import { formatter } from "./formatter";
+
+export default {
+  name: "identify",
+  computed: {
+    ...mapGetters("application", ["versionStr"]),
+    ...mapState("application", ["showIdentify"]),
+    ...mapGetters("map", ["filteredIdentifiedFeatures"]),
+    ...mapState("map", ["currentMeasurement"])
+  },
+  methods: {
+    featureId(feature) {
+      // cut away everything from the last . to the end
+      return feature.getId().replace(/[.][^.]*$/, "");
+    },
+    featureLabel(feature) {
+      if (formatter.hasOwnProperty(this.featureId(feature))) {
+        return formatter[this.featureId(feature)].label;
+      }
+      return this.featureId(feature);
+    },
+    featureProps(feature) {
+      // create array with {key, val} objects
+      let propsArray = [];
+      Object.keys(feature.getProperties()).forEach(key => {
+        // avoid cyclic object value
+        if (key !== feature.getGeometryName())
+          propsArray.push({ key, val: feature.getProperties()[key] });
+      });
+
+      // change labels and remove unneeded properties
+      if (formatter.hasOwnProperty(this.featureId(feature))) {
+        propsArray = propsArray
+          .map(formatter[this.featureId(feature)].props)
+          .filter(p => p); // remove empty entries
+      }
+
+      // remove underscores in labels that where not previously changed already
+      propsArray = propsArray.map(prop => {
+        return { key: prop.key.replace(/_/g, " "), val: prop.val };
+      });
+
+      return propsArray;
+    }
+  }
+};
+</script>
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/components/identify/formatter.js	Thu Feb 21 15:22:10 2019 +0100
@@ -0,0 +1,67 @@
+const formatter = {
+  bottlenecks_geoserver: {
+    label: "Bottleneck",
+    props: p => {
+      if (p.key === "bottleneck_id") p.key = "ID";
+      if (p.key === "objnam") p.key = "Name";
+      if (p.key === "responsible_country") p.key = "Responsible Country";
+      if (p.key === "date_info") {
+        p.val = new Date(p.val).toLocaleString();
+      }
+
+      // remove certain props
+      let propsToRemove = ["nobjnm"];
+      if (propsToRemove.indexOf(p.key) !== -1) return null;
+
+      return p;
+    }
+  },
+  fairway_dimensions: {
+    label: "Fairway Dimensions",
+    props: p => {
+      if (p.key === "staging_done") p.val = p.val ? "yes" : "no";
+      if (p.key === "date_info") {
+        p.val = new Date(p.val).toLocaleString();
+      }
+
+      // remove certain props
+      let propsToRemove = [];
+      if (propsToRemove.indexOf(p.key) !== -1) return null;
+
+      return p;
+    }
+  },
+  waterway_area: {
+    label: "Waterway Area",
+    props: p => p
+  },
+  distance_marks_geoserver: {
+    label: "Distance Mark",
+    props: p => p
+  },
+  waterway_axis: {
+    label: "Waterway Axis",
+    props: p => {
+      if (p.key === "objnam") p.key = "Name";
+      return p;
+    }
+  },
+  waterway_profiles: {
+    label: "Waterway Profile",
+    props: p => {
+      if (p.key === "staging_done") p.val = p.val ? "yes" : "no";
+      if (p.key === "date_info") {
+        p.key = "Date info";
+        p.val = new Date(p.val).toLocaleString();
+      }
+
+      // remove certain props
+      let propsToRemove = [];
+      if (propsToRemove.indexOf(p.key) !== -1) return null;
+
+      return p;
+    }
+  }
+};
+
+export { formatter };