From bbca0af3c4cf3f8fdff25254dd1fec5b2d036ae0 Mon Sep 17 00:00:00 2001 From: Yongcan Date: Wed, 7 Aug 2024 21:49:48 -0300 Subject: [PATCH] fix welcome component issue after ng upgrade (#79) --- liquid-prep-app/package-lock.json | 21 -------- liquid-prep-app/package.json | 4 +- liquid-prep-app/src/app/app.module.ts | 2 - .../components/welcome/welcome.component.html | 22 ++++---- .../components/welcome/welcome.component.scss | 4 +- .../components/welcome/welcome.component.ts | 53 +++---------------- .../swiper-directive.directive.spec.ts | 8 --- .../directives/swiper-directive.directive.ts | 20 ------- 8 files changed, 22 insertions(+), 112 deletions(-) delete mode 100644 liquid-prep-app/src/app/directives/swiper-directive.directive.spec.ts delete mode 100644 liquid-prep-app/src/app/directives/swiper-directive.directive.ts diff --git a/liquid-prep-app/package-lock.json b/liquid-prep-app/package-lock.json index 372da23..ccd396b 100644 --- a/liquid-prep-app/package-lock.json +++ b/liquid-prep-app/package-lock.json @@ -22,8 +22,6 @@ "@angular/router": "^18.1.3", "@angular/service-worker": "^18.1.3", "guid-typescript": "^1.0.9", - "ng2-search-filter": "^0.5.1", - "ngx-swiper-wrapper": "^10.0.0", "ngx-webstorage-service": "^4.1.0", "rxjs": "^6.6.2", "swiper": "^11.1.4", @@ -11855,25 +11853,6 @@ "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==", "dev": true }, - "node_modules/ng2-search-filter": { - "version": "0.5.1", - "resolved": "https://registry.npmjs.org/ng2-search-filter/-/ng2-search-filter-0.5.1.tgz", - "integrity": "sha512-noN8R+Gyxo5ZuboEOvq+u0zKio6pEf1IVYQTCZfAfXm6ONmzWu/M2xK0di9oVUprDbPBQXCGUuvD5i2GD+35HA==" - }, - "node_modules/ngx-swiper-wrapper": { - "version": "10.0.0", - "resolved": "https://registry.npmjs.org/ngx-swiper-wrapper/-/ngx-swiper-wrapper-10.0.0.tgz", - "integrity": "sha512-cP7yCV1j9fyPkaEu4muec+4ChwpYq1zn62qR6HcZttZgPcqaSEd8yLB7fp61ASAWR31iKUycVhqNtmsYstMXpA==", - "deprecated": "Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.", - "dependencies": { - "tslib": "^2.0.0" - }, - "peerDependencies": { - "@angular/common": ">=9.0.0", - "@angular/core": ">=9.0.0", - "swiper": ">=6.0.0" - } - }, "node_modules/ngx-webstorage-service": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/ngx-webstorage-service/-/ngx-webstorage-service-4.1.0.tgz", diff --git a/liquid-prep-app/package.json b/liquid-prep-app/package.json index 2325b66..796b276 100644 --- a/liquid-prep-app/package.json +++ b/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" } -} \ No newline at end of file +} diff --git a/liquid-prep-app/src/app/app.module.ts b/liquid-prep-app/src/app/app.module.ts index d1cb5cd..8502318 100644 --- a/liquid-prep-app/src/app/app.module.ts +++ b/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: [ diff --git a/liquid-prep-app/src/app/components/welcome/welcome.component.html b/liquid-prep-app/src/app/components/welcome/welcome.component.html index c352e06..c4b9640 100644 --- a/liquid-prep-app/src/app/components/welcome/welcome.component.html +++ b/liquid-prep-app/src/app/components/welcome/welcome.component.html @@ -6,8 +6,7 @@ - - + welcome 1
@@ -29,24 +28,23 @@

Soil moisture level is the key to accurate watering advice

 - -
+
- +
+ navigate_before + BACK +
- +
+ NEXT + navigate_next +
diff --git a/liquid-prep-app/src/app/components/welcome/welcome.component.scss b/liquid-prep-app/src/app/components/welcome/welcome.component.scss index 04a538b..482aee6 100644 --- a/liquid-prep-app/src/app/components/welcome/welcome.component.scss +++ b/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{ diff --git a/liquid-prep-app/src/app/components/welcome/welcome.component.ts b/liquid-prep-app/src/app/components/welcome/welcome.component.ts index 1e402a2..e8c30ec 100644 --- a/liquid-prep-app/src/app/components/welcome/welcome.component.ts +++ b/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,27 +29,12 @@ 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(){ @@ -61,35 +42,17 @@ export class WelcomeComponent implements OnInit,AfterViewInit{ 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); } } diff --git a/liquid-prep-app/src/app/directives/swiper-directive.directive.spec.ts b/liquid-prep-app/src/app/directives/swiper-directive.directive.spec.ts deleted file mode 100644 index 824f88c..0000000 --- a/liquid-prep-app/src/app/directives/swiper-directive.directive.spec.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { SwiperDirectiveDirective } from './swiper-directive.directive'; - -describe('SwiperDirectiveDirective', () => { - it('should create an instance', () => { - const directive = new SwiperDirectiveDirective(); - expect(directive).toBeTruthy(); - }); -}); diff --git a/liquid-prep-app/src/app/directives/swiper-directive.directive.ts b/liquid-prep-app/src/app/directives/swiper-directive.directive.ts deleted file mode 100644 index f607837..0000000 --- a/liquid-prep-app/src/app/directives/swiper-directive.directive.ts +++ /dev/null @@ -1,20 +0,0 @@ -import {AfterViewInit, Directive, ElementRef, Input} from '@angular/core'; -import { SwiperContainer } from 'swiper/element'; -import SwiperOptions from 'swiper'; - - -@Directive({ - selector: '[appSwiper]' -}) -export class SwiperDirectiveDirective implements AfterViewInit{ - - @Input() config?: SwiperOptions; - - constructor(private el: ElementRef) { } - - ngAfterViewInit(): void { - console.log('SwiperDirective', this.config, this.el.nativeElement); - Object.assign(this.el.nativeElement, this.config); - this.el.nativeElement.initialize(); - } -}