Feature/52 upravit css (#57)

* changed css styles with html and ts, also changed few test, because of private methods and variables

Co-authored-by: Štěpán Moc <[email protected]>

frontend/src/app/auth/login/login.component.ts

@@ -1,4 +1,4 @@
-import {ChangeDetectionStrategy, Component, inject, OnInit} from '@angular/core';
+import {ChangeDetectionStrategy, Component, OnDestroy, OnInit} from '@angular/core';
 import {AuthService} from "../service/auth.service";
 import {FormBuilder, FormGroup, NG_VALUE_ACCESSOR, ReactiveFormsModule, Validators} from "@angular/forms";
 import {LoginForm} from "../model/LoginForm";
@@ -11,6 +11,7 @@ import {MatButton} from "@angular/material/button";
 import {NgIf} from "@angular/common";
 import {FrontendNotificationService} from "../../shared/frontend-notification/service/frontend-notification.service";
 import {Router} from "@angular/router";
+import {Subscription} from "rxjs";
 
 @Component({
  selector: 'app-login',
@@ -38,28 +39,35 @@ import {Router} from "@angular/router";
  }
  ]
 })
-export class LoginComponent implements OnInit {
+export class LoginComponent implements OnInit, OnDestroy {
  protected formGroup!: FormGroup
- private formBuilder = inject(FormBuilder)
- private authService = inject(AuthService)
- private notificationService = inject(FrontendNotificationService)
- private router = inject(Router)
+ private subscriptions: Subscription[] = [];
+
+ constructor(private formBuilder: FormBuilder,
+ private authService: AuthService,
+ private notificationService: FrontendNotificationService,
+ private router: Router) {
+ }
 
  ngOnInit(): void {
  this.formGroup = this.buildFormGroup()
  }
 
+ ngOnDestroy(): void {
+ this.subscriptions.forEach((subscription) => subscription.unsubscribe())
+ }
+
  onSubmit() {
  if (this.formGroup.valid) {
- this.authService.login(this.formGroup.value).subscribe({
+ this.subscriptions.push(this.authService.login(this.formGroup.value).subscribe({
  next: () => {
  this.notificationService.successNotification("Ůspěšně jste se přihlásili")
  this.router.navigate(['/'])
  },
  error: () => {
  this.notificationService.errorNotification("Špatné heslo nebo email")
  }
- })
+ }))
  } else {
  this.notificationService.errorNotification("Formulář obsahuje nevalidní informace")
  }

frontend/src/app/auth/register/register.component.ts

@@ -1,4 +1,4 @@
-import {ChangeDetectionStrategy, Component, inject, OnInit} from '@angular/core';
+import {ChangeDetectionStrategy, Component, OnDestroy, OnInit} from '@angular/core';
 import {AuthService} from "../service/auth.service";
 import {FormBuilder, FormGroup, NG_VALUE_ACCESSOR, ReactiveFormsModule, Validators} from "@angular/forms";
 import {MatButton} from "@angular/material/button";
@@ -11,6 +11,7 @@ import {NgIf} from "@angular/common";
 import {FrontendNotificationService} from "../../shared/frontend-notification/service/frontend-notification.service";
 import {Router} from "@angular/router";
 import {RegistrationForm} from "../model/RegistrationForm";
+import {Subscription} from "rxjs";
 
 @Component({
  selector: 'app-register',
@@ -30,37 +31,42 @@ import {RegistrationForm} from "../model/RegistrationForm";
  templateUrl: './register.component.html',
  styleUrl: '../style/auth.component.css',
  providers: [
- AuthService,
- FormBuilder,
  {
  provide: NG_VALUE_ACCESSOR,
  multi: true,
  useExisting: RegisterComponent
  }
  ]
 })
-export class RegisterComponent implements OnInit {
+export class RegisterComponent implements OnInit, OnDestroy {
  protected formGroup!: FormGroup
- private formBuilder = inject(FormBuilder)
- private authService = inject(AuthService)
- private notificationService = inject(FrontendNotificationService)
- private router = inject(Router)
+ private subscriptions: Subscription[] = [];
+
+ constructor(private formBuilder: FormBuilder,
+ private authService: AuthService,
+ private notificationService: FrontendNotificationService,
+ private router: Router) {
+ }
 
  ngOnInit(): void {
  this.formGroup = this.buildFormGroup()
  }
 
+ ngOnDestroy(): void {
+ this.subscriptions.forEach((subscription) => subscription.unsubscribe())
+ }
+
  onSubmit() {
  if (this.formGroup.valid) {
- this.authService.register(this.formGroup.value).subscribe({
+ this.subscriptions.push(this.authService.register(this.formGroup.value).subscribe({
  next: () => {
  this.notificationService.successNotification("Registrace proběhla úspěšně")
  this.router.navigate(['/login'])
  },
  error: () => {
  this.notificationService.errorNotification("Registrace se nezdařila")
  }
- })
+ }))
  } else {
  this.notificationService.errorNotification("Formulář obsahuje nevalidní informace")
  }

frontend/src/app/auth/service/auth.service.ts

@@ -39,7 +39,7 @@ export class AuthService {
  return this.httpService.post(this.rootHttpUrl + 'register', value)
  }
 
- isUserSignedIn() {
+ isSignedIn() {
  return sessionStorage.getItem('auth') === 'true'
  }
 

frontend/src/app/shared/navigation/navigation.component.css

@@ -12,6 +12,7 @@
 li {
  list-style-type: none;
  cursor: pointer;
+ display: flex;
 }
 
 a {

frontend/src/app/shared/navigation/navigation.component.html

@@ -6,7 +6,7 @@
  </a>
  <a *ngIf="isUserSignedIn()">
  <li class="page-body-text">
- <span>Oblibéné</span>
+ <span>Oblíbené</span>
  </li>
  </a>
  <span class="fill-space"></span>

frontend/src/app/shared/navigation/navigation.component.ts

@@ -2,7 +2,6 @@ import {
  ChangeDetectionStrategy,
  ChangeDetectorRef,
  Component,
- inject,
  OnDestroy,
  OnInit,
  signal,
@@ -39,22 +38,15 @@ export class NavigationComponent implements OnInit, OnDestroy {
  private readonly subscriptions: Subscription[] = []
  private currentUrl: string = ''
 
-
- private router = inject(Router)
- private authService = inject(AuthService)
- private changeDetectorRef = inject(ChangeDetectorRef)
+ constructor(private router: Router,
+  private authService: AuthService,
+  private changeDetectorRef: ChangeDetectorRef) {
+ }
 
  ngOnInit() {
  this.currentUrl = this.router.url
- this.isUserSignedIn.set(this.authService.isUserSignedIn())
- const routerSubscription = this.router.events.pipe(filter((event) =>
- event instanceof NavigationEnd)
- ).subscribe((event) => {
- this.isUserSignedIn.set(this.authService.isUserSignedIn())
- this.currentUrl = (event as NavigationEnd).url
- this.changeDetectorRef.detectChanges()
- });
- this.subscriptions.push(routerSubscription)
+ this.isUserSignedIn.set(this.authService.isSignedIn())
+ this.navigationRouter()
  }
 
  ngOnDestroy(): void {
@@ -64,4 +56,14 @@ export class NavigationComponent implements OnInit, OnDestroy {
  isSelected(navigationUrl: string) {
  return this.currentUrl == navigationUrl
  }
+
+ private navigationRouter() {
+ this.subscriptions.push(this.router.events.pipe(filter((event) =>
+ event instanceof NavigationEnd)
+ ).subscribe((event) => {
+ this.isUserSignedIn.set(this.authService.isSignedIn())
+ this.currentUrl = (event as NavigationEnd).url
+ this.changeDetectorRef.detectChanges()
+ }));
+ }
 }

frontend/src/app/weather/weather-detail/weather-detail.component.css

@@ -28,6 +28,8 @@ form {
 
 .mat-mdc-card {
  background: white;
+ border-radius: 1em;
+ padding: 1em;
 }
 
 .data-content {
@@ -40,3 +42,8 @@ form {
  flex-direction: row;
  justify-content: space-between;
 }
+
+.mat-card-title {
+ font-size: 1.5em;
+ font-weight: bold;
+}

frontend/src/app/weather/weather-detail/weather-detail.component.html

@@ -7,7 +7,7 @@
  <input [formControl]="cityFormControl" matInput placeholder="Vyberte počasí" type="text">
  </mat-form-field>
 
- <button (click)="getCurrentWeather()" color="primary" mat-raised-button>Hledat</button>
+ <button (click)="getWeather()" color="primary" mat-raised-button>Hledat</button>
  </mat-card>
  </div>
  </div>
@@ -16,20 +16,27 @@
  <div class="flex-container-center">
  <div class="row">
  <mat-card class="col">
- <mat-card-title>Current Weather</mat-card-title>
- <mat-icon *ngIf="currentSignal().isDay">brightness_5</mat-icon>
- <mat-icon *ngIf="!currentSignal().isDay">brightness_1</mat-icon>
+ <mat-card-title>Aktuální počasí</mat-card-title>
+ <mat-card-subtitle>
+ <mat-icon *ngIf="currentSignal().isDay">brightness_5</mat-icon>
+ <mat-icon *ngIf="!currentSignal().isDay">brightness_1</mat-icon>
+ </mat-card-subtitle>
  <mat-card-content>
  <div *ngIf="currentSignal()">
- <p>Čas: {{ currentSignal().time }}</p>
- <p>Teplota: {{ currentSignal().temperature }}°C</p>
- <p>Oblačnost: {{ currentSignal().cloudCover }}</p>
- <p>Rychlost větru: {{ currentSignal().temperature }}</p>
+ <p>Datum: {{ moment(currentSignal().time).format("DD-MM-YYYY") }}</p>
+ <p>Čas: {{ moment(currentSignal().time).format("HH:MM") }}</p>
+ <p>Teplota: {{ currentSignal().temperature }} °C</p>
+ <p>Oblačnost: {{ currentSignal().cloudCover }} %</p>
+ <p>Rychlost větru: {{ currentSignal().temperature }} m/s</p>
  </div>
  </mat-card-content>
  </mat-card>
- <mat-card class="col">
- <mat-card-title>Forecast Weather</mat-card-title>
+ <mat-card *ngIf="isUserSignedIn()" class="col">
+ <mat-card-title>Graf předpovědi počasí</mat-card-title>
+ <mat-card-subtitle>
+ <mat-icon *ngIf="currentSignal().isDay">brightness_5</mat-icon>
+ <mat-icon *ngIf="!currentSignal().isDay">brightness_1</mat-icon>
+ </mat-card-subtitle>
  <mat-card-content>
  <app-weather-graph></app-weather-graph>
  </mat-card-content>

frontend/src/app/weather/weather-detail/weather-detail.component.ts

@@ -1,26 +1,19 @@
-import {
- ChangeDetectionStrategy,
- Component,
- inject,
- OnDestroy,
- OnInit,
- signal,
- ViewChild,
- WritableSignal
-} from '@angular/core';
+import {ChangeDetectionStrategy, Component, OnDestroy, OnInit, signal, ViewChild, WritableSignal} from '@angular/core';
 import {MatFormField, MatPrefix} from "@angular/material/form-field";
 import {MatInput} from "@angular/material/input";
 import {MatButton} from "@angular/material/button";
-import {MatCard, MatCardContent, MatCardTitle} from "@angular/material/card";
+import {MatCard, MatCardContent, MatCardSubtitle, MatCardTitle} from "@angular/material/card";
 import {MatIcon} from "@angular/material/icon";
 import {MatToolbar} from "@angular/material/toolbar";
 import {NgIf} from "@angular/common";
-import {FormControl, ReactiveFormsModule} from "@angular/forms";
+import {FormControl, NG_VALUE_ACCESSOR, ReactiveFormsModule} from "@angular/forms";
 import {WeatherService} from "../service/weather.service";
 import {CurrentWeatherDetail} from "../model/CurrentWeatherDetail";
 import {FrontendNotificationService} from "../../shared/frontend-notification/service/frontend-notification.service";
 import {WeatherGraphComponent} from "../weather-graph/weather-graph.component";
 import {Subscription} from "rxjs";
+import {AuthService} from "../../auth/service/auth.service";
+import moment from "moment";
 
 @Component({
  selector: 'app-weather-detail',
@@ -38,29 +31,48 @@ import {Subscription} from "rxjs";
  MatPrefix,
  MatCardContent,
  MatCardTitle,
- WeatherGraphComponent
+ WeatherGraphComponent,
+ MatCardSubtitle
+ ],
+ providers: [
+ {
+ provide: NG_VALUE_ACCESSOR,
+ multi: true,
+ useExisting: WeatherDetailComponent
+ }
  ],
- providers: [WeatherService],
  templateUrl: './weather-detail.component.html',
  styleUrl: './weather-detail.component.css'
 })
 export class WeatherDetailComponent implements OnInit, OnDestroy {
  @ViewChild(WeatherGraphComponent) weatherGraphComponent!: WeatherGraphComponent;
-
  protected cityFormControl = new FormControl();
  protected currentSignal: WritableSignal<CurrentWeatherDetail> = signal(CurrentWeatherDetail.createDefault())
- private weatherService = inject(WeatherService);
- private notificationService = inject(FrontendNotificationService);
+ protected isUserSignedIn: WritableSignal<boolean> = signal(false)
+ protected readonly moment = moment;
  private subscriptions: Subscription[] = [];
 
+ constructor(private weatherService: WeatherService,
+ private notificationService: FrontendNotificationService,
+ private authService: AuthService) {
+ }
+
  ngOnInit(): void {
+ this.isUserSignedIn.set(this.authService.isSignedIn())
  }
 
  ngOnDestroy(): void {
  this.subscriptions.forEach(subscription => subscription.unsubscribe());
  }
 
- getCurrentWeather() {
+ getWeather() {
+ this.getCurrentWeather()
+ if (this.isUserSignedIn()) {
+ this.getForecastWeather()
+ }
+ }
+
+ private getCurrentWeather() {
  this.subscriptions.push(this.weatherService.getCurrentWeather(this.cityFormControl.value).subscribe({
  next: (response) => {
  this.currentSignal.set(response)
@@ -71,7 +83,7 @@ export class WeatherDetailComponent implements OnInit, OnDestroy {
  }))
  }
 
- getForecastWeather() {
+ private getForecastWeather() {
  this.subscriptions.push(this.weatherService.getForecastWeather(this.cityFormControl.value).subscribe({
  next: (response) => {
  this.weatherGraphComponent.createChart(response)