Skip to content

Commit f53181a

Browse files
ToxantronToxantron
committed
Nav frame and basic home component
1 parent 5b3a1e4 commit f53181a

21 files changed

+267
-59
lines changed

‎src/app/app-routing.module.ts

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,11 @@
11
import { NgModule } from '@angular/core';
22
import { Routes, RouterModule } from '@angular/router';
3+
import { HomeComponent } from './home/home.component';
34

4-
const routes: Routes = [];
5+
const routes: Routes = [
6+
{ path: 'home', component: HomeComponent },
7+
{ path: '', redirectTo: '/home', pathMatch: 'full' },
8+
];
59

610
@NgModule({
711
imports: [RouterModule.forRoot(routes)],

‎src/app/app.component.html

Lines changed: 27 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,27 @@
1-
<router-outlet></router-outlet>
1+
<github-fork></github-fork>
2+
3+
<nav class="navbar navbar-inverse navbar-fixed-top">
4+
<div class="container-fluid navigation">
5+
<div class="navbar-header">
6+
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
7+
<span class="sr-only">Toggle navigation</span>
8+
<span class="icon-bar"></span>
9+
<span class="icon-bar"></span>
10+
<span class="icon-bar"></span>
11+
</button>
12+
<a class="navbar-brand" router-link="/home">Scrum Poker</a>
13+
</div>
14+
<div id="navbar" class="collapse navbar-collapse">
15+
<ul class="nav navbar-nav">
16+
<li data-toggle="collapse" data-target=".navbar-collapse.in">
17+
<a router-link="/sessions">Sessions</a>
18+
</li>
19+
</ul>
20+
</div> <!--/.nav-collapse -->
21+
</div>
22+
</nav>
23+
24+
<!-- Add your site or application content here -->
25+
<div class="container-fluid main" ng-view>
26+
<router-outlet></router-outlet>
27+
</div>

‎src/app/app.module.ts

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,32 @@
11
import { BrowserModule } from '@angular/platform-browser';
22
import { NgModule } from '@angular/core';
3+
import { FormsModule } from '@angular/forms';
34

45
import { AppRoutingModule } from './app-routing.module';
56
import { AppComponent } from './app.component';
67
import { CreateComponent } from './create/create.component';
78
import { JoinComponent } from './join/join.component';
89
import { MasterComponent } from './master/master.component';
910
import { MemberComponent } from './member/member.component';
11+
import { GithubForkComponent } from './github-fork/github-fork.component';
12+
import { HomeComponent } from './home/home.component';
13+
import { SessionsComponent } from './sessions/sessions.component';
1014

1115
@NgModule({
1216
declarations: [
1317
AppComponent,
1418
CreateComponent,
1519
JoinComponent,
1620
MasterComponent,
17-
MemberComponent
21+
MemberComponent,
22+
GithubForkComponent,
23+
HomeComponent,
24+
SessionsComponent
1825
],
1926
imports: [
2027
BrowserModule,
21-
AppRoutingModule
28+
AppRoutingModule,
29+
FormsModule
2230
],
2331
providers: [],
2432
bootstrap: [AppComponent]

‎src/app/create/create.component.html

Lines changed: 39 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,39 @@
1-
<p>
2-
create works!
3-
</p>
1+
<div class="panel panel-default">
2+
<div class="panel-heading">Create session</div>
3+
<div class="panel-body">
4+
<form role="form">
5+
<div class="form-group" [class.has-error]="nameError">
6+
<label for="sessionName">Session name:</label>
7+
<div class="has-feedback">
8+
<input type="text" class="form-control" [(ngModel)]="session.name" placeholder="My session" name="name">
9+
<span *ngIf="nameError" class="glyphicon glyphicon-remove form-control-feedback"></span>
10+
</div>
11+
</div>
12+
<div class="form-group">
13+
<label>Cards: <a target="_blank" href="https://github.com/Toxantron/scrumonline/blob/master/src/sample-config.php#L14">?</a></label>
14+
<div class="dropdown">
15+
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
16+
<span ng-bind-html="create.selectedSet.value"></span>
17+
<span class="caret"></span>
18+
</button>
19+
<ul class="dropdown-menu">
20+
<li ng-repeat="set in create.cardSets" ng-class="{'active': set == create.selectedSet}">
21+
<a class="selectable" ng-click="create.selectedSet = set" ng-bind-html="set.value"></a>
22+
</li>
23+
</ul>
24+
</div>
25+
</div>
26+
<div class="form-group">
27+
<label><input type="checkbox" [(ngModel)]="session.isPrivate" name="isPrivate"> is private</label>
28+
</div>
29+
<div class="form-group" *ngIf="session.isPrivate" ng-class="{'has-error': create.pwdError}">
30+
<label for="password">Password:</label>
31+
<div class="has-feedback">
32+
<input type="password" class="form-control" [(ngModel)]="session.password" name="password">
33+
<span *ngIf="pwdError" class="glyphicon glyphicon-remove form-control-feedback"></span>
34+
</div>
35+
</div>
36+
<input type="button" class="btn btn-default" value="Create" (click)="createSession()">
37+
</form>
38+
</div>
39+
</div>

‎src/app/create/create.component.ts

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,32 @@
11
import { Component, OnInit } from '@angular/core';
2+
import { Session } from '../session';
23

34
@Component({
4-
selector: 'app-create',
5+
selector: 'create-session',
56
templateUrl: './create.component.html',
67
styleUrls: ['./create.component.css']
78
})
89
export class CreateComponent implements OnInit {
910

10-
constructor() { }
11+
session: Session = {
12+
id: 0,
13+
name: '',
14+
isPrivate: false,
15+
password: ''
16+
};
17+
18+
nameError: boolean = false;
19+
pwdError: boolean = false;
20+
21+
constructor() {
22+
23+
}
1124

1225
ngOnInit() {
1326
}
1427

28+
createSession() : void {
29+
if (Session.name == '')
30+
this.nameError = true;
31+
}
1532
}

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

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
.github-fork-ribbon-wrapper {
2+
width: 150px;
3+
height: 150px;
4+
position: fixed;
5+
overflow: hidden;
6+
top: 0;
7+
z-index: 9999;
8+
pointer-events: none;
9+
right: 0;
10+
}
11+
12+
.github-fork-ribbon-wrapper .github-fork-ribbon {
13+
position: absolute;
14+
padding: 2px 0;
15+
background-color: #333;
16+
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
17+
-webkit-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.5);
18+
-moz-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.5);
19+
box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.5);
20+
z-index: 9999;
21+
pointer-events: auto;
22+
top: 42px;
23+
right: -43px;
24+
-webkit-transform: rotate(45deg);
25+
-moz-transform: rotate(45deg);
26+
-ms-transform: rotate(45deg);
27+
-o-transform: rotate(45deg);
28+
transform: rotate(45deg);
29+
}
30+
31+
.github-fork-ribbon-wrapper .github-fork-ribbon a {
32+
font: 700 13px "Helvetica Neue", Helvetica, Arial, sans-serif;
33+
color: #fff;
34+
text-decoration: none;
35+
text-shadow: 0 -1px rgba(0, 0, 0, 0.5);
36+
text-align: center;
37+
width: 200px;
38+
line-height: 20px;
39+
display: inline-block;
40+
padding: 2px 0;
41+
border-width: 1px 0;
42+
border-style: dotted;
43+
border-color: rgba(255, 255, 255, 0.7);
44+
}

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<!--Github Fork Badge -->
2+
<div class="github-fork-ribbon-wrapper hidden-xs">
3+
<div class="github-fork-ribbon">
4+
<a target="_blank" href="https://github.com/Toxantron/scrumonline">Fork me on GitHub</a>
5+
</div>
6+
</div>

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

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { Component, OnInit } from '@angular/core';
2+
3+
@Component({
4+
selector: 'github-fork',
5+
templateUrl: './github-fork.component.html',
6+
styleUrls: ['./github-fork.component.css']
7+
})
8+
export class GithubForkComponent implements OnInit {
9+
10+
constructor() { }
11+
12+
ngOnInit() {
13+
}
14+
}

‎src/app/home/home.component.css

Whitespace-only changes.

‎src/app/home/home.component.html

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<!-- Introduction -->
2+
<div class="row">
3+
<article class="col-xs-12 col-lg-10 col-lg-offset-1">
4+
<h2>Scrum Online</h2>
5+
<p>
6+
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
7+
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
8+
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.
9+
</p>
10+
</article>
11+
</div>
12+
13+
14+
<div class="row">
15+
<h2 class="col-xs-12 col-lg-10 col-lg-offset-1">Create or join a session</h2>
16+
17+
<!-- Create session panel -->
18+
<div class="col-xs-12 col-sm-6 col-lg-5 col-lg-offset-1">
19+
<create-session></create-session>
20+
</div>
21+
22+
<!-- Join session panel -->
23+
<div class="col-xs-12 col-sm-6 col-lg-5" ng-controller="JoinController as join">
24+
<join-session></join-session>
25+
</div>
26+
</div>

‎src/app/home/home.component.ts

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { Component, OnInit } from '@angular/core';
2+
3+
@Component({
4+
selector: 'app-home',
5+
templateUrl: './home.component.html',
6+
styleUrls: ['./home.component.css']
7+
})
8+
export class HomeComponent implements OnInit {
9+
10+
constructor() { }
11+
12+
ngOnInit() {
13+
}
14+
15+
}

‎src/app/join/join.component.html

Lines changed: 29 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,29 @@
1-
<p>
2-
join works!
3-
</p>
1+
<div class="panel panel-default">
2+
<div class="panel-heading">Join session</div>
3+
<div class="panel-body">
4+
<form role="form">
5+
<div class="form-group" ng-class="{'has-error': join.idError}">
6+
<label>Session id:</label>
7+
<div class="has-feedback">
8+
<input type="text" class="form-control" ng-model="join.id" ng-change="join.passwordCheck()" placeholder="4711">
9+
<span ng-if="join.idError" class="glyphicon glyphicon-remove form-control-feedback"></span>
10+
</div>
11+
</div>
12+
<div class="form-group" ng-class="{'has-error': join.nameError}">
13+
<label>Your name:</label>
14+
<div class="has-feedback">
15+
<input type="text" class="form-control" ng-model="join.name" placeholder="John">
16+
<span ng-if="join.nameError" class="glyphicon glyphicon-remove form-control-feedback"></span>
17+
</div>
18+
</div>
19+
<div class="form-group" ng-if="join.requiresPassword">
20+
<label>Password:</label>
21+
<div class="has-feedback">
22+
<input type="password" class="form-control" ng-model="join.password">
23+
<span ng-if="join.passwordError" class="glyphicon glyphicon-remove form-control-feedback"></span>
24+
</div>
25+
</div>
26+
<input type="button" class="btn btn-default" value="Join" ng-click="join.joinSession()">
27+
</form>
28+
</div>
29+
</div>

‎src/app/join/join.component.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { Component, OnInit } from '@angular/core';
22

33
@Component({
4-
selector: 'app-join',
4+
selector: 'join-session',
55
templateUrl: './join.component.html',
66
styleUrls: ['./join.component.css']
77
})
@@ -10,6 +10,7 @@ export class JoinComponent implements OnInit {
1010
constructor() { }
1111

1212
ngOnInit() {
13+
// Read name from cookie
1314
}
1415

1516
}

‎src/app/member.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
export class Member {
2+
id: number;
3+
sessionId: number;
4+
name: string;
5+
}

‎src/app/session.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
export class Session {
2+
id : number;
3+
name : string;
4+
isPrivate : boolean;
5+
password : string;
6+
}

‎src/app/sessions/sessions.component.css

Whitespace-only changes.

‎src/app/sessions/sessions.component.html

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<p>
2+
sessions works!
3+
</p>

‎src/app/sessions/sessions.component.ts

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { Component, OnInit } from '@angular/core';
2+
3+
@Component({
4+
selector: 'app-sessions',
5+
templateUrl: './sessions.component.html',
6+
styleUrls: ['./sessions.component.css']
7+
})
8+
export class SessionsComponent implements OnInit {
9+
10+
constructor() { }
11+
12+
ngOnInit() {
13+
}
14+
15+
}

0 commit comments

Comments
 (0)