Gyms organization application with spring boot and angular part 4

byissamdrmas -
0

Getting Started | Building an Application with Angular




Angular 10 Front-end

In this part we are going to continue a develop our project gym, We need to display all gyms, add Worktime, Add Sport, Add SportsMan.....


Find All Gyms

We are going to create a find-all-gyms page to display all gyms information.


src/app/gyms/find-all-gyms.component.ts




 import  { Component, OnInit }  from  '@angular/core';
 import  { ActivatedRoute }  from  '@angular/router';
 import  { User, Gym }  from  '../model/Model';
 import  { StorageService }  from  '../service/storage.service';
 import  { GymService }  from  '../service/gym.service';
 import  { MatDialog }  from  '@angular/material/dialog';
 import  { EditGymComponent }  from  '../edit-gym/edit-gym.component';

@Component({
  selector: 'app-find-all-gyms',
  templateUrl: './find-all-gyms.component.html',
  styleUrls: ['./find-all-gyms.component.css']
})
export class FindAllGymsComponent implements OnInit {
  gym: Gym = {} as Gym;
  user: User = {} as User;
  id: number;
  username: any;

  constructor(private route: ActivatedRoute, private gymService: GymService,
    private storageService: StorageService, public dialog: MatDialog) { 
    this.route.params.subscribe(
      params => {
          this.username = this.storageService.getUsername();
          this.id = this.route.snapshot.params.id;
          this.storageService.findUserByUsername(this.username).subscribe(user => {
              this.user = user;
          });
          this.gymService.findGymById(this.id).subscribe(gym => {
            this.gym = gym;
          });
      }
    )
  }
  
  ngOnInit(): void { }

  openEditGym(id: number): void {
    const dialogRef = this.dialog.open(EditGymComponent, {
      width: '400px',
      data: {id}
    });
    dialogRef.afterClosed().subscribe(() => {
    });
  }

  deleteGym(id: number) {
    if(confirm('Are you sure')) {
      this.gymService.deleteGym(id).subscribe(() => {
        window.location.replace(`/home/${this.username}`);
      });
    }
  }

src/app/gyms/find-all-gyms.component.html




<div id="maincontainer">
  <div id="leftcolumn">
    <mat-card style="max-width: 500px; padding: 20px">
      <mat-card-header>
        <mat-card-title>{{gym.name}} </mat-card-title>
      </mat-card-header>
      <mat-card>
        <img mat-card-image src="{{gym.logo}}" alt="Photo gym">
        <mat-card-content>
          <mat-card-title>Address: {{gym.address}}</mat-card-title>
          <mat-card-title>City: {{gym.city}}</mat-card-title>
          <mat-card-title>Area: {{gym.area}}</mat-card-title>
        </mat-card-content>
        <mat-card-actions>
          <button mat-raised-button color="primary" *ngIf="user.admin" (click)="openEditGym(gym.id)">Update</button>
          <button mat-raised-button color="accent" *ngIf="user.admin" (click)="deleteGym(gym.id)">Delete</button>
          <button mat-stroked-button color="primary"
            [routerLink]="['/home/' + username + '/find-all-gyms/' + gym.id + '/find-all-worktime/' + gym.id]">Show Work
   Times</button>
        </mat-card-actions>
      </mat-card>

    </mat-card>
  </div>
  <div id="contentwrapper">
    <router-outlet></router-outlet>
  </div>
</div>

src/app/gyms/find-all-gyms.component.css




  #maincontainer {
    width:100%;
    height: 100%;
  }

  #leftcolumn {
    float: left;
    display: inline-block;
    width: 500px;
    height: 100%;
  }

  #contentwrapper {
    float: left;
    display: inline-block;
    width: -moz-calc(100% - 500px);
    width: -webkit-calc(100% - 500px);
    width: calc(100% - 500px);
    height: 100%;
  }

Edit Gym Compnoents

We are going to create a edit-gym page to update all gyms information.


src/app/gyms/edit-gym.ts




 import  { Component, Inject, OnInit }  from  '@angular/core';
 import  { MatDialogRef, MAT_DIALOG_DATA  }  from  '@angular/material/dialog';
 import  { Gym }  from  '../model/Model';
 import  { GymService }  from  '../service/gym.service';

@Component({
  selector: 'app-edit-gym',
  templateUrl: './edit-gym.component.html',
  styleUrls: ['./edit-gym.component.css']
})
export class EditGymComponent implements OnInit {
  gym: Gym = {} as Gym;
  showProgressBar: false;

  constructor(public dialogRef: MatDialogRef<EditGymComponent>,
    @Inject(MAT_DIALOG_DATA) public data, private gymService: GymService) {}

  ngOnInit(): void {
    this.gymService.findGymById(this.data.id).subscribe(gym => {
      this.gym = gym;
    });
  }
  editGym() {
    this.showProgressBar = true;
    this.gymService.editGym(this.gym, this.data.id).subscribe(gym => {
      this.gym = gym;
      window.location.reload();
    })
  }

  closeDialog(): void {
    this.dialogRef.close();
  }
}

src/app/gyms/edit-gym.html




