completed

package.json

@@ -20,6 +20,7 @@
     "@angular/platform-browser": "^17.0.0",
     "@angular/platform-browser-dynamic": "^17.0.0",
     "@angular/router": "^17.0.0",
+    "bootstrap": "^5.3.2",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.14.2"
@@ -40,4 +41,4 @@
     "tailwindcss": "^3.3.5",
     "typescript": "~5.2.2"
   }
-}
+}

src/app/app-nav/app-nav.component.html

@@ -8,6 +8,7 @@
       <a mat-list-item  routerLink="home">Home</a>
       <a mat-list-item  routerLink="rooms">Room</a>
       <a mat-list-item  routerLink="employee">Employee</a>
+      <a mat-list-item routerLink="rooms/add/addRoom">AddRoom</a>
     </mat-nav-list>
   </mat-sidenav>
   <mat-sidenav-content>

src/app/app-routing.module.ts

@@ -6,6 +6,7 @@ import { EmployeeComponent } from './employee/employee.component';
 import { NotFoundComponent } from './not-found/not-found.component';
 import { RoomsBookingComponent } from './rooms/rooms-booking/rooms-booking.component';
 import { AuthGuard } from './shared/auth/auth.guard';
+import { RoomAddComponent } from './rooms/room-add/room-add.component';
 
 const routes: Routes = [
   {
@@ -23,6 +24,11 @@ const routes: Routes = [
   {
     path:'rooms/:id',component:RoomsBookingComponent,canActivate:[AuthGuard]
   },
+  {
+    path:'rooms/add/addRoom',component:RoomAddComponent ,canActivate:[AuthGuard]
+  },
+
+  //lazy loading
   { path: 'a', loadChildren: () => import('./modulea/modulea.module').then(m => m.ModuleaModule) },
   { path: 'b', loadChildren: () => import('./moduleb/moduleb.module').then(m => m.ModulebModule) },
   {

src/app/app.component.html

@@ -1,5 +1 @@
 <app-app-nav></app-app-nav>
-
-<!-- <a [routerLink]="'home'">Home</a>
-<a [routerLink]="'rooms'">Room</a>
-<a [routerLink]="'employee'">Employee</a> -->

src/app/app.component.ts

@@ -11,7 +11,7 @@ export class AppComponent implements OnInit{
   constructor(private newsService:NewsService) { }
   //acces to the element with the #name
   //@ViewChild('name', { static: true }) name!: ElementRef;
-  title = 'App2';
+  //title = 'App2';
 
   ngOnInit(): void {
     //this.name.nativeElement.value = 'Hello World';

src/app/app.module.ts

@@ -27,6 +27,7 @@ import { RoomsBookingComponent } from './rooms/rooms-booking/rooms-booking.compo
 import { AuthService } from './service/auth.service';
 import { NewsService } from './service/news.service';
 import { AuthGuard } from './shared/auth/auth.guard';
+import { RoomAddComponent } from './rooms/room-add/room-add.component';
 
 
 @NgModule({
@@ -42,8 +43,9 @@ import { AuthGuard } from './shared/auth/auth.guard';
     AppNavComponent,
     NotFoundComponent,
     RoomsBookingComponent,
-    RoomsBookingComponent
-],
+    RoomsBookingComponent,
+    RoomAddComponent,
+  ],
 
   imports: [
     BrowserModule,

src/app/modulea/modulea-routing.module.ts

@@ -12,3 +12,7 @@ const routes: Routes = [
   exports: [RouterModule]
 })
 export class ModuleaRoutingModule { }
+
+//create module for each compoent instead of app.module.ts
+//single responsibility principle
+//lazy loading

src/app/rooms/room-add/room-add.component.css

@@ -0,0 +1,4 @@
+.form-group .form-control {
+    margin-top: 5px;
+    margin-bottom: 5px;
+}

src/app/rooms/room-add/room-add.component.html

@@ -0,0 +1,50 @@
+<form (ngSubmit)="onSubmit()" #f="ngForm" novalidate>
+    <div class="form-group">
+        <label for="">Firstname</label>
+        <input #name="ngModel" [ngClass]="{
+                  'is-invalid':
+                    name.invalid && (name.invalid || name.touched),
+                  'is-valid':
+                    name.valid && (name.invalid || name.touched)
+                }" minlength="1" required class="form-control" type="text" [(ngModel)]="roomModel.name"
+            placeholder="name" name="firstName" ngModel />
+        <div class="invalid-feedback">
+            <p *ngIf="name.errors">Please fill name!</p>
+        </div>
+    </div>
+
+    <div class="form-group"> 
+        <label for="">toISO</label>
+        <input #isOn="ngModel" [ngClass]="{
+                      'is-invalid':
+                        isOn.invalid && (isOn.invalid || isOn.touched),
+                      'is-valid':
+                        isOn.valid && (isOn.invalid || isOn.touched)
+                    }" minlength="1" required class="form-control" type="text" [(ngModel)]="roomModel.isOn"
+            placeholder="isOn" name="isOn" ngModel />
+        <div class="invalid-feedback">
+            <p *ngIf="isOn.errors">Please fill isOn</p>
+        </div>
+    </div>
+
+    <div class="form-group">  
+        <label for="">Temparature</label>
+        <input #temperature="ngModel" [ngClass]="{
+                          'is-invalid':
+                             temperature.invalid && ( temperature.invalid ||  temperature.touched),
+                          'is-valid':
+                             temperature.valid && ( temperature.invalid ||  temperature.touched)
+                        }" minlength="1" required class="form-control" type="text" [(ngModel)]="roomModel.temperature"
+            placeholder=" temperature" name=" temperature" ngModel />
+        <div class="invalid-feedback">
+            <p *ngIf="temperature.errors">Please fill temperature</p>
+        </div>
+    </div>
+
+    <button [disabled]="f.invalid" class="btn btn-primary" type="submit" value="submit">
+        Submit
+    </button>
+
+    <p *ngIf="!f.invalid">{{ f.value | json }}</p>
+
+</form>

src/app/rooms/room-add/room-add.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RoomAddComponent } from './room-add.component';
+
+describe('RoomAddComponent', () => {
+  let component: RoomAddComponent;
+  let fixture: ComponentFixture<RoomAddComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [RoomAddComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(RoomAddComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/rooms/room-add/room-add.component.ts

@@ -0,0 +1,28 @@
+import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
+import { room } from '../../shared/interface/room';
+
+@Component({
+  selector: 'app-room-add',
+  templateUrl: './room-add.component.html',
+  styleUrl: './room-add.component.css'
+})
+export class RoomAddComponent implements OnInit{
+  constructor(private ref: ElementRef) { }
+  @ViewChild('f') form: any;
+  b: boolean = false;
+  roomModel: room = {}; 
+  ngOnInit(): void {}
+
+  onSubmit(): void {
+    if (this.form.invalid) {
+      alert('please enter valid data!');
+      return;
+    }
+    //pass the form object to backend via the service
+    alert('success');
+    console.log(this.form.controls);
+
+    //reset form value after hit the submit button
+    this.form.reset();
+  }
+}

src/app/rooms/rooms-booking/rooms-booking.component.ts

@@ -10,7 +10,6 @@ export class RoomsBookingComponent implements OnInit{
   constructor(private route: ActivatedRoute) { }
   ngOnInit(): void {
     console.log(this.id);
-
   }
 
   id: number = this.route.snapshot.params['id']; 

src/app/shared/interface/room.ts

@@ -1,8 +1,8 @@
 export interface room{
-      id: number,
-      name: string,
-      isOn: boolean,
-      temperature: number,
+      id?:number,
+      name?: string,
+      isOn?: boolean,
+      temperature?: number,
 }
 
 

src/styles.css

@@ -4,3 +4,4 @@
 @tailwind utilities;
 html, body { height: 100%; }
 body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
+@import url("../node_modules/bootstrap/dist/css/bootstrap.min.css");