Modification du controle manuel des score et suppression des 16 bouttons
This commit is contained in:
@@ -4,111 +4,152 @@
|
||||
<v-icon left class="white--text pr-5 pl-2" size="40">mdi-calculator-variant</v-icon>
|
||||
Gestion des scores
|
||||
</v-card-title>
|
||||
<v-container class="text-center">
|
||||
<v-row justify="center">
|
||||
<v-col cols="4" sm="6" md="3">
|
||||
<mqtt-button width="120" height="60" class="btn red xs12 sm6 md3" topic="game/score/update" message='{"Red": "-2"}'>
|
||||
<v-icon left size="40">mdi-minus-box-multiple</v-icon>
|
||||
</mqtt-button>
|
||||
</v-col>
|
||||
<v-col cols="4" sm="6" md="3">
|
||||
<mqtt-button width="120" height="60" class="btn red card xs12 sm6 md3" topic="game/score/update" message='{"Red": "-1"}'>
|
||||
<v-icon left size="40">mdi-minus-box</v-icon>
|
||||
</mqtt-button>
|
||||
</v-col>
|
||||
<v-col cols="4" sm="6" md="3">
|
||||
<mqtt-button width="120" height="60" class="btn red card xs12 sm6 md3" topic="game/score/update" message='{"Red": "+1"}'>
|
||||
<v-icon left size="40">mdi-plus-box</v-icon>
|
||||
</mqtt-button>
|
||||
</v-col>
|
||||
<v-col cols="4" sm="6" md="3">
|
||||
<mqtt-button width="120" height="60" class="btn red card xs12 sm6 md3 " topic="game/score/update" message='{"Red": "+2"}'>
|
||||
<v-icon left size="40">mdi-plus-box-multiple</v-icon>
|
||||
</mqtt-button>
|
||||
</v-col>
|
||||
<v-col cols="4" sm="6" md="3">
|
||||
<mqtt-button width="120" height="60" class="btn blue card xs12 sm6 md3 " topic="game/score/update" message='{"Blue": "-2"}'>
|
||||
<v-icon left size="40">mdi-minus-box-multiple</v-icon>
|
||||
</mqtt-button>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="6" md="3">
|
||||
<mqtt-button width="120" height="60" class="btn blue card xs12 sm6 md3 " topic="game/score/update" message='{"Blue": "-1"}'>
|
||||
<v-icon left size="40">mdi-minus-box</v-icon>
|
||||
</mqtt-button>
|
||||
</v-col>
|
||||
<v-col cols="4" sm="6" md="3">
|
||||
<mqtt-button width="120" height="60" class="btn blue card xs12 sm6 md3 " topic="game/score/update" message='{"Blue": "+1"}'>
|
||||
<v-icon left size="40">mdi-plus-box</v-icon>
|
||||
</mqtt-button>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="6" md="3">
|
||||
<mqtt-button width="120" height="60" class="btn blue card xs12 sm6 md3 " topic="game/score/update" message='{"Blue": "+2"}'>
|
||||
<v-icon left size="40">mdi-plus-box-multiple</v-icon>
|
||||
</mqtt-button>
|
||||
</v-col>
|
||||
<v-col cols="4" sm="6" md="3">
|
||||
<mqtt-button width="120" height="60" class="btn yellow card xs12 sm6 md3 " topic="game/score/update" message='{"Yellow": "-2"}'>
|
||||
<v-icon left size="40">mdi-minus-box-multiple</v-icon>
|
||||
</mqtt-button>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="6" md="3">
|
||||
<mqtt-button width="120" height="60" class="btn yellow card xs12 sm6 md3 " topic="game/score/update" message='{"Yellow": "-1"}'>
|
||||
<v-icon left size="40">mdi-minus-box</v-icon>
|
||||
</mqtt-button>
|
||||
</v-col>
|
||||
<v-col cols="4" sm="6" md="3">
|
||||
<mqtt-button width="120" height="60" class="btn yellow card xs12 sm6 md3 " topic="game/score/update" message='{"Yellow": "+1"}'>
|
||||
<v-icon left size="40">mdi-plus-box</v-icon>
|
||||
</mqtt-button>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="6" md="3">
|
||||
<mqtt-button width="120" height="60" class="btn yellow card xs12 sm6 md3 " topic="game/score/update" message='{"Yellow": "+2"}'>
|
||||
<v-icon left size="40">mdi-plus-box-multiple</v-icon>
|
||||
</mqtt-button>
|
||||
</v-col>
|
||||
<v-col cols="4" sm="6" md="3">
|
||||
<mqtt-button width="120" height="60" class="btn green card xs12 sm6 md3 " topic="game/score/update" message='{"Green": "-2"}'>
|
||||
<v-icon left size="40">mdi-minus-box-multiple</v-icon>
|
||||
</mqtt-button>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="6" md="3">
|
||||
<mqtt-button width="120" height="60" class="btn green card xs12 sm6 md3 " topic="game/score/update" message='{"Green": "-1"}'>
|
||||
<v-icon left size="40">mdi-minus-box</v-icon>
|
||||
</mqtt-button>
|
||||
</v-col>
|
||||
<v-col cols="4" sm="6" md="3">
|
||||
<mqtt-button width="120" height="60" class="btn green card xs12 sm6 md3 " topic="game/score/update" message='{"Green": "+1"}'>
|
||||
<v-icon left size="40">mdi-plus-box</v-icon>
|
||||
</mqtt-button>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="6" md="3">
|
||||
<mqtt-button width="120" height="60" class="btn green card xs12 sm6 md3 " topic="game/score/update" message='{"Green": "2"}'>
|
||||
<v-icon left size="40">mdi-plus-box-multiple</v-icon>
|
||||
</mqtt-button>
|
||||
</v-col>
|
||||
<v-container class="text-center pt-8">
|
||||
<!-- Team Lines -->
|
||||
<v-row v-for="(team, color) in scores" :key="color" align="center" justify="center" class="mb-2">
|
||||
<!-- Icon/Label -->
|
||||
<v-col cols="2" class="d-flex justify-center">
|
||||
<v-icon :color="getTeamColor(color)" size="40">mdi-circle</v-icon>
|
||||
</v-col>
|
||||
|
||||
<!-- Total Score Input -->
|
||||
<v-col cols="5">
|
||||
<v-text-field
|
||||
v-model.number="team.Total"
|
||||
label="Total"
|
||||
type="number"
|
||||
variant="outlined"
|
||||
density="compact"
|
||||
hide-details
|
||||
prepend-inner-icon="mdi-minus"
|
||||
append-inner-icon="mdi-plus"
|
||||
:color="getTeamColor(color)"
|
||||
:base-color="getTeamColor(color)"
|
||||
@click:prepend-inner="changeScore(color, 'Total', -1)"
|
||||
@click:append-inner="changeScore(color, 'Total', 1)"
|
||||
@update:model-value="updateScore(color)"
|
||||
class="centered-input"
|
||||
readonly
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
|
||||
<!-- Round Score Input -->
|
||||
<v-col cols="5">
|
||||
<v-text-field
|
||||
v-model.number="team.Round"
|
||||
label="Manche"
|
||||
type="number"
|
||||
variant="outlined"
|
||||
density="compact"
|
||||
hide-details
|
||||
prepend-inner-icon="mdi-minus"
|
||||
append-inner-icon="mdi-plus"
|
||||
:color="getTeamColor(color)"
|
||||
:base-color="getTeamColor(color)"
|
||||
@click:prepend-inner="changeScore(color, 'Round', -1)"
|
||||
@click:append-inner="changeScore(color, 'Round', 1)"
|
||||
@update:model-value="updateScore(color)"
|
||||
class="centered-input"
|
||||
readonly
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</v-card>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import MqttButton from './MqttButton.vue';
|
||||
import { ref } from 'vue';
|
||||
import { ref, reactive, onMounted } from 'vue';
|
||||
import mqtt from 'mqtt';
|
||||
import config from '@/config.js'; // Ensure correct path
|
||||
|
||||
// Variable pour contrôler l'état de la carte
|
||||
const isCardReduced = ref(false);
|
||||
|
||||
// Méthode pour basculer l'état de la carte
|
||||
const scores = reactive({
|
||||
Red: { Total: 0, Round: 0 },
|
||||
Blue: { Total: 0, Round: 0 },
|
||||
Yellow: { Total: 0, Round: 0 },
|
||||
Green: { Total: 0, Round: 0 },
|
||||
});
|
||||
|
||||
const client = mqtt.connect(config.mqttBrokerUrl);
|
||||
|
||||
client.on('connect', () => {
|
||||
console.log('CardButtonScore: Connected to MQTT broker at', config.mqttBrokerUrl);
|
||||
client.subscribe('game/score');
|
||||
});
|
||||
|
||||
client.on('error', (err) => {
|
||||
console.error('CardButtonScore: MQTT Error:', err);
|
||||
});
|
||||
|
||||
client.on('message', (topic, message) => {
|
||||
if (topic === 'game/score') {
|
||||
try {
|
||||
const data = JSON.parse(message.toString());
|
||||
console.log('CardButtonScore: Received score update:', data);
|
||||
if (data && data.TEAM) {
|
||||
Object.keys(scores).forEach(color => {
|
||||
if (data.TEAM[color]) {
|
||||
scores[color].Total = data.TEAM[color].TotalScore;
|
||||
scores[color].Round = data.TEAM[color].RoundScore;
|
||||
}
|
||||
});
|
||||
}
|
||||
} catch (e) {
|
||||
console.error("Error parsing score update:", e);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
function toggleCardSize() {
|
||||
isCardReduced.value = !isCardReduced.value;
|
||||
}
|
||||
|
||||
function getTeamColor(color) {
|
||||
if (color === 'Yellow') return '#D4D100'; // Custom yellow
|
||||
if (color === 'Red') return '#d42828';
|
||||
if (color === 'Blue') return '#2867d4';
|
||||
if (color === 'Green') return '#28d42e';
|
||||
return color.toLowerCase();
|
||||
}
|
||||
|
||||
function changeScore(teamColor, field, delta) {
|
||||
scores[teamColor][field] += delta;
|
||||
updateScore(teamColor);
|
||||
}
|
||||
|
||||
function updateScore(teamColor) {
|
||||
const payload = {
|
||||
[teamColor]: {
|
||||
Total: scores[teamColor].Total,
|
||||
Round: scores[teamColor].Round
|
||||
}
|
||||
};
|
||||
console.log('CardButtonScore: Publishing update:', payload);
|
||||
client.publish('game/score/update', JSON.stringify(payload));
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.card--reduced {
|
||||
height: 56px; /* Réglez la hauteur réduite selon vos besoins */
|
||||
width: 170px;
|
||||
height: 56px;
|
||||
width: 60%; /* Adjusted width for layout */
|
||||
overflow: hidden;
|
||||
transition: height 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.centered-input input {
|
||||
text-align: center;
|
||||
}
|
||||
.centered-input .v-field__label {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Remove number spin buttons */
|
||||
.centered-input input[type=number]::-webkit-inner-spin-button,
|
||||
.centered-input input[type=number]::-webkit-outer-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user