TobiasH/itender
1
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

add and close #10

Browse Source 
Took 43 minutes
This commit is contained in:
Tobias Hopp 2023-02-02 10:06:52 +01:00
parent 02c335bc27
commit a021d25332
5 changed files with 52 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
public/stylesheets/containers.css
View File

@ -5,5 +5,10 @@
}
#containers_volumeSlider {
width: 45%;
width: 55%;
}
#containers_templates {
margin-top: 2.5%;
margin-bottom: 1%;
}

6
public/stylesheets/inputs.css
View File

@ -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;
}

4
public/stylesheets/style.css
View File

@ -273,3 +273,7 @@ h2 {
}
.hide {
visibility: hidden;
transition: visibility 0.8s;
}

1
src/web/ButtonType.ts
View File

@ -2,5 +2,6 @@ export enum ButtonType {
PRIMARY = "primary",
SUCCESS = "success",
ERROR = "error",
DANGER = "danger",
}

47
src/web/Containers.ts
View File

@ -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<any, number> = {};
@ -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
@ -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);