Pet pages

src/app/app-routing.module.ts

@@ -29,7 +29,16 @@ import {LocationCreateComponent} from "./location/location-create/location-creat
 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";
-
+import { CatListComponent } from './pet/cat/cat-list/cat-list.component';
+import { CatCreateComponent } from './pet/cat/cat-create/cat-create.component';
+import { CatDetailComponent } from './pet/cat/cat-detail/cat-detail.component';
+import { CatEditComponent } from './pet/cat/cat-edit/cat-edit.component';
+import { CatDeleteComponent } from './pet/cat/cat-delete/cat-delete.component';
+import { DogListComponent } from './pet/dog/dog-list/dog-list.component';
+import { DogCreateComponent } from './pet/dog/dog-create/dog-create.component';
+import { DogDetailComponent } from './pet/dog/dog-detail/dog-detail.component';
+import { DogEditComponent } from './pet/dog/dog-edit/dog-edit.component';
+import { DogDeleteComponent } from './pet/dog/dog-delete/dog-delete.component';
 
 const routes: Routes = [
   { path: 'users/create', component: UserRegisterComponent},
@@ -58,6 +67,16 @@ const routes: Routes = [
   { path: 'role/create', component:RoleCreateComponent },
   { path: 'role/:id/delete', component:RoleDeleteComponent },
   { path: 'role/:id', component:RoleDetailComponent },
+  { path: 'cats', component: CatListComponent, canActivate: [LoggedInGuard]},
+  { path: 'cats/create', component: CatCreateComponent, canActivate: [LoggedInGuard]},
+  { path: 'cats/:id', component: CatDetailComponent, canActivate: [LoggedInGuard]},
+  { path: 'cats/:id/edit', component: CatEditComponent, canActivate: [LoggedInGuard]},
+  { path: 'cats/:id/delete', component: CatDeleteComponent, canActivate: [LoggedInGuard]},
+  { path: 'dogs', component: DogListComponent, canActivate: [LoggedInGuard]},
+  { path: 'dogs/create', component: DogCreateComponent, canActivate: [LoggedInGuard]},
+  { path: 'dogs/:id', component: DogDetailComponent, canActivate: [LoggedInGuard]},
+  { path: 'dogs/:id/edit', component: DogEditComponent, canActivate: [LoggedInGuard]},
+  { path: 'dogs/:id/delete', component: DogDeleteComponent, canActivate: [LoggedInGuard]},
   { path: 'about', component: AboutComponent},
   { path: '404', component: NotFoundComponent},
   { path: '', redirectTo: 'about', pathMatch: 'full'},

src/app/app.module.ts

@@ -51,7 +51,20 @@ import {ScheduleListComponent} from './schedule/schedule-list/schedule-list.comp
 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";
-
+import { CatListComponent } from './pet/cat/cat-list/cat-list.component';
+import { CatService } from './pet/cat/cat.service';
+import { DogService } from './pet/dog/dog.service';
+import { CatCreateComponent } from './pet/cat/cat-create/cat-create.component';
+import { CatDetailComponent } from './pet/cat/cat-detail/cat-detail.component';
+import { CatEditComponent } from './pet/cat/cat-edit/cat-edit.component';
+import { CatDeleteComponent } from './pet/cat/cat-delete/cat-delete.component';
+import { CatSearchComponent } from './pet/cat/cat-search/cat-search.component';
+import { DogListComponent } from './pet/dog/dog-list/dog-list.component';
+import { DogCreateComponent } from './pet/dog/dog-create/dog-create.component';
+import { DogDetailComponent } from './pet/dog/dog-detail/dog-detail.component';
+import { DogDeleteComponent } from './pet/dog/dog-delete/dog-delete.component';
+import { DogEditComponent } from './pet/dog/dog-edit/dog-edit.component';
+import { DogSearchComponent } from './pet/dog/dog-search/dog-search.component';
 
 @NgModule({
   declarations: [
@@ -88,7 +101,19 @@ import {ScheduleDetailComponent} from "./schedule/schedule-detail/schedule-detai
     ShelterDetailComponent,
     LocationListComponent,
     LocationSearchComponent,
-    LocationCreateComponent
+    LocationCreateComponent,
+    CatListComponent,
+    CatCreateComponent,
+    CatDetailComponent,
+    CatDeleteComponent,
+    CatEditComponent,
+    CatSearchComponent,
+    DogListComponent,
+    DogCreateComponent,
+    DogDetailComponent,
+    DogDeleteComponent,
+    DogEditComponent,
+    DogSearchComponent,
   ],
   imports: [
     BrowserModule,
@@ -108,7 +133,7 @@ import {ScheduleDetailComponent} from "./schedule/schedule-detail/schedule-detai
     { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true },
     { provide: HTTP_INTERCEPTORS, useClass: HttpErrorInterceptor, multi: true },
     AuthenticationBasicService, LoggedInGuard, UserService, ScheduleService, ShelterService, LocationService,
-    provideAnimationsAsync()
+    CatService, DogService, provideAnimationsAsync()
   ],
   bootstrap: [AppComponent]
 })

src/app/navbar/navbar.component.html

@@ -1,5 +1,5 @@
 <nav class="navbar navbar-expand-lg navbar-light bg-light">
-  <a class="navbar-brand ms-3" [routerLink]="['/about']"><b>Angular</b>Template</a>
+  <a class="navbar-brand ms-3" [routerLink]="['/about']"><b>MyPets</b>GEIADE</a>
   <button class="navbar-toggler" type="button" (click)="isCollapsed = !isCollapsed"
           [attr.aria-expanded]="!isCollapsed" aria-controls="navbarContent" aria-label="Toggle navigation">
     <span class="navbar-toggler-icon"></span>
@@ -67,6 +67,16 @@
              [routerLink]="['/locations/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="petsDropdown" role="button"
+           aria-haspopup="true" aria-expanded="false" ngbDropdownToggle>Pets</a>
+        <div class="dropdown-menu" aria-labelledby="petsDropdown" ngbDropdownMenu>
+          <a class="dropdown-item" [routerLinkActive]="'active'" [routerLinkActiveOptions]="{ exact: true }"
+             [routerLink]="['/dogs']"><span class="fas fa-paw"></span> Dogs</a>
+          <a class="dropdown-item" [routerLinkActive]="'active'" [routerLinkActiveOptions]="{ exact: true }"
+             [routerLink]="['/cats']"><span class="fas fa-heart"></span> Cats</a>
+        </div>
+      </li>
     </ul>
     <ul class="navbar-nav ms-auto me-3" app-login-navbar></ul>
   </div>

src/app/pet/cat/cat-create/cat-create.component.css

@@ -0,0 +1,4 @@
+.form-error {
+    color: red;
+    font-size: x-small;
+}

src/app/pet/cat/cat-create/cat-create.component.html

@@ -0,0 +1,198 @@
+<form
+  id="cat-form"
+  (ngSubmit)="onSubmit()"
+  #form="ngForm"
+  [formGroup]="catForm"
+>
+  <fieldset>
+    <div class="row">
+      <div class="form-group mb-3 col-6">
+        <label class="control-label required-label" for="name">Name</label>
+          <input
+            id="name"
+            name="name"
+            formControlName="name"
+            type="text"
+            class="form-control"
+            [(ngModel)]="cat.name"
+          />
+        <div class="form-error" *ngIf="name.errors?.['required']">
+          Name is required
+        </div>
+      </div>
+
+      <div class="form-group mb-3 col-6">
+        <label class="control-label required-label" for="chip">Chip</label>
+          <input
+            id="chip"
+            name="chip"
+            formControlName="chip"
+            type="text"
+            class="form-control"
+            [(ngModel)]="cat.chip"
+          />
+        <div class="form-error" *ngIf="chip.errors?.['required']">
+          Chip is required
+        </div>
+      </div>
+
+      <div class="form-group mb-3 col-6">
+        <label class="control-label required-label" for="dateOfBirth">Date of birth</label>
+          <input
+            id="dateOfBirth"
+            name="dateOfBirth"
+            formControlName="dateOfBirth"
+            type="date"
+            class="form-control"
+            [(ngModel)]="cat.dateOfBirth"
+          />
+        <div class="form-error" *ngIf="dateOfBirth.errors?.['required']">
+          Date of birth is required
+        </div>
+        <div
+          class="form-error"
+          *ngIf="dateOfBirth.errors?.['invalidDate'] && !dateOfBirth.errors?.['required']"
+        >
+          Invalid date
+        </div>
+      </div>
+
+      <div class="form-group mb-3 col-6">
+        <label class="control-label required-label" for="colour">Colour</label>
+          <input
+            id="colour"
+            name="colour"
+            formControlName="colour"
+            type="color"
+            class="form-control"
+            [(ngModel)]="cat.colour"
+          />
+        <div class="form-error" *ngIf="colour.errors?.['required']">
+          Colour is required
+        </div>
+        <div
+          class="form-error"
+          *ngIf="colour.errors?.['invalidColour'] && !colour.errors?.['required']"
+        >
+          Invalid date
+        </div>
+      </div>
+
+      <div class="form-group mb-3 col-6">
+        <label class="control-label required-label" for="size">Size</label>
+          <select
+            id="size"
+            name="size"
+            formControlName="size"
+            class="form-control"
+            [(ngModel)]="cat.size"
+          >
+          <option value="1">Small</option>
+          <option value="2">Average</option>
+          <option value="3">Large</option>
+          <option value="4">Extra Large</option>
+        </select>
+        <div class="form-error" *ngIf="size.errors?.['required']">
+          Size is required
+        </div>
+        <div
+          class="form-error"
+          *ngIf="size.errors?.['invalidNumber'] && !size.errors?.['required']"
+        >
+          Size is invalid
+        </div>
+      </div>
+
+      <div class="form-group mb-3 col-6">
+        <label class="control-label required-label" for="sex">Sex</label>
+          <select
+            id="sex"
+            name="sex"
+            formControlName="sex"
+            class="form-control"
+            [(ngModel)]="cat.sex"
+          >
+          <option value="male">Male</option>
+          <option value="female">Female</option>
+        </select>
+        <div class="form-error" *ngIf="sex.errors?.['required']">
+          Sex is required
+        </div>
+        <div
+          class="form-error"
+          *ngIf="sex.errors?.['invalidSex'] && !sex.errors?.['required']"
+        >
+          Sex is invalid
+        </div>
+      </div>
+
+      <div class="form-group mb-3 col-6">
+        <label class="control-label required-label" for="name">Race</label>
+          <input
+            id="race"
+            name="race"
+            formControlName="race"
+            type="text"
+            class="form-control"
+            [(ngModel)]="cat.race"
+          />
+        <div class="form-error" *ngIf="race.errors?.['required']">
+          Race is required
+        </div>
+      </div>
+
+      <div class="form-group mb-3 col-6">
+        <label class="control-label required-label" for="dangerous">Dangerous</label>
+          <input
+            id="dangerous"
+            name="dangerous"
+            formControlName="dangerous"
+            type="checkbox"
+            clasS="ms-3"
+            [(ngModel)]="cat.dangerous"
+          />
+      </div>
+
+      <div class="form-group mb-3 col-6">
+        <label class="control-label required-label" for="meowingLevel">Meowing Level</label>
+        <select
+          id="meowingLevel"
+          name="meowingLevel"
+          formControlName="meowingLevel"
+          class="form-control"
+          [(ngModel)]="cat.meowingLevel"
+        >
+          <option value="1">No meowing</option>
+          <option value="2">Low meowing</option>
+          <option value="3">Average meowing</option>
+          <option value="4">Loud meowing</option>
+        </select>
+        <div class="form-error" *ngIf="meowingLevel.errors?.['required']">
+          Meowing level is required
+        </div>
+      </div>
+
+    </div>
+
+    <!-- Save and back buttons -->
+    <div class="form-group fa-pull-right mt-3">
+      <button
+        id="listBtn"
+        type="button"
+        [routerLink]="['/cats']"
+        class="btn btn-outline-primary pull-right"
+      >
+        Back
+      </button>
+      <button
+        id="submit"
+        type="submit"
+        [disabled]="!form.form.valid"
+        class="btn btn-success ms-3"
+      >
+        <i class="fa fa-plus-circle me-2"></i>
+        Create
+      </button>
+    </div>
+  </fieldset>
+</form>