changed css and html (#64)

* changed html and css, also refactoring and reformatting for ts and spec.ts Co-authored-by: Štěpán Moc <[email protected]>
MocStepan · May 7, 2024 · 0aaca8e · 0aaca8e
1 parent 605aa82
commit 0aaca8e
Show file tree

Hide file tree

Showing 18 changed files with 281 additions and 250 deletions.
diff --git a/frontend/src/app/auth/sign-in/sign-in.component.html b/frontend/src/app/auth/sign-in/sign-in.component.html
@@ -1,10 +1,10 @@
 <form #formDirective="ngForm" (ngSubmit)="onSubmit()"
  *ngIf="formGroup"
  [formGroup]="formGroup">
- <div class="auth-container">
- <div class="auth-content">
- <mat-toolbar class="auth-toolbar" color="primary">Sign in</mat-toolbar>
+ <div class="container">
+ <div class="content">
  <mat-card>
+ <mat-card-title>Sign in</mat-card-title>
 
  <mat-form-field>
  <mat-icon matPrefix>alternate_email</mat-icon>

diff --git a/frontend/src/app/auth/sign-in/sign-in.component.ts b/frontend/src/app/auth/sign-in/sign-in.component.ts
@@ -3,7 +3,7 @@ import {AuthService} from "../service/auth.service";
 import {FormBuilder, FormGroup, NG_VALUE_ACCESSOR, ReactiveFormsModule, Validators} from "@angular/forms";
 import {SignInForm} from "../model/SignInForm";
 import {MatFormField, MatPrefix} from "@angular/material/form-field";
-import {MatCard} from "@angular/material/card";
+import {MatCard, MatCardHeader, MatCardTitle} from "@angular/material/card";
 import {MatToolbar} from "@angular/material/toolbar";
 import {MatIcon} from "@angular/material/icon";
 import {MatInput} from "@angular/material/input";
@@ -26,7 +26,9 @@ import {Subscription} from "rxjs";
  MatButton,
  NgIf,
  ReactiveFormsModule,
- MatPrefix
+ MatPrefix,
+ MatCardHeader,
+ MatCardTitle
  ],
  templateUrl: './sign-in.component.html',
  styleUrl: '../style/auth.component.css',

diff --git a/frontend/src/app/auth/sign-up/sign-up.component.html b/frontend/src/app/auth/sign-up/sign-up.component.html
@@ -1,10 +1,10 @@
 <form #formDirective="ngForm" (ngSubmit)="onSubmit()"
  *ngIf="formGroup"
  [formGroup]="formGroup">
- <div class="auth-container">
- <div class="auth-content">
- <mat-toolbar class="auth-toolbar" color="primary">Sign in</mat-toolbar>
+ <div class="container">
+ <div class="content">
  <mat-card>
+ <mat-card-title>Sign up</mat-card-title>
 
  <mat-form-field>
  <mat-icon matPrefix>person_outline</mat-icon>

diff --git a/frontend/src/app/auth/sign-up/sign-up.component.ts b/frontend/src/app/auth/sign-up/sign-up.component.ts
@@ -2,7 +2,7 @@ import {ChangeDetectionStrategy, Component, OnDestroy, OnInit} from '@angular/co
 import {AuthService} from "../service/auth.service";
 import {FormBuilder, FormGroup, NG_VALUE_ACCESSOR, ReactiveFormsModule, Validators} from "@angular/forms";
 import {MatButton} from "@angular/material/button";
-import {MatCard} from "@angular/material/card";
+import {MatCard, MatCardTitle} from "@angular/material/card";
 import {MatFormField, MatPrefix} from "@angular/material/form-field";
 import {MatIcon} from "@angular/material/icon";
 import {MatInput} from "@angular/material/input";
@@ -26,7 +26,8 @@ import {Subscription} from "rxjs";
  MatToolbar,
  NgIf,
  ReactiveFormsModule,
- MatPrefix
+ MatPrefix,
+ MatCardTitle
  ],
  templateUrl: './sign-up.component.html',
  styleUrl: '../style/auth.component.css',

