ctbk/dmx-interface
1
0
Fork 0
mirror of https://github.com/HendrikRauh/dmx-interface.git synced 2025-05-18 21:55:34 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

added class to form and added section to prepare next commit

Browse source
This commit is contained in:
RaffaelW 2024-12-19 17:26:05 +01:00
parent 4ac0681a9a
commit 90f8d7c07e
6 changed files with 157 additions and 151 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

294
data/index.html
View file

@ -11,6 +11,7 @@
<script type="module" src="/networks.js" defer></script> <script type="module" src="/networks.js" defer></script>
<script type="module" src="/submit.js" defer></script> <script type="module" src="/submit.js" defer></script>
<script type="module" src="/reset.js" defer></script> <script type="module" src="/reset.js" defer></script>
<script type="module" src="/status.js" defer></script>
</head> </head>
<body> <body>
<main> <main>
@ -29,159 +30,164 @@
</div> </div>
</section> </section>
<form class="hidden"> <section class="content hidden">
<h1>Konfiguration</h1> <form class="config">
<fieldset> <h1>Konfiguration</h1>
<legend>Verbindung</legend> <fieldset>
<label> <legend>Verbindung</legend>
<span>IP-Zuweisung:</span>
<select
name="ip-method"
id="input-ip-method"
title="IP-"
>
<option value="0">Statisch</option>
<option value="1">DHCP</option>
</select>
</label>
<div data-field="input-ip-method" data-values="0">
<label> <label>
<span>IP-Adresse:</span> <span>IP-Zuweisung:</span>
<input
type="text"
name="ip"
id="input-ip"
placeholder="IP-Adresse"
/>
</label>
<label>
<span>Subnetzmaske:</span>
<input
type="text"
name="subnet"
id="input-subnet"
placeholder="Subnetzmaske"
/>
</label>
<label>
<span>Gateway:</span>
<input
type="text"
name="gateway"
id="input-gateway"
placeholder="Gateway"
/>
</label>
</div>
<label>
<span>Verbindungsmethode:</span>
<select
name="connection"
id="input-connection"
title="Verbindung"
>
<option value="0">WiFi-Station</option>
<option value="1">WiFi-AccessPoint</option>
<option value="2">Ethernet</option>
</select>
</label>
<div data-field="input-connection" data-values="1">
<label>
<span>SSID:</span>
<input
type="text"
name="ssid"
id="input-ssid"
placeholder="SSID"
/>
</label>
</div>
<div data-field="input-connection" data-values="0">
<label>
<span>Netzwerk:</span>
<select <select
name="ssid" name="ip-method"
id="select-network" id="input-ip-method"
title="Netzwerk" title="IP-"
></select>
<button
type="button"
id="refresh-networks"
class="icon-button"
> >
<img src="/icons/refresh.svg" alt="Neu laden" /> <option value="0">Statisch</option>
</button> <option value="1">DHCP</option>
</select>
</label> </label>
</div> <div data-field="input-ip-method" data-values="0">
<div data-field="input-connection" data-values="0|1"> <label>
<span>IP-Adresse:</span>
<input
type="text"
name="ip"
id="input-ip"
placeholder="IP-Adresse"
/>
</label>
<label>
<span>Subnetzmaske:</span>
<input
type="text"
name="subnet"
id="input-subnet"
placeholder="Subnetzmaske"
/>
</label>
<label>
<span>Gateway:</span>
<input
type="text"
name="gateway"
id="input-gateway"
placeholder="Gateway"
/>
</label>
</div>
<label> <label>
<span>Password:</span> <span>Verbindungsmethode:</span>
<select
name="connection"
id="input-connection"
title="Verbindung"
>
<option value="0">WiFi-Station</option>
<option value="1">WiFi-AccessPoint</option>
<option value="2">Ethernet</option>
</select>
</label>
<div data-field="input-connection" data-values="1">
<label>
<span>SSID:</span>
<input
type="text"
name="ssid"
id="input-ssid"
placeholder="SSID"
/>
</label>
</div>
<div data-field="input-connection" data-values="0">
<label>
<span>Netzwerk:</span>
<select
name="ssid"
id="select-network"
title="Netzwerk"
></select>
<button
type="button"
id="refresh-networks"
class="icon-button"
>
<img
src="/icons/refresh.svg"
alt="Neu laden"
/>
</button>
</label>
</div>
<div data-field="input-connection" data-values="0|1">
<label>
<span>Password:</span>
<input
type="password"
name="password"
id="input-password"
placeholder="Passwort"
/>
</label>
</div>
</fieldset>
<fieldset>
<legend>Input/Output 1</legend>
<label class="switch">
<span>Output</span>
<input <input
type="password" type="checkbox"
name="password" name="direction-1"
id="input-password" id="input-direction-1"
placeholder="Passwort" data-value-not-checked="output"
data-value-checked="input"
/>
<span class="slider"></span>
<span>Input</span>
</label>
<label>
ArtNet-Universe:
<input
type="number"
name="universe-1"
id="universe-1"
placeholder="Universe"
min="0"
max="15"
/> />
</label> </label>
</fieldset>
<fieldset>
<legend>Input/Output 2</legend>
<label class="switch">
<span>Output</span>
<input
type="checkbox"
name="direction-2"
id="input-direction-2"
data-value-not-checked="output"
data-value-checked="input"
/>
<span class="slider"></span>
<span>Input</span>
</label>
<label>
ArtNet-Universe:
<input
type="number"
name="universe-2"
id="universe-2"
placeholder="Universe"
min="0"
max="15"
/>
</label>
</fieldset>
<div class="buttons">
<button type="reset">Zurücksetzen</button>
<button type="submit">Speichern</button>
</div> </div>
</fieldset> </form>
<fieldset> </section>
<legend>Input/Output 1</legend>
<label class="switch">
<span>Output</span>
<input
type="checkbox"
name="direction-1"
id="input-direction-1"
data-value-not-checked="output"
data-value-checked="input"
/>
<span class="slider"></span>
<span>Input</span>
</label>
<label>
ArtNet-Universe:
<input
type="number"
name="universe-1"
id="universe-1"
placeholder="Universe"
min="0"
max="15"
/>
</label>
</fieldset>
<fieldset>
<legend>Input/Output 2</legend>
<label class="switch">
<span>Output</span>
<input
type="checkbox"
name="direction-2"
id="input-direction-2"
data-value-not-checked="output"
data-value-checked="input"
/>
<span class="slider"></span>
<span>Input</span>
</label>
<label>
ArtNet-Universe:
<input
type="number"
name="universe-2"
id="universe-2"
placeholder="Universe"
min="0"
max="15"
/>
</label>
</fieldset>
<div class="buttons">
<button type="reset">Zurücksetzen</button>
<button type="submit">Speichern</button>
</div>
</form>
</main> </main>
</body> </body>
</html> </html>

