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

nuova grafica?🤷

Browse Source
This commit is contained in:
tito
2023-05-09 14:25:08 +02:00
parent e9eb7f593b
commit 36072aaaf1
8 changed files with 76 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
src/app/app.component.html
View File

@@ -1,26 +1,27 @@
<div class="button-container sticky z-50 flex gap-1 justify-end p-2"> <div class="button-container sticky z-40 flex justify-end p-2">
<div class="dropdown dropdown-hover" id="translate"> <div class="bg-white p-2 rounded-sm flex gap-1 shadow-md">
<label tabindex="0" class="btn bg-black border-neutral text-base-100 hover:bg-neutral hover:text-base-100" <div class="dropdown dropdown-hover" id="translate">
id="translateLabel">{{homeTranslations.translate}}</label> <label tabindex="0" class="btn bg-black border-neutral text-base-100 hover:bg-neutral hover:text-base-100 rounded-sm"
<ul tabindex="0" class="dropdown-content menu mt-1 shadow rounded-box w-52 bg-base-100" id="translateUl"> id="translateLabel">{{homeTranslations.translate}}</label>
<li (click)="switchLanguage('DE')"><a>DE</a></li> <ul tabindex="0" class="dropdown-content menu mt-3 shadow-2xl rounded-sm w-52 bg-base-100" id="translateUl">
<li (click)="switchLanguage('FR')"><a>FR</a></li> <li (click)="switchLanguage('DE')"><a>DE</a></li>
<li (click)="switchLanguage('IT')"><a>IT</a></li> <li (click)="switchLanguage('FR')"><a>FR</a></li>
<li (click)="switchLanguage('EN')"><a>EN</a></li> <li (click)="switchLanguage('IT')"><a>IT</a></li>
</ul> <li (click)="switchLanguage('EN')"><a>EN</a></li>
</ul>
</div>
<button (click)="goHome()"
class="btn gap-2 border-primary bg-primary text-secondary hover:bg-secondary hover:text-primary hover:border-primary rounded-sm">
<br>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round"
d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"/>
</svg>
<br>
</button>
<button (click)="clearAllCookies()" class="btn bg-black text-base-100 hover:btn-error rounded-sm" id="logout">Logout</button>
</div> </div>
<button (click)="goHome()"
class="btn gap-2 border-primary bg-primary text-secondary hover:bg-secondary hover:text-primary hover:border-primary">
<br>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round"
d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"/>
</svg>
<br>
</button>
<button (click)="clearAllCookies()" class="btn btn-active hover:btn-error" id="logout">Logout</button>
</div> </div>
<router-outlet></router-outlet> <router-outlet></router-outlet>

2
src/app/app.component.ts
View File

@@ -105,4 +105,6 @@ export class AppComponent implements OnInit {
goHome() { goHome() {
this.router.navigate(['/home']); this.router.navigate(['/home']);
} }
} }

6
src/app/component/detail/detail.component.html
View File

@@ -54,12 +54,12 @@
<input type="checkbox" id="my-modal-6" class="modal-toggle" #myModal/> <input type="checkbox" id="my-modal-6" class="modal-toggle" #myModal/>
<div class="modal modal-bottom sm:modal-middle" *ngIf="img"> <div class="modal modal-bottom sm:modal-middle" *ngIf="img">
<div class="modal-box"> <div class="modal-box rounded-sm">
<h3 class="font-bold text-lg">Congratulations you have <h3 class="font-bold text-lg">Congratulations you have
discovred {{ waypointInfo?.name ? waypointInfo.name : '' }}!</h3> discovred {{ waypointInfo?.name ? waypointInfo.name : '' }}!</h3>
<img class="xl:max-w-md max-h-screen py-4 m-auto" [src]="img" *ngIf="img"> <img class="xl:max-w-md max-h-screen py-4 m-auto" [src]="img" *ngIf="img">
<div class="modal-action"> <div class="modal-action">
<button for="my-modal-6" class="btn bg-white hover:bg-blue-400" (click)="downloadImage()"> <button for="my-modal-6" class="btn bg-white hover:bg-blue-400 rounded-sm" (click)="downloadImage()">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="17.334" height="23.4863"> width="17.334" height="23.4863">
<g> <g>
@@ -68,7 +68,7 @@
</g> </g>
</svg> </svg>
</button> </button>
<button class="btn btn-primary" (click)="closeModal()">OK</button> <button class="btn btn-primary rounded-sm" (click)="closeModal()">OK</button>
</div> </div>
</div> </div>
</div> </div>

