Add remote access feature and UI improvements
- 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.
This commit is contained in:
Sapoleone
119
public/commons/components/button.js
Normal file
119
public/commons/components/button.js
Normal file
@@ -0,0 +1,119 @@
|
||||
/*
|
||||
* 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);
|
||||
42
public/commons/css/style.css
Normal file
42
public/commons/css/style.css
Normal file
@@ -0,0 +1,42 @@
|
||||
:root {
|
||||
/* STD */
|
||||
|
||||
/* Palette */
|
||||
--error: #E12D39;
|
||||
--accent: #FF5252;
|
||||
--bg: #F0ECD4;
|
||||
--divider: #BDBDBD;
|
||||
|
||||
--primary: #FFE3BD;
|
||||
--primary-light: #F1DC7E;
|
||||
--primary-dark: #00796B;
|
||||
|
||||
--secondary-light: #00967D;
|
||||
--secondary: #006E59;
|
||||
--secondary-dark: #004D3E;
|
||||
|
||||
--teal-blue: #16425B;
|
||||
--kashmir: #2F6690;
|
||||
--allports: #3A7CA5;
|
||||
|
||||
--text-primary: #000000;
|
||||
--text-secondary: #757575;
|
||||
--text-tertiary: #BDBDBD;
|
||||
|
||||
|
||||
--background: #FFFFFF;
|
||||
--gray: #F7F7F7;
|
||||
--quill: #D9DCD6;
|
||||
--disabled: #D0D0D0;
|
||||
--default: #BDBDBD;
|
||||
--hover: #999999;
|
||||
--storm-dust: #656565;
|
||||
--focus: #000000;
|
||||
}
|
||||
|
||||
body {
|
||||
/*background-color: var(--bg);*/
|
||||
/*color: var(--text-primary);*/
|
||||
background: #111;
|
||||
color: #fff;
|
||||
}
|
||||
12
public/commons/php/head.php
Normal file
12
public/commons/php/head.php
Normal file
@@ -0,0 +1,12 @@
|
||||
<?php
|
||||
/*
|
||||
* 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.
|
||||
*/
|
||||
?>
|
||||
<link integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
|
||||
<script integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous" src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"></script>
|
||||
<script integrity="sha384-RuyvpeZCxMJCqVUGFI0Do1mQrods/hhxYlcVfGPOfQtPJh0JCw12tUAZ/Mv10S7D" crossorigin="anonymous" src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/js/bootstrap.min.js"></script>
|
||||
|
||||
<link rel="stylesheet" href="<?=URL_PATH?>/commons/css/style.css">
|
||||
Reference in New Issue
Block a user