neoris/openvidu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

frontend: Add RoomFormComponent with routing and basic structure

Browse Source
This commit is contained in:
Carlos Santos 2025-03-17 17:31:02 +01:00
parent 8ecc62ba46
commit 4f6eb1d7e3
10 changed files with 146 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
frontend/projects/shared-meet-components/src/lib/components/console-nav/console-nav.component.scss
View File

@ -4,8 +4,8 @@ mat-sidenav-container {
} }
.page-content { .page-content {
height: 100%; height: calc(100% - (64px + 40px));
padding: 15px; padding: 20px;
} }
.toolbar-title { .toolbar-title {
font-size: 1.5rem; font-size: 1.5rem;
@ -55,7 +55,6 @@ mat-sidenav {
.centeredEntry { .centeredEntry {
justify-content: center !important; justify-content: center !important;
} }
} }

1
frontend/projects/shared-meet-components/src/lib/pages/console/rooms/room-form/room-form.component.html Normal file
View File

@ -0,0 +1 @@
<p>room-form works!</p>

0
frontend/projects/shared-meet-components/src/lib/pages/console/rooms/room-form/room-form.component.scss Normal file
View File

23
frontend/projects/shared-meet-components/src/lib/pages/console/rooms/room-form/room-form.component.spec.ts Normal file
View File

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

12
frontend/projects/shared-meet-components/src/lib/pages/console/rooms/room-form/room-form.component.ts Normal file
View File

@ -0,0 +1,12 @@
import { Component } from '@angular/core';
@Component({
selector: 'ov-room-form',
standalone: true,
imports: [],
templateUrl: './room-form.component.html',
styleUrl: './room-form.component.scss'
})
export class RoomFormComponent {
}

33
frontend/projects/shared-meet-components/src/lib/pages/console/rooms/rooms.component.html
View File

@ -30,13 +30,14 @@
</div> --> </div> -->
<h1>Rooms</h1> <h1>Rooms</h1>
<ov-dynamic-grid [maxColumns]="2" [withHeader]="true" [gutter]="'10px'" [layoutMode]="'grid'"> <!-- <ov-dynamic-grid [maxColumns]="2" [withHeader]="true" [gutter]="'10px'" [layoutMode]="'grid'"> -->
<!-- Custom Header--> <!-- Custom Header-->
<div header></div> <!-- <div header></div> -->
@if (!isInRoomForm()) {
<mat-list class="grid-item" [attr.data-span]="2"> <mat-list class="grid-item" [attr.data-span]="2">
<div mat-subheader class="item-subheader"> <div mat-subheader class="item-subheader">
<h3>Active Rooms</h3> <h3>Rooms</h3>
<div class="subheader-button"> <div class="subheader-button">
<button mat-flat-button color="primary" (click)="createRoom()"> <button mat-flat-button color="primary" (click)="createRoom()">
<mat-icon class="icon-left">add</mat-icon> <mat-icon class="icon-left">add</mat-icon>
@ -53,7 +54,7 @@
<div matListItemLine class="item-details"> <div matListItemLine class="item-details">
<div> <div>
<mat-icon class="icon">auto_delete</mat-icon> <mat-icon class="icon">auto_delete</mat-icon>
<p>{{ item.expirationDate | date: 'dd/MM/yyyy' }}</p> <p>Expires: {{ item.expirationDate | date: 'dd/MM/yyyy' }}</p>
</div> </div>
</div> </div>
@ -71,9 +72,10 @@
<p class="empty-rooms-message">No rooms created yet</p> <p class="empty-rooms-message">No rooms created yet</p>
} }
</mat-list> </mat-list>
}
<!-- Recording Toggle --> <!-- Recording Toggle -->
<ov-toggle-card <!-- <ov-toggle-card
[title]="'Recording'" [title]="'Recording'"
[description]="'Allow record your rooms for later use'" [description]="'Allow record your rooms for later use'"
[icon]="'radio_button_checked'" [icon]="'radio_button_checked'"
@ -82,10 +84,10 @@
[toggleValue]="recordingEnabled" [toggleValue]="recordingEnabled"
(onToggleValueChanged)="onRecordingToggle($event)" (onToggleValueChanged)="onRecordingToggle($event)"
> >
</ov-toggle-card> </ov-toggle-card> -->
<!-- Chat Toggle --> <!-- Chat Toggle -->
<ov-toggle-card <!-- <ov-toggle-card
[title]="'Chat'" [title]="'Chat'"
[description]="'Allow participants to communicate via chat'" [description]="'Allow participants to communicate via chat'"
[icon]="'message'" [icon]="'message'"
@ -94,9 +96,9 @@
[toggleValue]="chatEnabled" [toggleValue]="chatEnabled"
(onToggleValueChanged)="onChatToggle($event)" (onToggleValueChanged)="onChatToggle($event)"
> >
</ov-toggle-card> </ov-toggle-card> -->
<ov-toggle-card <!-- <ov-toggle-card
[title]="'Backgrounds'" [title]="'Backgrounds'"
[description]="'Allow participants to change their backgrounds'" [description]="'Allow participants to change their backgrounds'"
[icon]="'blur_on'" [icon]="'blur_on'"
@ -105,5 +107,8 @@
[toggleValue]="backgroundsEnabled" [toggleValue]="backgroundsEnabled"
(onToggleValueChanged)="onVirtualBackgroundToggle($event)" (onToggleValueChanged)="onVirtualBackgroundToggle($event)"
> >
</ov-toggle-card> </ov-toggle-card> -->
</ov-dynamic-grid> <!-- </ov-dynamic-grid> -->
<div>
<router-outlet></router-outlet>
</div>

