diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts index 5941ebe..fb435c3 100644 --- a/src/app/home/home.component.ts +++ b/src/app/home/home.component.ts @@ -3,18 +3,19 @@ import {BehaviorSubject, distinctUntilChanged, fromEvent, Observable, Subject, S import {ReadjsonService} from "../service/readjson.service"; import {Locations} from "../interface/data"; import {Router} from "@angular/router"; -import { TranslateService } from '../service/translate.service'; +import {TranslateService} from '../service/translate.service'; import {ReadTranslateJsonService} from "../service/readTranslateJsonService"; import {homeTranslations} from "../interface/translations"; - @Component({ selector: 'app-home', templateUrl: './home.component.html', styleUrls: ['./home.component.css'] }) + export class HomeComponent implements OnInit, AfterViewInit, OnDestroy { + @ViewChild('myInput') myInput?: ElementRef; public locationsPopup: Subject = new Subject() @@ -34,6 +35,7 @@ export class HomeComponent implements OnInit, AfterViewInit, OnDestroy { constructor(private readjsonService: ReadjsonService, private router: Router, private translateService: TranslateService, private readTranslationJsonService: ReadTranslateJsonService) { } + // Initializes the component and loads translations and locations ngOnInit(): void { this.translations = this.readTranslationJsonService.getHomeTranslations(); console.log("translations loaded", this.translations) @@ -55,6 +57,7 @@ export class HomeComponent implements OnInit, AfterViewInit, OnDestroy { } + //This method sets up event listeners for input field changes to filter locations. ngAfterViewInit() { if (this.locations != undefined) { @@ -75,21 +78,30 @@ export class HomeComponent implements OnInit, AfterViewInit, OnDestroy { }) } + // Filters locations based on user input and shows suggestions cercaLuogo(locations: string) { + // Delay for 1 second setTimeout(() => { }, 1000); + // Filter locations and store in a variable this.locationsFiltrati = this.locations.filter((l: Locations) => l.location.toLowerCase().startsWith(locations.toLowerCase())); if (this.locationsFiltrati.length > 0) { + // Show suggestion if at least one location is found this.suggerimentoAttivo = true; this.suggerimento = this.locationsFiltrati[0].location; + // Find the difference between user input and suggestion this.completamento = stringDifference(locations, this.suggerimento); } else { + // Hide suggestion if no location is found this.suggerimentoAttivo = false; this.suggerimento = ''; } + // Focus on input field this.myInput?.nativeElement.focus(); } + // Selects the suggestion if the user presses "Tab" or "Enter" keys and if there is an active suggestion. + // The selected location is then assigned to the "luogoSelezionato" variable, and the suggestion is cleared. selezionaSuggerimento(event: KeyboardEvent) { if (event.key === 'Tab' || event.key === 'Enter') { if (this.suggerimentoAttivo) { @@ -100,11 +112,9 @@ export class HomeComponent implements OnInit, AfterViewInit, OnDestroy { } } - - luoghiNear() { - return null; - } - +//Method to handle search functionality. +// If the selected location is empty, an alert is displayed for 3 seconds. +// Otherwise, the selected location is encoded and used to navigate to the corresponding location page using Angular router. onSearch(): void { if (this.luogoSelezionato === '') { this.allert = true; @@ -118,6 +128,10 @@ export class HomeComponent implements OnInit, AfterViewInit, OnDestroy { } } + // This async function is used to switch the language of the application. + // It takes a language code as input and updates the translations object with new translations for various UI elements. + // The getData() method of the translateService is called with the current translations and the new language code. + // The translateService returns the translated data which is then assigned to the corresponding properties of the translations object. 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); @@ -128,6 +142,12 @@ export class HomeComponent implements OnInit, AfterViewInit, OnDestroy { } +/** + * Returns the difference between two strings, by comparing their characters one by one. + * @param str1 - First string to compare + * @param str2 - Second string to compare + * @returns The difference between the two strings + */ function stringDifference(str1: string, str2: string): string { let diff = ''; for (let i = 0; i < str2.length; i++) { diff --git a/src/app/service/deepL.service.ts b/src/app/service/deepL.service.ts index 537b4e9..233bee5 100644 --- a/src/app/service/deepL.service.ts +++ b/src/app/service/deepL.service.ts @@ -1,24 +1,29 @@ -import { Injectable } from '@angular/core'; -import { HttpClient, HttpParams } from '@angular/common/http'; -import { Observable } from 'rxjs'; -import { environment } from '../../environments/environment'; +import {Injectable} from '@angular/core'; +import {HttpClient, HttpParams} from '@angular/common/http'; +import {Observable} from 'rxjs'; +import {environment} from '../../environments/environment'; @Injectable({ providedIn: 'root' }) export class DeepLService { + // Define the base URL for the DeepL API and the API key, taken from the environment configuration private apiUrl = 'https://api-free.deepl.com/v2/translate'; private apiKey = environment.deepLApiKey; - constructor(private http: HttpClient) { } + constructor(private http: HttpClient) { + } + // Define the method for translating text, which takes the text to be translated and the target language as parameters translate(text: string, targetLang: string): Observable { + // Define the parameters to be passed to the API, including the API key and the text and target language to be translated const params = new HttpParams() .set('auth_key', this.apiKey) .set('text', text) .set('target_lang', targetLang); + // Make a POST request to the API using the HttpClient and the defined parameters, and return the response as an Observable return this.http.post(this.apiUrl, params); } diff --git a/src/app/service/readTranslateJsonService.ts b/src/app/service/readTranslateJsonService.ts index 53d0381..8d5feac 100644 --- a/src/app/service/readTranslateJsonService.ts +++ b/src/app/service/readTranslateJsonService.ts @@ -7,10 +7,11 @@ import {listTranslations} from "../interface/translations"; providedIn: 'root' }) export class ReadTranslateJsonService { - private homeTranslations: homeTranslations = {} as homeTranslations; - private listTranslation: listTranslations = {} as listTranslations; + private homeTranslations: homeTranslations = {} as homeTranslations; // declares a private object to hold the home translations + private listTranslation: listTranslations = {} as listTranslations; // declares a private object to hold the list translations constructor(private http: HttpClient) { + // loads the home translations from the assets file for the English language this.http.get('assets/i18n/home/en.json').subscribe(data => { this.homeTranslations.alertMessage = data.alertMessage; this.homeTranslations.translate = data.translate; @@ -20,6 +21,7 @@ export class ReadTranslateJsonService { console.log("data loaded", this.homeTranslations) }); + // loads the list translations from the assets file for the English language this.http.get('assets/i18n/list/en.json').subscribe(data => { this.listTranslation.translate = data.translate; this.listTranslation.distance = data.distance; @@ -29,10 +31,12 @@ export class ReadTranslateJsonService { }); } + // returns the home translations object getHomeTranslations(): homeTranslations { return this.homeTranslations; } + // returns the list translations object getListTransaltions(): listTranslations { return this.listTranslation; } diff --git a/src/app/service/translate.service.ts b/src/app/service/translate.service.ts index 5c08f17..8a30782 100644 --- a/src/app/service/translate.service.ts +++ b/src/app/service/translate.service.ts @@ -7,8 +7,11 @@ import {Injectable} from "@angular/core"; export class TranslateService { constructor(private deepLService: DeepLService) {} + // Method for translating the given input to the given language async getData(input: string, lang: string): Promise { + // Translating the input using the DeepLService and waiting for the response const response = await this.deepLService.translate(input, lang).toPromise(); + // Returning the translated text from the response return response.translations[0].text; } }