4575edfcb603c56d915e48829cR59">59 
+  }
60 
+
61 
+  showMap() {
62 
+    let location = new google.maps.LatLng(13.7643439, 100.6899729);
63 
+    let options = {
64 
+      center: location,
65 
+      zoom: 15,
66 
+      disableDefaultUI: true
67 
+    }
68 
+    this.map = new google.maps.Map(this.mapRef.nativeElement, options);
69 
+    //this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);
70 
+  }
71 
+
72 
+}

+ 17 - 0
src/app/nearme/nearme-routing.module.ts
Wyświetl plik 

@@ -0,0 +1,17 @@
1 
+import { NgModule } from '@angular/core';
2 
+import { Routes, RouterModule } from '@angular/router';
3 
+
4 
+import { NearmePage } from './nearme.page';
5 
+
6 
+const routes: Routes = [
7 
+  {
8 
+    path: '',
9 
+    component: NearmePage
10 
+  }
11 
+];
12 
+
13 
+@NgModule({
14 
+  imports: [RouterModule.forChild(routes)],
15 
+  exports: [RouterModule],
16 
+})
17 
+export class NearmePageRoutingModule {}

+ 20 - 0
src/app/nearme/nearme.module.ts
Wyświetl plik 

@@ -0,0 +1,20 @@
1 
+import { NgModule } from '@angular/core';
2 
+import { CommonModule } from '@angular/common';
3 
+import { FormsModule } from '@angular/forms';
4 
+
5 
+import { IonicModule } from '@ionic/angular';
6 
+
7 
+import { NearmePageRoutingModule } from './nearme-routing.module';
8 
+
9 
+import { NearmePage } from './nearme.page';
10 
+
11 
+@NgModule({
12 
+  imports: [
13 
+    CommonModule,
14 
+    FormsModule,
15 
+    IonicModule,
16 
+    NearmePageRoutingModule
17 
+  ],
18 
+  declarations: [NearmePage]
19 
+})
20 
+export class NearmePageModule {}

+ 40 - 0
src/app/nearme/nearme.page.html
Wyświetl plik 

@@ -0,0 +1,40 @@
1 
+<ion-header>
2 
+  <ion-toolbar class="new-background-color">
3 
+    <ion-buttons slot="start" color="light">
4 
+      <ion-back-button></ion-back-button>
5 
+    </ion-buttons>
6 
+    <ion-title>Wellnewss Route</ion-title>
7 
+  </ion-toolbar>
8 
+</ion-header>
9 
+
10 
+<ion-content>
11 
+  <ion-grid>
12 
+    <ion-row>
13 
+      <ion-col>
14 
+        <div #nearmap id="nearmap"></div>
15 
+      </ion-col>
16 
+    </ion-row>
17 
+    <ion-row >
18 
+      <ion-col>
19 
+        <ion-card *ngFor="let nearm of placenear">
20 
+          <div *ngIf="nearm.better_featured_image != null">
21 
+            <img src="{{nearm.better_featured_image.source_url}}" alt="">
22 
+          </div>
23 
+          <div *ngIf="nearm.better_featured_image == null">
24 
+            <img src="/assets/images/temp.png" />
25 
+          </div>
26 
+          <ion-card-header>
27 
+            <a [routerLink]="['/tabs/place/', nearm.id]"><ion-card-title [innerHTML]="nearm.title.rendered"></ion-card-title>
28 
+            </a>
29 
+            <a [routerLink]="['/tabs/province/']">
30 
+              <span [innerHTML]="nearm._embedded['wp:term'][1][0].name"></span>
31 
+            </a> /
32 
+            <a [routerLink]="['/tabs/place/']">
33 
+              <span [innerHTML]="nearm._embedded['wp:term'][2][0].name"></span>
34 
+            </a>
35 
+          </ion-card-header>
36 
+        </ion-card>
37 
+      </ion-col>
38 
+    </ion-row>
39 
+  </ion-grid>
40 
+</ion-content>

+ 9 - 0
src/app/nearme/nearme.page.scss
Wyświetl plik 

@@ -0,0 +1,9 @@
1 
+ion-card-title {
2 
+    font-family: "IBM Plex Sans Thai", sans-serif !important;
3 
+    font-weight: 600;
4 
+    font-size: 20px;
5 
+  }
6 
+
7 
+  #nearmap {
8 
+    height: 300px;
9 
+}

+ 24 - 0
src/app/nearme/nearme.page.spec.ts
Wyświetl plik 

