s426135/session-companion
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

SES-136 #58

Merged
s426128 merged 4 commits from SES-136 into dev 2021-01-08 20:43:56 +01:00
Conversation 0 Commits 4 Files Changed 12 +228 -47
12 changed files with 228 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
SessionCompanion/SessionCompanion/ClientApp/angular.json
View File

@ -26,6 +26,7 @@
"styles": [
"./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"node_modules/rpg-awesome/css/rpg-awesome.min.css",
"src/styles.css"
],
"scripts": []
@ -148,4 +149,4 @@
}
},
"defaultProject": "SessionCompanion"
}
}

11
SessionCompanion/SessionCompanion/ClientApp/package-lock.json generated
View File

@ -10513,6 +10513,11 @@
"inherits": "^2.0.1"
}
},
"rpg-awesome": {
"version": "0.2.0",
"resolved": "https://registry.npmjs.org/rpg-awesome/-/rpg-awesome-0.2.0.tgz",
"integrity": "sha512-+jTuYWHOs8iZV5+XKvI/7Ojr0k4pLX/dRpa2LHXReGMQI6h0cGvNxIh/AQY1zhAC7LPcNXnPTliD1/ugB/DbRA=="
},
"run-async": {
"version": "2.4.1",
"resolved": "https://registry.npmjs.org/run-async/-/run-async-2.4.1.tgz",
@ -12046,12 +12051,6 @@
}
}
},
"tslint-config-prettier": {
"version": "1.18.0",
"resolved": "https://registry.npmjs.org/tslint-config-prettier/-/tslint-config-prettier-1.18.0.tgz",
"integrity": "sha512-xPw9PgNPLG3iKRxmK7DWr+Ea/SzrvfHtjFt5LBl61gk2UBG/DB9kCXRjv+xyIU1rUtnayLeMUVJBcMX8Z17nDg==",
"dev": true
},
"tsutils": {
"version": "2.29.0",
"resolved": "https://registry.npmjs.org/tsutils/-/tsutils-2.29.0.tgz",

1
SessionCompanion/SessionCompanion/ClientApp/package.json
View File

@ -34,6 +34,7 @@
"jquery": "3.4.1",
"oidc-client": "^1.9.1",
"popper.js": "^1.16.0",
"rpg-awesome": "^0.2.0",
"rxjs": "^6.5.3",
"zone.js": "0.9.1"
},

41
SessionCompanion/SessionCompanion/ClientApp/src/app/app.module.ts
View File

@ -8,8 +8,8 @@ import { appRoutingModule } from '../app.routing';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { SignInComponent } from './components/sign-in/sign-in.component';
import { RegistrationComponent } from './components/registration/registration.component';
import { GameMasterDashboardComponent} from './components/game-master-dashboard/game-master-dashboard.component';
import {PlayerDashboardComponent} from './components/player-dashboard/player-dashboard.component';
import { GameMasterDashboardComponent } from './components/game-master-dashboard/game-master-dashboard.component';
import { PlayerDashboardComponent } from './components/player-dashboard/player-dashboard.component';
import { SelectCharacterComponent } from './components/select-character/select-character.component';
import {
MatCardModule,
@ -18,15 +18,22 @@ import {
MatInputModule,
MatButtonModule,
MatCheckboxModule,
MatIconModule, MatSidenavModule, MatToolbarModule, MatListModule
MatIconModule,
MatSidenavModule,
MatToolbarModule,
MatListModule,
MatPaginatorModule,
MatTableModule,
MatSortModule,
} from '@angular/material';
import {UserService} from '../services/user.service';
import { UserService } from '../services/user.service';
import { StoreModule } from '@ngrx/store';
import { StoreDevtoolsModule } from '@ngrx/store-devtools';
import {environment} from '../environments/environment';
import {reducers} from './store/models/app-state.model';
import {CharacterService} from '../services/character.service';
import { environment } from '../environments/environment';
import { reducers } from './store/models/app-state.model';
import { CharacterService } from '../services/character.service';
import { AbilityCardComponent } from './components/ability-card/ability-card.component';
import { GameMasterSpellsTableComponent } from './components/game-master-spells-table/game-master-spells-table.component';
@NgModule({
declarations: [
@ -38,9 +45,10 @@ import { AbilityCardComponent } from './components/ability-card/ability-card.com
PlayerDashboardComponent,
SelectCharacterComponent,
AbilityCardComponent,
GameMasterSpellsTableComponent,
],
imports: [
BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
HttpClientModule,
FormsModule,
ReactiveFormsModule,
@ -56,15 +64,16 @@ BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
MatSidenavModule,
MatToolbarModule,
MatListModule,
MatPaginatorModule,
StoreModule.forRoot(reducers),
StoreDevtoolsModule.instrument({
logOnly: environment.production
})
logOnly: environment.production,
}),
MatTableModule,
MatSortModule,
],
providers: [
UserService,
CharacterService
],
bootstrap: [AppComponent]
providers: [UserService, CharacterService],
bootstrap: [AppComponent],
entryComponents: [GameMasterSpellsTableComponent],
})
export class AppModule { }
export class AppModule {}

