Skip to content

Commit 3b36d86

Browse files
Gaurav-RamakrishnaGaurav-Ramakrishna
authored
Merge pull request #5 from Liquid-Prep/dev-yz
Dev yz
2 parents 20c4e54 + 820d4e2 commit 3b36d86

11 files changed

Lines changed: 147 additions & 37 deletions

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
<div class="swiper-slide">
1919
<div class="container" fxLayout="column" fxFlexFill fxLayoutAlign="end center" >
2020
<div class="container text-area" fxLayout="column" fxFlexWrap fxLayoutAlign="start center" >
21-
<p class="title" >Step 1:</p>
21+
<p class="title" >Step 1</p>
2222
<p class="description">Get your sensor Ready</p>
2323
</div>
2424
<img mat-card-image class="cardImg" src="../../../assets/measure-guide/graphic-1.png" alt="Step 1:">
@@ -28,8 +28,8 @@
2828
<div class="swiper-slide">
2929
<div class="container" fxLayout="column" fxFlexFill fxLayoutAlign="end center" >
3030
<div class="container text-area" fxLayout="column" fxFlexWrap fxLayoutAlign="start center" >
31-
<p class="title" textWrap="true">Step 2:</p>
32-
<label class="description">Insert the sensor at least 15cm deep</label>
31+
<p class="title" textWrap="true">Step 2</p>
32+
<label class="description">Insert the sensor at least 15 cm deep</label>
3333
</div>
3434
<img mat-card-image class="cardImg" src="../../../assets/measure-guide/graphic-2.png" alt="Step 2:">
3535
</div>
@@ -38,7 +38,7 @@
3838
<div class="swiper-slide">
3939
<div class="container" fxLayout="column" fxFlexFill fxLayoutAlign="end center" >
4040
<div class="container text-area sensor-text" fxLayout="column" fxFlexWrap fxLayoutAlign="start center">
41-
<p class="title" textWrap="true">Step 3:</p>
41+
<p class="title" textWrap="true">Step 3</p>
4242
<p class="description" flex textWrap="false">Connect to Sensor</p>
4343
<button mat-flat-button class="c-btn" (click)="onSensorConnect('usb')"><mat-icon>usb</mat-icon> Connect with USB</button>
4444
<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‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -34,20 +34,20 @@
3434
}
3535

3636
.title {
37-
color: black;
38-
font-size: 16px;
37+
color: #cccccc;
38+
font-size: 18px;
3939
margin-top: 30px;
4040
margin-bottom: 5px;
4141
}
4242

4343
.description {
44-
color: gray;
45-
font-size: 14px;
44+
color: #666666;
45+
font-size: 18px;
4646
margin-top: 5px;
4747
margin-bottom: 10px;
4848
text-align: center;
4949
width:240px;
50-
word-break: break-all;
50+
word-break: normal;
5151
white-space: normal;
5252
}
5353

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

Lines changed: 48 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,67 @@
1+
<mat-toolbar style="background-color: #fff">
2+
<div class="container" fxLayout="row" fxFlexFill fxLayoutAlign="end center" >
3+
<button mat-icon-button aria-label="read text" (click)="onGetStarted()">
4+
<span Class="tool-bar-text">SKIP</span>
5+
</button>
6+
</div>
7+
</mat-toolbar>
8+
19
<div class="content-container">
2-
<swiper class="swiper-container"
10+
<swiper #swiper class="swiper-container"
311
[config]="config"
412
[disabled]="disabled"
513
(indexChange)="onIndexChange($event)"
614
(swiperTransitionStart)="onSwiperEvent('transitionStart')"
715
(swiperTransitionEnd)="onSwiperEvent('transitionEnd')">
816