@@ -0,0 +1,24 @@
1 
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
2 
+import { IonicModule } from '@ionic/angular';
3 
+
4 
+import { NearmePage } from './nearme.page';
5 
+
6 
+describe('NearmePage', () => {
7 
+  let component: NearmePage;
8 
+  let fixture: ComponentFixture<NearmePage>;
9 
+
10 
+  beforeEach(waitForAsync(() => {
11 
+    TestBed.configureTestingModule({
12 
+      declarations: [ NearmePage ],
13 
+      imports: [IonicModule.forRoot()]
14 
+    }).compileComponents();
15 
+
16 
+    fixture = TestBed.createComponent(NearmePage);
17 
+    component = fixture.componentInstance;
18 
+    fixture.detectChanges();
19 
+  }));
20 
+
21 
+  it('should create', () => {
22 
+    expect(component).toBeTruthy();
23 
+  });
24 
+});

+ 45 - 0
src/app/nearme/nearme.page.ts
Wyświetl plik 

@@ -0,0 +1,45 @@
1 
+import { Component, OnInit, Input, ViewChild, ElementRef } from '@angular/core';
2 
+import { WpServiceService } from '../wp-service.service';
3 
+import { Geolocation } from '@ionic-native/geolocation/ngx';
4 
+import { NativeGeocoder, NativeGeocoderResult, NativeGeocoderOptions } from '@ionic-native/native-geocoder/ngx';
5 
+
6 
+declare var google: any;
7 
+
8 
+
9 
+@Component({
10 
+  selector: 'app-nearme',
11 
+  templateUrl: './nearme.page.html',
12 
+  styleUrls: ['./nearme.page.scss'],
13 
+})
14 
+export class NearmePage implements OnInit {
15 
+
16 
+  @ViewChild('nearmap', { static: true }) mapRef: ElementRef;
17 
+
18 
+  nearmap: any;
19 
+  placenear: any = [];
20 
+
21 
+  constructor(private wpservice: WpServiceService, private geolocation: Geolocation) { }
22 
+
23 
+  ngOnInit() {
24 
+
25 
+    this.showMap();
26 
+    //console.log(this.mapRef.nativeElement);
27 
+    this.wpservice.getNear().subscribe((placeneardata) => {
28 
+      this.placenear = placeneardata;
29 
+      console.log('load Near Place');
30 
+      console.log(placeneardata);
31 
+    });
32 
+
33 
+  }
34 
+
35 
+  showMap() {
36 
+    let location = new google.maps.LatLng(13.7643439, 100.6899729);
37 
+    let options = {
38 
+      center: location,
39 
+      zoom: 15,
40 
+      disableDefaultUI: true
41 
+    }
42 
+    this.nearmap = new google.maps.Map(this.mapRef.nativeElement, options);
43 
+  }
44 
+
45 
+}

+ 10 - 0
src/app/place/place.page.html
Wyświetl plik 

@@ -1,5 +1,8 @@
1 1 
 <ion-header>
2 2 
   <ion-toolbar class="new-background-color">
3 
+    <ion-buttons slot="start" color="light">
4 
+      <ion-back-button></ion-back-button>
5 
+    </ion-buttons>
3 6 
     <ion-title>Wellness Route</ion-title>
4 7 
   </ion-toolbar>
5 8 
 </ion-header>
 
@@ -13,6 +16,13 @@
13 16 
           <div class="txt-place-title">Place Category Name</div>
14 17 
         </ion-col>
15 18 
       </ion-row>
19 
+      <ion-row>
20 
+        <ion-col>
21 
+          <ion-toolbar class="search">
22 
+            <ion-searchbar placeholder="ค้นหา"></ion-searchbar>
23 
+          </ion-toolbar>
24 
+        </ion-col>
25 
+      </ion-row>
16 26 
       <ion-card *ngFor="let pcl of placecatlist">
17 27 
         <div *ngIf="$any(pcl).better_featured_image != null">
18 28 
           <img src="{{$any(pcl).better_featured_image.source_url}}" alt="">

+ 22 - 7
src/app/placedetail/placedetail.page.html
Wyświetl plik 

@@ -8,7 +8,7 @@
8 8 
 </ion-header>
9 9
10 10 
 <ion-content>
11 
-  <div *ngIf="placelist?.better_featured_image != null" >
11 
+  <div *ngIf="placelist?.better_featured_image != null">
12 12 
     <img src="{{placelist?.better_featured_image.source_url}}">
13 13 
   </div>
14 14 
   <div *ngIf="placelist?.better_featured_image == null" class="asd">
 
@@ -25,21 +25,24 @@
25 25 
         <div>{{ placelist?.acf.openclose }}</div>
26 26 
       </ion-col>
27 27 
       <ion-col size="12">
