Compare commits
43 Commits
df2c9d4788
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
| b4ca539e7b | |||
| a632ca98b0 | |||
| cdb3cdf642 | |||
| 1ce14eca13 | |||
| 46bd3f5917 | |||
| eae80c0c39 | |||
| c0f5b35398 | |||
| f5dbd08565 | |||
| 7586095bd5 | |||
| bcaa97e7e2 | |||
| b1b7080fbe | |||
| ce8d859126 | |||
| f800262278 | |||
| 2dbb270e17 | |||
| f3fc94cab3 | |||
| 92daf14a09 | |||
| c62f76aeec | |||
| 74c0448dfc | |||
| 922b7850ea | |||
| cdf0952ca1 | |||
| ab102ed1df | |||
| 36d07f313b | |||
| 013d629625 | |||
| 31649435a6 | |||
| 0f0f1ffe33 | |||
| 1c2c8dfcbf | |||
| ed9a939121 | |||
| a15d811092 | |||
| bab961ace7 | |||
| 07d76a7669 | |||
| 3f63801df9 | |||
| 66c9e68eb7 | |||
| cc9cf987b1 | |||
| 212e2f350f | |||
| 5379e0ed53 | |||
| 6403b8a299 | |||
| 827427ed28 | |||
| 4efe3b00c4 | |||
| a844c21a1b | |||
| 332098a6fd | |||
| f7e2a7a37e | |||
| 4c1fac7543 | |||
| 98b084724e |
33
Start-FullProject.ps1
Normal file
@@ -0,0 +1,33 @@
|
||||
# Chemins de base
|
||||
$ServicesPath = "$($PSScriptRoot)\VNode\services"
|
||||
$VAppPath = "$($PSScriptRoot)\VApp"
|
||||
|
||||
# Liste des services
|
||||
$JsServices = @(
|
||||
"score-manager.js",
|
||||
"quizz-collector.js",
|
||||
"buzzer-manager.js",
|
||||
"buzzer-watcher.js",
|
||||
"session-manager.js"
|
||||
)
|
||||
|
||||
# Utilisation de -d (startingDirectory) pour wt.exe
|
||||
# Cela évite de faire le Set-Location manuellement
|
||||
$WtArguments = "nt --title VultureGame -d `"$($VAppPath)`" powershell.exe -NoExit -Command `"npm run dev -- --host`""
|
||||
|
||||
# Boucle pour ajouter chaque service
|
||||
foreach ($ServiceName in $JsServices) {
|
||||
# Recherche du fichier
|
||||
$ServiceSearch = Get-ChildItem -Path "$($ServicesPath)" -Filter "$($ServiceName)" -Recurse | Select-Object -First 1
|
||||
|
||||
if ($ServiceSearch) {
|
||||
# On définit le répertoire de travail sur le dossier du script trouvé
|
||||
$Directory = $ServiceSearch.DirectoryName
|
||||
$NodeCommand = "node $($ServiceSearch.FullName)"
|
||||
|
||||
$WtArguments += " `; nt --title $($ServiceName) -d `"$($Directory)`" powershell.exe -NoExit -Command `"$($NodeCommand)`""
|
||||
}
|
||||
}
|
||||
|
||||
# Lancement final
|
||||
Start-Process "wt.exe" -ArgumentList $WtArguments
|
||||
@@ -1,6 +1,6 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head> <meta charset="UTF-8"> <link rel="icon" href="/favicon.ico"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Brain Blast</title>
|
||||
<head> <meta charset="UTF-8"> <link rel="icon" href="/favicon.ico"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vulture</title>
|
||||
<script src="/config.js"></script>
|
||||
</head>
|
||||
<body> <div id="app"></div> <script type="module" src="/src/main.js"></script>
|
||||
|
||||
2318
VApp/package-lock.json
generated
@@ -14,6 +14,7 @@
|
||||
"dependencies": {
|
||||
"@mdi/font": "^7.4.47",
|
||||
"@videojs-player/vue": "^1.0.0",
|
||||
"axios": "^1.13.4",
|
||||
"express": "^5.0.0",
|
||||
"mqtt": "^5.3.5",
|
||||
"ping": "^0.4.4",
|
||||
@@ -21,6 +22,7 @@
|
||||
"video.js": "^8.22.0",
|
||||
"vue": "^3.4.19",
|
||||
"vue-router": "^4.2.5",
|
||||
"vuetify": "^3.11.8",
|
||||
"vuex": "^4.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
@@ -1,7 +1,19 @@
|
||||
window.APP_CONFIG = {
|
||||
mqttBrokerUrl: 'ws://192.168.73.252:9001',
|
||||
mqttBrokerUrl: 'ws://192.168.1.201:9001',
|
||||
redBuzzerIP: '192.168.73.40',
|
||||
blueBuzzerIP: '192.168.73.41',
|
||||
orangeBuzzerIP: '192.168.73.42',
|
||||
greenBuzzerIP: '192.168.73.43'
|
||||
greenBuzzerIP: '192.168.73.43',
|
||||
apiUrl: 'http://192.168.1.178:3001',
|
||||
topics: {
|
||||
requestList: 'game/session/list/request',
|
||||
responseList: 'game/session/list/response',
|
||||
requestConfig: 'game/session/config/request',
|
||||
getConfig: 'game/session/config/get',
|
||||
updateConfig: 'game/session/config/update',
|
||||
createSession: 'game/session/create',
|
||||
deleteSession: 'game/session/delete',
|
||||
deleteMedia: 'game/session/media/delete',
|
||||
renameMedia: 'game/session/media/rename'
|
||||
}
|
||||
};
|
||||
|
||||
@@ -47,7 +47,7 @@
|
||||
const buzzerColor = ref('');
|
||||
const client = mqtt.connect(config.mqttBrokerUrl);
|
||||
|
||||
// Map hex colors to team names if needed, or just use the color directly
|
||||
// Associe les couleurs hex aux noms d'équipe si besoin, ou utilise directement la couleur
|
||||
function getTeamNameFromColor(color) {
|
||||
const c = color.toUpperCase();
|
||||
const colors = theme.current.value.colors;
|
||||
@@ -59,7 +59,7 @@
|
||||
if (c === colors.BlueBuzzer.toUpperCase()) return 'bleue';
|
||||
if (c === colors.YellowBuzzer.toUpperCase()) return 'jaune';
|
||||
if (c === colors.GreenBuzzer.toUpperCase()) return 'verte';
|
||||
return color; // Fallback
|
||||
return color; // Valeur par défaut
|
||||
}
|
||||
|
||||
function getTeamKeyFromColor(color) {
|
||||
@@ -88,7 +88,7 @@
|
||||
buzzerTeam.value = getTeamNameFromColor(data.color);
|
||||
dialog.value = true;
|
||||
} else if (data.status === 'unblocked') {
|
||||
// Optional: auto-close if unblocked from elsewhere
|
||||
// Optionnel : fermer automatiquement si débloqué depuis ailleurs
|
||||
dialog.value = false;
|
||||
}
|
||||
} catch (e) {
|
||||
@@ -109,7 +109,7 @@
|
||||
client.publish('game/score/update', JSON.stringify(payload));
|
||||
}
|
||||
|
||||
// Add a small delay before unlocking to ensure the score update is processed
|
||||
// Petit délai avant le déblocage pour que la mise à jour du score soit traitée
|
||||
setTimeout(() => {
|
||||
unlockBuzzers();
|
||||
}, 100);
|
||||
@@ -134,7 +134,7 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%; /* Ensure it takes full height of the container if possible, or substantial height */
|
||||
height: 100%; /* S'assure que l'élément occupe toute la hauteur du conteneur si possible, ou une hauteur substantielle */
|
||||
}
|
||||
.validate-btn {
|
||||
color: rgb(var(--v-theme-background),1);
|
||||
|
||||
@@ -81,6 +81,9 @@
|
||||
client.on('connect', () => {
|
||||
console.log('CardButtonScore: Connected to MQTT broker at', config.mqttBrokerUrl);
|
||||
client.subscribe('game/score');
|
||||
|
||||
console.log("CardButtonScore: Requesting scores.");
|
||||
client.publish('game/score/request', '{}');
|
||||
});
|
||||
|
||||
client.on('error', (err) => {
|
||||
|
||||
@@ -26,7 +26,7 @@
|
||||
<v-icon left size="60">mdi-play</v-icon>
|
||||
</mqtt-button>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</v-card>
|
||||
</template>
|
||||
@@ -39,8 +39,7 @@
|
||||
const isCardReduced = ref(false);
|
||||
|
||||
// Méthode pour basculer l'état de la carte
|
||||
function toggleCardSize() { isCardReduced.value = !isCardReduced.value;
|
||||
}
|
||||
function toggleCardSize() { isCardReduced.value = !isCardReduced.value; }
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
@@ -91,7 +91,6 @@
|
||||
|
||||
<script setup>
|
||||
import { onMounted, ref, reactive } from 'vue';
|
||||
import variables from '@/variables.js';
|
||||
import mqtt from 'mqtt'
|
||||
import config from '@/config.js'
|
||||
|
||||
@@ -131,24 +130,6 @@ function handleMessage(topic, message) {
|
||||
scores.BlueRoundScore = parsedMessage.TEAM.Blue.RoundScore
|
||||
scores.YellowRoundScore = parsedMessage.TEAM.Yellow.RoundScore
|
||||
scores.GreenRoundScore = parsedMessage.TEAM.Green.RoundScore
|
||||
// Mettre à jour l'état des buzzers en fonction des messages
|
||||
/*
|
||||
switch (buzzer) {
|
||||
case 'redBuzzerIP':
|
||||
redBuzzerState.value = status === "online" ? 1 : 0;
|
||||
break;
|
||||
case 'blueBuzzerIP':
|
||||
blueBuzzerState.value = status === "online" ? 1 : 0;
|
||||
break;
|
||||
case 'yellowBuzzerIP':
|
||||
yellowBuzzerState.value = status === "online" ? 1 : 0;
|
||||
break;
|
||||
case 'greenBuzzerIP':
|
||||
greenBuzzerState.value = status === "online" ? 1 : 0;
|
||||
break;
|
||||
}
|
||||
*/
|
||||
|
||||
}
|
||||
|
||||
|
||||
@@ -162,7 +143,9 @@ onMounted(() => {
|
||||
subscribeToTopic('game/score', (topic, message) => {
|
||||
handleMessage(topic, message);
|
||||
});
|
||||
|
||||
|
||||
// Request score refresh
|
||||
client.publish('game/score/request', '{}');
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
@@ -2,13 +2,13 @@
|
||||
<v-container v-show="gamehiding === false" class="player_video_div">
|
||||
<div v-if="currentQuestion" style="width: 100%; height: 100%;">
|
||||
|
||||
<!-- VIDEO PLAYER -->
|
||||
<!-- LECTEUR VIDÉO -->
|
||||
<div v-show="currentQuestion.Type === 'video'" style="width: 100%; height: 100%;">
|
||||
<video ref="videoPlayer" class="video-js player_video" controls preload="auto">
|
||||
</video>
|
||||
</div>
|
||||
|
||||
<!-- PICTURE DISPLAY -->
|
||||
<!-- AFFICHAGE IMAGE -->
|
||||
<div v-if="currentQuestion.Type === 'picture'" style="width: 100%; height: 100%;">
|
||||
<v-img
|
||||
:src="getMediaUrl(currentQuestion.MediaUrl)"
|
||||
@@ -17,7 +17,7 @@
|
||||
></v-img>
|
||||
</div>
|
||||
|
||||
<!-- AUDIO PLAYER -->
|
||||
<!-- LECTEUR AUDIO -->
|
||||
<div v-if="currentQuestion.Type === 'audio'" class="audio-container player_video">
|
||||
<div class="audio-visualizer">
|
||||
<v-icon size="150" color="white" class="mb-4">mdi-music-circle</v-icon>
|
||||
@@ -37,19 +37,19 @@ import videojs from 'video.js';
|
||||
import 'video.js/dist/video-js.css';
|
||||
import { subscribeToTopic, publishMessage } from '@/services/mqttService';
|
||||
|
||||
// Store Access
|
||||
// Accès au store
|
||||
const currentQuestion = quizStore.getters.currentQuestion;
|
||||
|
||||
// Video Player Refs
|
||||
// Références du lecteur vidéo
|
||||
const videoPlayer = ref(null);
|
||||
let vjsPlayer = null;
|
||||
|
||||
// Audio Player Refs
|
||||
// Références du lecteur audio
|
||||
const audioPlayer = ref(null);
|
||||
|
||||
let gamehiding = ref(true);
|
||||
|
||||
// Methods
|
||||
// Méthodes
|
||||
function getMediaUrl(relativePath) {
|
||||
if (!relativePath) return '';
|
||||
const cleanPath = relativePath.startsWith('/') ? relativePath.substring(1) : relativePath;
|
||||
@@ -59,8 +59,8 @@ function getMediaUrl(relativePath) {
|
||||
}
|
||||
|
||||
function initVideoPlayer() {
|
||||
if (vjsPlayer) return; // Already init
|
||||
if (!videoPlayer.value) return; // DOM not ready
|
||||
if (vjsPlayer) return; // Déjà initialisé
|
||||
if (!videoPlayer.value) return; // DOM pas prêt
|
||||
|
||||
console.log('GameMedia: Initializing VideoJS');
|
||||
vjsPlayer = videojs(videoPlayer.value, {
|
||||
@@ -72,12 +72,12 @@ function initVideoPlayer() {
|
||||
volume: 0,
|
||||
}, () => {
|
||||
console.log('GameMedia: VideoJS Ready');
|
||||
// If current question is video, load it
|
||||
// Si la question courante est une vidéo, la charger
|
||||
if (currentQuestion.value && currentQuestion.value.Type === 'video') {
|
||||
updateVideoSource();
|
||||
}
|
||||
|
||||
// Auto-hide when video ends
|
||||
// Masquer automatiquement à la fin de la vidéo
|
||||
vjsPlayer.on('ended', () => {
|
||||
console.log('GameMedia: Video ended, hiding');
|
||||
gamehiding.value = true;
|
||||
@@ -93,17 +93,17 @@ function updateVideoSource() {
|
||||
console.log('GameMedia: Loading Video Source', url);
|
||||
vjsPlayer.src({ type: 'video/mp4', src: url });
|
||||
|
||||
// AutoPlay is managed by MQTT 'play' command now
|
||||
// L'autoplay est géré par la commande MQTT 'play' maintenant
|
||||
// if (currentQuestion.value.Settings?.AutoPlay) {
|
||||
// vjsPlayer.play().catch(e => console.log('Autoplay blocked', e));
|
||||
// }
|
||||
}
|
||||
|
||||
// Watchers
|
||||
// Observateurs
|
||||
watch(currentQuestion, async (newVal, oldVal) => {
|
||||
console.log('GameMedia: Question Changed', newVal);
|
||||
|
||||
// Stop all media first
|
||||
// Arrêter d'abord tous les médias
|
||||
if (vjsPlayer) {
|
||||
vjsPlayer.pause();
|
||||
}
|
||||
@@ -111,12 +111,12 @@ watch(currentQuestion, async (newVal, oldVal) => {
|
||||
audioPlayer.value.pause();
|
||||
}
|
||||
|
||||
// Ensure hidden on question change until played
|
||||
// Rester masqué au changement de question jusqu'à la lecture
|
||||
gamehiding.value = true;
|
||||
publishMessage('/display/control', 'hide');
|
||||
if (!newVal) return;
|
||||
|
||||
await nextTick(); // Wait for DOM updates (v-if)
|
||||
await nextTick(); // Attendre la mise à jour du DOM (v-if)
|
||||
|
||||
if (newVal.Type === 'video') {
|
||||
if (!vjsPlayer) {
|
||||
@@ -125,13 +125,13 @@ watch(currentQuestion, async (newVal, oldVal) => {
|
||||
updateVideoSource();
|
||||
}
|
||||
} else if (newVal.Type === 'audio') {
|
||||
// Audio loading (no autoplay)
|
||||
// Chargement audio (pas d'autoplay)
|
||||
setTimeout(() => {
|
||||
if(audioPlayer.value){
|
||||
console.log('GameMedia: Loading Audio');
|
||||
audioPlayer.value.load();
|
||||
|
||||
// Auto-hide when audio ends
|
||||
// Masquer automatiquement à la fin de l'audio
|
||||
audioPlayer.value.onended = () => {
|
||||
console.log('GameMedia: Audio ended, hiding');
|
||||
gamehiding.value = true;
|
||||
@@ -140,10 +140,10 @@ watch(currentQuestion, async (newVal, oldVal) => {
|
||||
}
|
||||
}, 100);
|
||||
}
|
||||
// For 'picture' type, nothing to do, video/audio are already paused
|
||||
// Pour le type 'picture', rien à faire, vidéo/audio déjà en pause
|
||||
}, { immediate: true });
|
||||
|
||||
// Lifecycle
|
||||
// Cycle de vie
|
||||
onMounted(async () => {
|
||||
await nextTick();
|
||||
if (currentQuestion.value?.Type === 'video') {
|
||||
@@ -170,7 +170,7 @@ const handleMessage = (topic, message) => {
|
||||
audioPlayer.value.play().catch(e => console.error("Error playing audio:", e));
|
||||
}
|
||||
if (currentQuestion.value?.Type === 'picture') {
|
||||
// Start timer if PlayTime is configured
|
||||
// Démarrer le timer si PlayTime est configuré
|
||||
const playTime = currentQuestion.value.Settings?.PlayTime;
|
||||
if (playTime && playTime > 0) {
|
||||
quizStore.actions.startTimer(playTime);
|
||||
@@ -195,10 +195,9 @@ const handleMessage = (topic, message) => {
|
||||
break;
|
||||
}
|
||||
}
|
||||
// Check for buzzer status if we want to auto-hide on buzz (like HidingOverlay)
|
||||
// The user asked to replicate VideoPlayer, which only had /display/control in the provided snippet.
|
||||
// But if "mesmes événéments" implies behavior of the system...
|
||||
// I'll stick to VideoPlayer replication first.
|
||||
// Vérifier le statut du buzzer pour masquer automatiquement au buzz (comme HidingOverlay)
|
||||
// Réplication de VideoPlayer qui n'avait que /display/control dans l'extrait fourni.
|
||||
// Comportement optionnel selon les événements du système.
|
||||
if (topic === 'vulture/buzzer/status') {
|
||||
try {
|
||||
const data = JSON.parse(message);
|
||||
@@ -237,7 +236,7 @@ onBeforeUnmount(() => {
|
||||
border-radius: 25px;
|
||||
}
|
||||
|
||||
/* Additional styles for Audio/Custom elements to fit the theme */
|
||||
/* Styles additionnels pour les éléments Audio/Custom pour s'adapter au thème */
|
||||
.audio-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@@ -53,12 +53,12 @@ import { publishMessage } from '@/services/mqttService';
|
||||
const selectedTopic = ref('Selectionnez un topic');
|
||||
const selectedColor = ref('#FF0000');
|
||||
const topics = ref([
|
||||
'/wled/all',
|
||||
'/wled/1',
|
||||
'/wled/2',
|
||||
'/wled/3',
|
||||
'/wled/4',
|
||||
'/wled/5',
|
||||
'wled/all/col',
|
||||
'wled/panel/col',
|
||||
'wled/2',
|
||||
'wled/3',
|
||||
'wled/4',
|
||||
'wled/5',
|
||||
]);
|
||||
|
||||
const publishCustomColor = () => {
|
||||
|
||||
@@ -16,6 +16,7 @@
|
||||
const disabled = ref(false)
|
||||
|
||||
const _publishMessage = () => {
|
||||
console.log('MqttButton: Publishing', props.topic, props.message)
|
||||
publishMessage(props.topic, props.message)
|
||||
disabled.value = true
|
||||
}
|
||||
|
||||
352
VApp/src/components/QuestionEditorDialog.vue
Normal file
@@ -0,0 +1,352 @@
|
||||
<template>
|
||||
<v-dialog v-model="visible" persistent max-width="800px">
|
||||
<v-card rounded="xl" class="pa-3">
|
||||
<v-card-title class="text-title-style">
|
||||
{{ isNew ? 'Nouvelle question' : 'Éditer la question' }}
|
||||
</v-card-title>
|
||||
<v-card-text>
|
||||
<v-container>
|
||||
<v-row>
|
||||
<v-col cols="12" md="4">
|
||||
<v-text-field color="primary" density="compact" variant="outlined" rounded="xl" v-model="editedItem.QuestionId" label="ID Question" hint="Unique ID, ex: Q-005"></v-text-field>
|
||||
</v-col>
|
||||
<v-col cols="12" md="4">
|
||||
<v-select color="primary" density="compact" variant="outlined" rounded="xl" v-model="editedItem.Type" :items="['video', 'audio', 'picture']" label="Type"></v-select>
|
||||
</v-col>
|
||||
<v-col cols="12" md="4">
|
||||
<v-text-field color="primary" density="compact" variant="outlined" rounded="xl" v-model.number="editedItem.Points" type="number" label="Points"></v-text-field>
|
||||
</v-col>
|
||||
<v-col cols="12">
|
||||
<v-textarea color="primary" variant="outlined" rounded="xl" v-model="editedItem.QuestionText" label="Texte de la question" rows="2"></v-textarea>
|
||||
</v-col>
|
||||
|
||||
<!-- Media Section -->
|
||||
<v-col cols="12">
|
||||
<div class="d-flex align-center">
|
||||
<!-- Preview Section -->
|
||||
<div v-if="editedItem.MediaUrl" class="preview-box mr-4 text-center">
|
||||
<img v-if="editedItem.Type === 'picture'" :src="getPreviewUrl(editedItem.MediaUrl)" class="preview-content" @click="showFullPreview = true">
|
||||
<video
|
||||
v-else-if="editedItem.Type === 'video'"
|
||||
:src="getPreviewUrl(editedItem.MediaUrl)"
|
||||
class="preview-content"
|
||||
@click="showVideoPreview = true"
|
||||
@loadedmetadata="(e) => e.target.currentTime = e.target.duration / 3"
|
||||
muted
|
||||
></video>
|
||||
<div v-else-if="editedItem.Type === 'audio'" class="text-caption" style="cursor: pointer;" @click="showAudioPreview = true">
|
||||
<v-icon size="64" color="primary">mdi-music</v-icon>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<v-text-field color="primary" density="compact" variant="outlined" rounded="xl" v-model="editedItem.MediaUrl" label="URL du Média" class="flex-grow-2 mr-2" hide-details></v-text-field>
|
||||
<input
|
||||
type="file"
|
||||
ref="fileInputRef"
|
||||
color="primary"
|
||||
style="display: none;"
|
||||
@change="onFileSelected"
|
||||
accept="image/*,video/*,audio/*"
|
||||
/>
|
||||
<v-btn
|
||||
rounded="xl"
|
||||
variant="tonal"
|
||||
color="primary"
|
||||
:loading="uploading"
|
||||
:disabled="!editedItem.Type"
|
||||
@click="$refs.fileInputRef.click()"
|
||||
>
|
||||
<v-icon start>mdi-upload</v-icon>
|
||||
Upload
|
||||
</v-btn>
|
||||
|
||||
<v-btn
|
||||
v-if="editedItem.MediaUrl"
|
||||
rounded="xl"
|
||||
text="Supprimer"
|
||||
variant="tonal"
|
||||
color="red"
|
||||
class="ml-2"
|
||||
@click="deleteMedia"
|
||||
title="Supprimer le média"
|
||||
></v-btn>
|
||||
</div>
|
||||
<div v-if="uploadError" class="text-caption text-red">{{ uploadError }}</div>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12"><v-divider></v-divider></v-col>
|
||||
<v-col cols="12" class="text-h6">Paramètres</v-col>
|
||||
|
||||
<v-col cols="6" md="4">
|
||||
<v-switch inset v-model="editedItem.Settings.AutoPlay" label="AutoPlay" density="compact" color="primary"></v-switch>
|
||||
</v-col>
|
||||
<v-col cols="6" md="4">
|
||||
<v-switch inset v-model="editedItem.Settings.Loop" label="Loop" density="compact" color="primary"></v-switch>
|
||||
</v-col>
|
||||
<v-col cols="6" md="4">
|
||||
<v-text-field color="primary" variant="outlined" rounded="xl" v-model.number="editedItem.Settings.PlayTime" type="number" label="Durée (sec)" density="compact"></v-text-field>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12"><v-divider></v-divider></v-col>
|
||||
<v-label class="text-title-style">
|
||||
Réponse (Maître du jeu)
|
||||
</v-label>
|
||||
<v-col cols="12" class="text-h6"></v-col>
|
||||
|
||||
<v-col cols="12">
|
||||
<v-text-field color="primary" variant="outlined" rounded="xl" v-model="editedItem.MasterData.CorrectAnswer" label="Réponse Correcte"></v-text-field>
|
||||
</v-col>
|
||||
<v-col cols="12">
|
||||
<v-textarea color="primary" variant="outlined" rounded="xl" v-model="editedItem.MasterData.MasterNotes" label="Notes pour le MJ" rows="2"></v-textarea>
|
||||
</v-col>
|
||||
<v-col cols="12">
|
||||
<v-textarea color="primary" variant="outlined" rounded="xl" v-model="editedItem.MasterData.Help" label="Indice / Aide" rows="2"></v-textarea>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</v-card-text>
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn color="primary" rounded="xl" variant="outlined" @click="close">Annuler</v-btn>
|
||||
<v-btn color="success" rounded="xl" variant="outlined" @click="save">Ok</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
|
||||
<!-- Dialog Preview Image -->
|
||||
<v-dialog v-model="showFullPreview" max-width="90vw">
|
||||
<v-card rounded="xl" class="pa-2">
|
||||
<v-card-text class="d-flex justify-center" style="padding: 16px;">
|
||||
<v-img
|
||||
:src="getPreviewUrl(editedItem.MediaUrl)"
|
||||
max-height="80vh"
|
||||
rounded="lg"
|
||||
@click="showFullPreview = false"
|
||||
style="cursor: pointer;"
|
||||
></v-img>
|
||||
</v-card-text>
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn color="primary" variant="text" @click="showFullPreview = false">Fermer</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
|
||||
<!-- Dialog Preview Video -->
|
||||
<v-dialog v-model="showVideoPreview" max-width="90vw">
|
||||
<v-card rounded="xl" class="pa-2">
|
||||
<v-card-text class="d-flex justify-center" style="padding: 16px;">
|
||||
<video
|
||||
:src="getPreviewUrl(editedItem.MediaUrl)"
|
||||
controls
|
||||
autoplay
|
||||
disablepictureinpicture
|
||||
disableremoteplayback
|
||||
controlslist="nodownload"
|
||||
style="max-width: 100%; max-height: 80vh; border-radius: 12px;"
|
||||
></video>
|
||||
</v-card-text>
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn color="primary" variant="text" @click="showVideoPreview = false">Fermer</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
|
||||
<!-- Dialog Preview Audio -->
|
||||
<v-dialog v-model="showAudioPreview" max-width="500px">
|
||||
<v-card rounded="xl" class="pa-4">
|
||||
<v-card-title class="text-center">
|
||||
<v-icon size="64" color="primary">mdi-music-circle</v-icon>
|
||||
</v-card-title>
|
||||
<v-card-text class="d-flex justify-center" style="padding: 16px;">
|
||||
<audio
|
||||
:src="getPreviewUrl(editedItem.MediaUrl)"
|
||||
controls
|
||||
controlslist="nodownload"
|
||||
disablepictureinpicture
|
||||
disableremoteplayback
|
||||
autoplay
|
||||
style="width: 100%;"
|
||||
></audio>
|
||||
</v-card-text>
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn color="primary" variant="text" @click="showAudioPreview = false">Fermer</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, watch, computed } from 'vue';
|
||||
import axios from 'axios';
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: Boolean,
|
||||
question: {
|
||||
type: Object,
|
||||
default: null
|
||||
},
|
||||
sessionId: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
apiUrl: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
nextIndex: {
|
||||
type: Number,
|
||||
default: 1
|
||||
}
|
||||
});
|
||||
|
||||
const emit = defineEmits(['update:modelValue', 'save', 'delete-media']);
|
||||
|
||||
const visible = computed({
|
||||
get: () => props.modelValue,
|
||||
set: (val) => emit('update:modelValue', val)
|
||||
});
|
||||
|
||||
const defaultQuestion = {
|
||||
QuestionId: '',
|
||||
Type: '',
|
||||
Points: 1,
|
||||
QuestionText: '',
|
||||
MediaUrl: '',
|
||||
Settings: {
|
||||
StartAt: null,
|
||||
StopAt: null,
|
||||
AutoPlay: false,
|
||||
Loop: false,
|
||||
PlayTime: null,
|
||||
DisplayMode: 'Cover',
|
||||
BlurEffect: false
|
||||
},
|
||||
MasterData: {
|
||||
CorrectAnswer: '',
|
||||
MasterNotes: '',
|
||||
Help: ''
|
||||
}
|
||||
};
|
||||
|
||||
const editedItem = reactive(JSON.parse(JSON.stringify(defaultQuestion)));
|
||||
// Copy question data when opening
|
||||
watch(() => props.modelValue, (val) => {
|
||||
if (val) {
|
||||
if (props.question) {
|
||||
Object.assign(editedItem, JSON.parse(JSON.stringify(props.question)));
|
||||
// Ensure nested objects exist
|
||||
if(!editedItem.Settings) editedItem.Settings = {...defaultQuestion.Settings};
|
||||
if(!editedItem.MasterData) editedItem.MasterData = {...defaultQuestion.MasterData};
|
||||
} else {
|
||||
Object.assign(editedItem, JSON.parse(JSON.stringify(defaultQuestion)));
|
||||
// Auto-generate ID: Q-005 for 5th question
|
||||
const idNumber = props.nextIndex.toString().padStart(3, '0');
|
||||
editedItem.QuestionId = `Q-${idNumber}`;
|
||||
}
|
||||
uploadError.value = '';
|
||||
}
|
||||
});
|
||||
|
||||
const isNew = computed(() => !props.question);
|
||||
|
||||
const showFullPreview = ref(false);
|
||||
const showVideoPreview = ref(false);
|
||||
const showAudioPreview = ref(false);
|
||||
const uploading = ref(false);
|
||||
const uploadError = ref('');
|
||||
|
||||
function close() {
|
||||
visible.value = false;
|
||||
}
|
||||
|
||||
function save() {
|
||||
emit('save', JSON.parse(JSON.stringify(editedItem)));
|
||||
close();
|
||||
}
|
||||
|
||||
function getPreviewUrl(relativePath) {
|
||||
if (!relativePath || relativePath.startsWith('http')) return relativePath;
|
||||
return `${props.apiUrl}/quizz/${props.sessionId}${relativePath}`;
|
||||
}
|
||||
|
||||
// Upload Handling
|
||||
const fileInputRef = ref(null);
|
||||
|
||||
function onFileSelected(event) {
|
||||
const file = event.target.files[0];
|
||||
if (file) handleFileUpload(file);
|
||||
event.target.value = '';
|
||||
}
|
||||
|
||||
async function handleFileUpload(file) {
|
||||
if (!file) return;
|
||||
|
||||
uploading.value = true;
|
||||
uploadError.value = '';
|
||||
|
||||
if (!editedItem.Type) {
|
||||
uploadError.value = "Veuillez sélectionner un Type avant d'uploader un fichier.";
|
||||
uploading.value = false;
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const formData = new FormData();
|
||||
formData.append('questionId', editedItem.QuestionId);
|
||||
formData.append('type', editedItem.Type);
|
||||
formData.append('file', file);
|
||||
|
||||
const response = await axios.post(`${props.apiUrl}/upload/${props.sessionId}`, formData);
|
||||
|
||||
if (response.data && response.data.path) {
|
||||
editedItem.MediaUrl = response.data.path;
|
||||
}
|
||||
} catch (e) {
|
||||
console.error("Upload error:", e);
|
||||
uploadError.value = "Erreur lors de l'upload du fichier.";
|
||||
} finally {
|
||||
uploading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
function deleteMedia() {
|
||||
if (!editedItem.MediaUrl) return;
|
||||
|
||||
if (confirm('Voulez-vous vraiment supprimer ce média ? Cette action est irréversible.')) {
|
||||
emit('delete-media', editedItem.MediaUrl);
|
||||
editedItem.MediaUrl = '';
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.text-title-style {
|
||||
color: rgb(var(--v-theme-primary), 1) !important;
|
||||
opacity: 1;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.preview-box {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
background: #333;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
border-radius: 8px;
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.preview-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
162
VApp/src/components/SessionDetails.vue
Normal file
@@ -0,0 +1,162 @@
|
||||
<template>
|
||||
<div>
|
||||
<v-alert v-if="error" type="error" closable class="mb-4">{{ error }}</v-alert>
|
||||
<v-alert rounded="xl" v-if="success" type="success" closable class="ma-15">{{ success }}</v-alert>
|
||||
|
||||
<v-card class="ma-15 pa-5" rounded="xl">
|
||||
<v-card-title class="pb-10">Configuration Générale</v-card-title>
|
||||
<v-card-text>
|
||||
<v-row>
|
||||
<v-col cols="12" md="6">
|
||||
<v-text-field color="primary" v-model="config.PackId" label="ID du Pack" readonly variant="outlined" rounded="xl"></v-text-field>
|
||||
</v-col>
|
||||
<v-col cols="12" md="6">
|
||||
<v-text-field color="primary" v-model="config.PackTitle" label="Titre du Pack" variant="outlined" rounded="xl"></v-text-field>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
|
||||
<v-card rounded="xl" class="pa-5 ma-15">
|
||||
<!-- List container without v-list wrapper for clean transition -->
|
||||
<SessionQuestionsList
|
||||
:questions="config.Questions"
|
||||
:session-id="sessionId"
|
||||
:api-url="apiUrl"
|
||||
@move="(index, dir) => moveQuestion(index, dir)"
|
||||
@update="(q, i) => updateQuestion(q, i)"
|
||||
@delete="(i) => deleteQuestion(i)"
|
||||
@delete-media="(path) => $emit('delete-media', path)"
|
||||
/>
|
||||
</v-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import SessionQuestionsList from '@/components/SessionQuestionsList.vue';
|
||||
|
||||
const props = defineProps({
|
||||
config: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
sessionId: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
apiUrl: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
success: String,
|
||||
error: String
|
||||
});
|
||||
|
||||
const emit = defineEmits(['delete-media', 'rename-media']);
|
||||
const cleanUrl = (url) => url ? url.split('?')[0] : url;
|
||||
|
||||
function deleteQuestion(index) {
|
||||
if (confirm('Êtes-vous sûr de vouloir supprimer cette question ? (Le média sera aussi supprimé)')) {
|
||||
const question = props.config.Questions[index];
|
||||
if (question.MediaUrl) {
|
||||
emit('delete-media', cleanUrl(question.MediaUrl));
|
||||
}
|
||||
props.config.Questions.splice(index, 1);
|
||||
reindexQuestions();
|
||||
}
|
||||
}
|
||||
|
||||
function reindexQuestions() {
|
||||
// Step 1: Rename conflict candidates to temporary names
|
||||
console.log("reindexQuestions: Starting Step 1 (Rename to TMP)");
|
||||
props.config.Questions.forEach((q, i) => {
|
||||
const idNumber = (i + 1).toString().padStart(3, '0');
|
||||
const newId = `Q-${idNumber}`;
|
||||
|
||||
if (q.QuestionId !== newId && q.MediaUrl) {
|
||||
// It will be renamed. Rename to TEMP first.
|
||||
const lastDotIndex = q.MediaUrl.lastIndexOf('.');
|
||||
if (lastDotIndex !== -1) {
|
||||
const ext = q.MediaUrl.substring(lastDotIndex);
|
||||
const lastSlashIndex = q.MediaUrl.lastIndexOf('/');
|
||||
const folderPath = q.MediaUrl.substring(0, lastSlashIndex + 1);
|
||||
|
||||
const tempId = `TMP-${q.QuestionId}`;
|
||||
const tempPath = folderPath + tempId + ext;
|
||||
|
||||
emit('rename-media', {
|
||||
oldPath: cleanUrl(q.MediaUrl),
|
||||
newName: tempId
|
||||
});
|
||||
console.log(`Step 1: Renaming ${q.MediaUrl} to ${tempId}`);
|
||||
|
||||
// Store temp path but DO NOT update MediaUrl yet to avoid browser locking the file
|
||||
q._temp_path = tempPath;
|
||||
|
||||
// Mark for second pass
|
||||
q._temp_renamed = true;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Step 2: Rename all to final names (Delayed to allow FS to settle)
|
||||
setTimeout(() => {
|
||||
console.log("reindexQuestions: Starting Step 2 (Rename to Final)");
|
||||
props.config.Questions.forEach((q, i) => {
|
||||
const idNumber = (i + 1).toString().padStart(3, '0');
|
||||
const newId = `Q-${idNumber}`;
|
||||
|
||||
if (q._temp_renamed && q._temp_path) {
|
||||
// Rename TMP -> Final
|
||||
const lastDotIndex = q.MediaUrl.lastIndexOf('.');
|
||||
const ext = q.MediaUrl.substring(lastDotIndex);
|
||||
const lastSlashIndex = q.MediaUrl.lastIndexOf('/');
|
||||
const folderPath = q.MediaUrl.substring(0, lastSlashIndex + 1);
|
||||
|
||||
console.log(`Step 2: Renaming ${q._temp_path} to ${newId}`);
|
||||
emit('rename-media', {
|
||||
oldPath: cleanUrl(q._temp_path), // Use the stored temp path
|
||||
newName: newId
|
||||
});
|
||||
|
||||
// Update with timestamp to force refresh
|
||||
q.MediaUrl = folderPath + newId + ext + `?t=${Date.now()}`;
|
||||
|
||||
delete q._temp_renamed;
|
||||
delete q._temp_path;
|
||||
}
|
||||
|
||||
// Note: QuestionId update is done here inside the timeout
|
||||
// This might cause a slight reactive delay but ensures alignment
|
||||
q.QuestionId = newId;
|
||||
});
|
||||
}, 200); // 200ms delay
|
||||
}
|
||||
|
||||
function updateQuestion(questionData, index) {
|
||||
if (index > -1) {
|
||||
Object.assign(props.config.Questions[index], questionData);
|
||||
} else {
|
||||
// Add new
|
||||
if (!questionData._ui_key) {
|
||||
Object.defineProperty(questionData, '_ui_key', {
|
||||
value: `q-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
|
||||
writable: true,
|
||||
enumerable: false,
|
||||
configurable: true
|
||||
});
|
||||
}
|
||||
props.config.Questions.push(questionData);
|
||||
reindexQuestions();
|
||||
}
|
||||
}
|
||||
|
||||
function moveQuestion(index, direction) {
|
||||
const newIndex = index + direction;
|
||||
if (newIndex >= 0 && newIndex < props.config.Questions.length) {
|
||||
const item = props.config.Questions.splice(index, 1)[0];
|
||||
props.config.Questions.splice(newIndex, 0, item);
|
||||
reindexQuestions();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
256
VApp/src/components/SessionQuestionsList.vue
Normal file
@@ -0,0 +1,256 @@
|
||||
<template>
|
||||
<div class="session-questions-list">
|
||||
<div class="d-flex justify-space-between align-center mb-5 px-4">
|
||||
<span class="text-h6">Questions ({{ questions.length }})</span>
|
||||
<v-btn rounded="xl" color="secondary" size="small" prepend-icon="mdi-plus" @click="openDialog()">Ajouter</v-btn>
|
||||
</div>
|
||||
|
||||
<div v-if="questions.length === 0" class="text-h5 font-weight-bold text-center text-primary pb-5">
|
||||
Aucune question définie.
|
||||
</div>
|
||||
|
||||
<!-- List container without v-list wrapper for clean transition -->
|
||||
<transition-group name="flip-list" tag="div" class="question-list-container">
|
||||
<v-card v-for="(question, index) in questions" :key="question._ui_key" rounded="xl" variant="outlined" class="mb-2 question-item">
|
||||
<v-card-text class="d-flex align-center py-2">
|
||||
<div class="mr-4 font-weight-bold text-h6 text-primary">{{ index + 1 }}</div>
|
||||
<div class="flex-grow-1">
|
||||
<div class="text-subtitle-1 font-weight-bold">
|
||||
<span class="text-primary opacity-100 pb-2">{{ question.QuestionId }}</span>
|
||||
</div>
|
||||
<div class="text-body-2 font-weight-bold"><span class="text-primary opacity-100">Question :</span> {{ question.QuestionText }}</div>
|
||||
<div class="text-body-2 font-weight-bold"><span class="text-primary opacity-100">Réponse :</span> {{ question.MasterData.CorrectAnswer }}</div>
|
||||
<div class="text-body-2 font-weight-bold"><span class="text-primary opacity-100">Points :</span> {{ question.Points }}</div>
|
||||
<div class="text-body-2 font-weight-bold"><span class="text-primary opacity-100">Temps :</span> {{ question.Settings.PlayTime }} secondes</div>
|
||||
<div class="text-body-2 font-weight-bold"><span class="text-primary opacity-100">Type :</span> {{ question.Type }}</div>
|
||||
</div>
|
||||
|
||||
<div v-if="question.MediaUrl" class="mr-10">
|
||||
<div class="list-preview-box" @click="openPreview(question.Type, question.MediaUrl)" style="cursor: pointer;">
|
||||
<img v-if="question.Type === 'picture'" :src="getPreviewUrl(question.MediaUrl)" class="list-preview-content">
|
||||
<video
|
||||
v-else-if="question.Type === 'video'"
|
||||
:src="getPreviewUrl(question.MediaUrl) + '#t=0.1'"
|
||||
class="list-preview-content"
|
||||
preload="metadata"
|
||||
muted
|
||||
></video>
|
||||
<div v-else-if="question.Type === 'audio'">
|
||||
<v-icon size="32" color="primary">mdi-music</v-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex flex-column gap-1">
|
||||
<v-btn icon="mdi-arrow-up" size="x-large" variant="text" :disabled="index === 0" @click="$emit('move', index, -1)"></v-btn>
|
||||
<v-btn icon="mdi-arrow-down" size="x-large" variant="text" :disabled="index === questions.length - 1" @click="$emit('move', index, 1)"></v-btn>
|
||||
</div>
|
||||
<div class="d-flex ml-2">
|
||||
<v-btn icon="mdi-pencil" size="x-large" variant="text" color="blue" @click="openDialog(question, index)"></v-btn>
|
||||
<v-btn icon="mdi-delete" size="x-large" variant="text" color="red" @click="$emit('delete', index)"></v-btn>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</transition-group>
|
||||
|
||||
<!-- Use persistent prop if needed, though hidden by v-model -->
|
||||
<QuestionEditorDialog
|
||||
v-model="dialogVisible"
|
||||
:question="editingQuestion"
|
||||
:session-id="sessionId"
|
||||
:api-url="apiUrl"
|
||||
:next-index="nextQuestionIndex"
|
||||
@save="onSave"
|
||||
@delete-media="onDeleteMedia"
|
||||
/>
|
||||
|
||||
<!-- Dialog Preview Image -->
|
||||
<v-dialog v-model="showFullPreview" max-width="90vw">
|
||||
<v-card rounded="xl" class="pa-2">
|
||||
<v-card-text class="d-flex justify-center" style="padding: 16px;">
|
||||
<v-img
|
||||
:src="getPreviewUrl(previewMediaUrl)"
|
||||
max-height="80vh"
|
||||
rounded="lg"
|
||||
@click="showFullPreview = false"
|
||||
style="cursor: pointer;"
|
||||
></v-img>
|
||||
</v-card-text>
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn color="primary" variant="text" @click="showFullPreview = false">Fermer</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
|
||||
<!-- Dialog Preview Video -->
|
||||
<v-dialog v-model="showVideoPreview" max-width="90vw">
|
||||
<v-card rounded="xl" class="pa-2">
|
||||
<v-card-text class="d-flex justify-center" style="padding: 16px;">
|
||||
<video
|
||||
:src="getPreviewUrl(previewMediaUrl)"
|
||||
controls
|
||||
autoplay
|
||||
disablepictureinpicture
|
||||
disableremoteplayback
|
||||
controlslist="nodownload"
|
||||
style="max-width: 100%; max-height: 80vh; border-radius: 12px;"
|
||||
></video>
|
||||
</v-card-text>
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn color="primary" variant="text" @click="showVideoPreview = false">Fermer</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
|
||||
<!-- Dialog Preview Audio -->
|
||||
<v-dialog v-model="showAudioPreview" max-width="500px">
|
||||
<v-card rounded="xl" class="pa-4">
|
||||
<v-card-title class="text-center">
|
||||
<v-icon size="64" color="primary">mdi-music-circle</v-icon>
|
||||
</v-card-title>
|
||||
<v-card-text class="d-flex justify-center" style="padding: 16px;">
|
||||
<audio
|
||||
:src="getPreviewUrl(previewMediaUrl)"
|
||||
controls
|
||||
controlslist="nodownload"
|
||||
disablepictureinpicture
|
||||
disableremoteplayback
|
||||
autoplay
|
||||
style="width: 100%;"
|
||||
></audio>
|
||||
</v-card-text>
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn color="primary" variant="text" @click="showAudioPreview = false">Fermer</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import QuestionEditorDialog from './QuestionEditorDialog.vue';
|
||||
|
||||
const props = defineProps({
|
||||
questions: {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => []
|
||||
},
|
||||
sessionId: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
apiUrl: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
});
|
||||
|
||||
const emit = defineEmits(['move', 'delete', 'update', 'delete-media']);
|
||||
|
||||
// Dialog state
|
||||
const dialogVisible = ref(false);
|
||||
const editingQuestion = ref(null);
|
||||
const editingIndex = ref(-1);
|
||||
const nextQuestionIndex = ref(1);
|
||||
|
||||
function openDialog(question = null, index = -1) {
|
||||
editingQuestion.value = question; // if null, dialog treats as new
|
||||
editingIndex.value = index;
|
||||
|
||||
// Calculate next index: if editing, use current index + 1, else use length + 1
|
||||
if (index >= 0) {
|
||||
nextQuestionIndex.value = index + 1;
|
||||
} else {
|
||||
nextQuestionIndex.value = props.questions.length + 1;
|
||||
}
|
||||
|
||||
dialogVisible.value = true;
|
||||
}
|
||||
|
||||
function onSave(questionData) {
|
||||
emit('update', questionData, editingIndex.value);
|
||||
}
|
||||
|
||||
function onDeleteMedia(mediaUrl) {
|
||||
emit('delete-media', mediaUrl);
|
||||
}
|
||||
|
||||
function getPreviewUrl(relativePath) {
|
||||
if (!relativePath || relativePath.startsWith('http')) return relativePath;
|
||||
return `${props.apiUrl}/quizz/${props.sessionId}${relativePath}`;
|
||||
}
|
||||
|
||||
const showFullPreview = ref(false);
|
||||
const showVideoPreview = ref(false);
|
||||
const showAudioPreview = ref(false);
|
||||
const previewMediaUrl = ref('');
|
||||
|
||||
function openPreview(type, url) {
|
||||
previewMediaUrl.value = url;
|
||||
if (type === 'picture') showFullPreview.value = true;
|
||||
else if (type === 'video') showVideoPreview.value = true;
|
||||
else if (type === 'audio') showAudioPreview.value = true;
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.gap-1 {
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.question-list-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.question-item {
|
||||
transition: all 0.5s ease;
|
||||
/* Ensure z-index is handled during move for better visual stack */
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Transition d'animation de liste */
|
||||
.flip-list-move {
|
||||
transition: transform 0.5s;
|
||||
}
|
||||
|
||||
/* Entering items */
|
||||
.flip-list-enter-active,
|
||||
.flip-list-leave-active {
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
.flip-list-enter-from,
|
||||
.flip-list-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateX(30px);
|
||||
}
|
||||
|
||||
/* Ensure removed items are taken out of flow so others can move up smoothly */
|
||||
.flip-list-leave-active {
|
||||
position: absolute;
|
||||
width: 100%; /* Important to maintain width when absolute */
|
||||
}
|
||||
|
||||
.list-preview-box {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
background: #333;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
border-radius: 8px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.list-preview-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
</style>
|
||||
56
VApp/src/components/SessionSelector.vue
Normal file
@@ -0,0 +1,56 @@
|
||||
<template>
|
||||
<v-row class="ml-15 mr-15 mt-5 mb-10 align-center">
|
||||
<v-col cols="12" md="4" class="d-flex align-center gap-2">
|
||||
<v-select
|
||||
v-model="internalValue"
|
||||
:items="sessions"
|
||||
item-title="title"
|
||||
item-value="id"
|
||||
label="Choisir une session"
|
||||
variant="outlined"
|
||||
hide-details
|
||||
rounded="xl"
|
||||
class="flex-grow-1"
|
||||
></v-select>
|
||||
<v-btn icon="mdi-plus" color="green" variant="tonal" @click="$emit('create')" title="Nouvelle Session"></v-btn>
|
||||
<v-btn icon="mdi-delete" color="red" variant="tonal" @click="$emit('delete')" :disabled="!internalValue" title="Supprimer Session"></v-btn>
|
||||
</v-col>
|
||||
<v-col class="text-right">
|
||||
<v-btn rounded="xl" color="primary" @click="$emit('save')" :loading="saving" :disabled="!internalValue">
|
||||
<v-icon start>mdi-content-save</v-icon> Sauvegarder
|
||||
</v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
sessions: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
saving: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
});
|
||||
|
||||
const emit = defineEmits(['update:modelValue', 'create', 'delete', 'save']);
|
||||
|
||||
const internalValue = computed({
|
||||
get: () => props.modelValue,
|
||||
set: (val) => emit('update:modelValue', val)
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.gap-2 {
|
||||
gap: 8px;
|
||||
}
|
||||
</style>
|
||||
@@ -3,11 +3,23 @@
|
||||
// This allows runtime configuration changes without rebuilding the app.
|
||||
|
||||
const defaults = {
|
||||
mqttBrokerUrl: 'ws://192.168.73.252:9001',
|
||||
mqttBrokerUrl: 'ws://192.168.1.201:9001',
|
||||
redBuzzerIP: '192.168.73.40',
|
||||
blueBuzzerIP: '192.168.73.41',
|
||||
orangeBuzzerIP: '192.168.73.42',
|
||||
greenBuzzerIP: '192.168.73.43'
|
||||
greenBuzzerIP: '192.168.73.43',
|
||||
apiUrl: 'http://192.168.1.178:3001',
|
||||
topics: {
|
||||
requestList: 'game/session/list/request',
|
||||
responseList: 'game/session/list/response',
|
||||
requestConfig: 'game/session/config/request',
|
||||
getConfig: 'game/session/config/get',
|
||||
updateConfig: 'game/session/config/update',
|
||||
createSession: 'game/session/create',
|
||||
deleteSession: 'game/session/delete',
|
||||
deleteMedia: 'game/session/media/delete',
|
||||
renameMedia: 'game/session/media/rename'
|
||||
}
|
||||
};
|
||||
|
||||
const config = window.APP_CONFIG || defaults;
|
||||
|
||||
@@ -32,6 +32,11 @@ const router = createRouter({
|
||||
path: '/settings',
|
||||
name: 'Paramètres',
|
||||
component: () => import('@/views/SettingsView.vue')
|
||||
},
|
||||
{
|
||||
path: '/session-editor',
|
||||
name: 'Éditeur de Session',
|
||||
component: () => import('@/views/SessionEditor.vue')
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
@@ -1,47 +1,35 @@
|
||||
<template>
|
||||
<div class="main_div">
|
||||
<div>
|
||||
<v-container class="score_div_main">
|
||||
<v-container class="score_div color-blue">
|
||||
<v-container class="score_div_main" :style="getMainShadow()">
|
||||
<v-container class="score_div color-blue" :class="[getDimClass('Blue'), getFlashClass('Blue')]">
|
||||
<div class="d-flex flex-column align-center">
|
||||
<Transition name="score-fade" mode="out-in">
|
||||
<span :key="scores.BlueRoundScore" class="v-label-round-score">Manche : {{ scores.BlueRoundScore }}</span>
|
||||
</Transition>
|
||||
<Transition name="score-fade" mode="out-in">
|
||||
<span :key="scores.BlueTotalScore" class="v-label-score">{{ scores.BlueTotalScore }}</span>
|
||||
<span :key="scores.BlueTotalScore" class="v-label-score">{{ scores.BlueRoundScore }}</span>
|
||||
</Transition>
|
||||
</div>
|
||||
</v-container>
|
||||
<v-container class="score_div color-red">
|
||||
<v-container class="score_div color-red" :class="[getDimClass('Red'), getFlashClass('Red')]">
|
||||
<div class="d-flex flex-column align-center">
|
||||
<Transition name="score-fade" mode="out-in">
|
||||
<span :key="scores.RedRoundScore" class="v-label-round-score">Manche : {{ scores.RedRoundScore }}</span>
|
||||
</Transition>
|
||||
<Transition name="score-fade" mode="out-in">
|
||||
<span :key="scores.RedTotalScore" class="v-label-score">{{ scores.RedTotalScore }}</span>
|
||||
<span :key="scores.RedTotalScore" class="v-label-score">{{ scores.RedRoundScore }}</span>
|
||||
</Transition>
|
||||
</div>
|
||||
</v-container>
|
||||
<v-container class="score_div color-white d-flex align-center justify-center">
|
||||
<span class="v-label-time">{{ timerDisplay }}</span>
|
||||
</v-container>
|
||||
<v-container class="score_div color-green">
|
||||
<v-container class="score_div color-green" :class="[getDimClass('Green'), getFlashClass('Green')]">
|
||||
<div class="d-flex flex-column align-center">
|
||||
<Transition name="score-fade" mode="out-in">
|
||||
<span :key="scores.GreenRoundScore" class="v-label-round-score">Manche : {{ scores.GreenRoundScore }}</span>
|
||||
</Transition>
|
||||
<Transition name="score-fade" mode="out-in">
|
||||
<span :key="scores.GreenTotalScore" class="v-label-score">{{ scores.GreenTotalScore }}</span>
|
||||
<span :key="scores.GreenTotalScore" class="v-label-score">{{ scores.GreenRoundScore }}</span>
|
||||
</Transition>
|
||||
</div>
|
||||
</v-container>
|
||||
<v-container class="score_div color-yellow">
|
||||
<v-container class="score_div color-yellow" :class="[getDimClass('Yellow'), getFlashClass('Yellow')]">
|
||||
<div class="d-flex flex-column align-center">
|
||||
<Transition name="score-fade" mode="out-in">
|
||||
<span :key="scores.YellowRoundScore" class="v-label-round-score">Manche : {{ scores.YellowRoundScore }}</span>
|
||||
</Transition>
|
||||
<Transition name="score-fade" mode="out-in">
|
||||
<span :key="scores.YellowTotalScore" class="v-label-score">{{ scores.YellowTotalScore }}</span>
|
||||
<span :key="scores.YellowTotalScore" class="v-label-score">{{ scores.YellowRoundScore }}</span>
|
||||
</Transition>
|
||||
</div>
|
||||
</v-container>
|
||||
@@ -56,7 +44,6 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
//import VideoPlayer from "@/components/VideoPlayer.vue"
|
||||
import GameMedia from "@/components/GameMedia.vue"
|
||||
import HidingOverlay from "@/components/HidingOverlay.vue"
|
||||
import { onMounted, reactive } from 'vue';
|
||||
@@ -64,9 +51,11 @@
|
||||
import config from '@/config.js'
|
||||
import quizStore from '@/store/quizStore';
|
||||
|
||||
// Configuration MQTT
|
||||
const mqttBrokerUrl = config.mqttBrokerUrl
|
||||
const client = mqtt.connect(mqttBrokerUrl)
|
||||
|
||||
// Objet réactif pour stocker les scores des équipes
|
||||
const scores = reactive({
|
||||
RedTotalScore: 0,
|
||||
BlueTotalScore: 0,
|
||||
@@ -79,14 +68,17 @@
|
||||
});
|
||||
|
||||
import { ref } from 'vue';
|
||||
// Variable réactive pour l'affichage du timer
|
||||
const timerDisplay = ref('00:00');
|
||||
|
||||
// Fonction pour formater le temps en mm:ss
|
||||
function formatTime(seconds) {
|
||||
const mins = Math.floor(seconds / 60);
|
||||
const secs = seconds % 60;
|
||||
return `${String(mins).padStart(2, '0')}:${String(secs).padStart(2, '0')}`;
|
||||
}
|
||||
|
||||
// Fonction de gestion des messages MQTT reçus
|
||||
function handleMessage(topic, message) {
|
||||
let parsedMessage;
|
||||
try {
|
||||
@@ -96,6 +88,7 @@
|
||||
return;
|
||||
}
|
||||
|
||||
// Mise à jour des scores si le message vient du topic 'game/score'
|
||||
if (topic === 'game/score' && parsedMessage.TEAM) {
|
||||
scores.RedTotalScore = parsedMessage.TEAM.Red.TotalScore
|
||||
scores.BlueTotalScore = parsedMessage.TEAM.Blue.TotalScore
|
||||
@@ -108,11 +101,13 @@
|
||||
scores.GreenRoundScore = parsedMessage.TEAM.Green.RoundScore
|
||||
}
|
||||
|
||||
// Mise à jour du timer si le message vient du topic 'game/timer'
|
||||
if (topic === 'game/timer' && parsedMessage.time !== undefined) {
|
||||
timerDisplay.value = formatTime(parsedMessage.time);
|
||||
}
|
||||
}
|
||||
|
||||
// Fonction utilitaire pour s'abonner à un topic MQTT
|
||||
function subscribeToTopic(topic, callback) {
|
||||
client.subscribe(topic)
|
||||
client.on('message', (receivedTopic, message) => { callback(receivedTopic.toString(), message.toString())
|
||||
@@ -120,15 +115,105 @@
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
// Initialisation du store du quiz
|
||||
quizStore.actions.init();
|
||||
|
||||
// Abonnement aux topics MQTT pour les scores et le timer
|
||||
subscribeToTopic('game/score', (topic, message) => {
|
||||
handleMessage(topic, message);
|
||||
});
|
||||
subscribeToTopic('game/timer', (topic, message) => {
|
||||
handleMessage(topic, message);
|
||||
});
|
||||
|
||||
// Demande de rafraîchissement des scores au chargement
|
||||
// Cela permet de récupérer les scores actuels même après un rechargement de page
|
||||
client.publish('game/score/request', '{}');
|
||||
|
||||
// Abonnement au statut des buzzers
|
||||
subscribeToTopic('vulture/buzzer/status', (topic, message) => {
|
||||
try {
|
||||
const data = JSON.parse(message);
|
||||
if (data.status === 'blocked') {
|
||||
const color = data.color || '';
|
||||
const team = identifyTeamByColor(color);
|
||||
activeTeam.value = team;
|
||||
|
||||
// Trigger flash effect
|
||||
if (team) {
|
||||
flashingTeam.value = team;
|
||||
setTimeout(() => {
|
||||
if (flashingTeam.value === team) {
|
||||
flashingTeam.value = null;
|
||||
}
|
||||
}, 2000);
|
||||
}
|
||||
|
||||
console.log(`Buzzer Blocked: Color=${color}, Identified Team=${activeTeam.value}`);
|
||||
} else if (data.status === 'unblocked') {
|
||||
activeTeam.value = null;
|
||||
flashingTeam.value = null;
|
||||
console.log('Buzzer Unblocked');
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('Error parsing buzzer status', e);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
const activeTeam = ref(null);
|
||||
const flashingTeam = ref(null);
|
||||
|
||||
function identifyTeamByColor(hexColor) {
|
||||
if (!hexColor) return null;
|
||||
// Normalisation (retirer le # et mettre en majuscule)
|
||||
const color = hexColor.replace('#', '').toUpperCase();
|
||||
|
||||
// Liste des couleurs connues (Theme + Standard)
|
||||
// RED
|
||||
if (['FF0000', 'D42828'].includes(color)) return 'Red';
|
||||
// BLUE
|
||||
if (['0000FF', '2867D4'].includes(color)) return 'Blue';
|
||||
// GREEN
|
||||
if (['00FF00', '28D42E'].includes(color)) return 'Green';
|
||||
// YELLOW
|
||||
if (['FFFF00', 'D4D100'].includes(color)) return 'Yellow';
|
||||
|
||||
// Fallback: Détection approximative par composante dominante
|
||||
const r = parseInt(color.substr(0, 2), 16);
|
||||
const g = parseInt(color.substr(2, 2), 16);
|
||||
const b = parseInt(color.substr(4, 2), 16);
|
||||
|
||||
if (r > 200 && g > 200 && b < 100) return 'Yellow';
|
||||
if (g > r && g > b) return 'Green';
|
||||
if (b > r && b > g) return 'Blue';
|
||||
if (r > g && r > b) return 'Red';
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
function getDimClass(team) {
|
||||
if (!activeTeam.value) return '';
|
||||
return activeTeam.value !== team ? 'dimmed-score' : '';
|
||||
}
|
||||
|
||||
function getFlashClass(team) {
|
||||
return flashingTeam.value === team ? 'flashing-glow' : '';
|
||||
}
|
||||
|
||||
function getMainShadow() {
|
||||
if (!activeTeam.value) return {};
|
||||
|
||||
let shadowColor = '';
|
||||
switch (activeTeam.value) {
|
||||
case 'Blue': shadowColor = 'rgb(40, 103, 212)'; break;
|
||||
case 'Red': shadowColor = 'rgb(212, 40, 40)'; break;
|
||||
case 'Green': shadowColor = 'rgb(40, 212, 46)'; break;
|
||||
case 'Yellow': shadowColor = 'rgb(212, 209, 0)'; break;
|
||||
default: return {};
|
||||
}
|
||||
return { boxShadow: `0px 3px 45px ${shadowColor}` };
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@@ -145,7 +230,7 @@
|
||||
background-color: rgb(40, 40, 40);
|
||||
padding: 25px 30px;
|
||||
border-radius: 0px 0px 30px 30px;
|
||||
box-shadow: 0px 3px 45px rgb(45, 115, 166);
|
||||
box-shadow: 0px 3px 45px rgb(141, 141, 141);
|
||||
}
|
||||
.score_div {
|
||||
height: 100px;
|
||||
@@ -213,4 +298,22 @@
|
||||
.score-fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.dimmed-score {
|
||||
opacity: 0.3;
|
||||
transform: scale(0.95);
|
||||
filter: grayscale(100%);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
@keyframes flash-glow {
|
||||
0%, 100% { box-shadow: 0 0 0 rgba(255, 255, 255, 0); }
|
||||
10% { box-shadow: 0 0 20px 10px rgba(255, 255, 255, 0.9); }
|
||||
}
|
||||
|
||||
.flashing-glow {
|
||||
animation: flash-glow 0.5s ease-in-out infinite;
|
||||
z-index: 10;
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="score-grid">
|
||||
<div class="score-cell cell-blue color-blue">
|
||||
<div class="score-cell cell-blue color-blue" :class="[getDimClass('Blue'), getFlashClass('Blue')]">
|
||||
<div class="score-content">
|
||||
<div class="score-info info-left">
|
||||
<div class="team-name">Bleue</div>
|
||||
@@ -10,14 +10,18 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="score-main">
|
||||
<div class="team-score main-score">{{ scores.BlueRoundScore }}</div>
|
||||
<Transition name="score-pop" mode="out-in">
|
||||
<div :key="scores.BlueRoundScore" class="team-score main-score">{{ scores.BlueRoundScore }}</div>
|
||||
</Transition>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="score-cell cell-red color-red">
|
||||
<div class="score-cell cell-red color-red" :class="[getDimClass('Red'), getFlashClass('Red')]">
|
||||
<div class="score-content">
|
||||
<div class="score-main">
|
||||
<div class="team-score main-score">{{ scores.RedRoundScore }}</div>
|
||||
<Transition name="score-pop" mode="out-in">
|
||||
<div :key="scores.RedRoundScore" class="team-score main-score">{{ scores.RedRoundScore }}</div>
|
||||
</Transition>
|
||||
</div>
|
||||
<div class="score-info info-right">
|
||||
<div class="team-name">Rouge</div>
|
||||
@@ -28,7 +32,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="score-cell cell-green color-green">
|
||||
<div class="score-cell cell-green color-green" :class="[getDimClass('Green'), getFlashClass('Green')]">
|
||||
<div class="score-content">
|
||||
<div class="score-info info-left">
|
||||
<div class="team-name">Verte</div>
|
||||
@@ -38,14 +42,18 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="score-main">
|
||||
<div class="team-score main-score">{{ scores.GreenRoundScore }}</div>
|
||||
<Transition name="score-pop" mode="out-in">
|
||||
<div :key="scores.GreenRoundScore" class="team-score main-score">{{ scores.GreenRoundScore }}</div>
|
||||
</Transition>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="score-cell cell-yellow color-yellow">
|
||||
<div class="score-cell cell-yellow color-yellow" :class="[getDimClass('Yellow'), getFlashClass('Yellow')]">
|
||||
<div class="score-content">
|
||||
<div class="score-main">
|
||||
<div class="team-score main-score">{{ scores.YellowRoundScore }}</div>
|
||||
<Transition name="score-pop" mode="out-in">
|
||||
<div :key="scores.YellowRoundScore" class="team-score main-score">{{ scores.YellowRoundScore }}</div>
|
||||
</Transition>
|
||||
</div>
|
||||
<div class="score-info info-right">
|
||||
<div class="team-name">Jaune</div>
|
||||
@@ -132,8 +140,74 @@
|
||||
subscribeToTopic('game/timer', (topic, message) => {
|
||||
handleMessage(topic, message);
|
||||
});
|
||||
// Request score refresh
|
||||
client.publish('game/score/request', '{}');
|
||||
|
||||
subscribeToTopic('vulture/buzzer/status', (topic, message) => {
|
||||
try {
|
||||
const data = JSON.parse(message);
|
||||
if (data.status === 'blocked') {
|
||||
const color = data.color || '';
|
||||
const team = identifyTeamByColor(color);
|
||||
activeTeam.value = team;
|
||||
|
||||
// Trigger flash effect
|
||||
if (team) {
|
||||
flashingTeam.value = team;
|
||||
setTimeout(() => {
|
||||
if (flashingTeam.value === team) {
|
||||
flashingTeam.value = null;
|
||||
}
|
||||
}, 2000);
|
||||
}
|
||||
} else if (data.status === 'unblocked') {
|
||||
activeTeam.value = null;
|
||||
flashingTeam.value = null;
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('Error parsing buzzer status', e);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
const activeTeam = ref(null);
|
||||
const flashingTeam = ref(null);
|
||||
|
||||
function identifyTeamByColor(hexColor) {
|
||||
if (!hexColor) return null;
|
||||
const color = hexColor.replace('#', '').toUpperCase();
|
||||
|
||||
// RED
|
||||
if (['FF0000', 'D42828'].includes(color)) return 'Red';
|
||||
// BLUE
|
||||
if (['0000FF', '2867D4'].includes(color)) return 'Blue';
|
||||
// GREEN
|
||||
if (['00FF00', '28D42E'].includes(color)) return 'Green';
|
||||
// YELLOW
|
||||
if (['FFFF00', 'D4D100'].includes(color)) return 'Yellow';
|
||||
|
||||
// Fallback
|
||||
const r = parseInt(color.substr(0, 2), 16);
|
||||
const g = parseInt(color.substr(2, 2), 16);
|
||||
const b = parseInt(color.substr(4, 2), 16);
|
||||
|
||||
if (r > 200 && g > 200 && b < 100) return 'Yellow';
|
||||
if (g > r && g > b) return 'Green';
|
||||
if (b > r && b > g) return 'Blue';
|
||||
if (r > g && r > b) return 'Red';
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
function getDimClass(team) {
|
||||
if (!activeTeam.value) return '';
|
||||
return activeTeam.value !== team ? 'dimmed-score' : '';
|
||||
}
|
||||
|
||||
function getFlashClass(team) {
|
||||
return flashingTeam.value === team ? 'flashing-glow' : '';
|
||||
}
|
||||
|
||||
onUnmounted(() => {
|
||||
if (client) {
|
||||
client.end()
|
||||
@@ -299,4 +373,53 @@
|
||||
.color-yellow {
|
||||
background: linear-gradient(135deg, rgb(var(--v-theme-YellowBuzzer)), #5a5a1a);
|
||||
}
|
||||
|
||||
/* Score Pop Animation */
|
||||
.score-pop-enter-active {
|
||||
animation: pop-in 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
}
|
||||
.score-pop-leave-active {
|
||||
animation: pop-out 0.2s ease-in;
|
||||
}
|
||||
|
||||
@keyframes pop-in {
|
||||
0% {
|
||||
transform: scale(0.5);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pop-out {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: scale(1.5);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.dimmed-score {
|
||||
opacity: 0.3;
|
||||
transform: scale(0.95);
|
||||
filter: grayscale(100%);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
@keyframes flash-glow {
|
||||
0%, 100% { box-shadow: 0 0 0 rgba(255, 255, 255, 0); }
|
||||
10% { box-shadow: 0 0 60px 20px rgba(255, 255, 255, 0.9); }
|
||||
}
|
||||
|
||||
.flashing-glow {
|
||||
animation: flash-glow 0.5s ease-in-out infinite;
|
||||
z-index: 10;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
314
VApp/src/views/SessionEditor.vue
Normal file
@@ -0,0 +1,314 @@
|
||||
<template>
|
||||
<v-container>
|
||||
<SessionSelector
|
||||
v-model="selectedSessionId"
|
||||
:sessions="availableSessions"
|
||||
:saving="saving"
|
||||
@update:model-value="loadSession"
|
||||
@create="openCreateDialog"
|
||||
@delete="deleteDialogVisible = true"
|
||||
@save="saveSession"
|
||||
/>
|
||||
|
||||
<div v-if="!selectedSessionId" class="text-center mt-10 text-h5 grey--text">
|
||||
Veuillez sélectionner une session pour commencer.
|
||||
</div>
|
||||
|
||||
<div v-else>
|
||||
<SessionDetails
|
||||
:config="sessionConfig"
|
||||
:session-id="selectedSessionId"
|
||||
:api-url="API_URL"
|
||||
:success="success"
|
||||
:error="error"
|
||||
@delete-media="deleteMediaFile"
|
||||
@rename-media="renameMediaFile"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Dialog Création de session -->
|
||||
<v-dialog v-model="createDialogVisible" persistent max-width="500px">
|
||||
<v-card rounded="xl">
|
||||
<v-card-title class="text-h5">Nouvelle Session</v-card-title>
|
||||
<v-card-text>
|
||||
<v-text-field
|
||||
v-model="newSessionName"
|
||||
label="Nom de la session"
|
||||
variant="outlined"
|
||||
autofocus
|
||||
@keyup.enter="createSession"
|
||||
></v-text-field>
|
||||
</v-card-text>
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn color="grey" variant="text" @click="createDialogVisible = false">Annuler</v-btn>
|
||||
<v-btn color="green" variant="elevated" @click="createSession" :disabled="!newSessionName">Créer</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
|
||||
<!-- Dialog Suppression de session -->
|
||||
<v-dialog v-model="deleteDialogVisible" max-width="400px">
|
||||
<v-card rounded="xl">
|
||||
<v-card-title class="text-h5 delete-dialog-title-style">Supprimer la session ?</v-card-title>
|
||||
<v-card-text>
|
||||
Cette action est irréversible ! Tous les fichiers de cette session seront supprimés.
|
||||
</v-card-text>
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn rounded="xl" class="mb-3" color="grey" variant="text" @click="deleteDialogVisible = false">Annuler</v-btn>
|
||||
<v-btn rounded="xl" class="mb-3 mr-3" color="red" variant="elevated" @click="confirmDeleteSession">Supprimer</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import SessionSelector from '@/components/SessionSelector.vue';
|
||||
import SessionDetails from '@/components/SessionDetails.vue';
|
||||
import { ref, reactive, onMounted, onUnmounted } from 'vue';
|
||||
import mqtt from 'mqtt';
|
||||
import config from '@/config.js';
|
||||
|
||||
// --- État de l'Application ---
|
||||
|
||||
// Liste des sessions disponibles récupérées via MQTT
|
||||
const availableSessions = ref([]);
|
||||
|
||||
// ID de la session actuellement sélectionnée
|
||||
const selectedSessionId = ref(null);
|
||||
|
||||
// Configuration de la session active (Lié au formulaire)
|
||||
const sessionConfig = reactive({
|
||||
PackId: '',
|
||||
PackTitle: '',
|
||||
Questions: []
|
||||
});
|
||||
|
||||
// --- Gestion des Dialogues et États de Chargement ---
|
||||
|
||||
// Création de session
|
||||
const createDialogVisible = ref(false);
|
||||
const newSessionName = ref('');
|
||||
|
||||
// Suppression de session
|
||||
const deleteDialogVisible = ref(false);
|
||||
|
||||
// États UI
|
||||
const saving = ref(false);
|
||||
const error = ref('');
|
||||
const success = ref('');
|
||||
|
||||
// --- Configuration MQTT & API ---
|
||||
|
||||
const mqttBrokerUrl = config.mqttBrokerUrl;
|
||||
|
||||
// URL API (Backend Express) définie dans config.js
|
||||
const API_URL = config.apiUrl;
|
||||
|
||||
let client = null;
|
||||
|
||||
// Topics MQTT utilisés pour la communication avec le backend
|
||||
const topics = config.topics;
|
||||
|
||||
// --- Cycle de Vie du Composant ---
|
||||
|
||||
onMounted(() => {
|
||||
// Connexion au broker MQTT
|
||||
client = mqtt.connect(mqttBrokerUrl);
|
||||
|
||||
client.on('connect', () => {
|
||||
console.log('SessionEditor: Connecté à MQTT');
|
||||
client.subscribe(topics.responseList);
|
||||
client.subscribe(topics.getConfig);
|
||||
|
||||
// Demande initiale de la liste des sessions
|
||||
client.publish(topics.requestList, '{}');
|
||||
});
|
||||
|
||||
client.on('message', (topic, message) => {
|
||||
if (topic === topics.responseList) {
|
||||
try {
|
||||
// Mise à jour de la liste des sessions
|
||||
availableSessions.value = JSON.parse(message.toString());
|
||||
console.log("Sessions reçues:", availableSessions.value);
|
||||
} catch (e) { console.error(e); }
|
||||
}
|
||||
else if (topic === topics.getConfig) {
|
||||
try {
|
||||
// Chargement de la configuration de la session reçue
|
||||
const data = JSON.parse(message.toString());
|
||||
|
||||
// Réinitialisation et peuplement de sessionConfig
|
||||
sessionConfig.Questions = [];
|
||||
|
||||
// Ajout d'une clé UI unique pour chaque question (pour les animations de liste)
|
||||
if (Array.isArray(data.Questions)) {
|
||||
data.Questions.forEach(q => {
|
||||
if (!q._ui_key) {
|
||||
Object.defineProperty(q, '_ui_key', {
|
||||
value: `q-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
|
||||
writable: true,
|
||||
enumerable: false,
|
||||
configurable: true
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Fusion des données reçues dans l'objet réactif
|
||||
Object.assign(sessionConfig, data);
|
||||
console.log('Configuration de session chargée');
|
||||
} catch (e) {
|
||||
console.error('Erreur parsing config session', e);
|
||||
error.value = "Erreur lors du chargement de la configuration.";
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
if (client) client.end();
|
||||
});
|
||||
|
||||
// --- Méthodes Métier ---
|
||||
|
||||
// Charge la configuration de la session sélectionnée
|
||||
function loadSession() {
|
||||
if (!selectedSessionId.value) return;
|
||||
console.log("Chargement session:", selectedSessionId.value);
|
||||
client.publish(topics.requestConfig, JSON.stringify({ SessionId: selectedSessionId.value }));
|
||||
}
|
||||
|
||||
// Envoie une requête pour supprimer un fichier média spécifique
|
||||
function deleteMediaFile(mediaPath) {
|
||||
try {
|
||||
const payload = JSON.stringify({
|
||||
SessionId: selectedSessionId.value,
|
||||
MediaPath: mediaPath
|
||||
});
|
||||
client.publish(topics.deleteMedia, payload);
|
||||
console.log("Requête suppression média envoyée:", payload);
|
||||
} catch (e) {
|
||||
console.error("Erreur suppression média", e);
|
||||
}
|
||||
}
|
||||
|
||||
// Envoie une requête pour renommer un fichier média
|
||||
function renameMediaFile({ oldPath, newName }) {
|
||||
try {
|
||||
const payload = JSON.stringify({
|
||||
SessionId: selectedSessionId.value,
|
||||
OldPath: oldPath,
|
||||
NewName: newName
|
||||
});
|
||||
client.publish(topics.renameMedia, payload);
|
||||
console.log("Requête renommage média envoyée:", payload);
|
||||
} catch (e) {
|
||||
console.error("Erreur renommage média", e);
|
||||
}
|
||||
}
|
||||
|
||||
// Ouvre le dialogue de création
|
||||
function openCreateDialog() {
|
||||
newSessionName.value = '';
|
||||
createDialogVisible.value = true;
|
||||
}
|
||||
|
||||
// Crée une nouvelle session via MQTT
|
||||
function createSession() {
|
||||
if (!newSessionName.value) return;
|
||||
|
||||
console.log("Création session:", newSessionName.value);
|
||||
|
||||
try {
|
||||
const payload = JSON.stringify({ SessionName: newSessionName.value });
|
||||
client.publish(topics.createSession, payload);
|
||||
|
||||
success.value = "Demande de création envoyée...";
|
||||
setTimeout(() => success.value = '', 3000);
|
||||
|
||||
createDialogVisible.value = false;
|
||||
} catch (e) {
|
||||
console.error("Erreur création session", e);
|
||||
error.value = "Erreur lors de la création.";
|
||||
}
|
||||
}
|
||||
|
||||
// Supprime la session actuellement sélectionnée
|
||||
function confirmDeleteSession() {
|
||||
if (!selectedSessionId.value) return;
|
||||
|
||||
console.log("Suppression session:", selectedSessionId.value);
|
||||
|
||||
try {
|
||||
const payload = JSON.stringify({ SessionId: selectedSessionId.value });
|
||||
client.publish(topics.deleteSession, payload);
|
||||
|
||||
success.value = "Demande de suppression envoyée...";
|
||||
setTimeout(() => success.value = '', 3000);
|
||||
|
||||
deleteDialogVisible.value = false;
|
||||
selectedSessionId.value = null;
|
||||
sessionConfig.Questions = [];
|
||||
sessionConfig.PackId = '';
|
||||
sessionConfig.PackTitle = '';
|
||||
} catch (e) {
|
||||
console.error("Erreur suppression session", e);
|
||||
error.value = "Erreur lors de la suppression.";
|
||||
}
|
||||
}
|
||||
|
||||
// Sauvegarde la configuration actuelle via MQTT
|
||||
function saveSession() {
|
||||
if (!selectedSessionId.value) return;
|
||||
saving.value = true;
|
||||
success.value = '';
|
||||
error.value = '';
|
||||
|
||||
try {
|
||||
const payload = JSON.stringify({
|
||||
SessionId: selectedSessionId.value,
|
||||
Config: JSON.parse(JSON.stringify(sessionConfig, (key, value) => {
|
||||
// Filter out keys starting with underscore (internal UI state)
|
||||
if (key.startsWith('_')) return undefined;
|
||||
// Filter out cache busting querystring
|
||||
if (key === 'MediaUrl' && typeof value === 'string') {
|
||||
return value.split('?')[0];
|
||||
}
|
||||
return value;
|
||||
}))
|
||||
});
|
||||
client.publish(topics.updateConfig, payload);
|
||||
success.value = "Sauvegarde envoyée.";
|
||||
setTimeout(() => success.value = '', 3000);
|
||||
} catch (e) {
|
||||
error.value = "Erreur lors de la sauvegarde : " + e.message;
|
||||
} finally {
|
||||
saving.value = false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.gap-1 {
|
||||
gap: 4px;
|
||||
}
|
||||
.gap-2 {
|
||||
gap: 8px;
|
||||
}
|
||||
.delete-dialog-title-style {
|
||||
color: rgb(var(--v-theme-primary)) !important;
|
||||
padding-left: 6%;
|
||||
padding-top: 3%;
|
||||
}
|
||||
.text-title-style {
|
||||
color: rgb(var(--v-theme-primary), 1) !important;
|
||||
opacity: 1;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
@@ -3,94 +3,100 @@
|
||||
Construction et lancements des containers.
|
||||
Toutes les commandes sont à taper depuis la racine du dépôt.
|
||||
|
||||
## Upgrade :
|
||||
|
||||
```bash
|
||||
git pull
|
||||
podmane-compose build
|
||||
systemctl --user restart vulture-stack.service
|
||||
pkill -u vulture cage
|
||||
```
|
||||
|
||||
## Build
|
||||
|
||||
```bash
|
||||
./VContainers/build.sh
|
||||
```
|
||||
|
||||
Ou manuellement :
|
||||
```bash
|
||||
podman build . -f ./VContainers/VNode/Containerfile -t vnode
|
||||
podman build . -f ./VContainers/VApp/Containerfile -t vapp
|
||||
podman-compose build
|
||||
```
|
||||
|
||||
## Run
|
||||
|
||||
### Mode Manuel avec Scripts
|
||||
|
||||
**Développement (localhost):**
|
||||
```bash
|
||||
./VContainers/run_dev.sh
|
||||
```
|
||||
|
||||
**Production (IP 192.168.73.252):**
|
||||
```bash
|
||||
./VContainers/run_prod.sh
|
||||
```
|
||||
|
||||
Les containers sont lancés sur le réseau bridge `vulture-net` :
|
||||
- **nanomq** : Broker MQTT (ports 1883, 9001, 8081, 8083, 8883)
|
||||
- **vnode** : Services Node.js backend
|
||||
- **vapp** : Frontend Vue.js (port 8080)
|
||||
`podman-compose up -d`
|
||||
|
||||
## Stop
|
||||
|
||||
```bash
|
||||
./VContainers/stop.sh
|
||||
```
|
||||
`podman-compose down`
|
||||
|
||||
Ou manuellement :
|
||||
```bash
|
||||
podman stop vapp vnode nanomq
|
||||
podman network rm vulture-net
|
||||
```
|
||||
## Installation
|
||||
|
||||
## Lancement automatique avec Quadlet
|
||||
### Automatisation au boot (User Mode)
|
||||
|
||||
Copier les fichiers du répertoire `quadlet` vers `~/.config/containers/systemd/`
|
||||
#### Étape A : Activer la persistance de l'utilisateur
|
||||
|
||||
Par défaut, Fedora tue les processus utilisateurs à la déconnexion. On active le "lingering" pour que vos containers tournent dès le boot :
|
||||
|
||||
```bash
|
||||
cp ./VContainers/quadlet/*.network ~/.config/containers/systemd/
|
||||
cp ./VContainers/quadlet/*.container ~/.config/containers/systemd/
|
||||
sudo loginctl enable-linger $USER
|
||||
```
|
||||
#### Étape B : Créer l'unité Systemd
|
||||
|
||||
Créez le dossier pour les services utilisateurs : `mkdir -p ~/.config/systemd/user/`
|
||||
|
||||
Créez le fichier ~/.config/systemd/user/vulture-stack.service :
|
||||
```TOML
|
||||
[Unit]
|
||||
Description=Vulture Project Stack (Podman Compose)
|
||||
After=network-online.target
|
||||
|
||||
[Service]
|
||||
Type=simple
|
||||
WorkingDirectory=%h/Vulture
|
||||
# Lancement au boot
|
||||
ExecStart=/usr/bin/podman-compose up
|
||||
# Arrêt propre
|
||||
ExecStop=/usr/bin/podman-compose down
|
||||
Restart=always
|
||||
|
||||
[Install]
|
||||
WantedBy=default.target
|
||||
```
|
||||
|
||||
**Pour l'environnement de développement :**
|
||||
#### Étape C : Activer le service
|
||||
|
||||
```bash
|
||||
systemctl --user daemon-reload
|
||||
systemctl --user enable --now nanomq.service
|
||||
systemctl --user enable --now vnode.service
|
||||
systemctl --user enable --now vapp_dev.service
|
||||
systemctl --user enable vulture-stack.service
|
||||
systemctl --user start vulture-stack.service
|
||||
```
|
||||
|
||||
**Pour l'environnement de production :**
|
||||
## Surveillance des Containers (Backend)
|
||||
|
||||
Puisque la stack tourne en mode utilisateur via Systemd, les commandes standard doivent être préfixées par `--user`.
|
||||
|
||||
* **Vérifier l'état de la stack :**
|
||||
```bash
|
||||
systemctl --user daemon-reload
|
||||
systemctl --user enable --now nanomq.service
|
||||
systemctl --user enable --now vnode.service
|
||||
systemctl --user enable --now vapp_prod.service
|
||||
systemctl --user status vulture-stack.service
|
||||
|
||||
```
|
||||
|
||||
**Vérifier le statut :**
|
||||
|
||||
* **Consulter les logs en temps réel (équivalent `tail -f`) :**
|
||||
```bash
|
||||
systemctl --user status nanomq.service vnode.service vapp_dev.service
|
||||
journalctl --user -u vulture-stack.service -f
|
||||
|
||||
```
|
||||
|
||||
**Arrêter les services :**
|
||||
|
||||
* **Redémarrer proprement toute la stack :**
|
||||
```bash
|
||||
systemctl --user stop vapp_dev.service vnode.service nanomq.service
|
||||
systemctl --user disable vapp_dev.service vnode.service nanomq.service
|
||||
systemctl --user restart vulture-stack.service
|
||||
|
||||
```
|
||||
|
||||
## Configuration
|
||||
|
||||
Les fichiers de configuration se trouvent dans `VContainers/VApp/config/` :
|
||||
- `config_dev.js` : Configuration développement (MQTT sur localhost)
|
||||
- `config_prod.js` : Configuration production (MQTT sur 192.168.73.252)
|
||||
|
||||
Vous pouvez modifier ces fichiers selon vos besoins. En mode manuel, redémarrez les containers. Avec Quadlet, redémarrez le service correspondant :
|
||||
* **Lister les containers actifs :**
|
||||
```bash
|
||||
systemctl --user restart vapp_dev.service
|
||||
podman ps
|
||||
|
||||
```
|
||||
|
||||
## Tip
|
||||
|
||||
@@ -1,19 +0,0 @@
|
||||
[Unit]
|
||||
Description=Broker MQTT NanoMQ
|
||||
Wants=network-online.target
|
||||
After=network-online.target
|
||||
|
||||
[Container]
|
||||
Image=docker.io/emqx/nanomq:latest
|
||||
ContainerName=nanomq
|
||||
Network=vulture-net.network
|
||||
PublishPort=1883:1883
|
||||
PublishPort=9001:9001
|
||||
PublishPort=8081:8081
|
||||
PublishPort=8083:8083
|
||||
PublishPort=8883:8883
|
||||
Volume=%h/Src/Fablab/Vulture/VContainers/MQTT/config/nanomq.conf:/etc/nanomq.conf:Z
|
||||
Exec=--conf /etc/nanomq.conf
|
||||
|
||||
[Install]
|
||||
WantedBy=default.target
|
||||
@@ -1,12 +0,0 @@
|
||||
[Unit]
|
||||
Description=Application Node.js VApp
|
||||
Requires=vulture.pod
|
||||
After=vulture.pod
|
||||
|
||||
[Container]
|
||||
Image=localhost/vapp:latest
|
||||
ContainerName=vapp
|
||||
Pod=vulture
|
||||
|
||||
[Install]
|
||||
WantedBy=vulture.pod
|
||||
@@ -1,16 +0,0 @@
|
||||
[Unit]
|
||||
Description=Application Vue.js VApp (DEV)
|
||||
Wants=network-online.target
|
||||
After=network-online.target
|
||||
Requires=nanomq.service
|
||||
After=nanomq.service
|
||||
|
||||
[Container]
|
||||
Image=localhost/vapp:latest
|
||||
ContainerName=vapp
|
||||
Network=vulture-net.network
|
||||
PublishPort=8080:80
|
||||
Volume=%h/Src/Fablab/Vulture/VContainers/VApp/config/config_dev.js:/usr/share/nginx/html/config.js:Z
|
||||
|
||||
[Install]
|
||||
WantedBy=default.target
|
||||
@@ -1,16 +0,0 @@
|
||||
[Unit]
|
||||
Description=Application Vue.js VApp (PROD)
|
||||
Wants=network-online.target
|
||||
After=network-online.target
|
||||
Requires=nanomq.service
|
||||
After=nanomq.service
|
||||
|
||||
[Container]
|
||||
Image=localhost/vapp:latest
|
||||
ContainerName=vapp
|
||||
Network=vulture-net.network
|
||||
PublishPort=8080:80
|
||||
Volume=%h/Src/Fablab/Vulture/VContainers/VApp/config/config_prod.js:/usr/share/nginx/html/config.js:Z
|
||||
|
||||
[Install]
|
||||
WantedBy=default.target
|
||||
@@ -1,14 +0,0 @@
|
||||
[Unit]
|
||||
Description=Application Node.js VNode
|
||||
Wants=network-online.target
|
||||
After=network-online.target
|
||||
Requires=nanomq.service
|
||||
After=nanomq.service
|
||||
|
||||
[Container]
|
||||
Image=localhost/vnode:latest
|
||||
ContainerName=vnode
|
||||
Network=vulture-net.network
|
||||
|
||||
[Install]
|
||||
WantedBy=default.target
|
||||
@@ -1,6 +0,0 @@
|
||||
[Unit]
|
||||
Description=Reseau Bridge pour Vulture
|
||||
|
||||
[Network]
|
||||
NetworkName=vulture-net
|
||||
Driver=bridge
|
||||
@@ -1,14 +0,0 @@
|
||||
[Unit]
|
||||
Description=Pod Vulture pour le Broker MQTT et les Applications Node
|
||||
Wants=network-online.target
|
||||
After=network-online.target
|
||||
|
||||
[Pod]
|
||||
# Mappings de ports : Host:Container (ces ports sont partagés par tous les conteneurs)
|
||||
PublishPort=8080:80
|
||||
PublishPort=1883:1883
|
||||
PublishPort=8083:8083
|
||||
PublishPort=8883:8883
|
||||
|
||||
[Install]
|
||||
WantedBy=default.target
|
||||
@@ -1,33 +0,0 @@
|
||||
#!/bin/bash
|
||||
set -e
|
||||
|
||||
# Move to repository root
|
||||
cd "$(dirname "$0")/.."
|
||||
|
||||
NETWORK_NAME="vulture-net"
|
||||
|
||||
echo "Creating network $NETWORK_NAME..."
|
||||
if podman network exists $NETWORK_NAME; then
|
||||
echo "Network $NETWORK_NAME already exists."
|
||||
else
|
||||
podman network create $NETWORK_NAME
|
||||
fi
|
||||
|
||||
echo "Starting NanoMQ..."
|
||||
# NanoMQ needs to expose ports for external access (e.g. VApp frontend) and be on the network for VNode
|
||||
podman run -dt --rm --network $NETWORK_NAME --name nanomq \
|
||||
-p 1883:1883 -p 9001:9001 -p 8081:8081 -p 8083:8083 -p 8883:8883 \
|
||||
-v ./VContainers/MQTT/config/nanomq.conf:/etc/nanomq.conf:Z \
|
||||
docker.io/emqx/nanomq:latest --conf /etc/nanomq.conf
|
||||
|
||||
echo "Starting VNode..."
|
||||
# VNode connects to nanomq via the network, no ports needed on host unless for debugging
|
||||
podman run -dt --rm --network $NETWORK_NAME --name vnode vnode:latest
|
||||
|
||||
echo "Starting VApp (DEV CONFIG)..."
|
||||
# VApp (nginx) needs port 5173 exposed
|
||||
podman run -dt --rm --network $NETWORK_NAME --name vapp -p 5173:5173 \
|
||||
-v ./VContainers/VApp/config/config_dev.js:/usr/share/nginx/html/config.js:Z \
|
||||
vapp:latest
|
||||
|
||||
echo "All containers started on network $NETWORK_NAME with DEV configuration."
|
||||
@@ -1,33 +0,0 @@
|
||||
#!/bin/bash
|
||||
set -e
|
||||
|
||||
# Move to repository root
|
||||
cd "$(dirname "$0")/.."
|
||||
|
||||
NETWORK_NAME="vulture-net"
|
||||
|
||||
echo "Creating network $NETWORK_NAME..."
|
||||
if podman network exists $NETWORK_NAME; then
|
||||
echo "Network $NETWORK_NAME already exists."
|
||||
else
|
||||
podman network create $NETWORK_NAME
|
||||
fi
|
||||
|
||||
echo "Starting NanoMQ..."
|
||||
# NanoMQ needs to expose ports for external access (e.g. VApp frontend) and be on the network for VNode
|
||||
podman run -dt --rm --network $NETWORK_NAME --name nanomq \
|
||||
-p 1883:1883 -p 9001:9001 -p 8081:8081 -p 8083:8083 -p 8883:8883 \
|
||||
-v ./VContainers/MQTT/config/nanomq.conf:/etc/nanomq.conf:Z \
|
||||
docker.io/emqx/nanomq:latest --conf /etc/nanomq.conf
|
||||
|
||||
echo "Starting VNode..."
|
||||
# VNode connects to nanomq via the network, no ports needed on host unless for debugging
|
||||
podman run -dt --rm --network $NETWORK_NAME --name vnode vnode:latest
|
||||
|
||||
echo "Starting VApp (PROD CONFIG)..."
|
||||
# VApp (nginx) needs port 5173 exposed
|
||||
podman run -dt --rm --network $NETWORK_NAME --name vapp -p 5173:5173 \
|
||||
-v ./VContainers/VApp/config/config_prod.js:/usr/share/nginx/html/config.js:Z \
|
||||
vapp:latest
|
||||
|
||||
echo "All containers started on network $NETWORK_NAME with PROD configuration."
|
||||
@@ -1,11 +0,0 @@
|
||||
#!/bin/bash
|
||||
|
||||
echo "Stopping containers..."
|
||||
podman stop vapp || echo "vapp not running"
|
||||
podman stop vnode || echo "vnode not running"
|
||||
podman stop nanomq || echo "nanomq not running"
|
||||
|
||||
echo "Removing network..."
|
||||
podman network rm vulture-net || echo "Network vulture-net not found"
|
||||
|
||||
echo "Cleanup complete."
|
||||
9
VContainers/upgrade.sh
Executable file
@@ -0,0 +1,9 @@
|
||||
#!/bin/bash
|
||||
set -e
|
||||
|
||||
# Move to repository root
|
||||
cd "$(dirname "$0")/.."
|
||||
|
||||
git pull
|
||||
./VContainers/build.sh
|
||||
systemctl --user restart vulture-stack
|
||||
56
VHard/vulturesrv/affichage_score_kiosque.md
Normal file
@@ -0,0 +1,56 @@
|
||||
# Documentation Déploiement Kiosque - Tableau de Score
|
||||
|
||||
Ce document décrit la configuration du serveur Fedora pour lancer automatiquement Google Chrome en mode plein écran au démarrage via un compositeur Wayland minimaliste (Cage).
|
||||
|
||||
## 1. Installation des dépendances
|
||||
|
||||
```bash
|
||||
sudo dnf install -y https://dl.google.com/linux/direct/google-chrome-stable_current_x86_64.rpm
|
||||
sudo dnf install -y cage
|
||||
|
||||
```
|
||||
|
||||
## 2. Configuration de l'Autologin (Systemd)
|
||||
|
||||
Créer le fichier d'override pour que le serveur se connecte seul sur le TTY1 :
|
||||
`sudo systemctl edit getty@tty1.service`
|
||||
|
||||
Coller le contenu suivant :
|
||||
|
||||
```ini
|
||||
[Service]
|
||||
ExecStart=
|
||||
ExecStart=-/sbin/agetty --autologin vulture --noclear %I $TERM
|
||||
|
||||
```
|
||||
|
||||
## 3. Configuration Zsh (`~/.zlogin`)
|
||||
|
||||
Ajouter ces lignes à la fin de votre fichier `~/.zlogin` pour déclencher l'affichage uniquement sur le port HDMI physique (TTY1) :
|
||||
|
||||
```zsh
|
||||
# Empêcher la mise en veille de l'écran
|
||||
setterm --blank 0 --powersave off --powerdown 0
|
||||
|
||||
if [[ -z "$DISPLAY" && "$XDG_VTNR" -eq 1 ]]; then
|
||||
export MOZ_ENABLE_WAYLAND=1
|
||||
export XDG_SESSION_TYPE=wayland
|
||||
|
||||
# Lancement du script de monitoring
|
||||
exec ~/Vulture/VHard/vulturesrv/kiosk-waiter.sh
|
||||
fi
|
||||
|
||||
```
|
||||
|
||||
## 4. Debug et Commandes utiles
|
||||
|
||||
* **Relancer le navigateur à distance (SSH) :**
|
||||
`pkill -u $USER cage` (Le script de boucle le relancera instantanément).
|
||||
* **Vérifier les logs :**
|
||||
`journalctl -u getty@tty1.service`
|
||||
* **Forcer l'arrêt :**
|
||||
Supprimer temporairement l'appel dans `~/.zlogin` ou tuer le script `kiosk-waiter.sh`.
|
||||
|
||||
---
|
||||
|
||||
*Note : Si vous utilisez Podman pour le reste du projet (Vulture), ce setup "Bare Metal" pour l'affichage garantit une latence minimale pour les animations du tableau de score.*
|
||||
36
VHard/vulturesrv/kiosk-waiter.sh
Normal file
@@ -0,0 +1,36 @@
|
||||
#!/bin/bash
|
||||
# kiosk-waiter.sh
|
||||
|
||||
URL="http://localhost:5173/" # URL locale de vapp
|
||||
SERVICE_NAME="vulture-stack.service"
|
||||
|
||||
echo "Attente du démarrage de la stack Vulture..."
|
||||
|
||||
# 1. Attente que le service Systemd soit considéré comme actif
|
||||
while [[ $(systemctl --user is-active $SERVICE_NAME) != "active" ]]; do
|
||||
sleep 1
|
||||
done
|
||||
|
||||
# 2. Attente que le serveur HTTP réponde (Healthy)
|
||||
# On boucle tant que le code de retour HTTP n'est pas 200
|
||||
until $(curl --output /dev/null --silent --head --fail $URL); do
|
||||
echo "Le quizz n'est pas encore prêt... attente (2s)"
|
||||
sleep 2
|
||||
done
|
||||
|
||||
echo "Stack Vulture détectée et saine. Lancement du kiosque."
|
||||
|
||||
# 3. Boucle de lancement de Chrome
|
||||
while true; do
|
||||
cage -- google-chrome-stable \
|
||||
--kiosk \
|
||||
--no-first-run \
|
||||
--password-store=basic \
|
||||
--ozone-platform=wayland \
|
||||
--autoplay-policy=no-user-gesture-required \
|
||||
--disable-component-update \
|
||||
"$URL"
|
||||
|
||||
echo "Chrome s'est arrêté. Relancement dans 2 secondes..."
|
||||
sleep 2
|
||||
done
|
||||
1175
VNode/package-lock.json
generated
@@ -1,6 +1,9 @@
|
||||
{
|
||||
"dependencies": {
|
||||
"mqtt": "^5.10.1",
|
||||
"cors": "^2.8.6",
|
||||
"express": "^5.2.1",
|
||||
"mqtt": "^5.14.1",
|
||||
"multer": "^2.0.2",
|
||||
"ping": "^0.4.4",
|
||||
"ws": "^8.18.0"
|
||||
}
|
||||
|
||||
|
Before Width: | Height: | Size: 251 KiB |
|
Before Width: | Height: | Size: 1.6 MiB |
|
Before Width: | Height: | Size: 1.8 MiB |
|
Before Width: | Height: | Size: 1.4 MiB |
|
Before Width: | Height: | Size: 1.3 MiB |
|
Before Width: | Height: | Size: 1.9 MiB |
@@ -1,27 +0,0 @@
|
||||
name: "Histoire & Géographie"
|
||||
questions:
|
||||
1:
|
||||
Q: "Quelle bataille célèbre s'est déroulée en 1815, marquant la défaite de Napoléon Bonaparte ?"
|
||||
T: "Elle a eu lieu en Belgique"
|
||||
R: "La bataille de Waterloo."
|
||||
P: "Q-1.jpeg"
|
||||
2:
|
||||
Q: "Quelle est la capitale de l'Australie ?"
|
||||
T: "Le nom de cette ville commence par la lettre 'C'"
|
||||
R: "Canberra."
|
||||
P: "Q-2.jpeg"
|
||||
3:
|
||||
Q: "En quelle année la Seconde Guerre mondiale a-t-elle pris fin ?"
|
||||
T: "C'est au milieu des années 40."
|
||||
R: "En 1945."
|
||||
P: "Q-3.jpeg"
|
||||
4:
|
||||
Q: "Quel fleuve traverse la ville du Caire en Égypte ?"
|
||||
T: "C'est l'un des plus longs fleuves du monde"
|
||||
R: "Le Nil."
|
||||
P: "Q-4.jpeg"
|
||||
5:
|
||||
Q: "Quel pays a été divisé par un mur de 1961 à 1989 ?"
|
||||
T: "Sa chute a marqué la fin de la guerre froide."
|
||||
R: "L'Allemagne (le mur de Berlin)."
|
||||
P: "Q-5.jpeg"
|
||||
|
Before Width: | Height: | Size: 447 KiB |
|
Before Width: | Height: | Size: 460 KiB |
|
Before Width: | Height: | Size: 382 KiB |
|
Before Width: | Height: | Size: 355 KiB |
|
Before Width: | Height: | Size: 521 KiB |
|
Before Width: | Height: | Size: 139 KiB |
|
Before Width: | Height: | Size: 445 KiB |
|
Before Width: | Height: | Size: 400 KiB |
|
Before Width: | Height: | Size: 389 KiB |
|
Before Width: | Height: | Size: 346 KiB |
|
Before Width: | Height: | Size: 3.1 MiB |
|
Before Width: | Height: | Size: 4.1 MiB |
|
Before Width: | Height: | Size: 3.2 MiB |
|
Before Width: | Height: | Size: 3.3 MiB |
|
Before Width: | Height: | Size: 3.0 MiB |
@@ -1,27 +0,0 @@
|
||||
name: "Jeux vidéos"
|
||||
questions:
|
||||
1:
|
||||
Q: "Quel personnage de jeu vidéo est un plombier moustachu qui saute sur des ennemis pour sauver une princesse ?"
|
||||
T: "C’est le personnage le plus célèbre de Nintendo, son nom commence par 'M'."
|
||||
R: "Mario."
|
||||
P: "Q-1.jpeg"
|
||||
2:
|
||||
Q: "Quel jeu vidéo multijoueur de football avec des voitures est très populaire ?"
|
||||
T: "Il s'agit d'un mélange de sport et de voitures rapides."
|
||||
R: "Rocket League."
|
||||
P: "Q-2.jpeg"
|
||||
3:
|
||||
Q: "Quel jeu vidéo mobile consiste à faire exploser des bonbons en alignant trois pièces identiques ?"
|
||||
T: "Son nom fait référence aux bonbons."
|
||||
R: "Candy Crush Saga."
|
||||
P: "Q-3.jpeg"
|
||||
4:
|
||||
Q: "Quel est le nom du célèbre personnage bleu de SEGA qui court à une vitesse incroyable ?"
|
||||
T: "Son nom commence par la lettre 'S' et c'est un hérisson."
|
||||
R: "Sonic"
|
||||
P: "Q-4.jpeg"
|
||||
5:
|
||||
Q: "Quel jeu permet de construire et explorer un monde fait de blocs, tout en survivant face à des monstres ?"
|
||||
T: "Le monde est entièrement fait de blocs carrés."
|
||||
R: "Minecraft."
|
||||
P: "Q-5.jpeg"
|
||||
@@ -1,161 +0,0 @@
|
||||
// Import necessary modules
|
||||
const mqtt = require('mqtt');
|
||||
|
||||
// MQTT broker configuration
|
||||
const brokerUrl = 'mqtt://localhost'; // Broker URL (change if needed)
|
||||
const options = {
|
||||
clientId: 'test_buzzer_manager',
|
||||
clean: true
|
||||
};
|
||||
|
||||
// Set up MQTT client
|
||||
const client = mqtt.connect(brokerUrl, options);
|
||||
|
||||
// Variables for tracking test results
|
||||
let testResults = {
|
||||
buzzerActivity: false,
|
||||
confirmationReceived: false,
|
||||
statusBlocked: false,
|
||||
statusUnblocked: false,
|
||||
tiltAddConfirmed: false,
|
||||
tiltRemoveConfirmed: false,
|
||||
tiltIgnored: false,
|
||||
unlockConfirmation: false,
|
||||
tiltUpdateAdd: false,
|
||||
tiltUpdateRemove: false
|
||||
};
|
||||
|
||||
// Subscribe to topics to capture the responses from the buzzer manager
|
||||
client.on('connect', () => {
|
||||
console.log('[INFO] Connected to MQTT broker for testing');
|
||||
|
||||
// Subscribe to all topics related to the buzzer manager
|
||||
client.subscribe('vulture/buzzer/#', (err) => {
|
||||
if (err) console.error('[ERROR] Failed to subscribe to topics for testing');
|
||||
else console.log('[INFO] Subscribed to topics successfully');
|
||||
});
|
||||
|
||||
// Run the test sequence after a short delay
|
||||
setTimeout(runTestSequence, 500);
|
||||
});
|
||||
|
||||
// Capture and process incoming MQTT messages
|
||||
client.on('message', (topic, message) => {
|
||||
const payload = JSON.parse(message.toString());
|
||||
console.log(`[INFO] Message received on ${topic}: ${message.toString()}`);
|
||||
|
||||
// Track the test results based on the topics and payloads
|
||||
if (topic.startsWith('vulture/buzzer/activity') && payload.buzzer_id === 1) {
|
||||
testResults.buzzerActivity = true;
|
||||
}
|
||||
|
||||
if (topic.startsWith(`vulture/buzzer/confirmation/1`) && payload.status === "received") {
|
||||
testResults.confirmationReceived = true;
|
||||
}
|
||||
|
||||
if (topic === 'vulture/buzzer/status' && payload.status === "blocked") {
|
||||
testResults.statusBlocked = true;
|
||||
}
|
||||
|
||||
if (topic === 'vulture/buzzer/status' && payload.status === "unblocked") {
|
||||
testResults.statusUnblocked = true;
|
||||
}
|
||||
|
||||
if (topic.startsWith(`vulture/buzzer/tilt/confirmation/2`) && payload.status === "received" && payload.action === "add") {
|
||||
testResults.tiltAddConfirmed = true;
|
||||
}
|
||||
|
||||
if (topic.startsWith(`vulture/buzzer/tilt/confirmation/2`) && payload.status === "received" && payload.action === "remove") {
|
||||
testResults.tiltRemoveConfirmed = true;
|
||||
}
|
||||
|
||||
if (topic === `vulture/buzzer/tilt/ignored/2` && payload.status === "tilt_ignored") {
|
||||
testResults.tiltIgnored = true;
|
||||
}
|
||||
|
||||
if (topic === 'vulture/buzzer/status' && payload.status === "tilt_update") {
|
||||
// Check for tilt update with added buzzer
|
||||
if (payload.tilt_buzzers.includes(2) && payload.message.includes("added")) {
|
||||
testResults.tiltUpdateAdd = true;
|
||||
}
|
||||
|
||||
// Check for tilt update with removed buzzer
|
||||
if (!payload.tilt_buzzers.includes(2) && payload.message.includes("removed")) {
|
||||
testResults.tiltUpdateRemove = true;
|
||||
}
|
||||
}
|
||||
|
||||
if (topic === 'vulture/buzzer/unlock/confirmation' && payload.status === "received") {
|
||||
testResults.unlockConfirmation = true;
|
||||
}
|
||||
});
|
||||
|
||||
// Function to run the complete test sequence
|
||||
function runTestSequence() {
|
||||
console.log('[INFO] Starting test sequence...');
|
||||
|
||||
// 1. Simulate a buzzer press (buzzer 1, color red)
|
||||
console.log('[TEST] Simulating buzzer press (ID 1, color #FF0000)...');
|
||||
client.publish('vulture/buzzer/pressed/1', JSON.stringify({
|
||||
buzzer_id: 1,
|
||||
color: "#FF0000"
|
||||
}));
|
||||
|
||||
// 2. Simulate a second buzzer press (buzzer 2, color blue) to check blocking
|
||||
setTimeout(() => {
|
||||
console.log('[TEST] Simulating second buzzer press (ID 2, color #0000FF)...');
|
||||
client.publish('vulture/buzzer/pressed/2', JSON.stringify({
|
||||
buzzer_id: 2,
|
||||
color: "#0000FF"
|
||||
}));
|
||||
}, 1000);
|
||||
|
||||
// 3. Simulate adding a buzzer to tilt mode (buzzer 2)
|
||||
setTimeout(() => {
|
||||
console.log('[TEST] Adding buzzer ID 2 to tilt mode...');
|
||||
client.publish('vulture/buzzer/tilt', JSON.stringify({
|
||||
buzzer_id: 2,
|
||||
status: "add"
|
||||
}));
|
||||
}, 1500);
|
||||
|
||||
// 4. Simulate pressing a buzzer in tilt mode (should be ignored)
|
||||
setTimeout(() => {
|
||||
console.log('[TEST] Simulating tilt buzzer press (ID 2, color #0000FF)...');
|
||||
client.publish('vulture/buzzer/pressed/2', JSON.stringify({
|
||||
buzzer_id: 2,
|
||||
color: "#0000FF"
|
||||
}));
|
||||
}, 2000);
|
||||
|
||||
// 5. Remove tilt mode from buzzer 2
|
||||
setTimeout(() => {
|
||||
console.log('[TEST] Removing tilt mode for buzzer ID 2...');
|
||||
client.publish('vulture/buzzer/tilt', JSON.stringify({
|
||||
buzzer_id: 2,
|
||||
status: "remove"
|
||||
}));
|
||||
}, 2500);
|
||||
|
||||
// 6. Unlock buzzers to reset state
|
||||
setTimeout(() => {
|
||||
console.log('[TEST] Unlocking buzzers...');
|
||||
client.publish('vulture/buzzer/unlock', '{}');
|
||||
}, 3000);
|
||||
|
||||
// 7. Display results
|
||||
setTimeout(() => {
|
||||
console.log('[INFO] Test sequence complete. Results:');
|
||||
console.log(`1. Buzzer activity detected for buzzer 1: ${testResults.buzzerActivity ? 'PASSED' : 'FAILED'}`);
|
||||
console.log(`2. Confirmation received for buzzer 1: ${testResults.confirmationReceived ? 'PASSED' : 'FAILED'}`);
|
||||
console.log(`3. Buzzer 1 status set to "blocked": ${testResults.statusBlocked ? 'PASSED' : 'FAILED'}`);
|
||||
console.log(`4. Buzzer status set to "unblocked": ${testResults.statusUnblocked ? 'PASSED' : 'FAILED'}`);
|
||||
console.log(`5. Tilt mode add confirmed for buzzer 2: ${testResults.tiltAddConfirmed ? 'PASSED' : 'FAILED'}`);
|
||||
console.log(`6. Tilted buzzer press ignored: ${testResults.tiltIgnored ? 'PASSED' : 'FAILED'}`);
|
||||
console.log(`7. Tilt status update sent (add): ${testResults.tiltUpdateAdd ? 'PASSED' : 'FAILED'}`);
|
||||
console.log(`8. Tilt mode remove confirmed for buzzer 2: ${testResults.tiltRemoveConfirmed ? 'PASSED' : 'FAILED'}`);
|
||||
console.log(`9. Tilt status update sent (remove): ${testResults.tiltUpdateRemove ? 'PASSED' : 'FAILED'}`);
|
||||
console.log(`10. Unlock confirmation received: ${testResults.unlockConfirmation ? 'PASSED' : 'FAILED'}`);
|
||||
client.end(); // End the MQTT connection
|
||||
}, 4000);
|
||||
}
|
||||
@@ -188,10 +188,10 @@ client.on('message', (topic, message) => {
|
||||
if (topic === 'vulture/buzzer/unlock') {
|
||||
console.log('[INFO] Buzzer unlock requested');
|
||||
|
||||
// Notify the light manager to change to the team's color
|
||||
// Notify the light manager to change to the default color
|
||||
client.publish('vulture/light/change', JSON.stringify({
|
||||
color: "#FFFFFF",
|
||||
effect: 'rainbow'
|
||||
color: "#FF00FF",
|
||||
effect: 'none'
|
||||
}));
|
||||
|
||||
// Reset buzzer manager state
|
||||
|
||||
@@ -13,7 +13,7 @@ const { mqttHost, hosts: { buzzers: { IP: buzzerIPs, MQTTconfig: { mqttTopic } }
|
||||
const client = mqtt.connect(mqttHost);
|
||||
|
||||
client.on('connect', () => {
|
||||
console.log(`Connecté au broker MQTT à ${mqttHost}`);
|
||||
console.log(`[INFO] Connecté au broker MQTT à ${mqttHost}`);
|
||||
|
||||
// Fonction pour pinger les buzzers et publier l'état
|
||||
const pingAndPublish = async () => {
|
||||
@@ -24,9 +24,8 @@ client.on('connect', () => {
|
||||
|
||||
// Publication du statut dans le topic MQTT
|
||||
client.publish(`${mqttTopic}`, JSON.stringify({ buzzer: buzzerName, ip, status }));
|
||||
console.log(`Ping ${buzzerName} (${ip}) - Status: ${status}`);
|
||||
} catch (error) {
|
||||
console.error(`Erreur avec le buzzer ${buzzerName} (${ip}):`, error.message);
|
||||
console.error(`[ERREUR] Erreur avec le buzzer ${buzzerName} (${ip}):`, error.message);
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -36,5 +35,5 @@ client.on('connect', () => {
|
||||
});
|
||||
|
||||
client.on('error', (error) => {
|
||||
console.error('Erreur de connexion au broker MQTT:', error.message);
|
||||
console.error('[ERREUR] Erreur de connexion au broker MQTT:', error.message);
|
||||
});
|
||||
|
||||
@@ -4,7 +4,8 @@
|
||||
"score": {
|
||||
"MQTTconfig": {
|
||||
"mqttScoreTopic": "game/score",
|
||||
"mqttScoreChangeTopic": "game/score/update"
|
||||
"mqttScoreChangeTopic": "game/score/update",
|
||||
"mqttScoreRequestTopic": "game/score/request"
|
||||
}
|
||||
},
|
||||
"quizzcollector": {
|
||||
@@ -12,6 +13,20 @@
|
||||
"mqttQuizzCollectorListTopic": "game/quizz-collector/list",
|
||||
"mqttQuizzCollectorCmdTopic": "game/quizz-collector/cmd"
|
||||
}
|
||||
},
|
||||
"session": {
|
||||
"MQTTconfig": {
|
||||
"mqttSessionRequestTopic": "game/session/config/request",
|
||||
"mqttSessionGetTopic": "game/session/config/get",
|
||||
"mqttSessionUpdateTopic": "game/session/config/update",
|
||||
"mqttSessionListTopic": "game/session/list/request",
|
||||
"mqttSessionListResponseTopic": "game/session/list/response",
|
||||
"mqttSessionCreateTopic": "game/session/create",
|
||||
"mqttSessionDeleteTopic": "game/session/delete",
|
||||
"mqttSessionDeleteMediaTopic": "game/session/media/delete",
|
||||
"mqttSessionRenameMediaTopic": "game/session/media/rename"
|
||||
},
|
||||
"httpPort": 3001
|
||||
}
|
||||
},
|
||||
"hosts": {
|
||||
@@ -27,4 +42,4 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -15,19 +15,19 @@ const folderPath = 'quizz'; // Remplace par le chemin de ton dossier
|
||||
const client = mqtt.connect(mqttHost);
|
||||
|
||||
client.on('connect', () => {
|
||||
console.log('Connecté au broker MQTT');
|
||||
console.log('[INFO] Connecté au broker MQTT');
|
||||
client.subscribe(mqttQuizzCollectorCmdTopic, (err) => {
|
||||
if (err) {
|
||||
console.error("Erreur lors de l'abonnement au topic de commande:", err);
|
||||
console.error("[ERREUR] Erreur lors de l'abonnement au topic de commande:", err);
|
||||
} else {
|
||||
console.log(`Abonné au topic ${mqttQuizzCollectorCmdTopic}`);
|
||||
console.log(`[INFO] Abonné au topic ${mqttQuizzCollectorCmdTopic}`);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
client.on('message', (topic, message) => {
|
||||
if (topic === mqttQuizzCollectorCmdTopic) {
|
||||
console.log('Commande reçue, lecture du dossier en cours...');
|
||||
console.log('[INFO] Commande reçue, lecture du dossier en cours...');
|
||||
Collect();
|
||||
}
|
||||
});
|
||||
@@ -36,17 +36,17 @@ client.on('message', (topic, message) => {
|
||||
function Collect() {
|
||||
fs.readdir(folderPath, (err, files) => {
|
||||
if (err) {
|
||||
console.error('Erreur lors de la lecture du dossier:', err);
|
||||
console.error('[ERREUR] Erreur lors de la lecture du dossier:', err);
|
||||
return;
|
||||
}
|
||||
|
||||
console.log('Dossiers trouvés:', files);
|
||||
console.log('[INFO] Dossiers trouvés:', files);
|
||||
const message = JSON.stringify(files);
|
||||
client.publish(mqttQuizzCollectorListTopic, message, { qos: 1 }, (err) => {
|
||||
if (err) {
|
||||
console.error('Erreur lors de la publication MQTT:', err);
|
||||
console.error('[ERREUR] Erreur lors de la publication MQTT:', err);
|
||||
} else {
|
||||
console.log('Liste des fichiers publiée sur MQTT');
|
||||
console.log('[INFO] Liste des fichiers publiée sur MQTT');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
@@ -33,14 +33,14 @@ fs.access(filePath, fs.constants.F_OK, (err) => {
|
||||
// Le fichier existe, on le lit et on le parse en JSON
|
||||
fs.readFile(filePath, 'utf8', (err, data) => {
|
||||
if (err) {
|
||||
console.error("Erreur de lecture du fichier :", err);
|
||||
console.error("[ERREUR] Erreur de lecture du fichier :", err);
|
||||
return;
|
||||
}
|
||||
try {
|
||||
global.jsonData = JSON.parse(data);
|
||||
console.log("Propriétés importées depuis le fichier JSON :");
|
||||
console.log("[INFO] Propriétés importées depuis le fichier JSON :");
|
||||
} catch (parseErr) {
|
||||
console.error("Erreur de parsing JSON :", parseErr);
|
||||
console.error("[ERREUR] Erreur de parsing JSON :", parseErr);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
@@ -82,10 +82,10 @@ fs.access(filePath, fs.constants.F_OK, (err) => {
|
||||
|
||||
fs.writeFile(newFilePath, JSON.stringify(initialContent, null, 2), (err) => {
|
||||
if (err) {
|
||||
console.error("Erreur de création du fichier :", err);
|
||||
console.error("[ERREUR] Erreur de création du fichier :", err);
|
||||
return;
|
||||
}
|
||||
console.log(`Fichier JSON créé avec succès : ${newFilePath}`);
|
||||
console.log(`[INFO] Fichier JSON créé avec succès : ${newFilePath}`);
|
||||
// Mettre à jour ScoreFile et filePath
|
||||
|
||||
// Charger les données initiales si nécessaire
|
||||
@@ -99,14 +99,14 @@ fs.access(filePath, fs.constants.F_OK, (err) => {
|
||||
function updateTeamTotalScore(teamColor, points) {
|
||||
fs.readFile(filePath, 'utf8', (err, data) => {
|
||||
if (err) {
|
||||
console.error("Erreur de lecture du fichier :", err);
|
||||
console.error("[ERREUR] Erreur de lecture du fichier :", err);
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const jsonData = JSON.parse(data);
|
||||
// Vérifier si l'équipe existe
|
||||
if (!jsonData.TEAM.hasOwnProperty(teamColor)) {
|
||||
console.error(`L'équipe ${teamColor} n'existe pas.`);
|
||||
console.error(`[ERREUR] L'équipe ${teamColor} n'existe pas.`);
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -114,18 +114,22 @@ function updateTeamTotalScore(teamColor, points) {
|
||||
|
||||
// Mettre à jour le score
|
||||
jsonData.TEAM[teamColor].TotalScore += points;
|
||||
console.log(`Le score total pour l'équipe ${teamColor} est de ${jsonData.TEAM[teamColor].TotalScore} points !`)
|
||||
|
||||
// Update global state
|
||||
global.jsonData = jsonData;
|
||||
|
||||
console.log(`[INFO] Le score total pour l'équipe ${teamColor} est de ${jsonData.TEAM[teamColor].TotalScore} points !`)
|
||||
// Enregistrer les modifications dans le fichier
|
||||
client.publish(mqttScoreTopic, JSON.stringify(jsonData));
|
||||
fs.writeFile(filePath, JSON.stringify(jsonData, null, 2), (err) => {
|
||||
if (err) {
|
||||
console.error("Erreur lors de l'écriture du fichier :", err);
|
||||
console.error("[ERREUR] Erreur lors de l'écriture du fichier :", err);
|
||||
} else {
|
||||
console.log(`Le score total de l'équipe ${teamColor} a été mis à jour avec succès dans le fichier json !`);
|
||||
console.log(`[INFO] Le score total de l'équipe ${teamColor} a été mis à jour avec succès dans le fichier json !`);
|
||||
}
|
||||
});
|
||||
} catch (parseErr) {
|
||||
console.error("Erreur de parsing JSON :", parseErr);
|
||||
console.error("[ERREUR] Erreur de parsing JSON :", parseErr);
|
||||
}
|
||||
});
|
||||
}
|
||||
@@ -136,26 +140,45 @@ const configPath = path.join(__dirname, '../config/configuration.json');
|
||||
const config = JSON.parse(fs.readFileSync(configPath, 'utf8'));
|
||||
|
||||
// Extraction des informations de config
|
||||
const { mqttHost, services: { score: { MQTTconfig: { mqttScoreTopic, mqttScoreChangeTopic } } } } = config;
|
||||
console.log("DEBUG: Config loaded from:", configPath);
|
||||
console.log("DEBUG: MQTT Host:", mqttHost);
|
||||
console.log("DEBUG: Topics:", mqttScoreTopic, mqttScoreChangeTopic);
|
||||
const { mqttHost, services: { score: { MQTTconfig: { mqttScoreTopic, mqttScoreChangeTopic, mqttScoreRequestTopic } } } } = config;
|
||||
console.log("------------------------------------------------------------------------------");
|
||||
console.log("[CONFIG] Configuration chargée depuis :", configPath);
|
||||
console.log("[CONFIG] Hôte MQTT :", mqttHost);
|
||||
console.log("[CONFIG] Topics chargés :", mqttScoreTopic, mqttScoreChangeTopic, mqttScoreRequestTopic);
|
||||
console.log("------------------------------------------------------------------------------");
|
||||
|
||||
// Connexion au broker MQTT
|
||||
const client = mqtt.connect(mqttHost);
|
||||
|
||||
client.on('connect', () => {
|
||||
console.log(`Connecté au broker MQTT à ${mqttHost}`);
|
||||
console.log(`[INFO] Connecté au broker MQTT à ${mqttHost}`);
|
||||
|
||||
client.subscribe(mqttScoreChangeTopic, (err) => {
|
||||
if (err) console.error('[ERROR] impossible de souscrire au topic de gestion du score total');
|
||||
else console.log(`[INFO] Souscription réalisée avec succès au topic ${mqttScoreChangeTopic}]`);
|
||||
if (err) console.error('[ERREUR] impossible de souscrire au topic de gestion du score total');
|
||||
else console.log(`[INFO] Souscription réalisée avec succès au topic ${mqttScoreChangeTopic}`);
|
||||
});
|
||||
|
||||
client.subscribe(mqttScoreRequestTopic, (err) => {
|
||||
if (err) console.error('[ERREUR] impossible de souscrire au topic de demande de score');
|
||||
else console.log(`[INFO] Souscription réalisée avec succès au topic ${mqttScoreRequestTopic}`);
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
// Gestion des messages entrants
|
||||
client.on('message', (topic, message) => {
|
||||
// Gestion de la demande de score (REFRESH)
|
||||
if (topic === mqttScoreRequestTopic) {
|
||||
console.log(`[INFO] Demande de rafraîchissement des scores reçue sur ${topic}`);
|
||||
if (global.jsonData) {
|
||||
client.publish(mqttScoreTopic, JSON.stringify(global.jsonData));
|
||||
console.log(`[INFO] Scores envoyés sur ${mqttScoreTopic}`);
|
||||
} else {
|
||||
console.warn("[INFO] Aucune donnée de score disponible pour le rafraîchissement");
|
||||
}
|
||||
return; // Fin du traitement pour ce message
|
||||
}
|
||||
|
||||
let payload;
|
||||
let process;
|
||||
let Team;
|
||||
@@ -167,7 +190,7 @@ client.on('message', (topic, message) => {
|
||||
// Analyse du message reçu
|
||||
payload = JSON.parse(message.toString());
|
||||
} catch (e) {
|
||||
console.error(`[ERROR] Invalid JSON message received on topic ${topic}: ${message.toString()}`);
|
||||
console.error(`[ERREUR] Invalid JSON message received on topic ${topic}: ${message.toString()}`);
|
||||
return;
|
||||
}
|
||||
// Vérifie que le payload est bien un objet
|
||||
@@ -202,7 +225,7 @@ client.on('message', (topic, message) => {
|
||||
if (!isNaN(change)) {
|
||||
updateTeamTotalScore(Team, change);
|
||||
} else {
|
||||
console.error(`Action invalide : ${Action}`);
|
||||
console.error(`[ERREUR] Action invalide : ${Action}`);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -213,7 +236,7 @@ client.on('message', (topic, message) => {
|
||||
function updateTeamScoreAbsolute(teamColor, totalScore, roundScore) {
|
||||
fs.readFile(filePath, 'utf8', (err, data) => {
|
||||
if (err) {
|
||||
console.error("Erreur de lecture du fichier :", err);
|
||||
console.error("[ERREUR] Erreur de lecture du fichier :", err);
|
||||
return;
|
||||
}
|
||||
try {
|
||||
@@ -232,26 +255,26 @@ function updateTeamScoreAbsolute(teamColor, totalScore, roundScore) {
|
||||
|
||||
console.log(`Mise à jour absolue pour ${teamColor} -> Total: ${jsonData.TEAM[teamColor].TotalScore}, Round: ${jsonData.TEAM[teamColor].RoundScore}`);
|
||||
|
||||
// Update global state
|
||||
global.jsonData = jsonData;
|
||||
|
||||
client.publish(mqttScoreTopic, JSON.stringify(jsonData));
|
||||
fs.writeFile(filePath, JSON.stringify(jsonData, null, 2), (err) => {
|
||||
if (err) console.error("Erreur d'écriture :", err);
|
||||
if (err) console.error("[ERREUR] Erreur d'écriture :", err);
|
||||
});
|
||||
} catch (parseErr) {
|
||||
console.error("Erreur JSON :", parseErr);
|
||||
console.error("[ERREUR] Erreur JSON :", parseErr);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
(async () => {
|
||||
while (true) {
|
||||
console.log("Boucle en arrière-plan");
|
||||
|
||||
await new Promise((resolve) => setTimeout(resolve, 2000)); // Pause de 2 secondes
|
||||
//client.publish(mqttScoreTopic, JSON.stringify(global.jsonData));
|
||||
}
|
||||
})();
|
||||
|
||||
client.on('error', (error) => {
|
||||
console.error('Erreur de connexion au broker MQTT:', error.message);
|
||||
});
|
||||
|
||||
console.error("[ERREUR] Erreur de connexion au broker MQTT:", error.message);
|
||||
});
|
||||
399
VNode/services/game/session-manager.js
Normal file
@@ -0,0 +1,399 @@
|
||||
const fs = require('fs');
|
||||
const mqtt = require('mqtt');
|
||||
const path = require('path');
|
||||
const express = require('express');
|
||||
const multer = require('multer');
|
||||
const cors = require('cors');
|
||||
|
||||
// Lecture du fichier de configuration
|
||||
const configPath = path.join(__dirname, '../config/configuration.json');
|
||||
const config = JSON.parse(fs.readFileSync(configPath, 'utf8'));
|
||||
|
||||
// Extraction des informations de config
|
||||
const {
|
||||
mqttHost,
|
||||
services: {
|
||||
session: {
|
||||
MQTTconfig: {
|
||||
mqttSessionRequestTopic,
|
||||
mqttSessionGetTopic,
|
||||
mqttSessionUpdateTopic,
|
||||
mqttSessionListTopic,
|
||||
mqttSessionListResponseTopic,
|
||||
mqttSessionCreateTopic,
|
||||
mqttSessionDeleteTopic,
|
||||
mqttSessionDeleteMediaTopic,
|
||||
mqttSessionRenameMediaTopic
|
||||
},
|
||||
httpPort
|
||||
}
|
||||
}
|
||||
} = config;
|
||||
|
||||
const PORT = httpPort || 3000;
|
||||
const quizzDir = path.join(__dirname, 'quizz');
|
||||
|
||||
// Configurer Express
|
||||
const app = express();
|
||||
app.use(cors());
|
||||
|
||||
// Configuration de Multer pour l'upload
|
||||
const storage = multer.diskStorage({
|
||||
destination: function (req, file, cb) {
|
||||
const sessionId = req.params.sessionId;
|
||||
let subfolder = 'assets';
|
||||
|
||||
// Organiser par type (envoyé par le frontend dans req.body.type)
|
||||
if (req.body.type === 'video') subfolder = 'assets/videos';
|
||||
else if (req.body.type === 'audio') subfolder = 'assets/audios';
|
||||
else if (req.body.type === 'picture') subfolder = 'assets/pictures';
|
||||
|
||||
const uploadPath = path.join(quizzDir, sessionId, subfolder);
|
||||
|
||||
// Créer le dossier s'il n'existe pas
|
||||
fs.mkdirSync(uploadPath, { recursive: true });
|
||||
cb(null, uploadPath);
|
||||
},
|
||||
filename: function (req, file, cb) {
|
||||
// Utiliser l'ID de la question comme nom de fichier si disponible
|
||||
const ext = path.extname(file.originalname);
|
||||
let filename = 'file-' + Date.now() + '-' + Math.round(Math.random() * 1E9);
|
||||
|
||||
if (req.body.questionId) {
|
||||
filename = req.body.questionId;
|
||||
}
|
||||
|
||||
cb(null, filename + ext);
|
||||
}
|
||||
});
|
||||
|
||||
const upload = multer({ storage: storage });
|
||||
|
||||
// Route d'upload
|
||||
app.post('/upload/:sessionId', upload.single('file'), (req, res) => {
|
||||
if (!req.file) {
|
||||
return res.status(400).send('No file uploaded.');
|
||||
}
|
||||
|
||||
// Calculer le chemin relatif pour l'URL
|
||||
// req.file.path est le chemin absolu sur le disque
|
||||
// On veut le chemin relatif à partir du dossier de session
|
||||
const sessionId = req.params.sessionId;
|
||||
const sessionDir = path.join(quizzDir, sessionId);
|
||||
|
||||
// path.relative(from, to) -> donne le chemin relatif
|
||||
let relativeId = path.relative(sessionDir, req.file.path);
|
||||
// Remplacer les backslashes par des slashs pour les URLs web
|
||||
relativeId = relativeId.replace(/\\/g, '/');
|
||||
|
||||
// Ajouter le slash initial
|
||||
const relativePath = `/${relativeId}`;
|
||||
|
||||
res.json({ path: relativePath, fullPath: req.file.path });
|
||||
});
|
||||
|
||||
// App.use pour servir les fichiers statiques
|
||||
app.use('/quizz', express.static(quizzDir));
|
||||
|
||||
app.listen(PORT, () => {
|
||||
console.log(`[HTTP] Serveur d'upload démarré sur le port ${PORT}`);
|
||||
});
|
||||
|
||||
|
||||
// Connexion au broker MQTT
|
||||
const client = mqtt.connect(mqttHost);
|
||||
|
||||
console.log("------------------------------------------------------------------------------");
|
||||
console.log("[CONFIG] Session Manager chargé (Multi-Session + Upload)");
|
||||
console.log("[CONFIG] Hôte MQTT :", mqttHost);
|
||||
console.log("[CONFIG] Port HTTP :", PORT);
|
||||
console.log("[CONFIG] Dossier Quizz :", quizzDir);
|
||||
console.log("------------------------------------------------------------------------------");
|
||||
|
||||
client.on('connect', () => {
|
||||
console.log(`[INFO] Connecté au broker MQTT à ${mqttHost}`);
|
||||
|
||||
client.subscribe(mqttSessionRequestTopic);
|
||||
client.subscribe(mqttSessionUpdateTopic);
|
||||
client.subscribe(mqttSessionListTopic);
|
||||
client.subscribe(mqttSessionCreateTopic);
|
||||
client.subscribe(mqttSessionDeleteTopic);
|
||||
client.subscribe(mqttSessionDeleteMediaTopic);
|
||||
client.subscribe(mqttSessionRenameMediaTopic);
|
||||
|
||||
console.log(`[INFO] Abonné aux topics session`);
|
||||
});
|
||||
|
||||
client.on('message', (topic, message) => {
|
||||
if (topic === mqttSessionListTopic) {
|
||||
console.log(`[INFO] Demande de liste de sessions`);
|
||||
sendSessionList();
|
||||
} else if (topic === mqttSessionRequestTopic) {
|
||||
try {
|
||||
const payload = JSON.parse(message.toString());
|
||||
console.log(`[INFO] Demande de configuration pour session: ${payload.SessionId}`);
|
||||
if (payload.SessionId) {
|
||||
sendSessionConfiguration(payload.SessionId);
|
||||
}
|
||||
} catch (e) { console.error("Erreur payload request", e); }
|
||||
|
||||
} else if (topic === mqttSessionUpdateTopic) {
|
||||
try {
|
||||
const payload = JSON.parse(message.toString());
|
||||
console.log(`[INFO] Mise à jour configuration pour session: ${payload.SessionId}`);
|
||||
if (payload.SessionId && payload.Config) {
|
||||
saveSessionConfiguration(payload.SessionId, payload.Config);
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('[ERREUR] Impossible de parser la mise à jour', e);
|
||||
}
|
||||
} else if (topic === mqttSessionCreateTopic) {
|
||||
try {
|
||||
const payload = JSON.parse(message.toString());
|
||||
console.log(`[INFO] Demande de création de session: ${payload.SessionName}`);
|
||||
if (payload.SessionName) {
|
||||
createSession(payload.SessionName);
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('[ERREUR] Impossible de parser la demande de création', e);
|
||||
}
|
||||
} else if (topic === mqttSessionDeleteTopic) {
|
||||
try {
|
||||
const payload = JSON.parse(message.toString());
|
||||
console.log(`[INFO] Demande de suppression de session: ${payload.SessionId}`);
|
||||
if (payload.SessionId) {
|
||||
deleteSession(payload.SessionId);
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('[ERREUR] Impossible de parser la demande de suppression', e);
|
||||
}
|
||||
} else if (topic === mqttSessionDeleteMediaTopic) {
|
||||
try {
|
||||
const payload = JSON.parse(message.toString());
|
||||
console.log(`[INFO] Demande de suppression de média: ${payload.MediaPath} pour session: ${payload.SessionId}`);
|
||||
if (payload.SessionId && payload.MediaPath) {
|
||||
deleteMedia(payload.SessionId, payload.MediaPath);
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('[ERREUR] Impossible de parser la demande de suppression de média', e);
|
||||
}
|
||||
} else if (topic === mqttSessionRenameMediaTopic) {
|
||||
try {
|
||||
const payload = JSON.parse(message.toString());
|
||||
console.log(`[INFO] Demande de renommage de média: ${payload.OldPath} -> ${payload.NewName}`);
|
||||
if (payload.SessionId && payload.OldPath && payload.NewName) {
|
||||
renameMedia(payload.SessionId, payload.OldPath, payload.NewName);
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('[ERREUR] Impossible de parser la demande de renommage', e);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
function sendSessionList() {
|
||||
fs.readdir(quizzDir, { withFileTypes: true }, (err, entries) => {
|
||||
if (err) {
|
||||
console.error('[ERREUR] Lecture dossier quizz', err);
|
||||
return;
|
||||
}
|
||||
|
||||
const sessions = [];
|
||||
entries.forEach(entry => {
|
||||
if (entry.isDirectory()) {
|
||||
const configPath = path.join(quizzDir, entry.name, 'session-configuration.json');
|
||||
if (fs.existsSync(configPath)) {
|
||||
try {
|
||||
const sessConfig = JSON.parse(fs.readFileSync(configPath, 'utf8'));
|
||||
sessions.push({
|
||||
id: entry.name,
|
||||
title: sessConfig.PackTitle || entry.name
|
||||
});
|
||||
} catch (e) {
|
||||
sessions.push({ id: entry.name, title: entry.name + " (Erreur Config)" });
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
client.publish(mqttSessionListResponseTopic, JSON.stringify(sessions));
|
||||
console.log(`[INFO] Liste envoyée : ${sessions.length} sessions`);
|
||||
});
|
||||
}
|
||||
|
||||
function sendSessionConfiguration(sessionId) {
|
||||
const sessionFilePath = path.join(quizzDir, sessionId, 'session-configuration.json');
|
||||
fs.readFile(sessionFilePath, 'utf8', (err, data) => {
|
||||
if (err) {
|
||||
console.error('[ERREUR] Impossible de lire le fichier de session', err);
|
||||
return;
|
||||
}
|
||||
client.publish(mqttSessionGetTopic, data);
|
||||
console.log(`[INFO] Configuration envoyée pour ${sessionId}`);
|
||||
});
|
||||
}
|
||||
|
||||
function saveSessionConfiguration(sessionId, newConfig) {
|
||||
const sessionFilePath = path.join(quizzDir, sessionId, 'session-configuration.json');
|
||||
|
||||
// Validation
|
||||
if (!newConfig.Questions || !Array.isArray(newConfig.Questions)) {
|
||||
console.error('[ERREUR] Configuration invalide');
|
||||
return;
|
||||
}
|
||||
|
||||
const data = JSON.stringify(newConfig, null, 2);
|
||||
fs.writeFile(sessionFilePath, data, (err) => {
|
||||
if (err) {
|
||||
console.error('[ERREUR] Impossible d\'écrire le fichier de session', err);
|
||||
} else {
|
||||
console.log(`[INFO] Session ${sessionId} mise à jour avec succès`);
|
||||
// Confirmer la sauvegarde en renvoyant la config
|
||||
client.publish(mqttSessionGetTopic, data);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function createSession(sessionName) {
|
||||
// Nettoyer le nom pour le dossier
|
||||
const safeName = sessionName.replace(/[^a-z0-9]/gi, '_').toLowerCase();
|
||||
const newSessionPath = path.join(quizzDir, safeName);
|
||||
|
||||
if (fs.existsSync(newSessionPath)) {
|
||||
console.error(`[ERREUR] La session ${safeName} existe déjà`);
|
||||
return;
|
||||
}
|
||||
|
||||
// Créer le dossier
|
||||
try {
|
||||
fs.mkdirSync(newSessionPath, { recursive: true });
|
||||
|
||||
// Créer la structure de base
|
||||
const defaultConfig = {
|
||||
PackId: "",
|
||||
PackTitle: sessionName,
|
||||
Questions: []
|
||||
};
|
||||
|
||||
fs.writeFileSync(
|
||||
path.join(newSessionPath, 'session-configuration.json'),
|
||||
JSON.stringify(defaultConfig, null, 2)
|
||||
);
|
||||
|
||||
console.log(`[INFO] Nouvelle session créée: ${safeName}`);
|
||||
|
||||
// Renvoyer la liste mise à jour
|
||||
sendSessionList();
|
||||
|
||||
} catch (e) {
|
||||
console.error(`[ERREUR] Impossible de créer la session ${safeName}`, e);
|
||||
}
|
||||
}
|
||||
|
||||
function deleteSession(sessionId) {
|
||||
const sessionPath = path.join(quizzDir, sessionId);
|
||||
|
||||
if (!fs.existsSync(sessionPath)) {
|
||||
console.error(`[ERREUR] La session ${sessionId} n'existe pas`);
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
fs.rmSync(sessionPath, { recursive: true, force: true });
|
||||
console.log(`[INFO] Session supprimée: ${sessionId}`);
|
||||
|
||||
// Renvoyer la liste mise à jour
|
||||
sendSessionList();
|
||||
|
||||
} catch (e) {
|
||||
console.error(`[ERREUR] Impossible de supprimer la session ${sessionId}`, e);
|
||||
}
|
||||
}
|
||||
|
||||
function deleteMedia(sessionId, relativePath) {
|
||||
// Sécuriser le chemin
|
||||
// relativePath devrait être du type "/assets/..."
|
||||
if (!relativePath) return;
|
||||
|
||||
// Nettoyer le chemin (retirer le slash initial s'il existe)
|
||||
if (relativePath.startsWith('/')) relativePath = relativePath.substring(1);
|
||||
|
||||
const fullPath = path.join(quizzDir, sessionId, relativePath);
|
||||
|
||||
// Vérifier que le chemin reste dans le dossier de la session (protection directory traversal)
|
||||
if (!fullPath.startsWith(path.join(quizzDir, sessionId))) {
|
||||
console.error(`[ERREUR] Tentative de suppression hors session: ${fullPath}`);
|
||||
return;
|
||||
}
|
||||
|
||||
if (!fs.existsSync(fullPath)) {
|
||||
console.error(`[ERREUR] Le fichier ${fullPath} n'existe pas`);
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
fs.unlinkSync(fullPath);
|
||||
console.log(`[INFO] Média supprimé: ${fullPath}`);
|
||||
} catch (e) {
|
||||
console.error(`[ERREUR] Impossible de supprimer le fichier ${fullPath}`, e);
|
||||
}
|
||||
}
|
||||
|
||||
client.on('error', (error) => {
|
||||
console.error('[ERREUR] Erreur de connexion au broker MQTT:', error.message);
|
||||
});
|
||||
|
||||
// Helper pour les renames tenaces sur Windows
|
||||
function renameWithRetry(oldPath, newPath, retries = 5, delay = 100) {
|
||||
try {
|
||||
fs.renameSync(oldPath, newPath);
|
||||
console.log(`[INFO] Média renommé : ${oldPath} -> ${newPath}`);
|
||||
} catch (e) {
|
||||
if (retries > 0) {
|
||||
console.log(`[WARN] Échec renommage, nouvel essai dans ${delay}ms... (${retries} restants)`);
|
||||
setTimeout(() => {
|
||||
renameWithRetry(oldPath, newPath, retries - 1, delay * 2);
|
||||
}, delay);
|
||||
} else {
|
||||
console.error(`[ERREUR] Impossible de renommer le fichier après plusieurs essais`, e);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function renameMedia(sessionId, oldRelativePath, newName) {
|
||||
if (!oldRelativePath || !newName) return;
|
||||
|
||||
// Clean paths
|
||||
if (oldRelativePath.startsWith('/')) oldRelativePath = oldRelativePath.substring(1);
|
||||
|
||||
const oldFullPath = path.join(quizzDir, sessionId, oldRelativePath);
|
||||
|
||||
// Security check
|
||||
if (!oldFullPath.startsWith(path.join(quizzDir, sessionId))) {
|
||||
console.error(`[ERREUR] Tentative de renommage hors session`);
|
||||
return;
|
||||
}
|
||||
|
||||
if (!fs.existsSync(oldFullPath)) {
|
||||
console.error(`[ERREUR] Fichier à renommer introuvable: ${oldFullPath}`);
|
||||
return;
|
||||
}
|
||||
|
||||
const dir = path.dirname(oldFullPath);
|
||||
const ext = path.extname(oldFullPath);
|
||||
// newName comes as "Q-005", we add the extension
|
||||
const newFilename = newName + ext;
|
||||
const newFullPath = path.join(dir, newFilename);
|
||||
|
||||
// Prevent overwriting existing files (check & delete)
|
||||
if (fs.existsSync(newFullPath)) {
|
||||
console.log(`[INFO] Le fichier de destination existe déjà, on supprime : ${newFullPath}`);
|
||||
try {
|
||||
fs.unlinkSync(newFullPath);
|
||||
} catch (e) {
|
||||
console.error(`[ERREUR] Impossible de supprimer le fichier existant ${newFullPath}`, e);
|
||||
// On continue quand même pour tenter le rename (le rename écrasera peut-être ou échouera)
|
||||
}
|
||||
}
|
||||
|
||||
renameWithRetry(oldFullPath, newFullPath);
|
||||
}
|
||||
@@ -2,7 +2,7 @@
|
||||
const mqtt = require('mqtt');
|
||||
|
||||
// Configuration du broker MQTT et de WLED
|
||||
const brokerUrl = 'mqtt://nanomq'; // Change ce lien si nécessaire
|
||||
const brokerUrl = 'mqtt://192.168.1.201'; // Change ce lien si nécessaire
|
||||
const clientId = 'light_manager_wled';
|
||||
const wledTopicBase = 'wled/all'; // Le topic de base pour ton ruban WLED
|
||||
const options = {
|
||||
@@ -11,7 +11,7 @@ const options = {
|
||||
};
|
||||
|
||||
// État des lumières
|
||||
let currentColor = '#FFFFFF'; // Couleur par défaut (blanc)
|
||||
let currentColor = '#FF00FF'; // Couleur par défaut
|
||||
let currentEffect = 'none'; // Pas d'effet par défaut
|
||||
|
||||
// Connexion au broker MQTT
|
||||
@@ -25,6 +25,12 @@ client.on('connect', () => {
|
||||
if (err) console.error('[ERROR] Subscription to light topics failed');
|
||||
else console.log('[INFO] Successfully subscribed to light topics');
|
||||
});
|
||||
|
||||
// Souscription aux topics des buzzers pour synchronisation directe
|
||||
client.subscribe('vulture/buzzer/pressed/#', (err) => {
|
||||
if (err) console.error('[ERROR] Subscription to buzzer topics failed');
|
||||
else console.log('[INFO] Successfully subscribed to buzzer topics');
|
||||
});
|
||||
});
|
||||
|
||||
// Fonction pour envoyer un message au ruban WLED
|
||||
@@ -65,9 +71,9 @@ function applyLightChange(color, effect, intensity) {
|
||||
function getWLEDEffectId(effect) {
|
||||
const effectsMap = {
|
||||
'none': 0,
|
||||
'blink': 1, // Effet de fondu
|
||||
'fade': 12, // Clignotement
|
||||
'rainbow': 9 // Effet arc-en-ciel
|
||||
'blink': 0, // Effet de fondu
|
||||
'fade': 0, // Clignotement
|
||||
'rainbow': 0 // Effet arc-en-ciel
|
||||
};
|
||||
return effectsMap[effect] || 0; // Par défaut, aucun effet
|
||||
}
|
||||
@@ -116,7 +122,7 @@ client.on('message', (topic, message) => {
|
||||
} else if (topic === 'vulture/light/reset') {
|
||||
// Réinitialisation des lumières à la couleur et l'effet par défaut
|
||||
console.log('[INFO] Resetting lights to default state');
|
||||
applyLightChange('#FFFFFF', 'reset', 255);
|
||||
applyLightChange('#FF00FF', 'reset', 255);
|
||||
|
||||
} else if (topic === 'vulture/light/status/request') {
|
||||
// Répondre à la requête de statut
|
||||
@@ -125,6 +131,23 @@ client.on('message', (topic, message) => {
|
||||
} else if (topic === 'vulture/light/status/response') {
|
||||
// Répondre à la requête de statut
|
||||
console.log('[INFO] Light status response received');
|
||||
|
||||
} else if (topic.startsWith('vulture/buzzer/pressed/')) {
|
||||
// Synchronisation directe Buzzer -> WLED
|
||||
const { color } = payload;
|
||||
|
||||
if (color && /^#[0-9A-F]{6}$/i.test(color)) {
|
||||
console.log(`[INFO] Buzzer pressed, syncing WLED color to ${color}`);
|
||||
// Envoi direct de la couleur (format hex avec #)
|
||||
sendToWLED('col', color);
|
||||
|
||||
// Mise à jour de l'état interne
|
||||
currentColor = color;
|
||||
currentEffect = 'none'; // Reset effect on direct color set
|
||||
} else {
|
||||
console.warn(`[WARN] Invalid color in buzzer payload: ${color}`);
|
||||
}
|
||||
|
||||
} else {
|
||||
console.error(`[ERROR] Unrecognized topic: ${topic}`);
|
||||
}
|
||||
|
||||
49
compose.yml
Normal file
@@ -0,0 +1,49 @@
|
||||
services:
|
||||
nanomq:
|
||||
image: docker.io/emqx/nanomq:latest
|
||||
container_name: nanomq
|
||||
restart: always
|
||||
networks:
|
||||
- vulture-net
|
||||
ports:
|
||||
- "1883:1883"
|
||||
- "9001:9001"
|
||||
- "8081:8081"
|
||||
- "8083:8083"
|
||||
- "8883:8883"
|
||||
volumes:
|
||||
- ./VContainers/MQTT/config/nanomq.conf:/etc/nanomq.conf:Z
|
||||
command: ["--conf", "/etc/nanomq.conf"]
|
||||
|
||||
vnode:
|
||||
image: vnode:latest
|
||||
container_name: vnode
|
||||
build:
|
||||
context: .
|
||||
dockerfile: ./VContainers/VNode/Containerfile
|
||||
restart: always
|
||||
networks:
|
||||
- vulture-net
|
||||
depends_on:
|
||||
- nanomq
|
||||
|
||||
vapp:
|
||||
image: vapp:latest
|
||||
container_name: vapp
|
||||
build:
|
||||
context: .
|
||||
dockerfile: ./VContainers/VApp/Containerfile
|
||||
restart: always
|
||||
networks:
|
||||
- vulture-net
|
||||
ports:
|
||||
- "5173:5173"
|
||||
volumes:
|
||||
- ./VContainers/VApp/config/config_prod.js:/usr/share/nginx/html/config.js:Z
|
||||
depends_on:
|
||||
- nanomq
|
||||
|
||||
networks:
|
||||
vulture-net:
|
||||
name: vulture-net
|
||||
driver: bridge
|
||||