Schedule frontend

angular.json

@@ -60,7 +60,7 @@
                 {
                   "type": "initial",
                   "maximumWarning": "1mb",
-                  "maximumError": "2mb"
+                  "maximumError": "2.5mb"
                 },
                 {
                   "type": "anyComponentStyle",

package.json

@@ -32,6 +32,8 @@
     "@ng-bootstrap/ng-bootstrap": "^16.0.0",
     "@popperjs/core": "^2.11.8",
     "bootstrap": "^5.3.2",
+    "moment": "^2.30.1",
+    "moment-timezone": "^0.5.45",
     "rxjs": "~7.8.1",
     "tslib": "^2.6.2",
     "zone.js": "~0.14.4"

src/app/app-routing.module.ts

@@ -22,6 +22,10 @@ import {ShelterCertificateDeleteComponent} from "./shelter-certificate/shelter-c
 import {ShelterCreateComponent} from "./shelter/shelter-create/shelter-create.component";
 import {LocationListComponent} from "./location/location-list/location-list.component";
 import {LocationCreateComponent} from "./location/location-create/location-create.component";
+import {ScheduleListComponent} from "./schedule/schedule-list/schedule-list.component";
+import {ScheduleCreateComponent} from "./schedule/schedule-create/schedule-create.component";
+import {ScheduleDetailComponent} from "./schedule/schedule-detail/schedule-detail.component";
+
 
 const routes: Routes = [
   { path: 'users/create', component: UserRegisterComponent},
@@ -43,6 +47,9 @@ const routes: Routes = [
   { path: 'shelter-certificate/create', component: ShelterCertificateCreateComponent},
   { path: 'shelter-certificate/:id', component: ShelterCertificateDetailComponent},
   { path: 'shelter-certificate/:id/delete', component: ShelterCertificateDeleteComponent},
+  { path: 'schedules', component: ScheduleListComponent, canActivate: [LoggedInGuard]},
+  { path: 'schedules/create', component: ScheduleCreateComponent, canActivate: [LoggedInGuard]},
+  { path: 'schedules/:id', component: ScheduleDetailComponent, canActivate: [LoggedInGuard]},
   { path: 'about', component: AboutComponent},
   { path: '404', component: NotFoundComponent},
   { path: '', redirectTo: 'about', pathMatch: 'full'},

src/app/app.module.ts

@@ -42,6 +42,12 @@ import {LocationService} from './location/location.service'
 import {LocationListComponent} from './location/location-list/location-list.component';
 import {LocationSearchComponent} from './location/location-search/location-search.component';
 import {LocationCreateComponent} from "./location/location-create/location-create.component";
+import {ScheduleService} from './schedule/schedule.service'
+import {ScheduleListComponent} from './schedule/schedule-list/schedule-list.component';
+import {ScheduleSearchComponent} from './schedule/schedule-search/schedule-search.component';
+import {ScheduleCreateComponent} from "./schedule/schedule-create/schedule-create.component";
+import {ScheduleDetailComponent} from "./schedule/schedule-detail/schedule-detail.component";
+
 
 @NgModule({
   declarations: [
@@ -65,6 +71,10 @@ import {LocationCreateComponent} from "./location/location-create/location-creat
     ShelterCertificateCreateComponent,
     ShelterCertificateDetailComponent,
     ShelterCertificateDeleteComponent,
+    ScheduleListComponent,
+    ScheduleSearchComponent,
+    ScheduleCreateComponent,
+    ScheduleDetailComponent,
     ShelterListComponent,
     ShelterCreateComponent,
     ShelterDetailComponent,
@@ -89,7 +99,7 @@ import {LocationCreateComponent} from "./location/location-create/location-creat
   providers: [
     { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true },
     { provide: HTTP_INTERCEPTORS, useClass: HttpErrorInterceptor, multi: true },
-    AuthenticationBasicService, LoggedInGuard, UserService, ShelterService, LocationService,
+    AuthenticationBasicService, LoggedInGuard, UserService, ScheduleService, ShelterService, LocationService,
     provideAnimationsAsync()
   ],
   bootstrap: [AppComponent]

src/app/navbar/navbar.component.html

@@ -28,6 +28,15 @@
              [routerLink]="['/shelter-certificate/create']"><span class="fas fa-user-circle"></span> Create</a>
         </div>
       </li>
+      <li class="nav-item" *ngIf="isRole('user')" ngbDropdown>
+        <a class="nav-link dropdown-toggle" id="playerDropdown" role="button"
+           aria-haspopup="true" aria-expanded="false" ngbDropdownToggle>Schedules</a>
+        <div class="dropdown-menu" aria-labelledby="schedulesDropdown" ngbDropdownMenu>
+          <a class="dropdown-item" [routerLinkActive]="'active'" [routerLinkActiveOptions]="{ exact: true }"
+             [routerLink]="['/schedules']"><span class="fas fa-user-circle"></span> List</a>
+          <a class="dropdown-item" [routerLinkActive]="'active'" [routerLinkActiveOptions]="{ exact: true }"
+             [routerLink]="['/schedules/create']"><span class="fas fa-user-circle"></span> Create</a>
+        </div>
       <li class="nav-item" *ngIf="isRole('user')" ngbDropdown>
         <a class="nav-link dropdown-toggle" id="shelterDropdown" role="button"
            aria-haspopup="true" aria-expanded="false" ngbDropdownToggle>Shelters</a>

src/app/schedule/schedule-create/schedule-create.component.html

@@ -0,0 +1,30 @@
+<form id="schedule-form" (ngSubmit)="onSubmit()" #form="ngForm">
+  <fieldset>
+
+
+    <!-- starttime input -->
+    <div class="form-group mb-3">
+      <label class="control-label" for="startTime">StartTime</label>
+      <input id="startTime" name="startTime" type="Date" class="form-control" [(ngModel)]="schedule.startTime"
+             #startTime="ngModel">
+    </div>
+
+    <!-- endtime input -->
+    <div class="form-group mb-3">
+      <label class="control-label" for="endTime">endTime</label>
+      <input id="endTime" name="endTime" type="Date" class="form-control" [(ngModel)]="schedule.endTime"
+             #endTime="ngModel">
+    </div>
+
+    <!-- Buttons -->
+    <div class=" form-group fa-pull-right">
+      <button id="listBtn" type="button" [routerLink]="['/schedules']"
+              class="btn btn-outline-primary pull-right">Back
+      </button>
+      <button id="submit" type="submit" [disabled]="!form.form.valid"
+              class="btn ms-3 btn-success pull-right">Submit
+      </button>
+    </div>
+
+  </fieldset>
+</form>

src/app/schedule/schedule-create/schedule-create.component.ts

@@ -0,0 +1,60 @@
+import {Component, OnInit} from '@angular/core';
+import {Router} from '@angular/router';
+import {AuthenticationBasicService} from 'src/app/login-basic/authentication-basic.service';
+import {Schedule} from '../schedule';
+import {ScheduleService} from '../schedule.service';
+import {PagedResourceCollection} from '@lagoshny/ngx-hateoas-client';
+import {HttpClient} from '@angular/common/http';
+import {environment} from "../../../environments/environment";
+import * as moment from 'moment';
+import 'moment-timezone';
+
+@Component({
+  selector: 'app-schedules-create',
+  templateUrl: './schedule-create.component.html',
+})
+export class ScheduleCreateComponent implements OnInit {
+
+  public schedule: Schedule = new Schedule();
+
+  public startTime: Date;
+  public endTime: Date;
+  public shelter: string;
+  public schedules: Schedule[] = [];
+  public pageSize = 5;
+  public page = 1;
+  public totalSchedules = 0;
+  public creationDate: Date
+  public authserv: AuthenticationBasicService;
+  public types: [];
+
+  constructor(private router: Router,
+              private authenticationService: AuthenticationBasicService,
+              private scheduleService: ScheduleService,
+
+              private http: HttpClient) { }
+
+  ngOnInit(): void {
+    this.creationDate = new Date();
+    this.http.get<any>(`${environment.API}/profile/schedules`)
+      .subscribe(data => {
+        this.types = (data.alps.descriptor[0].descriptor[2].doc.value).split(',').sort();
+      });
+
+    this.scheduleService.getPage({ pageParams:  { size: this.pageSize }, sort: { id: 'ASC' } }).subscribe(
+      (page: PagedResourceCollection<Schedule>) => {
+        this.schedules = page.resources;
+        this.totalSchedules = page.totalElements;
+      });
+  }
+
+  onSubmit(): void {
+
+    this.schedule.startTime = moment.tz(this.schedule.startTime.toString(), 'America/Los_Angeles')
+    this.schedule.endTime = moment.tz(this.schedule.endTime.toString(), 'America/Los_Angeles')
+    this.scheduleService.createResource({ body: this.schedule }).subscribe(
+      (schedule:Schedule) => this.router.navigate([schedule.uri]));
+  }
+
+
+}

src/app/schedule/schedule-detail/schedule-detail.component.html

@@ -0,0 +1,26 @@
+<div class="card mb-4">
+  <div class="card-block">
+    <h4 class="card-title col-md-12 p-3">{{schedule.id}}</h4>
+    <div class="card-body row m-1">
+      <div class="col-md-4 p-3">
+        <h6 class="card-subtitle text-muted">StartTime</h6>
+        <p class="card-text">{{schedule.startTime}}</p>
+      </div>
+      <div class="col-md-4 p-3">
+        <h6 class="card-subtitle text-muted">EndTime</h6>
+        <p class="card-text">{{schedule.endTime}}</p>
+      </div>
+    </div>
+    <div class="card-footer text-right">
+      <button id="listBtn" type="button" [routerLink]="['/schedules']"
+              class="btn m-1 btn-outline-primary">Schedule List
+      </button>
+      <!-- <button id="editBtn" type="button" *ngIf="getCurrentUser().username === user.username" [routerLink]="['edit']"
+              class="btn m-1 btn-outline-success">Edit
+      </button>
+      <button id="deleteBtn" type="button" *ngIf="getCurrentUser().username === user.username" [routerLink]="['delete']"
+              class="btn m-1 btn-outline-danger">Delete
+      </button> -->
+    </div>
+  </div>
+</div>

src/app/schedule/schedule-detail/schedule-detail.component.ts

@@ -0,0 +1,26 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { AuthenticationBasicService } from '../../login-basic/authentication-basic.service';
+import {ScheduleService} from "../schedule.service";
+import {Schedule} from "../schedule";
+
+@Component({
+  selector: 'app-schedule-detail',
+  templateUrl: './schedule-detail.component.html'
+})
+export class ScheduleDetailComponent implements OnInit {
+  public schedule: Schedule = new Schedule();
+
+  constructor(private route: ActivatedRoute,
+              private scheduleService: ScheduleService) {
+  }
+
+  ngOnInit(): void {
+    const id = this.route.snapshot.paramMap.get('id');
+    this.scheduleService.getResource(id).subscribe(
+      schedule => {
+        this.schedule = schedule;
+      });
+  }
+
+}

src/app/schedule/schedule-list/schedule-list.component.html

@@ -0,0 +1,24 @@
+<app-schedule-search (emitResults)="detail($event)"></app-schedule-search>
+
+<div class="card mb-1" *ngFor="let schedule of schedules">
+  <div class="card-block row m-1 col-12">
+    <div class="card-body row align-items-center">
+      <div class="col-6 mt-1">
+        <h6 class="card-subtitle text-muted">Id</h6>
+        <a class="card-text" [routerLink]="['/schedules', schedule.id]">{{schedule.id}}</a>
+      </div>
+      <div class="col-6 mt-1">
+        <h6 class="card-subtitle text-muted">StartTime</h6>
+        <p class="card-text">{{schedule.startTime}}</p>
+        <h6 class="card-subtitle text-muted">EndTime</h6>
+        <p class="card-text">{{schedule.endTime}}</p>
+      </div>
+    </div>
+  </div>
+</div>
+
+<ngb-pagination class="d-flex justify-content-center"
+                [(page)]="page" [pageSize]="pageSize" [collectionSize]="totalSchedules"
+                (pageChange)="changePage()"></ngb-pagination>
+
+

src/app/schedule/schedule-list/schedule-list.component.ts

@@ -0,0 +1,38 @@
+import { Router } from '@angular/router';
+import { Component, OnInit } from '@angular/core';
+import { ScheduleService } from '../schedule.service';
+import { PagedResourceCollection } from '@lagoshny/ngx-hateoas-client';
+import {Schedule} from "../schedule";
+
+@Component({
+  selector: 'app-schedule-list',
+  templateUrl: './schedule-list.component.html'
+})
+export class ScheduleListComponent implements OnInit {
+  public schedules: Schedule[] = [];
+  public pageSize = 5;
+  public page = 1;
+  public totalSchedules = 0;
+
+  constructor(
+    public router: Router,
+    private scheduleService: ScheduleService) {
+  }
+
+  ngOnInit(): void {
+    this.scheduleService.getPage({ pageParams:  { size: this.pageSize }, sort: { id: 'ASC' } }).subscribe(
+      (page: PagedResourceCollection<Schedule>) => {
+        this.schedules = page.resources;
+        this.totalSchedules = page.totalElements;
+      });
+  }
+
+  changePage(): void {
+    this.scheduleService.getPage({ pageParams: { page: this.page - 1, size: this.pageSize }, sort: { id: 'ASC' } }).subscribe(
+      (page: PagedResourceCollection<Schedule>) => this.schedules = page.resources);
+  }
+
+  detail(schedule: Schedule): void {
+    this.router.navigate(['schedules', schedule.id]);
+  }
+}

src/app/schedule/schedule-search/schedule-search.component.html

@@ -0,0 +1,11 @@
+<div class="col form-group">
+  <input id="typeahead-http" type="text" class="form-control" [resultTemplate]="rt"
+         [class.is-invalid]="searchFailed" [ngbTypeahead]="autocomplete" placeholder="Search all schedules"
+         [class.loading]="searching" (selectItem)="select($event.item)"/>
+  <div class="invalid-feedback" *ngIf="searchFailed">Sorry, suggestions could not be loaded.</div>
+</div>
+
+<ng-template #rt let-r="result" let-t="term">
+  <div class="row"><ngb-highlight [result]="r.id" [term]="t"></ngb-highlight></div>
+  <div class="row"><small>{{r.email}}</small></div>
+</ng-template>