28 
+        {{ placelist?.acf.gmap.address }}
29 
+        {{ placelist?.acf.gmap.lat }}
30 
+        {{ placelist?.acf.gmap.lng }}
28 31 
         <img src="/assets/images/map-temp.jpg" alt="">
29 32 
       </ion-col>
30 
-      <ion-col size="12">
33 
+      <ion-col size="12">
31 34 
         <ion-row>
32 35 
           <ion-col size="4" class="ion-text-center">
33 36 
             <!-- <div [innerHTML]="placelist?.acf.phone"></div>                         -->
34 
-            <fa-icon [icon]="['fas', 'phone-square-alt']" size="2x"></fa-icon>
37 
+            <fa-icon [icon]="['fas', 'phone-square-alt']" size="2x"></fa-icon>
35 38 
           </ion-col>
36 39 
           <ion-col size="4" class="ion-text-center">
37 40 
             <!-- <div [innerHTML]="placelist?.acf.phone"></div>                         -->
38 
-            <fa-icon [icon]="['fas', 'map-marked-alt']" size="2x"></fa-icon>
41 
+            <fa-icon [icon]="['fas', 'map-marked-alt']" size="2x"></fa-icon>
39 42 
           </ion-col>
40 43 
           <ion-col size="4" class="ion-text-center">
41 44 
             <!-- <div [innerHTML]="placelist?.acf.email"></div>             -->
42 
-            <fa-icon [icon]="['fas', 'envelope']" size="2x"></fa-icon>
45 
+            <fa-icon [icon]="['fas', 'envelope']" size="2x"></fa-icon>
43 46 
           </ion-col>
44 47 
         </ion-row>
45 48 
       </ion-col>
 
@@ -48,10 +51,22 @@
48 51 
         <div [innerHTML]="placelist?.acf.address"></div>
49 52 
       </ion-col>
50 53 
       <ion-col size="12">
51 
-        <div class="txt-lead">รายละเอียด</div>
52 
-        <div [innerHTML]="placelist?.content.rendered"></div>
54 
+        <!-- <div class="txt-lead">รายละเอียด</div>
55 
+        <div [innerHTML]="placelist?.content.rendered"></div> -->
53 56 
         <!-- <div>{{placelist?.content.rendered}}</div> -->
57 
+        <!-- <ion-button (click)="loadMap()" shape="round" color="dark">
58 
+          <ion-icon slot="start" name="locate"></ion-icon>
59 
+          Where I Am
60 
+        </ion-button> -->
61 
+        <div class="map-wrapper">
62 
+          <div id="map_center">
63 
+            <img src="assets/icon/location-marker.png" />
64 
+          </div>
65 
+          <div #map id="map"></div>
66 
+        </div>
67 
+
54 68 
       </ion-col>
55 69 
     </ion-row>
70 
+
56 71 
   </ion-grid>
57 72 
 </ion-content>

+ 52 - 22
src/app/placedetail/placedetail.page.scss
Wyświetl plik 

@@ -11,35 +11,65 @@
11 11 
 //     position: absolute;
12 12 
 // }
13 13
14 
-
15 
-.bg{
14 
+.bg {
15 
+  position: absolute;
16 
+  left: 0px;
17 
+  top: 0px;
18 
+  width: 100vw;
19 
+  height: 60vh;
20 
+  .holidaycard {
16 21 
     position: absolute;
17 22 
     left: 0px;
18 
-    top: 0px;
19 
-    width: 100vw;
20 
-    height: 60vh;
21 
-    .holidaycard {
22 
-        position: absolute;
23 
-        left: 0px;
24 
-        bottom: 0px;
25 
-        min-height: 60%;
26 
-        width: 100%;
27 
-        padding: 10px;
28 
-        border-radius: 25px ;
29 
-        background: white;
30 
-        --background: white;
31 
-    }
23 
+    bottom: 0px;
24 
+    min-height: 60%;
25 
+    width: 100%;
26 
+    padding: 10px;
27 
+    border-radius: 25px;
28 
+    background: white;
29 
+    --background: white;
30 
+  }
32 31 
 }
33 32
34 33 
 .asd {
34 
+}
35 
+
36 
+.asd .country {
37 
+  position: absolute;
38 
+  top: 50px;
39 
+  width: 140px;
40 
+  padding-left: 10px !important;
41 
+  padding-right: 10px !important;
42 
+  color: white;
43 
+}
44 
+
45 
+#map_canvas {
46 
+  width: 90%;
47 
+  height: 80%;
48 
+  border: 1px solid red;
49 
+}
50 
+
51 
+#address {
52 
+  padding: 10px;
53 
+  font-size: 18px;
54 
+  font-weight: bold;
55 
+}
35 56
57 
+#map {
58 
+  width: 100%;
59 
+  height: 20vh;
36 60 
 }