<div class="form-content">
    <mat-card>
      <mat-card-header>
        <mat-card-title>Edit gym information</mat-card-title>
      </mat-card-header>
      <mat-card-content>
        <mat-progress-bar  mode="indeterminate"  *ngIf="showProgressBar"></mat-progress-bar>
        <div  class="example-container"><br>
          <mat-form-field  appearance="fill" class="mat-form-field">
            <mat-label>Enter name</mat-label>
            <input matInput type="text"[(ngModel)]="gym.name"  name="name">
          </mat-form-field><br>
        
          <mat-form-field  appearance="fill" class="mat-form-field">
            <mat-label>Enter Address</mat-label>
            <input matInput type="text" [(ngModel)]="gym.address" name="address">
          </mat-form-field>

          <mat-form-field  appearance="fill" class="mat-form-field">
            <mat-label>Enter city</mat-label>
            <input matInput type="text" [(ngModel)]="gym.city" name="city">
          </mat-form-field><br>

          <mat-form-field  appearance="fill" class="mat-form-field">
            <mat-label>Enter area</mat-label>
            <input matInput type="number" [(ngModel)]="gym.area" name="area">
          </mat-form-field><br>
        
          <mat-form-field  appearance="fill" class="mat-form-field">
            <mat-label>Enter logo</mat-label>
            <input matInput type="text" [(ngModel)]="gym.logo"  name="logo">
          </mat-form-field>
        </div>
      </mat-card-content>
      <mat-card-actions>
        <button mat-raised-button color="primary" (click)="editGym()" class="button">Save</button>
      </mat-card-actions>

    </mat-card>
    </div>

Add Sport Component

We are going to create a add-sport page to add sport information.


src/app/sports/add-sport.component.ts




 import  { Component,Inject, OnInit }  from  '@angular/core';
 import  { MatDialogRef, MAT_DIALOG_DATA}  from  'src/app/model/Model';
 import  { Sport}  from  '../model/Model';
 import  { SportService }  from  '../service/sport.service';

@Component({
  selector: 'app-add-sport',
  templateUrl: './add-sport.component.html',
  styleUrls: ['./add-sport.component.css']
})
export class AddSportComponent implements OnInit {
  sport: Sport = {} as Sport;
  title = 'Add sport information';
  showProgressBar = false;

  constructor(public dialogRef: MatDialogRef<AddSportComponent>, @Inject(MAT_DIALOG_DATA) public data: any,
  private sportService: SportService) { }
  
 ngOnInit(): void {
   if(this.data.idSport != null) {
         this.title = 'Edit sport information';
     this.sportService.findSportById(this.data.idSport).subscribe(sport => {
       this.sport = sport;
     })
   }
  }

  addSport() {
    this.showProgressBar = true;
    if(this.data.idSport != null) {
      this.sportService.editSport(this.sport, this.data.idSport).subscribe(sport => {
        this.sport = sport;
        window.location.reload();
     });
    }
    this.sportService.addSportForGym(this.sport, this.data.id).subscribe(sport => {
       this.sport = sport;
       window.location.reload();
    });
  }
}

src/app/sports/add-sport.component.html





<div class="form-content">
    <mat-card>
      <mat-card-header>
        <mat-card-title>{{title}}</mat-card-title>
      </mat-card-header>
      <mat-card-content>
  <mat-progress-bar mode="indeterminate" *ngIf="showProgressBar"></mat-progress-bar>
  <div class="example-container"> <br>
    <mat-form-field appearance="fill" class="mat-form-field">
      <mat-label>Enter name</mat-label>
      <input matInput type="text" [(ngModel)]="sport.name" name="name">
   </mat-form-field><br>
  
    <mat-form-field appearance="fill" class="mat-form-field">
      <mat-label>Enter description</mat-label>
      <input matInput type="text" [(ngModel)]="sport.description" name="description">
    </mat-form-field>

    <mat-form-field appearance="fill" class="mat-form-field">
      <mat-label>Enter photo</mat-label>
      <input matInput type="text" [(ngModel)]="sport.photo" name="photo">
    </mat-form-field><br>

  </div>
</mat-card-content>
<mat-card-actions>
  <button mat-raised-button color="warn" (click)="addSport()" class="button">Save</button>
</mat-card-actions><br>
</mat-card>
</div>

Display Sport Component

We are going to create a display-sport page to display all sport information.


src/app/sports/display-sport.component.ts




 import  { Component, Inject, OnInit }  from  '@angular/core';
 import  { MAT_DIALOG_DATA}  from  '@angular/material/dialog';
 import  { Sport}  from  '../model/Model';
 import  { SportService }  from  '../service/sport.service';

@Component({
  selector: 'app-display-sport',
  templateUrl: './display-sport.component.html',
  styleUrls: ['./display-sport.component.css']
})
export class DisplaySportComponent implements OnInit {
  sport: Sport = {} as Sport;

  constructor(@Inject(MAT_DIALOG_DATA) public data: any, private sportService: SportService) { }

  ngOnInit(): void {
    this.sportService.findSportById(this.data.id).subscribe(sport => {
      this.sport = sport;
    });
  }
}

src/app/sports/display-sport.component.html




<mat-card>
    <mat-card-header>
      <mat-card-title>{{sport.name}}</mat-card-title>
      <mat-card-subtitle>Display sport</mat-card-subtitle>
    </mat-card-header>
    <img mat-card-image src="{{sport.photo}}" alt="Photo of a {{sport.photo}} Inu">
    <mat-card-content>
      <p>
        {{sport.description}}
      </p>
    </mat-card-content>
  </mat-card>

Add Sportsman For Sport Component

We are going to create a add-sportsMan page to add sportsman information.


src/app/sports/add-sports-sportsman.ts




 import  { Component, Inject, OnInit }  from  '@angular/core';
 import  { MatDialogRef, MAT_DIALOG_DATA}  from  './../../service/sport.service';
 import  { Sport}  from  '../model/Model';
 import  { SportService}  from  '../service/sport.service';