917
<div class="swiper-slide">
10-
<div fxLayout="column" fxFlexFill
11-
fxLayoutAlign="center center">
12-
<img src="assets/welcome-1.png" alt="welcome 1" width="196" height="302">
13-
<h1 class="title">Save water</h1>
14-
<h3 class="description">Crops grow with the right amount of water</h3>
18+
<div class="container" fxLayout="column" fxFlexFill fxLayoutAlign="center center">
19+
<img src="assets/welcome-bucket.png" alt="welcome 1" width="196" height="302">
20+
<div class="container text-area" fxLayout="column" fxFlexWrap fxLayoutAlign="center center" >
21+
<p class="title">Save water</p>
22+
<p class="description">Only use the amount of water your crops need</p>
23+
</div>
1524
</div>
1625
</div>
26+
1727
<div class="swiper-slide" >
18-
<div fxLayout="column" fxFlexFill fxLayoutAlign="center center" >
19-
<img src="assets/welcome-2.png" alt="welcome 2" width="196" height="302">
20-
<h1 class="title">Save water</h1>
21-
<h3 class="description">Crops grow with the right amount of water</h3>
28+
<div class="container" fxLayout="column" fxFlexFill fxLayoutAlign="center center" >
29+
<img src="assets/welcome-plant.png" alt="welcome 2" width="196" height="302">
30+
<div class="container text-area" fxLayout="column" fxFlexWrap fxLayoutAlign="center center" >
31+
<p class="title">Grow your Crop</p>
32+
<p class="description">Your crop has different water needs at every stage of growth</p>
33+
</div>
2234
</div>
2335
</div>
36+
2437
<div class="swiper-slide">
25-
<div fxLayout="column" fxFlexFill fxLayoutAlign="center center" >
26-
<img src="assets/welcome-3.png" alt="welcome 3" width="196" height="302">
27-
<h1 class="title">Save water</h1>
28-
<h3 class="description">Crops grow with the right amount of water</h3>
29-
<button mat-flat-button class="c-btn" (click)="onGetStarted()">GET STARTED</button>
38+
<div class="container" fxLayout="column" fxFlexFill fxLayoutAlign="center center" >
39+
<img src="assets/welcome-measure.png" alt="welcome 3" width="196" height="302">
40+
<div class="container text-area" fxLayout="column" fxFlexWrap fxLayoutAlign="center center" >
41+
<p class="title">Measure</p>
42+
<p class="description">Soil moisture level is the key to accurate watering advice</p>
43+
</div>
3044
</div>
3145
</div>
3246

3347
</swiper>
3448
</div>
49+
50+
<mat-toolbar class="toolbarNav">
51+
52+
<div class="container" fxLayout="row" fxFlexFill fxLayoutAlign="space-between center" >
53+
54+
<button [ngClass]="{'invisible': isFirstSlide}" mat-icon-button style="margin-right: 24px">
55+
<mat-icon class="blue-icon" (click)="onSlideNav('back')">navigate_before</mat-icon>
56+
<span Class="tool-bar-text" (click)="onSlideNav('back')">BACK </span>
57+
</button>
58+
59+
<app-slide-indicator [current]="curIndex" [length]="3"></app-slide-indicator>
60+
61+
<button mat-icon-button style="margin-right: 24px">
62+
<span Class="tool-bar-text" (click)="onSlideNav('next')">NEXT</span>
63+
<mat-icon class="blue-icon" (click)="onSlideNav('next')">navigate_next</mat-icon>
64+
</button>
65+
66+
</div>
67+
</mat-toolbar>

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

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,3 +55,57 @@ h3.description {
5555
color: gray;
5656
margin-top: 6px;
5757
}
58+
59+
.title {
60+
color: #000;
61+
font-size: 18px;
62+
font-weight: bold;
63+
margin-top: 32px;
64+
margin-bottom: 6px;
65+
}
66+
67+
.description {
68+
color: #666;
69+
font-size: 14px;
70+
margin-top: 4px;
71+
margin-bottom: 10px;
72+
text-align: center;
73+
width:240px;
74+
word-break: normal;
75+
white-space: normal;
76+
}
77+
78+
.toolbarNav{
79+
position: fixed;
80+
bottom: 0;
81+
z-index: 1000;
82+
//display: flex;
83+
//justify-content: space-between;
84+
padding: 2px;
85+
background-color: white;
86+
87+
-webkit-box-shadow: 3px 2px 2px 3px #ccc; /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
88+
-moz-box-shadow: 3px 2px 2px 3px #ccc; /* Firefox 3.5 - 3.6 */
89+
box-shadow: 2px 2px 2px 3px #ccc; /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
90+
}
91+
92+
.tool-bar-spacer {
93+
flex: 1 1 auto;
94+
}
95+
96+
.blue-icon {
97+
color: #2F4FFE;
98+
}
99+
100+
.tool-bar-text {
101+
font-size: medium;
102+
color: #2F4FFE;
103+
}
104+
105+
.tool-bar-text-disable{
106+
color: rgba(black, 0.38);
107+
}
108+
109+
.invisible{
110+
visibility:hidden
111+
}

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

