Skip to content

Commit 7a28c19

Browse files
g3forceg3force
committed
Make cards editable in UI
1 parent c8c3fec commit 7a28c19

15 files changed

+355
-127
lines changed

‎internal/app/statemachine/change_teamstate.go

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -100,6 +100,8 @@ func (s *StateMachine) processChangeUpdateTeamState(newState *state.State, chang
100100
}
101101
}
102102

103+
s.updateMaxBots(newState)
104+
103105
return
104106
}
105107

‎src/components/common/EditableLabelDuration.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
size="5"
1111
ref="input"
1212
/>
13-
<a class="btn-edit" v-on:click="edit()" v-show="editMode.active && !g.edit">
13+
<a class="btn-edit" v-on:click="edit" v-show="editMode.active && !g.edit">
1414
<img alt="pen" src="@/assets/img/icons8-ball-point-pen-16.png">
1515
</a>
1616
</span>

‎src/components/common/EditableLabelNumber.vue

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,4 +65,7 @@
6565
input {
6666
text-align: center;
6767
}
68+
label {
69+
margin-bottom: 0;
70+
}
6871
</style>

‎src/components/common/EditableLabelText.vue

Lines changed: 29 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,24 @@
11
<template>
2-
<span>
3-
<label v-show="g.edit === false"
4-
for="edit-input">
2+
<span class="editable-label">
3+
<label v-show="!g.edit"
4+
:for="inputId">
55
{{label}} {{value}}
66
</label>
7-
<label v-show="g.edit === true"
8-
for="edit-input">
7+
<label v-show="g.edit"
8+
:for="inputId">
99
{{label}}
1010
</label>
11-
<input v-show="g.edit === true"
11+
<input v-show="g.edit"
1212
v-model="g.value"
13+
v-on:focus="g.focused = true"
1314
v-on:blur="updateValue"
1415
@keyup.enter="updateValue"
15-
id="edit-input"
16+
:title="title"
17+
:id="inputId"
1618
size="10"
1719
ref="input"
1820
/>
19-
<a class="btn-edit" v-on:click="edit()" v-show="editMode.active && !g.edit">
21+
<a class="btn-edit" v-on:click="edit" v-show="editMode.active && !g.edit">
2022
<img alt="pen" src="@/assets/img/icons8-ball-point-pen-16.png">
2123
</a>
2224
</span>
@@ -26,32 +28,47 @@
2628
export default {
2729
name: "EditableLabelText",
2830
props: {
31+
id: String,
2932
label: String,
33+
title: String,
3034
value: String,
3135
callback: Function,
3236
editMode: Object,
3337
},
3438
data: function () {
35-
return {g: {edit: false, value: ""}}
39+
return {g: {edit: false, value: "", focused: false}}
3640
},
3741
methods: {
3842
updateValue: function () {
39-
if (this.g.edit) {
43+
if (this.g.edit && this.g.focused) {
4044
this.g.edit = false;
4145
this.callback(this.g.value)
4246
}
47+
// remembering the focus is necessary for Firefox, as it fires the onblur too early
48+
this.g.focused = false;
4349
},
4450
edit: function () {
4551
this.g.edit = true;
4652
this.g.value = this.value;
47-
this.$nextTick(() => this.$refs.input.focus())
53+
this.$nextTick(() => {
54+
this.$refs.input.focus();
55+
})
56+
},
57+
inputId() {
58+
if (this.id) {
59+
return this.id;
60+
}
61+
return 'edit-input';
4862
}
49-
}
63+
},
5064
}
5165
</script>
5266

5367
<style scoped>
5468
input {
5569
text-align: center;
5670
}
71+
label {
72+
margin-bottom: 0;
73+
}
5774
</style>

