Nav frame and basic home component

angular.json

@@ -48,7 +48,9 @@
               "src/css/bootstrap.min.css",
               "src/css/scrumonline.css"
             ],
-            "scripts": [],
+            "scripts": [
+              "src/js/bootstrap.min.js"
+            ],
             "es5BrowserSupport": true
           },
           "configurations": {

src/app/app-routing.module.ts

@@ -1,7 +1,11 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
+import { HomeComponent }   from './home/home.component';
 
-const routes: Routes = [];
+const routes: Routes = [
+  { path: 'home', component: HomeComponent },
+  { path: '', redirectTo: '/home', pathMatch: 'full' },
+];
 
 @NgModule({
   imports: [RouterModule.forRoot(routes)],

src/app/app.component.html

@@ -1 +1,27 @@
-<router-outlet></router-outlet>
+<github-fork></github-fork>
+
+<nav class="navbar navbar-inverse navbar-fixed-top">
+  <div class="container-fluid navigation">
+    <div class="navbar-header">
+      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
+        <span class="sr-only">Toggle navigation</span>
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+      </button>
+      <a class="navbar-brand" router-link="/home">Scrum Poker</a>
+    </div>
+    <div id="navbar" class="collapse navbar-collapse">
+      <ul class="nav navbar-nav">
+        <li data-toggle="collapse" data-target=".navbar-collapse.in">
+          <a router-link="/sessions">Sessions</a>
+        </li>     
+      </ul>
+    </div> <!--/.nav-collapse -->
+  </div>
+</nav>
+
+<!-- Add your site or application content here -->
+<div class="container-fluid main" ng-view>
+  <router-outlet></router-outlet>
+</div>

src/app/app.module.ts

@@ -1,24 +1,32 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { CreateComponent } from './create/create.component';
 import { JoinComponent } from './join/join.component';
 import { MasterComponent } from './master/master.component';
 import { MemberComponent } from './member/member.component';
+import { GithubForkComponent } from './github-fork/github-fork.component';
+import { HomeComponent } from './home/home.component';
+import { SessionsComponent } from './sessions/sessions.component';
 
 @NgModule({
   declarations: [
     AppComponent,
     CreateComponent,
     JoinComponent,
     MasterComponent,
-    MemberComponent
+    MemberComponent,
+    GithubForkComponent,
+    HomeComponent,
+    SessionsComponent
   ],
   imports: [
     BrowserModule,
-    AppRoutingModule
+    AppRoutingModule,
+    FormsModule
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/cardset.ts

@@ -0,0 +1,11 @@
+export class CardSet {
+  values : string[];
+
+  visual : string;
+
+  constructor(values : string[]) {
+    this.values = values;
+
+    this.visual = values.join(', ');
+  }
+}

src/app/create/create.component.html

@@ -1,3 +1,39 @@
-<p>
-  create works!
-</p>
+<div class="panel panel-default">
+  <div class="panel-heading">Create session</div>
+  <div class="panel-body">  
+    <form role="form">
+      <div class="form-group" [class.has-error]="nameError">
+        <label for="sessionName">Session name:</label>
+        <div class="has-feedback">
+          <input type="text" class="form-control" [(ngModel)]="session.name" placeholder="My session" name="name">
+          <span *ngIf="nameError" class="glyphicon glyphicon-remove form-control-feedback"></span>
+        </div>
+      </div>
+      <div class="form-group">
+        <label>Cards: <a target="_blank" href="https://github.com/Toxantron/scrumonline/blob/master/src/sample-config.php#L14">?</a></label>
+        <div class="dropdown">
+          <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
+            <span [innerHtml]="selectedSet.visual"></span>
+            <span class="caret"></span>
+          </button>
+          <ul class="dropdown-menu">
+            <li *ngFor="let set of cardSets" ng-class="{'active': set == selectedSet}">
+              <a class="selectable" (click)="selectSet(set)" [innerHtml]="set.visual"></a>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div class="form-group">
+        <label><input type="checkbox" [(ngModel)]="session.isPrivate" name="isPrivate"> is private</label> 
+      </div>
+      <div class="form-group" *ngIf="session.isPrivate" ng-class="{'has-error': create.pwdError}">
+        <label for="password">Password:</label>
+        <div class="has-feedback">
+          <input type="password" class="form-control" [(ngModel)]="session.password" name="password">
+          <span *ngIf="pwdError" class="glyphicon glyphicon-remove form-control-feedback"></span>
+        </div>
+      </div>
+      <input type="button" class="btn btn-default" value="Create" (click)="createSession()">
+    </form>
+  </div>
+</div>  

src/app/create/create.component.ts

@@ -1,15 +1,45 @@
 import { Component, OnInit } from '@angular/core';
+import { Session } from '../session';
+import { CardSet } from '../cardset';
 
 @Component({
-  selector: 'app-create',
+  selector: 'create-session',
   templateUrl: './create.component.html',
   styleUrls: ['./create.component.css']
 })
 export class CreateComponent implements OnInit {
 
-  constructor() { }
+  session: Session = {
+    id: 0,
+    name: '',
+    isPrivate: false,
+    password: '',
+
+    cardSet : []
+  };
+
+  nameError: boolean = false;
+  pwdError: boolean = false;
+
+  cardSets : CardSet[] = [
+    new CardSet(['1', '2', '3', '5', '7']),
+    new CardSet(['2', '4', '8', '16', '32'])
+  ];
+  selectedSet : CardSet;
+
+  constructor() {    
+  }
 
   ngOnInit() {
+    this.selectedSet = this.cardSets[0];
+  }
+
+  selectSet(set : CardSet) {
+    this.selectedSet = set;
   }
 
+  createSession() : void {
+    if (Session.name == '')
+      this.nameError = true;
+  }
 }

src/app/github-fork/github-fork.component.css

@@ -0,0 +1,44 @@
+.github-fork-ribbon-wrapper {
+  width: 150px;
+  height: 150px;
+  position: fixed;
+  overflow: hidden;
+  top: 0;
+  z-index: 9999;
+  pointer-events: none;
+  right: 0;
+}
+
+.github-fork-ribbon-wrapper .github-fork-ribbon {
+  position: absolute;
+  padding: 2px 0;
+  background-color: #333;
+  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
+  -webkit-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.5);
+  -moz-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.5);
+  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.5);
+  z-index: 9999;
+  pointer-events: auto;
+  top: 42px;
+  right: -43px;
+  -webkit-transform: rotate(45deg);
+  -moz-transform: rotate(45deg);
+  -ms-transform: rotate(45deg);
+  -o-transform: rotate(45deg);
+  transform: rotate(45deg);
+}
+
+.github-fork-ribbon-wrapper .github-fork-ribbon a {
+  font: 700 13px "Helvetica Neue", Helvetica, Arial, sans-serif;
+  color: #fff;
+  text-decoration: none;
+  text-shadow: 0 -1px rgba(0, 0, 0, 0.5);
+  text-align: center;
+  width: 200px;
+  line-height: 20px;
+  display: inline-block;
+  padding: 2px 0;
+  border-width: 1px 0;
+  border-style: dotted;
+  border-color: rgba(255, 255, 255, 0.7);
+}

src/app/github-fork/github-fork.component.html

@@ -0,0 +1,6 @@
+<!--Github Fork Badge -->
+<div class="github-fork-ribbon-wrapper hidden-xs">
+    <div class="github-fork-ribbon">
+      <a target="_blank" href="https://github.com/Toxantron/scrumonline">Fork me on GitHub</a>
+    </div>
+  </div>

src/app/github-fork/github-fork.component.ts

@@ -0,0 +1,14 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'github-fork',
+  templateUrl: './github-fork.component.html',
+  styleUrls: ['./github-fork.component.css']
+})
+export class GithubForkComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+}

