asco.fablab/BrainBlast
11
0
Fork 0
Code Issues 3 Pull Requests Packages Projects Releases Wiki Activity

Move brainblast vue app to ui repository

Browse Source
This commit is contained in:
Laurent
2024-03-16 21:17:43 +00:00
parent ac2fb16703
commit 4c42f15dc6
34 changed files with 8 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
ui/src/components/BrainBlastBar.vue Normal file
View File

@ -0,0 +1,27 @@
<template>
<v-app-bar :elevation="5">
<RouterMenu />
<v-app-bar-title>Brain Blast</v-app-bar-title>
<template v-slot:append>
<v-btn icon @click="toggleTheme">
<v-icon>{{ darkTheme ? 'mdi-white-balance-sunny' : 'mdi-moon-waning-crescent' }}</v-icon>
</v-btn>
</template>
</v-app-bar>
</template>
<script setup>
import { ref } from 'vue'
import { useTheme } from 'vuetify'
import RouterMenu from '@/components/RouterMenu.vue'
const theme = useTheme()
const darkTheme = ref(true)
function toggleTheme() {
darkTheme.value = !darkTheme.value
theme.global.name.value = theme.global.current.value.dark ? 'light' : 'dark'
}
</script>

36
ui/src/components/CardControl.vue Normal file
View File

@ -0,0 +1,36 @@
<template>
<v-card tile outlined class="card">
<v-card-title class="card__title primary">
<v-icon left class="white--text pr-5 pl-2" size="50">mdi-camera-control</v-icon>
Contrôles
</v-card-title>
<v-container class="text-center">
<v-row justify="center">
<v-col cols="12" sm="6" md="5" class="mt-4">
<mqtt-button width="240" height="130" class="btn xs12 sm6 md3" topic="/display/control" message="previous">
<v-icon left size="100">mdi-skip-previous</v-icon>
</mqtt-button>
</v-col>
<v-col cols="12" sm="6" md="5" class="mt-4">
<mqtt-button width="240" height="130" class="btn card xs12 sm6 md3" topic="/display/control" message="next">
<v-icon left size="100">mdi-skip-next</v-icon>
</mqtt-button>
</v-col>
<v-col cols="12" sm="6" md="5" class="mb-4">
<mqtt-button width="240" height="130" class="btn card xs12 sm6 md3" topic="/display/control" message="pause">
<v-icon left size="100">mdi-pause</v-icon>
</mqtt-button>
</v-col>
<v-col cols="12" sm="6" md="5" class="mb-4">
<mqtt-button width="240" height="130" class="btn card xs12 sm6 md3 " topic="/display/control" message="play">
<v-icon left size="100">mdi-play</v-icon>
</mqtt-button>
</v-col>
</v-row>
</v-container>
</v-card>
</template>
<script setup>
import MqttButton from './MqttButton.vue';
</script>

30
ui/src/components/CardSolution.vue Normal file
View File

@ -0,0 +1,30 @@
<template>
<v-card tile outlined class="card">
<v-card-title class="card__title feedback">
<v-icon left class="white--text pr-5 pl-2" size="50">mdi-play-network-outline</v-icon>
Solution
</v-card-title>
<v-container class="text-center">
<v-row justify="center">
<v-container class="text-center">
<!-- Utilisation de styles CSS personnalisés pour centrer l'image -->
<v-img width="450" src="https://c4.wallpaperflare.com/wallpaper/908/893/291/funny-middle-finger-black-background-wallpaper-preview.jpg" style="margin: 0 auto;"></v-img>
</v-container>
</v-row>
</v-container>
</v-card>
</template>
<style>
@media (min-width: 1024px) {
.image-container {
width: 300px;
overflow: hidden; /* Pour masquer le dépassement de l'image */
border: 1px solid #ccc; /* Bordure de l'image */
}
.image-container img {
width: 100%; /* Pour remplir complètement le conteneur */
height: auto; /* Pour maintenir le ratio d'aspect de l'image */
display: block; /* Pour éviter l'espace réservé pour les images */
}
}
</style>

43
ui/src/components/CardSoundboard.vue Normal file
View File

