93dd389437
- Implement `remoteAccess` functionality in `ApiCLI` for Veyon integration. - Create `selectIP.php` view and associated form for remote access inputs. - Add JSON configuration for lab setups (`labList.json`). - Introduce reusable `home-button` web component. - Update project router and controller to support new `/remoteAccess` and `/conn` routes. - Add custom styles and icons to enhance UI.
119 lines
2.9 KiB
JavaScript
119 lines
2.9 KiB
JavaScript
/*
|
|
* Copyright (c) 2025. Brusegan Samuele, Davanzo Andrea
|
|
* Questo file fa parte di VeyonCtrl ed è rilasciato
|
|
* sotto la licenza MIT. Vedere il file LICENSE per i dettagli.
|
|
*/
|
|
|
|
class HomeButton extends HTMLElement {
|
|
|
|
static watchedList = [
|
|
{
|
|
attribute: "icon-src",
|
|
htmlElement: "img",
|
|
tagName: "src",
|
|
},
|
|
{
|
|
attribute: "text",
|
|
htmlElement: "span",
|
|
tagName: "",
|
|
},
|
|
{
|
|
attribute: "main-href",
|
|
htmlElement: "div",
|
|
tagName: "data-href",
|
|
}
|
|
];
|
|
|
|
constructor() {
|
|
super();
|
|
|
|
/*
|
|
// 0. Richiedo le variabili globali da sessionStorage
|
|
let URL_PATH = sessionStorage.getItem("url");
|
|
let THEME = sessionStorage.getItem("theme");
|
|
*/
|
|
|
|
// 1. Crea lo Shadow DOM
|
|
const shadow = this.attachShadow({mode: 'open'});
|
|
|
|
// 2. Definisci la struttura interna (HTML) e lo stile (CSS)
|
|
const template = document.createElement('template');
|
|
template.innerHTML = `
|
|
<style>
|
|
.btn-home {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: start;
|
|
gap: 20px;
|
|
background: var(--kashmir);
|
|
margin: 2rem;
|
|
border-radius: 1.5rem;
|
|
font-size: 45px;
|
|
padding: 18px;
|
|
color: var(--gray);
|
|
font-weight: 500;
|
|
|
|
& img {
|
|
width: 2em;
|
|
height: 2em;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<div class="btn btn-home" data-href="">
|
|
<img src="" alt="">
|
|
<span></span>
|
|
<p id="debug"></p>
|
|
</div>
|
|
`;
|
|
|
|
// 3. Clona il contenuto del template e aggiungilo allo Shadow DOM
|
|
shadow.appendChild(template.content.cloneNode(true));
|
|
}
|
|
|
|
// Passaggio 2: Gestisci gli attributi e i callback
|
|
static get observedAttributes() {
|
|
let array = [];
|
|
|
|
HomeButton.watchedList.forEach(element => {
|
|
array.push(element.attribute);
|
|
})
|
|
|
|
return array;
|
|
}
|
|
|
|
attributeChangedCallback(name, oldValue, newValue) {
|
|
|
|
HomeButton.watchedList.forEach(element => {
|
|
if (element.attribute === name) {
|
|
let domElement = this.shadowRoot.querySelector(element.htmlElement);
|
|
/*console.log(name, element, oldValue, newValue)
|
|
console.log()*/
|
|
if (domElement) {
|
|
if (element.tagName !== "") {
|
|
// console.log(domElement)
|
|
domElement[element.tagName] = newValue;
|
|
// console.log(domElement)
|
|
// console.log("------------")
|
|
} else {
|
|
domElement.textContent = newValue;
|
|
}
|
|
}
|
|
}
|
|
})
|
|
}
|
|
|
|
connectedCallback() {
|
|
let btn = this.shadowRoot.querySelector(".btn-home");
|
|
// console.log(btn)
|
|
if (btn) {
|
|
btn.addEventListener("click", () => {
|
|
console.log(btn[ "data-href"])
|
|
window.location.href = btn.dataset.href;
|
|
})
|
|
}
|
|
}
|
|
}
|
|
|
|
// Passaggio 3: Registra il tuo elemento personalizzato
|
|
customElements.define('home-button', HomeButton); |