Master component implementation

Toxantron · Jun 22, 2019 · efa28aa · efa28aa
1 parent 8188d3b
commit efa28aa
Show file tree

Hide file tree

Showing 6 changed files with 217 additions and 71 deletions.
diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
@@ -3,11 +3,13 @@ import { Routes, RouterModule } from '@angular/router';
 
 import { HomeComponent }   from './home/home.component';
 import { SessionsComponent }   from './sessions/sessions.component';
+import { MasterComponent } from './master/master.component';
 
 const routes: Routes = [
   { path: 'home', component: HomeComponent },
   { path: '', redirectTo: '/home', pathMatch: 'full' },
-  { path: 'sessions', component: SessionsComponent }
+  { path: 'sessions', component: SessionsComponent },
+  { path: 'session/:id', component: MasterComponent }
 ];
 
 @NgModule({

diff --git a/src/app/card.ts b/src/app/card.ts
@@ -9,4 +9,17 @@ export class Card {
 
   constructor() {   
   }
+}
+
+// Cards on the master view actually represent members votes
+export class MemberVote extends Card {
+  id: number;
+
+  placed: boolean;
+
+  canDelete: boolean;
+
+  constructor() {
+    super();    
+  }
 }
diff --git a/src/app/master/master.component.css b/src/app/master/master.component.css
@@ -0,0 +1,64 @@
+div.row.topic {
+  margin-bottom: 20px;
+}
+button.wipe {
+  margin-top: 10.75px;
+}
+div.topic .form-control {
+   width: 280px;
+}
+@media(min-width: 1200px)
+{
+  div.topic .form-control {
+    width: 500px;
+ }
+}
+
+/*
+ * Ticketing
+ */
+ div.ticketing {
+  padding: 10px;
+  border-width: 0px, 1px, 1px, 1px;
+}
+
+/* Card flip */
+div.card-overview {
+  perspective: 1000px;
+}
+div.card-overview:first-child {
+  margin-left: 15px;
+}
+div.card-overview > * {
+  float: left;
+  width: 33%;
+}
+@media(min-width: 768px) {
+  div.card-overview {
+    margin-right: -40px;
+  }
+  div.card-overview > * {
+    width: 160px;
+  }
+}
+@media(min-width: 992px) {
+  div.card-overview {
+    margin-right: -60px;
+  }
+  div.card-overview > * {
+    width: 195px;
+  }
+}
+@media(min-width: 1200px) {
+  div.card-overview > * {
+    width: 210px;
+  }
+}
+
+/*
+ * Plugin styles
+ */
+ div.issue-list {
+  max-height: 800px;
+  overflow-y: scroll;
+}
diff --git a/src/app/master/master.component.html b/src/app/master/master.component.html
@@ -1,3 +1,97 @@
-<p>
-  master works!
-</p>
+<!-- Headline -->
+<div class="row">
+  <div class="col-xs-12 col-sm-1">
+    <button class="btn btn-lg btn-danger wipe" (click)="wipe()">Wipe</button>
+  </div>
+  <div class="col-xs-10 col-sm-8 col-md-10">
+    <h1>{{ session.id }} - {{ session.name }}</h1>
+  </div>
+  <div class="hidden-xs col-sm-2 col-md-1">
+    <h1>{{ stopwatchElapsed }}</h1>
+  </div>
+</div>
+
+<!-- Poll control -->
+<!--div class="row topic">
+  <div class="col-xs-12">
+    <ul class="nav nav-tabs">
+      <li ng-class="{active: master.current == source}" ng-repeat="source in master.sources| orderBy: 'position'">
+        <a class="selectable" ng-click="master.selectSource(source)">{{ source.name }}</a>
+      </li>
+    </ul>
+    <div class="ticketing" ng-include="master.current.view">
+    </div>
+  </div>
+</div-->
+
+<!-- Live poll view and statistics -->
+<div class="row" *ngIf="teamComplete">
+  <div class="card-overview">
+    <div *ngFor="let vote of votes">        
+      <app-card [card]="vote" [backfaceVisible]="vote.placed" [canDelete]="vote.canDelete"
+                [flipped]="flipped" [canSelect]="false"
+                (delete)="removeMember($event)"></app-card>         
+    </div>
+  </div> 
+</div>
+
+<!-- Invite and statistics -->            
+<div class="row">
+  <div class="hidden-xs hidden-sm col-md-5">
+    <h2>Invite members</h2>
+    <p>Invite members to join your session. Session id: <strong>{{ session.id }}</strong></p>
+    <img src="https://chart.googleapis.com/chart?chs=300x300&cht=qr&chl={{ joinUrl(true) }}&choe=UTF-8" title="Join {{ session.id }}" />
+    <p>Or send them this link: <a href="{{ joinUrl(false) }}">{{ joinUrl(false) }}</a>
+  </div>
+
+  <!-- Team list and complete button -->
+  <div class="col-xs-12 col-md-5" [hidden]="teamComplete">
+    <h2>Team</h2>
+    <ul class="list-group">
+      <!-- Iterate over votes as they represent members as well -->
+      <li class="list-group-item" *ngFor="let vote of votes; let i=index">{{ i + 1 }}. {{ vote.name }}</li>
+    </ul>
+    <button class="btn btn-success" (click)="teamComplete = true">Team complete</button>
+  </div>   
+
+  <!-- Statistics column -->
+  <div class="col-xs-12 col-md-7" *ngIf="teamComplete">
+    <div class="panel panel-default">
+      <div class="panel-heading">Statistics</div>
+      <div class="panel-body">
+        <table class="table table-striped" *ngIf="statistics; else awaitStatistic">
+          <thead>
+            <tr>
+              <th>Enabled</th>
+              <th>Name</th>
+              <th>Value</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr ng-repeat="statistic in master.statistics | orderBy:'!enabled'">
+              <td><input type="checkbox" ng-model="statistic.enabled"></td>
+              <td>
+                <a target="_blank" href="<?php echo $src ?>/src/controllers/statistics/{{statistic.name}}.php">
+                  {{ statistic.name }}
+                </a>
+              </td>
+              <td><span ng-show="statistic.enabled" ng-bind="statistic.value"></span></td>
+            </tr>
+            <tr>
+              <td></td>
+              <td>
+                <a target="_blank" href="<?php echo $src ?>/src/controllers/statistics">
+                  Want more?
+                </a>
+              </td>
+              <td></td>
+            </tr>
+          </tbody>
+        </table>
+        <ng-template #awaitStatistic>
+          <p>Statistics will appear as soon as the first poll is concluded!</p>
+        </ng-template>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/src/app/master/master.component.ts b/src/app/master/master.component.ts
@@ -1,4 +1,7 @@
 import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { Session } from '../session';
+import { Card, MemberVote } from '../card';
 
 @Component({
   selector: 'app-master',
@@ -7,9 +10,45 @@ import { Component, OnInit } from '@angular/core';
 })
 export class MasterComponent implements OnInit {
 
-  constructor() { }
+  session: Session = new Session();
+
+  votes: MemberVote[] = [];
+
+  stopwatchElapsed: string = '00:00';
+
+  teamComplete: boolean = false;
+
+  flipped: boolean;
+
+  constructor(
+    private route: ActivatedRoute) { 
+
+    }
 
   ngOnInit() {
+    this.session.id = +this.route.snapshot.paramMap.get('id');
+    this.session.name = "Hi";
+    this.flipped = true;
+    this.votes = [
+      {id: 1, value: '1', active: false,name: 'Thomas',confirmed: true,placed: true, canDelete: true},
+      {id: 1, value: '3', active: false,name: 'Sandra',confirmed: true,placed: true, canDelete: true},
+    ]
   }
 
+  joinUrl(encode: boolean) : string {
+    var location = window.location;
+    // Build url from location
+    var url = `${location.protocol}//${location.hostname}:${location.port}/join/${this.session.id}`;
+    if (encode)
+      url = encodeURIComponent(url);
+    return url;
+  }
+
+  removeMember(card: Card) {
+
+  }
+
+  wipe() {
+
+  }
 }
diff --git a/src/css/scrumonline.css b/src/css/scrumonline.css
@@ -2,22 +2,6 @@
    Scrum poker style
    ========================================================================== */
 
-div.row.topic {
-  margin-bottom: 20px;
-}
-button.wipe {
-  margin-top: 10.75px;
-}
-div.topic .form-control {
-   width: 280px;
-}
-@media(min-width: 1200px)
-{
-  div.topic .form-control {
-    width: 500px;
- }
-}
-
 .selectable {
   cursor: pointer;
 }
@@ -29,48 +13,6 @@ form.storysetter {
   margin-top: 10px;
 }
 
-/*
- * Ticketing
- */
-div.ticketing {
-  padding: 10px;
-  border-width: 0px, 1px, 1px, 1px;
-}
-
-
-/* Card flip */
-div.card-overview {
-  perspective: 1000px;
-}
-div.card-overview:first-child {
-  margin-left: 15px;
-}
-div.card-overview div.card-container {
-  float: left;  
-  width: 33%;
-}
-@media(min-width: 768px) {
-  div.card-overview {
-    margin-right: -40px;
-  }
-  div.card-overview div.card-container {
-    width: 160px;
-  }
-}
-@media(min-width: 992px) {
-  div.card-overview {
-    margin-right: -60px;
-  }
-  div.card-overview div.card-container {
-    width: 195px;
-  }
-}
-@media(min-width: 1200px) {
-  div.card-overview div.card-container {
-    width: 210px;
-  }
-}
-
 div.leave {
   top: 10px;
   left: 5px;
@@ -87,12 +29,4 @@ div.delete-member:hover {
  */
 div.removal {
   margin-top: 150px;
-}
-
-/*
- * Plugin styles
- */
-div.issue-list {
-  max-height: 800px;
-  overflow-y: scroll;
 }