diff --git a/client/src/app/app.module.ts b/client/src/app/app.module.ts
index 99dbed2..e3e8fb2 100644
--- a/client/src/app/app.module.ts
+++ b/client/src/app/app.module.ts
@@ -27,10 +27,12 @@ import { LoadingSpinnerComponent } from './components/loading-spinner/loading-sp
import { AddBookinComponent } from './components/add-bookin/add-bookin.component';
import { UtilsService } from './services/utils.service';
import { AuthServiceService } from './services/auth-service.service';
+import { RoomsService } from './services/rooms.service';
import { SignupComponent } from './components/signup/signup.component';
import { CalendarModule } from 'angular-calendar';
import { CalendarComponent } from './components/calendar/calendar.component';
import { InterceptorService } from './services/interceptor.service';
+import { RoomsComponent } from './components/rooms/rooms.component';
// routing links
const appRoutes: Routes = [
@@ -58,6 +60,7 @@ const appRoutes: Routes = [
{ path: 'edit-event/:id', component: EditBookingComponent, canActivate: [AuthGuard] },
{ path: 'view-details/:id', component: ViewDetailsComponent, canActivate: [AuthGuard] },
{ path: 'new-bookin/:evnt_id', component: AddBookinComponent, canActivate: [AuthGuard] },
+ { path: 'rooms', component: RoomsComponent, canActivate: [AuthGuard] },
{ path: 'register', component: SignupComponent }
]
}
@@ -79,7 +82,8 @@ const appRoutes: Routes = [
LoadingSpinnerComponent,
AddBookinComponent,
SignupComponent,
- CalendarComponent
+ CalendarComponent,
+ RoomsComponent
],
imports: [
BrowserModule,
@@ -98,6 +102,7 @@ const appRoutes: Routes = [
UtilsService,
AuthServiceService,
AuthGuard,
+ RoomsService,
{
provide: HTTP_INTERCEPTORS,
useClass: InterceptorService,
diff --git a/client/src/app/components/rooms/rooms.component.css b/client/src/app/components/rooms/rooms.component.css
new file mode 100644
index 0000000..6e288d5
--- /dev/null
+++ b/client/src/app/components/rooms/rooms.component.css
@@ -0,0 +1,7 @@
+
+app-loading-spinner {
+ width: 150px;
+ position: absolute;
+ top: 50%;
+ left: 40%;
+}
\ No newline at end of file
diff --git a/client/src/app/components/rooms/rooms.component.html b/client/src/app/components/rooms/rooms.component.html
new file mode 100644
index 0000000..8aa0445
--- /dev/null
+++ b/client/src/app/components/rooms/rooms.component.html
@@ -0,0 +1,107 @@
+
+
Rooms & Spaces
+
+
+
+
+
+
+Manage your available booking rooms and spaces here.
+
+
+
+
+ # |
+ Name of Room |
+
+ Actions |
+
+
+
+
+
+
+
+
+ {{ room.id }} |
+
+ {{ room.name }}
+ |
+
+
+
+ |
+
+
+
+
+
+
+ Are you sure you want to delete this room (Name: {{ room.name }}) permanently?
+
+
+
+ |
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/client/src/app/components/rooms/rooms.component.spec.ts b/client/src/app/components/rooms/rooms.component.spec.ts
new file mode 100644
index 0000000..23221e4
--- /dev/null
+++ b/client/src/app/components/rooms/rooms.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RoomsComponent } from './rooms.component';
+
+describe('RoomsComponent', () => {
+ let component: RoomsComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ RoomsComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(RoomsComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/client/src/app/components/rooms/rooms.component.ts b/client/src/app/components/rooms/rooms.component.ts
new file mode 100644
index 0000000..dc991fa
--- /dev/null
+++ b/client/src/app/components/rooms/rooms.component.ts
@@ -0,0 +1,153 @@
+import { Component, OnInit } from '@angular/core';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { RoomsService } from '../../services/rooms.service';
+import { FlashMessagesService } from 'ngx-flash-messages';
+import { Router } from '@angular/router';
+
+@Component({
+ selector: 'app-rooms',
+ templateUrl: './rooms.component.html',
+ styleUrls: ['./rooms.component.css']
+})
+export class RoomsComponent implements OnInit {
+
+ rooms: any;
+ showSpinner = true; // shows the loader
+
+ // form variable
+ name: string;
+ nm: string;
+
+ constructor(
+ private roomService: RoomsService,
+ private modalService: NgbModal,
+ private flashMessages: FlashMessagesService,
+ private router: Router
+ ) { }
+
+ ngOnInit() {
+ this.getRooms();
+ }
+
+ /**
+ * Gets all rooms from the DB
+ */
+ getRooms() {
+ this.roomService.getAllRooms().subscribe(data => {
+ this.showSpinner = false; // stops showing the spinner
+
+ this.rooms = data['rooms'];
+ },
+ err => { console.log(err); }); // logs error
+ }
+
+ /**
+ * Opens and displays the room-form modal
+ * @param content this is the template reference variable of the delete modal
+ */
+ openForm(content) {
+ this.modalService.open(content).result.then((result) => { // result can contain form obj or string depending on the button clicked
+ // check if form have been sent or not
+ if (result.name !== undefined) {
+ this.onSubmit(result); // submit to database
+ }
+ });
+ }
+
+ /**
+ * Opens and displays the room-form modal
+ * @param content this is the template reference variable of the delete modal
+ */
+ openEdit(content, room) {
+ this.modalService.open(content).result.then((result) => {
+ if (result !== undefined) {
+ // console.log(result);
+ this.updateRoom(room.id, result);
+ } else {
+ console.log('Cancelled!!!!');
+ }
+ });
+
+ this.name = room.name; // inistializes the room name for edit
+ }
+
+ /**
+ * Opens and displays the delete modal
+ * @param content this is the template reference variable of the delete modal
+ */
+ openDelete(content) {
+ this.modalService.open(content).result.then((result) => {
+ // TODO: Find better implementation, if any
+ if (result !== undefined) {
+ this.deleteRoom(result); // calls actually delete function
+ }
+ });
+ }
+
+ /**
+ * Submits a user-input data into the database
+ * @param data user input on the room details
+ */
+ onSubmit(data) {
+ this.roomService.storeRoom(data).subscribe(
+ result => {
+ this.getRooms();
+
+ this.nm = '';
+
+ this.flashMessages.show('Room has been successfully created', {
+ classes: ['alert', 'alert-success'],
+ timeout: 3000
+ });
+ },
+ err => { console.log(err); }
+ );
+ }
+
+ /**
+ * Updates the room details
+ * @param id ID of the room being edited
+ * @param room Data from the edit form
+ */
+ updateRoom(id, room) {
+ this.roomService.updateRoom(id, room).subscribe(
+ data => {
+ this.flashMessages.show('Details have been successfully updated.', {
+ classes: ['alert', 'alert-success'],
+ timeout: 3000
+ });
+
+ // TODO: find better implementation for updating UI on update
+ this.getRooms(); // poorman's refresh
+ },
+ err => { console.log(err); }
+ );
+ }
+
+ /**
+ * Deletes a booking room from the DB
+ * @param id of the room being deleted
+ */
+ deleteRoom(id) {
+ console.log(id);
+ this.roomService.deleteRoom(id).subscribe(
+ data => {
+ this.flashMessages.show('Room has been successfully deleted', {
+ classes: ['alert', 'alert-success'],
+ timeout: 3000
+ });
+
+ // TODO: find better implementation for updating UI on update
+ this.getRooms();
+ },
+ err => {
+ this.flashMessages.show('Oops! An error occurred, please try again later.', {
+ classes: ['alert', 'alert-warning'],
+ timeout: 3000
+ });
+ console.log(err);
+ }
+ );
+ }
+
+}
diff --git a/client/src/app/components/sidemenu/sidemenu.component.html b/client/src/app/components/sidemenu/sidemenu.component.html
index 6012fbd..ac77eed 100644
--- a/client/src/app/components/sidemenu/sidemenu.component.html
+++ b/client/src/app/components/sidemenu/sidemenu.component.html
@@ -25,6 +25,12 @@ {{ getUsername() }}
New Booking
+
+
+
+ Rooms/ Spaces
+
+
{{ evnt.name }}
- Dates |
+ {{ evnt.bookings[0].start_date | date: 'mediumDate' }} |
Edit |
diff --git a/client/src/app/components/view-details/view-details.component.html b/client/src/app/components/view-details/view-details.component.html
index d5651ed..36b5d4f 100644
--- a/client/src/app/components/view-details/view-details.component.html
+++ b/client/src/app/components/view-details/view-details.component.html
@@ -103,6 +103,14 @@ Edit Booking
+
+
+
+
+
|