diff --git a/frontend/src/app/auth/style/auth.component.css b/frontend/src/app/auth/style/auth.component.css
@@ -1,36 +1,6 @@
-.auth-container {
- margin-top: 50px;
- height: 100%;
- width: 100%;
- align-items: center;
+mat-card-title {
+ background: #3f51b5;
  display: flex;
-}
-
-form {
- width: 100%;
-}
-
-.auth-content {
- width: 400px;
- display: block;
- margin: 0 auto;
- border-radius: 1em;
-}
-
-.auth-toolbar {
  justify-content: center;
-}
-
-.mat-form-field {
- width: 100%;
-}
-
-.mat-raised-button {
- width: 100%;
- height: 60px;
- margin-top: 15px;
-}
-
-.mat-mdc-card {
- background: #2c3338;
+ color: white;
 }
diff --git a/frontend/src/app/shared/http/service/http.service.ts b/frontend/src/app/shared/http/service/http.service.ts
@@ -22,7 +22,7 @@ export class HttpService {
  return this.httpClient.put<T>(url, data, options)
  }
 
- delete(url: string) {
- return this.httpClient.delete(url, {})
+ delete<T>(url: string) {
+ return this.httpClient.delete<T>(url, {})
  }
 }
diff --git a/frontend/src/app/weather/service/weather.service.ts b/frontend/src/app/weather/service/weather.service.ts
@@ -31,8 +31,7 @@ export class WeatherService {
  return this.httpService.get(this.rootUrl + 'locations')
  }
 
- // TODO: Fix the return type
- deleteUserWeatherLocation(id: number): Observable<any> {
+ deleteUserWeatherLocation(id: number): Observable<boolean> {
  return this.httpService.delete(this.rootUrl + 'location/' + id)
  }
 }
diff --git a/frontend/src/app/weather/weather-detail/weather-detail.component.css b/frontend/src/app/weather/weather-detail/weather-detail.component.css
@@ -1,49 +1 @@
-.container {
- width: 100%;
- align-items: center;
- display: flex;
-}
 
-form {
- width: 100%;
-}
-
-.content {
- width: 400px;
- display: block;
- margin: 1em auto;
- border-radius: 1em;
- flex-direction: row;
-}
-
-.mat-form-field {
- width: 100%;
-}
-
-.mat-raised-button {
- width: 100%;
- height: 60px;
- margin-top: 15px;
-}
-
-.mat-mdc-card {
- background: white;
- border-radius: 1em;
- padding: 1em;
-}
-
-.data-content {
- display: flex;
- margin: 1em auto;
-}
-
-.row {
- display: flex;
- flex-direction: row;
- justify-content: space-between;
-}
-
-.mat-card-title {
- font-size: 1.5em;
- font-weight: bold;
-}
diff --git a/frontend/src/app/weather/weather-detail/weather-detail.component.html b/frontend/src/app/weather/weather-detail/weather-detail.component.html
@@ -7,43 +7,44 @@
  <input [formControl]="cityFormControl" matInput placeholder="Choose location" type="text">
  </mat-form-field>
  <button (click)="getWeather()" color="primary" mat-raised-button>Find</button>
- <button (click)="saveLocation()" *ngIf="isUserSignedIn()" color="primary" mat-raised-button matSuffix>
+ <button #saveButton (click)="saveLocation()" *ngIf="isUserSignedIn()" color="primary" id="saveButton"
+ mat-raised-button
+ matSuffix>
  Uložit
  </button>
  </mat-card>
  </div>
  </div>
 
- <div class="container flex-container">
- <div class="flex-container-center">
- <div class="row">
- <mat-card class="col">
- <mat-card-title>Current weather</mat-card-title>
- <mat-card-subtitle>
- <mat-icon *ngIf="currentWeather().isDay">brightness_5</mat-icon>
- <mat-icon *ngIf="!currentWeather().isDay">brightness_1</mat-icon>
- </mat-card-subtitle>
- <mat-card-content>
- <div *ngIf="currentWeather()">
- <p>Date: {{ moment(currentWeather().time).format("DD-MM-YYYY") }}</p>
- <p>Time: {{ moment(currentWeather().time).format("HH:MM") }}</p>
- <p>Temperature: {{ currentWeather().temperature }} °C</p>
- <p>Cloud cover: {{ currentWeather().cloudCover }} %</p>
- <p>Wind speed: {{ currentWeather().temperature }} km/h</p>
- </div>
- </mat-card-content>
- </mat-card>
- <mat-card *ngIf="isUserSignedIn()" class="col">
- <mat-card-title>Graph of forecast weather</mat-card-title>
- <mat-card-subtitle>
- <mat-icon *ngIf="currentWeather().isDay">brightness_5</mat-icon>
- <mat-icon *ngIf="!currentWeather().isDay">brightness_1</mat-icon>
- </mat-card-subtitle>
- <mat-card-content>
- <app-weather-graph></app-weather-graph>
- </mat-card-content>
- </mat-card>
- </div>
+ <div class="container">
+ <div class="content">
+ <mat-card>
+ <mat-card-title>Current weather</mat-card-title>
+ <mat-card-subtitle>
+ <mat-icon *ngIf="currentWeather().isDay">brightness_5</mat-icon>
+ <mat-icon *ngIf="!currentWeather().isDay">brightness_1</mat-icon>
+ </mat-card-subtitle>
+ <mat-card-content>
+ <div *ngIf="currentWeather()">
+ <p>Date: {{ moment(currentWeather().time).format("HH:MM DD-MM-YYYY") }}</p>
+ <p>Temperature: {{ currentWeather().temperature }} °C</p>
+ <p>Cloud cover: {{ currentWeather().cloudCover }} %</p>
+ <p>Wind speed: {{ currentWeather().temperature }} km/h</p>
+ </div>
+ </mat-card-content>
+ </mat-card>
+ </div>
+ <div *ngIf="isUserSignedIn()" class="content">
+ <mat-card>
+ <mat-card-title>Graph of forecast weather</mat-card-title>
+ <mat-card-subtitle>
+ <mat-icon *ngIf="currentWeather().isDay">brightness_5</mat-icon>
+ <mat-icon *ngIf="!currentWeather().isDay">brightness_1</mat-icon>
+ </mat-card-subtitle>
+ <mat-card-content>
+ <app-weather-graph></app-weather-graph>
+ </mat-card-content>
+ </mat-card>
  </div>
  </div>
 </div>
diff --git a/frontend/src/app/weather/weather-detail/weather-detail.component.ts b/frontend/src/app/weather/weather-detail/weather-detail.component.ts
@@ -1,4 +1,15 @@
-import {ChangeDetectionStrategy, Component, OnDestroy, OnInit, signal, ViewChild, WritableSignal} from '@angular/core';
+import {
+ AfterViewInit,
+ ChangeDetectionStrategy,
+ ChangeDetectorRef,
+ Component,
+ inject,
+ OnDestroy,
+ OnInit,
+ signal,
+ ViewChild,
+ WritableSignal
+} from '@angular/core';
 import {MatFormField, MatPrefix, MatSuffix} from "@angular/material/form-field";
 import {MatInput} from "@angular/material/input";
 import {MatButton} from "@angular/material/button";
@@ -45,23 +56,29 @@ import moment from "moment";
  templateUrl: './weather-detail.component.html',
  styleUrl: './weather-detail.component.css'
 })
