torben/gelegeapp-ionic
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

added the menu controller

Browse Source
This commit is contained in:
Torben Indorf
2020-02-17 07:11:21 +01:00
parent 6fe11728eb
commit 39bbf9a3d7
9 changed files with 169 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.vue
+26 -1
View File
@@ -1,14 +1,35 @@
<template>
<div id="app">
<v-app>
<left-menu-component></left-menu-component>
<v-app id="content">
<ion-app>
<ion-vue-router/>
</ion-app>
</v-app>
<ion-menu-controller></ion-menu-controller>
</div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
@Component({
components: {
LeftMenuComponent: () => import(
/* webpackChunkName: "LeftMenuComponent" */
'@/components/LeftMenu.component.vue')
}
})
export default class App extends Vue {
}
</script>
<style lang="scss">
#app {
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
@@ -47,4 +68,8 @@
margin-left: 15px;
}
.app-content {
height: 100vh;
}
</style>
src/components/HelloWorld.vue
-103
View File
@@ -1,103 +0,0 @@
<template>
<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({})
export default class HelloWorld extends Vue {
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>
<style scoped>
</style>
src/components/LeftMenu.component.vue
+61
View File
@@ -0,0 +1,61 @@
<template>
<div>
<ion-menu side="start" content-id="content">
<ion-header>
<ion-toolbar color="primary">
<ion-title>Menü</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
<ion-list>
<ion-item v-for="menu in menuItems" v-bind:key="menu.title" @click="openMenuEntry(menu)">
<v-icon
class="black--text mr-2"
>{{ menu.icon }}
</v-icon>
<ion-label>{{ menu.title }}</ion-label>
</ion-item>
</ion-list>
</ion-content>
</ion-menu>
</div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { namespace } from 'vuex-class';
const GlobalStore = namespace('global');
@Component({})
export default class LeftMenuComponent extends Vue {
public menuItems: any[] = [];
@GlobalStore.Mutation('saveHeaderTitle')
private saveHeaderTitle!: (title: string) => void;
public created() {
this.menuItems = [{
title: 'Übersicht',
icon: 'mdi-map',
router: 'mapOverview'
}, {
title: 'Gelege hinzufügen',
icon: 'mdi-plus',
router: 'createDataSet'
}];
}
public openMenuEntry(menu: any) {
this.saveHeaderTitle(menu.title);
this.$router.push({ name: menu.router });
document.querySelector('ion-menu-controller')!.close('start');
}
};
</script>
<style scoped>
</style>
src/router/index.ts
+6
View File
@@ -4,6 +4,7 @@ import LoginView from "@/views/Login.view.vue";
import HomeView from "@/views/Home.view.vue";
import AreaSelectionView from "@/views/AreaSelection.view.vue";
import MapOverviewView from "@/views/MapOverview.view.vue";
import CreateDataSetView from '@/views/CreateDataSet.view.vue';
import AuthGuard from "@/helpers/AuthGuard";
import Router from 'vue-router';
@@ -43,6 +44,11 @@ export default new IonicVueRouter({
path: 'mapOverview',
name: 'mapOverview',
component: MapOverviewView
},
{
path: 'createDataSet',
name: 'createDataSet',
component: CreateDataSetView
}
]
},
src/store/global.store.ts
+5
View File
@@ -2,6 +2,7 @@ import { ActionTree, Module } from 'vuex';
const store = {
selectedArea: undefined,
headerTitle: undefined
};
const actions: ActionTree<any, any> = {
@@ -10,11 +11,15 @@ const actions: ActionTree<any, any> = {
const mutations = {
saveArea: (state: any, area: any) => {
state.selectedArea = area;
},
saveHeaderTitle: (state: any, title: string) => {
state.headerTitle = title;
}
};
const getters = {
selectedArea: (state: any) => state.selectedArea,
headerTitle: (state: any) => state.headerTitle
};
const globalStore: Module<any, any> = {
src/store/status.store.ts
-2
View File
@@ -26,8 +26,6 @@ const actions: ActionTree<any, any> = {
Promise<any> => {
const response = await statusRepository.getIcons(lastUpdate);
console.log(response);
commit('saveIcons', response);
return response;
src/views/CreateDataSet.view.vue
+18
View File
@@ -0,0 +1,18 @@
<template>
<div class="app-content">
</div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
@Component({})
export default class CreateDataSetView extends Vue {
};
</script>
<style lang="scss" scoped>
</style>
src/views/Home.view.vue
+27 -2
View File
@@ -1,18 +1,43 @@
<template>
<div>
<ion-vue-router/>
<ion-header>
<ion-toolbar color="primary">
<div class="d-flex">
<div class="header-item text-left">
<ion-button @click="openLeftMenu">Menü</ion-button>
</div>
<div class="header-item d-flex align-center justify-center">{{ headerTitle }}</div>
<div class="header-item"></div>
</div>
</ion-toolbar>
</ion-header>
<router-view/>
</div>
</template>
<script lang="ts">
import {Component, Vue} from "vue-property-decorator";
import { Component, Vue } from 'vue-property-decorator';
import { namespace } from 'vuex-class';
const GlobalStore = namespace('global');
@Component
export default class HomeView extends Vue {
@GlobalStore.Getter('headerTitle')
public headerTitle!: string;
public openLeftMenu() {
document.querySelector('ion-menu-controller')!.open('start');
}
}
</script>
<style scoped>
.header-item {
flex-basis: 100%;
}
</style>
src/views/MapOverview.view.vue
+21 -20
View File
@@ -1,19 +1,16 @@
<template>
<ion-page>
<ion-header>
<ion-toolbar color="primary">
<ion-title>Home</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
<div class="app-content">
<ion-content>
<div class="mapContainer" ref="mapContainer">
<div
style="width:100%; height:100%;"
id="map"
name="map"
>
</div>
</div>
</ion-content>
</ion-page>
</div>
</template>
@@ -51,18 +48,22 @@
public map?: Map | null;
public async created() {
this.map = null;
// Small timeout before hot reloading the map. Needed for development!
setTimeout(this.initMap, 1000);
}
public async initMap() {
const allIcons = await this.getAllIcons();
const allStates = await this.getAllStates();
const allNests = await this.getAllNests({ areaId: this.selectedArea.id! });
const response = await this.getAreaGeoJson({ areaId: this.selectedArea.id! });
this.map = new Map('map').setView(
[53.15190499781906, 8.827171325683596],
14
);
const osm = new TileLayer(
'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
{
@@ -79,13 +80,6 @@
this.map.addLayer(osm);
const ccIcon = icon({
iconUrl: 'cc-logo-black.png',
iconSize: [35, 35],
iconAnchor: [17, 17],
popupAnchor: [0, -28]
});
const geo = geoJSON(response, {
// Style
style: (feature: any) => {
@@ -120,15 +114,22 @@
const iconData = icon({
iconUrl: base64icon,
iconAnchor: [19, 19],
iconSize: [25, 25],
iconSize: [25, 25]
});
new Marker([nest.history[0].location.latitude,
nest.history[0].location.longitude], { icon: iconData }).addTo(this.map!);
});
}
public destroyed() {
this.map!.off();
this.map!.remove();
}
}
</script>
<style scoped>
<style lang="scss" scoped>
.mapContainer {
height: 100%;
}
</style>