b90b3532c4R22">22 
+          <ion-item lines="full">
23 
+            <ion-label position="floating">อีเมล์</ion-label>
24 
+            <ion-input type="text" required="true" [(ngModel)]='registerForm.email' name='email' type='email'>
25 
+            </ion-input>
26 
+          </ion-item>
22 27
23 
-        <ion-item lines="full">
24 
-          <ion-label position="floating">รหัสผ่าน</ion-label>
25 
-          <ion-input type="password" required [(ngModel)]='registerForm.password' name='password'></ion-input>
26 
-        </ion-item>
27 
-      </form>
28 
-    </ion-col>
29 
-  </ion-row>
30 
-  <ion-row>
28 
+          <ion-item lines="full">
29 
+            <ion-label position="floating">รหัสผ่าน</ion-label>
30 
+            <ion-input type="password" required [(ngModel)]='registerForm.password' name='password'></ion-input>
31 
+          </ion-item>
32 
+        </form>
33 
+      </ion-col>
34 
+    </ion-row>
35 
+    <ion-row>
36 
+      <ion-col>
37 
+        <ion-button type="submit" color="success" expand="block" (click)="userLogin()">Login</ion-button>
38 
+      </ion-col>
39 
+    </ion-row>
40 
+    <ion-row>
41 
+      <ion-col class='ion-text-center'>
42 
+        <a (click)="openForgotPassword()" class="small-text">ลืมรหัส</a>
43 
+      </ion-col>
44 
+      <ion-col class='ion-text-center'>
45 
+        <a (click)="openRegister()" class="small-text">สม้ครใหม่</a>
46 
+      </ion-col>
47 
+    </ion-row>
48 
+    <ion-row>
49 
+      <ion-col>
50 
+        <span class="divider line one-line">หรือ</span>
51 
+      </ion-col>
52 
+    </ion-row>
53 
+    <ion-row>
54 
+      <ion-col>
55 
+        <ion-button class="log-fb-in-button" expand="block" (click)="doFbLogin()">
56 
+          Log in with Facebook
57 
+        </ion-button><br>
58 
+        <button (click)="appleSignIn()" block [hidden]="isAndroid">
59 
+          <img src="assets/images/appleid_button@2x.png">
60 
+        </button>
61 
+      </ion-col>
62 
+    </ion-row>
31 63 
     <ion-col>
32 
-      <ion-button type="submit" color="success" expand="block" (click)="userLogin()">Login</ion-button>
33 
-    </ion-col>
34 
-  </ion-row>
35 
-  <ion-row>
36 
-    <ion-col class='ion-text-center'>
37 
-      <a (click)="openForgotPassword()" class="small-text">ลืมรหัส</a>
64 
+      <a [routerLink]="['/tabs/forgot-password']">
65 
+        page ลืมรหัส
66 
+      </a>
38 67 
     </ion-col>
39 
-    <ion-col class='ion-text-center'>
40 
-      <a (click)="openRegister()" class="small-text">สม้ครใหม่</a>
68 
+    <ion-col>
69 
+      <a [routerLink]="['/tabs/register']">
70 
+        page register or signin
71 
+      </a>
41 72 
     </ion-col>
42 
-  </ion-row>
43 
-  <ion-row>
44 73 
     <ion-col>
45 
-      <span class="divider line one-line">หรือ</span>
74 
+      <a [routerLink]="['/tabs/reset-password']">
75 
+        page reset password
76 
+      </a>
46 77 
     </ion-col>
47 
-  </ion-row>
48 
-  <ion-row>
49 78 
     <ion-col>
50 
-      <ion-button class="log-fb-in-button" expand="block" (click)="doFbLogin()">
51 
-        Log in with Facebook
52 
-      </ion-button><br>
53 
-      <button (click)="appleSignIn()" block [hidden]="isAndroid">
54 
-        <img src="assets/images/appleid_button@2x.png">
55 
-      </button>
79 
+      <a [routerLink]="['/tabs/profile']">
80 
+        page profile
81 
+      </a>
56 82 
     </ion-col>
57 
-  </ion-row>
58 
-  <ion-col>
59 
-    <a [routerLink]="['/tabs/forgot-password']">
60 
-      page ลืมรหัส
61 
-    </a>
62 
-  </ion-col>
63 
-  <ion-col>
64 
-    <a [routerLink]="['/tabs/register']">
65 
-      page register or signin
66 
-    </a>
67 
-  </ion-col>
68 
-  <ion-col>
69 
-    <a [routerLink]="['/tabs/reset-password']">
70 
-      page reset password
71 
-    </a>
72 
-  </ion-col>
73 
-  <ion-col>
74 
-    <a [routerLink]="['/tabs/profile']">
75 
-      page profile
76 
-    </a>
77 
-  </ion-col>
78 
-</ion-content>
83 
+  </ion-grid>
84 
+</ion-content>

+ 22 - 23
src/app/login/login.page.scss
View File 