-export class WeatherDetailComponent implements OnInit, OnDestroy {
+export class WeatherDetailComponent implements OnInit, OnDestroy, AfterViewInit {
  @ViewChild(WeatherGraphComponent) weatherGraphComponent!: WeatherGraphComponent;
+ @ViewChild("saveButton") saveButton!: HTMLButtonElement;
  protected cityFormControl = new FormControl();
  protected currentWeather: WritableSignal<CurrentWeatherDetail> = signal(CurrentWeatherDetail.createDefault())
  protected isUserSignedIn: WritableSignal<boolean> = signal(false)
  protected readonly moment = moment;
- private subscriptions: Subscription[] = [];
 
- constructor(private weatherService: WeatherService,
- private notificationService: NotificationService,
- private authService: AuthService) {
- }
+ private subscriptions: Subscription[] = [];
+ private weatherService = inject(WeatherService)
+ private notificationService = inject(NotificationService)
+ private authService = inject(AuthService)
+ private changeDetectorRef = inject(ChangeDetectorRef)
 
  ngOnInit(): void {
  this.isUserSignedIn.set(this.authService.isSignedIn())
  }
 
+ ngAfterViewInit(): void {
+ this.changeSaveButtonState(true)
+ this.changeDetectorRef.detectChanges()
+ }
+
  ngOnDestroy(): void {
  this.subscriptions.forEach(subscription => subscription.unsubscribe());
  }
@@ -77,13 +94,22 @@ export class WeatherDetailComponent implements OnInit, OnDestroy {
  this.subscriptions.push(this.weatherService.saveUserLocation(this.cityFormControl.value).subscribe({
  next: () => {
  this.notificationService.successNotification('City saved')
+ this.changeSaveButtonState(true)
  },
  error: () => {
- this.notificationService.errorNotification('The city cannot be saved')
+ this.changeSaveButtonState(true)
+ this.notificationService.errorNotification('The city is already saved')
  }
  }))
  }
 
+ private changeSaveButtonState(state: boolean) {
+ if (this.isUserSignedIn()) {
+ this.saveButton.disabled = state
+ this.changeDetectorRef.detectChanges()
+ }
+ }
+
  private getCurrentWeather() {
  this.subscriptions.push(this.weatherService.getCurrentWeather(this.cityFormControl.value).subscribe({
  next: (response) => {
@@ -98,9 +124,11 @@ export class WeatherDetailComponent implements OnInit, OnDestroy {
  private getForecastWeather() {
  this.subscriptions.push(this.weatherService.getForecastWeather(this.cityFormControl.value).subscribe({
  next: (response) => {
+ this.changeSaveButtonState(false)
  this.weatherGraphComponent.createChart(response)
  },
  error: () => {
+ this.changeSaveButtonState(true)
  this.notificationService.errorNotification('City not found')
  }
  }))