@Component({
  selector: 'app-add-sports-sportsman',
  templateUrl: './add-sports-sportsman.component.html',
  styleUrls: ['./add-sports-sportsman.component.css']
})
export class AddSportsSportsmanComponent implements OnInit {
  sports: Sport[];
  filterSports: Sport[];

  constructor(public dialogRef: MatDialogRef<AddSportsSportsmanComponent>,
    @Inject(MAT_DIALOG_DATA) public data, private sportService: SportService) { }

  ngOnInit(): void {
    this.sportService.findSportsForGym(this.data.idGym).subscribe(sports => {
      this.sports = sports;
      this.sportService.findSportsForSportsMan(this.data.id).subscribe(data => {
        this.filterSports = data;
        this.filterSports.forEach(s => {
          this.sports = this.sports.filter(item => item.id !== s.id);
        });
      });
    });
  }

  selectedValue(event: any) {
    const idSportMan = event.value;
    this.sportService.addSportForSportsMan(idSportMan, this.data.id).subscribe(() => {
      window.location.reload();
    })
  }
}

src/app/sports/add-sports-sportsman.html





<h4>Please Choose a Sports Man</h4>
<mat-form-field appearance="fill">
  <mat-label>Sportsmen</mat-label>
  <mat-select (selectionChange)="selectedValue($event)">
    <mat-option *ngFor="let s of sports" [value]="s.id">
      {{s.name}}
    </mat-option>
  </mat-select>
</mat-form-field>

Add Worktime Component

We are going to create a add-worktime page to add all information.


src/app/worktime/add-worktime.component.ts




 import  { Component, Inject, OnInit }  from  '@angular/core';
 import  { MatDialogRef, MAT_DIALOG_DATA}  from  '@angular/material/dialog';
 import  { Worktime}  from  '../model/Model';
 import  { WorktimeService }  from  '../service/worktime.service';

@Component({
  selector: 'app-add-worktime',
  templateUrl: './add-worktime.component.html',
  styleUrls: ['./add-worktime.component.css']
})
export class AddWorktimeComponent implements OnInit {
  showProgressBar = false;
  worktime: Worktime = {} as Worktime;
  title = 'Add Worktime information';

  constructor(public dialogRef: MatDialogRef<AddWorktimeComponent>, 
    @Inject(MAT_DIALOG_DATA) public data, private worktimeService: WorktimeService) { }

  ngOnInit(): void {
    if(this.data.idWorktime!=null && this.data.idGym != null) {
      this.title = 'Edit worrktime information';
this.worktimeService.findWorktimeById(this.data.idWorktime).subscribe(worktime => {
         this.worktime = worktime;
       })
    }
  }
  
    addWorktime() {
    this.showProgressBar = true;
       if(this.data.idWorktime!=null && this.data.idGym != null) {
      this.worktimeService.editWorktime(this.worktime, this.data.idWorktime, this.data.idGym).subscribe(worktime => {
        this.worktime = worktime;
      })
      window.location.reload();
    } else {
      this.worktimeService.addWorktimeForGym(this.worktime, this.data.id).subscribe(worktime => {
        this.worktime = worktime;
        window.location.reload();
      })
    }
  }
}

src/app/worktime/add-worktime.component.html




<div class="form-content">
    <mat-card>
      <mat-card-header>
        <mat-card-title>{{title}}</mat-card-title>
      </mat-card-header>
      <mat-card-content>
        <mat-progress-bar mode="indeterminate" *ngIf="showProgressBar"></mat-progress-bar>
        <div class="example-container"> <br>
          <mat-form-field appearance="fill" class="mat-form-field">
            <mat-label>Enter day</mat-label>
            <input matInput type="text" [(ngModel)]="worktime.day" name="day">
          </mat-form-field><br>
        
          <mat-form-field appearance="fill" class="mat-form-field">
            <mat-label>Enter tiemtable</mat-label>
            <input matInput type="date" [(ngModel)]="worktime.timetable" name="timetable">
          </mat-form-field>

          <mat-form-field appearance="fill" class="mat-form-field">
            <mat-label>Enter start</mat-label>
            <input matInput type="time" [(ngModel)]="worktime.start" name="start">
          </mat-form-field><br>
        
          <mat-form-field appearance="fill" class="mat-form-field">
           <mat-label>Enter end</mat-label>
            <input matInput type="time" [(ngModel)]="worktime.end" name="end">
          </mat-form-field>
        </div>
      </mat-card-content>
      <mat-card-actions>
        <button mat-raised-button color="primary" (click)="addWorktime()" class="button">Save</button>
      </mat-card-actions>
    </mat-card>
    </div>

Find All Worktime Component

We are going to create a find-all-worktime page to display all worktime information.


src/app/worktime/find-all-worktime.component.ts




import { DisplaySportComponent } from './../../sports/display-sport/display-sport.component';
import { AddTrainSportComponent } from './../../trains/add-train-sport/add-train-sport.component';
import { FindAllGymsComponent } from './../../gyms/find-all-gyms/find-all-gyms.component';
import { AddArbitrateComponent } from './../../arbitrates/add-arbitrate/add-arbitrate.component';
import { ArbitrateService } from './../../service/arbitrate.service';
import { TrainService } from './../../service/train.service';
import { SportService } from './../../service/sport.service';
import { DisplaySportsManComponent } from './../../sportsMan/display-sports-man/display-sports-man.component';
import { WorktimeService } from './../../service/worktime.service';
import { MatDialog } from '@angular/material/dialog';
import { AddWorktimeComponent } from './../add-worktime/add-worktime.component';
import { Sport, SportsMan, User, Worktime, Train, Arbitrate } from './../../model/Model';
import { StorageService } from './../../service/storage.service';
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { AddSportsManComponent } from 'src/app/sportsMan/add-sports-man/add-sports-man.component';
import { AddSportComponent } from 'src/app/sports/add-sport/add-sport.component';
import { AddTrainComponent } from 'src/app/trains/add-train/add-train.component';
import { AddArbitrateSportComponent } from 'src/app/arbitrates/add-arbitrate-sport/add-arbitrate-sport.component';

 @Component({
  selector: 'app-find-all-worktime',
  templateUrl: './find-all-worktime.component.html',
  styleUrls: ['./find-all-worktime.component.css']
})
export class FindAllWorktimeComponent implements OnInit {
  user: User = {} as User;
  id: number;
  worktimes: Worktime[];
  sportsMan: SportsMan[];
  sportsManLength: number;
  sports: Sport[];
  trains: Train[];
  arbitrates: Arbitrate[];
  idGym: number;
 