Lines changed: 36 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
1-
import {Component, Inject, OnInit} from '@angular/core';
1+
import {Component, Inject, OnInit, ViewChild} from '@angular/core';
22
import { SwiperOptions } from 'swiper';
33
import { Router, ActivatedRoute} from '@angular/router';
44
import {LOCAL_STORAGE, StorageService} from 'ngx-webstorage-service';
5+
import {SwiperComponent} from "ngx-swiper-wrapper";
56

67

78
@Component({
@@ -28,30 +29,27 @@ export class WelcomeComponent implements OnInit {
2829
mousewheel: true,
2930
scrollbar: false,
3031
navigation: false,
31-
pagination: {
32-
el: '.swiper-pagination',
33-
clickable: true,
34-
hideOnClick: false
35-
},
36-
autoplay: {
37-
delay: 2000,
38-
stopOnLastSlide: true,
39-
disableOnInteraction: true,
40-
waitForTransition: false
41-
},
32+
pagination: false,
33+
autoplay: false,
4234
speed: 500,
4335
longSwipesRatio: 0.1,
4436
longSwipesMs: 100,
4537
threshold: 5
4638
};
4739

40+
@ViewChild(SwiperComponent, { static: false }) swiper?: SwiperComponent;
41+
42+
public curIndex = 0;
43+
public isFirstSlide = true;
44+
public isLastSlide = false;
45+
4846
public disabled = false;
4947

5048
private firstStart = true;
5149

5250
ngOnInit(): void {
5351
this.firstStart = this.storage.get(this.IS_FIRST_START);
54-
if (this.firstStart !== undefined){
52+
if (this.firstStart !== undefined && this.firstStart === false){
5553
this.router.navigate(['my-crops']).then(r => {});
5654
}
5755
}
@@ -62,8 +60,33 @@ export class WelcomeComponent implements OnInit {
6260
}
6361

6462
public onIndexChange(index: number): void {
63+
64+
this.curIndex = index;
65+
if (index === 0 ){
66+
this.isFirstSlide = true;
67+
this.isLastSlide = false;
68+
}else if (index === 2){
69+
this.isFirstSlide = false;
70+
this.isLastSlide = true;
71+
}else{
72+
this.isFirstSlide = false;
73+
this.isLastSlide = false;
74+
}
6575
}
6676

6777
public onSwiperEvent(event: string): void {
6878
}
79+
80+
onSlideNav(direction: string){
81+
if (direction === 'next'){
82+
if (this.isLastSlide === true){
83+
this.onGetStarted();
84+
}else{
85+
this.swiper.directiveRef.nextSlide(200);
86+
}
87+
}else if (direction === 'back'){
88+
this.swiper.directiveRef.prevSlide(200);
89+
}else {
90+
}
91+
}
6992
}

‎liquid-prep-app/src/assets/welcome-1.png‎

-27.1 KB
Binary file not shown.

‎liquid-prep-app/src/assets/welcome-2.png‎

-19.5 KB
Binary file not shown.

‎liquid-prep-app/src/assets/welcome-3.png‎

-15.3 KB
Binary file not shown.

‎liquid-prep-app/src/assets/welcome-bucket.png‎

23.5 KB
Loading

‎liquid-prep-app/src/assets/welcome-measure.png‎

6.55 KB
Loading

0 commit comments

Comments
 (0)