mirror of
https://github.com/HendrikRauh/dmx-interface.git
synced 2025-05-18 21:55:34 +00:00
added class to form and added section to prepare next commit
This commit is contained in:
RaffaelW
parent
4ac0681a9a
commit
90f8d7c07e
6 changed files with 157 additions and 151 deletions
294
data/index.html
294
data/index.html
|
|
@ -11,6 +11,7 @@
|
|||
<script type="module" src="/networks.js" defer></script>
|
||||
<script type="module" src="/submit.js" defer></script>
|
||||
<script type="module" src="/reset.js" defer></script>
|
||||
<script type="module" src="/status.js" defer></script>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
|
|
@ -29,159 +30,164 @@
|
|||
</div>
|
||||
</section>
|
||||
|
||||
<form class="hidden">
|
||||
<h1>Konfiguration</h1>
|
||||
<fieldset>
|
||||
<legend>Verbindung</legend>
|
||||
<label>
|
||||
<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">
|
||||
<section class="content hidden">
|
||||
<form class="config">
|
||||
<h1>Konfiguration</h1>
|
||||
<fieldset>
|
||||
<legend>Verbindung</legend>
|
||||
<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>
|
||||
<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>
|
||||
<span>IP-Zuweisung:</span>
|
||||
<select
|
||||
name="ssid"
|
||||
id="select-network"
|
||||
title="Netzwerk"
|
||||
></select>
|
||||
<button
|
||||
type="button"
|
||||
id="refresh-networks"
|
||||
class="icon-button"
|
||||
name="ip-method"
|
||||
id="input-ip-method"
|
||||
title="IP-"
|
||||
>
|
||||
<img src="/icons/refresh.svg" alt="Neu laden" />
|
||||
</button>
|
||||
<option value="0">Statisch</option>
|
||||
<option value="1">DHCP</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
<div data-field="input-connection" data-values="0|1">
|
||||
<div data-field="input-ip-method" data-values="0">
|
||||
<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>
|
||||
<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
|
||||
type="password"
|
||||
name="password"
|
||||
id="input-password"
|
||||
placeholder="Passwort"
|
||||
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>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<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>
|
||||
</form>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
const form = document.querySelector("form");
|
||||
const form = document.querySelector("form.config");
|
||||
const dynamicInputs = form.querySelectorAll("[data-field][data-values]");
|
||||
|
||||
document.addEventListener("change", updateVisibility);
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import {
|
|||
hideLoadingScreen,
|
||||
} from "./loading-screen.js";
|
||||
|
||||
const form = document.querySelector("form");
|
||||
const form = document.querySelector("form.config");
|
||||
|
||||
export async function loadData(timeout = null) {
|
||||
const req = await fetch("/config", {
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
const form = document.querySelector("form");
|
||||
const content = document.querySelector("section.content");
|
||||
const loadingScreen = document.querySelector(".loading-screen");
|
||||
const loadingMsg = loadingScreen.querySelector("h2");
|
||||
const spinner = loadingScreen.querySelector(".spinner");
|
||||
const reloadBtn = loadingScreen.querySelector(".reload");
|
||||
|
||||
export function showLoadingScreen(msg) {
|
||||
hide(form, reloadBtn);
|
||||
hide(content, reloadBtn);
|
||||
show(loadingScreen, spinner);
|
||||
loadingMsg.classList.remove("error");
|
||||
loadingMsg.textContent = msg;
|
||||
|
|
@ -22,7 +22,7 @@ export function showError(msg) {
|
|||
|
||||
export function hideLoadingScreen() {
|
||||
hide(loadingScreen, reloadBtn);
|
||||
show(form);
|
||||
show(content);
|
||||
loadingMsg.classList.remove("error");
|
||||
loadingMsg.textContent = "";
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { updateConfig } from "/submit.js";
|
||||
|
||||
const form = document.querySelector("form");
|
||||
const form = document.querySelector("form.config");
|
||||
|
||||
form.addEventListener("reset", async (event) => {
|
||||
event.preventDefault();
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ import {
|
|||
showError,
|
||||
} from "./loading-screen.js";
|
||||
|
||||
const form = document.querySelector("form");
|
||||
const form = document.querySelector("form.config");
|
||||
|
||||
function parseValue(input) {
|
||||
if (input.type === "checkbox") {
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue