--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/components/gauge/Gauges.vue	Tue Mar 12 13:23:20 2019 +0100
@@ -0,0 +1,169 @@
+<template>
+  <div
+    :class="[
+      'box ui-element rounded bg-white text-nowrap',
+      { expanded: showGauges }
+    ]"
+  >
+    <div style="width: 18rem">
+      <UIBoxHeader
+        icon="ruler-vertical"
+        title="Gauges"
+        :closeCallback="close"
+      />
+      <div class="box-body">
+        <div
+          class="loading d-flex justify-content-center align-items-center"
+          v-if="loading"
+        >
+          <font-awesome-icon icon="spinner" spin />
+        </div>
+        <select
+          @change="moveToGauge"
+          v-model="selectedGauge"
+          class="form-control font-weight-bold"
+        >
+          <option :value="null">
+            <translate>Select Gauge</translate>
+          </option>
+          <option
+            v-for="g in gauges"
+            :key="g.properties.objname"
+            :value="g.properties.objname"
+          >
+            {{ g.properties.objname }}
+          </option>
+        </select>
+        <div v-if="selectedGauge" class="mt-2">
+          <hr class="mb-1" />
+          <small class="text-muted">
+            <translate>Time period</translate>:
+          </small>
+          <select
+            v-model="waterlevelsTimePeriod"
+            class="form-control form-control-sm mb-2"
+          >
+            <option value="day">last day</option>
+            <option value="week">last week</option>
+            <option value="month">last month</option>
+            <option value="year">last year</option>
+          </select>
+          <button
+            @click="showWaterlevelDiagram()"
+            class="btn btn-sm btn-info d-block w-100"
+          >
+            <translate>Show Waterlevels</translate>
+          </button>
+          <hr />
+          <button class="btn btn-sm btn-info d-block w-100 mt-2" disabled>
+            <translate>Show Hydrological Conditions</translate>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.loading {
+  background: rgba(255, 255, 255, 0.9);
+  position: absolute;
+  z-index: 99;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+</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.kottlaender@intevation.de>
+ */
+import { mapState } from "vuex";
+
+export default {
+  data() {
+    return {
+      loading: false,
+      waterlevelsTimePeriod: "day"
+    };
+  },
+  computed: {
+    ...mapState("application", ["showGauges"]),
+    ...mapState("gauges", ["gauges", "selectedGauge"]),
+    selectedGauge: {
+      get() {
+        return this.$store.state.gauges.selectedGauge;
+      },
+      set(name) {
+        this.$store.dispatch("gauges/selectedGauge", name);
+      }
+    }
+  },
+  methods: {
+    close() {
+      this.$store.commit("application/showGauges", false);
+    },
+    moveToGauge() {
+      let gauge = this.gauges.find(
+        g => g.properties.objname === this.selectedGauge
+      );
+      if (!gauge) return;
+      this.$store.commit("map/moveToExtent", {
+        feature: gauge,
+        zoom: 17,
+        preventZoomOut: true
+      });
+    },
+    showWaterlevelDiagram() {
+      let gauge = this.gauges.find(
+        g => g.properties.objname === this.selectedGauge
+      );
+
+      // configure splitscreen
+      let splitscreenConf = {
+        id: "gauge-waterlevel",
+        component: "waterlevel",
+        title: this.selectedGauge,
+        icon: "ruler-vertical",
+        closeCallback: () => {
+          this.$store.commit("gauges/selectedGauge", null);
+          this.$store.commit("gauges/waterlevels", []);
+        },
+        expandCallback: () => {
+          this.$store.commit("map/moveMap", {
+            coordinates: gauge.geometry.coordinates,
+            zoom: 17,
+            preventZoomOut: true
+          });
+        }
+      };
+      this.$store.commit("application/addSplitscreen", splitscreenConf);
+      this.$store.commit("application/activeSplitscreenId", splitscreenConf.id);
+      this.$store.commit("application/splitscreenLoading", true);
+      this.loading = true;
+      this.$store.commit("application/showSplitscreen", true);
+      this.$store
+        .dispatch("gauges/loadWaterlevels", this.waterlevelsTimePeriod)
+        .then(() => {
+          this.$store.commit("application/splitscreenLoading", false);
+          this.loading = false;
+        });
+    }
+  },
+  mounted() {
+    this.$store.dispatch("gauges/loadGauges");
+  }
+};
+</script>

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/components/toolbar/Gauges.vue	Tue Mar 12 13:23:20 2019 +0100
@@ -0,0 +1,34 @@
+<template>
+  <div
+    @click="$store.commit('application/showGauges', !showGauges)"
+    class="toolbar-button"
+  >
+    <font-awesome-icon
+      icon="ruler-vertical"
+      :class="{ 'text-info': showGauges }"
+    ></font-awesome-icon>
+  </div>
+</template>
+
+<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.kottlaender@intevation.de>
+ */
+import { mapState } from "vuex";
+
+export default {
+  computed: {
+    ...mapState("application", ["showGauges"])
+  }
+};
+</script>