configurable deck; edit/delete participant

Author: yarosla

README.md

@@ -3,7 +3,7 @@
 Open source implementation of planning poker game.
 
 - The game has three roles: admin, players, observers.
-- Cards: 0, 0.5, 1, 2, 3, 5, 10, 20 (gonna make it configurable)
+- Cards: 0, 0.5, 1, 2, 3, 5, 10, 20, ? (configurable via `config.json`)
 - Self-contained, can be run in closed intranet environments.
 
 The project is built on Angular 5. It uses [http-shared-storage](https://github.com/yarosla/httpstorage) 
@@ -19,12 +19,10 @@ backend to store session data.
 
 3. Point your browser to `http://localhost:8080/index.html`
 
-Technologies
-------------
+## Technologies
 
 - Angular 5
 
-Author
-------
+## Author
 
 Yaroslav Stavnichiy <yarosla@gmail.com>

package-lock.json

@@ -13,34 +13,34 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^5.0.0",
-    "@angular/common": "^5.0.0",
-    "@angular/compiler": "^5.0.0",
-    "@angular/core": "^5.0.0",
-    "@angular/forms": "^5.0.0",
-    "@angular/http": "^5.0.0",
-    "@angular/platform-browser": "^5.0.0",
-    "@angular/platform-browser-dynamic": "^5.0.0",
-    "@angular/router": "^5.0.0",
+    "@angular/animations": "^5.2.3",
+    "@angular/common": "^5.2.3",
+    "@angular/compiler": "^5.2.3",
+    "@angular/core": "^5.2.3",
+    "@angular/forms": "^5.2.3",
+    "@angular/http": "^5.2.3",
+    "@angular/platform-browser": "^5.2.3",
+    "@angular/platform-browser-dynamic": "^5.2.3",
+    "@angular/router": "^5.2.3",
     "core-js": "^2.4.1",
     "rxjs": "^5.5.2",
-    "ts-mockito": "^2.2.7",
-    "zone.js": "^0.8.14"
+    "ts-mockito": "^2.2.9",
+    "zone.js": "^0.8.20"
   },
   "devDependencies": {
     "@angular/cli": "1.6.3",
-    "@angular/compiler-cli": "^5.0.0",
-    "@angular/language-service": "^5.0.0",
+    "@angular/compiler-cli": "^5.2.3",
+    "@angular/language-service": "^5.2.3",
     "@types/jasmine": "~2.5.53",
     "@types/jasminewd2": "~2.0.2",
-    "@types/node": "~6.0.60",
-    "codelyzer": "^4.0.1",
+    "@types/node": "^6.0.96",
+    "codelyzer": "^4.1.0",
     "jasmine-core": "~2.6.2",
     "jasmine-spec-reporter": "~4.1.0",
     "karma": "~1.7.0",
     "karma-chrome-launcher": "~2.1.1",
     "karma-cli": "~1.0.1",
-    "karma-coverage-istanbul-reporter": "^1.2.1",
+    "karma-coverage-istanbul-reporter": "^1.4.1",
     "karma-jasmine": "~1.1.0",
     "karma-jasmine-html-reporter": "^0.2.2",
     "protractor": "~5.1.2",

package.json

@@ -6,6 +6,7 @@ import { Observable } from 'rxjs/Observable';
 export class Config {
   httpStoreUrl: string;
   pollTimeout: number | string;
+  deck?: string[]
 }
 
 @Injectable()

src/app/config.service.ts

@@ -59,6 +59,20 @@ tr.voting td {
   color: white;
 }
 
+th button {
+  font-size: 70%;
+  padding: 3px 4px 2px;
+  background-color: #888;
+  color: #fff;
+  border: none;
+  cursor: pointer;
+}
+
+th button:hover, .story button:focus {
+  background-color: #aaa;
+  color: white;
+}
+
 .score {
   text-align: center;
   width: 80px;

src/app/game/game.component.css

@@ -1,15 +1,19 @@
 <div *ngIf="session">
   <h1>{{currentParticipant?.name || (isAdmin?'Admin':'Observer')}} @ {{session.name}}
     <a routerLink="/join/{{sessionId}}" title="Invite more people to join"><i class="ti-share"></i></a></h1>
-  <app-voting-pad *ngIf="votingStory && !isAdmin && !isObserver" [story]="votingStory"
+  <app-voting-pad *ngIf="votingStory && currentParticipant" [story]="votingStory"
                   [confirmedVote]="votingStory.votes[currentParticipant.id]"
+                  [deck]="deck"
                   (vote)="httpStorage.vote($event)"></app-voting-pad>
   <table>
     <tr>
       <th class="story">Story</th>
       <th *ngFor="let participant of participants" class="score"
           [class.current]="participant.id===currentParticipant?.id">
-        <a *ngIf="isAdmin" routerLink="/play/{{sessionId}}/{{participant.id}}">{{participant.name}}</a>
+        <span *ngIf="isAdmin"><a routerLink="/play/{{sessionId}}/{{participant.id}}">{{participant.name}}</a><br>
+          <button type="button" title="Edit participant"
+                  (click)="editParticipant(participant.id)"><i class="ti-pencil"></i></button>
+        </span>
         <span *ngIf="!isAdmin">{{participant.name}}</span>
       </th>
     </tr>
@@ -39,7 +43,14 @@ <h1>{{currentParticipant?.name || (isAdmin?'Admin':'Observer')}} @ {{session.nam
     </tr>
   </table>
 
-  <form *ngIf="editing">
+  <form *ngIf="editingParticipant">
+    <input type="text" name="name" [(ngModel)]="editingParticipantName" placeholder="Participant name...">
+    <button type="submit" (click)="saveParticipantEdit()">Save</button>
+    <button type="button" (click)="cancelParticipantEdit()">Cancel</button>
+    <button type="button" (click)="deleteEditingParticipant()">Delete</button>
+  </form>
+
+  <form *ngIf="editingStory">
     <input type="text" name="name" [(ngModel)]="editingStoryName" placeholder="Story name...">
     <button type="submit" (click)="saveStoryEdit()">Save</button>
     <button type="button" (click)="cancelStoryEdit()">Cancel</button>