Application page and form complete without save function

views/dspeckit.ejs

@@ -115,7 +115,7 @@
         </div>
     </div>
 </div>
-<div class="modal rounded rounded-3 border-dark" id="mdl_app" is="dmx-bs5-modal" tabindex="-1" dmx-on:hide-bs-modal="var_appid.setValue(0)">
+<div class="modal rounded rounded-3 border-dark" id="mdl_app" is="dmx-bs5-modal" tabindex="-1" dmx-on:hide-bs-modal="var_appid.setValue(0);txt_appid.setValue();inp_custoer.setValue(0);inp_appmodel.setValue(0)">
     <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-xl" role="document">
         <div class="modal-content">
             <dmx-value id="var_newmodelid"></dmx-value>
@@ -217,58 +217,65 @@
                 <input id="txt_appid" name="appid" type="text" class="form-control visually-hidden">
                 <div class="row align-items-center justify-content-start g-0" style="padding-top: 1px; padding-bottom: 1px; padding-left: 1px; padding-right: 1px;">
                     <div class="align-self-center col-4" style="display: flex; width: 100%;">
-                        <label>Customer: </label>
-                        <input id="inp_custoer" name="inpcustomer" class="form-control form-control-sm" style="width: 200px;" type="text" is="dmx-autocomplete" dmx-bind:data="api_customers.data" optiontext="name" optionvalue="id" optionsearch="name">
+                        <label style="padding: 10px;">Customer:</label>
+                        <input id="inp_custoer" name="inpcustomer" class="form-control form-control-sm" style="width: 200px;" type="text" is="dmx-autocomplete" dmx-bind:data="api_customers.data" optiontext="name" optionvalue="id" optionsearch="name" style="padding: 10px;">
 
-                        <label>Model: </label>
-                        <input id="inp_appmodel" name="inpappmodel" type="text" class="form-control" is="dmx-autocomplete" dmx-bind:data="api_models.data" optiontext="name" optionvalue="id" optionsearch="name">
-                        <label>Engine: </label>
-                        <input id="inp_appengine" name="inpappengine" type="text" class="form-control" is="dmx-autocomplete" dmx-bind:data="api_engines.data" optiontext="displacement" optionvalue="id" optionsearch="displacement">
+                        <label style="padding: 10px;">Model:</label>
+                        <input id="inp_appmodel" name="inpappmodel" type="text" class="form-control" is="dmx-autocomplete" dmx-bind:data="api_models.data" optiontext="name" optionvalue="id" optionsearch="name" style="padding: 10px;">
+                        <label style="padding: 10px;">Engine:</label>
+                        <input id="inp_appengine" name="inpappengine" type="text" class="form-control" is="dmx-autocomplete" dmx-bind:data="api_engines.data" optiontext="displacement" optionvalue="id" optionsearch="displacement" style="padding: 10px;">
 
                     </div>
                 </div>
                 <div class="row align-items-center justify-content-start g-0" style="padding-top: 1px; padding-bottom: 1px; padding-left: 1px; padding-right: 1px;">
                     <div class="align-self-center col-4" style="display: flex; width: 100%;">
-                        <label>Description: </label>
-                        <textarea id="inp_appdesc" class="form-control" name="appdesc"></textarea>&nbsp;
-                        <label>Arrangement: </label>
-                        <input id="inp_arrangement" name="inparrangement" type="text" class="form-control form-control-sm">
+                        <label style="padding: 10px;">Description:</label>
+                        <textarea id="inp_appdesc" class="form-control" name="appdesc" style="padding: 10px;"></textarea>
+                        <label style="padding: 10px;">Arrangement:</label>
+                        <input id="inp_arrangement" name="inparrangement" type="text" class="form-control form-control-sm" style="padding: 10px;">
 
                     </div>
                 </div>
                 <div class="row align-items-center justify-content-start g-0" style="padding-top: 1px; padding-bottom: 1px; padding-left: 1px; padding-right: 1px;">
                     <div class="align-self-center col-4" style="display: flex; width: 100%;">
-                        <label>Serial Prefix: </label>
-                        <input id="inp_serialprefix" name="inpserialprefix" type="text" class="form-control form-control-sm" style="width: 100px;">
-                        <label class="form-check-label" for="inpchkoe">OE: </label>
-                        <div class="form-check">
+                        <label>Serial Prefix:</label>
+                        <input id="inp_serialprefix" name="inpserialprefix" type="text" class="form-control form-control-sm" style="width: 100px; padding: 10px;">
+                        <label class="form-check-label" for="inpchkoe" style="padding: 10px;">OE:</label>
+                        <div class="form-check" style="padding: 10px;">
                             <input class="form-check-input" type="checkbox" value="" id="inp_chkoe" name="inpchkoe">
                         </div>