‎src/components/team/TeamFoulCounter.vue

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,6 @@
1212
components: {EditableLabelNumber},
1313
props: {
1414
teamColor: String,
15-
editMode: Object,
1615
},
1716
computed: {
1817
teamState: function () {

‎src/components/team/TeamOverviewView.vue

Lines changed: 39 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -27,47 +27,65 @@
2727
<tr>
2828
<td>
2929
<TeamTimeouts :edit-mode="editMode" :team-color="TEAM_YELLOW"/>
30-
|
30+
<br/>
3131
<TeamTimeoutTime :edit-mode="editMode" :team-color="TEAM_YELLOW"/>
3232
</td>
3333
<td class="label-column">Timeouts left</td>
3434
<td>
3535
<TeamTimeouts :edit-mode="editMode" :team-color="TEAM_BLUE"/>
36-
|
36+
<br/>
3737
<TeamTimeoutTime :edit-mode="editMode" :team-color="TEAM_BLUE"/>
3838
</td>
3939
</tr>
4040
<tr>
4141
<td>
42-
<TeamYellowCards :edit-mode="editMode" :team-color="TEAM_YELLOW"/>
43-
|
44-
<TeamRedCards :edit-mode="editMode" :team-color="TEAM_YELLOW"/>
42+
<TeamRedCards :team-color="TEAM_YELLOW"/>
43+
<TeamRedCardsEdit :edit-mode="editMode" :team-color="TEAM_YELLOW"/>
4544
</td>
46-
<td class="label-column">Yellow / Red Cards</td>
45+
<td class="label-column">Red Cards</td>
4746
<td>
48-
<TeamYellowCards :edit-mode="editMode" :team-color="TEAM_BLUE"/>
49-
|
50-
<TeamRedCards :edit-mode="editMode" :team-color="TEAM_BLUE"/>
47+
<TeamRedCards :team-color="TEAM_BLUE"/>
48+
<TeamRedCardsEdit :edit-mode="editMode" :team-color="TEAM_BLUE"/>
5149
</td>
5250
</tr>
5351
<tr>
5452
<td>
55-
<TeamYellowCardsActive :edit-mode="editMode" :team-color="TEAM_YELLOW"/>
53+
<TeamYellowCards :team-color="TEAM_YELLOW"/>
54+
<TeamYellowCardsEdit :edit-mode="editMode" :team-color="TEAM_YELLOW"/>
55+
</td>
56+
<td class="label-column">Yellow Cards</td>
57+
<td>
58+
<TeamYellowCards :team-color="TEAM_BLUE"/>
59+
<TeamYellowCardsEdit :edit-mode="editMode" :team-color="TEAM_BLUE"/>
60+
</td>
61+
</tr>
62+
<tr>
63+
<td>
64+
<TeamYellowCardsActive :team-color="TEAM_YELLOW"/>
65+
</td>
66+
<td class="label-column">Active Cards</td>
67+
<td>
68+
<TeamYellowCardsActive :team-color="TEAM_BLUE"/>
69+
</td>
70+
</tr>
71+
<tr>
72+
<td>
73+
<TeamYellowCardNextDue :team-color="TEAM_YELLOW"/>
5674
</td>
5775
<td class="label-column">
58-
Active Yellow Cards
76+
Next due
5977
</td>
6078
<td>
61-
<TeamYellowCardsActive :edit-mode="editMode" :team-color="TEAM_BLUE"/>
79+
<TeamYellowCardNextDue :team-color="TEAM_BLUE"/>
6280
</td>
6381
</tr>
6482
<tr>
6583
<td>
66-
<TeamFoulCounter :edit-mode="editMode" :team-color="TEAM_YELLOW"/>
84+
<TeamFoulCounter :team-color="TEAM_YELLOW"/>
6785
</td>
68-
<td class="label-column">Foul Counter</td>
86+
<td class="label-column">Fouls</td>
6987
<td>
70-
<TeamFoulCounter :edit-mode="editMode" :team-color="TEAM_BLUE"/>
88+
<TeamFoulCounter :team-color="TEAM_BLUE"/>
7189
</td>
7290
</tr>
7391
<tr>
@@ -116,15 +134,17 @@
116134
import TeamFoulCounter from "./TeamFoulCounter";
117135
import TeamPlacementFailures from "./TeamPlacementFailures";
118136
import TeamTimeoutTime from "./TeamTimeoutTime";
119-
import TeamYellowCardTimes from "./TeamYellowCardTimes";
137+
import TeamYellowCardNextDue from "./TeamYellowCardNextDue";
120138
import TeamYellowCardsActive from "./TeamYellowCardsActive";
121139
import {TEAM_BLUE, TEAM_YELLOW} from "../../refereeState";
140+
import TeamYellowCardsEdit from "./TeamYellowCardsEdit";
141+
import TeamRedCardsEdit from "./TeamRedCardsEdit";
122142
123143
export default {
124144
name: "TeamOverviewView",
125145
components: {
146+
TeamRedCardsEdit,
126147
TeamYellowCardsActive,
127-
TeamYellowCardTimes,
128148
TeamTimeoutTime,
129149
TeamPlacementFailures,
130150
TeamFoulCounter,
@@ -134,6 +154,8 @@
134154
TeamYellowCards,
135155
TeamGoalkeeper,
136156
TeamTimeouts,
157+
TeamYellowCardNextDue,
158+
TeamYellowCardsEdit,
137159
},
138160
data() {
139161
return {

‎src/components/team/TeamRedCards.vue

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@
1313
components: {EditableLabelDuration, EditableLabelNumber},
1414
props: {
1515
teamColor: String,
16-
editMode: Object,
1716
},
1817
computed: {
1918
team() {

‎src/components/team/TeamRedCardsEdit.vue

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<template>
2+
<span class="edit-link">
3+
<a v-b-modal="modalId" v-if="editMode.active">
4+
<img alt="pen" src="@/assets/img/icons8-ball-point-pen-16.png">
5+
</a>
6+
<b-modal :id="modalId"
7+
:title="'Red Cards for team ' + teamColor"
8+
:lazy="true">
9+
<TeamRedCardsEditTable :edit-mode="{active: true}" :team-color="teamColor"/>
10+
<div slot="modal-footer">
11+
<!-- hide modal buttons -->
12+
</div>
13+
</b-modal>
14+
</span>
15+
</template>
16+
17+
<script>
18+
import TeamRedCardsEditTable from "./TeamRedCardsEditTable";
19+
import {TEAM_BLUE, TEAM_YELLOW} from "../../refereeState";
20+
21+
export default {
22+
name: "TeamRedCardsEdit",
23+
components: {TeamRedCardsEditTable},
24+
props: {
25+
teamColor: String,
26+
editMode: Object,
27+
},
28+
data() {
29+
return {
30+
TEAM_YELLOW: TEAM_YELLOW,
31+
TEAM_BLUE: TEAM_BLUE
32+
}
33+
},
34+
computed: {
35+
modalId() {
36+
return `red-cards-${this.teamColor}-modal`;
37+
},
38+
}
39+
}
40+
</script>
41+
42+
<style scoped>
43+
.edit-link {
44+
margin-left: 0.3em;
45+
}
46+
</style>

‎src/components/team/TeamRedCardsEditTable.vue

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
<template>
2+
<div>
3+
<table class="card-table">
4+
<tr>
5+
<th>Id</th>
6+
<th>Cause</th>
7+
<th>Remove</th>
8+
</tr>
9+
<tr v-for="card of team.redCards" v-bind:key="card.id">
10+
<td>
11+
{{card.id}}
12+
</td>
13+
<td>
14+
<span v-if="card.causedByGameEvent">
15+
{{card.causedByGameEvent.type}}
16+
</span>
17+
<span v-else>
18+
-
19+
</span>
20+
</td>
21+
<td>
22+
<a class="btn-remove" v-on:click="removeCard(card.id)">
23+
<font-awesome-icon
24+
class="fa-xs"
25+
icon="times-circle"/>
26+
</a>
27+
</td>
28+
</tr>
29+
</table>
30+
</div>
31+
</template>
32+
33+
<script>
34+
import {submitChange} from "../../submit";
35+
36+
export default {
37+
name: "TeamRedCardsEditTable",
38+
props: {
39+
teamColor: String,
40+
editMode: Object,
41+
},
42+
methods: {
43+
removeCard(cardId) {
44+
submitChange({
45+
updateTeamState: {
46+
forTeam: this.teamColor,
47+
removeRedCard: cardId
48+
}
49+
});
50+
}
51+
},
52+
computed: {
53+
team() {
54+
return this.$store.state.matchState.teamState[this.teamColor]
55+
}
56+
}
57+
}
58+
</script>
59+
60+
<style scoped>
61+
.card-table {
62+
width: 100%;
63+
}
64+
</style>

‎src/components/team/TeamYellowCardNextDue.vue

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<template>
2+
<span v-b-tooltip.hover.d500
3+
title="Next yellow card due"
4+
v-format-ns-duration="latestCardTime">
5+
</span>
6+
</template>
7+
8+
<script>
9+
import {TEAM_BLUE, TEAM_YELLOW} from "../../refereeState";
10+
11+
export default {
12+
name: "TeamYellowCardNextDue",
13+
props: {
14+
teamColor: String,
15+
},
16+
data() {
17+
return {
18+
TEAM_YELLOW: TEAM_YELLOW,
19+
TEAM_BLUE: TEAM_BLUE
20+
}
21+
},
22+
computed: {
23+
team() {
24+
return this.$store.state.matchState.teamState[this.teamColor]
25+
},
26+
latestCardTime() {
27+
if (this.activeYellowCards.length > 0) {
28+
return this.activeYellowCards[0].timeRemaining;
29+
}
30+
return 0;
31+
},
32+
activeYellowCards() {
33+
return this.team.yellowCards.filter(e => e.timeRemaining !== '0s');
34+
}
35+
}
36+
}
37+
</script>
38+
39+
<style scoped>
40+
</style>

0 commit comments

Comments
 (0)