fix measure soil component issue after ng upgrade (#80)

Liquid-Prep · Aug 15, 2024 · 5c47408 · 5c47408
1 parent bbca0af
commit 5c47408
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 83 deletions.
diff --git a/liquid-prep-app/src/app/components/measure-soil/measure-soil.component.html b/liquid-prep-app/src/app/components/measure-soil/measure-soil.component.html
@@ -4,7 +4,7 @@
 
   <div *ngIf="measureView=='before-measuring'" class="content-container" >
 
-    <swiper-container appSwiper #swiper class="content-container" speed="500" css-mode="true">
+    <swiper-container #swiper class="content-container" speed="400" loop="false">
       <swiper-slide class="container" fxLayout="column" fxFlexFill fxLayoutAlign="end center">
           <div class="container text-area" fxLayout="column" fxFlexWrap fxLayoutAlign="start center">
             <p class="title" >Loosen the soil</p>
@@ -23,8 +23,11 @@
           <div class="container text-area sensor-text" fxLayout="column" fxFlexWrap fxLayoutAlign="start center">
             <p class="description" flex textWrap="false">Connect to Sensor</p>
             <p class="description"></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>
+            <button *ngIf="enableUSB" 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>
           </div>
           <img mat-card-image class="cardImg" src="../../../assets/measure-guide/step-3-connect-the-sensor.png" alt="Connect to Sensor" />
       </swiper-slide>
@@ -69,20 +72,19 @@
   </div>
 
   <mat-toolbar *ngIf="measureView=='before-measuring'" 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>
+        <div [ngClass]="{'invisible': isFirstSlide}" fxLayout="row" fxLayoutAlign="space-between center" (click)="onSlideNav('back')">
+          <mat-icon class="blue-icon">navigate_before</mat-icon>
+          <span Class="tool-bar-text">BACK</span>
+        </div>
 
         <app-slide-indicator [current]="curIndex" [length]="3"></app-slide-indicator>
 
-        <button [ngClass]="{'invisible': isLastSlide}" 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 [ngClass]="{'invisible': isLastSlide}" fxLayout="row" fxLayoutAlign="space-between center" (click)="onSlideNav('next')">
+          <span Class="tool-bar-text">NEXT</span>
+          <mat-icon class="blue-icon">navigate_next</mat-icon>
+        </div>
 
     </div>
   </mat-toolbar>
diff --git a/liquid-prep-app/src/app/components/measure-soil/measure-soil.component.scss b/liquid-prep-app/src/app/components/measure-soil/measure-soil.component.scss
@@ -8,31 +8,6 @@
   background-color: #fff;
 }
 
-.swiper-container {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-}
-
-.swiper-slide {
-  color: white;
-  background-color: white;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: -webkit-flex;
-  display: flex;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  -webkit-align-items: center;
-  align-items: center;
-}
-
 .title {
   color: #666666;
   font-size: 20px;
@@ -108,6 +83,9 @@
   background-color: #2F4FFE;
   font-size: 16px;
   letter-spacing: 2px;
+  align-items: center;
+  white-space: nowrap;
+  line-height: 2;
 }
 
 .m-button{

diff --git a/liquid-prep-app/src/app/components/measure-soil/measure-soil.component.ts b/liquid-prep-app/src/app/components/measure-soil/measure-soil.component.ts
@@ -1,4 +1,4 @@
-import {AfterViewInit, Component, OnInit, ViewChild} from '@angular/core';
+import {AfterViewInit, Component, OnInit} from '@angular/core';
 import { Location } from '@angular/common';
 import {ActivatedRoute, Router} from '@angular/router';
 import {SoilMoistureService} from '../../service/SoilMoistureService';
@@ -10,10 +10,6 @@ import {PlantGrowthStage} from '../../models/api/CropInfoResp';
 import {HeaderService} from '../../service/header.service';
 import { HeaderConfig } from 'src/app/models/HeaderConfig.interface';
 import {DateTimeUtil} from "../../utility/DateTimeUtil";
-import Swiper from 'swiper';
-import { SwiperOptions } from 'swiper/types';
-
-
 
 @Component({
   selector: 'app-measure-soil',
@@ -43,7 +39,7 @@ export class MeasureSoilComponent implements OnInit, AfterViewInit {
   public curIndex = 0;
   public isFirstSlide = true;
   public isLastSlide = false;
-  public disabled = false;
+  public enableUSB = false;
   public countdownSecond = 5;
   public measureView: 'before-measuring' | 'measuring' | 'after-measuring' = 'before-measuring';
   private interval;
@@ -69,27 +65,12 @@ export class MeasureSoilComponent implements OnInit, AfterViewInit {
   }
 
   ngAfterViewInit(): void {
-    const swiperOptions: SwiperOptions = {
-      a11y: {
-        enabled: true
-      },
-      speed: 400,
-      direction: 'horizontal',
-      on: {
-        init: function () {
-          console.log('on Swiper initialized');
-        },
-        slideNextTransitionEnd: () => {
-          this.onIndexChange(swiper.realIndex);
-          console.log('on slideNextTransitionEnd', swiper.realIndex);
-        },
-        slidePrevTransitionEnd: () => {
-          this.onIndexChange(swiper.realIndex);
-          console.log('on slidePrevTransitionEnd', swiper.realIndex);
-        }
-      }
-    };
-    const swiper = new Swiper('.swiper-container', swiperOptions);
+    const swiperEl = document.querySelector('swiper-container');
+    swiperEl.addEventListener('swiperslidechange', (event) => {
+      this.curIndex = swiperEl.swiper.activeIndex;
+      this.isLastSlide=swiperEl.swiper.isEnd;
+      this.isFirstSlide=swiperEl.swiper.isBeginning;
+    });
   }
 
   public onSensorConnect(connectionOption){
@@ -257,20 +238,6 @@ export class MeasureSoilComponent implements OnInit, AfterViewInit {
     }
   }
 
-  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 volumeClicked() {
   }
 
@@ -332,15 +299,11 @@ export class MeasureSoilComponent implements OnInit, AfterViewInit {
 
   onSlideNav(direction: string){
     const swiperEl = document.querySelector('swiper-container');
-    console.log('onSlideNav swiperEl',swiperEl.swiper.realIndex);
     if (direction === 'next'){
-      // this.swiper.directiveRef.nextSlide(200);
       swiperEl.swiper.slideNext(200);
     }else{
-      // this.swiper.directiveRef.prevSlide(200);
       swiperEl.swiper.slidePrev(200);
     }
-    console.log('onSlideNav swiperEl',swiperEl.swiper.realIndex);
   }
 
   saveMeasuretoCrop(soilMoisture: number){

diff --git a/liquid-prep-app/src/app/components/select-crop/select-crop.component.html b/liquid-prep-app/src/app/components/select-crop/select-crop.component.html
@@ -29,7 +29,7 @@
         <mat-icon>search</mat-icon>
       </button>
       <input class="search-control" type="text" placeholder="Search" [(ngModel)]="searchText">
-      <button mat-button mat-icon-button (click)="searchClose()">
+      <button mat-button (click)="searchClose()">
         <mat-icon>close</mat-icon>
       </button>
     </mat-toolbar-row>