Skip to content

Commit 20c4e54

Browse files
Gaurav-RamakrishnaGaurav-Ramakrishna
authored
Merge pull request #4 from Liquid-Prep/dev-yz
Dev yz
2 parents ca5b2dc + 255edd7 commit 20c4e54

8 files changed

Lines changed: 4371 additions & 5223 deletions

File tree

‎liquid-prep-app/package-lock.json‎

Lines changed: 4238 additions & 5204 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎liquid-prep-app/src/app/app.module.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@ import { SeedDateComponent } from './components/seed-date/seed-date.component';
3636
import { DataService } from './service/DataService';
3737
import { WaterAdviceService } from './service/WaterAdviceService';
3838
import { DateAgoPipe } from './pipes/date-ago.pipe';
39+
import { SlideIndicatorComponent } from './components/slide-indicator/slide-indicator.component';
3940

4041
const DEFAULT_SWIPER_CONFIG: SwiperConfigInterface = {
4142
observer: true,
@@ -55,7 +56,8 @@ const DEFAULT_SWIPER_CONFIG: SwiperConfigInterface = {
5556
SettingsComponent,
5657
AdviceComponent,
5758
SeedDateComponent,
58-
DateAgoPipe],
59+
DateAgoPipe,
60+
SlideIndicatorComponent],
5961
imports: [
6062
BrowserModule,
6163
MaterialModule,

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

Lines changed: 17 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,9 @@
1111
</mat-toolbar>
1212

1313
<div *ngIf="measureView=='before-measuring'" class="content-container" >
14-
<swiper *ngIf="measureView=='before-measuring'" #swiper class="swiper-container" [config]="config" [(index)]="index" [disabled]="disabled"
15-
(indexChange)="onIndexChange($event)" (swiperTransitionStart)="onSwiperEvent('transitionStart')"
16-
(swiperTransitionEnd)="onSwiperEvent('transitionEnd')">
14+
<swiper *ngIf="measureView=='before-measuring'" #swiper class="swiper-container" [config]="config" [(index)]="curIndex" [disabled]="disabled"
15+
(indexChange)="onIndexChange($event)" (swiperTransitionStart)="onSwiperEvent('transitionStart')"
16+
(swiperTransitionEnd)="onSwiperEvent('transitionEnd')">
1717

1818
<div class="swiper-slide">
1919
<div class="container" fxLayout="column" fxFlexFill fxLayoutAlign="end center" >
@@ -75,15 +75,20 @@
7575
</div>
7676

7777
<mat-toolbar *ngIf="measureView=='before-measuring'" class="toolbarNav">
78-
<button *ngIf="!isFirstSlide" mat-icon-button [disabled]=isFirstSlide>
79-
<mat-icon [ngClass]="{'blue-icon': !isFirstSlide}" (click)="onSlideNav('back')">navigate_before</mat-icon>
80-
<span [ngClass]="isFirstSlide? 'tool-bar-text-disable' : 'tool-bar-text'" (click)="onSlideNav('back')">BACK</span>
81-
</button>
8278

83-
<span class="tool-bar-spacer"></span>
79+
<div class="container" fxLayout="row" fxFlexFill fxLayoutAlign="space-between center" >
8480

85-
<button *ngIf="!isLastSlide" mat-icon-button [disabled]=isLastSlide style="margin-right: 24px">
86-
<span [ngClass]="isLastSlide? 'tool-bar-text-disable' : 'tool-bar-text'" (click)="onSlideNav('next')">NEXT</span>
87-
<mat-icon [ngClass]="{'blue-icon': !isLastSlide}" (click)="onSlideNav('next')">navigate_next</mat-icon>
88-
</button>
81+
<button [ngClass]="{'invisible': isFirstSlide}" mat-icon-button style="margin-right: 24px">
82+
<mat-icon class="blue-icon" (click)="onSlideNav('back')">navigate_before</mat-icon>
83+
<span Class="tool-bar-text" (click)="onSlideNav('back')">BACK </span>
84+
</button>
85+
86+
<app-slide-indicator [current]="curIndex" [length]="3"></app-slide-indicator>
87+
88+
<button [ngClass]="{'invisible': isLastSlide}" mat-icon-button style="margin-right: 24px">
89+
<span Class="tool-bar-text" (click)="onSlideNav('next')">NEXT</span>
90+
<mat-icon class="blue-icon" (click)="onSlideNav('next')">navigate_next</mat-icon>
91+
</button>
92+
93+
</div>
8994
</mat-toolbar>

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

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -118,9 +118,9 @@
118118
position: fixed;
119119
bottom: 0;
120120
z-index: 1000;
121-
display: flex;
122-
justify-content: space-between;
123-
padding: 2px 0px;
121+
//display: flex;
122+
//justify-content: space-between;
123+
padding: 0px 0px;
124124
background-color: white;
125125
//-webkit-box-shadow: 3px 3px 5px 6px #ccc; /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
126126
//-moz-box-shadow: 3px 3px 5px 6px #ccc; /* Firefox 3.5 - 3.6 */
@@ -139,3 +139,7 @@
139139
.tool-bar-text-disable{
140140
color: rgba(black, 0.38);
141141
}
142+
143+
.invisible{
144+
visibility:hidden
145+
}

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ export class MeasureSoilComponent implements OnInit, AfterViewInit {
3535

3636
@ViewChild(SwiperComponent, { static: false }) swiper?: SwiperComponent;
3737

38-
public index = 0;
38+
public curIndex = 0;
3939
public isFirstSlide = true;
4040
public isLastSlide = false;
4141
public disabled = false;
@@ -219,14 +219,14 @@ export class MeasureSoilComponent implements OnInit, AfterViewInit {
219219
if (sensorMoisturePercantage > 100.00) {
220220
return 100.00;
221221
} else if (sensorMoisturePercantage < 0.0) {
222-
return 0.0
222+
return 0.0;
223223
} else {
224224
return sensorMoisturePercantage;
225225
}
226226
}
227227

228228
public onIndexChange(index: number): void {
229-
this.index = index;
229+
this.curIndex = index;
230230
if (index === 0 ){
231231
this.isFirstSlide = true;
232232
this.isLastSlide = false;

‎liquid-prep-app/src/app/components/slide-indicator/slide-indicator.component.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<div class="indicators-wrapper" *ngIf="indicators.length > 1">
2+
<span *ngFor="let item of indicators" [class]="getIndicatorClass(item.ref)">{{ item.ref }}</span>
3+
</div>

‎liquid-prep-app/src/app/components/slide-indicator/slide-indicator.component.scss‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
.indicators-wrapper {
2+
display: flex;
3+
justify-content: center;
4+
align-items: center;
5+
span {
6+
width: 5px;
7+
height: 5px;
8+
margin: 2px;
9+
border-radius: 50%;
10+
background-color: #d3d3d3;
11+
overflow: hidden;
12+
transition: all 500ms ease-out;
13+
text-indent: -9999px;
14+
15+
&:first-child {
16+
margin-left: 20px;
17+
}
18+
&:last-child {
19+
margin-right: 20px;
20+
}
21+
}
22+
.active {
23+
width: 8px;
24+
height: 8px;
25+
margin: 5px;
26+
background-color: #000000;
27+
}
28+
29+
.inactive {
30+
width: 8px;
31+
height: 8px;
32+
margin: 5px;
33+
background-color: #cccccc;
34+
}
35+
36+
.small {
37+
width: 4px;
38+
height: 4px;
39+
margin: 3px;
40+
&:first-child {
41+
margin-left: 10px;
42+
}
43+
&:last-child {
44+
margin-right: 10px;
45+
}
46+
}
47+
.micro {
48+
width: 2px;
49+
height: 2px;
50+
margin: 4px;
51+
}
52+
.hidden {
53+
width: 0;
54+
height: 0;
55+
margin: 4px 0;
56+
}
57+
}

‎liquid-prep-app/src/app/components/slide-indicator/slide-indicator.component.ts‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import {Component, Input, OnChanges, OnInit, SimpleChanges} from '@angular/core';
2+
3+
class Indicator {
4+
constructor(public ref: number) {}
5+
}
6+
7+
@Component({
8+
selector: 'app-slide-indicator',
9+
templateUrl: './slide-indicator.component.html',
10+
styleUrls: ['./slide-indicator.component.scss']
11+
})
12+
export class SlideIndicatorComponent implements OnInit, OnChanges{
13+
14+
@Input() public current: number;
15+
@Input() public length: number;
16+
public indicators: Indicator[] = [];
17+
18+
constructor() {
19+
}
20+
21+
ngOnInit(): void {
22+
}
23+
24+
ngOnChanges(changes: SimpleChanges): void {
25+
const lengthChanged = changes.length;
26+
if (lengthChanged){
27+
for (let i = 0; i < lengthChanged.currentValue; i++) {
28+
this.indicators.push(new Indicator(i));
29+
}
30+
}
31+
const curChanged = changes.current;
32+
if (curChanged) {
33+
}
34+
}
35+
36+
public getIndicatorClass(ref: number): string {
37+
if (ref === this.current){
38+
return 'active';
39+
}else {
40+
return 'inactive';
41+
}
42+
}
43+
}

0 commit comments

Comments
 (0)