update ui

config.xml

     <platform name="ios">
         <allow-intent href="itms:*" />
         <allow-intent href="itms-apps:*" />
+        <allow-intent href="tel:*" />
         <icon height="57" src="resources/ios/icon/icon.png" width="57" />
         <icon height="114" src="resources/ios/icon/icon@2x.png" width="114" />
         <icon height="29" src="resources/ios/icon/icon-small.png" width="29" />
     <plugin name="cordova-plugin-ionic-webview" spec="^4.0.0" />
     <plugin name="cordova-plugin-ionic-keyboard" spec="^2.0.5" />
     <allow-navigation href="http://172.16.112.36:8102" sessionid="56964c11" />
+    <allow-navigation href="http://localhost:8101" sessionid="9c146598" />
+    <allow-navigation href="http://localhost:8102" sessionid="e658a7f1" />
 </widget>

package-lock.json

         "@fortawesome/free-brands-svg-icons": "^5.15.4",
         "@fortawesome/free-regular-svg-icons": "^5.15.4",
         "@fortawesome/free-solid-svg-icons": "^5.15.4",
+        "@ionic-native/call-number": "^5.22.0-beta-1",
+        "@ionic-native/email-composer": "^5.36.0",
         "@ionic-native/geolocation": "^5.36.0",
         "@ionic-native/http": "^5.36.0",
         "@ionic-native/native-geocoder": "^5.36.0",
         "@types/node": "^12.11.1",
         "@typescript-eslint/eslint-plugin": "4.16.1",
         "@typescript-eslint/parser": "4.16.1",
+        "call-number": "^1.0.1",
         "cordova-plugin-add-swift-support": "^1.7.2",
         "cordova-plugin-device": "2.0.2",
+        "cordova-plugin-email-composer": "^0.9.2",
         "cordova-plugin-geolocation": "^4.1.0",
         "cordova-plugin-googlemaps": "^2.7.1",
         "cordova-plugin-googlemaps-sdk": "github:mapsplugin/cordova-plugin-googlemaps-sdk",
       "integrity": "sha512-wdppn25U8z/2yiaT6YGquE6X8sSv7hNMWSXYSSU1jGv/yd6XqjXgTDJ8KP4NgjTXfJ3GbRjeeb8RTV7a/VpM+w==",
       "dev": true
     },
+    "node_modules/@ionic-native/call-number": {
+      "version": "5.22.0-beta-1",
+      "resolved": "https://registry.npmjs.org/@ionic-native/call-number/-/call-number-5.22.0-beta-1.tgz",
+      "integrity": "sha512-8ff9xYa1Lvm4uW8T+ftfPLVw805UzDOpWQIFk8wFc8tdWuXx+KS940Ws5ZMV/ERb0LI97/N2N5msIQeLZT9HIA==",
+      "dependencies": {
+        "@types/cordova": "latest"
+      },
+      "peerDependencies": {
+        "@ionic-native/core": "^5.1.0",
+        "rxjs": "^5.5.0 || ^6.5.0"
+      }
+    },
     "node_modules/@ionic-native/core": {
       "version": "5.36.0",
       "resolved": "https://registry.npmjs.org/@ionic-native/core/-/core-5.36.0.tgz",
         "rxjs": "^5.5.0 || ^6.5.0"
       }
     },
+    "node_modules/@ionic-native/email-composer": {
+      "version": "5.36.0",
+      "resolved": "https://registry.npmjs.org/@ionic-native/email-composer/-/email-composer-5.36.0.tgz",
+      "integrity": "sha512-v732Jz3w4ItQqM7c2IzIxQQH+zT1DtQ7z635Fpbw4OJwpn6mImTms/F1c6hLJ50YmS/FYuI6rLbFRE/7BX1LUA==",
+      "dependencies": {
+        "@types/cordova": "latest"
+      },
+      "peerDependencies": {
+        "@ionic-native/core": "^5.1.0",
+        "rxjs": "^5.5.0 || ^6.5.0"
+      }
+    },
     "node_modules/@ionic-native/geolocation": {
       "version": "5.36.0",
       "resolved": "https://registry.npmjs.org/@ionic-native/geolocation/-/geolocation-5.36.0.tgz",
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/call-number": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/call-number/-/call-number-1.0.1.tgz",
+      "integrity": "sha1-v52q5If9alVz+JqjZV++ivA2r9I=",
+      "dev": true
+    },
     "node_modules/callsites": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
         }
       }
     },
+    "node_modules/cordova-plugin-email-composer": {
+      "version": "0.9.2",
+      "resolved": "https://registry.npmjs.org/cordova-plugin-email-composer/-/cordova-plugin-email-composer-0.9.2.tgz",
+      "integrity": "sha512-w8eQZ6lbYWut13o/Cprixmacfyq5hds7DAjuTL34eQhyWWd/DA/o6ziiyY3So2ZOozeQ4DxQpyPN4BiqUKcyew==",
+      "dev": true,
+      "engines": [
+        {
+          "name": "cordova",
+          "version": ">=6.0.0"
+        },
+        {
+          "name": "cordova-android",
+          "version": ">=6.2.0"
+        },
+        {
+          "name": "cordova-ios",
+          "version": ">=4.0.0"
+        },
+        {
+          "name": "cordova-windows",
+          "version": ">=4.3.0"
+        }
+      ]
+    },
     "node_modules/cordova-plugin-geolocation": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/cordova-plugin-geolocation/-/cordova-plugin-geolocation-4.1.0.tgz",
       "integrity": "sha512-wdppn25U8z/2yiaT6YGquE6X8sSv7hNMWSXYSSU1jGv/yd6XqjXgTDJ8KP4NgjTXfJ3GbRjeeb8RTV7a/VpM+w==",
       "dev": true
     },