@@ -1,26 +1,25 @@
1 
-
2 1 
 .divider {
3 
-    display: flex;
4 
-
5 
-    &:before,
6 
-    &:after {
7 
-      content: "";
8 
-      flex: 1;
9 
-    }
2 
+  display: flex;
3 
+
4 
+  &:before,
5 
+  &:after {
6 
+    content: "";
7 
+    flex: 1;
8 
+  }
9 
+}
10 
+.line {
11 
+  align-items: center;
12 
+  margin: 1em -1em;
13 
+  color: #5f5e5e;
14 
+  &:before,
15 
+  &:after {
16 
+    height: 1px;
17 
+    margin: 0 1em;
10 18 
   }
11 
-  .line {
12 
-    align-items: center;
13 
-    margin: 1em -1em;
14 
-    color: #5f5e5e;
15 
-    &:before,
16 
-    &:after {
17 
-      height: 1px;
18 
-      margin: 0 1em;
19 
-    }
19 
+}
20 
+.one-line {
21 
+  &:before,
22 
+  &:after {
23 
+    background: #5f5e5e;
20 24 
   }
21 
-  .one-line {
22 
-    &:before,
23 
-    &:after {
24 
-      background: #5f5e5e;
25 
-    }
26 
-  }
25 
+}

+ 1 - 5
src/app/nearme/nearme.page.html
View File 

@@ -8,12 +8,8 @@
8 8 
 </ion-header>
9 9
10 10 
 <ion-content>
11 
+  <div #nearmap id="nearmap"></div>
11 12 
   <ion-grid>
12 
-    <ion-row>
13 
-      <ion-col>
14 
-        <div #nearmap id="nearmap"></div>
15 
-      </ion-col>
16 
-    </ion-row>
17 13 
     <ion-row >
18 14 
       <ion-col>
19 15 
         <ion-card *ngFor="let nearm of placenear">

+ 7 - 8
src/app/nearme/nearme.page.scss
View File 

@@ -1,9 +1,8 @@
1 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 
-}
2 
+  font-family: "IBM Plex Sans Thai", sans-serif !important;
3 
+  font-weight: 600;
4 
+  font-size: 20px;
5 
+}
6 
+#nearmap {
7 
+  height: 300px;
8 
+}

+ 1 - 3
src/app/place/place.page.html
View File 

@@ -8,8 +8,7 @@
8 8 
 </ion-header>
9 9
10 10 
 <ion-content>
11 
-  <img src="/assets/images/golf-bg.jpg">
12 
-  <div class="holidaycard">
11 
+  <img src="/assets/images/image-010.jpg">
13 12 
     <ion-grid>
14 13 
       <ion-row>
15 14 
         <ion-col size="12">
 
@@ -35,5 +34,4 @@
35 34 
         </ion-card-header>
36 35 
       </ion-card>
37 36 
     </ion-grid>
38 
-  </div>
39 37 
 </ion-content>

+ 12 - 12
src/app/place/place.page.scss
View File 

@@ -1,15 +1,15 @@
1 
-.holidaycard {
2 
-    position: absolute;
3 
-    left: 0px;
4 
-    // bottom: 0px;
5 
-    top:200px;
6 
-    min-height: 48%;
7 
-    width: 100%;
8 
-    padding: 5px;
9 
-    border-radius: 15px ;
10 
-    background: white;
11 
-    --background: white;
12 
-  }
1 
+// .holidaycard {
2 
+//     position: absolute;
3 
+//     left: 0px;
4 
+//     // bottom: 0px;
5 
+//     top:200px;
6 
+//     min-height: 48%;
7 
+//     width: 100%;
8 
+//     padding: 5px;
9 
+//     border-radius: 15px ;
10 
+//     background: white;
11 
+//     --background: white;
12 
+//   }
13 13
14 14 
   ion-card-title {
15 15 
     font-family: "IBM Plex Sans Thai", sans-serif !important;

+ 43 - 26
src/app/placedetail/placedetail.page.html
View File 

@@ -16,7 +16,7 @@
16 16 
   </div>
17 17 
   <!-- <img src="{{placelist?.better_featured_image.source_url}}"> -->
18 18 
   <ion-grid>
19 
-    <ion-row>
19 
+    <ion-row color="light">
20 20 
       <ion-col size="12">
21 21 
         <div class="txt-place-title">{{placelist?.title.rendered}}</div>
22 22 
       </ion-col>
 
@@ -25,16 +25,22 @@
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 }}
31 
-        <img src="/assets/images/map-temp.jpg" alt="">
28 
+        <!-- {{ placelist?.acf.gmap.address }} -->
29 
+        <!-- {{ placelist?.acf.gmap.lat }}
30 
+        {{ placelist?.acf.gmap.lng }} -->
31 
+        <div class="map-wrapper">
32 
+          <div id="map_center">
33 
+            <img src="/assets/icon/location-marker.png" />
34 
+          </div>
35 
+          <div #map id="map"></div>
36 
+        </div>
32 37 
       </ion-col>
33 38 
       <ion-col size="12">
34 39 
         <ion-row>
35 40 
           <ion-col size="4" class="ion-text-center">
36 
-            <!-- <div [innerHTML]="placelist?.acf.phone"></div>                         -->
37 
-            <fa-icon [icon]="['fas', 'phone-square-alt']" size="2x"></fa-icon>
41 
+            <div (click)="callNow('{{placelist?.acf.phone}}')">
42 
+              <fa-icon [icon]="['fas', 'phone-square-alt']" size="2x"></fa-icon>
43 
+            </div>
38 44 
           </ion-col>
39 45 
           <ion-col size="4" class="ion-text-center">
40 46 
             <!-- <div [innerHTML]="placelist?.acf.phone"></div>                         -->
 