8
src/app/component/list/list.component.html
View File

@@ -18,9 +18,11 @@
</div> </div>
<div *ngIf="!isNear && location && waypoints" class="container"> <div *ngIf="!isNear && location && waypoints" class="container">
<h1> <div class="flex-row flex-nowrap">
{{location.location}} <h1>
</h1> {{location.location}}
</h1>
</div>
<div class="container2"> <div class="container2">
<div class="left"> <div class="left">
<div *ngFor="let waypoint of waypoints, let i = index" class="row"> <div *ngFor="let waypoint of waypoints, let i = index" class="row">

10
src/app/component/login/login.component.css
View File

@@ -0,0 +1,10 @@
.bg-image {
padding-top: 15%;
background-image: url('src/assets/img/mountains.png');
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
height: 94vh;
display: flex;
flex-direction: column;
}

16
src/app/component/login/login.component.html
View File

@@ -1,7 +1,7 @@
<div class="h-screen w-screen flex items-center justify-center"> <div class="h-screen w-screen flex items-center justify-center">
<div class="max-w-md"> <div class="max-w-md">
<div class="bg-white px-6 py-8 rounded-lg shadow-md w-[400px]"> <div class="bg-white px-6 py-8 rounded-md shadow-2xl w-[400px]">
<div style="padding-bottom: 30px" *ngIf="errorLogin || errorCreateUser"> <div style="padding-bottom: 30px" *ngIf="errorLogin || errorCreateUser">
<div class="alert alert-error shadow-lg"> <div class="alert alert-error shadow-lg">
<div> <div>
@@ -19,24 +19,24 @@
<h2 *ngIf="login" class="text-center text-2xl font-bold mb-8">{{ loginTranslation.login }}</h2> <h2 *ngIf="login" class="text-center text-2xl font-bold mb-8">{{ loginTranslation.login }}</h2>
<h2 *ngIf="!login" class="text-center text-2xl font-bold mb-8">{{ loginTranslation.register }}</h2> <h2 *ngIf="!login" class="text-center text-2xl font-bold mb-8">{{ loginTranslation.register }}</h2>
<form (submit)="submit()"> <form (submit)="submit()" class="rounded-sm">
<div class="mb-4"> <div class="mb-4">
<label for="email" class="block text-gray-700 font-bold mb-2">{{ loginTranslation.register }}:</label> <label for="email" class="block text-gray-700 font-bold mb-2">{{ loginTranslation.register }}:</label>
<input type="text" id="email" name="email" placeholder="{{ loginTranslation.usernamePlaceholder }}" <input type="text" id="email" name="email" placeholder="{{ loginTranslation.usernamePlaceholder }}"
class="w-full px-4 py-2 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-600 focus:border-transparent" class="w-full px-4 py-2 rounded-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-600 focus:border-transparent"
[(ngModel)]="newUser.username"> [(ngModel)]="newUser.username">
</div> </div>
<div class="mb-4"> <div class="mb-4">
<label for="password" class="block text-gray-700 font-bold mb-2">{{ loginTranslation.login }}:</label> <label for="password" class="block text-gray-700 font-bold mb-2">{{ loginTranslation.login }}:</label>
<input type="password" id="password" name="password" placeholder="{{ loginTranslation.passwordPlaceholder }}" <input type="password" id="password" name="password" placeholder="{{ loginTranslation.passwordPlaceholder }}"
class="w-full px-4 py-2 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-600 focus:border-transparent" class="w-full px-4 py-2 rounded-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-600 focus:border-transparent"
[(ngModel)]="newUser.password"> [(ngModel)]="newUser.password">
</div> </div>
<div class="mb-4"> <div class="mb-4">
<button type="submit" class="btn gap-2 border-primary bg-primary text-secondary hover:bg-secondary hover:text-primary hover:border-primary py-2 w-full"> <button type="submit" class="btn gap-2 border-primary bg-primary text-secondary hover:bg-secondary hover:text-primary hover:border-primary py-2 w-full rounded-sm">
<span *ngIf="login">{{ loginTranslation.login }}</span> <span *ngIf="login">{{ loginTranslation.login }}</span>
<span *ngIf="!login">{{ loginTranslation.register }}</span> <span *ngIf="!login">{{ loginTranslation.register }}</span>
</button> </button>
@@ -45,9 +45,9 @@
</form> </form>
<a (click)="switch()"> <a (click)="switch()" class="">
<button class="btn-link" *ngIf="login">{{ loginTranslation.register }}</button> <button class="btn-link no-underline" *ngIf="login">{{ loginTranslation.register }}</button>
<button class="btn-link" *ngIf="!login">{{ loginTranslation.login }}</button> <button class="btn-link no-underline" *ngIf="!login">{{ loginTranslation.login }}</button>
</a> </a>
</div> </div>

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

