From 0a0009d9959cde8826dd71b34967583123b683d2 Mon Sep 17 00:00:00 2001 From: Oskar <118617644+Drillllll@users.noreply.github.com> Date: Wed, 19 Jun 2024 09:13:20 +0200 Subject: [PATCH] 85 poprawki w wygldzie i naprawa bdw map location (#86) * animation partially fixed, details button improved * animation fixed, shake added * added user to route detail and buttons descriptions * user profile view changed * user profile view changed * filter buttons improved --- package-lock.json | 12 ++ package.json | 1 + .../map-location-info-window.component.css | 11 +- .../map-location-info-window.component.html | 2 +- .../map-location-list.component.html | 5 +- .../map-location-list.component.ts | 69 ++++-- .../route-detail/route-detail.component.css | 18 ++ .../route-detail/route-detail.component.html | 5 +- .../route/route-info/route-info.component.css | 23 +- .../route-info/route-info.component.html | 10 +- .../route/route-info/route-info.component.ts | 22 +- .../route/route-list/route-list.component.css | 35 ++- .../route-list/route-list.component.html | 28 ++- .../route/route-list/route-list.component.ts | 14 ++ .../user-profile/user-profile.component.css | 201 ++++++++++++++++++ .../user-profile/user-profile.component.html | 50 ++++- .../user-profile/user-profile.component.ts | 7 +- 17 files changed, 448 insertions(+), 65 deletions(-) diff --git a/package-lock.json b/package-lock.json index 0fc581a..ad5eb71 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18,6 +18,7 @@ "@angular/platform-browser-dynamic": "^17.3.0", "@angular/router": "^17.3.0", "@types/jwt-decode": "^3.1.0", + "angular-animations": "^0.11.0", "bootstrap": "^3.4.1", "jwt-decode": "^4.0.0", "rxjs": "~7.8.0", @@ -4047,6 +4048,17 @@ "ajv": "^8.8.2" } }, + "node_modules/angular-animations": { + "version": "0.11.0", + "resolved": "https://registry.npmjs.org/angular-animations/-/angular-animations-0.11.0.tgz", + "integrity": "sha512-P2RuOe+T97bhgGDLtOYK9V45QA5y+kFUxoJfRAua8Ymo0bI5lWyw8oiVmBoEIZUU+nooYoJvQXgVKuZJA7/z3g==", + "dependencies": { + "tslib": "^2.0.0" + }, + "peerDependencies": { + "@angular/animations": ">=6.0.0" + } + }, "node_modules/ansi-colors": { "version": "4.1.3", "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.3.tgz", diff --git a/package.json b/package.json index 0290854..ffabc79 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,7 @@ "@angular/platform-browser-dynamic": "^17.3.0", "@angular/router": "^17.3.0", "@types/jwt-decode": "^3.1.0", + "angular-animations": "^0.11.0", "bootstrap": "^3.4.1", "jwt-decode": "^4.0.0", "rxjs": "~7.8.0", diff --git a/src/app/map-location/map-location-info-window/map-location-info-window.component.css b/src/app/map-location/map-location-info-window/map-location-info-window.component.css index 88857a1..2c2d8da 100644 --- a/src/app/map-location/map-location-info-window/map-location-info-window.component.css +++ b/src/app/map-location/map-location-info-window/map-location-info-window.component.css @@ -13,15 +13,20 @@ display: flex; flex-direction: column; justify-content: center; - align-items: center; position: absolute; top: 120px; left: 10px; - background-color: rgba(4, 97, 105, 0.5); + background-color: rgba(4, 97, 105, 0.7); color: white; width: 60px; height: 60px; - font-size: 30px; + font-size: 28px; +} + +.details-button > * { + align-self: center; + margin-top: 0; + margin-bottom: 0; } .details-button:hover { diff --git a/src/app/map-location/map-location-info-window/map-location-info-window.component.html b/src/app/map-location/map-location-info-window/map-location-info-window.component.html index c2486e5..940cd3b 100644 --- a/src/app/map-location/map-location-info-window/map-location-info-window.component.html +++ b/src/app/map-location/map-location-info-window/map-location-info-window.component.html @@ -1,6 +1,6 @@
-
+

details

diff --git a/src/app/map-location/map-location-list/map-location-list.component.html b/src/app/map-location/map-location-list/map-location-list.component.html index 960d1a6..32c4c58 100644 --- a/src/app/map-location/map-location-list/map-location-list.component.html +++ b/src/app/map-location/map-location-list/map-location-list.component.html @@ -12,8 +12,11 @@

+
  • + style="background-color: #bdf2e9;" #info + [@headShake]="infoWrapperAnimationState" + [ngClass]="{'animation' : infoWrapperAnimationState}">
    diff --git a/src/app/map-location/map-location-list/map-location-list.component.ts b/src/app/map-location/map-location-list/map-location-list.component.ts index 353d957..0eec3bc 100644 --- a/src/app/map-location/map-location-list/map-location-list.component.ts +++ b/src/app/map-location/map-location-list/map-location-list.component.ts @@ -1,4 +1,4 @@ -import {Component, ElementRef, Input, OnInit, Renderer2, ViewChild} from '@angular/core'; +import {AfterViewInit, Component, ElementRef, Input, OnInit, Renderer2, ViewChild} from '@angular/core'; import {MapLocationService} from "../map-location.service"; import {maxPageSize} from "../../shared/http.config"; import {Route} from "../../route/route.model"; @@ -14,6 +14,8 @@ import {DomSanitizer, SafeUrl} from "@angular/platform-browser"; import {ScreenSizeService} from "../../shared/screen-size.service"; import { forkJoin } from 'rxjs'; import { map } from 'rxjs/operators'; +import {BrowserAnimationsModule} from "@angular/platform-browser/animations"; +import {bounceInDownAnimation, headShakeAnimation} from "angular-animations"; @Component({ selector: 'app-map-location-list', @@ -23,7 +25,11 @@ import { map } from 'rxjs/operators'; RouteItemComponent, RouterLinkActive, NgClass, - NgIf + NgIf, + + ], + animations: [ + headShakeAnimation() ], templateUrl: './map-location-list.component.html', styleUrl: './map-location-list.component.css' @@ -40,16 +46,19 @@ export class MapLocationListComponent implements OnInit { mobileVersion: boolean; @ViewChild('info') infoWrapper: ElementRef; + infoWrapperAnimationState: boolean; constructor(private mapService: MapService, private sidePanelService: SidePanelService, private mapLocationService: MapLocationService, private audioService: AudioService, private sanitizer: DomSanitizer, - private renderer: Renderer2, private screenSizeService: ScreenSizeService) { } + + ngOnInit(): void { + this.infoWrapperAnimationState = false; this.screenSizeService.isMobileVersion$.subscribe(isMobileVersion => { this.mobileVersion = isMobileVersion; }); @@ -57,22 +66,48 @@ export class MapLocationListComponent implements OnInit { //subscribe to event emitted by map location in map info window this.mapService.mapLocationDetailsEventEmitter.subscribe(mapLocation => { this.onMapLocationSelected(mapLocation); + this.activeMapLocationId = mapLocation.id; this.sidePanelService.togglePanelEventEmitter.emit(true); + console.log("BBBBB") this.scrollToInfoWrapper(); }); this.fetchMapLocations(); } + onMapLocationSelected(mapLocation: MapLocation) { + //this.infoWrapperAnimationState = false; + + this.mapService.centerOnMapLocation.emit(mapLocation); + if(this.activeMapLocationId == mapLocation.id) { + this.activeMapLocationId = null; + } + else { + this.activeMapLocationId = mapLocation.id; + if (this.mobileVersion) { + this.sidePanelService.togglePanelEventEmitter.emit(false); + } + this.fetchMapLocationAudio(mapLocation); + } + + //this.scrollToInfoWrapper(); if we want to add animation on list item click + } + //scroll to map location info and animate it private scrollToInfoWrapper() { - if (this.infoWrapper?.nativeElement) { - this.infoWrapper.nativeElement.scrollIntoView({ behavior: 'smooth', block: 'start' }); - this.renderer.addClass(this.infoWrapper.nativeElement, 'animation'); - this.infoWrapper.nativeElement.addEventListener('animationend', () => { - this.renderer.removeClass(this.infoWrapper.nativeElement, 'animation'); - }, { once: true }); - } + setTimeout(() => { + if (this.infoWrapper) { + console.log("AAAA"); + this.infoWrapper.nativeElement.scrollIntoView({ behavior: 'smooth', block: 'start' }); + + this.infoWrapperAnimationState = false; + setTimeout(() => { + this.infoWrapperAnimationState = true; + }, 1); + } else { + console.error('infoWrapper not available'); + } + }, 1); } //fetch map locations and their images @@ -112,19 +147,7 @@ export class MapLocationListComponent implements OnInit { }); } - onMapLocationSelected(mapLocation: MapLocation) { - this.mapService.centerOnMapLocation.emit(mapLocation); - if(this.activeMapLocationId == mapLocation.id) { - this.activeMapLocationId = null; - } - else { - this.activeMapLocationId = mapLocation.id; - if (this.mobileVersion) { - this.sidePanelService.togglePanelEventEmitter.emit(false); - } - this.fetchMapLocationAudio(mapLocation); - } - } + private fetchMapLocationAudio(mapLocation: MapLocation) { this.audiosEntities = []; diff --git a/src/app/route/route-detail/route-detail.component.css b/src/app/route/route-detail/route-detail.component.css index e69de29..4356e36 100644 --- a/src/app/route/route-detail/route-detail.component.css +++ b/src/app/route/route-detail/route-detail.component.css @@ -0,0 +1,18 @@ +h5 { + font-weight: 800; + color: #10898d; +} + +.user-container { + display: flex; + justify-items: center; + align-items: center; + justify-content: center +} + +.user-container > span { + font-size: 2rem; + margin-right: 7px; + margin-bottom: 5px; + color: #046169; +} diff --git a/src/app/route/route-detail/route-detail.component.html b/src/app/route/route-detail/route-detail.component.html index a0a80b4..73f5ddc 100644 --- a/src/app/route/route-detail/route-detail.component.html +++ b/src/app/route/route-detail/route-detail.component.html @@ -20,7 +20,10 @@
    {{ route.name }}
    -
    {{routeId}}
    +
    + + {{route.user.username}} +

    {{route.description}}

    diff --git a/src/app/route/route-info/route-info.component.css b/src/app/route/route-info/route-info.component.css index db91755..aa372c6 100644 --- a/src/app/route/route-info/route-info.component.css +++ b/src/app/route/route-info/route-info.component.css @@ -14,7 +14,7 @@ .route-button { height: 30px; - width: 30px; + width: auto; background-color: white; color: #10898d; margin-left: 10px; @@ -24,9 +24,17 @@ align-items: center; } +.route-button > p { + margin-left: 5px; + align-self: center; + margin-top: 0; + margin-bottom: 0; + font-size: 1.5rem; +} + .background-animation { animation: background-change 1s infinite; - animation-duration: 1s; + animation-duration: 1.5s; } @keyframes background-change { @@ -46,12 +54,13 @@ @media (max-width: 900px) { - * { - font-size: 1rem; - } - .route-button { height: 20px; - width: 20px; + font-size: 1.5rem; } + + .route-button > p { + font-size: 1rem; + } + } diff --git a/src/app/route/route-info/route-info.component.html b/src/app/route/route-info/route-info.component.html index 1ecf34a..f676914 100644 --- a/src/app/route/route-info/route-info.component.html +++ b/src/app/route/route-info/route-info.component.html @@ -1,4 +1,7 @@ -
    +
    {{route.name}}
    @@ -7,11 +10,14 @@
    diff --git a/src/app/route/route-info/route-info.component.ts b/src/app/route/route-info/route-info.component.ts index bb769af..2cf1342 100644 --- a/src/app/route/route-info/route-info.component.ts +++ b/src/app/route/route-info/route-info.component.ts @@ -1,4 +1,4 @@ -import {Component, OnInit} from '@angular/core'; +import {AfterViewInit, Component, OnChanges, OnInit, SimpleChanges} from '@angular/core'; import {ActivatedRoute, Params, Router, RouterLink} from "@angular/router"; import {maxPageSize} from "../../shared/http.config"; import {Route} from "../route.model"; @@ -6,6 +6,7 @@ import {RouteService} from "../route.service"; import {NgIf} from "@angular/common"; import {MapLocationService} from "../../map-location/map-location.service"; import {MapService} from "../../shared/map/map.service"; +import { tadaAnimation } from "angular-animations"; @Component({ selector: 'app-route-info', @@ -14,14 +15,20 @@ import {MapService} from "../../shared/map/map.service"; RouterLink, NgIf ], + animations: [ + //lightSpeedInAnimation(), + tadaAnimation() + ], templateUrl: './route-info.component.html', styleUrl: './route-info.component.css' }) export class RouteInfoComponent implements OnInit{ + routeId: string; route: Route; userMode: boolean; + animationState: boolean; constructor(private activatedRoute: ActivatedRoute, private routeService: RouteService, @@ -30,9 +37,20 @@ export class RouteInfoComponent implements OnInit{ private router: Router) { } + + ngOnInit(): void { + + this.activatedRoute.params.subscribe ( (params: Params) => { + + //animate + this.animationState = false; + setTimeout(() => { + this.animationState = true; + }, 1); + this.routeId = params['id']; this.routeService.getRouteById(this.routeId).subscribe(response => { this.route = response; @@ -48,4 +66,6 @@ export class RouteInfoComponent implements OnInit{ this.userMode = userMode; }); } + + } diff --git a/src/app/route/route-list/route-list.component.css b/src/app/route/route-list/route-list.component.css index 9d40ddb..6ffdbf8 100644 --- a/src/app/route/route-list/route-list.component.css +++ b/src/app/route/route-list/route-list.component.css @@ -1,5 +1,5 @@ -.list-group{ +.list-group { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 1rem 1rem @@ -14,6 +14,18 @@ cursor: pointer; } +.filter-btn { + background-color: #10898d; + color: white; + font-size: 20px; + width: auto; + height: 30px; + display: flex; + justify-content: center; + align-items: center; + margin-left: 0px +} + .flex-container { display: flex; flex-direction: row; @@ -30,7 +42,7 @@ text-align: center; } -.page-button{ +.page-button { background-color: #10898d; color: azure; border: 2px solid #046169 @@ -42,7 +54,7 @@ } .page-nr span { - color:azure + color: azure } @@ -74,6 +86,10 @@ font-size: 1rem; } + .route-button span { + font-size: 1.5rem; + } + .list-group-item { height: 6dvh; } @@ -82,12 +98,25 @@ height: 20px; width: 20px; } + + +} + +@media (max-width: 400px) { + .input-sm { + flex: 0 0; + width: 20px; + } + .filter-btn { + width: 20px; + } } @media (max-width: 320px) { .flex-item:nth-child(2) { order: 3; } + .flex-item:nth-child(3) { order: 2; } diff --git a/src/app/route/route-list/route-list.component.html b/src/app/route/route-list/route-list.component.html index cdb13cb..6e213a7 100644 --- a/src/app/route/route-list/route-list.component.html +++ b/src/app/route/route-list/route-list.component.html @@ -1,23 +1,28 @@ -
    +
    -
    +
    - +
    + + + +
    - +
    @@ -32,6 +37,7 @@ [queryParams]="{ page: currentPageNumber }" class="list-group-item" routerLinkActive="active" + (click)="onRouteSelected(routeIt)" #rla="routerLinkActive">
    diff --git a/src/app/route/route-list/route-list.component.ts b/src/app/route/route-list/route-list.component.ts index 7d0d173..70376b3 100644 --- a/src/app/route/route-list/route-list.component.ts +++ b/src/app/route/route-list/route-list.component.ts @@ -32,6 +32,7 @@ export class RouteListComponent { routeNameToSearch: string; public userMode: boolean; user = null; + selectedRoute: Route; constructor(private routeService: RouteService, private mapLocationService: MapLocationService, private mapService: MapService, private router: Router, @@ -39,6 +40,7 @@ export class RouteListComponent { } ngOnInit() { + this.selectedRoute = null; this.activatedRoute.queryParams.subscribe(params => { this.currentPageNumber = params['page'] ? +params['page'] : 1; this.routeNameToSearch = params['routeName'] ? params['routeName'] : null; @@ -157,4 +159,16 @@ export class RouteListComponent { } } + + onRouteSelected(route: Route) { + //double click lets you see the detials + if(route == this.selectedRoute) { + this.selectedRoute = null; + this.router.navigate(['/routes', route.id]); + } + else { + this.selectedRoute = route; + } + + } } diff --git a/src/app/user/user-profile/user-profile.component.css b/src/app/user/user-profile/user-profile.component.css index e69de29..9217868 100644 --- a/src/app/user/user-profile/user-profile.component.css +++ b/src/app/user/user-profile/user-profile.component.css @@ -0,0 +1,201 @@ + +.container { + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + justify-items: center; + +} +.user-route-button { + background-color: white; + width: 150px; + height: 50px; + border: #046169 2px solid; + color: #046169; + font-weight: 700; + z-index: 1; +} + +.user-container { + border-radius: 25px; + border: 4px solid #046169; + padding: 5%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + justify-items: center; + background-color: rgba(255, 255, 255, 0.2); + font-size: 3rem; + gap: 20px; + +} + +.user-property { + color: white; + font-weight: 600; + text-shadow: -2px 2px 0 #046169, + 2px 2px 0 #046169, + 2px -2px 0 #046169, + -2px -2px 0 #046169; +} + +.glyphicon { + text-shadow: -2px 2px 0 #046169, + 2px 2px 0 #046169, + 2px -2px 0 #046169, + -2px -2px 0 #046169; +} + +.user-property-description { + margin-top: 7px; +} + +.user-container > span { + font-size: 5rem; + color: white; +} + + +*{ + margin: 0px; + padding: 0px; +} + + + +.context h1{ + text-align: center; + color: #fff; + font-size: 50px; +} + + +.area{ + background: #10898d; + background: -webkit-linear-gradient(to left, #89ecda, #10898d); + width: 100%; + height:100%; + + +} + +.circles{ + position: absolute; + top: 7%; + left: 0; + width: 100%; + height: 93%; + overflow: hidden; + +} + +.circles li{ + position: absolute; + display: block; + list-style: none; + width: 20px; + height: 20px; + background: rgba(255, 255, 255, 0.2); + animation: animate 25s linear infinite; + bottom: -150px; + + +} + +.circles li:nth-child(1){ + left: 25%; + width: 80px; + height: 80px; + animation-delay: 0s; +} + + +.circles li:nth-child(2){ + left: 10%; + width: 20px; + height: 20px; + animation-delay: 2s; + animation-duration: 12s; +} + +.circles li:nth-child(3){ + left: 70%; + width: 20px; + height: 20px; + animation-delay: 4s; +} + +.circles li:nth-child(4){ + left: 40%; + width: 60px; + height: 60px; + animation-delay: 0s; + animation-duration: 18s; +} + +.circles li:nth-child(5){ + left: 65%; + width: 20px; + height: 20px; + animation-delay: 0s; +} + +.circles li:nth-child(6){ + left: 75%; + width: 110px; + height: 110px; + animation-delay: 3s; +} + +.circles li:nth-child(7){ + left: 35%; + width: 150px; + height: 150px; + animation-delay: 7s; +} + +.circles li:nth-child(8){ + left: 50%; + width: 25px; + height: 25px; + animation-delay: 15s; + animation-duration: 45s; +} + +.circles li:nth-child(9){ + left: 20%; + width: 15px; + height: 15px; + animation-delay: 2s; + animation-duration: 35s; +} + +.circles li:nth-child(10){ + left: 85%; + width: 150px; + height: 150px; + animation-delay: 0s; + animation-duration: 11s; +} + + + +@keyframes animate { + + 0%{ + transform: translateY(0) rotate(0deg); + opacity: 1; + border-radius: 0; + } + + 100%{ + transform: translateY(-1000px) rotate(720deg); + opacity: 0; + border-radius: 50%; + } + +} diff --git a/src/app/user/user-profile/user-profile.component.html b/src/app/user/user-profile/user-profile.component.html index b2abe2f..2d1dc81 100644 --- a/src/app/user/user-profile/user-profile.component.html +++ b/src/app/user/user-profile/user-profile.component.html @@ -1,13 +1,41 @@ -
    -

    User Information

    -
    -
    - User Details -
    -
    -
    Username: {{ user.username }}
    -

    ID: {{ user.id }}

    -

    Login: {{ user.login }}

    +
    + +
    +
    + + +
    +

    {{ user.username }}

    +
    username
    +
    + +
    +

    {{ user.login }}

    +
    login
    +
    + + + +
    -
    + + + +
      +
    • +
    • +
    • +
    • +
    • +
    • +
    • +
    • +
    • +
    • +
    +
    diff --git a/src/app/user/user-profile/user-profile.component.ts b/src/app/user/user-profile/user-profile.component.ts index 8562a5a..51dc0e2 100644 --- a/src/app/user/user-profile/user-profile.component.ts +++ b/src/app/user/user-profile/user-profile.component.ts @@ -2,11 +2,16 @@ import {Component, OnInit} from '@angular/core'; import {User} from "../user.model"; import {UserService} from "../user.service"; import {AuthService} from "../../auth/auth.service"; +import { Router, RouterLink} from "@angular/router"; +import {NgIf} from "@angular/common"; @Component({ selector: 'app-user-profile', standalone: true, - imports: [], + imports: [ + RouterLink, + NgIf, + ], templateUrl: './user-profile.component.html', styleUrl: './user-profile.component.css' })