Skip to content

Commit 82cf937

Browse files
g3forceg3force
committed
[feature] Add edit buttons to replace unintuitive double click edit
1 parent 24b75fc commit 82cf937

File tree

8 files changed

+2880
-46
lines changed

8 files changed

+2880
-46
lines changed

‎package-lock.json‎

Lines changed: 2764 additions & 6 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,14 @@
88
"lint": "vue-cli-service lint"
99
},
1010
"dependencies": {
11+
"@fortawesome/fontawesome-svg-core": "^1.2.2",
12+
"@fortawesome/free-solid-svg-icons": "^5.2.0",
13+
"@fortawesome/vue-fontawesome": "^0.1.1",
1114
"bootstrap": "^4.1.3",
1215
"bootstrap-vue": "^2.0.0-rc.11",
16+
"i": "^0.3.6",
1317
"jquery": "^3.3.1",
18+
"npm": "^6.4.0",
1419
"popper.js": "^1.14.3",
1520
"v-hotkey": "^0.2.3",
1621
"vue": "^2.5.16",

‎src/components/common/EditableLabelDuration.vue‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
<template>
2-
<span>
2+
<span class="label-duration">
33
<span v-show="g.edit === false"
4-
@dblclick="edit"
54
ref="span-id"
65
v-format-ns-duration="value"></span>
76
<input v-show="g.edit === true"
@@ -10,7 +9,9 @@
109
v-on:blur="updateValue"
1110
@keyup.enter="updateValue"
1211
size="5"
12+
ref="input"
1313
/>
14+
<a class="btn-edit" v-on:click="edit()" v-show="!g.edit"><font-awesome-icon icon="edit"/></a>
1415
</span>
1516
</template>
1617

@@ -32,11 +33,18 @@
3233
edit: function () {
3334
this.g.edit = true;
3435
this.g.value = this.$refs["span-id"].innerHTML;
36+
this.$nextTick(() => this.$refs.input.focus())
3537
}
3638
}
3739
}
3840
</script>
3941

4042
<style scoped>
41-
43+
input {
44+
text-align: center;
45+
}
46+
.btn-edit {
47+
margin-left: 0.3em;
48+
margin-right: 0.3em;
49+
}
4250
</style>

‎src/components/common/EditableLabelNumber.vue‎

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
<template>
22
<span class="editable-label">
33
<label v-show="g.edit === false"
4-
for="edit-input"
5-
@dblclick="edit">
4+
for="edit-input">
65
{{label}} {{value}}
76
</label>
87
<label v-show="g.edit === true"
@@ -13,11 +12,14 @@
1312
v-model="g.value"
1413
v-on:blur="updateValue"
1514
@keyup.enter="updateValue"
16-
id="edit-input"
17-
type="number"
1815
:title="title"
1916
:min="min"
20-
:max="max"/>
17+
:max="max"
18+
id="edit-input"
19+
type="number"
20+
ref="input"
21+
/>
22+
<a class="btn-edit" v-on:click="edit()" v-show="!g.edit"><font-awesome-icon icon="edit"/></a>
2123
</span>
2224
</template>
2325

@@ -43,11 +45,18 @@
4345
edit: function () {
4446
this.g.edit = true;
4547
this.g.value = this.value;
48+
this.$nextTick(() => this.$refs.input.focus())
4649
}
4750
}
4851
}
4952
</script>
5053

5154
<style scoped>
52-
55+
input {
56+
text-align: center;
57+
}
58+
.btn-edit {
59+
margin-left: 0.3em;
60+
margin-right: 0.3em;
61+
}
5362
</style>

‎src/components/common/EditableLabelSelect.vue‎

Lines changed: 24 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,22 @@
11
<template>
22
<span>
3-
<label v-show="edit === false"
4-
@dblclick="switchToEdit">
3+
<label v-show="!g.edit">
54
{{label}} {{value}}
65
</label>
7-
<label v-show="edit === true">
6+
<label v-show="g.edit">
87
{{label}}
98
</label>
10-
<b-form-select v-show="edit === true"
11-
id="edit-input"
12-
v-model="editValue"
13-
:options="options"
14-
class="mb-3"></b-form-select>
9+
<select v-show="g.edit"
10+
id="edit-input"
11+
v-model="g.value"
12+
@blur="updateValue"
13+
ref="input"
14+
class="custom-select">
15+
<option v-for="option in options" :key="option" :value="option">
16+
{{ option }}
17+
</option>
18+
</select>
19+
<a class="btn-edit" v-on:click="switchToEdit()" v-show="!g.edit"><font-awesome-icon icon="edit"/></a>
1520
</span>
1621
</template>
1722

@@ -25,27 +30,28 @@
2530
callback: Function
2631
},
2732
data: function () {
28-
return {edit: false, editValue: ""}
33+
return {g: {edit: false, value: 0}}
2934
},
3035
methods: {
3136
updateValue: function () {
3237
this.g.edit = false;
3338
this.callback(this.g.value)
3439
},
3540
switchToEdit: function () {
36-
this.edit = true;
37-
this.editValue = this.value;
41+
this.g.edit = true;
42+
this.g.value = this.value;
43+
this.$nextTick(() => this.$refs.input.focus())
3844
}
3945
},
40-
watch: {
41-
editValue: function (val) {
42-
this.edit = false;
43-
this.callback(val);
44-
}
45-
}
4646
}
4747
</script>
4848

4949
<style scoped>
50-
50+
.btn-edit {
51+
margin-left: 0.3em;
52+
margin-right: 0.3em;
53+
}
54+
select {
55+
width: auto !important;
56+
}
5157
</style>