+    "@ionic-native/call-number": {
+      "version": "5.22.0-beta-1",
+      "resolved": "https://registry.npmjs.org/@ionic-native/call-number/-/call-number-5.22.0-beta-1.tgz",
+      "integrity": "sha512-8ff9xYa1Lvm4uW8T+ftfPLVw805UzDOpWQIFk8wFc8tdWuXx+KS940Ws5ZMV/ERb0LI97/N2N5msIQeLZT9HIA==",
+      "requires": {
+        "@types/cordova": "latest"
+      }
+    },
     "@ionic-native/core": {
       "version": "5.36.0",
       "resolved": "https://registry.npmjs.org/@ionic-native/core/-/core-5.36.0.tgz",
         "@types/cordova": "latest"
       }
     },
+    "@ionic-native/email-composer": {
+      "version": "5.36.0",
+      "resolved": "https://registry.npmjs.org/@ionic-native/email-composer/-/email-composer-5.36.0.tgz",
+      "integrity": "sha512-v732Jz3w4ItQqM7c2IzIxQQH+zT1DtQ7z635Fpbw4OJwpn6mImTms/F1c6hLJ50YmS/FYuI6rLbFRE/7BX1LUA==",
+      "requires": {
+        "@types/cordova": "latest"
+      }
+    },
     "@ionic-native/geolocation": {
       "version": "5.36.0",
       "resolved": "https://registry.npmjs.org/@ionic-native/geolocation/-/geolocation-5.36.0.tgz",
         "get-intrinsic": "^1.0.2"
       }
     },
+    "call-number": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/call-number/-/call-number-1.0.1.tgz",
+      "integrity": "sha1-v52q5If9alVz+JqjZV++ivA2r9I=",
+      "dev": true
+    },
     "callsites": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
       "integrity": "sha1-/Ajzci5n7ve2xnv8mag99q3Quro=",
       "dev": true
     },
+    "cordova-plugin-email-composer": {
+      "version": "0.9.2",
+      "resolved": "https://registry.npmjs.org/cordova-plugin-email-composer/-/cordova-plugin-email-composer-0.9.2.tgz",
+      "integrity": "sha512-w8eQZ6lbYWut13o/Cprixmacfyq5hds7DAjuTL34eQhyWWd/DA/o6ziiyY3So2ZOozeQ4DxQpyPN4BiqUKcyew==",
+      "dev": true
+    },
     "cordova-plugin-geolocation": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/cordova-plugin-geolocation/-/cordova-plugin-geolocation-4.1.0.tgz",

package.json

     "@fortawesome/free-brands-svg-icons": "^5.15.4",
     "@fortawesome/free-regular-svg-icons": "^5.15.4",
     "@fortawesome/free-solid-svg-icons": "^5.15.4",
+    "@ionic-native/call-number": "^5.22.0-beta-1",
+    "@ionic-native/email-composer": "^5.36.0",
     "@ionic-native/geolocation": "^5.36.0",
     "@ionic-native/http": "^5.36.0",
     "@ionic-native/native-geocoder": "^5.36.0",
     "@types/node": "^12.11.1",
     "@typescript-eslint/eslint-plugin": "4.16.1",
     "@typescript-eslint/parser": "4.16.1",
+    "call-number": "^1.0.1",
     "cordova-plugin-add-swift-support": "^1.7.2",
     "cordova-plugin-device": "2.0.2",