@@ -42,29 +48,40 @@
42 48 
           </ion-col>
43 49 
           <ion-col size="4" class="ion-text-center">
44 50 
             <!-- <div [innerHTML]="placelist?.acf.email"></div>             -->
45 
-            <fa-icon [icon]="['fas', 'envelope']" size="2x"></fa-icon>
51 
+            <div (click)="email2Place('{{placelist?.acf.email}}')">
52 
+              <fa-icon [icon]="['fas', 'envelope']" size="2x"></fa-icon>
53 
+            </div>
46 54 
           </ion-col>
47 55 
         </ion-row>
48 56 
       </ion-col>
57 
+
49 58 
       <ion-col size="12">
50 
-        <div class="txt-lead">ที่อยู่</div>
51 
-        <div [innerHTML]="placelist?.acf.address"></div>
52 
-      </ion-col>
53 
-      <ion-col size="12">
54 
-        <!-- <div class="txt-lead">รายละเอียด</div>
55 
-        <div [innerHTML]="placelist?.content.rendered"></div> -->
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 
-
59 
+        <ion-segment (ionChange)="segmentChanged($event)" value="list1">
60 
+          <ion-segment-button value="list1">
61 
+            <ion-label>
62 
+              ที่อยู่
63 
+            </ion-label>
64 
+          </ion-segment-button>
65 
+          <ion-segment-button value="list2">
66 
+            <ion-label>
67 
+              รายละเอียด
68 
+            </ion-label>
69 
+          </ion-segment-button>
70 
+        </ion-segment>
71 
+
72 
+        <ion-list *ngIf="segment === 'list1'">
73 
+          <ion-col size="12">
74 
+            <!-- <div class="txt-lead">ที่อยู่</div> -->
75 
+            <div [innerHTML]="placelist?.acf.address"></div>
76 
+          </ion-col>
77 
+        </ion-list>
78 
+
79 
+        <ion-list *ngIf="segment === 'list2'">
80 
+          <ion-col size="12">
81 
+            <!-- <div class="txt-lead">ที่อยู่</div> -->
82 
+            <div [innerHTML]="placelist?.content.rendered"></div>
83 
+          </ion-col>
84 
+        </ion-list>
68 85 
       </ion-col>
69 86 
     </ion-row>
70 87

+ 0 - 17
src/app/placedetail/placedetail.page.scss
View File 

@@ -1,16 +1,3 @@
1 
-// ion-toolbar{
2 
-//     --background: transparent;
3 
-//     --border-color: transparent;
4 
-// }
5 
-// ion-toolbar{
6 
-//     --background: transparent;
7 
-//     --border-color: transparent;
8 
-// }
9 
-// ion-content{
10 
-//     --offset-top:0px;
11 
-//     position: absolute;
12 
-// }
13 
-
14 1 
 .bg {
15 2 
   position: absolute;
16 3 
   left: 0px;
 
@@ -29,10 +16,6 @@
29 16 
     --background: white;
30 17 
   }
31 18 
 }
