Merge branch 'master' of ssh://lab.theresno.cloud:1251/hackathon-fr-20/plana

master
Felix Pankratz 5 years ago
commit ba4dde0bea

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

@ -19,4 +19,4 @@ Members:
Verwendete Bibliotheken:
-Darstellung der Karte: OSM Leaflet ([https://leafletjs.com/](https://leafletjs.com/))
-Darstellung der Karte: OSM Leaflet ([https://www.javascripttuts.com/using-leaflet-open-street-map-in-an-ionic-application-in-one-go/](https://www.javascripttuts.com/using-leaflet-open-street-map-in-an-ionic-application-in-one-go/)), Installation mit Befehl: `npm install leaflet`

5
package-lock.json generated

@ -7378,6 +7378,11 @@
"invert-kv": "^2.0.0"
}
},
"leaflet": {
"version": "1.6.0",
"resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.6.0.tgz",
"integrity": "sha512-CPkhyqWUKZKFJ6K8umN5/D2wrJ2+/8UIpXppY7QDnUZW5bZL5+SEI2J7GBpwh4LIupOKqbNSQXgqmrEJopHVNQ=="
},
"less": {
"version": "3.11.1",
"resolved": "https://registry.npmjs.org/less/-/less-3.11.1.tgz",

@ -24,6 +24,7 @@
"@ionic-native/splash-screen": "^5.0.0",
"@ionic-native/status-bar": "^5.0.0",
"@ionic/angular": "^5.0.0",
"leaflet": "^1.6.0",
"rxjs": "~6.5.1",
"tslib": "^1.10.0",
"zone.js": "~0.10.2"

@ -1,17 +1,74 @@
<ion-header [translucent]="true">
<ion-toolbar>
<ion-title>
plAN präventive und lebenskompetenzfördernde Angebote
</ion-title>
<img
src="https://www.breisgau-hochschwarzwald.de/pb/site/Breisgau-Hochschwarzwald/get/params_E491248136/282741/plAn%20Logo.JPG"
/>
</ion-toolbar>
</ion-header>
<ion-content [fullscreen]="true">
<ion-header collapse="condense">
<ion-toolbar>
<ion-title size="large">plAN präventive und lebenskompetenzfördernde Angebote</ion-title>
</ion-toolbar>
</ion-header>
<app-explore-container name="Suche durchführen"></app-explore-container>
<ion-searchbar placeholder="Suche"></ion-searchbar>
<ion-list>
<ion-item>
<ion-label>Kategorie</ion-label>
<ion-select
placeholder="Bitte auswählen"
cancelText="Abbrechen"
okText="Okay"
>
<ion-select-option value="a">Elternbildung</ion-select-option>
<ion-select-option value="b">Inklusion</ion-select-option>
<ion-select-option value="c">Sucht</ion-select-option>
</ion-select>
</ion-item>
<ion-item>
<ion-label>Zielgruppe</ion-label>
<ion-select
placeholder="Bitte auswählen"
cancelText="Abbrechen"
okText="Okay"
>
<ion-select-option value="a">allgemeine Bevölkerung</ion-select-option>
<ion-select-option value="b">Betriebe</ion-select-option>
<ion-select-option value="c">Eltern</ion-select-option>
<ion-select-option value="d">Gemeinden</ion-select-option>
</ion-select>
</ion-item>
<ion-item>
<ion-label>Altersgruppe</ion-label>
<ion-select
multiple="true"
placeholder="Bitte auswählen"
cancelText="Abbrechen"
okText="Okay"
>
<ion-select-option value="a"
>Schwangerschaft und Geburt</ion-select-option
>
<ion-select-option value="b">0 - 3 Jahre</ion-select-option>
<ion-select-option value="c">3 - 6 Jahre</ion-select-option>
<ion-select-option value="d">6 - 10 Jahre</ion-select-option>
</ion-select>
</ion-item>
<ion-item>
<ion-label>Region</ion-label>
<ion-select
multiple="true"
placeholder="Bitte auswählen"
cancelText="Abbrechen"
okText="Okay"
>
<ion-select-option value="a"
>Batzenberg Schönberg Hexental</ion-select-option
>
<ion-select-option value="b">Dreisamtal, Gundelfingen-Glottertal</ion-select-option>
<ion-select-option value="c">Hochschwarzwald</ion-select-option>
<ion-select-option value="d">Stadt Freiburg</ion-select-option>
</ion-select>
</ion-item>
<ion-button expand="block">Suche</ion-button>
</ion-list>
</ion-content>

@ -12,6 +12,7 @@
<ion-title size="large">Präventions-Angebote in der Nähe</ion-title>
</ion-toolbar>
</ion-header>
<app-explore-container name="Präventions-Angebote in der Nähe"></app-explore-container>
<ion-content>
<div id="map" style="height: 100%"></div>
</ion-content>
</ion-content>

@ -1,12 +1,28 @@
import { Component } from '@angular/core';
import { Platform } from "@ionic/angular";
import { Map, tileLayer, marker, icon } from "leaflet";
import { Component } from "@angular/core";
@Component({
selector: 'app-tab2',
templateUrl: 'tab2.page.html',
styleUrls: ['tab2.page.scss']
selector: "app-tab2",
templateUrl: "tab2.page.html",
styleUrls: ["tab2.page.scss"],
})
export class Tab2Page {
constructor(public plt: Platform) {}
ngAfterViewInit() {
this.plt.ready().then(() => {
this.initMap();
});
}
constructor() {}
initMap() {
const map = new Map("map").setView([47.986756, 7.842344], 23);
tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
attribution:
'&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
}).addTo(map);
}
}

@ -12,8 +12,8 @@
</ion-tab-button>
<ion-tab-button tab="tab3">
<ion-icon name="chatbubbles-outline"></ion-icon>
<ion-label>Chat</ion-label>
<ion-icon name="mic-outline"></ion-icon>
<ion-label>VoiceBot</ion-label>
</ion-tab-button>
</ion-tab-bar>

@ -3,7 +3,7 @@
<head>
<meta charset="utf-8" />
<title>Ionic App</title>
<title>PlAnA</title>
<base href="/" />
@ -13,6 +13,7 @@
<meta name="msapplication-tap-highlight" content="no" />
<link rel="icon" type="image/png" href="assets/icon/favicon.png" />
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css" />
<!-- add to homescreen for ios -->
<meta name="apple-mobile-web-app-capable" content="yes" />

Loading…
Cancel
Save