Added js validation to Order Form

Layout/default/Order/Form.php

@@ -25,7 +25,7 @@
           <div class="card-body">
             <h4 class="header-title mb-2"><?=($order->id) ? "Bestellung bearbeiten" : "Neue Bestellung"?></h4>
             
-            <form class="form-horizontal" method="post" action="<?=self::getUrl("Order", "save")?>" enctype="multipart/form-data">
+            <form class="form-horizontal" method="post" action="<?=self::getUrl("Order", "save")?>" name="orderForm" id="orderForm" enctype="multipart/form-data">
               <div class="card">
                 <div class="card-body">
                   
@@ -317,6 +317,7 @@
                     <label class="col-lg-2 col-form-label" for="bank_account_iban">IBAN</label>
                     <div class="col-lg-10">
                       <input type="text" class="form-control" name="bank_account_iban" id="bank_account_iban" value="<?=$order->bank_account_iban?>" />
+                      <small id="iban_error" class="hidden">IBAN ungültig!</small>
                     </div>
                   </div>
                   
@@ -607,6 +608,7 @@
                 <label class="col-lg-2"></label>
                 <div class="col-lg-10">
                   <button type="submit" class="btn btn-primary">Speichern</button>
+                  <span id="form-error" class="text-danger hidden">Bitte alle benötigten Felder ausfüllen!</span>
                 </div>
               </div>
               
@@ -721,9 +723,171 @@
     },
     'json');
     
-    
-    
   }
+  
+  /*********************
+  * Form validation
+  */
+
+  // iban validation
+  function validateIban(iban) {
+    if(!iban) {
+      return false;
+    }
+    iban = iban.toUpperCase().replace(/\s+/, '');
+    //check format
+    var m;
+    
+    if(!iban.match(/^[A-Z]{2}[0-9]{2}[A-Z0-9]{1,30}$/)) {
+      return false;
+    }
+    
+    var cc = iban.substr(0, 2);
+    var check = parseInt(iban.substr(2, 2));
+    var account = iban.substr(4);
+
+    var searchRange = "ABCDEFGHIJKLMNOPQRSTUVWXYZ".split('');
+    //var replaceRange = [];
+    var checkStr = account + cc + "00";
+    for(var i = 0; i <= 25; i++) {
+      checkStr = checkStr.replace(searchRange[i], i + 10);
+    };
+    // make checksum
+    var checksum = parseInt(checkStr.substr(0,1));
+    for(pos = 1; pos < checkStr.length; pos++) {
+      checksum *= 10;
+      checksum += parseInt(checkStr.substr(pos, 1));
+      checksum %= 97;
+    }
+    
+    if(98 - checksum == check) {
+      return true;
+    } else {
+      return false;
+    }
+  }
+  
+  
+  
+  function validateOrderForm() {
+    var allFields = [
+      "owner_id", "owner_company", "owner_firstname", "owner_lastname", "owner_street", "owner_zip", "owner_city", "owner_country", "owner_phone", "owner_email",
+      "billingaddress_id", "billing_company", "billing_firstname", "billing_lastname", "billing_street", "billing_zip", "billing_city", "billing_country", "billing_phone", "billing_email",
+      "order_date", "finish_after", "finish_after_comment", "billing_type", "bank_account_bank", "bank_account_owner", "bank_account_iban", "bank_account_bic"
+    ];
+    var checkEmpty = [];
+    var error = false;
+
+    // remove invalid class
+    allFields.forEach(function(field) {
+      //console.log("remove invalid " + field);
+      $("#" + field).removeClass("invalid");
+    });
+    $("#form-error").hide();
+    $("#iban_error").hide();
+    $('#owner_id').next().find('.select2-selection').removeClass('invalid');
+    $('#billingaddress_id').next().find('.select2-selection').removeClass('invalid');
+    
+    checkEmpty.push("order_date");
+    if($('#finish_after').val()) {
+      checkEmpty.push("finish_after_comment");
+    }
+
+    if($('#owner_id').val() == "new") {
+      if(!$('#owner_company').val()) {
+        //console.log("no owner_company");
+        if(!$('#owner_firstname').val() || !$('#owner_lastname').val()) {
+          $('#owner_company').addClass("invalid");
+          $('#owner_firstname').addClass("invalid");
+          $('#owner_lastname').addClass("invalid");
+          error = true;
+        }
+      }
+      checkEmpty.push("owner_street");
+      checkEmpty.push("owner_zip");
+      checkEmpty.push("owner_city");
+      //checkEmpty.push("owner_country");
+      checkEmpty.push("owner_phone");
+      checkEmpty.push("owner_email");
+    }
+    
+    if(!$('#owner_id :selected').val()) {
+      $('#owner_id').addClass("invalid");
+      $('#owner_id').next().find('.select2-selection').addClass('invalid');
+      error = true;
+    }
+    
+    if($('#billingaddress_id').val() == "new") {
+      if(!$('#billing_company').val()) {
+        //console.log("no billing_company");
+        if(!$('#billing_firstname').val() || !$('#billing_lastname').val()) {
+          $('#billing_company').addClass("invalid");
+          $('#billing_firstname').addClass("invalid");
+          $('#billing_lastname').addClass("invalid");
+          error = true;
+        }
+      }
+      checkEmpty.push("billing_street");
+      checkEmpty.push("billing_zip");
+      checkEmpty.push("billing_city");
+      //checkEmpty.push("billing_country");
+      checkEmpty.push("billing_phone");
+      checkEmpty.push("billing_email");
+    }
+    if(!$('#billingaddress_id :selected').val()) {
+      $('#billingaddress_id').addClass("invalid");
+      $('#billingaddress_id').next().find('.select2-selection').addClass('invalid');
+      error = true;
+    }
+
+    // check bankdaten
+    if($('#billing_type').val() == "sepa") {
+      checkEmpty.push("bank_account_bank");
+      checkEmpty.push("bank_account_owner");
+      checkEmpty.push("bank_account_bic");
+
+      if(!validateIban($("#bank_account_iban").val())) {
+        $("#bank_account_iban").addClass("invalid");
+        $("#iban_error").show();
+        error = true;
+      }
+    }
+    
+    if(checkEmpty.length) {
+      checkEmpty.forEach(function(field) {
+        if(!$("#" + field).val().length) {
+          console(field + " empty");
+          $("#" + field).addClass("invalid");
+          error = true;
+        }
+      });
+    }
+    
+    if($('#owner_id').hasClass("invalid")) {
+      $('#owner_id').next().find('.select2-selection').addClass('invalid');
+    }
+    
+    if(error) {
+      $("#form-error").show();
+    }
+    
+    console.log("empty: " + checkEmpty);
+    return true;
+   }
+
+  
+   
+  $(document).ready(function() {
+    $('#orderForm').submit(function(e) {
+       console.log("submit");
+       if(!validateOrderForm()) {
+         console.log("nope");
+         e.preventDefault();
+         return false;
+       }
+       return true;
+     });
+   });
 
 </script>
 