-                        <label>Motor: </label>
-                        <input id="inp_motor" name="inpmotor" type="text" class="form-control form-control-sm" style="width: 100px;">
+                        <label style="padding: 10px;">Motor:</label>
+                        <input id="inp_motor" name="inpmotor" type="text" class="form-control form-control-sm" style="width: 100px; padding: 10px;">
                     </div>
                 </div>
                 <div class="row align-items-center justify-content-start g-0" style="padding-top: 1px; padding-bottom: 1px; padding-left: 1px; padding-right: 1px;">
                     <div class="align-self-center col-4" style="display: flex; width: 100%;">
-                        <label>Electric: </label>
-                        <input id="inp_electric" name="inpelectric" type="text" class="form-control form-control-sm" style="width: 100px;">
-                        <label>Plumbing: </label>
-                        <input id="inp_plumbing" name="inpplumbing" type="text" class="form-control form-control-sm" style="width: 100px">
-                        <label>Voltage: </label>
-                        <input id="inp_voltage" name="inpvoltage" type="text" class="form-control form-control-sm" style="width: 100px;">
+                        <label style="padding: 10px;">Electric:</label>
+                        <input id="inp_electric" name="inpelectric" type="text" class="form-control form-control-sm" style="width: 100px; padding: 10px;">
+                        <label style="padding: 10px;">Plumbing:</label>
+                        <input id="inp_plumbing" name="inpplumbing" type="text" class="form-control form-control-sm" style="width: 100px; padding: 10px;">
+                        <label style="padding: 10px;">Voltage:</label>
+                        <input id="inp_voltage" name="inpvoltage" type="text" class="form-control form-control-sm" style="width: 100px; padding: 10px;">
                     </div>
                 </div>
                 <div class="row align-items-center justify-content-start g-0" style="padding-top: 1px; padding-bottom: 1px; padding-left: 1px; padding-right: 1px;">
                     <div class="align-self-center col-4" style="display: flex; width: 100%;">
-                        <label>Starting Serial: </label>
-                        <input id="inp_serialstart" name="inpserialstart" type="text" class="form-control form-control-sm" style="width: 200px;">
-                        <label>Ending Serial: </label>
-                        <input id="inp_serialend" name="inpserialend" type="text" class="form-control form-control-sm" style="width: 200px;">
+                        <label style="padding: 10px;">Starting Serial:</label>
+                        <input id="inp_serialstart" name="inpserialstart" type="text" class="form-control form-control-sm" style="width: 200px; padding: 10px;">
+                        <label style="padding: 10px;">Ending Serial:</label>
+                        <input id="inp_serialend" name="inpserialend" type="text" class="form-control form-control-sm" style="width: 200px; padding: 10px;">
+                        <label style="padding: 10px;">type:</label>
+                        <input id="inp_type" name="inptype" type="text" class="form-control form-control-sm" style="width: 200px; padding: 10px;">
                     </div>
                 </div>
                 <div class="row align-items-center justify-content-start g-0" style="padding-top: 1px; padding-bottom: 1px; padding-left: 1px; padding-right: 1px;">
                     <div class="align-self-center col-4" style="display: flex; width: 100%;">
-
+                        <label style="padding: 10px;">Engine Capacity:</label>
+                        <input id="inp_engcapacity" name="inpengcapacity" type="text" class="form-control form-control-sm" style="width: 200px; padding: 10px;">
+                        <label style="padding: 10px;">Trans Capacity:</label>
+                        <input id="inp_transcapacity" name="inptranscapacity" type="text" class="form-control form-control-sm" style="width: 200px; padding: 10px;">
+                        <label style="padding: 10px;">Hyd Capacity:</label>
+                        <input id="inp_hydcapacity" name="inphydcapacity" type="text" class="form-control form-control-sm" style="width: 200px; padding: 10px;">
                     </div>
                 </div>
             </div>
@@ -624,6 +631,7 @@
                     </div>
                 </div>
                 <div class="tab-pane fade" id="navTabs1_5" role="tabpanel">
+                    <button id="btn_newapp" class="btn btn-secondary" dmx-on:click="mdl_app.show()">Add</button>
                     <div class="table-responsive">
                         <table class="table">
                             <thead>