‎src/components/common/EditableLabelText.vue‎

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
<template>
22
<span>
33
<label v-show="g.edit === false"
4-
for="edit-input"
5-
@dblclick="edit">
4+
for="edit-input">
65
{{label}} {{value}}
76
</label>
87
<label v-show="g.edit === true"
@@ -14,7 +13,10 @@
1413
v-on:blur="updateValue"
1514
@keyup.enter="updateValue"
1615
id="edit-input"
17-
size="10"/>
16+
size="10"
17+
ref="input"
18+
/>
19+
<a class="btn-edit" v-on:click="edit()" v-show="!g.edit"><font-awesome-icon icon="edit"/></a>
1820
</span>
1921
</template>
2022

@@ -37,11 +39,18 @@
3739
edit: function () {
3840
this.g.edit = true;
3941
this.g.value = this.value;
42+
this.$nextTick(() => this.$refs.input.focus())
4043
}
4144
}
4245
}
4346
</script>
4447

4548
<style scoped>
46-
49+
input {
50+
text-align: center;
51+
}
52+
.btn-edit {
53+
margin-left: 0.3em;
54+
margin-right: 0.3em;
55+
}
4756
</style>

‎src/components/team/TeamYellowCards.vue‎

Lines changed: 32 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,23 +11,35 @@
1111
(
1212
<span v-b-tooltip.hover
1313
title="Active yellow cards">{{yellowCardTimes.length}}</span>
14-
<span v-b-toggle.collapseDurations v-show="yellowCardTimes.length>0">
14+
<span v-show="yellowCardTimes.length>0">
1515
|
1616
<span v-b-tooltip.hover
17-
title="Next yellow card due, click to show all"
17+
title="Next yellow card due"
1818
v-format-ns-duration="yellowCardTimes[0]"></span>
1919
</span>
2020
)
2121
</span>
2222

23-
<b-collapse id="collapseDurations" class="mt-2">
23+
<a class="btn-edit"
24+
v-if="!showAllCards"
25+
@click="showAllCards=!showAllCards">
26+
<font-awesome-icon icon="caret-square-down"/>
27+
</a>
28+
<a class="btn-edit"
29+
v-if="showAllCards"
30+
@click="showAllCards=!showAllCards">
31+
<font-awesome-icon icon="caret-square-up"/>
32+
</a>
33+
34+
<div class="card-times-container" v-if="showAllCards">
35+
<label class="lbl-times"> Times: </label>
2436
<EditableLabelDuration
2537
class="editable-label"
26-
v-bind:key="cardTime"
38+
v-bind:key="cardId"
2739
v-for="(cardTime, cardId) in yellowCardTimes"
2840
:value="cardTime"
2941
:callback="(v) => updateCardTime(v, cardId)"/>
30-
</b-collapse>
42+
</div>
3143
</div>
3244
</template>
3345

@@ -43,6 +55,11 @@
4355
yellowCardTimes: Array,
4456
teamColor: String
4557
},
58+
data() {
59+
return {
60+
showAllCards: false
61+
}
62+
},
4663
methods: {
4764
updateYellowCards: function (v) {
4865
this.$socket.sendObj({
@@ -65,4 +82,14 @@
6582
</script>
6683

6784
<style scoped>
85+
.lbl-times {
86+
margin-right: 0.3em;
87+
}
88+
.card-times-container {
89+
margin-left: 0.5em;
90+
display: flex;
91+
flex-direction: row;
92+
flex-wrap: wrap;
93+
max-width: 300px;
94+
}
6895
</style>

‎src/main.js‎

Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,31 @@
11
import Vue from 'vue'
22
import App from './App.vue'
33
import store from "./store";
4-
import VueNativeSock from 'vue-native-websocket'
4+
// use a custom timestamp formatter from this project
5+
import TimestampFormatter from "./TimestampFormatter";
56
// use hotkeys for binding keyboard keys to buttons and other components
67
import VueHotkey from 'v-hotkey'
78
// use Bootstrap for styling
89
import BootstrapVue from 'bootstrap-vue'
910
import 'bootstrap/dist/css/bootstrap.css'
1011
import 'bootstrap-vue/dist/bootstrap-vue.css'
11-
import TimestampFormatter from "./TimestampFormatter";
12+
// Use fontawesome to load some icons
13+
import {library} from '@fortawesome/fontawesome-svg-core'
14+
import {faCaretSquareDown, faCaretSquareUp, faEdit} from '@fortawesome/free-solid-svg-icons'
15+
import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome'
16+
// Connect to the backend with a single websocket that communicates with JSON format and is attached to the store
17+
import VueNativeSock from 'vue-native-websocket'
18+
19+
Vue.use(TimestampFormatter);
1220

1321
Vue.use(VueHotkey);
22+
1423
Vue.use(BootstrapVue);
15-
Vue.use(TimestampFormatter);
24+
25+
library.add(faEdit);
26+
library.add(faCaretSquareDown);
27+
library.add(faCaretSquareUp);
28+
Vue.component('font-awesome-icon', FontAwesomeIcon);
1629

1730
export let isInNormalHalf = function (state) {
1831
return state.stage === 'First Half';
@@ -27,7 +40,6 @@ if (process.env.NODE_ENV === 'development') {
2740
wsAddress = 'ws://' + window.location.hostname + ':' + window.location.port + '/api/control';
2841
}
2942

30-
// Connect to the backend with a single websocket that communicates with JSON format and is attached to the store
3143
Vue.use(VueNativeSock, wsAddress, {
3244
reconnection: true,
3345
format: 'json',

0 commit comments

Comments
 (0)