Layout/default/Order/Index.php

@@ -30,6 +30,7 @@
             
             <table class="table table-striped table-hover">
               <tr>
+                <th></th>
                 <th>Kunde</th>
                 <th>Adresse</th>
                 <th>Anschlussadresse</th>
@@ -40,6 +41,17 @@
               </tr>
               <?php foreach($orders as $order): ?>
               <tr>
+                <td>
+                  <?php if(is_array($order->terminations) && count($order->terminations)): ?>
+                    <?php if($order->terminations[0]->status->code >= TT_TERMSTATUS_CONNECTED): ?>
+                      <span class="status connected" title="Anschluss connected">CON</span>
+                    <?php elseif($order->terminations[0]->building->status->code >= TT_BUILDINGSTATUS_CONNECTED): ?>
+                      <span class="status building-connected" title="Tiefbau erledigt">B-C</span>
+                    <?php else: ?>
+                      <span class="status not-connected" title="Tiefbau ausständig">BNC</span>
+                    <?php endif; ?>
+                  <?php endif; ?>
+                </td>
                 <td><?=nl2br($order->owner->getCompanyOrName())?></td>
                 <td>
                   <?=$order->owner->street?><br />

Layout/default/Product/Form.php

@@ -82,7 +82,7 @@
                   </div>
                   
                   <div class="form-group row">
-                    <label class="col-lg-2 col-form-label" for="producttech_id">Technologie *</label>
+                    <label class="col-lg-2 col-form-label" for="producttech_id">Technologie</label>
                     <div class="col-lg-10">
                       <select class="select2 form-control " name="producttech_id" id="producttech_id">
                         <option></option>

Layout/default/menu.php

@@ -44,7 +44,7 @@
         <?php if($me->is(["Admin","salespartner"])): ?>
         <li class="has-submenu">
           <a href="#">
-            <i class="fas fa-beer"></i>Verkauf <div class="arrow-down"></div>
+            <i class="fas fa-shopping-basket"></i>Verkauf <div class="arrow-down"></div>
           </a>
           <ul class="submenu">
             <li><a href="<?=self::getUrl("Order")?>">Bestellungen</a></li>

public/assets/css/thetool.css

@@ -46,4 +46,37 @@ td.controls {
 
 .product-container:nth-child(even) {
   background-color: #f1f5f7;
-}
+}
+
+.status {
+  border-radius: 8px;
+}
+
+.status.not-connected {
+  background-color: red;
+  color: red;
+}
+
+.status.building-connected {
+  background-color: orange;
+  color: orange;
+}
+
+.status.connected {
+  background-color: limegreen;
+  color: limegreen;
+}
+
+.invalid {
+  border-color: red !important;
+}
+
+.invalid:focus {
+  border-color: red !important;
+}
+
+
+#iban_error {
+  color: red;
+}
+