Make fouls editable in UI as well

Author: g3force

src/components/common/EditableLabelText.vue

@@ -54,20 +54,23 @@
                     this.$refs.input.focus();
                 })
             },
+        },
+        computed: {
             inputId() {
                 if (this.id) {
                     return this.id;
                 }
                 return 'edit-input';
-            }
-        },
+            },
+        }
     }
 </script>
 
 <style scoped>
     input {
         text-align: center;
     }
+
     label {
         margin-bottom: 0;
     }

src/components/team/TeamFoulCounter.vue renamed to src/components/team/TeamFouls.vue

@@ -1,14 +1,14 @@
 <template>
-    <div>
+    <span>
         <a>{{teamState.fouls.length}}</a>
-    </div>
+    </span>
 </template>
 
 <script>
     import EditableLabelNumber from "../common/EditableLabelNumber";
 
     export default {
-        name: "TeamFoulCounter",
+        name: "TeamFouls",
         components: {EditableLabelNumber},
         props: {
             teamColor: String,

src/components/team/TeamFoulsEdit.vue

@@ -0,0 +1,47 @@
+<template>
+        <span class="edit-link">
+            <a v-b-modal="modalId" v-if="editMode.active">
+                <img alt="pen" src="@/assets/img/icons8-ball-point-pen-16.png">
+            </a>
+            <b-modal :id="modalId"
+                     :title="'Fouls for team ' + teamColor"
+                     :lazy="true">
+                <TeamFoulsEditTable :edit-mode="{active: true}" :team-color="teamColor"/>
+                <div slot="modal-footer">
+                    <!-- hide modal buttons -->
+                </div>
+            </b-modal>
+        </span>
+</template>
+
+<script>
+    import {TEAM_BLUE, TEAM_YELLOW} from "../../refereeState";
+    import EditableLabelDuration from "../common/EditableLabelDuration";
+    import TeamFoulsEditTable from "./TeamFoulsEditTable";
+
+    export default {
+        name: "TeamFoulsEdit",
+        components: {TeamFoulsEditTable, EditableLabelDuration},
+        props: {
+            teamColor: String,
+            editMode: Object,
+        },
+        data() {
+            return {
+                TEAM_YELLOW: TEAM_YELLOW,
+                TEAM_BLUE: TEAM_BLUE
+            }
+        },
+        computed: {
+            modalId() {
+                return `fouls-${this.teamColor}-modal`;
+            },
+        }
+    }
+</script>
+
+<style scoped>
+    .edit-link {
+        margin-left: 0.3em;
+    }
+</style>

src/components/team/TeamFoulsEditTable.vue

@@ -0,0 +1,64 @@
+<template>
+    <div>
+        <table>
+            <tr>
+                <th>Id</th>
+                <th>Cause</th>
+                <th>Remove</th>
+            </tr>
+            <tr v-for="foul of team.fouls" v-bind:key="foul.id">
+                <td>
+                    {{foul.id}}
+                </td>
+                <td>
+                    <span v-if="foul.causedByGameEvent">
+                        {{foul.causedByGameEvent.type}}
+                    </span>
+                    <span v-else>
+                        -
+                    </span>
+                </td>
+                <td>
+                    <a class="btn-remove" v-on:click="removeFoul(foul.id)">
+                        <font-awesome-icon
+                                class="fa-xs"
+                                icon="times-circle"/>
+                    </a>
+                </td>
+            </tr>
+        </table>
+    </div>
+</template>
+
+<script>
+    import {submitChange} from "../../submit";
+
+    export default {
+        name: "TeamFoulsEditTable",
+        props: {
+            teamColor: String,
+            editMode: Object,
+        },
+        methods: {
+            removeFoul(id) {
+                submitChange({
+                    updateTeamState: {
+                        forTeam: this.teamColor,
+                        removeFoul: id
+                    }
+                });
+            }
+        },
+        computed: {
+            team() {
+                return this.$store.state.matchState.teamState[this.teamColor]
+            }
+        }
+    }
+</script>
+
+<style scoped>
+    table {
+        width: 100%;
+    }
+</style>

src/components/team/TeamOverviewView.vue

@@ -81,11 +81,13 @@
             </tr>
             <tr>
                 <td>
-                    <TeamFoulCounter :team-color="TEAM_YELLOW"/>
+                    <TeamFouls :team-color="TEAM_YELLOW"/>
+                    <TeamFoulsEdit :edit-mode="editMode" :team-color="TEAM_YELLOW"/>
                 </td>
                 <td class="label-column">Fouls</td>
                 <td>
-                    <TeamFoulCounter :team-color="TEAM_BLUE"/>
+                    <TeamFouls :team-color="TEAM_BLUE"/>
+                    <TeamFoulsEdit :edit-mode="editMode" :team-color="TEAM_BLUE"/>
                 </td>
             </tr>
             <tr>
@@ -131,23 +133,25 @@
     import TeamRedCards from "./TeamRedCards";
     import TeamBotSubstitution from "./TeamBotSubstitution";
     import TeamConnection from "./TeamConnection";
-    import TeamFoulCounter from "./TeamFoulCounter";
+    import TeamFouls from "./TeamFouls";
     import TeamPlacementFailures from "./TeamPlacementFailures";
     import TeamTimeoutTime from "./TeamTimeoutTime";
     import TeamYellowCardNextDue from "./TeamYellowCardNextDue";
     import TeamYellowCardsActive from "./TeamYellowCardsActive";
     import {TEAM_BLUE, TEAM_YELLOW} from "../../refereeState";
     import TeamYellowCardsEdit from "./TeamYellowCardsEdit";
     import TeamRedCardsEdit from "./TeamRedCardsEdit";
+    import TeamFoulsEdit from "./TeamFoulsEdit";
 
     export default {
         name: "TeamOverviewView",
         components: {
+            TeamFoulsEdit,
             TeamRedCardsEdit,
             TeamYellowCardsActive,
             TeamTimeoutTime,
             TeamPlacementFailures,
-            TeamFoulCounter,
+            TeamFouls,
             TeamConnection,
             TeamBotSubstitution,
             TeamRedCards,

src/components/team/TeamYellowCardsEditTable.vue

@@ -13,6 +13,7 @@
                 </td>
                 <td>
                     <EditableLabelText
+                            :id="'yellow-card-' + card.id"
                             :edit-mode="editMode"
                             :value="card.timeRemaining"
                             :callback="(v) => updateCardTime(v, card.id)"/>