7
frontend/projects/shared-meet-components/src/lib/pages/console/rooms/rooms.component.scss
View File

@ -1,5 +1,6 @@
.grid-item { .grid-item {
padding: 0 0 10px; padding: 0px;
border: 1px solid #e9ecef;
.empty-rooms-message { .empty-rooms-message {
padding: 10px; padding: 10px;
@ -13,9 +14,13 @@
margin: 0; margin: 0;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
border: 1px solid #e9ecef;
.subheader-button { .subheader-button {
align-content: center; align-content: center;
button {
border-radius: 4px !important;
}
} }
} }

139
frontend/projects/shared-meet-components/src/lib/pages/console/rooms/rooms.component.ts
View File

@ -9,6 +9,7 @@ import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon'; import { MatIconModule } from '@angular/material/icon';
import { MatListItem, MatListModule } from '@angular/material/list'; import { MatListItem, MatListModule } from '@angular/material/list';
import { OpenViduMeetRoom } from 'projects/shared-meet-components/src/lib/typings/ce/room'; import { OpenViduMeetRoom } from 'projects/shared-meet-components/src/lib/typings/ce/room';
import { ActivatedRoute, Router, RouterModule } from '@angular/router';
@Component({ @Component({
selector: 'ov-room-preferences', selector: 'ov-room-preferences',
@ -20,14 +21,15 @@ import { OpenViduMeetRoom } from 'projects/shared-meet-components/src/lib/typing
MatCardModule, MatCardModule,
DatePipe, DatePipe,
MatButtonModule, MatButtonModule,
MatIconModule MatIconModule,
RouterModule
], ],
templateUrl: './rooms.component.html', templateUrl: './rooms.component.html',
styleUrl: './rooms.component.scss' styleUrl: './rooms.component.scss'
}) })
export class RoomsComponent implements OnInit { export class RoomsComponent implements OnInit {
createdRooms: OpenViduMeetRoom[] = []; createdRooms: OpenViduMeetRoom[] = [];
private roomPreferences!: RoomPreferences; // private roomPreferences!: RoomPreferences;
recordingEnabled = false; recordingEnabled = false;
chatEnabled = false; chatEnabled = false;
backgroundsEnabled = false; backgroundsEnabled = false;
@ -37,31 +39,38 @@ export class RoomsComponent implements OnInit {
constructor( constructor(
protected loggerService: LoggerService, protected loggerService: LoggerService,
private roomService: RoomService, private roomService: RoomService,
private notificationService: NotificationService private notificationService: NotificationService,
protected router: Router,
protected route: ActivatedRoute
) { ) {
this.log = this.loggerService.get('OpenVidu Meet - RoomService'); this.log = this.loggerService.get('OpenVidu Meet - RoomService');
} }
async ngOnInit() { async ngOnInit() {
try { try {
const [rooms] = await Promise.all([this.roomService.listRooms(), this.loadRoomPreferences()]); const rooms = await this.roomService.listRooms();
console.log('Rooms:', rooms);
this.createdRooms = rooms; this.createdRooms = rooms;
} catch (error) { } catch (error) {
console.error('Error fetching room preferences', error); console.error('Error fetching room preferences', error);
} }
} }
isInRoomForm(): boolean {
return this.route.snapshot.firstChild !== null; // Verifica si hay un hijo en la ruta
}
async createRoom() { async createRoom() {
try { //TODO: Go to room details page
const room = await this.roomService.createRoom(); await this.router.navigate(['new'], { relativeTo: this.route });
this.notificationService.showSnackbar('Room created'); // try {
this.log.d('Room created:', room); // const room = await this.roomService.createRoom();
this.createdRooms.push(room); // this.notificationService.showSnackbar('Room created');
} catch (error) { // this.log.d('Room created:', room);
this.notificationService.showAlert('Error creating room'); // this.createdRooms.push(room);
this.log.e('Error creating room:', error); // } catch (error) {
} // this.notificationService.showAlert('Error creating room');
// this.log.e('Error creating room:', error);
// }
} }
openRoom(roomName: string) { openRoom(roomName: string) {
@ -79,72 +88,74 @@ export class RoomsComponent implements OnInit {
} }
} }
onRoomClicked(room: OpenViduMeetRoom) { async onRoomClicked(room: OpenViduMeetRoom) {
console.log('Room clicked:', room); console.log('Room clicked:', room);
//TODO: Go to room details page
await this.router.navigate([room.roomName, 'edit'], { relativeTo: this.route });
} }
async onRecordingToggle(enabled: boolean) { // async onRecordingToggle(enabled: boolean) {
console.log('Recording toggled', enabled); // console.log('Recording toggled', enabled);
try { // try {
this.roomPreferences.recordingPreferences.enabled = enabled; // this.roomPreferences.recordingPreferences.enabled = enabled;
await this.roomService.saveRoomPreferences(this.roomPreferences); // await this.roomService.saveRoomPreferences(this.roomPreferences);
this.recordingEnabled = enabled; // this.recordingEnabled = enabled;
// TODO: Show a toast message // // TODO: Show a toast message
} catch (error) { // } catch (error) {
console.error('Error saving recording preferences', error); // console.error('Error saving recording preferences', error);
// TODO: Show a toast message // // TODO: Show a toast message
} // }
} // }
async onChatToggle(enabled: boolean) { // async onChatToggle(enabled: boolean) {
console.log('Chat toggled', enabled); // console.log('Chat toggled', enabled);
try { // try {
this.roomPreferences.chatPreferences.enabled = enabled; // this.roomPreferences.chatPreferences.enabled = enabled;
await this.roomService.saveRoomPreferences(this.roomPreferences); // await this.roomService.saveRoomPreferences(this.roomPreferences);
this.chatEnabled = enabled; // this.chatEnabled = enabled;
// TODO: Show a toast message // // TODO: Show a toast message
} catch (error) { // } catch (error) {
console.error('Error saving chat preferences', error); // console.error('Error saving chat preferences', error);
// TODO: Show a toast message // // TODO: Show a toast message
} // }
} // }
async onVirtualBackgroundToggle(enabled: boolean) { // async onVirtualBackgroundToggle(enabled: boolean) {
console.log('Virtual background toggled', enabled); // console.log('Virtual background toggled', enabled);
try { // try {
this.roomPreferences.virtualBackgroundPreferences.enabled = enabled; // this.roomPreferences.virtualBackgroundPreferences.enabled = enabled;
await this.roomService.saveRoomPreferences(this.roomPreferences); // await this.roomService.saveRoomPreferences(this.roomPreferences);
this.backgroundsEnabled = enabled; // this.backgroundsEnabled = enabled;
// TODO: Show a toast message // // TODO: Show a toast message
} catch (error) { // } catch (error) {
console.error('Error saving virtual background preferences', error); // console.error('Error saving virtual background preferences', error);
// TODO: Show a toast message // // TODO: Show a toast message
} // }
} // }
/** /**
* Loads the room preferences from the global preferences service and assigns them to the component's properties. * Loads the room preferences from the global preferences service and assigns them to the component's properties.
* *
* @returns {Promise<void>} A promise that resolves when the room preferences have been loaded and assigned. * @returns {Promise<void>} A promise that resolves when the room preferences have been loaded and assigned.
*/ */
private async loadRoomPreferences() { // private async loadRoomPreferences() {
const preferences = await this.roomService.getRoomPreferences(); // const preferences = await this.roomService.getRoomPreferences();
this.roomPreferences = preferences; // this.roomPreferences = preferences;
console.log('Room preferences:', preferences); // console.log('Room preferences:', preferences);
// Destructures the `preferences` object to extract the enabled status of various features. // // Destructures the `preferences` object to extract the enabled status of various features.
const { // const {
recordingPreferences: { enabled: recordingEnabled }, // recordingPreferences: { enabled: recordingEnabled },
chatPreferences: { enabled: chatEnabled }, // chatPreferences: { enabled: chatEnabled },
virtualBackgroundPreferences: { enabled: backgroundsEnabled } // virtualBackgroundPreferences: { enabled: backgroundsEnabled }
} = preferences; // } = preferences;
// Assigns the extracted values to the component's properties. // // Assigns the extracted values to the component's properties.
Object.assign(this, { recordingEnabled, chatEnabled, backgroundsEnabled }); // Object.assign(this, { recordingEnabled, chatEnabled, backgroundsEnabled });
} // }
} }

1
frontend/projects/shared-meet-components/src/lib/pages/index.ts
View File

@ -1,5 +1,6 @@
export * from './console/console.component'; export * from './console/console.component';
export * from './console/rooms/rooms.component'; export * from './console/rooms/rooms.component';
export * from './console/rooms/room-form/room-form.component';
export * from './console/recordings/recordings.component'; export * from './console/recordings/recordings.component';
export * from './console/access-permissions/access-permissions.component'; export * from './console/access-permissions/access-permissions.component';
export * from './console/appearance/appearance.component'; export * from './console/appearance/appearance.component';

9
frontend/projects/shared-meet-components/src/lib/routes/base-routes.ts
View File

@ -23,7 +23,8 @@ import {
RecordingsComponent, RecordingsComponent,
RoomsComponent, RoomsComponent,
SecurityPreferencesComponent, SecurityPreferencesComponent,
VideoRoomComponent VideoRoomComponent,
RoomFormComponent
} from '../pages'; } from '../pages';
import { LoginComponent } from '@lib/pages/login/login.component'; import { LoginComponent } from '@lib/pages/login/login.component';
import { Role } from '@lib/typings/ce'; import { Role } from '@lib/typings/ce';
@ -74,7 +75,11 @@ export const baseRoutes: Routes = [
}, },
{ {
path: 'rooms', path: 'rooms',
component: RoomsComponent component: RoomsComponent,
children: [
{ path: 'new', component: RoomFormComponent },
{ path: ':roomName/edit', component: RoomFormComponent }
]
}, },
{ {
path: 'recordings', path: 'recordings',