Add selection for team name

Author: g3force

refBoxState.go

@@ -88,7 +88,7 @@ func NewRefBoxState(config RefBoxConfig) (refBoxState *RefBoxState) {
 
 	refBoxState.TeamState = map[Team]*RefBoxTeamState{}
 	refBoxState.TeamState[TeamYellow] = new(RefBoxTeamState)
-	refBoxState.TeamState[TeamYellow].Name = "Yellow"
+	refBoxState.TeamState[TeamYellow].Name = ""
 	refBoxState.TeamState[TeamYellow].Goals = 0
 	refBoxState.TeamState[TeamYellow].Goalie = 0
 	refBoxState.TeamState[TeamYellow].YellowCards = 0
@@ -99,7 +99,7 @@ func NewRefBoxState(config RefBoxConfig) (refBoxState *RefBoxState) {
 	refBoxState.TeamState[TeamYellow].OnPositiveHalf = true
 
 	refBoxState.TeamState[TeamBlue] = new(RefBoxTeamState)
-	refBoxState.TeamState[TeamBlue].Name = "Blue"
+	refBoxState.TeamState[TeamBlue].Name = ""
 	refBoxState.TeamState[TeamBlue].Goals = 0
 	refBoxState.TeamState[TeamBlue].Goalie = 0
 	refBoxState.TeamState[TeamBlue].YellowCards = 0

ui/src/components/common/EditableLabelSelect.vue

@@ -0,0 +1,51 @@
+<template>
+    <div>
+        <label v-show="edit === false"
+               @dblclick="switchToEdit">
+            {{label}} {{value}}
+        </label>
+        <label v-show="edit === true">
+            {{label}}
+        </label>
+        <b-form-select v-show="edit === true"
+                       id="edit-input"
+                       v-model="editValue"
+                       :options="options"
+                       class="mb-3"></b-form-select>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "EditableLabelSelect",
+        props: {
+            label: String,
+            value: String,
+            options: Array,
+            callback: Function
+        },
+        data: function () {
+            return {edit: false, editValue: ""}
+        },
+        methods: {
+            updateValue: function () {
+                this.g.edit = false;
+                this.callback(this.g.value)
+            },
+            switchToEdit: function () {
+                this.edit = true;
+                this.editValue = this.value;
+            }
+        },
+        watch: {
+            editValue: function (newTeamName) {
+                this.edit = false;
+                this.callback(this.editValue)
+            }
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>

ui/src/components/team/TeamName.vue

@@ -0,0 +1,73 @@
+<template>
+    <div>
+        <EditableLabelSelect
+                label="Name: "
+                :value="team.name"
+                :options="teams"
+                :callback="updateTeamName"
+        />
+    </div>
+
+</template>
+
+<script>
+    import EditableLabelSelect from "../common/EditableLabelSelect";
+
+    export const TEAMS = [
+        "",
+        "AIS",
+        "AMC",
+        "CMμs",
+        "ER-Force",
+        "Immortals",
+        "KIKS",
+        "MCT Susano Logics",
+        "MRL",
+        "NEUIslanders",
+        "OMID",
+        "Parsian",
+        "RoboDragons",
+        "RoboFEI",
+        "RoboIME",
+        "RoboJackets",
+        "RoboTeam Twente",
+        "SRC",
+        "SSH",
+        "STOx’s",
+        "TIGERs Mannheim",
+        "ULtron",
+        "UMass Minutebots",
+        "UBC Thunderbots",
+        "ZJUNlict"];
+
+    export default {
+        name: "TeamName",
+        components: {EditableLabelSelect},
+        props: {
+            teamColor: String
+        },
+        computed: {
+            team: function () {
+                return this.$store.state.refBoxState.teamState[this.teamColor]
+            },
+            teams: function () {
+                return TEAMS
+            }
+        },
+        methods: {
+            updateTeamName: function (v) {
+                this.$socket.sendObj({
+                    'modify': {
+                        'forTeam': this.teamColor,
+                        'modifyType': 'teamName',
+                        'valueStr': v
+                    }
+                })
+            }
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>

ui/src/components/team/TeamOverview.vue

@@ -1,10 +1,8 @@
 <template>
     <div class="team-overview">
         <h2> Team {{teamColor}}</h2>
-        <EditableLabelText
-                label="Name: "
-                :value="team.name"
-                :callback="updateTeamName"/>
+        <TeamName
+                :team-color="teamColor"/>
         <TeamScore
                 :team-color="teamColor"
                 :score="team.goals"
@@ -37,28 +35,18 @@
     import TeamCards from "./TeamCards";
     import EditableLabelText from "../common/EditableLabelText";
     import TeamHalf from "./TeamHalf";
+    import TeamName from "./TeamName";
 
     export default {
         name: "TeamOverview",
-        components: {TeamHalf, EditableLabelText, TeamGoalie, TeamTimeouts, TeamScore, TeamCards},
+        components: {TeamName, TeamHalf, EditableLabelText, TeamGoalie, TeamTimeouts, TeamScore, TeamCards},
         props: {
             teamColor: String
         },
         computed: {
             team: function () {
                 return this.$store.state.refBoxState.teamState[this.teamColor]
             },
-        },
-        methods: {
-            updateTeamName: function (v) {
-                this.$socket.sendObj({
-                    'modify': {
-                        'forTeam': this.teamColor,
-                        'modifyType': 'teamName',
-                        'valueStr': v
-                    }
-                })
-            }
         }
     }
 </script>