--- /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>