Merge pull request #5 from Liquid-Prep/dev-yz

Dev yz

liquid-prep-app/src/app/components/measure-soil/measure-soil.component.html

@@ -18,7 +18,7 @@
           <div class="swiper-slide">
             <div class="container" fxLayout="column" fxFlexFill fxLayoutAlign="end center" >
               <div class="container text-area" fxLayout="column" fxFlexWrap fxLayoutAlign="start center" >
-                <p class="title" >Step 1:</p>
+                <p class="title" >Step 1</p>
                 <p class="description">Get your sensor Ready</p>
               </div>
               <img mat-card-image class="cardImg" src="../../../assets/measure-guide/graphic-1.png" alt="Step 1:">
@@ -28,8 +28,8 @@
           <div class="swiper-slide">
             <div class="container" fxLayout="column" fxFlexFill fxLayoutAlign="end center" >
               <div class="container text-area"  fxLayout="column" fxFlexWrap fxLayoutAlign="start center" >
-                <p class="title" textWrap="true">Step 2:</p>
-                <label class="description">Insert the sensor at least 15cm deep</label>
+                <p class="title" textWrap="true">Step 2</p>
+                <label class="description">Insert the sensor at least 15 cm deep</label>
               </div>
               <img mat-card-image class="cardImg" src="../../../assets/measure-guide/graphic-2.png" alt="Step 2:">
             </div>
@@ -38,7 +38,7 @@
           <div class="swiper-slide">
             <div class="container" fxLayout="column" fxFlexFill fxLayoutAlign="end center" >
               <div class="container text-area sensor-text" fxLayout="column" fxFlexWrap fxLayoutAlign="start center">
-                <p class="title" textWrap="true">Step 3:</p>
+                <p class="title" textWrap="true">Step 3</p>
                 <p class="description" flex textWrap="false">Connect to Sensor</p>
                 <button mat-flat-button class="c-btn" (click)="onSensorConnect('usb')"><mat-icon>usb</mat-icon> Connect with USB</button>
                 <button mat-flat-button class="c-btn" (click)="onSensorConnect('ble')"><mat-icon>bluetooth</mat-icon> Connect with Bluetooth </button>

liquid-prep-app/src/app/components/measure-soil/measure-soil.component.scss

@@ -34,20 +34,20 @@
 }
 
 .title {
-  color: black;
-  font-size: 16px;
+  color: #cccccc;
+  font-size: 18px;
   margin-top: 30px;
   margin-bottom: 5px;
 }
 
 .description {
-  color: gray;
-  font-size: 14px;
+  color: #666666;
+  font-size: 18px;
   margin-top: 5px;
   margin-bottom: 10px;
   text-align: center;
   width:240px;
-  word-break: break-all;
+  word-break: normal;
   white-space: normal;
 }
 

liquid-prep-app/src/app/components/welcome/welcome.component.html

@@ -1,34 +1,67 @@
+<mat-toolbar style="background-color: #fff">
+  <div class="container" fxLayout="row" fxFlexFill fxLayoutAlign="end center" >
+    <button mat-icon-button aria-label="read text" (click)="onGetStarted()">
+      <span Class="tool-bar-text">SKIP</span>
+    </button>
+  </div>
+</mat-toolbar>
+
 <div class="content-container">
-  <swiper class="swiper-container"
+  <swiper #swiper class="swiper-container"
           [config]="config"
           [disabled]="disabled"
           (indexChange)="onIndexChange($event)"
           (swiperTransitionStart)="onSwiperEvent('transitionStart')"
           (swiperTransitionEnd)="onSwiperEvent('transitionEnd')">
 
     <div class="swiper-slide">
-      <div fxLayout="column" fxFlexFill
-           fxLayoutAlign="center center">
-        <img src="assets/welcome-1.png" alt="welcome 1" width="196" height="302">
-        <h1 class="title">Save water</h1>
-        <h3 class="description">Crops grow with the right amount of water</h3>
+      <div class="container" fxLayout="column" fxFlexFill fxLayoutAlign="center center">
+        <img src="assets/welcome-bucket.png" alt="welcome 1" width="196" height="302">
+        <div class="container text-area" fxLayout="column" fxFlexWrap fxLayoutAlign="center center" >
+          <p class="title">Save water</p>
+          <p class="description">Only use the amount of water your crops need</p>
+        </div>
       </div>
     </div>
+
     <div class="swiper-slide" >
-      <div fxLayout="column" fxFlexFill fxLayoutAlign="center center" >
-        <img src="assets/welcome-2.png" alt="welcome 2" width="196" height="302">
-        <h1 class="title">Save water</h1>
-        <h3 class="description">Crops grow with the right amount of water</h3>
+      <div class="container" fxLayout="column" fxFlexFill fxLayoutAlign="center center" >
+        <img src="assets/welcome-plant.png" alt="welcome 2" width="196" height="302">
+        <div class="container text-area" fxLayout="column" fxFlexWrap fxLayoutAlign="center center" >
+          <p class="title">Grow your Crop</p>
+          <p class="description">Your crop has different water needs at every stage of growth</p>
+        </div>
       </div>
     </div>
+
     <div class="swiper-slide">