    constructor(private storageService: StorageService, private dialog: MatDialog, private sportService: SportService,
    private route: ActivatedRoute, private worktimeService: WorktimeService, private trainsService: TrainService,
    private arbitrateService: ArbitrateService) { 
      this.route.params.subscribe(
        params => {
          this.id = this.route.snapshot.params.id;
          this.idGym = this.route.snapshot.parent.params.id;
          this.worktimeService.findWorktimesForGym(this.id).subscribe(worktimes => {
            this.worktimes = worktimes;
          });
          this.storageService.findUserByUsername(this.storageService.getUsername()).subscribe(user => {
            this.user = user;
          });
          this.sportService.findSportsForGym(this.id).subscribe(sports => {
            this.sports = sports;
          });
          this.trainsService.findTrainsForGym(this.idGym).subscribe(trains => {
            this.trains = trains;
          });
          this.arbitrateService.findArbitratesForGym(this.idGym).subscribe(arbitrates => {
            this.arbitrates = arbitrates;
          });
        }
      )
    }

ngOnInit(): void { }

  showSportsMan(id: number, idGym: number) {
    const dialogRef = this.dialog.open(DisplaySportsManComponent, {
      width: '800px',
      data: { id, idGym }
    });
    dialogRef.afterClosed().subscribe(() => {
    });
  }
  openAddWorktime(id: number): void {
    const dialogRef = this.dialog.open(AddWorktimeComponent, {
      width: '400px',
      data: { id }
    });
    dialogRef.afterClosed().subscribe(() => {
    });
  }
  openEditWorktime(idWorktime: number, idGym: number): void {
    const dialogRef = this.dialog.open(AddWorktimeComponent, {
      width: '400px',
      data: { idWorktime, idGym }
    });
    dialogRef.afterClosed().subscribe(() => {
    });
  }
  deleteWorktime(id: number) {
    if (confirm('Are you sure')) {
      this.worktimeService.deleteWorktime(id).subscribe(() => {
        window.location.reload();
      })
    }
  }
   openAddSportsMan(id: number): void {
    const dialogRef = this.dialog.open(AddSportsManComponent, {
      width: '400px',
      data: { id }
    });
    dialogRef.afterClosed().subscribe(() => {
    });
  }
  addSportForGym(id: number) {
    const dialogRef = this.dialog.open(AddSportComponent, {
      width: '400px',
      data: { id }
    });
    dialogRef.afterClosed().subscribe(() => {
    });
  }
  editSport(idSport: number) {
    const dialogRef = this.dialog.open(AddSportComponent, {
      width: '400px',
      data: { idSport }
    });
    dialogRef.afterClosed().subscribe(() => {
    });
  }
  deleteSport(id: number, idGym: number) {
    if (confirm('Are you sure')) {
      this.sportService.deleteSportFromGym(id, idGym).subscribe(() => {
        window.location.reload();
      });
    }
  }
  addArbitrate(id: number) {
    const dialogRef = this.dialog.open(AddArbitrateComponent, {
      width: '400px',
      data: { id }
    });
    dialogRef.afterClosed().subscribe(() => {
    });
  }
  addTrain(id: number) {
    const dialogRef = this.dialog.open(AddTrainComponent, {
      width: '400px',
      data: { id }
    });
    dialogRef.afterClosed().subscribe(() => {
    });
  }
  editTrain(idTrain: number) {
    const dialogRef = this.dialog.open(AddTrainComponent, {
      width: '400px',
      data: { idTrain }
    });
    dialogRef.afterClosed().subscribe(() => {
    });
  }
  deleteTrain(id: number) {
    if (confirm('Are you sure')) {
      this.trainsService.deleteTrain(id).subscribe(() => {
        window.location.reload();
      });
    }
  }
  deleteArbitrate(id: number) {
    if (confirm('Are you sure')) {
      this.arbitrateService.deleteArbitrate(id).subscribe(() => {
        window.location.reload();
      });
    }
  }
  editArbitrate(id: number) {
    const dialogRef = this.dialog.open(AddArbitrateComponent, {
      width: '400px',
      data: { idArbitrate }
    });
    dialogRef.afterClosed().subscribe(() => {
    });
  }
  addTrainForSport(id: number) {
    const dialogRef = this.dialog.open(AddTrainSportComponent, {
      width: '400px',
      data: { id }
    });
    dialogRef.afterClosed().subscribe(() => {
    });
  }

  addTrainForArbitrate(id: number) {
    const dialogRef = this.dialog.open(AddArbitrateSportComponent, {
      width: '400px',
      data: { id }
    });
    dialogRef.afterClosed().subscribe(() => {
    });
  }
  displaySport(id: number) {
    const dialogRef = this.dialog.open(DisplaySportComponent, {
      width: '400px',
      data: { id }
    });
    dialogRef.afterClosed().subscribe(() => {
    });
  }
}

