Merge pull request #28 from heshanu/AddRoomCompoent

Added room compoent

src/app/materilModule.ts

@@ -11,6 +11,7 @@ import { MatTableModule } from "@angular/material/table";
 import { MatSelectModule } from "@angular/material/select";
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatPaginatorModule } from '@angular/material/paginator';
+import {MatSnackBarModule} from '@angular/material/snack-bar';
 
 @NgModule({
     imports: [
@@ -25,7 +26,8 @@ import { MatPaginatorModule } from '@angular/material/paginator';
         MatSelectModule,
         MatOptionModule,
         MatAutocompleteModule,
-        MatPaginatorModule 
+        MatPaginatorModule ,
+        MatSnackBarModule
     ],
     exports: [
         MatToolbarModule,
@@ -39,7 +41,8 @@ import { MatPaginatorModule } from '@angular/material/paginator';
         MatSelectModule,
         MatOptionModule,
         MatAutocompleteModule,
-        MatPaginatorModule
+        MatPaginatorModule,
+        MatSnackBarModule
     ]
 })
 export class MaterialModule { }

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

@@ -1,4 +1,69 @@
-.form-group .form-control {
-    margin-top: 5px;
-    margin-bottom: 5px;
-}
+/* Form Container */
+form {
+  max-width: 600px;
+  margin: 20px auto;
+  padding: 20px;
+  border: 1px solid #ccc;
+  border-radius: 8px;
+  background-color: #f9f9f9;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+
+/* Form Group */
+form div {
+  margin-bottom: 15px;
+}
+
+/* Labels */
+label {
+  display: block;
+  margin-bottom: 5px;
+  font-weight: bold;
+  color: #333;
+}
+
+/* Input Fields */
+input {
+  width: 100%;
+  padding: 8px;
+  margin-bottom: 5px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  box-sizing: border-box;
+  font-size: 1em;
+  color: black;
+}
+
+input:focus {
+  border-color: #007BFF;
+  outline: none;
+}
+
+/* Error Messages */
+.error-message {
+  color: red;
+  font-size: 0.875em;
+  margin-top: 5px;
+}
+
+/* Submit Button */
+button[type="submit"] {
+  width: 100%;
+  padding: 10px;
+  background-color: #007BFF;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 1em;
+  transition: background-color 0.3s ease;
+}
+
+button[type="submit"]:disabled {
+  background-color: #ccc;
+  cursor: not-allowed;
+}
+
+button[type="submit"]:hover:not(:disabled) {
+  background-color: #0056b3;
+}

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

@@ -1,50 +1,69 @@
-<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>
+<form [formGroup]="roomDetailsForm" (ngSubmit)="onSubmit()">
+  <div>
+    <label for="firstName">First Name:</label>
+    <input id="firstName" formControlName="firstName"
+           [ngClass]="{
+             'is-invalid': (submitted || f['firstName'].touched) && f['firstName'].errors,
+             'is-valid': (submitted || f['firstName'].touched) && !f['firstName'].errors
+           }">
+    <div *ngIf="(submitted || f['firstName'].touched) && f['firstName'].errors" class="error-message">
+      <div *ngIf="f['firstName'].errors['required']">First Name is required</div>
+      <div *ngIf="f['firstName'].errors['pattern']">First Name must be 4-15 characters long and contain only letters</div>
     </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>
+    <label for="lastName">Last Name:</label>
+    <input id="lastName" formControlName="lastName"
+           [ngClass]="{
+             'is-invalid': (submitted || f['lastName'].touched) && f['lastName'].errors,
+             'is-valid': (submitted || f['lastName'].touched) && !f['lastName'].errors
+           }">
+    <div *ngIf="(submitted || f['lastName'].touched) && f['lastName'].errors" class="error-message">
+      <div *ngIf="f['lastName'].errors['required']">Last Name is required</div>
+      <div *ngIf="f['lastName'].errors['pattern']">Last Name must be 4-15 characters long and contain only letters</div>
     </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>
+    <label for="email">Email:</label>
+    <input id="email" formControlName="email"
+           [ngClass]="{
+             'is-invalid': (submitted || f['email'].touched) && f['email'].errors,
+             'is-valid': (submitted || f['email'].touched) && !f['email'].errors
+           }">
+    <div *ngIf="(submitted || f['email'].touched) && f['email'].errors" class="error-message">
+      <div *ngIf="f['email'].errors['required']">Email is required</div>
+      <div *ngIf="f['email'].errors['pattern']">Email must be a valid email address</div>
     </div>
