SES-74 #8
@ -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 { SelectRoleComponent } from './app/components/select-role/select-role.component';
|
||||||
|
|
||||||
const routes: Routes = [
|
const routes: Routes = [
|
||||||
{
|
{
|
||||||
path: '',
|
path: '',
|
||||||
component: HomeComponent,
|
component: SelectRoleComponent,
|
||||||
pathMatch: 'full'
|
pathMatch: 'full'
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|||||||
@ -1,5 +1,4 @@
|
|||||||
<body>
|
<body>
|
||||||
<app-nav-menu></app-nav-menu>
|
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<router-outlet></router-outlet>
|
<router-outlet></router-outlet>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -5,5 +5,5 @@ import { Component } from '@angular/core';
|
|||||||
templateUrl: './app.component.html'
|
templateUrl: './app.component.html'
|
||||||
})
|
})
|
||||||
export class AppComponent {
|
export class AppComponent {
|
||||||
title = 'app';
|
title = 'Session Companion';
|
||||||
}
|
}
|
||||||
|
|||||||
@ -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 { appRoutingModule } from '../app.routing';
|
import { appRoutingModule } from '../app.routing';
|
||||||
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
|
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
|
||||||
|
import { MatButtonModule } from '@angular/material/button';
|
||||||
|
import { MatCardModule } from '@angular/material/card';
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
declarations: [
|
declarations: [
|
||||||
AppComponent,
|
AppComponent,
|
||||||
NavMenuComponent,
|
SelectRoleComponent,
|
||||||
HomeComponent
|
|
||||||
],
|
],
|
||||||
imports: [
|
imports: [
|
||||||
BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
|
BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
|
||||||
@ -22,6 +20,8 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
|
|||||||
FormsModule,
|
FormsModule,
|
||||||
appRoutingModule,
|
appRoutingModule,
|
||||||
BrowserAnimationsModule,
|
BrowserAnimationsModule,
|
||||||
|
MatButtonModule,
|
||||||
|
MatCardModule,
|
||||||
],
|
],
|
||||||
providers: [],
|
providers: [],
|
||||||
bootstrap: [AppComponent]
|
bootstrap: [AppComponent]
|
||||||
|
|||||||
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,18 +0,0 @@
|
|||||||
a.navbar-brand {
|
|
||||||
white-space: normal;
|
|
||||||
text-align: center;
|
|
||||||
word-break: break-all;
|
|
||||||
}
|
|
||||||
|
|
||||||
html {
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
@media (min-width: 768px) {
|
|
||||||
html {
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.box-shadow {
|
|
||||||
box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
|
|
||||||
}
|
|
||||||
@ -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>
|
|
||||||
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,49 @@
|
|||||||
|
.container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
padding: 10%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button {
|
||||||
|
border-radius: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#player-button {
|
||||||
|
background-color: #2699fb;
|
||||||
|
}
|
||||||
|
|
||||||
|
#game-master-button {
|
||||||
|
background-color: #440505;
|
||||||
|
}
|
||||||
|
|
||||||
|
.font {
|
||||||
|
color: #ffffff;
|
||||||
|
font-weight: bold;
|
||||||
|
font-style: italic, oblique;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.button {
|
||||||
|
margin: 10px;
|
||||||
|
padding: 10px;
|
||||||
|
width: 328px;
|
||||||
|
height: 101px;
|
||||||
|
}
|
||||||
|
.font {
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.button {
|
||||||
|
margin: 20px;
|
||||||
|
padding: 20px;
|
||||||
|
width: 658px;
|
||||||
|
height: 202px;
|
||||||
|
}
|
||||||
|
.font {
|
||||||
|
font-size: 40px;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,4 @@
|
|||||||
|
<div class="container font">
|
||||||
|
<button id="player-button" class="button font">Player</button>
|
||||||
|
<button id="game-master-button" class="button font">Game Master</button>
|
||||||
|
</div>
|
||||||
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -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() {
|
||||||
@ -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>
|
|
||||||
@ -1,8 +0,0 @@
|
|||||||
import { Component } from '@angular/core';
|
|
||||||
|
|
||||||
@Component({
|
|
||||||
selector: 'app-home',
|
|
||||||
templateUrl: './home.component.html',
|
|
||||||
})
|
|
||||||
export class HomeComponent {
|
|
||||||
}
|
|
||||||
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"ConnectionStrings": {
|
"ConnectionStrings": {
|
||||||
"DefaultConnection": "Server=(localdb)\\mssqllocaldb;Database=SessionCompanion;Trusted_Connection=True;MultipleActiveResultSets=true"
|
"DefaultConnection": "Server=.\\SQLEXPRESS;Database=SessionCompanion;Trusted_Connection=True;MultipleActiveResultSets=true"
|
||||||
},
|
},
|
||||||
"Logging": {
|
"Logging": {
|
||||||
"LogLevel": {
|
"LogLevel": {
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user