tunnel: interface pour page admin sans backend + problème de gestion de la playlist (importé dans 2 script, l'un demande un focntion, l'autre une array et on est là hum...)

2026-07-06 22:32:41 +02:00
parent eaba21e126
commit 874226a140
10 changed files with 1573 additions and 0 deletions
@@ -0,0 +1,62 @@
+import { createApp } from 'vue'
+// import css
+import './style.css'
+// import app racine pour page admin
+import Admin from './Admin.vue'
+// import composants
+import EventEditor from './components/EventEditor.vue'
+import LinkEditor from './components/LinkEditor.vue'
+import PlaylistEditor from './components/PlaylistEditor.vue'
+
+// creation app
+const app = createApp(Admin);
+// Composants
+app.component('eventEditor', EventEditor);
+app.component('linkEditor', LinkEditor);
+app.component('playlistEditor', PlaylistEditor)
+
+// montage dans div#adminContent
+app.mount('#adminContent');
+
+//import variables reactive
+import { pannelStatusList }  from './pannelStatus.js'
+
+document.documentElement.setAttribute('data-theme', 'main');
+
+let eventBtn = document.querySelector('#eventBtn');
+let eventTarget = document.querySelector('#event .windowContent');
+
+let linkBtn = document.querySelector('#linkBtn');
+let linkTarget = document.querySelector('#link .windowContent');
+
+let playlistBtn = document.querySelector('#playlistBtn');
+let playlistTarget = document.querySelector('#playlist .windowContent');
+
+
+eventBtn.addEventListener('click', () => {
+  pannelStatusList.event = !pannelStatusList.event;
+  eventTarget.style.height = pannelStatusList.event ? '75vh' : 'auto';
+  document.querySelector('#eventBtn .icon').style.transform = pannelStatusList.event ? 'rotate(45deg)' : 'rotate(0)'
+})
+
+linkBtn.addEventListener('click', () => {
+  pannelStatusList.link = !pannelStatusList.link;
+  if(pannelStatusList.link){
+    pannelStatusList.playlist = false;
+    playlistTarget.style.height = 'auto';
+    document.querySelector('#playlistBtn .icon').style.transform = 'rotate(45deg)'
+  }
+  linkTarget.style.height = pannelStatusList.link ? '64.5vh' : '0';
+  document.querySelector('#linkBtn .icon').style.transform = pannelStatusList.link ? 'rotate(45deg)' : 'rotate(0)'
+})
+
+playlistBtn.addEventListener('click', () => {
+  pannelStatusList.playlist = !pannelStatusList.playlist;
+  if(pannelStatusList.playlist){
+    pannelStatusList.link = false
+    linkTarget.style.height = 'auto';
+    document.querySelector('#linkBtn .icon').style.transform = 'rotate(45deg)'
+  }
+  playlistTarget.style.height = pannelStatusList.playlist ? '64.5vh' : 'auto';
+  document.querySelector('#playlistBtn .icon').style.transform = pannelStatusList.playlist ? 'rotate(45deg)' : 'rotate(0)'
+})