src/app/home/home.component.html

@@ -0,0 +1,26 @@
+<!-- Introduction -->
+<div class="row">
+  <article class="col-xs-12 col-lg-10 col-lg-offset-1">
+      <h2>Scrum Online</h2>
+      <p>        
+        Welcome to my open source Planning Poker® web app. Use of this app is free of charge for everyone. As a scrum master just start a named session 
+        and invite your team to join you. It is recommended to display the scrum master view on the big screen (TV or projector) and let everyone else 
+        join via smartphone. To join a session just enter the id displayed in the heading of the scrum master view or use the QR-Code.
+      </p>
+  </article>
+</div>
+
+
+<div class="row">
+  <h2 class="col-xs-12 col-lg-10 col-lg-offset-1">Create or join a session</h2>
+
+  <!-- Create session panel -->
+  <div class="col-xs-12 col-sm-6 col-lg-5 col-lg-offset-1">
+    <create-session></create-session>
+  </div>
+
+  <!-- Join session panel -->
+  <div class="col-xs-12 col-sm-6 col-lg-5">
+    <join-session></join-session>
+  </div>  
+</div>

src/app/home/home.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-home',
+  templateUrl: './home.component.html',
+  styleUrls: ['./home.component.css']
+})
+export class HomeComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/join/join.component.html