+  </div>
 
-    <button [disabled]="f.invalid" class="btn btn-primary" type="submit" value="submit">
-        Submit
-    </button>
+  <div>
+    <label for="nic">NIC:</label>
+    <input id="nic" formControlName="nic"
+           [ngClass]="{
+             'is-invalid': (submitted || f['nic'].touched) && f['nic'].errors,
+             'is-valid': (submitted || f['nic'].touched) && !f['nic'].errors
+           }">
+    <div *ngIf="(submitted || f['nic'].touched) && f['nic'].errors" class="error-message">
+      <div *ngIf="f['nic'].errors['required']">NIC is required</div>
+      <div *ngIf="f['nic'].errors['pattern']">NIC must be 9 digits followed by 'V' or 'v'</div>
+    </div>
+  </div>
 
-    <p *ngIf="!f.invalid">{{ f.value | json }}</p>
+  <div>
+    <label for="numOfDays">Number of Days:</label>
+    <input id="numOfDays" formControlName="numOfDays"
+           [ngClass]="{
+             'is-invalid': (submitted || f['numOfDays'].touched) && f['numOfDays'].errors,
+             'is-valid': (submitted || f['numOfDays'].touched) && !f['numOfDays'].errors
+           }">
+    <div *ngIf="(submitted || f['numOfDays'].touched) && f['numOfDays'].errors" class="error-message">
+      <div *ngIf="f['numOfDays'].errors['required']">Number of Days is required</div>
+      <div *ngIf="f['numOfDays'].errors['pattern']">Number of Days must be 1-2 digits</div>
+    </div>
+  </div>
 
-</form>
+   <snack-bar-annotated-component-example/> 
+  <button type="submit" [disabled]="!roomDetailsForm.valid">Submit</button>
+</form>

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

@@ -1,28 +1,78 @@
-import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { Component, OnInit } from '@angular/core';
 import { room } from '../../shared/interface/room';
 
 @Component({
   selector: 'app-room-add',
   templateUrl: './room-add.component.html',
-  styleUrl: './room-add.component.css'
+  styleUrls: ['./room-add.component.css']
 })
-export class RoomAddComponent implements OnInit{
-  constructor(private ref: ElementRef) { }
-  @ViewChild('f') form: any;
-  b: boolean = false;
-  roomModel: room = {}; 
-  ngOnInit(): void {}
+export class RoomAddComponent implements OnInit {
+
+  roomDetailsForm!: FormGroup;
+  submitted: boolean = false;
+  isLoading: boolean = false;
+
+  get f() {
+    return this.roomDetailsForm.controls;
+  }
+
+  roomModel: room = {};
+
+  constructor(private formBuilder: FormBuilder) { }
+
+  ngOnInit(): void {
+    this.initForm();
+  }
+
+  initForm(): void {
+
+    this.roomDetailsForm = this.formBuilder.group({
+      firstName: [
+        '',
+        [Validators.required, Validators.pattern('[A-Za-z]{4,15}$')]
+      ],
+      lastName: [
+        '',
+        [Validators.required, Validators.pattern('[A-Za-z]{4,15}$')]
+      ],
+      email: [
+        '',
+        [Validators.required, Validators.pattern('^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$')]
+      ],
+      nic: [
+        '',
+        [Validators.required, Validators.pattern('[0-9]{9}[V|v]$')]
+      ],
+      numOfDays: [
+        '',
+        [Validators.required, Validators.pattern('[0-9]{1,2}$')]
+      ]
+    });
+  }
 
   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);
+    this.submitted = true;
+
+    //console.log(this.roomDetailsForm.firstName);
 
-    //reset form value after hit the submit button
-    this.form.reset();
+
+    if (this.roomDetailsForm.valid) {
+      this.isLoading = true;
+
+      // Simulating an API call with a timeout
+      setTimeout(() => {
+        console.log('Response');
+        this.isLoading = false;
+        this.clearForm();
+      }, 3000);
+    }
   }
+
+  clearForm(): void {
+    this.submitted = false;
+    this.roomDetailsForm.reset();
+  }
+
+
 }

src/app/shared/interface/room.ts

@@ -1,8 +1,10 @@
 export interface room{
       id?:number,
-      name?: string,
-      isOn?: boolean,
-      temperature?: number,
+      firstName?: string,
+      lastName?:string,
+      nic?: string,
+      numOfDays?: number,
+      email?:string
 }