Skip to content

Commit efa28aa

Browse files
ToxantronToxantron
committed
Master component implementation
1 parent 8188d3b commit efa28aa

File tree

6 files changed

+217
-71
lines changed

6 files changed

+217
-71
lines changed

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,13 @@ import { Routes, RouterModule } from '@angular/router';
33

44
import { HomeComponent } from './home/home.component';
55
import { SessionsComponent } from './sessions/sessions.component';
6+
import { MasterComponent } from './master/master.component';
67

78
const routes: Routes = [
89
{ path: 'home', component: HomeComponent },
910
{ path: '', redirectTo: '/home', pathMatch: 'full' },
10-
{ path: 'sessions', component: SessionsComponent }
11+
{ path: 'sessions', component: SessionsComponent },
12+
{ path: 'session/:id', component: MasterComponent }
1113
];
1214

1315
@NgModule({

‎src/app/card.ts

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,4 +9,17 @@ export class Card {
99

1010
constructor() {
1111
}
12+
}
13+
14+
// Cards on the master view actually represent members votes
15+
export class MemberVote extends Card {
16+
id: number;
17+
18+
placed: boolean;
19+
20+
canDelete: boolean;
21+
22+
constructor() {
23+
super();
24+
}
1225
}

‎src/app/master/master.component.css

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
div.row.topic {
2+
margin-bottom: 20px;
3+
}
4+
button.wipe {
5+
margin-top: 10.75px;
6+
}
7+
div.topic .form-control {
8+
width: 280px;
9+
}
10+
@media(min-width: 1200px)
11+
{
12+
div.topic .form-control {
13+
width: 500px;
14+
}
15+
}
16+
17+
/*
18+
* Ticketing
19+
*/
20+
div.ticketing {
21+
padding: 10px;
22+
border-width: 0px, 1px, 1px, 1px;
23+
}
24+
25+
/* Card flip */
26+
div.card-overview {
27+
perspective: 1000px;
28+
}
29+
div.card-overview:first-child {
30+
margin-left: 15px;
31+
}
32+
div.card-overview > * {
33+
float: left;
34+
width: 33%;
35+
}
36+
@media(min-width: 768px) {
37+
div.card-overview {
38+
margin-right: -40px;
39+
}
40+
div.card-overview > * {
41+
width: 160px;
42+
}
43+
}
44+
@media(min-width: 992px) {
45+
div.card-overview {
46+
margin-right: -60px;
47+
}
48+
div.card-overview > * {
49+
width: 195px;
50+
}
51+
}
52+
@media(min-width: 1200px) {
53+
div.card-overview > * {
54+
width: 210px;
55+
}
56+
}
57+
58+
/*
59+
* Plugin styles
60+
*/
61+
div.issue-list {
62+
max-height: 800px;
63+
overflow-y: scroll;
64+
}

‎src/app/master/master.component.html

Lines changed: 97 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,97 @@
1-
<p>
2-
master works!
3-
</p>
1+
<!-- Headline -->
2+
<div class="row">
3+
<div class="col-xs-12 col-sm-1">
4+
<button class="btn btn-lg btn-danger wipe" (click)="wipe()">Wipe</button>
5+
</div>
6+
<div class="col-xs-10 col-sm-8 col-md-10">
7+
<h1>{{ session.id }} - {{ session.name }}</h1>
8+
</div>
9+
<div class="hidden-xs col-sm-2 col-md-1">
10+
<h1>{{ stopwatchElapsed }}</h1>
11+
</div>
12+
</div>
13+
14+
<!-- Poll control -->
15+
<!--div class="row topic">
16+
<div class="col-xs-12">
17+
<ul class="nav nav-tabs">
18+
<li ng-class="{active: master.current == source}" ng-repeat="source in master.sources| orderBy: 'position'">
19+
<a class="selectable" ng-click="master.selectSource(source)">{{ source.name }}</a>
20+
</li>
21+
</ul>
22+
<div class="ticketing" ng-include="master.current.view">
23+
</div>
24+
</div>
25+
</div-->
26+
27+
<!-- Live poll view and statistics -->
28+
<div class="row" *ngIf="teamComplete">
29+
<div class="card-overview">
30+
<div *ngFor="let vote of votes">
31+
<app-card [card]="vote" [backfaceVisible]="vote.placed" [canDelete]="vote.canDelete"
32+
[flipped]="flipped" [canSelect]="false"
33+
(delete)="removeMember($event)"></app-card>
34+
</div>
35+
</div>
36+
</div>
37+
38+
<!-- Invite and statistics -->
39+
<div class="row">
40+
<div class="hidden-xs hidden-sm col-md-5">
41+
<h2>Invite members</h2>
42+
<p>Invite members to join your session. Session id: <strong>{{ session.id }}</strong></p>
43+
<img src="https://chart.googleapis.com/chart?chs=300x300&cht=qr&chl={{ joinUrl(true) }}&choe=UTF-8" title="Join {{ session.id }}" />
44+
<p>Or send them this link: <a href="{{ joinUrl(false) }}">{{ joinUrl(false) }}</a>
45+
</div>
46+
47+
<!-- Team list and complete button -->
48+
<div class="col-xs-12 col-md-5" [hidden]="teamComplete">
49+
<h2>Team</h2>
50+
<ul class="list-group">
51+
<!-- Iterate over votes as they represent members as well -->
52+
<li class="list-group-item" *ngFor="let vote of votes; let i=index">{{ i + 1 }}. {{ vote.name }}</li>
53+
</ul>
54+
<button class="btn btn-success" (click)="teamComplete = true">Team complete</button>
55+
</div>
56+
57+
<!-- Statistics column -->
58+
<div class="col-xs-12 col-md-7" *ngIf="teamComplete">
59+
<div class="panel panel-default">
60+
<div class="panel-heading">Statistics</div>
61+
<div class="panel-body">
62+
<table class="table table-striped" *ngIf="statistics; else awaitStatistic">
63+
<thead>
64+
<tr>
65+
<th>Enabled</th>
66+
<th>Name</th>
67+
<th>Value</th>
68+
</tr>
69+
</thead>
70+
<tbody>
71+
<tr ng-repeat="statistic in master.statistics | orderBy:'!enabled'">
72+
<td><input type="checkbox" ng-model="statistic.enabled"></td>
73+
<td>
74+
<a target="_blank" href="<?php echo $src ?>/src/controllers/statistics/{{statistic.name}}.php">
75+
{{ statistic.name }}
76+
</a>
77+
</td>
78+
<td><span ng-show="statistic.enabled" ng-bind="statistic.value"></span></td>
79+
</tr>
80+
<tr>
81+
<td></td>
82+
<td>
83+
<a target="_blank" href="<?php echo $src ?>/src/controllers/statistics">
84+
Want more?
85+
</a>
86+
</td>
87+
<td></td>
88+
</tr>
89+
</tbody>
90+
</table>
91+
<ng-template #awaitStatistic>
92+
<p>Statistics will appear as soon as the first poll is concluded!</p>
93+
</ng-template>
94+
</div>
95+
</div>
96+
</div>
97+
</div>

‎src/app/master/master.component.ts

Lines changed: 40 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
11
import { Component, OnInit } from '@angular/core';
2+
import { ActivatedRoute } from '@angular/router';
3+
import { Session } from '../session';
4+
import { Card, MemberVote } from '../card';
25

36
@Component({
47
selector: 'app-master',
@@ -7,9 +10,45 @@ import { Component, OnInit } from '@angular/core';
710
})
811
export class MasterComponent implements OnInit {
912

10-
constructor() { }
13+
session: Session = new Session();
14+
15+
votes: MemberVote[] = [];
16+
17+
stopwatchElapsed: string = '00:00';
18+
19+
teamComplete: boolean = false;
20+
21+
flipped: boolean;
22+
23+
constructor(
24+
private route: ActivatedRoute) {
25+
26+
}
1127

1228
ngOnInit() {
29+
this.session.id = +this.route.snapshot.paramMap.get('id');
30+
this.session.name = "Hi";
31+
this.flipped = true;
32+
this.votes = [
33+
{id: 1, value: '1', active: false,name: 'Thomas',confirmed: true,placed: true, canDelete: true},
34+
{id: 1, value: '3', active: false,name: 'Sandra',confirmed: true,placed: true, canDelete: true},
35+
]
1336
}
1437

38+
joinUrl(encode: boolean) : string {
39+
var location = window.location;
40+
// Build url from location
41+
var url = `${location.protocol}//${location.hostname}:${location.port}/join/${this.session.id}`;
42+
if (encode)
43+
url = encodeURIComponent(url);
44+
return url;
45+
}
46+
47+
removeMember(card: Card) {
48+
49+
}
50+
51+
wipe() {
52+
53+
}
1554
}

‎src/css/scrumonline.css

Lines changed: 0 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -2,22 +2,6 @@
22
Scrum poker style
33
========================================================================== */
44

5-
div.row.topic {
6-
margin-bottom: 20px;
7-
}
8-
button.wipe {
9-
margin-top: 10.75px;
10-
}
11-
div.topic .form-control {
12-
width: 280px;
13-
}
14-
@media(min-width: 1200px)
15-
{
16-
div.topic .form-control {
17-
width: 500px;
18-
}
19-
}
20-
215
.selectable {
226
cursor: pointer;
237
}
@@ -29,48 +13,6 @@ form.storysetter {
2913
margin-top: 10px;
3014
}
3115

32-
/*
33-
* Ticketing
34-
*/
35-
div.ticketing {
36-
padding: 10px;
37-
border-width: 0px, 1px, 1px, 1px;
38-
}
39-
40-
41-
/* Card flip */
42-
div.card-overview {
43-
perspective: 1000px;
44-
}
45-
div.card-overview:first-child {
46-
margin-left: 15px;
47-
}
48-
div.card-overview div.card-container {
49-
float: left;
50-
width: 33%;
51-
}
52-
@media(min-width: 768px) {
53-
div.card-overview {
54-
margin-right: -40px;
55-
}
56-
div.card-overview div.card-container {
57-
width: 160px;
58-
}
59-
}
60-
@media(min-width: 992px) {
61-
div.card-overview {
62-
margin-right: -60px;
63-
}
64-
div.card-overview div.card-container {
65-
width: 195px;
66-
}
67-
}
68-
@media(min-width: 1200px) {
69-
div.card-overview div.card-container {
70-
width: 210px;
71-
}
72-
}
73-
7416
div.leave {
7517
top: 10px;
7618
left: 5px;
@@ -87,12 +29,4 @@ div.delete-member:hover {
8729
*/
8830
div.removal {
8931
margin-top: 150px;
90-
}
91-
92-
/*
93-
* Plugin styles
94-
*/
95-
div.issue-list {
96-
max-height: 800px;
97-
overflow-y: scroll;
9832
}

0 commit comments

Comments
 (0)