src/app/worktime/find-all-worktime.component.html





<mat-card style="margin: 20px;">
  <mat-card-header>
    <mat-card-title>Work time information</mat-card-title>
    <mat-card-subtitle>All the times</mat-card-subtitle>
  </mat-card-header>
  <hr>
  <mat-card-content>
    <table id="table">
      <tr>
        <th>Day</th>
        <th>Date</th>
        <th>Start</th>
        <th>End</th>
        <th *ngIf="user.admin">Details</th>
      </tr>
      <tr *ngFor="let element of worktimes">
        <td>{{element.day}}</td>
        <td>{{element.timetable | date}}</td>
        <td>{{element.start}}</td>
        <td>{{element.end}}</td>
        <td *ngIf="user.admin">
          <mat-chip-list aria-label="Fish selection">
            <mat-chip style="cursor: pointer;"><span class="material-icons"
                (click)="openEditWorktime(element.id, id)">edit</span></mat-chip>
            <mat-chip style="cursor: pointer;"><span class="material-icons"
                (click)="deleteWorktime(element.id)">close</span></mat-chip>
            <mat-chip style="cursor: pointer;" color="accent" selected (click)="openAddSportsMan(element.id)">Add person
            </mat-chip>
            <mat-chip style="cursor: pointer;" (click)="showSportsMan(element.id, idGym)"> SportsMan </mat-chip>
          </mat-chip-list>
        </td>
      </tr>
    </table>
  </mat-card-content>
  <mat-card-actions>
    <span *ngIf="user.admin">
      <button mat-raised-button color="primary" (click)="openAddWorktime(id)">Add worktime</button>
    </span>
  </mat-card-actions>
</mat-card>

<mat-card style="margin: 20px;">
  <mat-card-header>
    <mat-card-title>Sports information</mat-card-title>
    <mat-card-subtitle>All the sports</mat-card-subtitle>
  </mat-card-header>
  <mat-card-content>
    <mat-list *ngFor="let sport of sports">
      <mat-divider></mat-divider><br>
      <mat-list-item style="cursor: pointer" (click)=" displaySport(sport.id)">
        <img src="{{sport.photo}}" alt="Photo of a {{sport.name}}" style="width: 60px;  margin-right: 10px;">
        {{sport.name}}
      </mat-list-item>
      <mat-list-item style="color: #77797b !important;"> {{sport.description}} </mat-list-item>
      <div style="display: flex;">
        <div>
          <h2>Trains</h2>
          <p *ngFor="let train of sport.trains"> - {{train.name}}</p>
        </div>

        <div style="margin-left: 40px;">
          <h2>Arbitrates</h2>
          <p *ngFor="let a of sport.arbitrates" - {{a.name}}</p>
        </div>
      </div>
      <mat-list-item *ngIf="user.admin">
        <button mat-stroked-button (click)="addTrainForSport(sport.id)">Add train for sport</button>
        <button mat-stroked-button color="primary" (click)=" addTrainForArbitrate(sport.id)"
          style="margin-left: 10px;">Add arbitrate for sport</button>
        <button mat-icon-button color="warn" (click)="deleteSport(sport.id, idGym)">
          <mat-icon>close<mat-icon>
        </button>
        <button mat-icon-button color="primary" (click)="editSport(sport.id)">
          <mat-icon>edit</mat-icon>
        </button>
  </mat-card-actions>
</mat-card>

<mat-card style="margin: 20px;">
  <mat-card-header>
    <mat-card-title>Train and Arbitrate information</mat-card-title>
    <mat-card-subtitle>All the trains and arbitrates</mat-card-subtitle>
 </mat-card-header>
  <mat-card-content>
   <div style="display: flex;">
      <div>
        <h2>Trains</h2>
        <div <p *ngFor="let train of trains">- {{train.name}}
          <span *ngIf="user.admin">
            <button mat-icon-button (click)="deleteTrain(train.id)" style="color: #c53c13;">
              <mat-icon>close</mat-icon>
            </button>
            <button mat-icon-button (click)="editTrain(train.id)" style="color: darkgray;">
              <mat-icon>edit</mat-icon>
            </button>
          </span>
        </p>
        <span *ngIf="user.admin">
          <button mat-raised-button color="primary" (click)="addTrain(id)">Add train</button>
        </span>
      </div>
      <div style="margin-left: 40px;">
        <h2>Arbitrates</h2>
        <p *ngFor="let a of arbitrates">- {{a.name}}
          <span *ngIf="user.admin">
            <button mat-icon-button (click)="deleteArbitrate(a.id)" style="color: #c53c13;">
              <mat-icon>close</mat-icon>
            </button>
            <button mat-icon-button (click)="editArbitrate(a.id)" style="color: darkgray;">
              <mat-icon>edit</mat-icon>
            </button>
          </span>
        </p>
        <span *ngIf="user.admin">
          <button mat-raised-button color="primary" (click)="addArbitrate(id)">Add arbitrate</button>
        </span>
      </div>
    </div>
  </mat-card-actions>
</mat-card>

src/app/worktime/find-all-worktime.component.css




#table {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}
#table td,
#table th {
  border: 1px solid #ddd;
  padding: 8px;
}
#table tr:nth-child(even) {
  background-color: #f2f2f2;
}
#table tr:hover {
  background-color: #ddd;
}
#table th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #3f51b5;
  color: white;
}

Add SportsMan Component

We are going to create a find-all-gyms page to add Sportsman information.