@ -0,0 +1,43 @@
<template>
<v-card tile outlined class="card" color="">
<v-card-title class="card__title primary">
<v-icon left class="white--text pr-5 pl-2" size="50">mdi-music-box-multiple</v-icon>
Soundboard
</v-card-title>
<v-container class="text-center">
<v-row justify="center">
<v-col cols="12" sm="6" md="4" class="mt-4">
<mqtt-button class="btn" width="200" height="130" topic="/sound/playsound" message="good-response" rounded>
<v-icon size="100">mdi-check-circle-outline</v-icon>
</mqtt-button>
</v-col>
<v-col cols="12" sm="6" md="4" class="mt-4">
<mqtt-button class="btn" width="200" height="130" topic="/sound/playsound" message="bad-response" rounded>
<v-icon size="100">mdi-close-circle-outline</v-icon>
</mqtt-button>
</v-col>
<v-col cols="12" sm="6" md="4" class="mt-4">
<mqtt-button class="btn" width="200" height="130" topic="/sound/playsound" message="timer" rounded>
<v-icon size="100">mdi-timer-outline</v-icon>
</mqtt-button>
</v-col>
</v-row>
<v-row justify="center">
<v-col cols="12" sm="6" md="4" class="mb-4">
<mqtt-button class="btn" width="220" height="130" topic="/sound/playsound" message="applause" rounded>
<v-icon size="100">mdi-human-handsup</v-icon>
</mqtt-button>
</v-col>
<v-col cols="12" sm="6" md="s" class="mb-4">
<mqtt-button class="btn" width="220" height="130" topic="/sound/playsound" message="bell" rounded>
<v-icon size="100">mdi-bell-outline</v-icon>
</mqtt-button>
</v-col>
</v-row>
</v-container>
</v-card>
</template>
<script setup>
import MqttButton from './MqttButton.vue';
</script>

9
ui/src/components/GameStatus.vue Normal file
View File

@ -0,0 +1,9 @@
<template>
<v-navigation-drawer>
<v-list-item title="Brain Blast" subtitle="The cultural quizzzz"></v-list-item>
<v-divider></v-divider>
<v-list-item link title="List Item 1"></v-list-item>
<v-list-item link title="List Item 2"></v-list-item>
<v-list-item link title="List Item 3"></v-list-item>
</v-navigation-drawer>
</template>

23
ui/src/components/MQTTDebugConsole.vue Normal file
View File

@ -0,0 +1,23 @@
<template>
<div>
<h1>Console MQTT</h1>
<div v-for="(message, index) in messages" :key="index">{{ message }}</div>
</div>
</template>
<script>
import { subscribeToTopic } from '@/services/mqttService'
export default {
data() {
return {
messages: [] // Initialiser un tableau pour stocker les messages MQTT
}
},
created() {
subscribeToTopic('#', (topic, message) => {
this.messages.push(`Topic: ${topic}, Message: ${message}`) // Ajouter le message à la liste des messages
}) // S'abonner à tous les topics MQTT
}
}
</script>

40
ui/src/components/MQTTDebugPublish.vue Normal file
View File

@ -0,0 +1,40 @@
<template>
<div>
<h1>Publier sur MQTT</h1>
<select v-model="selectedTopic">
<option v-for="topic in topics" :key="topic">{{ topic }}</option>
</select>
<input type="text" v-model="message" placeholder="Saisissez votre message" />
<button @click="publishMessage">Publier sur MQTT</button>
</div>
</template>
<script>
import { publishMessage } from '@/services/mqttService'
export default {
data() {
return {
message: '', // Initialiser la variable message
selectedTopic: 'topic1',
topics: [
'topic1',
'topic2',
'topic3',
'topic4',
'topic5',
'topic6',
'topic7',
'topic8',
'topic9',
'topic10'
] // Liste des topics
}
},
methods: {
publishMessage() {
publishMessage(this.selectedTopic, this.message)
}
}
}
</script>

22
ui/src/components/MqttButton.vue Normal file
View File

@ -0,0 +1,22 @@
<template>
<v-btn @click="_publishMessage" v-bind="$attrs">
<slot/>
</v-btn>
</template>
<script setup>
import { publishMessage } from '@/services/mqttService'
import { ref, defineProps } from 'vue'
const props = defineProps({
topic: String,
message: null
})
const disabled = ref(false)
const _publishMessage = () => {
publishMessage(props.topic, JSON.stringify(props.message))
disabled.value = true
}
</script>

24
ui/src/components/RouterMenu.vue Normal file
View File

@ -0,0 +1,24 @@
<template>
<v-app-bar-nav-icon v-on:click="menu = !menu"></v-app-bar-nav-icon>
<v-menu v-model="menu" class="menu-below-bar">
<v-list>
<v-list-item v-for="route in routes" :key="route.name" :to="route.path">{{ route.name }}</v-list-item>
</v-list>
</v-menu>
</template>
<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const routes = router.options.routes
let menu = ref(false)
</script>
<style scoped>
.menu-below-bar {
margin-top: 48px; /* La hauteur de la barre d'application */
}
</style>