-      <div fxLayout="column" fxFlexFill fxLayoutAlign="center center" >
-        <img src="assets/welcome-3.png" alt="welcome 3" width="196" height="302">
-        <h1 class="title">Save water</h1>
-        <h3 class="description">Crops grow with the right amount of water</h3>
-        <button mat-flat-button class="c-btn" (click)="onGetStarted()">GET STARTED</button>
+      <div class="container" fxLayout="column" fxFlexFill fxLayoutAlign="center center" >
+        <img src="assets/welcome-measure.png" alt="welcome 3" width="196" height="302">
+        <div class="container text-area" fxLayout="column" fxFlexWrap fxLayoutAlign="center center" >
+          <p class="title">Measure</p>
+          <p class="description">Soil moisture level is the key to accurate watering advice</p>
+        </div>
       </div>
     </div>
 
   </swiper>
 </div>
+
+<mat-toolbar class="toolbarNav">
+
+  <div class="container" fxLayout="row" fxFlexFill fxLayoutAlign="space-between center" >
+
+    <button [ngClass]="{'invisible': isFirstSlide}" mat-icon-button style="margin-right: 24px">
+      <mat-icon class="blue-icon" (click)="onSlideNav('back')">navigate_before</mat-icon>
+      <span Class="tool-bar-text" (click)="onSlideNav('back')">BACK  </span>
+    </button>
+
+    <app-slide-indicator [current]="curIndex" [length]="3"></app-slide-indicator>
+
+    <button  mat-icon-button style="margin-right: 24px">
+      <span Class="tool-bar-text" (click)="onSlideNav('next')">NEXT</span>
+      <mat-icon class="blue-icon" (click)="onSlideNav('next')">navigate_next</mat-icon>
+    </button>
+
+  </div>
+</mat-toolbar>

liquid-prep-app/src/app/components/welcome/welcome.component.scss

@@ -55,3 +55,57 @@ h3.description {
   color: gray;
   margin-top: 6px;
 }
+
+.title {
+  color: #000;
+  font-size: 18px;
+  font-weight: bold;
+  margin-top: 32px;
+  margin-bottom: 6px;
+}
+
+.description {
+  color: #666;
+  font-size: 14px;
+  margin-top: 4px;
+  margin-bottom: 10px;
+  text-align: center;
+  width:240px;
+  word-break: normal;
+  white-space: normal;
+}
+
+.toolbarNav{
+  position: fixed;
+  bottom: 0;
+  z-index: 1000;
+  //display: flex;
+  //justify-content: space-between;
+  padding: 2px;
+  background-color: white;
+
+  -webkit-box-shadow: 3px 2px 2px 3px #ccc;  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
+  -moz-box-shadow:    3px 2px 2px 3px #ccc;  /* Firefox 3.5 - 3.6 */
+  box-shadow:        2px 2px 2px 3px #ccc;  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
+}
+
+.tool-bar-spacer {
+  flex: 1 1 auto;
+}
+
+.blue-icon {
+  color: #2F4FFE;
+}
+
+.tool-bar-text {
+  font-size: medium;
+  color: #2F4FFE;
+}
+
+.tool-bar-text-disable{
+  color: rgba(black, 0.38);
+}
+
+.invisible{
+  visibility:hidden
+}

liquid-prep-app/src/app/components/welcome/welcome.component.ts

@@ -1,7 +1,8 @@
-import {Component, Inject, OnInit} from '@angular/core';
+import {Component, Inject, OnInit, ViewChild} from '@angular/core';
 import { SwiperOptions } from 'swiper';
 import { Router, ActivatedRoute} from '@angular/router';
 import {LOCAL_STORAGE, StorageService} from 'ngx-webstorage-service';
+import {SwiperComponent} from "ngx-swiper-wrapper";
 
 
 @Component({
@@ -28,30 +29,27 @@ export class WelcomeComponent implements OnInit {
     mousewheel: true,
     scrollbar: false,
     navigation: false,
-    pagination: {
-      el: '.swiper-pagination',
-      clickable: true,
-      hideOnClick: false
-    },
-    autoplay: {
-      delay: 2000,
-      stopOnLastSlide: true,
-      disableOnInteraction: true,
-      waitForTransition: false
-    },
+    pagination: false,
+    autoplay: false,
     speed: 500,
     longSwipesRatio: 0.1,
     longSwipesMs: 100,
     threshold: 5
   };
 
+  @ViewChild(SwiperComponent, { static: false }) swiper?: SwiperComponent;
+
+  public curIndex = 0;
+  public isFirstSlide = true;
+  public isLastSlide = false;
+
   public disabled = false;
 
   private firstStart = true;
 
   ngOnInit(): void {
     this.firstStart = this.storage.get(this.IS_FIRST_START);
-    if (this.firstStart !== undefined){
+    if (this.firstStart !== undefined && this.firstStart === false){
       this.router.navigate(['my-crops']).then(r => {});
     }
   }
@@ -62,8 +60,33 @@ export class WelcomeComponent implements OnInit {
   }
 
   public onIndexChange(index: number): void {
+
+    this.curIndex = index;
+    if (index === 0 ){
+      this.isFirstSlide = true;
+      this.isLastSlide = false;
+    }else if (index === 2){
+      this.isFirstSlide = false;
+      this.isLastSlide = true;
+    }else{
+      this.isFirstSlide = false;
+      this.isLastSlide = false;
+    }
   }
 
   public onSwiperEvent(event: string): void {
   }
+
+  onSlideNav(direction: string){
+    if (direction === 'next'){
+      if (this.isLastSlide === true){
+        this.onGetStarted();
+      }else{
+        this.swiper.directiveRef.nextSlide(200);
+      }
+    }else if (direction === 'back'){
+      this.swiper.directiveRef.prevSlide(200);
+    }else {
+    }
+  }
 }