From a021d25332906bc58d5f5a2a5f61650fec5e4e70 Mon Sep 17 00:00:00 2001 From: Tobias Hopp Date: Thu, 2 Feb 2023 10:06:52 +0100 Subject: [PATCH] add and close #10 Took 43 minutes --- public/stylesheets/containers.css | 7 ++++- public/stylesheets/inputs.css | 6 ++-- public/stylesheets/style.css | 4 +++ src/web/ButtonType.ts | 1 + src/web/Containers.ts | 49 +++++++++++++++++++++++-------- 5 files changed, 52 insertions(+), 15 deletions(-) diff --git a/public/stylesheets/containers.css b/public/stylesheets/containers.css index 2376dea..95235bf 100644 --- a/public/stylesheets/containers.css +++ b/public/stylesheets/containers.css @@ -5,5 +5,10 @@ } #containers_volumeSlider { - width: 45%; + width: 55%; +} + +#containers_templates { + margin-top: 2.5%; + margin-bottom: 1%; } \ No newline at end of file diff --git a/public/stylesheets/inputs.css b/public/stylesheets/inputs.css index 3d3c399..fc99b65 100644 --- a/public/stylesheets/inputs.css +++ b/public/stylesheets/inputs.css @@ -115,13 +115,14 @@ label { .input { padding: 6px; - font-size: 1.1em; + font-size: 1.12em; margin-left: 1%; margin-right: 1%; margin-bottom: 2%; border: 0; background-color: #e9e9ed; - border-radius: 3px; + border-radius: 4px; + text-align: center; } @@ -135,3 +136,4 @@ label { transform: scale(1.6); padding: 12px; } + diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css index 6ded037..532da48 100644 --- a/public/stylesheets/style.css +++ b/public/stylesheets/style.css @@ -273,3 +273,7 @@ h2 { } +.hide { + visibility: hidden; + transition: visibility 0.8s; +} \ No newline at end of file diff --git a/src/web/ButtonType.ts b/src/web/ButtonType.ts index 88b8529..fe22733 100644 --- a/src/web/ButtonType.ts +++ b/src/web/ButtonType.ts @@ -2,5 +2,6 @@ export enum ButtonType { PRIMARY = "primary", SUCCESS = "success", ERROR = "error", + DANGER = "danger", } \ No newline at end of file diff --git a/src/web/Containers.ts b/src/web/Containers.ts index dd92ef8..01807e7 100644 --- a/src/web/Containers.ts +++ b/src/web/Containers.ts @@ -24,7 +24,7 @@ export class Containers { let btnSave = document.createElement("button"); btnSave.innerText = "Speichern"; - btnSave.classList.add("btn", "btn-primary") + btnSave.classList.add("btn", "btn-success") btnSave.disabled = true; let containerVolumes: Record = {}; @@ -34,11 +34,15 @@ export class Containers { volume.innerText = ""; volume.id = "containers_volume"; + + + let volumeSlider = document.createElement("input"); volumeSlider.type = "range"; volumeSlider.step = "5"; - // Todo, templates für größen - volumeSlider.style.visibility = "hidden"; + volumeSlider.min = "0" + volumeSlider.max = "2000"; + volumeSlider.classList.add("hidden"); volumeSlider.id = "containers_volumeSlider" // When volume slider is changed @@ -50,6 +54,25 @@ export class Containers { volumeSlider.oninput = onChange; volumeSlider.onchange = onChange; + let volumeTemplates = document.createElement("div"); + volumeTemplates.id = "containers_templates"; + volumeTemplates.classList.add("hidden"); + let templates = [330, 500, 750, 1000, 1250, 1500]; + for (let t of templates) { + let btn = document.createElement("button"); + btn.classList.add("btn", "btn-secondary"); + let v = t + "ml"; + if (t >= 1000) + v = t / 1000 + "L"; + btn.innerText = v; + btn.onclick = () => { + volumeSlider.value = String(t); + let event = new Event("change", {bubbles: true}); + volumeSlider.dispatchEvent(event); + } + volumeTemplates.append(btn); + } + let nonSelect = document.createElement("option"); nonSelect.value = "-1"; nonSelect.innerText = "Bitte wählen"; @@ -57,8 +80,9 @@ export class Containers { let selectIngredient = document.createElement("select"); - selectIngredient.style.visibility = "hidden"; + selectIngredient.classList.add("hidden"); selectIngredient.classList.add("input"); + selectIngredient.style.width = "50%" // When ingredient is changed selectIngredient.onchange = () => { @@ -69,7 +93,8 @@ export class Containers { volumeSlider.disabled = false; } - volumeSlider.style.visibility = "visible"; + volumeSlider.classList.remove("hidden"); + volumeTemplates.classList.remove("hidden"); volume.innerText = volumeSlider.value + " ml "; if (selectContainer.value && selectIngredient.value) @@ -78,22 +103,22 @@ export class Containers { txt.innerText = "Menge des Inhalts mittels Slider einstellen"; } - selectIngredient.append(nonSelect.cloneNode(true)); - selectIngredient.selectedIndex = 0; let noIngredient = document.createElement("option"); noIngredient.value = "null"; noIngredient.innerText = "Kein Inhalt"; selectIngredient.append(noIngredient); + selectIngredient.selectedIndex = 0; let selectContainer = document.createElement("select"); selectContainer.classList.add("input"); //let containers : IContainer[] = []; selectContainer.onchange = () => { // Enable select ingredient field and set max and min to the slider - selectIngredient.style.visibility = "visible"; + selectIngredient.classList.remove("hidden"); volumeSlider.max = String(2000); volumeSlider.min = String(0); - volumeSlider.value = String(containerVolumes[selectContainer.value] / 2); + volumeSlider.value = String(containerVolumes[selectContainer.value]); + volume.innerText = String(containerVolumes[selectContainer.value]); txt.innerText = "Inhalt des Behälters auswählen"; // When content of container is filled, preselect the ingredient selector @@ -116,7 +141,7 @@ export class Containers { containerVolumes[container._id] = container.volume; let option = document.createElement("option"); option.value = container._id; - option.innerText = "Behälter Slot " + (container.slot+1) + "[" + (container.content && container.content.name ? container.content.name : "Kein Inhalt") + "]"; + option.innerText = "Behälter Slot " + (container.slot + 1) + "[" + (container.content && container.content.name ? container.content.name : "Kein Inhalt") + "]"; selectContainer.append(option); containers[container._id] = container; } @@ -131,11 +156,11 @@ export class Containers { } }); - form.append(selectContainer, document.createElement("br"), selectIngredient, document.createElement("br"), volume, volumeSlider); + form.append(selectContainer, document.createElement("br"), selectIngredient, document.createElement("br"), volumeTemplates, volume, volumeSlider); modal.addContent(document.createElement("br")); - modal.addButton(ButtonType.PRIMARY, "Schließen", () => modal.close()); + modal.addButton(ButtonType.DANGER, "Abbrechen", () => modal.close()); modal.addContent(btnSave);