diff --git a/package.json b/package.json index 01e4840..0ca5806 100644 --- a/package.json +++ b/package.json @@ -18,19 +18,9 @@ "@angular/platform-browser": "^15.0.0", "@angular/platform-browser-dynamic": "^15.0.0", "@angular/router": "^15.0.0", - "angularx-qrcode": "^15.0.1", "daisyui": "^2.49.0", - "deepl": "^1.0.13", - "geolib": "^3.3.3", - "nodemon": "^2.0.22", - "os-browserify": "^0.3.0", - "path-browserify": "^1.0.1", - "qrcode": "^1.5.3", "rxjs": "~7.5.0", - "sharp": "^0.32.0", - "stream-browserify": "^3.0.0", "tslib": "^2.3.0", - "util": "^0.12.5", "zone.js": "~0.12.0" }, "devDependencies": { diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 14d17d8..d66cbc5 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -2,14 +2,12 @@ import {NgModule} from '@angular/core'; import {RouterModule} from '@angular/router'; import {HomeComponent} from './home/home.component'; import {DetailComponent} from "./detail/detail.component"; -import {ListComponent} from "./list/list.component"; @NgModule({ imports: [RouterModule.forRoot([ {path: 'home', component: HomeComponent}, - {path: 'location/:location', component: ListComponent}, - {path: 'location/:location/:id', component: DetailComponent}, + {path: 'detail', component: DetailComponent}, {path: '**', redirectTo: 'home'} ])], exports: [RouterModule], diff --git a/src/app/app.component.spec.ts b/src/app/app.component.spec.ts new file mode 100644 index 0000000..d2baafb --- /dev/null +++ b/src/app/app.component.spec.ts @@ -0,0 +1,35 @@ +import { TestBed } from '@angular/core/testing'; +import { RouterTestingModule } from '@angular/router/testing'; +import { AppComponent } from './app.component'; + +describe('AppComponent', () => { + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [ + RouterTestingModule + ], + declarations: [ + AppComponent + ], + }).compileComponents(); + }); + + it('should create the app', () => { + const fixture = TestBed.createComponent(AppComponent); + const app = fixture.componentInstance; + expect(app).toBeTruthy(); + }); + + it(`should have as title 'm-152'`, () => { + const fixture = TestBed.createComponent(AppComponent); + const app = fixture.componentInstance; + expect(app.title).toEqual('m-152'); + }); + + it('should render title', () => { + const fixture = TestBed.createComponent(AppComponent); + fixture.detectChanges(); + const compiled = fixture.nativeElement as HTMLElement; + expect(compiled.querySelector('.content span')?.textContent).toContain('m-152 app is running!'); + }); +}); diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 4a9c5f4..5ab9b3e 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -6,23 +6,17 @@ import { AppComponent } from './app.component'; import { HomeComponent } from './home/home.component'; import { ListComponent } from './list/list.component'; import { DetailComponent } from './detail/detail.component'; -import {FormsModule} from "@angular/forms"; -import { HttpClientModule} from "@angular/common/http"; -import { SafePipe } from './pipes/safe.pipe'; @NgModule({ declarations: [ AppComponent, HomeComponent, ListComponent, - DetailComponent, - SafePipe, + DetailComponent ], imports: [ BrowserModule, - AppRoutingModule, - FormsModule, - HttpClientModule, + AppRoutingModule ], providers: [], bootstrap: [AppComponent] diff --git a/src/app/detail/detail.component.css b/src/app/detail/detail.component.css index 34d4d22..e69de29 100644 --- a/src/app/detail/detail.component.css +++ b/src/app/detail/detail.component.css @@ -1,9 +0,0 @@ -.titolo { - font-size: 1.5em; - font-weight: bold; - margin-bottom: 0.5em; -} - -button { - margin: 1em; -} diff --git a/src/app/detail/detail.component.html b/src/app/detail/detail.component.html index fe6abf4..fd9463a 100644 --- a/src/app/detail/detail.component.html +++ b/src/app/detail/detail.component.html @@ -1,24 +1 @@ -
-

{{test.name}}

-

{{test.description}}

-

Distanza: {{distance}}

- - - qr -
+

detail works!

diff --git a/src/app/detail/detail.component.spec.ts b/src/app/detail/detail.component.spec.ts new file mode 100644 index 0000000..06d5c7e --- /dev/null +++ b/src/app/detail/detail.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { DetailComponent } from './detail.component'; + +describe('DetailComponent', () => { + let component: DetailComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ DetailComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(DetailComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/detail/detail.component.ts b/src/app/detail/detail.component.ts index dac4187..8b64639 100755 --- a/src/app/detail/detail.component.ts +++ b/src/app/detail/detail.component.ts @@ -1,123 +1,10 @@ -import {Component, OnInit} from '@angular/core'; -import {ActivatedRoute} from "@angular/router"; -import {positionService} from "../service/position.service"; -import { getDistance } from 'geolib'; -// @ts-ignore -import * as sharp from 'sharp'; -import * as qrcode from 'qrcode'; -import * as canvas from 'canvas'; +import { Component } from '@angular/core'; @Component({ selector: 'app-detail', templateUrl: './detail.component.html', styleUrls: ['./detail.component.css'] }) -export class DetailComponent implements OnInit { - private location: string | undefined; - private id: number | undefined; - - private URLParams: any; - - test = { - name: 'SPAI', - cordinates: '46.15187077044123,8.799829438699243', - lat: 46.15187077044123, - lng: 8.799829438699243, - description: "Lorem ipsum" - } - - embed = `https://www.google.com/maps/embed/v1/place?key=AIzaSyBJL4FWmG032BG6KXxTb4faxpO_ccyaP3o&q=${this.test.lat},${this.test.lng}` - - cord: any; - - showNav = true; - distance: number | undefined; - displayedDistance = 0; - - constructor(private route: ActivatedRoute , private positionService: positionService) {} - - async ngOnInit(){ - this.URLParams = this.route.snapshot.url.slice(-2).map(segment => segment.path); - console.log(this.URLParams); // ["lugnao", "1"] - console.log("getting your location: wait..."); - this.cord = await this.positionService.getLocation(); - console.log("location: ", this.cord); - this.checkDistanceTimer(); - } - - checkDistanceTimer() { - //set interval - let intervalID = setInterval(() => { - if (this.showNav) { - this.distance = this.positionService.getDistanceBetweenCoordinates(this.cord.lat, this.cord.lon, this.test.lat, this.test.lng); - console.log(this.distance); - if (this.distance == 0) { - this.showNav = false; - this.displayedDistance = Math.round(this.distance * 100) / 100; - } - if (this.distance < 0.05) { - this.showNav = false; - clearInterval(intervalID); - } - } else { - clearInterval(intervalID); - } - }, 1000); - } - - async generateQRCodeImage(url: string): Promise { - // Crea il QR code - const qrCode = await qrcode.toDataURL(url, { errorCorrectionLevel: "H" }); - - // Crea il canvas - const canvasInstance = canvas.createCanvas(300, 300); - const ctx = canvasInstance.getContext("2d"); - - // Carica il QR code nell'immagine - const qrCodeImage = await canvas.loadImage(qrCode); - - // Disegna il QR code nell'immagine - ctx.drawImage(qrCodeImage, 0, 0, 300, 300); - - // Ritorna l'immagine come buffer - return canvasInstance.toBuffer(); - } - - /*generateQR() { - console.log("generating QR code"); - let url = `http://localhost:4200/location/${this.URLParams[0]}/${this.URLParams[1]}`; - //this.addQRCodeToImage(url, `assets/testDetail/img.png`, `assets/images/${url}.png`); - console.log(url) - }*/ - - /*async addQRCodeToImage(url: string, imagePath: string, outputPath: string): Promise { - // Generate QR code - const qrCode = await qrcode.toBuffer(url); - - // Load input image using Sharp - const image = sharp(imagePath); - - // Get input image dimensions - const { width, height } = await image.metadata(); - - // Resize QR code to 25% of input image height - const qrCodeHeight = Math.round(height * 0.25); - const qrCodeBuffer = await sharp(qrCode) - .resize(qrCodeHeight, qrCodeHeight) - .toBuffer(); - - // Composite QR code onto input image at bottom-right corner - await image.composite([ - { - input: qrCodeBuffer, - gravity: 'southeast', - top: height - qrCodeHeight, - left: width - qrCodeHeight, - }, - ]); - - // Save output image to file - await image.toFile(outputPath); - }*/ +export class DetailComponent { } diff --git a/src/app/home/home.component.css b/src/app/home/home.component.css index bc6241b..d5ef261 100644 --- a/src/app/home/home.component.css +++ b/src/app/home/home.component.css @@ -1,52 +1,6 @@ -.search { - display: flex; - align-items: center; - justify-content: center; - flex-direction: column; - position: absolute; - top: 35%; - left: 50%; - transform: translate(-50%, -50%); -} - -input { +input{ + width: 40%; display: flex; justify-content: center; align-items: center; } - -#list { - position: absolute; - top: 46%; - left: 44%; - transform: translate(-50%, -50%); - justify-content: center; - align-items: center; - align-content: center; - margin-top: 10px; - margin-left: 0; -} - -#list > li { - -} - -.inputElements{ - display: flex; - justify-content: center; - align-items: center; - align-content: center; - gap: 20px; -} - -.bg-image { - background-image: url('src/assets/img/mountains.png'); - background-size: cover; - background-repeat: no-repeat; - background-position: center center; - height: 100vh; -} - -#translate{ - margin: 100px 10px 10px 10px; -} diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html index 9bdba3c..d511764 100644 --- a/src/app/home/home.component.html +++ b/src/app/home/home.component.html @@ -1,58 +1,2 @@ -
+ -
-
- - - - {{translations.alertMessage}} -
-
- -
- - -
- -
-
- -
- - - - -
-
- - - -
-
diff --git a/src/app/home/home.component.spec.ts b/src/app/home/home.component.spec.ts new file mode 100644 index 0000000..5075be7 --- /dev/null +++ b/src/app/home/home.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { HomeComponent } from './home.component'; + +describe('HomeComponent', () => { + let component: HomeComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ HomeComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(HomeComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts index 5941ebe..0cb0d0f 100644 --- a/src/app/home/home.component.ts +++ b/src/app/home/home.component.ts @@ -1,139 +1,10 @@ -import {AfterViewInit, Component, ElementRef, OnDestroy, OnInit, ViewChild} from '@angular/core'; -import {BehaviorSubject, distinctUntilChanged, fromEvent, Observable, Subject, Subscription} from "rxjs"; -import {ReadjsonService} from "../service/readjson.service"; -import {Locations} from "../interface/data"; -import {Router} from "@angular/router"; -import { TranslateService } from '../service/translate.service'; -import {ReadTranslateJsonService} from "../service/readTranslateJsonService"; -import {homeTranslations} from "../interface/translations"; - - +import { Component } from '@angular/core'; @Component({ selector: 'app-home', templateUrl: './home.component.html', styleUrls: ['./home.component.css'] }) -export class HomeComponent implements OnInit, AfterViewInit, OnDestroy { - @ViewChild('myInput') myInput?: ElementRef; +export class HomeComponent { - public locationsPopup: Subject = new Subject() - - subs: Subscription[] = []; - backgroundColor: string | undefined; - locations: Locations[] = []; - allert: boolean = false; - locationsFiltrati: Locations[] = []; - luogoSelezionato: string = ''; - suggerimentoAttivo: boolean = false; - suggerimento: string = ''; - completamento: string = ''; - translations: homeTranslations = {} as homeTranslations; - - - constructor(private readjsonService: ReadjsonService, private router: Router, private translateService: TranslateService, private readTranslationJsonService: ReadTranslateJsonService) { - } - - ngOnInit(): void { - this.translations = this.readTranslationJsonService.getHomeTranslations(); - console.log("translations loaded", this.translations) - - this.readjsonService.getLocations().subscribe(data => { - for (let i = 0; i < data.length; i++) { - this.locations.push(data[i]) - console.log(data[i]) - } - }); - - - this.allert = false; - console.log("home init"); - } - - ngOnDestroy() { - this.subs.forEach(sub => sub.unsubscribe()) - } - - - ngAfterViewInit() { - - if (this.locations != undefined) { - fromEvent(this.myInput?.nativeElement, 'focus').pipe( - // debounceTime(500), decommentarlo se bisogna fare una chiamata http - distinctUntilChanged() - ).subscribe((val: any) => { - this.locationsPopup.next(this.locations.filter(l => l.location.toLowerCase().startsWith(val.target.value.toLowerCase()))) - }) - } - - fromEvent(this.myInput?.nativeElement, 'input') - .pipe( - // debounceTime(500), decommentarlo se bisogna fare una chiamata http - distinctUntilChanged() - ).subscribe((val: any) => { - this.locationsPopup.next(this.locations.filter(l => l.location.toLowerCase().startsWith(val.target.value.toLowerCase()))) - }) - } - - cercaLuogo(locations: string) { - setTimeout(() => { - }, 1000); - this.locationsFiltrati = this.locations.filter((l: Locations) => l.location.toLowerCase().startsWith(locations.toLowerCase())); - if (this.locationsFiltrati.length > 0) { - this.suggerimentoAttivo = true; - this.suggerimento = this.locationsFiltrati[0].location; - this.completamento = stringDifference(locations, this.suggerimento); - } else { - this.suggerimentoAttivo = false; - this.suggerimento = ''; - } - this.myInput?.nativeElement.focus(); - } - - selezionaSuggerimento(event: KeyboardEvent) { - if (event.key === 'Tab' || event.key === 'Enter') { - if (this.suggerimentoAttivo) { - this.luogoSelezionato = this.suggerimento; - this.suggerimentoAttivo = false; - this.suggerimento = ''; - } - } - } - - - luoghiNear() { - return null; - } - - onSearch(): void { - if (this.luogoSelezionato === '') { - this.allert = true; - setTimeout(() => { - this.allert = false; - }, 3000); - return; - } else { - const nomeLocation = encodeURIComponent(this.luogoSelezionato); - this.router.navigate(['/location', nomeLocation]); - } - } - - async switchLanguage(lang: string) { - this.translations.translate = await this.translateService.getData(this.translations.translate, lang); - this.translations.menuPlaces = await this.translateService.getData(this.translations.menuPlaces, lang); - this.translations.alertMessage = await this.translateService.getData(this.translations.alertMessage, lang); - this.translations.searchPlaceholder = await this.translateService.getData(this.translations.searchPlaceholder, lang); - this.translations.searchButton = await this.translateService.getData(this.translations.searchButton, lang); - } -} - - -function stringDifference(str1: string, str2: string): string { - let diff = ''; - for (let i = 0; i < str2.length; i++) { - if (str1[i] !== str2[i]) { - diff += str2[i]; - } - } - return diff; } diff --git a/src/app/list/list.component.html b/src/app/list/list.component.html index 3c24f74..7c1fe15 100644 --- a/src/app/list/list.component.html +++ b/src/app/list/list.component.html @@ -1,37 +1 @@ -
- - -
-
-

- {{translations.locationName}}{{locationParams}} -

-
-

- {{locations.location}} -

-
-

{{translations.distance}}{{distance[i]}} km

-
-
-
- -
-

- {{location.location}} -

-
-

- {{waypoinst.name}} -

-
-

{{translations.distance}}{{distance[i]}} km

-
- -
- -
+

list works!

diff --git a/src/app/list/list.component.spec.ts b/src/app/list/list.component.spec.ts new file mode 100644 index 0000000..54ae348 --- /dev/null +++ b/src/app/list/list.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ListComponent } from './list.component'; + +describe('ListComponent', () => { + let component: ListComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ ListComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(ListComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/list/list.component.ts b/src/app/list/list.component.ts index 0e6d1e2..a92a495 100644 --- a/src/app/list/list.component.ts +++ b/src/app/list/list.component.ts @@ -1,114 +1,10 @@ -import {Component, OnInit, SimpleChanges, OnChanges} from '@angular/core'; -import {Locations} from "../interface/data"; -import {ReadjsonService} from "../service/readjson.service"; -import {ActivatedRoute} from "@angular/router"; -import {positionService} from "../service/position.service"; -import {listTranslations} from "../interface/translations"; -import {TranslateService} from "../service/translate.service"; -import {ReadTranslateJsonService} from "../service/readTranslateJsonService"; +import { Component } from '@angular/core'; @Component({ selector: 'app-list', templateUrl: './list.component.html', styleUrls: ['./list.component.css'] }) -export class ListComponent implements OnInit, OnChanges { - locationParams: string | undefined - locations: Partial[] | undefined; - location: Partial | undefined; - - positionCord: any; - - isNear: boolean = true; - - distance: number[] = []; - - translations: listTranslations = {} as listTranslations - - constructor(private route: ActivatedRoute, private readjsonService: ReadjsonService, private positionService: positionService, private translateService: TranslateService, private readTranslationJsonService: ReadTranslateJsonService) { - } - - async ngOnInit() { - this.translations = this.readTranslationJsonService.getListTransaltions(); - this.route.params.subscribe(params => { - this.locationParams = params['location']; - }); - this.readjsonService.getLocations().subscribe(locations => { - this.locations = locations; - if (this.locationParams != null) { - this.readjsonService.getLocation(this.locationParams ?? "").subscribe(async location => { - this.location = location; - this.readjsonService.getWaypoints(this.locationParams ?? "").subscribe(waypoints => { - if (this.location) { - this.location.waypoints = waypoints ?? [] - } - }); - await this.checkDataPopulated(); - }); - } - }); - this.getPosition(); - } - - ngOnChanges(changes: SimpleChanges) { - if (changes['positionCord'] && (changes['positionCord'])) { - console.log("onChanges") - this.setDistance(); - } - } - - - private checkDataPopulated(): void { - if (this.locations && this.location) { - console.log("Dati popolati correttamente:", this.locations, this.location); - for (let i = 0; i < this.locations.length; i++) { - if (this.locations[i].location === this.locationParams) { - this.location = this.locations[i]; - console.log("Location trovata:", this.location); - this.isNear = false; - this.setDistance(); - break; - } - } - } - } - - private setDistance(): void { - if (this.locations && this.location){ - if (this.isNear){ - console.log("location lenght " + this.locations.length); - for (let i = 0; i < this.locations.length; i++) { - console.log("for"+i); - console.log("lat" + this.locations[i].lat); - this.distance.push(this.positionService.getDistanceBetweenCoordinates(this.locations[i].lat, this.locations[i].lon, this.positionCord.lat, this.positionCord.lon)); - } - } else{ - if (this.location?.waypoints) { - console.log("waypoints lenght " + this.location.waypoints.length); - for (let i = 0; i < this.location.waypoints.length; i++) { - console.log("for"+i); - console.log("lat" + this.location.waypoints[i].lat); - this.distance.push(this.positionService.getDistanceBetweenCoordinates(this.location.waypoints[i].lat, this.location.waypoints[i].lon, this.positionCord.lat, this.positionCord.lon)); - } - } - } - } - console.log("ciao" + this.distance[0]) - } - - getPosition(): any { - setInterval(async () => { - this.positionCord = await this.positionService.getLocation(); - this.setDistance(); - }, 2000); - } - - async switchLanguage(lang: string) { - this.translations.translate = await this.translateService.getData(this.translations.translate, lang); - this.translations.distance = await this.translateService.getData(this.translations.distance, lang); - this.translations.locationName = await this.translateService.getData(this.translations.locationName, lang); - - } - +export class ListComponent { } diff --git a/src/assets/mountains.png b/src/assets/mountains.png new file mode 100644 index 0000000..09d24f1 Binary files /dev/null and b/src/assets/mountains.png differ diff --git a/src/styles.css b/src/styles.css index 7dca88b..d3a1a9a 100644 --- a/src/styles.css +++ b/src/styles.css @@ -2,7 +2,3 @@ @tailwind base; @tailwind components; @tailwind utilities; - -body{ - overflow-y: hidden; -}