10
SessionCompanion/SessionCompanion/ClientApp/src/app/components/game-master-dashboard/game-master-dashboard.component.css
View File

@ -10,6 +10,16 @@
right: 0;
}
.no-wrap {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.left-nav-item *{
padding-right: 0px !important;
}
.leftnav{
background-color: #3D4751;
border-right:none;

53
SessionCompanion/SessionCompanion/ClientApp/src/app/components/game-master-dashboard/game-master-dashboard.component.html
View File

@ -17,36 +17,41 @@
</div>
<mat-divider></mat-divider>
<mat-nav-list>
<mat-list-item>
<mat-icon mat-list-icon>folder</mat-icon>
<span
[@animateText]="leftSidenavTextExpanded ? 'show' : 'hide'"
style="color: white"
>Link 1</span
>
</mat-list-item>
<mat-list-item>
<mat-icon mat-list-icon>folder</mat-icon>
<span
[@animateText]="leftSidenavTextExpanded ? 'show' : 'hide'"
style="color: white"
>Link 2</span
>
</mat-list-item>
<mat-list-item>
<mat-icon mat-list-icon>folder</mat-icon>
<span
[@animateText]="leftSidenavTextExpanded ? 'show' : 'hide'"
style="color: white"
>Link 3</span
>
</mat-list-item>
<div *ngFor="let item of leftSidenavItems">
<mat-list-item class="left-nav-item" (click)="(item.children && item.children.length) ? false :ChangeMiddleComponent(item.componentToDisplay)">
<mat-icon mat-list-icon ><i class="{{item.iconName}}"></i></mat-icon>
<span [@animateText]="leftSidenavTextExpanded ? 'show' : 'hide'" class="mat-list-text" style="color: white">
{{item.displayName}}
<a *ngIf="item.children && item.children.length" mat-icon-button style="right: -35px;" (click)="item.expanded = !item.expanded">
<mat-icon *ngIf="!item.expanded" class="mat-24">expand_more</mat-icon>
<mat-icon *ngIf="item.expanded" class="mat-24">expand_less</mat-icon>
</a>
</span>
</mat-list-item>
<mat-divider></mat-divider>
<div *ngIf="item.expanded" >
<div *ngFor="let child of item.children" style="background-color: #4a5867">
<mat-list-item style="padding-left: 10px" (click)="ChangeMiddleComponent(child.componentToDisplay)">
<mat-icon mat-list-icon ><i class="{{child.iconName}}"></i></mat-icon>
<span [@animateText]="leftSidenavTextExpanded ? 'show' : 'hide'" class="mat-list-text" style="color: white">
{{child.displayName}}
</span>
</mat-list-item>
<mat-divider></mat-divider>
</div>
</div>
</div>
</mat-nav-list>
</mat-sidenav>
<mat-sidenav-content>
<mat-toolbar color="primary" class="gm-toolbar">
<span>SessionCompanion</span>
</mat-toolbar>
<div style="padding: 20px">
<ng-container *ngComponentOutlet="middleComponentName">
</ng-container>
</div>
</mat-sidenav-content>
<mat-sidenav
class="rightnav"

19
SessionCompanion/SessionCompanion/ClientApp/src/app/components/game-master-dashboard/game-master-dashboard.component.ts
View File

@ -10,6 +10,8 @@ import { ErrorResponse } from '../../../types/ErrorResponse';
import { HttpErrorResponse } from '@angular/common/http';
import { LoggedCharactersViewModel } from '../../../types/viewmodels/character-viewmodels/LoggedCharactersViewModel';
import { first } from 'rxjs/operators';
import { LeftNavItem } from '../../../types/LeftNavItem';
import { GameMasterSpellsTableComponent } from '../game-master-spells-table/game-master-spells-table.component';
@Component({
selector: 'app-game-master-dashboard',
@ -18,9 +20,18 @@ import { first } from 'rxjs/operators';
animations: [onSideNavChange, animateText],
})
export class GameMasterDashboardComponent implements OnInit, OnDestroy {
middleComponentName;
allSubscriptions = new Subscription();
leftSidenavExpanded = false;
leftSidenavTextExpanded = false;
leftSidenavItems: LeftNavItem[] = [
{
displayName: 'Spells',
iconName: 'ra ra-aura',
componentToDisplay: 'GameMasterSpellsTableComponent',
expanded: false,
},
];
rightSidenavExpanded = false;
rightSidenavTextExpanded = false;
@ -71,6 +82,14 @@ export class GameMasterDashboardComponent implements OnInit, OnDestroy {
);
}
ChangeMiddleComponent(componentName: string): void {
switch (componentName) {
case 'GameMasterSpellsTableComponent':
this.middleComponentName = GameMasterSpellsTableComponent;
break;
}
}
private SubscribeToEvents(): void {
this.signalRService.message.subscribe((message: string) => {
if (

38
SessionCompanion/SessionCompanion/ClientApp/src/app/components/game-master-spells-table/game-master-spells-table.component.css Normal file
View File

@ -0,0 +1,38 @@
table {
width: 100%;
background-color: initial;
}
mat-paginator{
background-color: initial;
color: white;
}
th{
color: whitesmoke;
}
td{
color: whitesmoke;
}
::ng-deep .mat-select-arrow{
color: whitesmoke;
}
::ng-deep .mat-select-value {
color: white
}
.mat-sort-header-container{
color: whitesmoke !important;
}
.mat-form-field {
font-size: 14px;
width: 100%;
}
td, th {
width: 25%;
}

43
SessionCompanion/SessionCompanion/ClientApp/src/app/components/game-master-spells-table/game-master-spells-table.component.html Normal file
View File

@ -0,0 +1,43 @@
<mat-form-field>
<mat-label>Filter</mat-label>
<input matInput (keyup)="applyFilter($event)" placeholder="Ex. Mia" #input>
</mat-form-field>
<div class="mat-elevation-z8">
<table mat-table [dataSource]="dataSource" matSort>
<!-- ID Column -->
<ng-container matColumnDef="Name">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
<td mat-cell *matCellDef="let row"> {{row.name}} </td>
</ng-container>
<!-- Progress Column -->
<ng-container matColumnDef="Range">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Range </th>
<td mat-cell *matCellDef="let row"> {{row.range}}% </td>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="Level">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Level </th>
<td mat-cell *matCellDef="let row"> {{row.level}} </td>
</ng-container>
<!-- Color Column -->
<ng-container matColumnDef="School">
<th mat-header-cell *matHeaderCellDef mat-sort-header> School </th>
<td mat-cell *matCellDef="let row"> {{row.school}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
<!-- Row shown when there is no matching data. -->
<tr class="mat-row" *matNoDataRow>
<td class="mat-cell" colspan="4">No data matching the filter "{{input.value}}"</td>
</tr>
</table>
<mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
</div>

48
SessionCompanion/SessionCompanion/ClientApp/src/app/components/game-master-spells-table/game-master-spells-table.component.ts Normal file
View File

@ -0,0 +1,48 @@
import { Component, OnInit, ViewChild } from '@angular/core';
import { MatPaginator } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort';
import { MatTableDataSource } from '@angular/material/table';
export interface SpellData {
name: string;
range: string;
level: number;
school: string;
}
@Component({
selector: 'app-game-master-spells-table',
templateUrl: './game-master-spells-table.component.html',
styleUrls: ['./game-master-spells-table.component.css'],
})
export class GameMasterSpellsTableComponent implements OnInit {
displayedColumns: string[] = ['Name', 'Range', 'Level', 'School'];
dataSource: MatTableDataSource<SpellData>;
@ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
@ViewChild(MatSort, { static: true }) sort: MatSort;
constructor() {
const users = Array.from({ length: 100 }, (_, k) => this.createSepll());
this.dataSource = new MatTableDataSource(users);
}
createSepll(): SpellData {
return { name: 'test', range: 'asd', level: 2, school: 'UAM!!!!' };
}
ngOnInit() {
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
}
applyFilter(event: Event) {
const filterValue = (event.target as HTMLInputElement).value;
this.dataSource.filter = filterValue.trim().toLowerCase();
if (this.dataSource.paginator) {
this.dataSource.paginator.firstPage();
}
}
}

7
SessionCompanion/SessionCompanion/ClientApp/src/types/LeftNavItem.ts Normal file
View File

@ -0,0 +1,7 @@
export interface LeftNavItem {
displayName: string;
iconName: string;
componentToDisplay?: string;
expanded: boolean;
children?: LeftNavItem[];
}

1
SessionCompanion/SessionCompanion/ClientApp/tsconfig.json
View File

@ -1,6 +1,7 @@
{
"compileOnSave": false,
"compilerOptions": {
"skipLibCheck": true,
"baseUrl": "./",
"module": "esnext",
"outDir": "./dist/out-tsc",