37 61
38 
-.asd .country{
62 
+.map-wrapper {
63 
+  position: relative;
64 
+
65 
+  #map_center {
39 66 
     position: absolute;
40 
-    top: 50px;
41 
-    width: 140px;
42 
-    padding-left: 10px !important;
43 
-    padding-right: 10px !important;
44 
-    color: white;
67 
+    z-index: 99;
68 
+    height: 40px;
69 
+    width: 40px;
70 
+    top: 50%;
71 
+    left: 50%;
72 
+    margin-left: -21px;
73 
+    margin-top: -41px;
74 
+  }
45 75 
 }

+ 105 - 7
src/app/placedetail/placedetail.page.ts
Wyświetl plik 

@@ -1,7 +1,12 @@
1 
-import { Component, OnInit, Input } from '@angular/core';
1 
+import { Component, OnInit, Input, ViewChild, ElementRef } from '@angular/core';
2 2 
 import { ActivatedRoute, Router } from '@angular/router';
3 3 
 import { WpServiceService } from '../wp-service.service';
4 4
5 
+import { Geolocation } from '@ionic-native/geolocation/ngx';
6 
+import { NativeGeocoder, NativeGeocoderResult, NativeGeocoderOptions } from '@ionic-native/native-geocoder/ngx';
7 
+
8 
+declare var google;
9 
+
5 10 
 @Component({
6 11 
   selector: 'app-placedetail',
7 12 
   templateUrl: './placedetail.page.html',
 
@@ -12,7 +17,16 @@ export class PlacedetailPage implements OnInit {
12 17 
   data: any;
13 18 
   placelist: any;
14 19
15 
-  constructor(private wpservice: WpServiceService, private route: ActivatedRoute, private router: Router) { }
20 
+  @ViewChild('map', { static: false }) mapElement: ElementRef;
21 
+  map: any;
22 
+  address: string;
23 
+  latitude: number;
24 
+  longitude: number;
25 
+  latdynamic: any;
26 
+  londynamic: any;
27 
+
28 
+
29 
+  constructor(private wpservice: WpServiceService, private route: ActivatedRoute, private router: Router, private geolocation: Geolocation, private nativeGeocoder: NativeGeocoder) { }
16 30 
   @Input() id: string;
17 31 
   showDiss = false;
18 32 
 
@@ -21,23 +35,107 @@ export class PlacedetailPage implements OnInit {
21 35 
     if (this.id != undefined) {
22 36 
       this.showDiss = true;
23 37 
     }
38 
+    this.loadMap();
24 39 
     // console.log("showDiss ", this.showDiss);
25 40 
     // let id = this.route.snapshot.paramMap.get('id') || this.id;
26 41 
     // console.log("fetching ...");
27 42 
     // this.wpservice.getPlaceDetail(id).subscribe(data => {
28 
-      // let post = JSON.parse(data.data);
29 
-      // console.log(" get data ", post);
30 
-      // post['media_url'] = post['_embedded']['wp:featuredmedia'][0]['media_details'].sizes['medium'].source_url;
31 
-      // this.data = post;
43 
+    // let post = JSON.parse(data.data);
44 
+    // console.log(" get data ", post);
45 
+    // post['media_url'] = post['_embedded']['wp:featuredmedia'][0]['media_details'].sizes['medium'].source_url;
46 
+    // this.data = post;
32 47 
     let id = this.route.snapshot.paramMap.get('id') || this.id;
33 48 
     console.log("fetching ...");
34 49 
     this.wpservice.getPlaceDetail(id).subscribe((data) => {
35 
-      this.placelist = data;
50 
+      this.placelist = data;
51 
+      this.latdynamic = data['acf']['gmap']['lat'];
52 
+      this.londynamic = data['acf']['gmap']['lng'];
36 53 
       console.log("load Place Detail ...");
54 
+      console.log(this.latdynamic);
55 
+      console.log("load Lati ...");
56 
+      console.log(this.londynamic);
57 
+      console.log("load Lon ...");
37 58 
       console.log(data);
38 59 
     }, error => {
39 60 
       console.log("errror ", error);
40 61 
     });
41 62 
   }
42 63
64 
+  loadMap() {
65 
+    this.geolocation.getCurrentPosition().then((resp) => {
66 
+
67 
+      this.latitude = resp.coords.latitude;
68 
+      this.longitude = resp.coords.longitude;
69 
+      // this.latdynamic = resp.coords.latitude;
70 
+      // this.londynamic = resp.coords.longitude;
71 
+
72 
+      let latLng = new google.maps.LatLng(resp.coords.latitude, resp.coords.longitude);
73 
+      let mapOptions = {
74 
+        center: latLng,
75 
+        zoom: 15,
76 
+        mapTypeId: google.maps.MapTypeId.ROADMAP
77 
+      }
78 
+
79 
+      this.getAddressFromCoords(resp.coords.latitude, resp.coords.longitude);
80 
+
81 
+      this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);
82 
+
83 
+      this.map.addListener('dragend', () => {
84 
+
85 
+        this.latitude = this.map.center.lat();
86 
+        this.longitude = this.map.center.lng();
87 
+
88 
+        this.getAddressFromCoords(this.map.center.lat(), this.map.center.lng())
89 
+      });
90 
+
91 
+    }).catch((error) => {
92 
+      console.log('Error getting location', error);
93 
+    });
94 
+  }
95 
+
96 
+  getAddressFromCoords(lattitude, longitude) {
97 
+    console.log("getAddressFromCoords " + lattitude + " " + longitude);
98 
+    let options: NativeGeocoderOptions = {
99 
+      useLocale: true,
100 
+      maxResults: 5
101 
+    };
102 
+
103 
+    this.nativeGeocoder.reverseGeocode(lattitude, longitude, options)
104 
+      .then((result: NativeGeocoderResult[]) => {
105 
+        this.address = "";
106 
+        let responseAddress = [];
107 
+        for (let [key, value] of Object.entries(result[0])) {
108 
+          if (value.length > 0)
109 
+            responseAddress.push(value);
110 
+
111 
+        }
112 
+        responseAddress.reverse();
113 
+        for (let value of responseAddress) {
114 
+          this.address += value + ", ";
115 
+        }
116 
+        this.address = this.address.slice(0, -2);
117 
+      })
118 
+      .catch((error: any) => {
119 
+        this.address = "Address Not Available!";
120 
+      });
121 
+
122 
+  }
123 
+
124 
+  // getAddressFromCoords2(lattitude, longitude) {
125 
+  //   console.log("getAddressFromCoords2 " + lattitude + " " + longitude);
126 
+  //   let options: NativeGeocoderOptions = {
127 
+  //     useLocale: true,
128 
+  //     maxResults: 5
129 
+  //   };
130 
+  // }
131 
+
132 
+  // getGeoencoder(latitude, longitude) {
133 
+  //   this.nativeGeocoder.reverseGeocode(latitude, longitude, this.geoencoderOptions)
134 
+  //     .then((result: NativeGeocoderResult[]) => {
135 
+  //       this.address = this.generateAddress(result[0]);
136 
+  //     })
137 
+  //     .catch((error: any) => {
138 
+  //       alert('Error getting location' + JSON.stringify(error));
139 
+  //     });
140 
+  // }
43 141 
 }

+ 8 - 1
src/app/province/province.page.html
Wyświetl plik 

@@ -16,6 +16,13 @@
16 16 
           <div class="txt-place-title">Province Name</div>
17 17 
         </ion-col>
18 18 
       </ion-row>
19 
+      <ion-row>
20 
+        <ion-col>
21 
+          <ion-toolbar class="search">
22 
+            <ion-searchbar placeholder="ค้นหา"></ion-searchbar>
23 
+          </ion-toolbar>
24 
+        </ion-col>
25 
+      </ion-row>
19 26 
       <ion-card *ngFor="let provlist of provicelist">
20 27 
         <div *ngIf="$any(provlist).better_featured_image != null">
21 28 
           <img src="{{$any(provlist).better_featured_image.source_url}}" alt="">
 
@@ -24,7 +31,7 @@
24 31 
           <img src="/assets/images/temp.png" />
25 32 
         </div>
26 33 
         <ion-card-header>
27 
-          <a [routerLink]="['/tabs/place/', pldata.id]"><ion-card-title [innerHTML]="provlist.title.rendered"></ion-card-title></a>
34 
+          <a [routerLink]="['/tabs/place/', provlist.id]"><ion-card-title [innerHTML]="provlist.title.rendered"></ion-card-title></a>
28 35 
         </ion-card-header>
29 36 
       </ion-card>
30 37 
     </ion-grid>

+ 1 - 18
src/app/province/province.page.scss
Wyświetl plik 

@@ -1,21 +1,4 @@
1 
-// .bg {
2 
-//   position: absolute;
3 
-//   left: 0px;
4 
-//   top: 0px;
5 
-//   width: 100vw;
6 
-//   height: 100vh;
7 
-//   .holidaycard {
8 
-//     position: absolute;
9 
-//     left: 0px;
10 
-//     bottom: 0px;
11 
-//     min-height: 60%;
12 
-//     width: 100%;
13 
-//     padding: 10px;
14 
-//     border-radius: 25px;
15 
-//     background: white;
16 
-//     --background: white;
17 
-//   }
18 
-// }
1 
+
19 2 
 .holidaycard {
20 3 
   position: absolute;
21 4 
   left: 0px;

+ 8 - 0
src/app/tabs/tabs-routing.module.ts
Wyświetl plik 

@@ -61,6 +61,14 @@ const routes: Routes = [
61 61 
         loadChildren: () => import('../province/province.module').then(m => m.ProvincePageModule)
62 62 
       },
63 63 
       {
64 
+        path: 'gmap',
65 
+        loadChildren: () => import('../gmap/gmap.module').then(m => m.GmapPageModule)
66 
+      },
67 
+      {
68 
+        path: 'nearme',
69 
+        loadChildren: () => import('../nearme/nearme.module').then( m => m.NearmePageModule)
70 
+      },
71 
+      {
64 72 
         path: '',
65 73 
         redirectTo: '/tabs/home',
66 74 
         pathMatch: 'full'

+ 5 - 3
src/app/tabs/tabs.page copy.html
Wyświetl plik 

@@ -1,8 +1,10 @@
1 1 
 <ion-tabs>
2 2 
   <ion-fab vertical="bottom" horizontal="center" slot="fixed">
3 
-    <ion-fab-button>
4 
-      <ion-icon name="add-outline"></ion-icon>
5 
-    </ion-fab-button>
3 
+
4 
+      <ion-fab-button [routerLink]="['/tabs/nearme/']">
5 
+        <ion-icon name="add-outline"></ion-icon>
6 
+      </ion-fab-button>
7 
+
6 8 
   </ion-fab>
7 9
8 10 
   <ion-tab-bar slot="bottom">

+ 5 - 6
src/app/tabs/tabs.page.html
Wyświetl plik 

@@ -1,17 +1,16 @@
1 1 
 <ion-tabs>
2 
-  <!-- <ion-fab vertical="bottom" horizontal="center" slot="fixed">
3 
-    <ion-fab-button>
4 
-      <ion-icon name="add-outline"></ion-icon>
2 
+  <ion-fab vertical="bottom" horizontal="center" translucent="true">
3 
+    <ion-fab-button routerLink="nearme" routerDirection="forward">
4 
+    <ion-icon name="navigate"></ion-icon>
5 5 
     </ion-fab-button>
6 
-  </ion-fab> -->
7 
-
6 
+  </ion-fab>
8 7 
   <ion-tab-bar slot="bottom">
9 8 
     <ion-tab-button tab="home">
10 9 
       <ion-icon name="home"></ion-icon>
11 10 
       <ion-label>หน้าแรก</ion-label>
12 11 
     </ion-tab-button>
13 12
14 
-    <ion-tab-button tab="tab2">
13 
+    <ion-tab-button tab="nearme">
15 14 
       <ion-icon name="location"></ion-icon>
16 15 
       <ion-label>ใกล้ฉัน</ion-label>
17 16 
     </ion-tab-button>

+ 7 - 0
src/app/wp-service.service.ts
Wyświetl plik 

@@ -22,6 +22,13 @@ export class WpServiceService {
22 22 
     );
23 23 
   }
24 24
25 
+  getNear() {
26 
+    return this.http.get(
27 
+      "/assets/json/place.json"
28 
+      // "http://tamtime.iamarray.xyz/wp-json/wp/v2/place?_embed"
29 
+    );
30 
+  }
31 
+
25 32 
   getPlaceDetail(id) {
26 33 
     return this.http.get(
27 34 
       "http://tamtime.iamarray.xyz/wp-json/wp/v2/place/"+id+"/?_embed"

BIN
src/assets/icon/location-marker.png
Wyświetl plik


+ 5 - 1
src/global.scss
Wyświetl plik 

@@ -164,4 +164,8 @@ a {
164 164
165 165 
 // ion-content {
166 166 
 //   --background: url(/assets/images/wnr-bg.jpg) no-repeat center/cover fixed;
167 
-// }
167 
+// }
168 
+.ios ion-fab-button {
169 
+  position:absolute;
170 
+  bottom: 25px;
171 
+}

+ 2 - 0
src/index.html
Wyświetl plik 

@@ -17,6 +17,8 @@
17 17 
   <!-- add to homescreen for ios -->
18 18 
   <meta name="apple-mobile-web-app-capable" content="yes" />
19 19 
   <meta name="apple-mobile-web-app-status-bar-style" content="black" />
20 
+
21 
+  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDHSbJHYItlRqJeZ737ju4weBHlarJIPGE"></script>
20 22 
 </head>
21 23
22 24 
 <body>

tmt/tiger_frontend - Gogs: Simplico Git Service
Home Esplora Aiuto
Accedi
tmt
/
tiger_frontend
Segui 4
Vota 0
Forka 0
Codice Problemi 0 Pull Requests 0 Commit 5 Rilasci 0 Wiki

Nessuna descrizione

Albero (Tree): 13a4160349
Rami (Branch) Tag
tiger_frontend
/
node_modules
/
postcss
/
lib
/
result.d.ts

result.d.ts 4.3KB
Cronologia Originale

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207 
  1. import {
    2. 

  2.   ProcessOptions,
    3. 

  3.   Plugin,
    4. 

  4.   SourceMap,
    5. 

  5.   TransformCallback,
    6. 

  6.   Root,
    7. 

  7.   Document,
    8. 

  8.   Node,
    9. 

  9.   Warning,
    10. 

  10.   WarningOptions
    11. 

  11. } from './postcss.js'
    12. 

  12. import Processor from './processor.js'
    13. 

  13. 

  14. declare namespace Result {
    15. 

  15.   export interface Message {
    16. 

  16.     /**
    17. 

  17.      * Message type.
    18. 

  18.      */
    19. 

  19.     type: string
    20. 

  20. 

  21.     /**
    22. 

  22.      * Source PostCSS plugin name.
    23. 

  23.      */
    24. 

  24.     plugin?: string
    25. 

  25. 

  26.     [others: string]: any
    27. 

  27.   }
    28. 

  28. 

  29.   export interface ResultOptions extends ProcessOptions {
    30. 

  30.     /**
    31. 

  31.      * The CSS node that was the source of the warning.
    32. 

  32.      */
    33. 

  33.     node?: Node
    34. 

  34. 

  35.     /**
    36. 

  36.      * Name of plugin that created this warning. `Result#warn` will fill it
    37. 

  37.      * automatically with `Plugin#postcssPlugin` value.
    38. 

  38.      */
    39. 

  39.     plugin?: string
    40. 

  40.   }
    41. 

  41. 

  42. 

  43.   // eslint-disable-next-line @typescript-eslint/no-use-before-define
    44. 

  44.   export { Result_ as default }
    45. 

  45. }
    46. 

  46. 

  47. /**
    48. 

  48.  * Provides the result of the PostCSS transformations.
    49. 

  49.  *
    50. 

  50.  * A Result instance is returned by `LazyResult#then`
    51. 

  51.  * or `Root#toResult` methods.
    52. 

  52.  *
    53. 

  53.  * ```js
    54. 

  54.  * postcss([autoprefixer]).process(css).then(result => {
    55. 

  55.  *  console.log(result.css)
    56. 

  56.  * })
    57. 

  57.  * ```
    58. 

  58.  *
    59. 

  59.  * ```js
    60. 

  60.  * const result2 = postcss.parse(css).toResult()
    61. 

  61.  * ```
    62. 

  62.  */
    63. 

  63. declare class Result_ {
    64. 

  64.   /**
    65. 

  65.    * The Processor instance used for this transformation.
    66. 

  66.    *
    67. 

  67.    * ```js
    68. 

  68.    * for (const plugin of result.processor.plugins) {
    69. 

  69.    *   if (plugin.postcssPlugin === 'postcss-bad') {
    70. 

  70.    *     throw 'postcss-good is incompatible with postcss-bad'
    71. 

  71.    *   }
    72. 

  72.    * })
    73. 

  73.    * ```
    74. 

  74.    */
    75. 

  75.   processor: Processor
    76. 

  76. 

  77.   /**
    78. 

  78.    * Contains messages from plugins (e.g., warnings or custom messages).
    79. 

  79.    * Each message should have type and plugin properties.
    80. 

  80.    *
    81. 

  81.    * ```js
    82. 

  82.    * AtRule: {
    83. 

  83.    *   import: (atRule, { result }) {
    84. 

  84.    *     const importedFile = parseImport(atRule)
    85. 

  85.    *     result.messages.push({
    86. 

  86.    *       type: 'dependency',
    87. 

  87.    *       plugin: 'postcss-import',
    88. 

  88.    *       file: importedFile,
    89. 

  89.    *       parent: result.opts.from
    90. 

  90.    *     })
    91. 

  91.    *   }
    92. 

  92.    * }
    93. 

  93.    * ```
    94. 

  94.    */
    95. 

  95.   messages: Result.Message[]
    96. 

  96. 

  97.   /**
    98. 

  98.    * Root node after all transformations.
    99. 

  99.    *
    100. 

  100.    * ```js
    101. 

  101.    * root.toResult().root === root
    102. 

  102.    * ```
    103. 

  103.    */
    104. 

  104.   root: Root | Document
    105. 

  105. 

  106.   /**
    107. 

  107.    * Options from the `Processor#process` or `Root#toResult` call
    108. 

  108.    * that produced this Result instance.]
    109. 

  109.    *
    110. 

  110.    * ```js
    111. 

  111.    * root.toResult(opts).opts === opts
    112. 

  112.    * ```
    113. 

  113.    */
    114. 

  114.   opts: Result.ResultOptions
    115. 

  115. 

  116.   /**
    117. 

  117.    * A CSS string representing of `Result#root`.
    118. 

  118.    *
    119. 

  119.    * ```js
    120. 

  120.    * postcss.parse('a{}').toResult().css //=> "a{}"
    121. 

  121.    * ```
    122. 

  122.    */
    123. 

  123.   css: string
    124. 

  124. 

  125.   /**
    126. 

  126.    * An instance of `SourceMapGenerator` class from the `source-map` library,
    127. 

  127.    * representing changes to the `Result#root` instance.
    128. 

  128.    *
    129. 

  129.    * ```js
    130. 

  130.    * result.map.toJSON() //=> { version: 3, file: 'a.css', … }
    131. 

  131.    * ```
    132. 

  132.    *
    133. 

  133.    * ```js
    134. 

  134.    * if (result.map) {
    135. 

  135.    *   fs.writeFileSync(result.opts.to + '.map', result.map.toString())
    136. 

  136.    * }
    137. 

  137.    * ```
    138. 

  138.    */
    139. 

  139.   map: SourceMap
    140. 

  140. 

  141.   /**
    142. 

  142.    * Last runned PostCSS plugin.
    143. 

  143.    */
    144. 

  144.   lastPlugin: Plugin | TransformCallback
    145. 

  145. 

  146.   /**
    147. 

  147.    * @param processor Processor used for this transformation.
    148. 

  148.    * @param root      Root node after all transformations.
    149. 

  149.    * @param opts      Options from the `Processor#process` or `Root#toResult`.
    150. 

  150.    */
    151. 

  151.   constructor(processor: Processor, root: Root | Document, opts: Result.ResultOptions)
    152. 

  152. 

  153.   /**
    154. 

  154.    * An alias for the `Result#css` property.
    155. 

  155.    * Use it with syntaxes that generate non-CSS output.
    156. 

  156.    *
    157. 

  157.    * ```js
    158. 

  158.    * result.css === result.content
    159. 

  159.    * ```
    160. 

  160.    */
    161. 

  161.   get content(): string
    162. 

  162. 

  163.   /**
    164. 

  164.    * Returns for `Result#css` content.
    165. 

  165.    *
    166. 

  166.    * ```js
    167. 

  167.    * result + '' === result.css
    168. 

  168.    * ```
    169. 

  169.    *
    170. 

  170.    * @return String representing of `Result#root`.
    171. 

  171.    */
    172. 

  172.   toString(): string
    173. 

  173. 

  174.   /**
    175. 

  175.    * Creates an instance of `Warning` and adds it to `Result#messages`.
    176. 

  176.    *
    177. 

  177.    * ```js
    178. 

  178.    * if (decl.important) {
    179. 

  179.    *   result.warn('Avoid !important', { node: decl, word: '!important' })
    180. 

  180.    * }
    181. 

  181.    * ```
    182. 

  182.    *
    183. 

  183.    * @param text Warning message.
    184. 

  184.    * @param opts Warning options.
    185. 

  185.    * @return Created warning.
    186. 

  186.    */
    187. 

  187.   warn(message: string, options?: WarningOptions): Warning
    188. 

  188. 

  189.   /**
    190. 

  190.    * Returns warnings from plugins. Filters `Warning` instances
    191. 

  191.    * from `Result#messages`.
    192. 

  192.    *
    193. 

  193.    * ```js
    194. 

  194.    * result.warnings().forEach(warn => {
    195. 

  195.    *   console.warn(warn.toString())
    196. 

  196.    * })
    197. 

  197.    * ```
    198. 

  198.    *
    199. 

  199.    * @return Warnings from plugins.
    200. 

  200.    */
    201. 

  201.   warnings(): Warning[]
    202. 

  202. }
    203. 

  203. 

  204. declare class Result extends Result_ {}
    205. 

  205. 

  206. export = Result
    207. 

  207.