@@ -1,3 +1,29 @@
-<p>
-  join works!
-</p>
+<div class="panel panel-default">
+  <div class="panel-heading">Join session</div>
+  <div class="panel-body">
+    <form role="form">
+      <div class="form-group" ng-class="{'has-error': join.idError}">
+        <label>Session id:</label>
+        <div class="has-feedback">
+          <input type="text" class="form-control" ng-model="join.id" ng-change="join.passwordCheck()" placeholder="4711">
+          <span ng-if="join.idError" class="glyphicon glyphicon-remove form-control-feedback"></span>
+        </div>
+      </div>
+      <div class="form-group" ng-class="{'has-error': join.nameError}">
+        <label>Your name:</label>
+        <div class="has-feedback">
+          <input type="text" class="form-control"  ng-model="join.name" placeholder="John">
+          <span ng-if="join.nameError" class="glyphicon glyphicon-remove form-control-feedback"></span>
+        </div>
+      </div>
+      <div class="form-group" ng-if="join.requiresPassword">
+        <label>Password:</label>
+        <div class="has-feedback">
+          <input type="password" class="form-control"  ng-model="join.password">
+          <span ng-if="join.passwordError" class="glyphicon glyphicon-remove form-control-feedback"></span>
+        </div>
+      </div>
+      <input type="button" class="btn btn-default" value="Join" ng-click="join.joinSession()">
+   </form>
+  </div>
+</div>  

src/app/join/join.component.ts

@@ -1,7 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 
 @Component({
-  selector: 'app-join',
+  selector: 'join-session',
   templateUrl: './join.component.html',
   styleUrls: ['./join.component.css']
 })
@@ -10,6 +10,7 @@ export class JoinComponent implements OnInit {
   constructor() { }
 
   ngOnInit() {
+    // Read name from cookie
   }
 
 }

src/app/member.ts

@@ -0,0 +1,5 @@
+export class Member {
+  id: number;
+  sessionId: number;
+  name: string;
+}

src/app/session.ts

@@ -0,0 +1,8 @@
+export class Session {
+  id : number;
+  name : string;
+  isPrivate : boolean;
+  password : string;
+
+  cardSet : string[];
+}

src/app/sessions/sessions.component.html

@@ -0,0 +1,3 @@
+<p>
+  sessions works!
+</p>

src/app/sessions/sessions.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-sessions',
+  templateUrl: './sessions.component.html',
+  styleUrls: ['./sessions.component.css']
+})
+export class SessionsComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}