redesign for mulituser

change validation concept (client and server)
using entities

public/js/billing.js

@@ -1,35 +1,146 @@
-$(function () {
-    $('.parent').change(function () {
-        var $subs = $(this).parent().parent().children(".sub").children();
-        $subs.children().remove().end();
-        var $output = '';
-        $liste = subsdata[$(this).val()];
-        $sort = Object.entries($liste).sort((a, b) => (a[1] > b[1]) ? 1 : (b[1] > a[1]) ? -1 : 0);
-        $.each($sort, function (key, value) {
-            $output += '<option value="' + value[0] + '">' + value[1] + '</option>';
-        });
-        $subs.append($output);
+document.addEventListener("DOMContentLoaded", function(event) {
+    document.myModal = document.getElementById('mymodal');
+    document.myModalDelete = document.getElementById('mymodalDelete');
+    document.myModalDelete.addEventListener('show.bs.modal', function (event) {
+        var button = event.relatedTarget;
+        var id = button.getAttribute('data-bs-id');
+        var tab = button.getAttribute('data-bs-table');
+        document.myModalDelete.setAttribute('data-bs-id',id);
+        document.myModalDelete.setAttribute('data-bs-table',tab);
+    });
+    document.myModal.addEventListener('show.bs.modal', function (event) {
+        var button = event.relatedTarget;
+        var id = button.getAttribute('data-bs-id');
+        var tab = button.getAttribute('data-bs-table');
+        document.myModal.setAttribute('data-bs-id',id);
+        document.myModal.setAttribute('data-bs-table',tab);
     });
-    $('#multi').change(function () {
-        if ($(this).is(":checked")) {
-            $('.single').addClass('d-none');
-            $('.multi').removeClass('d-none');
-            return;
-        }
-        $('.single').removeClass('d-none');
-        $('.multi').addClass('d-none');
-        //'unchecked' event code
-    }).change();
-    $('.dt-amount, .dt-subamount').change(function () {
-        var temp = convertInput($(this).val());
-        $(this).val(convertOutput(temp));
-        if ($('#multi').is(":checked")) {
-            recalcOpenAmount();
-        }
-    }).change();
 
+    document.getElementById('modal_delete').addEventListener('click', deleteEntry );
+
+    
+    var event = new Event('change');
+
+    switchMulti();
+    // dropdown elemente anpassen wenn parent sich ändert
+    document.querySelectorAll(".parent").forEach((papa) => {
+        papa.addEventListener("change", hdlDropDownChange);
+    });
+
+    document.querySelectorAll(".dt-amount.input,.dt-amount.output , .dt-subamount").forEach((amount) => {
+        amount.addEventListener("change", hdlAmountChange);
+        amount.dispatchEvent(event);
+    });
+
+    document.querySelectorAll(".dt-amount.input,.dt-amount.output,.dt-subamount, .parent").forEach((amount) => {
+        amount.addEventListener("focus", hdlValidityStateLine);
+    });
+
+    const form = document.getElementById('newbill');
+    form.addEventListener('formdata', function(event) {
+        const formData = event.formData;
+        formData.set('validate', formData.has('validate') ? '1' : '0');
+//        console.log(formData);
+    });
 });
 
+function loadPage(ev){
+    let url = ev.relatedTarget.getAttribute('url');
+    window.location.href="url";
+}
+
+function switchMulti(){
+    //const multi = document.getElementById("multi");
+    if (document.getElementById("linecont").childElementCount>1) {
+        document.getElementById("multiadd").text = "+Zeile";
+        const singles = document.querySelectorAll(".single").forEach((single) => {
+            single.classList.add("d-none");
+        });
+        const multis = document.querySelectorAll(".multi").forEach((multi) => {
+            multi.classList.remove("d-none");
+        });
+//        addLine();
+    } else {
+        document.getElementById("multiadd").text = "Multi";
+        const singles = document.querySelectorAll(".single").forEach((single) => {
+            single.classList.remove("d-none");
+        });
+        const multis = document.querySelectorAll(".multi").forEach((ele) => {
+            ele.classList.add("d-none");
+        });
+    }
+}
+
+function recalcRow(einnahme, ausgabe){
+    let value = einnahme.value - ausgabe.value;
+    
+    if (value < 0) {
+        ausgabe.value = convertOutput(value *(-1));
+        einnahme.value = '';
+    } else {
+        einnahme.value = convertOutput(value);
+        ausgabe.value = '';
+    }
+
+}
+
+function hdlAmountChange(event) {
+    var temp = convertInput(event.target.value);
+    event.target.value = convertOutput(temp);
+
+    let zeile = event.target.parentElement.parentElement;
+    var einnahme = zeile.querySelector(".input");
+    var ausgabe = zeile.querySelector(".output");
+
+     if (event.target.classList.contains("input")) {
+         if ( ausgabe.value !== '')
+            recalcRow(einnahme,ausgabe);
+    }else {
+         if ( einnahme.value !== '')
+            recalcRow(einnahme, ausgabe);
+    }
+
+    calcAmount();
+    if (document.getElementById("linecont").childElementCount>1) {
+        recalcOpenAmount();
+    }
+}
+
+function hdlDropDownChange(event) {
+    var $sub = event.target.parentElement.parentElement.querySelector(".sub");
+    while ($sub.options.length) {
+        $sub.remove(0);
+    }
+    var output = '';
+    var liste = subsdata[(event.target.value=="")?0:event.target.value];
+    var sort = Object.entries(liste).sort((a, b) => (a[1] > b[1]) ? 1 : (b[1] > a[1]) ? -1 : 0);
+    sort.forEach((value) => {
+        output += '<option value="' + value[0] + '">' + value[1] + '</option>';
+    });
+        $sub.innerHTML = output;
+}
+
+function hdlValidityState(ev){
+    form = document.getElementById("newbill");
+    this.classList.remove("is-invalid");
+    this.setCustomValidity(""); 
+    form.classList.remove('was-validated');
+}
+
+function hdlValidityStateLine(ev){
+    let form = document.getElementById("newbill");
+    if (form.classList.contains('was-validated')) {
+    //ev.target.parentNode.parentNode
+    //document.getElementById("linecont").
+    form.querySelectorAll(".dt-amount, .dt-subamount, .parent, .sub").forEach((amount) => {
+        amount.setCustomValidity("");
+        amount.classList.remove("is-invalid");
+        amount.classList.remove("is-valid");
+    });
+    form.classList.remove('was-validated');
+    }
+}
+
 function logData(event) {
     var data = document.getElementById("billfile");
     console.log(data.value);
@@ -37,12 +148,21 @@ function logData(event) {
 }
 
 function addLine() {
-    $('#linecont > div').each(function () {
-        if ($(this).hasClass("d-none")) {
-            $(this).removeClass("d-none");
-            return false;
-        }
+     //let ele =document.querySelector("#linecont > div:last-child");
+    var clonedDiv = document.getElementById("template").cloneNode(true);
+    clonedDiv.removeAttribute("id");
+    clonedDiv.classList.remove("d-none");
+    clonedDiv.querySelector(".parent").addEventListener("change", hdlDropDownChange);
+    clonedDiv.querySelectorAll(".dt-subamount").forEach((amount) => {
+        amount.addEventListener("change", hdlAmountChange);
     });
+    clonedDiv.querySelectorAll(".dt-subamount, .parent").forEach((amount) => {
+        amount.addEventListener("focus", hdlValidityStateLine);
+    });
+    document.getElementById("linecont").appendChild(clonedDiv);
+   if (document.getElementById("linecont").childElementCount==2){
+        switchMulti();
+    }
 }
 
 function removeBillFile(e) {
@@ -79,23 +199,97 @@ function convertOutput(number) {
         return "";
 }
 
-function recalcOpenAmount() {
-    var summe = 0.0;
-    $('.dt-subamount').each(function () {
-        b = $(this).val();
-        b = convertInput(b);
+function calcAmount() {
+    //let amount = convertInput(document.getElementsByName("amount")[0].value);
+    let amount = 0.0;
+    document.querySelectorAll(".dt-subamount").forEach((subamount) => {
+        var b = convertInput(subamount.value);
         if (typeof b !== 'undefined') {
-            b = $(this).hasClass("text-danger") ? b * (-1) : b;
-            summe = summe + b;
+            b = subamount.classList.contains("output") ? b * (-1) : b;
+            amount = amount + b;
         }
-        //       summe = summe + convertInput($(this).val());
     });
+    document.getElementsByName("amount")[0].value = convertOutput(amount);
 
-    $('#openamount').val(Math.round(($('#total_in').val() - $('#total_out').val() - summe) * 100) / 100);
 }
 
-// $('form').submit(function () {
-//     alert("disable elements");
-//     $( ".d-none" ).prop( "disabled", true );
-//     return true;
-// });
+function recalcOpenAmount() {
+    form = document.getElementById('newbill');
+    let summe = convertInput(document.getElementsByName("amount")[0].value);
+    console.log("Re calculating open amount");
+    var total_in = convertInput(document.getElementById("total_in").value || "0.0");
+    var total_out = convertInput(document.getElementById("total_out").value || "0.0");
+
+    let val = convertOutput(Math.round((total_in - total_out - summe) * 100) / 100);
+    if (parseFloat(val) !== 0.0){
+        setValState(form.openamount,"Muss 0 sein");
+    } else {
+        setValState(form.openamount,"Muss 0 sein",true);
+    }
+
+    document.getElementById("openamount").value = val;
+}
+
+function setValState(ele, message,valid=false){
+    if (valid){
+        ele.classList.add("is-valid");
+        ele.classList.remove("is-invalid");
+        ele.setCustomValidity("");
+    } else {
+        ele.classList.add("is-invalid");
+        ele.classList.remove("is-valid");
+        ele.setCustomValidity(message);
+    }
+}
+
+function checkForm(e,form) {
+    const subinputs = form.elements;
+
+    //for new transfer
+    if (form.receiver.value =='' && form.transfer.value)
+        form.receiver.value = subinputs['parent_id[]'].selectedOptions[0].text+"-"+subinputs['account_id[]'].selectedOptions[0].text;
+    if (!form.total_in.parentElement.parentElement.classList.contains("d-none")) {
+        //Gesamtbetrag fehlt
+        if ((form.total_in.value == "" ) && (form.total_out.value == "")) {
+            if (parseFloat(form.amount.value) > 0.0){
+                setValState(form.total_in, "Notwendig");
+             } else {
+                setValState(form.total_out, "Notwendig");
+             }
+        }
+        //Restbetrag
+        if (parseFloat(form.openamount.value) !== 0.0){
+            setValState(form.openamount, "Offener Betrag!");
+            form.openamount.readOnly = false;
+        }else{
+            setValState(form.openamount, "Offener Betrag!",true);
+        }
+        subinputs['account_id[]'].forEach((line,index) => {
+            //wenn Kategorie gewählt muss Betrag da sein
+            if (line.value > 0){
+                if (!((parseFloat(subinputs['output[]'][index].value) > 0.0) || (parseFloat(subinputs['input[]'][index].value) > 0.0))){
+                    setValState(subinputs['output[]'][index],"Notwendig");
+                    setValState(subinputs['input[]'][index],"Notwendig");
+                } else {
+                    setValState(subinputs['output[]'][index],"Notwendig",true);
+                    setValState(subinputs['input[]'][index],"Notwendig",true);
+                }
+            }
+            else if ((subinputs['output[]'][index].value !=="") || (subinputs['input[]'][index].value !=="")){
+                setValState(line,"Notwendig");
+                setValState(subinputs['parent_id[]'][index],"Notwendig");
+            }
+            else {
+                setValState(line,"Notwendig",true);
+                setValState(subinputs['parent_id[]'][index],"Notwendig",true);
+            }
+        });
+    }
+    if (!form.checkValidity()) {
+        e.preventDefault();
+        e.stopPropagation();
+        form.openamount.readOnly = true;
+    }
+    form.classList.add('was-validated');
+}
+