[ui] Disable more buttons when they are not allowed

RoboCup-SSL · Aug 6, 2018 · d793cf8 · d793cf8
1 parent 8d57067
commit d793cf8
Show file tree

Hide file tree

Showing 4 changed files with 100 additions and 16 deletions.
diff --git a/ui/src/components/control/ControlGeneral.vue b/ui/src/components/control/ControlGeneral.vue
@@ -1,13 +1,31 @@
 <template>
     <span class="control-general">
-        <b-button v-hotkey="keymapHalt" v-on:click="send('halt')">Halt</b-button>
-        <b-button v-hotkey="keymapStop" v-on:click="send('stop')">Stop</b-button>
-        <b-button v-hotkey="keymapForceStart" v-on:click="send('forceStart')">Force Start</b-button>
-        <b-button v-hotkey="keymapNormalStart" v-on:click="send('normalStart')">Normal Start</b-button>
+        <b-button v-hotkey="keymapHalt"
+                  v-on:click="send('halt')"
+                  v-bind:disabled="halted">
+            Halt
+        </b-button>
+        <b-button v-hotkey="keymapStop"
+                  v-on:click="send('stop')"
+                  v-bind:disabled="stopped || !inNormalHalf">
+            Stop
+        </b-button>
+        <b-button v-hotkey="keymapForceStart"
+                  v-on:click="send('forceStart')"
+                  v-bind:disabled="!stopped || !inNormalHalf">
+            Force Start
+        </b-button>
+        <b-button v-hotkey="keymapNormalStart"
+                  v-on:click="send('normalStart')"
+                  v-bind:disabled="!prepareSth || !inNormalHalf">
+            Normal Start
+        </b-button>
     </span>
 </template>
 
 <script>
+    import {isInNormalHalf} from "../../main";
+
     export default {
         name: "ControlGeneral",
         methods: {
@@ -28,6 +46,21 @@
             keymapNormalStart() {
                 return {'numpad +': () => this.send('normalStart')}
             },
+            state() {
+                return this.$store.state.refBoxState
+            },
+            halted() {
+                return this.state.gameState === 'Halted';
+            },
+            stopped() {
+                return this.state.gameState === 'Stopped';
+            },
+            prepareSth() {
+                return this.state.gameState.startsWith('Prepare');
+            },
+            inNormalHalf() {
+                return isInNormalHalf(this.state);
+            },
         }
     }
 </script>

diff --git a/ui/src/components/control/ControlTeam.vue b/ui/src/components/control/ControlTeam.vue
@@ -1,20 +1,43 @@
 <template>
     <div class="control-team">
         <h2>Team {{teamColor}}</h2>
-        <b-button v-hotkey="keymapKickoff" v-on:click="send('kickoff')">Kickoff</b-button>
-        <b-button v-hotkey="keymapDirect" v-on:click="send('direct')">Direct</b-button>
-        <b-button v-hotkey="keymapIndirect" v-on:click="send('indirect')">Indirect</b-button>
-        <b-button v-on:click="send('penalty')">Penalty</b-button>
+        <b-button v-hotkey="keymapKickoff"
+                  v-on:click="send('kickoff')"
+                  v-bind:disabled="halted || running || preparing">
+            Kickoff
+        </b-button>
+        <b-button v-hotkey="keymapDirect"
+                  v-on:click="send('direct')"
+                  v-bind:disabled="halted || running || preparing">
+            Direct
+        </b-button>
+        <b-button v-hotkey="keymapIndirect"
+                  v-on:click="send('indirect')"
+                  v-bind:disabled="halted || running || preparing">
+            Indirect
+        </b-button>
+        <b-button v-on:click="send('penalty')"
+                  v-bind:disabled="halted || running || preparing">
+            Penalty
+        </b-button>
 
         <br/>
 
         <ControlTeamTimeout :team-color="teamColor"/>
-        <b-button v-on:click="send('goal')">Goal</b-button>
-        <b-button v-on:click="addYellowCard" v-hotkey="keymapYellowCard">Yellow Card</b-button>
+        <b-button v-on:click="send('goal')">
+            Goal
+        </b-button>
+        <b-button v-on:click="addYellowCard"
+                  v-hotkey="keymapYellowCard">
+            Yellow Card
+        </b-button>
 
         <br/>
 
-        <b-button v-on:click="revokeYellowCard" v-if="teamState.yellowCardTimes.length>0">Revoke Yellow Card</b-button>
+        <b-button v-on:click="revokeYellowCard"
+                  v-bind:disabled="teamState.yellowCardTimes.length===0">
+            Revoke Yellow Card
+        </b-button>
     </div>
 </template>
 
@@ -72,7 +95,19 @@
                     case 'Blue':
                         return {'numpad 6': this.addYellowCard};
                 }
-            }
+            },
+            state() {
+                return this.$store.state.refBoxState
+            },
+            halted() {
+                return this.state.gameState === 'Halted';
+            },
+            running() {
+                return this.state.gameState === 'Running';
+            },
+            preparing() {
+                return this.state.gameState.startsWith('Prepare');
+            },
         }
     }
 </script>

diff --git a/ui/src/components/control/ControlTeamTimeout.vue b/ui/src/components/control/ControlTeamTimeout.vue
@@ -1,11 +1,20 @@
 <template>
     <span>
-        <b-button v-show="!timeoutRunning" v-on:click="startTimeout">Start Timeout</b-button>
-        <b-button v-show="timeoutRunning" v-on:click="stopTimeout">Stop Timeout</b-button>
+        <b-button v-show="!timeoutRunning"
+                  v-on:click="startTimeout"
+                  v-bind:disabled="!inNormalHalf">
+            Start Timeout
+        </b-button>
+        <b-button v-show="timeoutRunning"
+                  v-on:click="stopTimeout">
+            Stop Timeout
+        </b-button>
     </span>
 </template>
 
 <script>
+    import {isInNormalHalf} from "../../main";
+
     export default {
         name: "ControlTeamTimeout",
         props: {
@@ -17,15 +26,18 @@
             },
             timeoutRunning: function () {
                 return this.gameState === "Timeout" && this.$store.state.refBoxState.gameStateForTeam === this.teamColor
-            }
+            },
+            inNormalHalf() {
+                return isInNormalHalf(this.$store.state.refBoxState);
+            },
         },
         methods: {
             startTimeout: function () {
                 this.$socket.sendObj({'command': {'commandType': 'timeout', 'forTeam': this.teamColor}})
             },
             stopTimeout: function () {
                 this.$socket.sendObj({'command': {'commandType': 'stop'}})
-            }
+            },
         }
     }
 </script>

diff --git a/ui/src/main.js b/ui/src/main.js
@@ -37,6 +37,10 @@ export class RefBoxState {
     teamState = {'Yellow': new TeamState(), 'Blue': new TeamState()};
 }
 
+export let isInNormalHalf = function (state) {
+    return state.stage === 'First Half';
+};
+
 Vue.use(TimestampFormatter);
 
 // use Vuex for state management with the Vuex.Store