From efa28aa7f58a424822a315175b3e43e3e2d150e5 Mon Sep 17 00:00:00 2001 From: Toxantron Date: Fri, 21 Jun 2019 15:05:10 +0200 Subject: [PATCH] Master component implementation --- src/app/app-routing.module.ts | 4 +- src/app/card.ts | 13 ++++ src/app/master/master.component.css | 64 +++++++++++++++++ src/app/master/master.component.html | 100 ++++++++++++++++++++++++++- src/app/master/master.component.ts | 41 ++++++++++- src/css/scrumonline.css | 66 ------------------ 6 files changed, 217 insertions(+), 71 deletions(-) diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index ff5ded0..c48acc3 100644 --- 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 index beeb61a..f364d44 100644 --- 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(); + } } \ No newline at end of file diff --git a/src/app/master/master.component.css b/src/app/master/master.component.css index e69de29..61947ce 100644 --- 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; +} \ No newline at end of file diff --git a/src/app/master/master.component.html b/src/app/master/master.component.html index 4d91ec1..de7ee79 100644 --- a/src/app/master/master.component.html +++ b/src/app/master/master.component.html @@ -1,3 +1,97 @@ -

- master works! -

+ +
+
+ +
+
+

{{ session.id }} - {{ session.name }}

+
+ +
+ + + + + +
+
+
+ +
+
+
+ + +
+ + + +
+

Team

+
    + +
  • {{ i + 1 }}. {{ vote.name }}
    • +
+ +
+ + +
+
+
Statistics
+
+ + + + + + + + + + + + + + + + + + + + +
EnabledNameValue
+ + {{ statistic.name }} + +
+ + Want more? + +
+ +

Statistics will appear as soon as the first poll is concluded!

+ +
+
+
+
diff --git a/src/app/master/master.component.ts b/src/app/master/master.component.ts index 4b5a81d..593e142 100644 --- 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 index d9ad080..62feb77 100644 --- 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; } \ No newline at end of file