mirror of
https://github.com/HendrikRauh/dmx-interface.git
synced 2025-07-04 21:28:53 +00:00
added class to form and added section to prepare next commit
This commit is contained in:
parent
4ac0681a9a
commit
90f8d7c07e
6 changed files with 157 additions and 151 deletions
|
@ -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,7 +30,8 @@
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<form class="hidden">
|
<section class="content hidden">
|
||||||
|
<form class="config">
|
||||||
<h1>Konfiguration</h1>
|
<h1>Konfiguration</h1>
|
||||||
<fieldset>
|
<fieldset>
|
||||||
<legend>Verbindung</legend>
|
<legend>Verbindung</legend>
|
||||||
|
@ -109,7 +111,10 @@
|
||||||
id="refresh-networks"
|
id="refresh-networks"
|
||||||
class="icon-button"
|
class="icon-button"
|
||||||
>
|
>
|
||||||
<img src="/icons/refresh.svg" alt="Neu laden" />
|
<img
|
||||||
|
src="/icons/refresh.svg"
|
||||||
|
alt="Neu laden"
|
||||||
|
/>
|
||||||
</button>
|
</button>
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
|
@ -182,6 +187,7 @@
|
||||||
<button type="submit">Speichern</button>
|
<button type="submit">Speichern</button>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
|
</section>
|
||||||
</main>
|
</main>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
@ -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);
|
||||||
|
|
|
@ -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", {
|
||||||
|
|
|
@ -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 = "";
|
||||||
}
|
}
|
||||||
|
|
|
@ -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();
|
||||||
|
|
|
@ -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") {
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue