diff --git a/src/app/creator-home-screen/creator-home-screen.component.scss b/src/app/creator-home-screen/creator-home-screen.component.scss index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..e41d2f8e71267ae6bbf57136c28f1b516b0b9464 100644 --- a/src/app/creator-home-screen/creator-home-screen.component.scss +++ b/src/app/creator-home-screen/creator-home-screen.component.scss @@ -0,0 +1,4 @@ +app-room-list { + width: 100%; + max-width: 800px; +} diff --git a/src/app/in-memory-data.service.ts b/src/app/in-memory-data.service.ts index 213bd3e8ea31599a315dab77411b690bf9084530..c91bb3c246498bd39476c7dfdd2d1d4ff1944382 100644 --- a/src/app/in-memory-data.service.ts +++ b/src/app/in-memory-data.service.ts @@ -25,20 +25,29 @@ export class InMemoryDataService implements InMemoryDbService { const rooms = [ { id: '1', - revision: '1', - shortId: 't', + revision: '10', + shortId: '12345678', abbreviation: 'abb', - name: 'testroom', - description: 'this is a test room', + name: 'ARSnova Testroom', + description: 'Refactoring ARSnova to look and feel good', closed: true }, { id: '2', revision: '11', - shortId: 't1', + shortId: '23456789', abbreviation: 'abb1', - name: 'testroom1', - description: 'this is a test room1', + name: 'Darkroom', + description: 'Here is where the 18+ stuff happens', + closed: false + }, + { + id: '3', + revision: '11', + shortId: '34567890', + abbreviation: 'abb1', + name: 'Keller', + description: 'This is where the beer stehs', closed: false } ]; diff --git a/src/app/room-list/room-list.component.html b/src/app/room-list/room-list.component.html index 5c96b0160fa03bc126ea52648f8037ae6535a916..ceb78669607fbcf54d98e9c0cb812d37e3073c8a 100644 --- a/src/app/room-list/room-list.component.html +++ b/src/app/room-list/room-list.component.html @@ -1,8 +1,18 @@ -<mat-list> - <mat-list-item *ngFor="let room of rooms"> - <button mat-button routerLink="room/{{room.id}}"> - {{room.name}} - </button> - </mat-list-item> -</mat-list> - +<mat-accordion> + <mat-expansion-panel *ngFor="let room of rooms"> + <mat-expansion-panel-header> + <mat-panel-title> + {{ room.shortId }} + </mat-panel-title> + <mat-panel-description> + {{ room.name }} + </mat-panel-description> + </mat-expansion-panel-header> + <p> + {{ room.description }} + </p> + <mat-action-row> + <button mat-button routerLink="/room/{{ room.id }}">Join room</button> + </mat-action-row> + </mat-expansion-panel> +</mat-accordion>