pre> 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
查看文件 

@@ -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
查看文件 

@@ -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
查看文件 

@@ -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
查看文件 

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

+ 7 - 0
src/app/place/place.page.html
查看文件 

@@ -16,6 +16,13 @@
16 16 
           <div class="txt-place-title">Place Category 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 pcl of placecatlist">
20 27 
         <div *ngIf="$any(pcl).better_featured_image != null">
21 28 
           <img src="{{$any(pcl).better_featured_image.source_url}}" alt="">

+ 8 - 1
src/app/province/province.page.html
查看文件 

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

+ 8 - 0
src/app/tabs/tabs-routing.module.ts
查看文件 

@@ -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
查看文件 

@@ -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
查看文件 

@@ -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
查看文件 

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

+ 5 - 1
src/global.scss
查看文件 

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

tum/recycle_server - Gogs: Simplico Git Service
Domů Procházet Nápověda
Přihlásit se
tum
/
recycle_server
Sledovat 1
Oblíbit 0
Rozštěpit 0
Zdrojový kód Úkoly 0 Požadavky na natažení 0 Revize 1 Vydání 0 Wiki

Bez popisu

Strom: 058f31828c
Větve Značky
recycle_server
/
data
/
base
/
1
/
13335

13335 0B
Historie Surový