2
data/input-visibility.js
View file

@ -1,4 +1,4 @@
const form = document.querySelector("form"); const form = document.querySelector("form.config");
const dynamicInputs = form.querySelectorAll("[data-field][data-values]"); const dynamicInputs = form.querySelectorAll("[data-field][data-values]");
document.addEventListener("change", updateVisibility); document.addEventListener("change", updateVisibility);

2
data/load-data.js
View file

@ -4,7 +4,7 @@ import {
hideLoadingScreen, hideLoadingScreen,
} from "./loading-screen.js"; } from "./loading-screen.js";
const form = document.querySelector("form"); const form = document.querySelector("form.config");
export async function loadData(timeout = null) { export async function loadData(timeout = null) {
const req = await fetch("/config", { const req = await fetch("/config", {

6
data/loading-screen.js
View file

@ -1,11 +1,11 @@
const form = document.querySelector("form"); const content = document.querySelector("section.content");
const loadingScreen = document.querySelector(".loading-screen"); const loadingScreen = document.querySelector(".loading-screen");
const loadingMsg = loadingScreen.querySelector("h2"); const loadingMsg = loadingScreen.querySelector("h2");
const spinner = loadingScreen.querySelector(".spinner"); const spinner = loadingScreen.querySelector(".spinner");
const reloadBtn = loadingScreen.querySelector(".reload"); const reloadBtn = loadingScreen.querySelector(".reload");
export function showLoadingScreen(msg) { export function showLoadingScreen(msg) {
hide(form, reloadBtn); hide(content, reloadBtn);
show(loadingScreen, spinner); show(loadingScreen, spinner);
loadingMsg.classList.remove("error"); loadingMsg.classList.remove("error");
loadingMsg.textContent = msg; loadingMsg.textContent = msg;
@ -22,7 +22,7 @@ export function showError(msg) {
export function hideLoadingScreen() { export function hideLoadingScreen() {
hide(loadingScreen, reloadBtn); hide(loadingScreen, reloadBtn);
show(form); show(content);
loadingMsg.classList.remove("error"); loadingMsg.classList.remove("error");
loadingMsg.textContent = ""; loadingMsg.textContent = "";
} }

2
data/reset.js
View file

@ -1,6 +1,6 @@
import { updateConfig } from "/submit.js"; import { updateConfig } from "/submit.js";
const form = document.querySelector("form"); const form = document.querySelector("form.config");
form.addEventListener("reset", async (event) => { form.addEventListener("reset", async (event) => {
event.preventDefault(); event.preventDefault();

2
data/submit.js
View file

@ -5,7 +5,7 @@ import {
showError, showError,
} from "./loading-screen.js"; } from "./loading-screen.js";
const form = document.querySelector("form"); const form = document.querySelector("form.config");
function parseValue(input) { function parseValue(input) {
if (input.type === "checkbox") { if (input.type === "checkbox") {