From 903909e6f910cf976d6be4c9f776cbb2dea0930c Mon Sep 17 00:00:00 2001
From: Christian Mayer <chris@meggsimum.de>
Date: Wed, 27 Jun 2018 14:58:57 +0200
Subject: [PATCH 1/2] Add ZoomToMaxExtentButton component

---
 src/WguApp.vue                                |  9 ++++-
 .../maxextentbutton/ZoomToMaxExtentButton.vue | 40 +++++++++++++++++++
 2 files changed, 48 insertions(+), 1 deletion(-)
 create mode 100644 src/components/maxextentbutton/ZoomToMaxExtentButton.vue

diff --git a/src/WguApp.vue b/src/WguApp.vue
index d98198c8..8c6b048b 100644
--- a/src/WguApp.vue
+++ b/src/WguApp.vue
@@ -5,6 +5,11 @@
 
         <v-toolbar-items slot="wgu-tb-buttons" class="">
 
+            <wgu-zoomtomaxextent-button
+              icon="zoom_out_map"
+              text=""
+            />
+
             <wgu-toggle-layerlist-button
               icon="layers"
               text=""
@@ -55,6 +60,7 @@ import LayerListToggleButton from './components/layerlist/ToggleButton'
 import HelpWinToggleButton from './components/helpwin/ToggleButton'
 import MeasureToolToggleButton from './components/measuretool/ToggleButton'
 import InfoClickButton from './components/infoclick/ToggleButton'
+import ZoomToMaxExtentButton from './components/maxextentbutton/ZoomToMaxExtentButton'
 
 export default {
   name: 'app',
@@ -68,7 +74,8 @@ export default {
     'wgu-toggle-layerlist-button': LayerListToggleButton,
     'wgu-toggle-helpwin-button': HelpWinToggleButton,
     'wgu-toggle-measuretool-button': MeasureToolToggleButton,
-    'wgu-toggle-infoclick-button': InfoClickButton
+    'wgu-toggle-infoclick-button': InfoClickButton,
+    'wgu-zoomtomaxextent-button': ZoomToMaxExtentButton
   },
   data () {
     return {
diff --git a/src/components/maxextentbutton/ZoomToMaxExtentButton.vue b/src/components/maxextentbutton/ZoomToMaxExtentButton.vue
new file mode 100644
index 00000000..6ec86f98
--- /dev/null
+++ b/src/components/maxextentbutton/ZoomToMaxExtentButton.vue
@@ -0,0 +1,40 @@
+<template>
+
+  <div class="">
+
+    <v-btn icon @click="onClick">
+      <v-icon medium>{{icon}}</v-icon>
+      {{text}}
+    </v-btn>
+
+  </div>
+
+</template>
+
+<script>
+
+import { Mapable } from '../../mixins/Mapable';
+
+export default {
+  name: 'wgu-zoomtomaxextent-button',
+  mixins: [Mapable],
+  props: {
+    icon: {type: String, required: false},
+    text: {type: String, required: false}
+  },
+  methods: {
+    onClick () {
+      // derive correct initial zoom and center
+      const initialCenter = this.$appConfig.mapCenter;
+      const initalZoom = this.$appConfig.mapZoom
+      this.map.getView().setCenter(initialCenter);
+      this.map.getView().setZoom(initalZoom);
+    }
+  }
+}
+
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style>
+</style>

From fadbf7774cae95bc2d99a836ee76247b7d110872 Mon Sep 17 00:00:00 2001
From: Christian Mayer <chris@meggsimum.de>
Date: Wed, 27 Jun 2018 15:18:35 +0200
Subject: [PATCH 2/2] Add unit tests for ZoomToMaxExtentButton

---
 .../ZoomToMaxExtentButton.spec.js             | 36 +++++++++++++++++++
 1 file changed, 36 insertions(+)
 create mode 100644 test/unit/specs/maxextentbutton/ZoomToMaxExtentButton.spec.js

diff --git a/test/unit/specs/maxextentbutton/ZoomToMaxExtentButton.spec.js b/test/unit/specs/maxextentbutton/ZoomToMaxExtentButton.spec.js
new file mode 100644
index 00000000..279eb2e6
--- /dev/null
+++ b/test/unit/specs/maxextentbutton/ZoomToMaxExtentButton.spec.js
@@ -0,0 +1,36 @@
+import Vue from 'vue'
+import ZoomToMaxExtentButton from '@/components/maxextentbutton/ZoomToMaxExtentButton'
+import OlMap from 'ol/map';
+import OlView from 'ol/view';
+
+describe('maxextentbutton/ZoomToMaxExtentButton.vue', () => {
+  // Check methods
+  it('has a method onClick', () => {
+    const Constructor = Vue.extend(ZoomToMaxExtentButton);
+    const ztmeb = new Constructor({
+    }).$mount();
+    expect(typeof ztmeb.onClick).to.equal('function');
+  });
+
+  it('onClick sets correct center and zoom', () => {
+    const Constructor = Vue.extend(ZoomToMaxExtentButton);
+    const ztmeb = new Constructor({
+    }).$mount();
+
+    ztmeb.$appConfig = {
+      mapCenter: [0, 0],
+      mapZoom: 0
+    };
+    ztmeb.map = new OlMap({
+      view: new OlView({
+        center: [1, 1],
+        zoom: 1
+      })
+    });
+
+    ztmeb.onClick();
+    expect(ztmeb.map.getView().getCenter()[0]).to.equal(0);
+    expect(ztmeb.map.getView().getCenter()[1]).to.equal(0);
+    expect(ztmeb.map.getView().getZoom()).to.equal(0);
+  });
+});