JoeKung/Progetto-m152-Angular
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

changes

Browse Source
This commit is contained in:
Joe Küng
2023-04-24 17:21:22 +02:00
parent f303cdd195
commit f2a5d5da1a
17 changed files with 118 additions and 552 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
src/app/home/home.component.css
View File

@@ -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;
}

58
src/app/home/home.component.html
View File

@@ -1,58 +1,2 @@
<div [ngClass]="{'background-color': backgroundColor}">
<input type="text" placeholder="Type here" class="input input-bordered input-primary w-full max-w-xs" />
<div class="alert alert-warning shadow-lg" *ngIf="allert">
<div>
<svg xmlns="http://www.w3.org/2000/svg" class="stroke-current flex-shrink-0 h-6 w-6" fill="none"
viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
</svg>
<span>{{translations.alertMessage}}</span>
</div>
</div>
<div class="dropdown dropdown-hover">
<label tabindex="0" class="btn m-1 bg-black border-neutral text-base-100">{{translations.translate}}</label>
<ul tabindex="0" class="dropdown-content menu p-2 shadow rounded-box w-52">
<li (click)="switchLanguage('DE')"><a>DE</a></li>
<li (click)="switchLanguage('FR')"><a>FR</a></li>
<li (click)="switchLanguage('IT')"><a>IT</a></li>
</ul>
</div>
<div class="bg-image">
<div class="search">
<div class="inputElements">
<input #myInput type="text" [(ngModel)]="luogoSelezionato" (keyup)="cercaLuogo(myInput.value)"
(keydown)="selezionaSuggerimento($event)" placeholder="{{translations.searchPlaceholder}}"
class="input input-bordered input-primary btn-wide">
<button
class="btn gap-2 border-primary bg-primary text-secondary hover:bg-secondary hover:text-primary hover:border-primary"
(click)="onSearch()">
{{translations.searchButton}}
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path
d="M18.125,15.804l-4.038-4.037c0.675-1.079,1.012-2.308,1.01-3.534C15.089,4.62,12.199,1.75,8.584,1.75C4.815,1.75,1.982,4.726,2,8.286c0.021,3.577,2.908,6.549,6.578,6.549c1.241,0,2.417-0.347,3.44-0.985l4.032,4.026c0.167,0.166,0.43,0.166,0.596,0l1.479-1.478C18.292,16.234,18.292,15.968,18.125,15.804 M8.578,13.99c-3.198,0-5.716-2.593-5.733-5.71c-0.017-3.084,2.438-5.686,5.74-5.686c3.197,0,5.625,2.493,5.64,5.624C14.242,11.548,11.621,13.99,8.578,13.99 M16.349,16.981l-3.637-3.635c0.131-0.11,0.721-0.695,0.876-0.884l3.642,3.639L16.349,16.981z"></path>
</svg>
</button>
</div>
</div>
<ng-container *ngIf="locationsPopup | async as locations;">
<ul *ngIf="locations.length > 0" class="menu bg-base-200 p-2 rounded-box" id="list"
[style.width.px]="myInput.offsetWidth">
<li class="menu-title">
<span>{{translations.menuPlaces}}</span>
</li>
<li *ngFor="let luogo of locations" (click)="luogoSelezionato=luogo.location; cercaLuogo(luogo.location)">
{{luogo.location}}
</li>
</ul>
</ng-container>
</div>
</div>

23
src/app/home/home.component.spec.ts Normal file
View File

@@ -0,0 +1,23 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { HomeComponent } from './home.component';
describe('HomeComponent', () => {
let component: HomeComponent;
let fixture: ComponentFixture<HomeComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ HomeComponent ]
})
.compileComponents();
fixture = TestBed.createComponent(HomeComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

133
src/app/home/home.component.ts
View File

@@ -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<Locations[]> = new Subject<Locations[]>()
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(<Locations>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;
}