added class to form and added section to prepare next commit

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

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,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>

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);

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", {

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 = "";
} }

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();

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") {