src/app/sportsman/add-sports-man.component.ts





 import  { Component, Inject, OnInit }  from  '@angular/core';
 import  { MatDialogRef, MAT_DIALOG_DATA }  from  '@angular/material/dialog';
 import  { SportsMan}  from  '../model/Model';
 import  { StorageService }  from  '../service/storage.service';
 import  { WorktimeService }  from  './../../service/worktime.service';
 import  { AddWorktimeComponent }  from  'src/app/worktime/add-worktime/add-worktime.component';

@Component({
  selector: 'app-add-sports-man',
  templateUrl: './add-sports-man.component.html',
  styleUrls: ['./add-sports-man.component.css']
})
export class AddSportsManComponent implements OnInit {
  sportsMans: SportsMan[];
  filterSportsMans: SportsMan[];
  sportsMan: SportsMan = {} as SportsMan;
  gender: any = {};
  showProgressBar = false
  
   constructor(public dialogRef: MatDialogRef<AddWorktimeComponent>, private worktimeService: WorktimeService,
    @Inject(MAT_DIALOG_DATA) public data: any, private sportsManService: SportsManService) { }

  ngOnInit(): void {
     this.sportsManService.findAllSportsMans().subscribe(sportsMan => {
       this.sportsMan = sportsMan;
       this.sportsManService.findSportsManForWorktime(this.data.id).subscribe(existsSportsMan => {
        this.filterSportsMans = existsSportsMan;
        this.filterSportsMans.forEach(s => {
          this.sportsMans = this.sportsMans.filter(item => item.id !== s.id);
        })
      })
     })
  }
  selectedValue(event: any) {
    const idSportMan = event.value;
    this.worktimeService.addSportsManForWork(idSportMan, this.data.id).subscribe(() => {
      window.location.reload();
    })
  }
  setGender() {
    this.sportsMan.sex = this.gender;
   }
}

src/app/sportsman/add-sports-man.component.html





<h4>Please Choose a Sports Man</h4>
<mat-form-field appearance="fill">
  <mat-label>Sportsmen</mat-label>
  <mat-select (selectionChange)="selectedValue($event)">
    <mat-option *ngFor="let s of sportsMans" [value]="s.id">
      {{s.firstName}}
    </mat-option>
  </mat-select>
</mat-form-field>

Display All Worktime Component

We are going to create a find-all-gyms page to display all Worktime information.


src/app/sportsman/display-sports-man.component.ts





 import  { Component, Inject, OnInit }  from  '@angular/core';
 import  { Router }  from  '@angular/router';
 import  { SportsMan, User, Sport, Payment}  from  '../model/Model';
 import  { SportService }  from  './../../service/sport.service';
 import  { PaymentService}  from  './../../service/payment.service';
 import  { AddPaymentComponent }  from  './../../payments/add-apyment/add-payment.component';
 import  { AddSportsSportsmanComponent }  from  './../../sports/add-sports-sportsman/add-sports-sportsman.component';
 import  { StorageService }  from  './../../service/sports-man.service';
 import  { SportsManService }  from  '../service/storage.service';
 import  { WorktimeService }  from  './../../service/worktime.service';
 import  { MatDialog, MatDialogRef, MAT_DIALOG_DATA  }  from  '@angular/material/dialog';

@Component({
  selector: 'app-display-sports-man',
  templateUrl: './display-sports-man.component.html',
  styleUrls: ['./display-sports-man.component.css']
})
export class DisplaySportsManComponent implements OnInit {
  sportsMan: SportsMan[];
  sports: Sport[];
  payments: Payment[];
  user: User = {} as User;
  idGym: number;
  
  constructor(public dialogRef: MatDialogRef<DisplaySportsManComponent>, private worktimeService: WorktimeService,
    @Inject(MAT_DIALOG_DATA) public data: any, private dialog: MatDialog, private sportsManService: SportsManService,
    private storageService: StorageService, private sportService: SportService, private paymentService: PaymentService) { }

  ngOnInit(): void {
    this.idGym = this.data.idGym;
    this.worktimeService.findSportsManForWorktime(this.data.id).subscribe(sportsMan => {
      this.sportsMan = sportsMan;
    });
    this.storageService.findUserByUsername(this.storageService.getUsername()).subscribe(user => {
      this.user = user;
    });
  }
  
   deleteSportsMan(id: number) {
    if (confirm('Are you sure')) {
      this.sportsManService.deleteSportsMan(id).subscribe(() => {
        window.location.reload();
      });
    }
  }
  addPayment(id: number) {
    const dialogRef = this.dialog.open(AddPaymentComponent, {
      width: '800px',
      data: { id }
    });
    dialogRef.afterClosed().subscribe(() => {
    });
  }
  addSportForSportsMan(id: number, idGym: number) {
    const dialogRef = this.dialog.open(AddSportsSportsmanComponent, {
      width: '800px',
      data: {id, idGym }
    });
    dialogRef.afterClosed().subscribe(() => {
    });
  }
  showSports(id: number) {
    this.sportService.findSportsForSportsMan(id).subscribe(sports => {
      this.sports = sports;
    });
    this.paymentService.findPaymentForSportsMan(id).subscribe(payments => {
      this.payments = payments;
    });
  }
  deletePayment(id: number) {
    if (confirm('Are you sure')) {
      this.paymentService.deletePayment(id).subscribe(() => {
        window.location.reload();
      });
    }
  }
}

src/app/sportsman/display-sports-man.component.html





