feat(tournaments): can now assign station numbers to tournament rounds

closes #60

src/jade/directives/station.jade

@@ -0,0 +1,9 @@
+script(type="text/ng-template", id="station")
+
+  .station.pointer.text-center.unentered(ng-click="edit()", ng-if="!editing && !editStuff.value", ng-class="{'clickable': canClick}")
+    ng-md-icon(size="16", icon="tv")
+
+  .station.text-center.entered(ng-click="edit()", ng-if="!editing && editStuff.value") {{editStuff.value}}
+
+  div(ng-if="editing")
+    input.station-input(ng-model="editStuff.value", ng-blur="unedit()", ng-keydown="watchKeyPresses($event)", maxlength="6")

src/jade/partials/tournaments/types/duel.jade

@@ -22,8 +22,11 @@ script(type="text/ng-template", id="tournament-duel")
 
         div(ng-if="noRender(match)", flex)
           div(ng-show="false") {{getIdForMatch(match)}}
+
         .match-data(ng-if="!noRender(match)", layout="row", layout-align="center center")
-          .round-type.subhead {{match.id.s}}-{{toCharacter(getIdForMatch(match))}}
+          .round-type(flex, layout="column")
+            .subhead(flex) {{getMatchIdString(match)}}
+            station(flex, value="ref.stations[getMatchStationIdString(match)]", can-click="{{hasAccess}}", on-unedit="save()")
 
           .match-name(layout="column")
             .member.padding-5(ng-repeat="p in match.p track by $index", class="member-{{$index}}", hover-highlight, hover-name="{{getName(match.p[$index]-1)}}") {{getName(match.p[$index]-1) || getString(match.id, $index) || '???'}}

src/jade/partials/tournaments/types/ffa.jade

@@ -20,8 +20,11 @@ script(type="text/ng-template", id="tournament-ffa")
 
         div(ng-if="noRender(match)", flex)
           div(ng-show="false") {{getIdForMatch(match)}}
+
         .match-data(ng-if="!noRender(match)", layout="row", layout-align="center center")
-          .round-type.subhead {{match.id.s}}-{{toCharacter(getIdForMatch(match))}}
+          .round-type(flex, layout="column")
+            .subhead(flex) {{getMatchIdString(match)}}
+            station(flex, value="ref.stations[getMatchStationIdString(match)]", can-click="{{hasAccess}}", on-unedit="save()")
 
           .match-name(layout="column")
             .member.padding-5(ng-repeat="p in match.p track by $index", class="member-{{$index}}", hover-highlight, hover-name="{{getName(match.p[$index]-1)}}") {{getName(match.p[$index]-1) || getString(match.id, $index) || '???'}}

src/jade/partials/tournaments/types/groupstage.jade

@@ -20,8 +20,11 @@ script(type="text/ng-template", id="tournament-groupstage")
 
         div(ng-if="noRender(match)", flex)
           div(ng-show="false") {{getIdForMatch(match)}}
+
         .match-data(ng-if="!noRender(match)", layout="row", layout-align="center center")
-          .round-type.subhead {{match.id.s}}-{{toCharacter(getIdForMatch(match))}}
+          .round-type(flex, layout="column")
+            .subhead(flex) {{getMatchIdString(match)}}
+            station(flex, value="ref.stations[getMatchStationIdString(match)]", can-click="{{hasAccess}}", on-unedit="save()")
 
           .match-name(layout="column")
             .member.padding-5(ng-repeat="p in match.p track by $index", class="member-{{$index}}", hover-highlight, hover-name="{{getName(match.p[$index]-1)}}") {{getName(match.p[$index]-1) || getString(match.id, $index) || '???'}}

src/jade/partials/tournaments/types/masters.jade

@@ -20,8 +20,11 @@ script(type="text/ng-template", id="tournament-masters")
 
         div(ng-if="noRender(match)", flex)
           div(ng-show="false") {{getIdForMatch(match)}}
+
         .match-data(ng-if="!noRender(match)", layout="row", layout-align="center center")
-          .round-type.subhead {{match.id.s}}-{{toCharacter(getIdForMatch(match))}}
+          .round-type(flex, layout="column")
+            .subhead(flex) {{getMatchIdString(match)}}
+            station(flex, value="ref.stations[getMatchStationIdString(match)]", can-click="{{hasAccess}}", on-unedit="save()")
 
           .match-name(layout="column")
             .member.padding-5(ng-repeat="p in match.p track by $index", class="member-{{$index}}", hover-highlight, hover-name="{{getName(match.p[$index]-1)}}") {{getName(match.p[$index]-1) || getString(match.id, $index) || '???'}}

src/js/_init.js

@@ -8,6 +8,7 @@ import './directives/score';
 import './directives/draw-to';
 import './directives/hover-highlight';
 import './directives/scroll-observe';
+import './directives/station';
 
 import './services/scoring';
 import './services/userStatus';

src/js/controllers/tournaments/inProgressCtrl.js

@@ -121,7 +121,6 @@ site.controller('inProgressController', ($scope, $timeout, EnsureLoggedIn, Sideb
     _.each(matchInfo, info => {
       _.each($scope.trn.matches, match => {
 
-
         if(isBad(match)) {
           return;
         }
@@ -229,6 +228,14 @@ site.controller('inProgressController', ($scope, $timeout, EnsureLoggedIn, Sideb
       $scope.save();
     };
 
+    $scope.getMatchIdString = (match) => {
+      return `${match.id.s}-${$scope.toCharacter($scope.getIdForMatch(match))}`;
+    };
+
+    $scope.getMatchStationIdString = (match) => {
+      return ''+match.id;
+    };
+
     $scope.save = () => {
       $scope.ref.trn = $scope.trn.state;
       $scope.ref.matches = $scope.trn.matches;

src/js/directives/station.js

@@ -0,0 +1,38 @@
+import site from '../app';
+
+site.directive('station', ($timeout) => {
+  return {
+    restrict: 'E',
+    templateUrl: 'station',
+    scope: {
+      value: '=',
+      canClick: '@',
+      onUnedit: '&'
+    },
+    link: (scope, element, attrs) => {
+      scope.editing = false;
+      scope.editStuff = { value: scope.value };
+
+      scope.edit = () => {
+        if(!attrs.canClick) return;
+        scope.editing = true;
+        $timeout(() => {
+          $(element).find('.station-input').focus();
+          $(element).find('.station-input').select();
+        }, 0);
+      };
+
+      scope.unedit = () => {
+        scope.editing = false;
+        scope.onUnedit();
+      };
+
+      scope.watchKeyPresses = (e) => {
+        if(e.which !== 13) return;
+        scope.unedit();
+      };
+
+      scope.$watch('editStuff.value', (newVal) => scope.value = newVal);
+    }
+  };
+});

src/scss/site.scss

@@ -34,6 +34,20 @@ $match-column-width: 130px;
   font-weight: 500;
 }
 
+station {
+  .station {
+    font-size: 13px;
+
+    &.unentered:not(.clickable) {
+      display: none;
+    }
+  }
+
+  input {
+    width: 100%;
+  }
+}
+
 .max-height {
   height: 100%;
 }