63 lines
2.3 KiB
JavaScript
63 lines
2.3 KiB
JavaScript
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)'
|
|
})
|