add and close #10

Took 43 minutes

public/stylesheets/containers.css

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

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

public/stylesheets/style.css

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

src/web/ButtonType.ts

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

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<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.min = "0"
-        volumeSlider.style.visibility = "hidden";
+        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);