feature: Add emergency stop switch to UI

Author: g3force

src/components/team/TeamEmergencyStop.vue

@@ -0,0 +1,44 @@
+<template>
+    <div>
+        <a class="btn-edit toggle-button" v-on:click="edit()">
+            <font-awesome-icon icon="toggle-on" v-if="requestsEmergencyStop"/>
+            <font-awesome-icon icon="toggle-off" v-if="!requestsEmergencyStop"/>
+        </a>
+    </div>
+</template>
+
+<script>
+    import {submitChange} from "../../submit";
+
+    export default {
+        name: "TeamEmergencyStop",
+        props: {
+            teamColor: String,
+        },
+        methods: {
+            edit: function () {
+                submitChange({
+                    updateTeamState: {
+                        forTeam: this.teamColor,
+                        requestsEmergencyStop: !this.requestsEmergencyStop
+                    }
+                });
+            }
+        },
+        computed: {
+            teamState: function () {
+                return this.$store.state.matchState.teamState[this.teamColor]
+            },
+            requestsEmergencyStop() {
+                return this.teamState.requestsEmergencyStopSince !== null;
+            },
+        }
+    }
+</script>
+
+<style scoped>
+    .toggle-button {
+        font-size: 14pt;
+        padding:15px;
+    }
+</style>

src/components/team/TeamOverviewView.vue

@@ -131,6 +131,15 @@
                     <TeamChallengeFlags :edit-mode="editMode" :team-color="TEAM_BLUE"/>
                 </td>
             </tr>
+            <tr>
+                <td>
+                    <TeamEmergencyStop :edit-mode="editMode" :team-color="TEAM_YELLOW"/>
+                </td>
+                <td class="label-column">Emergency Stop</td>
+                <td>
+                    <TeamEmergencyStop :edit-mode="editMode" :team-color="TEAM_BLUE"/>
+                </td>
+            </tr>
             <tr>
                 <td>
                     <TeamConnection :team-color="TEAM_YELLOW"/>
@@ -172,10 +181,12 @@
     import TeamRemoteControlConnection from "./TeamRemoteControlConnection";
     import TeamTimeoutRequest from "./TeamTimeoutRequest";
     import TeamChallengeFlags from "./TeamChallengeFlags";
+    import TeamEmergencyStop from "./TeamEmergencyStop";
 
     export default {
         name: "TeamOverviewView",
         components: {
+            TeamEmergencyStop,
             TeamChallengeFlags,
             TeamTimeoutRequest,
             TeamRemoteControlConnection,