+    "cordova-plugin-email-composer": "^0.9.2",
     "cordova-plugin-geolocation": "^4.1.0",
     "cordova-plugin-googlemaps": "^2.7.1",
     "cordova-plugin-googlemaps-sdk": "github:mapsplugin/cordova-plugin-googlemaps-sdk",
       },
       "cordova-plugin-nativegeocoder": {
         "LOCATION_WHEN_IN_USE_DESCRIPTION": "Use geocoder service"
-      }
+      },
+      "mx.ferreyra.callnumber": {},
+      "cordova-plugin-email-composer": {}
     },
     "platforms": [
       "ios"

src/app/app.module.ts

 import { Geolocation } from '@ionic-native/geolocation/ngx';
 import { NativeGeocoder } from '@ionic-native/native-geocoder/ngx';
 
+import { CallNumber } from '@ionic-native/call-number/ngx';
+import { EmailComposer } from '@ionic-native/email-composer/ngx';
+
 // library.add(fas,far,fab);
 
 @NgModule({
   providers: [
     Geolocation,
     NativeGeocoder,
+    CallNumber,
+    EmailComposer,
     { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
   ],
   bootstrap: [AppComponent],

src/app/forgot-password/forgot-password.page.html

 <ion-header>
-  <ion-toolbar>
+  <ion-toolbar class="new-background-color">
+    <ion-buttons slot="start" color="light">
+      <ion-back-button></ion-back-button>
+    </ion-buttons>
     <ion-title>Wellness Route</ion-title>
   </ion-toolbar>
 </ion-header>
-
 <ion-content>
-  <ion-row>
-    <ion-col>
-      <div class="ion-text-center">
-        <h1>ลืมรหัสผ่าน</h1>
-      </div>
-    </ion-col>
-  </ion-row>
-  <form>
+  <div><img src="/assets/images/image-006.jpg"></div>
+  <ion-grid>
     <ion-row>
       <ion-col>
-        <ion-item lines="full">
-          <ion-label position="floating">อีเมล์</ion-label>
-          <ion-input type="email" name="email" [(ngModel)]="email" inputmode="email"></ion-input>
-        </ion-item>
+        <div class="ion-text-center">
+          <h1>ลืมรหัสผ่าน</h1>
+        </div>
       </ion-col>
     </ion-row>
-    <ion-row>
-      <ion-col>
-        <ion-button type="submit" color="danger" expand="block" (click)="resetPassword()">ส่งรหัสผ่าน</ion-button>
-
-      </ion-col>
-    </ion-row>
-  </form>
+    <form>
+      <ion-row>
+        <ion-col>
+          <ion-item lines="full">
+            <ion-label position="floating">อีเมล์</ion-label>
+            <ion-input type="email" name="email" [(ngModel)]="email" inputmode="email"></ion-input>
+          </ion-item>
+        </ion-col>
+      </ion-row>
+      <ion-row>
+        <ion-col>
+          <ion-button type="submit" color="danger" expand="block" (click)="resetPassword()">ส่งรหัสผ่าน</ion-button>
+        </ion-col>
+      </ion-row>
+    </form>
+  </ion-grid>
 </ion-content>

src/app/home/home.page.html

-<ion-header class="ion-no-border">
+<ion-header>
   <ion-toolbar class="new-background-color">
     <ion-title>Wellness Route</ion-title>
   </ion-toolbar>
     <ion-row>
       <ion-col>
         <ion-card *ngFor="let pldata of placelasted">
-          <div *ngIf="$any(pldata).better_featured_image != null">
-            <img src="{{$any(pldata).better_featured_image.source_url}}" alt="">
+          <div *ngIf="pldata.better_featured_image != null">
+            <img src="{{pldata.better_featured_image.source_url}}" alt="">
           </div>
-          <div *ngIf="$any(pldata).better_featured_image == null">
+          <div *ngIf="pldata.better_featured_image == null">
             <img src="/assets/images/temp.png" />
           </div>
           <ion-card-header>            

src/app/home/home.page.scss

   font-size: 20px;
 }
 
-ion-searchbar{
-  // --color:#000;
-  // --placeholder-color:#000;
-  // --background:#000;
-}
-
 .search{
   padding: 0px !important;
   // margin-bottom: 30px;
   margin-top: 10px;
 }
 
-// .red {
-//   color: rgb(255, 0, 0);
-// }
-
 .catshow {
-  height: 100px;
+  height: 80px;
   // background-color: rgb(183, 210, 236);
   border: solid 1px;
   border-color: cornflowerblue;

src/app/login/login.page.html

 <ion-header>
-  <ion-toolbar>
+  <ion-toolbar class="new-background-color">
+    <ion-buttons slot="start" color="light">
+      <ion-back-button></ion-back-button>
+    </ion-buttons>
     <ion-title>Wellness Route</ion-title>
   </ion-toolbar>
 </ion-header>
-
 <ion-content>
-  <ion-row>
-    <ion-col>
-      <div class="ion-text-center">
-        <h1>เข้าสู่ระบบ</h1>
-      </div>
-    </ion-col>
-  </ion-row>
-  <ion-row>
-    <ion-col>
-      <form>
-        <ion-item lines="full">
-          <ion-label position="floating">อีเมล์</ion-label>
-          <ion-input type="text" required="true" [(ngModel)]='registerForm.email' name='email' type='email'></ion-input>
-        </ion-item>
+  <div><img src="/assets/images/image-005.jpg"></div>
+  <ion-grid>
+    <ion-row>
+      <ion-col>
+        <div class="ion-text-center">
+          <h1>เข้าสู่ระบบ</h1>
+        </div>
+      </ion-col>
+    </ion-row>
+    <ion-row>
+      <ion-col>
+        <form>
+          <ion-item lines="full">
+            <ion-label position="floating">อีเมล์</ion-label>
+            <ion-input type="text" required="true" [(ngModel)]='registerForm.email' name='email' type='email'>
+            </ion-input>
+          </ion-item>
 
-        <ion-item lines="full">
-          <ion-label position="floating">รหัสผ่าน</ion-label>
-          <ion-input type="password" required [(ngModel)]='registerForm.password' name='password'></ion-input>
-        </ion-item>
-      </form>
-    </ion-col>
-  </ion-row>
-  <ion-row>
+          <ion-item lines="full">
+            <ion-label position="floating">รหัสผ่าน</ion-label>
+            <ion-input type="password" required [(ngModel)]='registerForm.password' name='password'></ion-input>
+          </ion-item>
+        </form>
+      </ion-col>
+    </ion-row>
+    <ion-row>
+      <ion-col>
+        <ion-button type="submit" color="success" expand="block" (click)="userLogin()">Login</ion-button>
+      </ion-col>
+    </ion-row>
+    <ion-row>
+      <ion-col class='ion-text-center'>
+        <a (click)="openForgotPassword()" class="small-text">ลืมรหัส</a>
+      </ion-col>
+      <ion-col class='ion-text-center'>
+        <a (click)="openRegister()" class="small-text">สม้ครใหม่</a>
+      </ion-col>
+    </ion-row>
+    <ion-row>
+      <ion-col>
+        <span class="divider line one-line">หรือ</span>
+      </ion-col>
+    </ion-row>
+    <ion-row>
+      <ion-col>
+        <ion-button class="log-fb-in-button" expand="block" (click)="doFbLogin()">
+          Log in with Facebook
+        </ion-button><br>
+        <button (click)="appleSignIn()" block [hidden]="isAndroid">
+          <img src="assets/images/appleid_button@2x.png">
+        </button>
+      </ion-col>
+    </ion-row>
     <ion-col>
-      <ion-button type="submit" color="success" expand="block" (click)="userLogin()">Login</ion-button>
-    </ion-col>
-  </ion-row>
-  <ion-row>
-    <ion-col class='ion-text-center'>
-      <a (click)="openForgotPassword()" class="small-text">ลืมรหัส</a>      
+      <a [routerLink]="['/tabs/forgot-password']">
+        page ลืมรหัส
+      </a>
     </ion-col>
-    <ion-col class='ion-text-center'>
-      <a (click)="openRegister()" class="small-text">สม้ครใหม่</a>
+    <ion-col>
+      <a [routerLink]="['/tabs/register']">
+        page register or signin
+      </a>
     </ion-col>
-  </ion-row>
-  <ion-row>
     <ion-col>
-      <span class="divider line one-line">หรือ</span>
+      <a [routerLink]="['/tabs/reset-password']">
+        page reset password
+      </a>
     </ion-col>
-  </ion-row>
-  <ion-row>
     <ion-col>
-      <ion-button class="log-fb-in-button" expand="block" (click)="doFbLogin()">
-        Log in with Facebook
-      </ion-button><br>
-      <button (click)="appleSignIn()" block [hidden]="isAndroid">
-        <img src="assets/images/appleid_button@2x.png">
-      </button>
+      <a [routerLink]="['/tabs/profile']">
+        page profile
+      </a>
     </ion-col>
-  </ion-row>
-  <ion-col>      
-    <a [routerLink]="['/tabs/forgot-password']">
-      page ลืมรหัส
-    </a>
-  </ion-col>
-  <ion-col>      
-    <a [routerLink]="['/tabs/register']">
-      page register or signin
-    </a>
-  </ion-col>
-  <ion-col>      
-    <a [routerLink]="['/tabs/reset-password']">
-      page reset password
-    </a>
-  </ion-col>
-  <ion-col>      
-    <a [routerLink]="['/tabs/profile']">
-      page profile
-    </a>
-  </ion-col>
-</ion-content>
+  </ion-grid>
+</ion-content>

src/app/login/login.page.scss

-
 .divider {
-    display: flex;
-  
-    &:before,
-    &:after {
-      content: "";
-      flex: 1;
-    }
+  display: flex;
+
+  &:before,
+  &:after {
+    content: "";
+    flex: 1;
+  }
+}
+.line {
+  align-items: center;
+  margin: 1em -1em;
+  color: #5f5e5e;
+  &:before,
+  &:after {
+    height: 1px;
+    margin: 0 1em;
   }
-  .line {
-    align-items: center;
-    margin: 1em -1em;
-    color: #5f5e5e;
-    &:before,
-    &:after {
-      height: 1px;
-      margin: 0 1em;
-    }
+}
+.one-line {
+  &:before,
+  &:after {
+    background: #5f5e5e;
   }
-  .one-line {
-    &:before,
-    &:after {
-      background: #5f5e5e;
-    }
-  }
+}

src/app/nearme/nearme.page.html

 </ion-header>
 
 <ion-content>
+  <div #nearmap id="nearmap"></div>
   <ion-grid>
-    <ion-row>
-      <ion-col>
-        <div #nearmap id="nearmap"></div>
-      </ion-col>
-    </ion-row>
     <ion-row >
       <ion-col>
         <ion-card *ngFor="let nearm of placenear">

src/app/nearme/nearme.page.scss

 ion-card-title {
-    font-family: "IBM Plex Sans Thai", sans-serif !important;
-    font-weight: 600;
-    font-size: 20px;
-  }
-  
-  #nearmap {
-    height: 300px;
-}
+  font-family: "IBM Plex Sans Thai", sans-serif !important;
+  font-weight: 600;
+  font-size: 20px;
+}
+#nearmap {
+  height: 300px;
+}

src/app/place/place.page.html

 </ion-header>
 
 <ion-content>
-  <img src="/assets/images/golf-bg.jpg">
-  <div class="holidaycard">
+  <img src="/assets/images/image-010.jpg">
     <ion-grid>
       <ion-row>
         <ion-col size="12">
         </ion-card-header>
       </ion-card>
     </ion-grid>
-  </div>
 </ion-content>

src/app/place/place.page.scss

-.holidaycard {
-    position: absolute;
-    left: 0px;
-    // bottom: 0px;
-    top:200px;
-    min-height: 48%;
-    width: 100%;
-    padding: 5px;
-    border-radius: 15px ;
-    background: white;
-    --background: white;
-  }
+// .holidaycard {
+//     position: absolute;
+//     left: 0px;
+//     // bottom: 0px;
+//     top:200px;
+//     min-height: 48%;
+//     width: 100%;
+//     padding: 5px;
+//     border-radius: 15px ;
+//     background: white;
+//     --background: white;
+//   }
   
   ion-card-title {
     font-family: "IBM Plex Sans Thai", sans-serif !important;

src/app/placedetail/placedetail.page.html

   </div>
   <!-- <img src="{{placelist?.better_featured_image.source_url}}"> -->
   <ion-grid>
-    <ion-row>
+    <ion-row color="light">
       <ion-col size="12">
         <div class="txt-place-title">{{placelist?.title.rendered}}</div>
       </ion-col>
         <div>{{ placelist?.acf.openclose }}</div>
       </ion-col>
       <ion-col size="12">
-        {{ placelist?.acf.gmap.address }}
-        {{ placelist?.acf.gmap.lat }}
-        {{ placelist?.acf.gmap.lng }}
-        <img src="/assets/images/map-temp.jpg" alt="">
+        <!-- {{ placelist?.acf.gmap.address }} -->
+        <!-- {{ placelist?.acf.gmap.lat }}
+        {{ placelist?.acf.gmap.lng }} -->
+        <div class="map-wrapper">
+          <div id="map_center">
+            <img src="/assets/icon/location-marker.png" />
+          </div>
+          <div #map id="map"></div>
+        </div>
       </ion-col>
       <ion-col size="12">
         <ion-row>
           <ion-col size="4" class="ion-text-center">
-            <!-- <div [innerHTML]="placelist?.acf.phone"></div>                         -->
-            <fa-icon [icon]="['fas', 'phone-square-alt']" size="2x"></fa-icon>
+            <div (click)="callNow('{{placelist?.acf.phone}}')">
+              <fa-icon [icon]="['fas', 'phone-square-alt']" size="2x"></fa-icon>
+            </div>
           </ion-col>
           <ion-col size="4" class="ion-text-center">
             <!-- <div [innerHTML]="placelist?.acf.phone"></div>                         -->
           </ion-col>
           <ion-col size="4" class="ion-text-center">
             <!-- <div [innerHTML]="placelist?.acf.email"></div>             -->
-            <fa-icon [icon]="['fas', 'envelope']" size="2x"></fa-icon>
+            <div (click)="email2Place('{{placelist?.acf.email}}')">
+              <fa-icon [icon]="['fas', 'envelope']" size="2x"></fa-icon>
+            </div>
           </ion-col>
         </ion-row>
       </ion-col>
+
       <ion-col size="12">
-        <div class="txt-lead">ที่อยู่</div>
-        <div [innerHTML]="placelist?.acf.address"></div>
-      </ion-col>
-      <ion-col size="12">
-        <!-- <div class="txt-lead">รายละเอียด</div>
-        <div [innerHTML]="placelist?.content.rendered"></div> -->
-        <!-- <div>{{placelist?.content.rendered}}</div> -->
-        <!-- <ion-button (click)="loadMap()" shape="round" color="dark">
-          <ion-icon slot="start" name="locate"></ion-icon>
-          Where I Am
-        </ion-button> -->
-        <div class="map-wrapper">
-          <div id="map_center">
-            <img src="assets/icon/location-marker.png" />
-          </div>
-          <div #map id="map"></div>
-        </div>
-        
+        <ion-segment (ionChange)="segmentChanged($event)" value="list1">
+          <ion-segment-button value="list1">
+            <ion-label>
+              ที่อยู่
+            </ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="list2">
+            <ion-label>
+              รายละเอียด
+            </ion-label>
+          </ion-segment-button>
+        </ion-segment>
+
+        <ion-list *ngIf="segment === 'list1'">
+          <ion-col size="12">
+            <!-- <div class="txt-lead">ที่อยู่</div> -->
+            <div [innerHTML]="placelist?.acf.address"></div>
+          </ion-col>
+        </ion-list>
+
+        <ion-list *ngIf="segment === 'list2'">
+          <ion-col size="12">
+            <!-- <div class="txt-lead">ที่อยู่</div> -->
+            <div [innerHTML]="placelist?.content.rendered"></div>
+          </ion-col>
+        </ion-list>
       </ion-col>
     </ion-row>
 

src/app/placedetail/placedetail.page.scss

-// ion-toolbar{
-//     --background: transparent;
-//     --border-color: transparent;
-// }
-// ion-toolbar{
-//     --background: transparent;
-//     --border-color: transparent;
-// }
-// ion-content{
-//     --offset-top:0px;
-//     position: absolute;
-// }
-
 .bg {
   position: absolute;
   left: 0px;
     --background: white;
   }
 }
-
-.asd {
-}
-
 .asd .country {
   position: absolute;
   top: 50px;

src/app/placedetail/placedetail.page.ts

 
 import { Geolocation } from '@ionic-native/geolocation/ngx';
 import { NativeGeocoder, NativeGeocoderResult, NativeGeocoderOptions } from '@ionic-native/native-geocoder/ngx';
+import { CallNumber } from '@ionic-native/call-number/ngx';
+import { EmailComposer } from '@ionic-native/email-composer/ngx';
 
 declare var google;
 
   data: any;
   placelist: any;
 
+  public segment: string = "list1";
+
   @ViewChild('map', { static: false }) mapElement: ElementRef;
   map: any;
   address: string;
   longitude: number;
   latdynamic: any;
   londynamic: any;
-  
 
-  constructor(private wpservice: WpServiceService, private route: ActivatedRoute, private router: Router, private geolocation: Geolocation, private nativeGeocoder: NativeGeocoder) { }
+
+  constructor(private wpservice: WpServiceService, private route: ActivatedRoute, private router: Router, private geolocation: Geolocation, private nativeGeocoder: NativeGeocoder,private callNumber: CallNumber, private emailComposer: EmailComposer) { }
   @Input() id: string;
   showDiss = false;
 
 
   }
 
-  // getAddressFromCoords2(lattitude, longitude) {
-  //   console.log("getAddressFromCoords2 " + lattitude + " " + longitude);
-  //   let options: NativeGeocoderOptions = {
-  //     useLocale: true,
-  //     maxResults: 5
-  //   };
-  // }
-
-  // getGeoencoder(latitude, longitude) {
-  //   this.nativeGeocoder.reverseGeocode(latitude, longitude, this.geoencoderOptions)
-  //     .then((result: NativeGeocoderResult[]) => {
-  //       this.address = this.generateAddress(result[0]);
-  //     })
-  //     .catch((error: any) => {
-  //       alert('Error getting location' + JSON.stringify(error));
-  //     });
-  // }
+  segmentChanged(ev: any) {
+    this.segment = ev.detail.value;
+  }
+
+  callNow(number) {
+    this.callNumber.callNumber(number, true)
+      .then(res => console.log('Launched dialer!', res))
+      .catch(err => console.log('Error launching dialer', err));
+  }
+
+  email2Place(mail) {
+    this.emailComposer.open(mail)
+  }
 }

src/app/profile/profile.page.html

 <ion-header>
-  <ion-toolbar>
+  <ion-toolbar class="new-background-color">
+    <ion-buttons slot="start" color="light">
+      <ion-back-button></ion-back-button>
+    </ion-buttons>
     <ion-title>Wellness Route</ion-title>
   </ion-toolbar>
 </ion-header>
-<ion-content fullscreen="true">
-  <!-- <div *ngIf="(user2 | async) as user; else loading"> -->
+<ion-content>
+  <ion-grid>
+    <!-- <div *ngIf="(user2 | async) as user; else loading"> -->
     <ion-row>
       <ion-col>
         <div class="ion-text-center">
         <div class="card">
           <div class="header">
             <div class="avatar">
-              <img [src]="$any(user).picture_large.data.url" *ngIf="user['picture_large'] != undefined" />
-              <img src="/assets/images/icon-user.png" *ngIf="user['picture_large'] == undefined" />
+              <!-- <img [src]="$any(user).picture_large.data.url" *ngIf="user['picture_large'] != undefined" /> -->
+              <!-- <img src="/assets/images/icon-user.png" *ngIf="user['picture_large'] == undefined" /> -->
+              <img src="/assets/images/icon-user.png">
             </div>
           </div>
         </div>
         <div class="card-body">
           <div class="user-meta ion-text-center">
-            <h3 class="playername">{{ $any(user).name }}</h3>
+            <!-- <h3 class="playername">{{ $any(user).name }}</h3> -->
           </div>
           <form>
             <ion-item lines="full">
               <ion-label>ชื่อ</ion-label>
-              {{ $any(user).name }}
+              <!-- {{ $any(user).name }} -->
             </ion-item>
             <ion-item lines="full">
-              <ion-label>Email</ion-label>{{ $any(user).email }}
+              <ion-label>อีเมล์</ion-label>
+              <!-- {{ $any(user).email }} -->
             </ion-item>
             <div class="ion-padding-vertical">
-              <ion-button type="submit" color="danger" expand="block" (click)="logout()">Log Out</ion-button>
+              <!-- <ion-button type="submit" color="danger" expand="block" (click)="logout()">Log Out</ion-button> -->
             </div>
           </form>
         </div>
       </ion-col>
     </ion-row>
-  <!-- </div> -->
-  <!-- <ng-template #loading>
+    <!-- </div> -->
+    <!-- <ng-template #loading>
     Loading stuff...
   </ng-template> -->
+  </ion-grid>
 </ion-content>

src/app/profile/profile.page.ts

 export class ProfilePage implements OnInit {
 
   user2: any;
+  user: any;
   
   constructor() { }
 

src/app/province/province.page.html

     <ion-title>Wellnewss Route</ion-title>
   </ion-toolbar>
 </ion-header>
-
 <ion-content>
-  <img src="/assets/images/welcome_drone.jpeg" alt="">
-  <div class="holidaycard">
-    <ion-grid>
-      <ion-row>
-        <ion-col size="12">
-          <div class="txt-place-title">Province Name</div>
-        </ion-col>
-      </ion-row>
-      <ion-row>
-        <ion-col>
-          <ion-toolbar class="search">
-            <ion-searchbar placeholder="ค้นหา"></ion-searchbar>
-          </ion-toolbar>
-        </ion-col>
-      </ion-row>
-      <ion-card *ngFor="let provlist of provicelist">
-        <div *ngIf="$any(provlist).better_featured_image != null">
-          <img src="{{$any(provlist).better_featured_image.source_url}}" alt="">
-        </div>
-        <div *ngIf="$any(provlist).better_featured_image == null">
-          <img src="/assets/images/temp.png" />
-        </div>
-        <ion-card-header>
-          <a [routerLink]="['/tabs/place/', provlist.id]"><ion-card-title [innerHTML]="provlist.title.rendered"></ion-card-title></a>
-        </ion-card-header>
-      </ion-card>
-    </ion-grid>
-  </div>
+  <img src="/assets/images/image-004.jpg" alt="">
+  <ion-grid>
+    <ion-row>
+      <ion-col size="12">
+        <div class="txt-place-title">Province Name</div>
+      </ion-col>
+    </ion-row>
+    <ion-row>
+      <ion-col>
+        <ion-toolbar class="search">
+          <ion-searchbar placeholder="ค้นหา"></ion-searchbar>
+        </ion-toolbar>
+      </ion-col>
+    </ion-row>
+    <ion-card *ngFor="let provlist of provicelist">
+      <div *ngIf="$any(provlist).better_featured_image != null">
+        <img src="{{$any(provlist).better_featured_image.source_url}}" alt="">
+      </div>
+      <div *ngIf="$any(provlist).better_featured_image == null">
+        <img src="/assets/images/temp.png" />
+      </div>
+      <ion-card-header>
+        <a [routerLink]="['/tabs/place/', provlist.id]">
+          <ion-card-title [innerHTML]="provlist.title.rendered"></ion-card-title>
+        </a>
+      </ion-card-header>
+    </ion-card>
+  </ion-grid>
 </ion-content>

src/app/province/province.page.scss

 
-.holidaycard {
-  position: absolute;
-  left: 0px;
-  // bottom: 0px;
-  top:200px;
-  min-height: 48%;
-  width: 100%;
-  padding: 5px;
-  border-radius: 15px ;
-  background: white;
-  --background: white;
-}
+// .holidaycard {
+//   position: absolute;
+//   left: 0px;
+//   // bottom: 0px;
+//   top:200px;
+//   min-height: 48%;
+//   width: 100%;
+//   padding: 5px;
+//   border-radius: 15px ;
+//   background: white;
+//   --background: white;
+// }
 
 ion-card-title {
   font-family: "IBM Plex Sans Thai", sans-serif !important;

src/app/register-form/register-form.page.html

 <ion-header>
-  <ion-toolbar>
+  <ion-toolbar class="new-background-color">
+    <ion-buttons slot="start" color="light">
+      <ion-back-button></ion-back-button>
+    </ion-buttons>
     <ion-title>Wellness Route</ion-title>
   </ion-toolbar>
 </ion-header>
-
 <ion-content>
+  <div><img src="/assets/images/image-001.jpg"></div>
   <ion-row>
     <ion-col>
       <div class="ion-text-center">
     </ion-col>
   </ion-row>
   <ion-row>
-    <ion-col>      
+    <ion-col>
       <form>
-        <ion-text *ngIf="errorText" color="primary" style='background-color:#fff'>
+        <ion-text *ngIf="errorText" color="primary">
           {{ errorText }}
         </ion-text>
         <ion-item lines="full">
         </ion-item>
 
         <div class="ion-padding-vertical">
-          <ion-button type="submit" color="success" expand="block" (click)="register()">ลงทะเบียน</ion-button>
+          <ion-button type="submit" color="success" expand="block">ลงทะเบียน</ion-button>
         </div>
       </form>
     </ion-col>
-  </ion-row>  
-</ion-content>
+  </ion-row>
+</ion-content>

src/app/register/register.page.html

 <ion-header>
-  <ion-toolbar>
-    <ion-title>ลงทะเบียน</ion-title>
+  <ion-toolbar class="new-background-color">
+    <ion-buttons slot="start" color="light">
+      <ion-back-button></ion-back-button>
+    </ion-buttons>
+    <ion-title>Wellness Route</ion-title>
   </ion-toolbar>
 </ion-header>
-
 <ion-content class="auth-form">
+  <div><img src="/assets/images/image-001.jpg"></div>
   <ion-grid>
     <ion-row>
       <ion-col align-self-center>
-        <ion-button [routerLink]="['/registration']" expand="block" color="primary">Register</ion-button>
+        <ion-button [routerLink]="['/register-form']" expand="block" color="primary">ลงทะเบียนผู้ใช้งาน</ion-button>
 
-        <span class="divider line one-line">or</span>
+        <span class="divider line one-line">หรือ</span>
 
-        <span class="already">Already a user?</span>
+        <span class="already">มีชื่อผู้ใช้งานแล้ว</span>
 
-        <ion-button [routerLink]="['/login']" expand="block" color="danger">Sign In</ion-button>
+        <ion-button [routerLink]="['/login']" expand="block" color="danger">เข้าสู่ระบบ</ion-button>
       </ion-col>
     </ion-row>
   </ion-grid>

src/app/register/register.page.scss

   .line {
     align-items: center;
     margin: 1em -1em;
-    color: #cccccc;
+    color: #5f5e5e;
     
     &:before,
     &:after {
   .one-line {
     &:before,
     &:after {
-       background: #cccccc;
+       background: #5f5e5e;
     }
   }
   

src/app/reset-password/reset-password.page.html

 <ion-header>
-  <ion-toolbar>
+  <ion-toolbar class="new-background-color">
+    <ion-buttons slot="start" color="light">
+      <ion-back-button></ion-back-button>
+    </ion-buttons>
     <ion-title>Wellness Route</ion-title>
   </ion-toolbar>
 </ion-header>
-
 <ion-content>
-  <ion-row>
-    <ion-col class="ion-text-center">
-      <h1>กรุณาใส่รหัสผ่านใหม่</h1>
-    </ion-col>
-  </ion-row>
-  <form>
-    <ion-row>
-      <ion-col>
-        <ion-item lines="full">
-          <ion-label position="floating">รหัสผ่าน</ion-label>
-          <ion-input type="password" required></ion-input>
-        </ion-item>
-
-        <ion-item lines="full">
-          <ion-label position="floating">ยืนยัน รหัสผ่าน</ion-label>
-          <ion-input type="password" required></ion-input>
-        </ion-item>
-      </ion-col>
-    </ion-row>
+  <div><img src="/assets/images/image-007.jpg"></div>
+  <ion-grid>
     <ion-row>
-      <ion-col>
-        <ion-button type="submit" color="success" expand="block">ส่ง</ion-button>
+      <ion-col class="ion-text-center">
+        <h1>กรุณาใส่รหัสผ่านใหม่</h1>
       </ion-col>
     </ion-row>
-  </form>
+    <form>
+      <ion-row>
+        <ion-col>
+          <ion-item lines="full">
+            <ion-label position="floating">รหัสผ่าน</ion-label>
+            <ion-input type="password" required></ion-input>
+          </ion-item>
+
+          <ion-item lines="full">
+            <ion-label position="floating">ยืนยัน รหัสผ่าน</ion-label>
+            <ion-input type="password" required></ion-input>
+          </ion-item>
+        </ion-col>
+      </ion-row>
+      <ion-row>
+        <ion-col>
+          <ion-button type="submit" color="success" expand="block">ส่ง</ion-button>
+        </ion-col>
+      </ion-row>
+    </form>
+  </ion-grid>
 </ion-content>

src/app/tabs/tabs.page.html

 <ion-tabs>
-  <ion-fab vertical="bottom" horizontal="center" translucent="true">
+  <!-- <ion-fab vertical="bottom" horizontal="center" translucent="true">
     <ion-fab-button routerLink="nearme" routerDirection="forward">
     <ion-icon name="navigate"></ion-icon>
     </ion-fab-button>
-  </ion-fab>
+  </ion-fab> -->
   <ion-tab-bar slot="bottom">
     <ion-tab-button tab="home">
       <ion-icon name="home"></ion-icon>

src/app/wp-service.service.ts

 
   getPlaceDetail(id) {
     return this.http.get(
-      "http://tamtime.iamarray.xyz/wp-json/wp/v2/place/"+id+"/?_embed"
+      // "http://tamtime.iamarray.xyz/wp-json/wp/v2/place/"+id+"/?_embed"
+      "/assets/json/place173.json"
     );
   }
 

src/global.scss

   --color: #ffffff;
 }
 
+// ion-content {
+//   --background: linear-gradient(
+//     to bottom,
+//     #a7e9ff,
+//     #8fd8fd,
+//     #7ec7fb,
+//     #78b4f6,
+//     #7c9fee
+//   );
+// }
+
 ion-title {
   font-family: "Kanit", sans-serif !important;
   font-weight: 500;
 
 a {
   text-decoration: none;
- }
- 
-// ion-content {
-//   --background: url(/assets/images/wnr-bg.jpg) no-repeat center/cover fixed;
-// }
+}
+
+.image-page-cover {
+  height: 200px;
+}
 .ios ion-fab-button {
-  position:absolute;
+  position: absolute;
   bottom: 25px;
-}
+}