fix welcome component issue after ng upgrade (#79)

liquid-prep-app/package.json

@@ -28,8 +28,6 @@
     "@angular/platform-browser-dynamic": "^18.1.3",
     "@angular/router": "^18.1.3",
     "@angular/service-worker": "^18.1.3",
-    "ng2-search-filter": "^0.5.1",
-    "ngx-swiper-wrapper": "^10.0.0",
     "ngx-webstorage-service": "^4.1.0",
     "rxjs": "^6.6.2",
     "guid-typescript": "^1.0.9",
@@ -61,4 +59,4 @@
     "tslint": "^6.1.0",
     "typescript": "^5.4.5"
   }
-}
+}

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

@@ -68,7 +68,6 @@ import { AddFieldComponent } from './components/dashboard/fields/add-field/add-f
 import { EditFieldComponent } from './components/dashboard/fields/edit-field/edit-field.component';
 import { SensorListComponent } from './components/dashboard/fields/sensor-list/sensor-list.component';
 import { SplashScreenComponent } from './components/splash-screen/splash-screen.component';
-import { SwiperDirectiveDirective } from './directives/swiper-directive.directive';
 
 @NgModule({ declarations: [
         AppComponent,
@@ -102,7 +101,6 @@ import { SwiperDirectiveDirective } from './directives/swiper-directive.directiv
         MoistureLogsComponent,
         SensorListComponent,
         SplashScreenComponent,
-        SwiperDirectiveDirective,
     ],
     bootstrap: [AppComponent],
     schemas: [

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

@@ -6,8 +6,7 @@
   </div>
 </mat-toolbar>
 
-<swiper-container appSwiper #swiper class="content-container" speed="400"  css-mode="true">
-
+<swiper-container  #swiper class="swiper-container" speed="400" loop="false" pagination="true">
     <swiper-slide class="swiper-item" 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" fxLayoutAlign="center center">
@@ -29,24 +28,23 @@
         <p class="description">Soil moisture level is the key to accurate watering advice</p>
       </div>
     </swiper-slide>
-
 </swiper-container>
 
 <mat-toolbar class="toolbarNav">
 
-  <div class="container" fxLayout="row" fxFlexFill fxLayoutAlign="space-between center" >
+  <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  fxLayout="row"  fxLayoutAlign="space-between center" [ngClass]="{'invisible': isFirstSlide}" (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  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 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>

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

@@ -1,7 +1,7 @@
 div {
   overflow: hidden;
 }
-.content-container {
+.swiper-container {
   position: relative;
   height: 600px;
   min-height: 0;
@@ -79,6 +79,8 @@ h3.description {
 .tool-bar-text {
   font-size: medium;
   color: #2F4FFE;
+  display: flex;
+  align-items: center;
 }
 
 .tool-bar-text-disable{

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

@@ -1,8 +1,6 @@
 import {AfterViewInit, Component, Inject, OnInit} from '@angular/core';
 import { Router, ActivatedRoute} from '@angular/router';
 import {LOCAL_STORAGE, StorageService} from 'ngx-webstorage-service';
-import Swiper from 'swiper';
-import { SwiperOptions } from 'swiper/types';
 
 @Component({
   selector: 'app-welcome',
@@ -21,10 +19,8 @@ export class WelcomeComponent implements OnInit,AfterViewInit{
   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 && this.firstStart === false){
@@ -33,63 +29,30 @@ export class WelcomeComponent 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 onGetStarted(){
     this.router.navigate(['dashboard']).then(r => {});
     this.storage.set(this.IS_FIRST_START, false);
   }
 
-  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;
-    }
-  }
-
   onSlideNav(direction: string){
     const swiperEl = document.querySelector('swiper-container');
     if (direction === 'next'){
-      if (this.isLastSlide === true){
+      if(swiperEl.swiper.isEnd){
         this.onGetStarted();
       }else{
-        // this.swiper.directiveRef.nextSlide(200);
         swiperEl.swiper.slideNext(200);
       }
-    }else if (direction === 'back'){
-      // this.swiper.directiveRef.prevSlide(200);
+    }else if  (direction === 'back'){
       swiperEl.swiper.slidePrev(200);
     }else {
     }
-    console.log('onSlideNav swiperEl',swiperEl.swiper.realIndex);
   }
 }