<mat-accordion>
  <mat-expansion-panel (opened)="panelOpenState = true" (closed)="panelOpenState = false" *ngFor="let s of sportsMan">
    <mt-expansion-panel-header (click)="showSports(s.id)">
      <mat-panel-title>
        SportsMan
      </mat-panel-title>
      <mat-panel-description>
        {{s.firstName}}
      </mat-panel-description>
    </mat-expansion-panel-header>
    
    <table id="table">
      <tr>
        <th>Avatar</th>
        <th>Name</th>
        <th>Age</th>
        <th>Sex</th>
        <th *ngIf="user.admin">Details</th>
      </tr>
      <tr>
        <td><img src="{{s.avatar}}" alt="Avatar" style="width: 50px; height: 44px;"></td>
        <td>{{s.lastName}}</td>
        <td>{{s.age}}</td>
        <td>{{s.sex}}</td>
        <td *ngIf="user.admin">
          <mat-chip-list aria-label="Fish selection">
            <mat-chip style="cursor: pointer;"><span class="material-icons" (click)="deleteSportsMan(s.id)">close</span>
            </mat-chip>
            <mat-chip style="cursor: pointer;" color="accent" selected (click)="addSportForSportsMan(s.id, idGym)">Add
              sport</mat-chip>
            <mat-chip style="cursor: pointer;" color="primary" selected (click)="addPayment(s.id)">Add payment
            </mat-chip>
          </mat-chip-list>
        </td>
      </tr>
    </table><br>

      <div id="maincontainer">
      <div id="sportColumn">
        <p style="font-weight: bold;">Playing sports:</p>
        <p *ngFor="let sport of sports"> - {{sport.name}} </p>
      </div>
      <div id="paymentColumn">
        <p style="font-weight: bold;">Payment payed:</p>
        <p *ngFor="let p of payments">
          <span>Cost: {{p.cost}}$</span><br>
          <span>Duration: {{p.duration}} month</span><br>
          <span>{{p.date | date}}</span>
          <button mat-icon-button color="warn" (click)="deletePayment(p.id)">
            <mat-icon>close</mat-icon>
          </button>
        </p>
      </div>
    </div>
  </mat-expansion-panel>
</mat-accordion>

src/app/sportsman/display-sports-man.component.css




#table {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

#table td,
#table th {
  border: 1px solid #ddd;
  padding: 8px;
}
#table tr:nth-child(even) {
  background-color: #f2f2f2;
}
#table tr:hover {
  background-color: #ddd;
}
#table th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #3f51b5;
  color: white;
}
#maincontainer {
  width: 100%;
  height: 100%;
}
#sportColumn {
  float: left;
  display: inline-block;
  width: 50%;
  height: 100%;
}
#paymentColumn {
  float: left;
  display: inline-block;
  width: -moz-calc(100% - 50%);
  width: -webkit-calc(100% - 50%);
  width: calc(100% - 50%);
  height: 100%;
}

Add Add Train Component

We are going to create a find-all-gyms page to add trainer information.


src/app/trains/add-train.component.ts





 import  { Component, Inject, OnInit }  from  '@angular/core';
 import  { MAT_DIALOG_DATA }  from  '@angular/material/dialog';
 import  { Train }  from  '../model/Model';
 import  { TrainService }  from  './../../service/train.service';

@Component({
  selector: 'app-add-train',
  templateUrl: './add-train.component.html',
  styleUrls: ['./add-train.component.css']
})
export class AddTrainComponent implements OnInit {
  showProgressBar = false;
  train: Train = {} as Train;
  title = 'Add train information';
 
  constructor(@Inject(MAT_DIALOG_DATA) public data: any, private trainService: TrainService) { }

  ngOnInit(): void {
    if(this.data.idTrain != null) {
      this.title = 'Edit train information';
      this.trainService.findTrainById(this.data.idTrain).subscribe(train => {
        this.train = train;
      });
    }
  }
  addTrain() {
   this.showProgressBar = true;
   if(this.data.idTrain != null) {
    this.trainService.editTrain(this.train, this.data.idTrain).subscribe(train => {
      this.train = train;
      window.location.reload();
    });
   }
   this.trainService.addTrainForGym(this.train, this.data.id).subscribe(train => {
     this.train = train;
     window.location.reload();
   });
  }
}

src/app/trains/add-train.component.html





<div class="form-content">
  <mat-card>
    <mat-card-header>
      <mat-card-title>{{title}}</mat-card-title>
    </mat-card-header>
    <mat-card-content>
      <mat-progress-bar mode="indeterminate" *ngIf="showProgressBar"></mat-progress-bar>
      <div> <br>
        <mat-form-field appearance="fill" class="mat-form-field">
          <mat-label>Enter full name</mat-label>
          <input matInput type="text" [(ngModel)]="train.name" name="name">
        </mat-form-field><br>
      </div>
    </mat-card-content>
    <mat-card-actions>
      <button mat-raised-button color="accent" (click)="addTrain()" class="button">Save</button>
    </mat-card-actions><br>
  </mat-card>
</div>

Add train For Sport

We are going to create a find-all-gyms page to add train for sport information.


src/app/trains/add-train-sport.component.ts





 import  { Component, Inject, OnInit }  from  '@angular/core';
 import  { MAT_DIALOG_DATA }  from  '@angular/material/dialog';
 import  { Train}  from  '../model/Model';
 import  { TrainService }  from  'src/app/service/train.service';

@Component({
  selector: 'app-add-train-sport',
  templateUrl: './add-train-sport.component.html',
  styleUrls: ['./add-train-sport.component.css']
})
export class AddTrainSportComponent implements OnInit {
  trains: Train[];
  filterTrains: Train[];
  
 constructor(@Inject(MAT_DIALOG_DATA) public data: any, private trainService: TrainService) { }

