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

README.md

@@ -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`

package-lock.json

@@ -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",

package.json

@@ -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"

src/app/tab1/tab1.page.html

@@ -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>

src/app/tab2/tab2.page.html

@@ -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>

src/app/tab2/tab2.page.ts

@@ -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);
+  }
 }

src/app/tabs/tabs.page.html

@@ -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>
 

src/index.html

@@ -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" />