32 
-
33 
-.asd {
34 
-}
35 
-
36 19 
 .asd .country {
37 20 
   position: absolute;
38 21 
   top: 50px;

+ 19 - 19
src/app/placedetail/placedetail.page.ts
View File 

@@ -4,6 +4,8 @@ import { WpServiceService } from '../wp-service.service';
4 4
5 5 
 import { Geolocation } from '@ionic-native/geolocation/ngx';
6 6 
 import { NativeGeocoder, NativeGeocoderResult, NativeGeocoderOptions } from '@ionic-native/native-geocoder/ngx';
7 
+import { CallNumber } from '@ionic-native/call-number/ngx';
8 
+import { EmailComposer } from '@ionic-native/email-composer/ngx';
7 9
8 10 
 declare var google;
9 11 
 
@@ -17,6 +19,8 @@ export class PlacedetailPage implements OnInit {
17 19 
   data: any;
18 20 
   placelist: any;
19 21
22 
+  public segment: string = "list1";
23 
+
20 24 
   @ViewChild('map', { static: false }) mapElement: ElementRef;
21 25 
   map: any;
22 26 
   address: string;
 
@@ -24,9 +28,9 @@ export class PlacedetailPage implements OnInit {
24 28 
   longitude: number;
25 29 
   latdynamic: any;
26 30 
   londynamic: any;
27 
-
28 31
29 
-  constructor(private wpservice: WpServiceService, private route: ActivatedRoute, private router: Router, private geolocation: Geolocation, private nativeGeocoder: NativeGeocoder) { }
32 
+
33 
+  constructor(private wpservice: WpServiceService, private route: ActivatedRoute, private router: Router, private geolocation: Geolocation, private nativeGeocoder: NativeGeocoder,private callNumber: CallNumber, private emailComposer: EmailComposer) { }
30 34 
   @Input() id: string;
31 35 
   showDiss = false;
32 36 
 
@@ -121,21 +125,17 @@ export class PlacedetailPage implements OnInit {
121 125
122 126 
   }
123 127
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 
-  // }
128 
+  segmentChanged(ev: any) {
129 
+    this.segment = ev.detail.value;
130 
+  }
131 
+
132 
+  callNow(number) {
133 
+    this.callNumber.callNumber(number, true)
134 
+      .then(res => console.log('Launched dialer!', res))
135 
+      .catch(err => console.log('Error launching dialer', err));
136 
+  }
137 
+
138 
+  email2Place(mail) {
139 
+    this.emailComposer.open(mail)
140 
+  }
141 141 
 }

+ 18 - 11
src/app/profile/profile.page.html
View File 

@@ -1,10 +1,14 @@
1 1 
 <ion-header>
2 
-  <ion-toolbar>
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>
6 
-<ion-content fullscreen="true">
7 
-  <!-- <div *ngIf="(user2 | async) as user; else loading"> -->
9 
+<ion-content>
10 
+  <ion-grid>
11 
+    <!-- <div *ngIf="(user2 | async) as user; else loading"> -->
8 12 
     <ion-row>
9 13 
       <ion-col>
10 14 
         <div class="ion-text-center">
 
@@ -17,32 +21,35 @@
17 21 
         <div class="card">
18 22 
           <div class="header">
19 23 
             <div class="avatar">
20 
-              <img [src]="$any(user).picture_large.data.url" *ngIf="user['picture_large'] != undefined" />
21 
-              <img src="/assets/images/icon-user.png" *ngIf="user['picture_large'] == undefined" />
24 
+              <!-- <img [src]="$any(user).picture_large.data.url" *ngIf="user['picture_large'] != undefined" /> -->
25 
+              <!-- <img src="/assets/images/icon-user.png" *ngIf="user['picture_large'] == undefined" /> -->
26 
+              <img src="/assets/images/icon-user.png">
22 27 
             </div>
23 28 
           </div>
24 29 
         </div>
25 30 
         <div class="card-body">
26 31 
           <div class="user-meta ion-text-center">
27 
-            <h3 class="playername">{{ $any(user).name }}</h3>
32 
+            <!-- <h3 class="playername">{{ $any(user).name }}</h3> -->
28 33 
           </div>
29 34 
           <form>
30 35 
             <ion-item lines="full">
31 36 
               <ion-label>ชื่อ</ion-label>
32 
-              {{ $any(user).name }}
37 
+              <!-- {{ $any(user).name }} -->
33 38 
             </ion-item>
34 39 
             <ion-item lines="full">
35 
-              <ion-label>Email</ion-label>{{ $any(user).email }}
40 
+              <ion-label>อีเมล์</ion-label>
41 
+              <!-- {{ $any(user).email }} -->
36 42 
             </ion-item>
37 43 
             <div class="ion-padding-vertical">
38 
-              <ion-button type="submit" color="danger" expand="block" (click)="logout()">Log Out</ion-button>
44 
+              <!-- <ion-button type="submit" color="danger" expand="block" (click)="logout()">Log Out</ion-button> -->
39 45 
             </div>
40 46 
           </form>
41 47 
         </div>
42 48 
       </ion-col>
43 49 
     </ion-row>
44 
-  <!-- </div> -->
45 
-  <!-- <ng-template #loading>
50 
+    <!-- </div> -->
51 
+    <!-- <ng-template #loading>
46 52 
     Loading stuff...
47 53 
   </ng-template> -->
54 
+  </ion-grid>
48 55 
 </ion-content>

+ 1 - 0
src/app/profile/profile.page.ts
View File 

@@ -8,6 +8,7 @@ import { Component, OnInit } from '@angular/core';
8 8 
 export class ProfilePage implements OnInit {
9 9
10 10 
   user2: any;
11 
+  user: any;
11 12
12 13 
   constructor() { }
13 14

+ 28 - 29
src/app/province/province.page.html
View File 

@@ -6,34 +6,33 @@
6 6 
     <ion-title>Wellnewss Route</ion-title>
7 7 
   </ion-toolbar>
8 8 
 </ion-header>
9 
-
10 9 
 <ion-content>
11 
-  <img src="/assets/images/welcome_drone.jpeg" alt="">
12 
-  <div class="holidaycard">
13 
-    <ion-grid>
14 
-      <ion-row>
15 
-        <ion-col size="12">
16 
-          <div class="txt-place-title">Province Name</div>
17 
-        </ion-col>
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>
26 
-      <ion-card *ngFor="let provlist of provicelist">
27 
-        <div *ngIf="$any(provlist).better_featured_image != null">
28 
-          <img src="{{$any(provlist).better_featured_image.source_url}}" alt="">
29 
-        </div>
30 
-        <div *ngIf="$any(provlist).better_featured_image == null">
31 
-          <img src="/assets/images/temp.png" />
32 
-        </div>
33 
-        <ion-card-header>
34 
-          <a [routerLink]="['/tabs/place/', provlist.id]"><ion-card-title [innerHTML]="provlist.title.rendered"></ion-card-title></a>
35 
-        </ion-card-header>
36 
-      </ion-card>
37 
-    </ion-grid>
38 
-  </div>
10 
+  <img src="/assets/images/image-004.jpg" alt="">
11 
+  <ion-grid>
12 
+    <ion-row>
13 
+      <ion-col size="12">
14 
+        <div class="txt-place-title">Province Name</div>
15 
+      </ion-col>
16 
+    </ion-row>
17 
+    <ion-row>
18 
+      <ion-col>
19 
+        <ion-toolbar class="search">
20 
+          <ion-searchbar placeholder="ค้นหา"></ion-searchbar>
21 
+        </ion-toolbar>
22 
+      </ion-col>
23 
+    </ion-row>
24 
+    <ion-card *ngFor="let provlist of provicelist">
25 
+      <div *ngIf="$any(provlist).better_featured_image != null">
26 
+        <img src="{{$any(provlist).better_featured_image.source_url}}" alt="">
27 
+      </div>
28 
+      <div *ngIf="$any(provlist).better_featured_image == null">
29 
+        <img src="/assets/images/temp.png" />
30 
+      </div>
31 
+      <ion-card-header>
32 
+        <a [routerLink]="['/tabs/place/', provlist.id]">
33 
+          <ion-card-title [innerHTML]="provlist.title.rendered"></ion-card-title>
34 
+        </a>
35 
+      </ion-card-header>
36 
+    </ion-card>
37 
+  </ion-grid>
39 38 
 </ion-content>

+ 12 - 12
src/app/province/province.page.scss
View File 

@@ -1,16 +1,16 @@
1 1
2 
-.holidaycard {
3 
-  position: absolute;
4 
-  left: 0px;
5 
-  // bottom: 0px;
6 
-  top:200px;
7 
-  min-height: 48%;
8 
-  width: 100%;
9 
-  padding: 5px;
10 
-  border-radius: 15px ;
11 
-  background: white;
12 
-  --background: white;
13 
-}
2 
+// .holidaycard {
3 
+//   position: absolute;
4 
+//   left: 0px;
5 
+//   // bottom: 0px;
6 
+//   top:200px;
7 
+//   min-height: 48%;
8 
+//   width: 100%;
9 
+//   padding: 5px;
10 
+//   border-radius: 15px ;
11 
+//   background: white;
12 
+//   --background: white;
13 
+// }
14 14
15 15 
 ion-card-title {
16 16 
   font-family: "IBM Plex Sans Thai", sans-serif !important;

+ 10 - 7
src/app/register-form/register-form.page.html
View File 

@@ -1,10 +1,13 @@
1 1 
 <ion-header>
2 
-  <ion-toolbar>
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>
6 
-
7 9 
 <ion-content>
10 
+  <div><img src="/assets/images/image-001.jpg"></div>
8 11 
   <ion-row>
9 12 
     <ion-col>
10 13 
       <div class="ion-text-center">
 
@@ -13,9 +16,9 @@
13 16 
     </ion-col>
14 17 
   </ion-row>
15 18 
   <ion-row>
16 
-    <ion-col>
19 
+    <ion-col>
17 20 
       <form>
18 
-        <ion-text *ngIf="errorText" color="primary" style='background-color:#fff'>
21 
+        <ion-text *ngIf="errorText" color="primary">
19 22 
           {{ errorText }}
20 23 
         </ion-text>
21 24 
         <ion-item lines="full">
 
@@ -45,9 +48,9 @@
45 48 
         </ion-item>
46 49
47 50 
         <div class="ion-padding-vertical">
48 
-          <ion-button type="submit" color="success" expand="block" (click)="register()">ลงทะเบียน</ion-button>
51 
+          <ion-button type="submit" color="success" expand="block">ลงทะเบียน</ion-button>
49 52 
         </div>
50 53 
       </form>
51 54 
     </ion-col>
52 
-  </ion-row>
53 
-</ion-content>
55 
+  </ion-row>
56 
+</ion-content>

+ 10 - 7
src/app/register/register.page.html
View File 

@@ -1,20 +1,23 @@
1 1 
 <ion-header>
2 
-  <ion-toolbar>
3 
-    <ion-title>ลงทะเบียน</ion-title>
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>Wellness Route</ion-title>
4 7 
   </ion-toolbar>
5 8 
 </ion-header>
6 
-
7 9 
 <ion-content class="auth-form">
10 
+  <div><img src="/assets/images/image-001.jpg"></div>
8 11 
   <ion-grid>
9 12 
     <ion-row>
10 13 
       <ion-col align-self-center>
11 
-        <ion-button [routerLink]="['/registration']" expand="block" color="primary">Register</ion-button>
14 
+        <ion-button [routerLink]="['/register-form']" expand="block" color="primary">ลงทะเบียนผู้ใช้งาน</ion-button>
12 15
13 
-        <span class="divider line one-line">or</span>
16 
+        <span class="divider line one-line">หรือ</span>
14 17
15 
-        <span class="already">Already a user?</span>
18 
+        <span class="already">มีชื่อผู้ใช้งานแล้ว</span>
16 19
17 
-        <ion-button [routerLink]="['/login']" expand="block" color="danger">Sign In</ion-button>
20 
+        <ion-button [routerLink]="['/login']" expand="block" color="danger">เข้าสู่ระบบ</ion-button>
18 21 
       </ion-col>
19 22 
     </ion-row>
20 23 
   </ion-grid>

+ 2 - 2
src/app/register/register.page.scss
View File 

@@ -12,7 +12,7 @@
12 12 
   .line {
13 13 
     align-items: center;
14 14 
     margin: 1em -1em;
15 
-    color: #cccccc;
15 
+    color: #5f5e5e;
16 16
17 17 
     &:before,
18 18 
     &:after {
 
@@ -24,7 +24,7 @@
24 24 
   .one-line {
25 25 
     &:before,
26 26 
     &:after {
27 
-       background: #cccccc;
27 
+       background: #5f5e5e;
28 28 
     }
29 29 
   }
30 30

+ 29 - 24
src/app/reset-password/reset-password.page.html
View File 

@@ -1,33 +1,38 @@
1 1 
 <ion-header>
2 
-  <ion-toolbar>
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>
6 
-
7 9 
 <ion-content>
8 
-  <ion-row>
9 
-    <ion-col class="ion-text-center">
10 
-      <h1>กรุณาใส่รหัสผ่านใหม่</h1>
11 
-    </ion-col>
12 
-  </ion-row>
13 
-  <form>
14 
-    <ion-row>
15 
-      <ion-col>
16 
-        <ion-item lines="full">
17 
-          <ion-label position="floating">รหัสผ่าน</ion-label>
18 
-          <ion-input type="password" required></ion-input>
19 
-        </ion-item>
20 
-
21 
-        <ion-item lines="full">
22 
-          <ion-label position="floating">ยืนยัน รหัสผ่าน</ion-label>
23 
-          <ion-input type="password" required></ion-input>
24 
-        </ion-item>
25 
-      </ion-col>
26 
-    </ion-row>
10 
+  <div><img src="/assets/images/image-007.jpg"></div>
11 
+  <ion-grid>
27 12 
     <ion-row>
28 
-      <ion-col>
29 
-        <ion-button type="submit" color="success" expand="block">ส่ง</ion-button>
13 
+      <ion-col class="ion-text-center">
14 
+        <h1>กรุณาใส่รหัสผ่านใหม่</h1>
30 15 
       </ion-col>
31 16 
     </ion-row>
32 
-  </form>
17 
+    <form>
18 
+      <ion-row>
19 
+        <ion-col>
20 
+          <ion-item lines="full">
21 
+            <ion-label position="floating">รหัสผ่าน</ion-label>
22 
+            <ion-input type="password" required></ion-input>
23 
+          </ion-item>
24 
+
25 
+          <ion-item lines="full">
26 
+            <ion-label position="floating">ยืนยัน รหัสผ่าน</ion-label>
27 
+            <ion-input type="password" required></ion-input>
28 
+          </ion-item>
29 
+        </ion-col>
30 
+      </ion-row>
31 
+      <ion-row>
32 
+        <ion-col>
33 
+          <ion-button type="submit" color="success" expand="block">ส่ง</ion-button>
34 
+        </ion-col>
35 
+      </ion-row>
36 
+    </form>
37 
+  </ion-grid>
33 38 
 </ion-content>

+ 2 - 2
src/app/tabs/tabs.page.html
View File 

@@ -1,9 +1,9 @@
1 1 
 <ion-tabs>
2 
-  <ion-fab vertical="bottom" horizontal="center" translucent="true">
2 
+  <!-- <ion-fab vertical="bottom" horizontal="center" translucent="true">
3 3 
     <ion-fab-button routerLink="nearme" routerDirection="forward">
4 4 
     <ion-icon name="navigate"></ion-icon>
5 5 
     </ion-fab-button>
6 
-  </ion-fab>
6 
+  </ion-fab> -->
7 7 
   <ion-tab-bar slot="bottom">
8 8 
     <ion-tab-button tab="home">
9 9 
       <ion-icon name="home"></ion-icon>

+ 2 - 1
src/app/wp-service.service.ts
View File 

@@ -31,7 +31,8 @@ export class WpServiceService {
31 31
32 32 
   getPlaceDetail(id) {
33 33 
     return this.http.get(
34 
-      "http://tamtime.iamarray.xyz/wp-json/wp/v2/place/"+id+"/?_embed"
34 
+      // "http://tamtime.iamarray.xyz/wp-json/wp/v2/place/"+id+"/?_embed"
35 
+      "/assets/json/place173.json"
35 36 
     );
36 37 
   }
37 38

BIN
src/assets/images/image-001.jpg
View File


BIN
src/assets/images/image-002.jpg
View File


BIN
src/assets/images/image-003.jpg
View File


BIN
src/assets/images/image-004.jpg
View File


BIN
src/assets/images/image-005.jpg
View File


BIN
src/assets/images/image-006.jpg
View File


BIN
src/assets/images/image-007.jpg
View File


BIN
src/assets/images/image-008.jpg
View File


BIN
src/assets/images/image-009.jpg
View File


BIN
src/assets/images/image-010.jpg
View File


BIN
src/assets/images/image-011.jpg
View File


BIN
src/assets/images/image-012.jpg
View File


File diff suppressed because it is too large
+ 1 - 0
src/assets/json/place173.json


+ 18 - 7
src/global.scss
View File 

@@ -116,6 +116,17 @@
116 116 
   --color: #ffffff;
117 117 
 }
118 118
119 
+// ion-content {
120 
+//   --background: linear-gradient(
121 
+//     to bottom,
122 
+//     #a7e9ff,
123 
+//     #8fd8fd,
124 
+//     #7ec7fb,
125 
+//     #78b4f6,
126 
+//     #7c9fee
127 
+//   );
128 
+// }
129 
+
119 130 
 ion-title {
120 131 
   font-family: "Kanit", sans-serif !important;
121 132 
   font-weight: 500;
 
@@ -160,12 +171,12 @@ ion-button {
160 171
161 172 
 a {
162 173 
   text-decoration: none;
163 
- }
164 
-
165 
-// ion-content {
166 
-//   --background: url(/assets/images/wnr-bg.jpg) no-repeat center/cover fixed;
167 
-// }
174 
+}
175 
+
176 
+.image-page-cover {
177 
+  height: 200px;
178 
+}
168 179 
 .ios ion-fab-button {
169 
-  position:absolute;
180 
+  position: absolute;
170 181 
   bottom: 25px;
171 
-}
182 
+}

golf/tge - Gogs: Simplico Git Service
首頁 探索 說明
登入
golf
/
tge
關註 1
讚好 0
複刻 0
代碼 問題管理 0 合併請求 0 提交歷史 2 版本發佈 0 Wiki

暫無描述

分支: main
分支列表 標籤列表
tge
/
node_modules
/
sucrase
golf d8e79ace03 index commit 2 年之前
..
bin d8e79ace03 index commit 2 年之前
dist d8e79ace03 index commit 2 年之前
register d8e79ace03 index commit 2 年之前
ts-node-plugin d8e79ace03 index commit 2 年之前
LICENSE d8e79ace03 index commit 2 年之前
README.md d8e79ace03 index commit 2 年之前
package.json d8e79ace03 index commit 2 年之前

README.md

Sucrase

Build Status npm version Install Size MIT License

Try it out

Quick usage

yarn add --dev sucrase  # Or npm install --save-dev sucrase
node -r sucrase/register main.ts

Using the ts-node integration:

yarn add --dev sucrase ts-node typescript
./node_modules/.bin/ts-node --transpiler sucrase/ts-node-plugin main.ts

Project overview

Sucrase is an alternative to Babel that allows super-fast development builds. Instead of compiling a large range of JS features to be able to work in Internet Explorer, Sucrase assumes that you're developing with a recent browser or recent Node.js version, so it focuses on compiling non-standard language extensions: JSX, TypeScript, and Flow. Because of this smaller scope, Sucrase can get away with an architecture that is much more performant but less extensible and maintainable. Sucrase's parser is forked from Babel's parser (so Sucrase is indebted to Babel and wouldn't be possible without it) and trims it down to a focused subset of what Babel solves. If it fits your use case, hopefully Sucrase can speed up your development experience!

Sucrase has been extensively tested. It can successfully build the Benchling frontend code, Babel, React, TSLint, Apollo client, and decaffeinate with all tests passing, about 1 million lines of code total.

Sucrase is about 20x faster than Babel. Here's one measurement of how Sucrase compares with other tools when compiling the Jest codebase 3 times, about 360k lines of code total:

            Time            Speed
Sucrase     0.57 seconds    636975 lines per second
swc         1.19 seconds    304526 lines per second
esbuild     1.45 seconds    248692 lines per second
TypeScript  8.98 seconds    40240 lines per second
Babel       9.18 seconds    39366 lines per second

Details: Measured on July 2022. Tools run in single-threaded mode without warm-up. See the benchmark code for methodology and caveats.

Transforms

The main configuration option in Sucrase is an array of transform names. These transforms are available:

  • jsx: Enables JSX syntax. By default, JSX is transformed to React.createClass, but may be preserved or transformed to _jsx() by setting the jsxRuntime option. Also adds createReactClass display names and JSX context information.
  • typescript: Compiles TypeScript code to JavaScript, removing type annotations and handling features like enums. Does not check types. Sucrase transforms each file independently, so you should enable the isolatedModules TypeScript flag so that the typechecker will disallow the few features like const enums that need cross-file compilation.
  • flow: Removes Flow type annotations. Does not check types.
  • imports: Transforms ES Modules (import/export) to CommonJS (require/module.exports) using the same approach as Babel and TypeScript with --esModuleInterop. If preserveDynamicImport is specified in the Sucrase options, then dynamic import expressions are left alone, which is particularly useful in Node to load ESM-only libraries. If preserveDynamicImport is not specified, import expressions are transformed into a promise-wrapped call to require.
  • react-hot-loader: Performs the equivalent of the react-hot-loader/babel transform in the react-hot-loader project. This enables advanced hot reloading use cases such as editing of bound methods.
  • jest: Hoist desired jest method calls above imports in the same way as babel-plugin-jest-hoist. Does not validate the arguments passed to jest.mock, but the same rules still apply.

When the imports transform is not specified (i.e. when targeting ESM), the injectCreateRequireForImportRequire option can be specified to transform TS import foo = require("foo"); in a way that matches the TypeScript 4.7 behavior with module: nodenext.

These newer JS features are transformed by default:

If your target runtime supports these features, you can specify disableESTransforms: true so that Sucrase preserves the syntax rather than trying to transform it. Note that transpiled and standard class fields behave slightly differently; see the TypeScript 3.7 release notes for details. If you use TypeScript, you can enable the TypeScript option useDefineForClassFields to enable error checking related to these differences.

Unsupported syntax

All JS syntax not mentioned above will "pass through" and needs to be supported by your JS runtime. For example:

  • Decorators, private fields, throw expressions, generator arrow functions, and do expressions are all unsupported in browsers and Node (as of this writing), and Sucrase doesn't make an attempt to transpile them.
  • Object rest/spread, async functions, and async iterators are all recent features that should work fine, but might cause issues if you use older versions of tools like webpack. BigInt and newer regex features may or may not work, based on your tooling.

JSX Options

By default, JSX is compiled to React functions in development mode. This can be configured with a few options:

  • jsxRuntime: A string specifying the transform mode, which can be one of three values:
    • "classic" (default): The original JSX transform that calls React.createElement by default. To configure for non-React use cases, specify:
    • jsxPragma: Element creation function, defaults to React.createElement.
    • jsxFragmentPragma: Fragment component, defaults to React.Fragment.
    • "automatic": The new JSX transform introduced with React 17, which calls jsx functions and auto-adds import statements. To configure for non-React use cases, specify:
    • jsxImportSource: Package name for auto-generated import statements, defaults to react.
    • "preserve": Don't transform JSX, and instead emit it as-is in the output code.
  • production: If true, use production version of functions and don't include debugging information. When using React in production mode with the automatic transform, this must be set to true to avoid an error about jsxDEV being missing.

Legacy CommonJS interop

Two legacy modes can be used with the imports transform:

  • enableLegacyTypeScriptModuleInterop: Use the default TypeScript approach to CommonJS interop instead of assuming that TypeScript's --esModuleInterop flag is enabled. For example, if a CJS module exports a function, legacy TypeScript interop requires you to write import * as add from './add';, while Babel, Webpack, Node.js, and TypeScript with --esModuleInterop require you to write import add from './add';. As mentioned in the docs, the TypeScript team recommends you always use --esModuleInterop.
  • enableLegacyBabel5ModuleInterop: Use the Babel 5 approach to CommonJS interop, so that you can run require('./MyModule') instead of require('./MyModule').default. Analogous to babel-plugin-add-module-exports.

Usage

Tool integrations

Usage in Node

The most robust way is to use the Sucrase plugin for ts-node, which has various Node integrations and configures Sucrase via tsconfig.json:

ts-node --transpiler sucrase/ts-node-plugin

For projects that don't target ESM, Sucrase also has a require hook with some reasonable defaults that can be accessed in a few ways:

  • From code: require("sucrase/register");
  • When invoking Node: node -r sucrase/register main.ts
  • As a separate binary: sucrase-node main.ts

Compiling a project to JS

For simple use cases, Sucrase comes with a sucrase CLI that mirrors your directory structure to an output directory:

sucrase ./srcDir -d ./outDir --transforms typescript,imports

Usage from code

For any advanced use cases, Sucrase can be called from JS directly:

import {transform} from "sucrase";
const compiledCode = transform(code, {transforms: ["typescript", "imports"]}).code;

What Sucrase is not

Sucrase is intended to be useful for the most common cases, but it does not aim to have nearly the scope and versatility of Babel. Some specific examples:

  • Sucrase does not check your code for errors. Sucrase's contract is that if you give it valid code, it will produce valid JS code. If you give it invalid code, it might produce invalid code, it might produce valid code, or it might give an error. Always use Sucrase with a linter or typechecker, which is more suited for error-checking.
  • Sucrase is not pluginizable. With the current architecture, transforms need to be explicitly written to cooperate with each other, so each additional transform takes significant extra work.
  • Sucrase is not good for prototyping language extensions and upcoming language features. Its faster architecture makes new transforms more difficult to write and more fragile.
  • Sucrase will never produce code for old browsers like IE. Compiling code down to ES5 is much more complicated than any transformation that Sucrase needs to do.
  • Sucrase is hesitant to implement upcoming JS features, although some of them make sense to implement for pragmatic reasons. Its main focus is on language extensions (JSX, TypeScript, Flow) that will never be supported by JS runtimes.
  • Like Babel, Sucrase is not a typechecker, and must process each file in isolation. For example, TypeScript const enums are treated as regular enums rather than inlining across files.
  • You should think carefully before using Sucrase in production. Sucrase is mostly beneficial in development, and in many cases, Babel or tsc will be more suitable for production builds.

See the Project Vision document for more details on the philosophy behind Sucrase.

Motivation

As JavaScript implementations mature, it becomes more and more reasonable to disable Babel transforms, especially in development when you know that you're targeting a modern runtime. You might hope that you could simplify and speed up the build step by eventually disabling Babel entirely, but this isn't possible if you're using a non-standard language extension like JSX, TypeScript, or Flow. Unfortunately, disabling most transforms in Babel doesn't speed it up as much as you might expect. To understand, let's take a look at how Babel works:

  1. Tokenize the input source code into a token stream.
  2. Parse the token stream into an AST.
  3. Walk the AST to compute the scope information for each variable.
  4. Apply all transform plugins in a single traversal, resulting in a new AST.
  5. Print the resulting AST.

Only step 4 gets faster when disabling plugins, so there's always a fixed cost to running Babel regardless of how many transforms are enabled.

Sucrase bypasses most of these steps, and works like this:

  1. Tokenize the input source code into a token stream using a trimmed-down fork of the Babel parser. This fork does not produce a full AST, but still produces meaningful token metadata specifically designed for the later transforms.
  2. Scan through the tokens, computing preliminary information like all imported/exported names.
  3. Run the transform by doing a pass through the tokens and performing a number of careful find-and-replace operations, like replacing <Foo with React.createElement(Foo.

Because Sucrase works on a lower level and uses a custom parser for its use case, it is much faster than Babel.

Contributing

Contributions are welcome, whether they be bug reports, PRs, docs, tests, or anything else! Please take a look through the Contributing Guide to learn how to get started.

License and attribution

Sucrase is MIT-licensed. A large part of Sucrase is based on a fork of the Babel parser, which is also MIT-licensed.

Why the name?

Sucrase is an enzyme that processes sugar. Get it?