initial commit

src/App.vue

@@ -1,16 +1,14 @@
 <template>
   <div id="app">
-    <div id="nav">
-      <router-link to="/">Home</router-link> |
-      <router-link to="/about">About</router-link>
-    </div>
-    <router-view/>
+    <ion-app>
+      <ion-vue-router />
+    </ion-app>
   </div>
 </template>
 
 <style>
 #app {
-  font-family: 'Avenir', Helvetica, Arial, sans-serif;
+  font-family: "Avenir", Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;

src/components/HelloWorld.vue

@@ -1,61 +1,103 @@
 <template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript" target="_blank" rel="noopener">typescript</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
+  <div>
+    <ion-page>
+      <ion-header>
+        <ion-toolbar color="primary">
+          <ion-title>Home</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content padding>
+        <div
+          style="width:100%; height:100%;"
+          id="map"
+          name="map"
+        >
+        </div>
+      </ion-content>
+    </ion-page>
   </div>
 </template>
 
 <script lang="ts">
 import { Component, Prop, Vue } from 'vue-property-decorator';
+import { Map, tileLayer, marker, geoJSON, TileLayer, icon } from 'leaflet';
+import axios from 'axios';
 
-@Component
+@Component({})
 export default class HelloWorld extends Vue {
-  @Prop() private msg!: string;
+  public map?: Map;
+
+  public created() {
+    setTimeout(() => {
+      axios
+        .get('http://localhost:1337/area/json')
+        .then((response: any) => {
+          this.map = new Map('map').setView(
+            [53.15190499781906, 8.827171325683596],
+            14
+          );
+
+          const osm = new TileLayer(
+            'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
+            {
+              minZoom: 0,
+              maxZoom: 20,
+              attribution:
+                'Map data &copy; <a href="https://openstreetmap.org">OpenStreetMap</a> contributors'
+            }
+          );
+
+          this.map.on('click', (e: any) => {
+            console.log('Lat, Lon : ' + e.latlng.lat + ', ' + e.latlng.lng);
+          });
+
+          this.map.addLayer(osm);
+
+          var ccIcon = icon({
+            iconUrl: 'cc-logo-black.png',
+            iconSize: [35, 35],
+            iconAnchor: [17, 17],
+            popupAnchor: [0, -28]
+          });
+
+          const geo = geoJSON(response.data, {
+            // Marker Icon
+            pointToLayer: (feature, latlng) => {
+              return marker(latlng, { icon: ccIcon });
+            },
+            // Style
+            style: feature => {
+              if (feature!.properties.Color) {
+                return {
+                  fillColor: `#${feature!.properties.Color}`,
+                  color: `#${feature!.properties.Color}`,
+                  opacity: 1,
+                  fillOpacity: 0.8,
+                  width: 1
+                };
+              } else {
+                return { color: '#808080', width: 1 };
+              }
+            },
+            // Popup
+            onEachFeature: function(feature, layer) {
+              layer.bindPopup(
+                '<b>' +
+                  feature.properties.NUTZER +
+                  '</b><br />' +
+                  feature.properties.Flurstck
+              );
+            }
+          });
+          geo.addTo(this.map);
+        })
+        .catch((e: any) => {
+          console.log(e);
+        });
+    }, 2000);
+  }
 }
 </script>
 
-<!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
 </style>

src/main.ts

@@ -1,12 +1,18 @@
 import Vue from 'vue';
+import Ionic, { IonicVueRouter } from '@ionic/vue';
 import App from './App.vue';
 import router from './router';
 import store from './store';
+import '@ionic/core/css/core.css';
+import '@ionic/core/css/ionic.bundle.css';
+
+Vue.use(IonicVueRouter);
+Vue.use(Ionic);
 
 Vue.config.productionTip = false;
 
 new Vue({
   router,
   store,
-  render: h => h(App),
+  render: h => h(App)
 }).$mount('#app');

src/router/index.ts

@@ -1,14 +1,15 @@
 import Vue from 'vue';
 import VueRouter from 'vue-router';
-import Home from '../views/Home.vue';
+import HelloWorld from '../components/HelloWorld.vue';
+import { IonicVueRouter } from '@ionic/vue';
 
-Vue.use(VueRouter);
+Vue.use(IonicVueRouter);
 
 const routes = [
   {
     path: '/',
     name: 'home',
-    component: Home,
+    component: HelloWorld
   },
   {
     path: '/about',
@@ -16,12 +17,14 @@ const routes = [
     // route level code-splitting
     // this generates a separate chunk (about.[hash].js) for this route
     // which is lazy-loaded when the route is visited.
-    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue'),
-  },
+    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
+  }
 ];
 
-const router = new VueRouter({
-  routes,
+const router = new IonicVueRouter({
+  mode: 'history',
+  base: process.env.BASE_URL,
+  routes
 });
 
 export default router;

src/store/index.ts

@@ -4,12 +4,8 @@ import Vuex from 'vuex';
 Vue.use(Vuex);
 
 export default new Vuex.Store({
-  state: {
-  },
-  mutations: {
-  },
-  actions: {
-  },
-  modules: {
-  },
+  state: {},
+  mutations: {},
+  actions: {},
+  modules: {}
 });

src/views/About.vue

@@ -1,5 +1,5 @@
 <template>
   <div class="about">
-    <h1>This is an about page</h1>
+    <h1>This is an about</h1>
   </div>
 </template>

src/views/Home.vue

@@ -1,7 +1,5 @@
 <template>
   <div class="home">
-    <img alt="Vue logo" src="../assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
   </div>
 </template>
 
@@ -11,8 +9,6 @@ import HelloWorld from '@/components/HelloWorld.vue';
 
 export default {
   name: 'home',
-  components: {
-    HelloWorld,
-  },
+  components: {}
 };
 </script>