Compare commits
1 Commits
e6a89c1561
...
fetch-test
Author | SHA1 | Date | |
---|---|---|---|
b73865157d |
8
ui/package-lock.json → package-lock.json
generated
@ -22,7 +22,7 @@
|
||||
"eslint-plugin-vue": "^9.17.0",
|
||||
"prettier": "^3.0.3",
|
||||
"unplugin-fonts": "^1.1.1",
|
||||
"vite": "^5.1.6",
|
||||
"vite": "^5.1.4",
|
||||
"vite-plugin-vuetify": "^2.0.1"
|
||||
}
|
||||
},
|
||||
@ -2814,9 +2814,9 @@
|
||||
"integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
|
||||
},
|
||||
"node_modules/vite": {
|
||||
"version": "5.1.6",
|
||||
"resolved": "https://registry.npmjs.org/vite/-/vite-5.1.6.tgz",
|
||||
"integrity": "sha512-yYIAZs9nVfRJ/AiOLCA91zzhjsHUgMjB+EigzFb6W2XTLO8JixBCKCjvhKZaye+NKYHCrkv3Oh50dH9EdLU2RA==",
|
||||
"version": "5.1.4",
|
||||
"resolved": "https://registry.npmjs.org/vite/-/vite-5.1.4.tgz",
|
||||
"integrity": "sha512-n+MPqzq+d9nMVTKyewqw6kSt+R3CkvF9QAKY8obiQn8g1fwTscKxyfaYnC632HtBXAQGc1Yjomphwn1dtwGAHg==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"esbuild": "^0.19.3",
|
@ -25,7 +25,7 @@
|
||||
"eslint-plugin-vue": "^9.17.0",
|
||||
"prettier": "^3.0.3",
|
||||
"unplugin-fonts": "^1.1.1",
|
||||
"vite": "^5.1.6",
|
||||
"vite": "^5.1.4",
|
||||
"vite-plugin-vuetify": "^2.0.1"
|
||||
}
|
||||
}
|
Before Width: | Height: | Size: 4.2 KiB After Width: | Height: | Size: 4.2 KiB |
Before Width: | Height: | Size: 1.7 MiB After Width: | Height: | Size: 1.7 MiB |
Before Width: | Height: | Size: 1.5 MiB After Width: | Height: | Size: 1.5 MiB |
Before Width: | Height: | Size: 768 KiB After Width: | Height: | Size: 768 KiB |
Before Width: | Height: | Size: 276 B After Width: | Height: | Size: 276 B |
@ -21,7 +21,7 @@
|
||||
|
||||
function toggleTheme() {
|
||||
darkTheme.value = !darkTheme.value
|
||||
theme.global.name.value = theme.global.current.value.dark ? 'CustomThemeLight' : 'CustomThemeDark'
|
||||
theme.global.name.value = theme.global.current.value.dark ? 'light' : 'dark'
|
||||
}
|
||||
|
||||
</script>
|
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<v-card tile outlined class="card">
|
||||
<v-card-title class="card__title primary" color="primary">
|
||||
<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>
|
1
src/fetch.txt
Normal file
@ -0,0 +1 @@
|
||||
test
|
@ -31,11 +31,6 @@ const router = createRouter({
|
||||
path: '/mqtt-debugger',
|
||||
name: 'Debugger MQTT',
|
||||
component: () => import('@/views/MQTTDebugView.vue')
|
||||
},
|
||||
{
|
||||
path: '/settings',
|
||||
name: 'Paramètres',
|
||||
component: () => import('@/views/SettingsView.vue')
|
||||
}
|
||||
]
|
||||
})
|
40
src/plugins/vuetify.js
Normal file
@ -0,0 +1,40 @@
|
||||
/**
|
||||
* plugins/vuetify.js
|
||||
*
|
||||
* Framework documentation: https://vuetifyjs.com`
|
||||
*/
|
||||
|
||||
// Styles
|
||||
import '@mdi/font/css/materialdesignicons.css'
|
||||
import 'vuetify/styles'
|
||||
|
||||
// Composables
|
||||
import { createVuetify } from 'vuetify'
|
||||
|
||||
// https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
|
||||
export default createVuetify({
|
||||
theme: {
|
||||
themes: {
|
||||
light: {
|
||||
background: '#212121',
|
||||
primary: '#cc0000',
|
||||
controls: '#cc0000',
|
||||
soundboard: '#9A2779',
|
||||
secondary: '#b0bec5',
|
||||
feedback: '#2E7D32',
|
||||
accent: '#8c9eff',
|
||||
error: '#b71c1c',
|
||||
},
|
||||
dark: {
|
||||
background: '#121212',
|
||||
primary: '#2979FF',
|
||||
controls: '#AB47B',
|
||||
secondary: '#90a4ae',
|
||||
feedback: '#2E7D32',
|
||||
accent: '#8c9eff',
|
||||
error: '#b71c1c',
|
||||
},
|
||||
},
|
||||
defaultTheme: 'dark',
|
||||
}
|
||||
})
|
@ -1,8 +0,0 @@
|
||||
// Fichier vide, regarde config.js.example pour personaliser ce fichier.
|
||||
// Note de dev : Normalement ce fichier ne devrait plus avoir de
|
||||
// modifications
|
||||
|
||||
// config.js
|
||||
export default {
|
||||
mqttBrokerUrl: 'ws://localhost:9001'
|
||||
};
|
@ -1,50 +0,0 @@
|
||||
/**
|
||||
* plugins/vuetify.js
|
||||
*
|
||||
* Framework documentation: https://vuetifyjs.com`
|
||||
*/
|
||||
|
||||
// Styles
|
||||
import '@mdi/font/css/materialdesignicons.css'
|
||||
import 'vuetify/styles'
|
||||
|
||||
// Composables
|
||||
import { createVuetify } from 'vuetify'
|
||||
|
||||
const CustomThemeDark = {
|
||||
dark: true,
|
||||
colors: {
|
||||
background: '#121212',
|
||||
primary: '#e91e1e',
|
||||
secondary: '#F44336',
|
||||
accent: '#FFC107',
|
||||
error: '#e91e1e',
|
||||
warning: '#FFC107',
|
||||
info: '#607D8B',
|
||||
success: '#e91e1e'
|
||||
}
|
||||
}
|
||||
const CustomThemeLight = {
|
||||
dark: false,
|
||||
colors: {
|
||||
background: '#ffffff',
|
||||
primary: '#e91e1e',
|
||||
secondary: '#F44336',
|
||||
accent: '#FFC107',
|
||||
error: '#e91e1e',
|
||||
warning: '#FFC107',
|
||||
info: '#607D8B',
|
||||
success: '#4CAF50'
|
||||
}
|
||||
}
|
||||
|
||||
// https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
|
||||
export default createVuetify({
|
||||
theme: {
|
||||
defaultTheme: 'CustomThemeDark',
|
||||
themes: {
|
||||
CustomThemeDark,
|
||||
CustomThemeLight,
|
||||
},
|
||||
},
|
||||
})
|
@ -1,71 +0,0 @@
|
||||
<template>
|
||||
|
||||
<h1 class="title mb-4 ml-5 mt-5">Paramètres</h1>
|
||||
<v-divider :thickness="2" class="border-opacity-100" color="primary"/>
|
||||
<h2 class="title ml-10 mb-5 mt-5">Son</h2>
|
||||
<div style="display: flex; align-items: center;">
|
||||
<v-switch label="Activer le son intégré" v-model="EmbeddedSound" class="ml-15" color="primary"/>
|
||||
<div style="width: 250px; margin-left: 16px;">
|
||||
<v-slider class="ml-15" :disabled="EmbeddedSound === false" v-model="EmbeddedSoundVolume" color="primary"/>
|
||||
</div>
|
||||
</div>
|
||||
<v-switch label="Activer le son MQTT" v-model="MQTTSound" class="ml-15" color="primary"/>
|
||||
<v-divider />
|
||||
<h2 class="title ml-10 mb-5 mt-5">Affichage</h2>
|
||||
<v-switch label="Activer l'affichage des sattelites" v-model="SattelitesDisplay" class="ml-15" color="primary"/>
|
||||
<v-divider />
|
||||
<h2 class="title ml-10 mb-5 mt-5">MQTT</h2>
|
||||
<div style="display: flex; align-items: center;">
|
||||
<v-icon v-model="MQTTBrokerState" class="ml-15" color="error" icon="record">mdi-record</v-icon>
|
||||
<v-label class="ml-2 mb-5 mt-5">Etat du serveur MQTT</v-label>
|
||||
</div>
|
||||
<v-divider />
|
||||
</template>
|
||||
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, watch } from 'vue';
|
||||
|
||||
const EmbeddedSound = ref(false); // Définition d'une référence pour la case à cocher. Initialement décochée.
|
||||
const EmbeddedSoundVolume = ref(50); // Définition d'une référence pour la case à cocher. Initialement décochée.
|
||||
const MQTTSound = ref(false); // Définition d'une référence pour la case à cocher. Initialement décochée.
|
||||
const MQTTBrokerState = ref(false); // Définition d'une référence pour la case à cocher. Initialement décochée.
|
||||
const SattelitesDisplay = ref(false);
|
||||
|
||||
onMounted(() => {
|
||||
if (localStorage.getItem('EmbeddedSound')) {
|
||||
EmbeddedSound.value = localStorage.getItem('EmbeddedSound') === 'true'; // Si l'état de la case à cocher est stocké, le mettre dans la référence
|
||||
}
|
||||
if (localStorage.getItem('MQTTSound')) {
|
||||
MQTTSound.value = localStorage.getItem('MQTTSound') === 'true'; // Si l'état de la case à cocher est stocké, le mettre dans la référence
|
||||
}
|
||||
if (localStorage.getItem('EmbeddedSoundVolume')) {
|
||||
EmbeddedSoundVolume.value = localStorage.getItem('EmbeddedSoundVolume'); // Si l'état de la case à cocher est stocké, le mettre dans la référence
|
||||
}
|
||||
if (localStorage.getItem('SattelitesDisplay')) {
|
||||
SattelitesDisplay.value = localStorage.getItem('SattelitesDisplay') === 'true'; // Added a default value for this switch
|
||||
}
|
||||
});
|
||||
watch(EmbeddedSound, (EmbeddedSoundNewValue) => {
|
||||
if (EmbeddedSoundNewValue !== null) {
|
||||
localStorage.setItem('EmbeddedSound', EmbeddedSoundNewValue); // Mettre à jour l'état de la case à cocher dans le LocalStorage chaque fois qu'il change.
|
||||
}
|
||||
});
|
||||
watch(EmbeddedSoundVolume, (EmbeddedSoundVolumeNewValue) => {
|
||||
if (EmbeddedSoundVolumeNewValue !== null) {
|
||||
localStorage.setItem('EmbeddedSoundVolume', EmbeddedSoundVolumeNewValue); // Mettre à jour l'état de la case à cocher dans le LocalStorage chaque fois qu'il change.
|
||||
}
|
||||
});
|
||||
watch(MQTTSound, (MQTTSoundNewValue) => {
|
||||
|
||||
if (MQTTSoundNewValue !== null) {
|
||||
localStorage.setItem('MQTTSound', MQTTSoundNewValue); // Mettre à jour l'état de la case à cocher dans le LocalStorage chaque fois qu'il change.
|
||||
}
|
||||
});
|
||||
watch(SattelitesDisplay, (SattelitesDisplaynewValue) => {
|
||||
if (SattelitesDisplaynewValue !== null) {
|
||||
localStorage.setItem('SattelitesDisplay', SattelitesDisplaynewValue); // Added a default value for this switch
|
||||
}
|
||||
});
|
||||
|
||||
</script>
|