  ngOnInit(): void {
    this.trainService.findAllTrains().subscribe(trains => {
      this.trains = trains;
      this.trainService.findTrainsForSport(this.data.id).subscribe(filterTrains => {
        this.filterTrains = filterTrains;
        this.filterTrains.forEach(s => {
          this.trains = this.trains.filter(item => item.id !== s.id);
        });
      });
    });
  }
  selectedValue(event: any) {
    const idTrain = event.value;
    this.trainService.addTrainForSport(idTrain, this.data.id).subscribe(() => {
      window.location.reload();
    })
  }
}

src/app/trains/add-train-sport.component.html





<h4>Please Choose a train </h4>
<mat-form-field appearance="fill">
  <mat-label>Train</mat-label>
  <mat-select (selectionChange)="selectedValue($event)">
    <mat-option *ngFor="let s of trains" [value]="s.id">
      {{s.name}}
    </mat-option>
  </mat-select>
</mat-form-field>

Add the AppRoutingModule

In Angular, the best practice is to load and configure the router in a separate, top-level module that is dedicated to routing and imported by the root AppModule.


By convention, the module class name is AppRoutingModule and it belongs in the app-routing.module.ts in the src/app folder.


app-routing-module.ts





 import  { FindAllWorktimeComponent }  from  './worktime/find-all-worktime/find-all-worktime.component';
 import  { WelcomeComponent}  from  './welcome/welcome.component';
 import  { FindAllGymsComponent}  from  './gyms/find-all-gyms/find-all-gyms.component';
 import  { LoginComponent}  from  './login/login.component';
 import  { AdminDashboardComponent }  from  './admin-dashboard/admin-dashboard.component';
 import  { HomeComponent }  from  './home/home.component';
 import  { NgModule }  from  '@angular/core';
 import  { CommonModule }  from  '@angular/common';
 import  { RouterModule, Routes }  from  '@angular/router';

const routes: Routes = [
  {path: '', redirectTo: '/login', pathMatch: 'full'},
  {path: 'login', component: LoginComponent},
  {
    path: 'home/:username',
    component: HomeComponent,
    children: [
      {
        path: '',
        component: WelcomeComponent
      },
      {
        path: 'find-all-gyms/:id',
        component: FindAllGymsComponent,
        children: [
          {
            path: 'find-all-worktime/:id',
            component: FindAllWorktimeComponent,
          }
        ]
      }
     ]
  },
  {
    path: 'admin-dashboard/:username',
    component: AdminDashboardComponent
  }
];

@NgModule({
  declarations: [

  ],
  imports: [
    CommonModule,
    RouterModule.forRoot(routes)
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }


NgModules and JavaScript modules

The NgModule system is different from and unrelated to the JavaScript (ES2015) module system for managing collections of JavaScript objects. These are complementary module systems that you can use together to write your apps.


In JavaScript each file is a module and all objects defined in the file belong to that module. The module declares some objects to be public by marking them with the export key word. Other JavaScript modules use import statements to access public objects from other modules.


app-module.ts





import { AddPaymentComponent } from './payments/add-apyment/add-payment.component';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
import { MaterialModule } from './material-module';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppRoutingModule } from './app-routing.module';
import { HomeComponent } from './home/home.component';
import { AdminDashboardComponent } from './admin-dashboard/admin-dashboard.component';
import { LoginComponent } from './login/login.component';
import { FindAllGymsComponent } from './gyms/find-all-gyms/find-all-gyms.component';
import { EditGymComponent } from './gyms/edit-gym/edit-gym.component';
import { WelcomeComponent } from './welcome/welcome.component';
import { AddWorktimeComponent } from './worktime/add-worktime/add-worktime.component';
import { FindAllWorktimeComponent } from './worktime/find-all-worktime/find-all-worktime.component';
import { AddSportsManComponent } from './sportsMan/add-sports-man/add-sports-man.component';
import { DisplaySportsManComponent } from './sportsMan/display-sports-man/display-sports-man.component';
import { AddSportComponent } from './sports/add-sport/add-sport.component';
import { AddSportsSportsmanComponent } from './sports/add-sports-sportsman/add-sports-sportsman.component';
import { AddTrainComponent } from './trains/add-train/add-train.component';
import { AddArbitrateComponent } from './arbitrates/add-arbitrate/add-arbitrate.component';
import { AddArbitrateSportComponent } from './arbitrates/add-arbitrate-sport/add-arbitrate-sport.component';
import { AddTrainSportComponent } from './trains/add-train-sport/add-train-sport.component';
import { DisplaySportComponent } from './sports/display-sport/display-sport.component';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    AdminDashboardComponent,
    LoginComponent,
    FindAllGymsComponent,
    EditGymComponent,
    WelcomeComponent,
    AddWorktimeComponent,
    FindAllWorktimeComponent,
    AddSportsManComponent,
    DisplaySportsManComponent,
    AddSportComponent,
    AddSportsSportsmanComponent,
    AddPaymentComponent,
    AddTrainComponent,
    AddArbitrateComponent,
    AddArbitrateSportComponent,
    AddTrainSportComponent,
    DisplaySportComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule,
    MaterialModule,
    BrowserAnimationsModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [ CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA ]
})
export class AppModule { }

Conclusion

Now we have an overview of Angular 10 + Spring Boot CRUD example when building a CRUD App.

We also take a look at client-server architecture for REST API using Spring Web MVC & Spring Data JPA, as well as Angular 10 project structure for building a front-end app to make HTTP requests and consume responses.





Tags

You may like these posts

Post a Comment

Previous Post Next Post


Follow us on facebook