SES-74 added basic structure to the code

This commit is contained in:
ngawron 2020-12-03 21:03:58 +01:00
parent d2d8bd8cab
commit bdeca6efbe
36 changed files with 134 additions and 81 deletions

View File

@ -1,10 +1,10 @@
import {RouterModule, Routes} from '@angular/router'; import { RouterModule, Routes } from '@angular/router';
import {HomeComponent} from './app/pages/home/home.component'; import { MasterPageComponent } from './app/pages/master-page/master-page.component';
const routes: Routes = [ const routes: Routes = [
{ {
path: '', path: '',
component: HomeComponent, component: MasterPageComponent,
pathMatch: 'full' pathMatch: 'full'
}, },
]; ];

View File

@ -1,6 +1,6 @@
<body> <body>
<app-nav-menu></app-nav-menu>
<div class="container"> <div class="container">
<router-outlet></router-outlet> <router-outlet></router-outlet>
<app-select-role></app-select-role>
</div> </div>
</body> </body>

View File

@ -2,19 +2,17 @@ import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms'; import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http'; import { HttpClientModule } from '@angular/common/http';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component'; import { AppComponent } from './app.component';
import { NavMenuComponent } from './components/nav-menu/nav-menu.component'; import { SelectRoleComponent } from './components/select-role/select-role.component';
import { HomeComponent } from './pages/home/home.component'; import { MasterPageComponent } from './pages/master-page/master-page.component';
import {appRoutingModule} from '../app.routing'; import { appRoutingModule } from '../app.routing';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@NgModule({ @NgModule({
declarations: [ declarations: [
AppComponent, AppComponent,
NavMenuComponent, SelectRoleComponent,
HomeComponent MasterPageComponent
], ],
imports: [ imports: [
BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }), BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),

View File

@ -0,0 +1,18 @@
import { Component } from '@angular/core';
@Component({
selector: 'app-game-master-dashboard',
templateUrl: './game-master-dashboard.component.html',
styleUrls: ['./game-master-dashboard.component.css']
})
export class GameMasterDashboardComponent {
isExpanded = false;
collapse() {
this.isExpanded = false;
}
toggle() {
this.isExpanded = !this.isExpanded;
}
}

View File

@ -1,44 +0,0 @@
<header>
<nav
class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3"
>
<div class="container">
<a class="navbar-brand" [routerLink]="['/']">SessionCompanion</a>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target=".navbar-collapse"
aria-label="Toggle navigation"
[attr.aria-expanded]="isExpanded"
(click)="toggle()"
>
<span class="navbar-toggler-icon"></span>
</button>
<div
class="navbar-collapse collapse d-sm-inline-flex justify-content-end"
[ngClass]="{ show: isExpanded }"
>
<ul class="navbar-nav flex-grow">
<li
class="nav-item"
[routerLinkActive]="['link-active']"
[routerLinkActiveOptions]="{ exact: true }"
>
<a class="nav-link text-dark" [routerLink]="['/']">Home</a>
</li>
<li class="nav-item" [routerLinkActive]="['link-active']">
<a class="nav-link text-dark" [routerLink]="['/counter']"
>Counter</a
>
</li>
<li class="nav-item" [routerLinkActive]="['link-active']">
<a class="nav-link text-dark" [routerLink]="['/fetch-data']"
>Fetch data</a
>
</li>
</ul>
</div>
</div>
</nav>
</header>

View File

@ -0,0 +1,18 @@
import { Component } from '@angular/core';
@Component({
selector: 'app-player-dashboard',
templateUrl: './player-dashboard.component.html',
styleUrls: ['./player-dashboard.component.css']
})
export class PlayerDashboardComponent {
isExpanded = false;
collapse() {
this.isExpanded = false;
}
toggle() {
this.isExpanded = !this.isExpanded;
}
}

View File

@ -0,0 +1,18 @@
import { Component } from '@angular/core';
@Component({
selector: 'app-registration',
templateUrl: './registration.component.html',
styleUrls: ['./registration.component.css']
})
export class RegistrationComponent {
isExpanded = false;
collapse() {
this.isExpanded = false;
}
toggle() {
this.isExpanded = !this.isExpanded;
}
}

View File

@ -0,0 +1,2 @@
<button>Player</button>
<button>Gamme Master</button>

View File

@ -0,0 +1,18 @@
import { Component } from '@angular/core';
@Component({
selector: 'app-select-role',
templateUrl: './select-role.component.html',
styleUrls: ['./select-role.component.css']
})
export class SelectRoleComponent {
isExpanded = false;
collapse() {
this.isExpanded = false;
}
toggle() {
this.isExpanded = !this.isExpanded;
}
}

View File

@ -1,11 +1,11 @@
import { Component } from '@angular/core'; import { Component } from '@angular/core';
@Component({ @Component({
selector: 'app-nav-menu', selector: 'app-sign-in',
templateUrl: './nav-menu.component.html', templateUrl: './sign-in.component.html',
styleUrls: ['./nav-menu.component.css'] styleUrls: ['./sign-in.component.css']
}) })
export class NavMenuComponent { export class SignInComponent {
isExpanded = false; isExpanded = false;
collapse() { collapse() {

View File

@ -0,0 +1,9 @@
import { Component } from '@angular/core';
@Component({
selector: 'app-game-master-dashboard',
templateUrl: './game-master-dashboard.component.html',
styleUrls: ['./game-master-dashboard.component.css']
})
export class GameMasterDashboardPageComponent {
}

View File

@ -1,14 +0,0 @@
<h1>Hello, world!</h1>
<p>Welcome to your new single-page application, built with:</p>
<ul>
<li><a href='https://get.asp.net/'>ASP.NET Core</a> and <a href='https://msdn.microsoft.com/en-us/library/67ef8sbd.aspx'>C#</a> for cross-platform server-side code</li>
<li><a href='https://angular.io/'>Angular</a> and <a href='http://www.typescriptlang.org/'>TypeScript</a> for client-side code</li>
<li><a href='http://getbootstrap.com/'>Bootstrap</a> for layout and styling</li>
</ul>
<p>To help you get started, we've also set up:</p>
<ul>
<li><strong>Client-side navigation</strong>. For example, click <em>Counter</em> then <em>Back</em> to return here.</li>
<li><strong>Angular CLI integration</strong>. In development mode, there's no need to run <code>ng serve</code>. It runs in the background automatically, so your client-side resources are dynamically built on demand and the page refreshes when you modify any file.</li>
<li><strong>Efficient production builds</strong>. In production mode, development-time features are disabled, and your <code>dotnet publish</code> configuration automatically invokes <code>ng build</code> to produce minified, ahead-of-time compiled JavaScript files.</li>
</ul>
<p>The <code>ClientApp</code> subdirectory is a standard Angular CLI application. If you open a command prompt in that directory, you can run any <code>ng</code> command (e.g., <code>ng test</code>), or use <code>npm</code> to install extra packages into it.</p>

View File

@ -1,8 +0,0 @@
import { Component } from '@angular/core';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
})
export class HomeComponent {
}

View File

@ -0,0 +1,2 @@
<h1>Hello on the Session Companion</h1>
<h2>Choose your role</h2>

View File

@ -0,0 +1,9 @@
import { Component } from '@angular/core';
@Component({
selector: 'app-master-page',
templateUrl: './master-page.component.html',
styleUrls: ['./master-page.component.css'],
})
export class MasterPageComponent {
}

View File

@ -0,0 +1,9 @@
import { Component } from '@angular/core';
@Component({
selector: 'app-player-dashboard-page',
templateUrl: './player-dashboard-page.component.html',
styleUrls: ['./player-dashboard-page.component.css']
})
export class PlayerDashboardPageComponent {
}

View File

@ -0,0 +1,9 @@
import { Component } from '@angular/core';
@Component({
selector: 'app-registration-page',
templateUrl: './registration-page.component.html',
styleUrls: ['./registration-page.component.css'],
})
export class RegistrationPageComponent {
}

View File

@ -0,0 +1,9 @@
import { Component } from '@angular/core';
@Component({
selector: 'app-sign-in-page',
templateUrl: './sign-in-page.component.html',
styleUrls: ['./sign-in-page.component.css']
})
export class SignInPageComponent {
}