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.
2025-09-25 00:26:42 +02:00
parent cfaafcffa6
commit 93dd389437
17 changed files with 432 additions and 8 deletions
--- a/public/commons/components/button.js
+++ b/public/commons/components/button.js
@@ -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);