@@ -4,7 +4,7 @@
flex-direction: column; flex-direction: column;
} }
input { /*input {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@@ -30,7 +30,7 @@ input {
align-items: center; align-items: center;
align-content: center; align-content: center;
gap: 20px; gap: 20px;
} }*/
.bg-image { .bg-image {
padding-top: 15%; padding-top: 15%;

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

@@ -1,7 +1,8 @@
<div [ngClass]="{'background-color': backgroundColor}"> <div [ngClass]="{'background-color': backgroundColor}">
<div class="alert alert-warning shadow-lg" *ngIf="allert" id="alert"> <div class="p-2 mt-2 absolute w-screen h-screen pointer-events-none top-0 z-50">
<div> <div class="alert alert-warning shadow-lg flex justify-end gap-1 rounded-sm align-middle w-full" *ngIf="allert"
id="alert">
<svg xmlns="http://www.w3.org/2000/svg" class="stroke-current flex-shrink-0 h-6 w-6" fill="none" <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"> viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
@@ -13,17 +14,17 @@
<div class="bg-image"> <div class="bg-image">
<div class="search"> <div class="search flex">
<div class="inputElements"> <div class="inputElements flex justify-center">
<input #myInput type="text" [(ngModel)]="luogoSelezionato" (keyup)="cercaLuogo(myInput.value)" <input #myInput type="text" [(ngModel)]="luogoSelezionato" (keyup)="cercaLuogo(myInput.value)"
(keydown)="selezionaSuggerimento($event)" placeholder="{{translations.searchPlaceholder}}" (keydown)="selezionaSuggerimento($event)" placeholder="{{translations.searchPlaceholder}}"
class="input input-bordered input-primary btn-wide"> class="input input-bordered focus:outline-none shadow-lg input-primary btn-wide rounded-sm">
<button <button
class="btn gap-2 border-primary bg-primary text-secondary hover:bg-secondary hover:text-primary hover:border-primary" class="btn gap-2 border-primary bg-primary text-secondary hover:bg-secondary hover:text-primary hover:border-primary rounded-sm shadow-2xl"
(click)="onSearch()"> (click)="onSearch()">
{{translations.searchButton}} <!-- {{translations.searchButton}}-->
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path <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> 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>
@@ -31,20 +32,21 @@
</button> </button>
</div> </div>
<ng-container *ngIf="locationsPopup | async as locations;">
<ul *ngIf="locations.length > 0" class="menu bg-base-200 p-2 m-2 rounded-sm shadow-lg z-50" id="list"
[style.width.px]="myInput.offsetWidth">
<li class="menu-title flex justify-center">
<span class="p-0 text-lg">{{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>
<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>
</div> </div>