diff --git a/package-lock.json b/package-lock.json index c845fdb..d25b26a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18,6 +18,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" @@ -3889,6 +3890,16 @@ "node": ">=14" } }, + "node_modules/@popperjs/core": { + "version": "2.11.8", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz", + "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==", + "peer": true, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/popperjs" + } + }, "node_modules/@schematics/angular": { "version": "17.0.5", "resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-17.0.5.tgz", @@ -4941,6 +4952,24 @@ "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==", "dev": true }, + "node_modules/bootstrap": { + "version": "5.3.2", + "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.2.tgz", + "integrity": "sha512-D32nmNWiQHo94BKHLmOrdjlL05q1c8oxbtBphQFb9Z5to6eGRDCm0QgeaZ4zFBHzfg2++rqa2JkqCcxDy0sH0g==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/twbs" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/bootstrap" + } + ], + "peerDependencies": { + "@popperjs/core": "^2.11.8" + } + }, "node_modules/brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", diff --git a/package.json b/package.json index fa0fad9..c3b00ed 100644 --- a/package.json +++ b/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" } -} \ No newline at end of file +} diff --git a/src/app/app-nav/app-nav.component.html b/src/app/app-nav/app-nav.component.html index 725953c..f0447ad 100644 --- a/src/app/app-nav/app-nav.component.html +++ b/src/app/app-nav/app-nav.component.html @@ -8,6 +8,7 @@ Home Room Employee + AddRoom diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index b286cf2..74b1169 100644 --- a/src/app/app-routing.module.ts +++ b/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) }, { diff --git a/src/app/app.component.html b/src/app/app.component.html index 0a537d5..dcd12e9 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,5 +1 @@ - - \ No newline at end of file diff --git a/src/app/app.component.ts b/src/app/app.component.ts index d93b275..80e9570 100644 --- a/src/app/app.component.ts +++ b/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'; diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 8560c07..2f77aa2 100644 --- a/src/app/app.module.ts +++ b/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, diff --git a/src/app/modulea/modulea-routing.module.ts b/src/app/modulea/modulea-routing.module.ts index da3a282..ed929d0 100644 --- a/src/app/modulea/modulea-routing.module.ts +++ b/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 diff --git a/src/app/rooms/room-add/room-add.component.css b/src/app/rooms/room-add/room-add.component.css new file mode 100644 index 0000000..e5d0fb8 --- /dev/null +++ b/src/app/rooms/room-add/room-add.component.css @@ -0,0 +1,4 @@ +.form-group .form-control { + margin-top: 5px; + margin-bottom: 5px; +} \ No newline at end of file diff --git a/src/app/rooms/room-add/room-add.component.html b/src/app/rooms/room-add/room-add.component.html new file mode 100644 index 0000000..fc35ad4 --- /dev/null +++ b/src/app/rooms/room-add/room-add.component.html @@ -0,0 +1,50 @@ +
+
+ + +
+

Please fill name!

+
+
+ +
+ + +
+

Please fill isOn

+
+
+ +
+ + +
+

Please fill temperature

+
+
+ + + +

{{ f.value | json }}

+ +
\ No newline at end of file diff --git a/src/app/rooms/room-add/room-add.component.spec.ts b/src/app/rooms/room-add/room-add.component.spec.ts new file mode 100644 index 0000000..7f824db --- /dev/null +++ b/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; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [RoomAddComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(RoomAddComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/rooms/room-add/room-add.component.ts b/src/app/rooms/room-add/room-add.component.ts new file mode 100644 index 0000000..cd67e36 --- /dev/null +++ b/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(); + } +} diff --git a/src/app/rooms/rooms-booking/rooms-booking.component.ts b/src/app/rooms/rooms-booking/rooms-booking.component.ts index 52425c9..ca9e170 100644 --- a/src/app/rooms/rooms-booking/rooms-booking.component.ts +++ b/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']; diff --git a/src/app/shared/interface/room.ts b/src/app/shared/interface/room.ts index 301ba20..b1211e2 100644 --- a/src/app/shared/interface/room.ts +++ b/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, } diff --git a/src/styles.css b/src/styles.css index 4e90b05..7503e8a 100644 --- a/src/styles.css +++ b/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");