Verification for new model

public/dmxAppConnect/dmxBootbox5/bootstrap-modbox.min.js

@@ -0,0 +1,57 @@
+/*
+ * bootstrap-modbox
+ * Native JavaScript wrapper for simple Bootstrap 5 modals. Provides support for alert, confirm, and prompt modals, as well as advanced custom dialogs.
+ *
+ * version: 1.6.1
+ * author: Eric Robertson
+ * license: MIT
+ *
+ * https://erobertson42.github.io/bootstrap-modbox/
+ */
+
+class modbox{static version="1.6.1";#options;#modal;#modalEl;#footer;static#bootstrapModal;static#defaultOptions={icon:null,style:"white",titleStyle:null,title:"Information",body:"",message:"",size:null,center:!1,fade:!0,show:!1,relatedTarget:void 0,scrollable:!0,destroyOnClose:!1,defaultButton:!0,swapButtonOrder:!1,justifyButtons:null,showHeaderClose:!0,events:{},buttons:[],okButton:{label:"OK",style:"primary"},closeButton:{label:"Close",style:"secondary"},input:{type:"text",class:"",value:"",title:null,placeholder:null,autocomplete:"off",minlength:null,maxlength:null,pattern:null,required:!1,sanitizer:!1},sanitizer:modbox.#sanitizeString};static#defaultButtonOptions={label:"Close",style:"secondary",class:"",outline:!1,size:null,icon:null,title:null,disabled:!1,close:!0,callback:null};static#modalDefaults={alert:{title:"Alert"},info:{style:"info",title:"Information"},success:{style:"success",title:"Success"},warning:{style:"warning",title:"Warning"},danger:{style:"danger",title:"Error"},confirm:{title:"Confirm"},prompt:{title:"Prompt",input:{id:modbox.#getUID("modbox-input-")}}};static#getUID(t="modbox-"){return t+Date.now()+Math.floor(1e4*Math.random())}static#typeof(t){return"object"==typeof t?Object.prototype.toString.call(t).slice(8,-1).toLowerCase():typeof t}static#deepMerge(i,s){const n={...i,...s};return Object.keys(n).forEach(t=>{var o=i[t],e=s[t];"object"===modbox.#typeof(o)&&"object"===modbox.#typeof(e)&&(n[t]=modbox.#deepMerge(o,e))}),n}static#checkUserOptions(t){return"string"==typeof t?{body:t}:t}static#mergeModalOptions(t,o={}){return modbox.#deepMerge(modbox.#deepMerge(modbox.#defaultOptions,modbox.#modalDefaults[t]),modbox.#checkUserOptions(o))}static#sanitizeString(t=""){return t}static#buildPromiseModal(a={},d="alert"){return a={...a,destroyOnClose:!0,defaultButton:!1,buttons:[]},new Promise((s,t)=>{const n=new modbox(a),o=[a.closeButton];if(["confirm","prompt"].includes(d)){let i=()=>s();if("prompt"===d&&"object"===modbox.#typeof(a.input)){let e=!1;(!0===a.input.required||"number"==typeof a.input.minlength||"string"==typeof a.input.pattern&&a.input.pattern.length)&&(a.okButton.close=!1,e=!0),i=()=>{const t=n.modalEl.querySelector(`#${a.input.id}`);if(!0!==e||t.reportValidity()){const o="function"==typeof n.options.input.sanitizer?n.options.input.sanitizer:!0===n.options.input.sanitizer?n.options.sanitizer:modbox.#sanitizeString;s(o(t.value)),n.hide()}}}o.unshift({...a.okButton,callback:function(t,o){"function"==typeof a.okButton.callback&&a.okButton.callback.call(this,t,o),i()}})}const[e]=o.map(t=>n.addButton(t));"prompt"===d&&"object"===modbox.#typeof(a.input)&&n.modalEl.querySelector(`#${a.input.id}`).addEventListener("keyup",t=>{"Enter"===t.key&&e.click()}),n.addEvent("hidden",()=>{"alert"===d?s():["confirm","prompt"].includes(d)&&document.activeElement!==e&&t()}),n.show()})}#buildModal(){var t=["primary","secondary","success","danger","dark","body"].includes(this.#options.style),o=this.#options.titleStyle||(t?"white":"dark"),t=`btn-close ${t?"btn-close-white":""}`;modbox.container.insertAdjacentHTML("beforeend",this.#options.sanitizer(`
+			<div class="modal ${this.#options.fade?"fade":""}" id="${this.#options.id}" tabindex="-1" aria-labelledby="${this.#options.id}-title" aria-hidden="true">
+				<div class="modal-dialog ${this.#options.scrollable?"modal-dialog-scrollable":""} ${this.#options.center?"modal-dialog-centered":""} ${this.#options.size?`modal-${this.#options.size}`:""}">
+					<div class="modal-content">
+						<div class="modal-header ${this.#options.style?`bg-${this.#options.style}`:""} ${this.#options.title?"":"d-none"}">
+							<h5 class="modal-title text-${o}">
+								${this.#options.icon?`<i class="${this.#options.icon} me-3"></i>`:""}
+								<span id="${this.#options.id}-title">${this.#options.title}</span>
+							</h5>
+							<button type="button" class="${t} ${!1===this.#options.showHeaderClose?"d-none":""}" data-bs-dismiss="modal" aria-label="Close"></button>
+						</div>
+						<div class="modal-body">
+							${this.#options.body}
+						</div>
+						<div class="modal-footer ${this.#options.justifyButtons?`d-flex justify-content-${this.#options.justifyButtons}`:""}"></div>
+					</div>
+				</div>
+			</div>
+		`.trim())),this.#modalEl=modbox.container.querySelector(`#${this.#options.id}`),this.#footer=this.#modalEl.querySelector(".modal-footer"),this.#addButtons()}#addButtons(){Array.isArray(this.#options.buttons)||(this.#options.buttons=[]),0===this.#options.buttons.length&&!0===this.#options.defaultButton?this.#options.buttons=[modbox.#defaultButtonOptions]:this.#footer.classList.add("d-none"),this.#options.buttons.forEach(t=>this.addButton(t))}#addEvents(){Object.entries(this.#options.events).forEach(([t,o])=>{this.addEvent(t,o)}),!0===this.#options.destroyOnClose&&this.addEvent("hidden",()=>this.destroy())}constructor(t={}){if(!modbox.#bootstrapModal){if("object"!=typeof bootstrap)throw new Error('The "modbox.bootstrapModal" property is undefined.  If importing Bootstrap as an ES module, you must also manually set this property.  See the modbox README/docs for more info.');modbox.#bootstrapModal=bootstrap.Modal}if(modbox.#defaultOptions={...modbox.#bootstrapModal.Default,...modbox.#defaultOptions},this.#options={...modbox.#defaultOptions,id:modbox.#getUID(),...modbox.#checkUserOptions(t)},"string"!=typeof this.#options.body||!this.#options.body.length){if("string"!=typeof this.#options.message||!this.#options.message.length)throw new Error('The "body" or "message" configuration option is required (string).');this.#options.body=this.#options.message}var o,e;this.#buildModal(),this.#modal=new modbox.#bootstrapModal(this.#modalEl,([{backdrop:o,keyboard:e,focus:t}]=[this.#options],{backdrop:o,keyboard:e,focus:t})),this.#addEvents(),!0===this.#options.show&&this.show(this.#options.relatedTarget)}get options(){return this.#options}get modal(){return this.#modal}get modalEl(){return this.#modalEl}get buttons(){return[...this.#footer.querySelectorAll("button")]}static get bootstrapModal(){return modbox.#bootstrapModal}static set bootstrapModal(t){modbox.#bootstrapModal=t}static get defaultOptions(){return modbox.#defaultOptions}static set defaultOptions(t={}){modbox.#defaultOptions=modbox.#deepMerge(modbox.#defaultOptions,t)}static get defaultButtonOptions(){return modbox.#defaultButtonOptions}static set defaultButtonOptions(t={}){modbox.#defaultButtonOptions={...modbox.#defaultButtonOptions,...t}}static setDefaults(t,o={}){if(!(t="error"===(t=t.trim?.().toLowerCase?.())?"danger":t)||!["alert","info","success","warning","danger","confirm","prompt"].includes(t))throw new Error("Invalid modal type.");o="object"===modbox.#typeof(o)?o:{},modbox.#modalDefaults[t]=modbox.#deepMerge(modbox.#modalDefaults[t],o)}addButton(t={},o=this.#options.swapButtonOrder){this.#footer.classList.remove("d-none");var e=o?"afterbegin":"beforeend";if("string"==typeof t&&t.length){this.#footer.insertAdjacentHTML(e,this.#options.sanitizer(t));var i=this.buttons;return i[o?0:i.length-1]}const s={...modbox.#defaultButtonOptions,id:modbox.#getUID("modbox-btn-"),...t};this.#footer.insertAdjacentHTML(e,this.#options.sanitizer(`
+			<button
+				type="button"
+				class="btn btn-${s.outline?"outline-":""}${s.style} ${s.class} ${s.size?`btn-${s.size}`:""}"
+				id="${s.id}"
+				${s.title?`title="${s.title}"`:""}
+				${s.close?'data-bs-dismiss="modal"':""}
+				${s.disabled?"disabled":""}
+			>
+				${s.icon?`<i class="${s.icon} me-2"></i>`:""}${s.label}
+			</button>
+		`.trim()));const n=this.#footer.querySelector(`#${s.id}`);return n&&"function"==typeof s.callback&&n.addEventListener("click",t=>s.callback.call(n,t,this)),n}addEvent(t,o){["show","shown","hide","hidden","hidePrevented"].includes(t)&&"function"==typeof o&&this.#modalEl.addEventListener(`${t}.bs.modal`,t=>o.call(this.#modalEl,t,this))}destroy(){this.dispose(),this.#modalEl.remove()}static get container(){let t=document.querySelector("#modbox-container");if(!t){const o=document.createElement("div");o.id="modbox-container",t=document.body.appendChild(o)}return t}static alert(t={}){return modbox.#buildPromiseModal(modbox.#mergeModalOptions("alert",t))}static info(t={}){return modbox.#buildPromiseModal(modbox.#mergeModalOptions("info",t))}static success(t={}){return modbox.#buildPromiseModal(modbox.#mergeModalOptions("success",t))}static warning(t={}){return modbox.#buildPromiseModal(modbox.#mergeModalOptions("warning",t))}static danger(t={}){return modbox.#buildPromiseModal(modbox.#mergeModalOptions("danger",t))}static error(t={}){return modbox.danger(t)}static confirm(t={}){return modbox.#buildPromiseModal(modbox.#mergeModalOptions("confirm",t),"confirm")}static prompt(t={}){const o=modbox.#mergeModalOptions("prompt",t);return"regexp"===modbox.#typeof(o.input?.pattern)&&(o.input.pattern=o.input.pattern.source),o.body=`
+			${o.body?`<p>${o.body}</p>`:""}
+			${"string"==typeof o.input?o.input:`<input
+					type="${o.input.type}"
+					class="form-control ${o.input.class}"
+					id="${o.input.id}"
+					value="${o.input.value}"
+					${o.input.title?`title="${o.input.title}"`:""}
+					${o.input.placeholder?`placeholder="${o.input.placeholder}"`:""}
+					${o.input.autocomplete?`autocomplete="${o.input.autocomplete}"`:""}
+					${"number"==typeof o.input.minlength?`minlength="${o.input.minlength}"`:""}
+					${"number"==typeof o.input.maxlength?`maxlength="${o.input.maxlength}"`:""}
+					${"string"==typeof o.input.pattern&&o.input.pattern.length?`pattern="${o.input.pattern}"`:""}
+					${o.input.required?"required":""}
+				>`}
+		`.trim(),modbox.#buildPromiseModal(o,"prompt")}toggle(){this.#modal.toggle()}show(t=this.#options.relatedTarget){this.#modal.show(t)}hide(){this.#modal.hide()}handleUpdate(){this.#modal.handleUpdate()}dispose(){this.#modal.dispose()}static getInstance(t){return modbox.#bootstrapModal.getInstance(t)}static getOrCreateInstance(t){return modbox.#bootstrapModal.getOrCreateInstance(t)}}
+//# sourceMappingURL=bootstrap-modbox.min.js.map

views/dspeckit.ejs

@@ -1,4 +1,4 @@
-<!-- Wappler include head-page="layouts/main" fontawesome_5="cdn" bootstrap5="local" is="dmx-app" id="dspec2" appconnect="local" components="{dmxBootstrap5Modal:{},dmxStateManagement:{},dmxFormatter:{},dmxDatastore:{},dmxDatePicker:{},dmxBootstrap5TableGenerator:{},dmxDataTraversal:{},dmxBootstrap5Navigation:{},dmxTyped:{},dmxAutocomplete:{}}" dmx-on:load="query1.set('tab',14)" jquery_slim_35="cdn" moment_2="cdn" -->
+<!-- Wappler include head-page="layouts/main" fontawesome_5="cdn" bootstrap5="local" is="dmx-app" id="dspec2" appconnect="local" components="{dmxBootstrap5Modal:{},dmxStateManagement:{},dmxFormatter:{},dmxDatastore:{},dmxDatePicker:{},dmxBootstrap5TableGenerator:{},dmxDataTraversal:{},dmxBootstrap5Navigation:{},dmxTyped:{},dmxAutocomplete:{},dmxBootstrap5Toasts:{},dmxNotifications:{},dmxBootbox5:{}}" dmx-on:load="query1.set('tab',14)" jquery_slim_35="cdn" moment_2="cdn" -->
 <meta name="ac:route" content="/dspeckit">
 <script is="dmx-flow" id="flow1" type="text/dmx-flow" autorun="true">{
   condition: {
@@ -122,51 +122,43 @@
             <dmx-api-action id="api_postapplication" noload="true" dmx-bind:url="pg_apiurl.value.concat('applications/create')" url="http://vapor.prelub.com/api/applications/create" method="post" dmx-data:id="txt_appid.value.toNumber()" dmx-data:engineid="inp_appengine.value.toNumber()" dmx-data:modelid="inp_appmodel.value.toNumber()" dmx-data:oe="inp_chkoe.checked" dmx-data:partnumberid="var_partid.value.toNumber()" dmx-data:description="inp_appdesc.value" dmx-data:arrangement="inp_arrangement.value" dmx-data:serialprefix="inp_serialprefix.value" dmx-data:motor="inp_motor.value" dmx-data:electric="inp_electric.value" dmx-data:plumbing="inp_plumbing.value" dmx-data:voltage="inp_voltage.value" dmx-data:type="inp_type.value" dmx-data:enginecapacity="inp_engcapacity.value" dmx-data:transcapacity="inp_transcapacity.value" dmx-data:hydcapacity="inp_hydcapacity.value" dmx-data:startingserial="inp_serialstart.value" dmx-data:endingserial="inp_serialend.value" data-type="json" dmx-on:success="txt_appid.setValue();mdl_app.hide();var_appid.setValue(0);api_getapps.load({})"></dmx-api-action>
             <div class="modal-header">
                 <h5 class="modal-title">Application</h5>&nbsp;&nbsp;
-                <a href="#" class="btn btn-sm btn-secondary" id="anc_newcustomer" dmx-on:click="mod_newcustomer.show()">New Customer</a>&nbsp;&nbsp;
+                &nbsp;&nbsp;
                 <a href="#" class="btn btn-sm btn-secondary" id="anc_newmodel" dmx-on:click="mod_newmodel.show()">New Model</a>&nbsp;&nbsp;
                 <a href="#" class="btn btn-sm btn-secondary" id="anc_newengine" dmx-on:click="mod_newengine.show()">New Engine</a><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
             </div>
             <div class="modal-body">
-                <div class="modal bg-secondary rounded-pill rounded-1 border-dark" id="mod_newcustomer" is="dmx-bs5-modal" tabindex="-1">
+                <div class="modal bg-secondary rounded-pill border-dark rounded-1" id="mod_newmodel" is="dmx-bs5-modal" tabindex="-1">
                     <div class="modal-dialog modal-dialog-centered" role="document">
                         <div class="modal-content">
+                            <dmx-api-action id="api_postmodel" noload="true" url="http://vapor.prelub.com/api/v1.0/models/insert" method="post" data-type="json" dmx-data:name="inp_newmodelname.value" dmx-data:makeid="inp_newmodelmake.value.toNumber()" dmx-data:productid="inp_newmodelproduct.value.toNumber()" dmx-data:description="null" dmx-data:createuserid="-1" dmx-data:updateuserid="-1" dmx-on:success="api_models.load({})" dmx-bind:url="pg_apiurl.value.concat('models')"></dmx-api-action>
                             <div class="modal-header">
-                                <h5 class="modal-title" id="mod_customer">New Customer</h5>
+                                <h5 class="modal-title" id="mod_customer1">New Model</h5>
                                 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                             </div>
                             <div class="modal-body">
-                                <div class="container">
-                                    <div class="row">
-                                        <div class="col" style="display: flex; width: 100%;">
-                                            <label style="padding: 10px;">Name:</label>
-                                            <input id="inp_newcustomername" name="inpnewcustomername" type="text" class="form-control">
+                                <div class="modal" id="mod_confirmnewmodel" is="dmx-bs5-modal" tabindex="-1">
+                                    <div class="modal-dialog modal-sm modal-dialog-centered" role="document">
+                                        <div class="modal-content">
+
+                                            <div class="modal-body">
+                                                <p class="lh-sm small text-center">Model already exists. Do you still wish to add it?</p>
+                                            </div>
+                                            <div class="modal-footer">
+                                                <button id="btn_yes" class="btn btn-success btn-sm" dmx-on:click="api_postmodel.load({})">YES</button>
+                                                <button id="btn_cancel" class="btn btn-danger btn-sm" dmx-on:click="mod_confirmnewmodel.hide()">NO</button>
+                                            </div>
                                         </div>
                                     </div>
+                                </div>
+                                <div class="container">
                                     <div class="row">
                                         <div class="col" style="display: flex; width: 100%;">
-                                            <label style="padding: 10px;">Description:</label>
-                                            <input id="inp_newcustomerdescription" name="inpnewcustomerdescription" type="text" class="form-control">
+                                            <label>Name:</label>
+                                            <input id="inp_newmodelname" name="newmodelname" type="text" class="form-control">
+                                            &nbsp;&nbsp;
+
                                         </div>
                                     </div>
-                                </div>
-                            </div>
-                            <div class="modal-footer">
-                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
-                                <button type="button" class="btn btn-primary">Save changes</button>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div class="modal bg-secondary rounded-pill border-dark rounded-1" id="mod_newmodel" is="dmx-bs5-modal" tabindex="-1">
-                    <div class="modal-dialog modal-dialog-centered" role="document">
-                        <div class="modal-content">
-                            <dmx-api-action id="api_postmodel" noload="true" url="http://vapor.prelub.com/api/v1.0/models/insert" method="post" data-type="json" dmx-data:name="inp_newmodelname.value" dmx-data:makeid="inp_newmodelmake.value.toNumber()" dmx-data:productid="inp_newmodelproduct.value.toNumber()" dmx-data:description="null" dmx-data:createuserid="-1" dmx-data:updateuserid="-1" dmx-on:success="api_models.load({})" dmx-bind:url="pg_apiurl.value.concat('models')"></dmx-api-action>
-                            <div class="modal-header">
-                                <h5 class="modal-title" id="mod_customer1">New Model</h5>
-                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-                            </div>
-                            <div class="modal-body">
-                                <div class="container">
                                     <div class="row">
                                         <div class="col" style="display: flex; width: 100%;">
                                             <label>Product:</label>
@@ -181,19 +173,12 @@
 
                                         </div>
                                     </div>
-                                    <div class="row">
-                                        <div class="col" style="display: flex; width: 100%;">
-                                            <label>Name:</label>
-                                            <input id="inp_newmodelname" name="newmodelname" type="text" class="form-control">
-                                            &nbsp;&nbsp;
 
-                                        </div>
-                                    </div>
                                 </div>
                             </div>
                             <div class="modal-footer">
                                 <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
-                                <button type="button" class="btn btn-primary" dmx-on:click="api_postmodel.load({})">Save changes</button>
+                                <button type="button" class="btn btn-primary" dmx-on:click="run({condition:{if:`api_models.data.where(\`name\`, inp_newmodelname.value, \'==\')`,then:{steps:{run:{action:`mod_confirmnewmodel.show()`,outputType:'text'}}},else:{steps:{run:{action:`api_postmodel.load({})`,outputType:'text'}}},outputType:'boolean'}})">Save changes</button>
                             </div>
                         </div>
                     </div>
@@ -280,7 +265,7 @@
             </div>
             <div class="modal-footer">
                 <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" dmx-on:click="var_appid.setValue(0);var_newmodelid.setValue(0);txt_appid.setValue();inp_appmodel.setValue(0);inp_appengine.setValue(0);inp_appdesc.setValue();inp_arrangement.setValue();inp_serialprefix.setValue();inp_chkoe.select(false);inp_motor.setValue();inp_electric.setValue();inp_plumbing.setValue();inp_voltage.setValue();inp_serialstart.setValue();inp_serialend.setValue();inp_type.setValue();inp_engcapacity.setValue();inp_transcapacity.setValue();inp_hydcapacity.setValue()">Close</button>
-                <button type="button" class="btn btn-primary" dmx-on:click="api_postapplication.load({})">Save changes</button>
+                <button type="button" class="btn btn-primary" dmx-on:click="api_postapplication.load({});txt_appid.setValue();inp_appmodel.setValue(0);inp_appengine.setValue(0);inp_appdesc.setValue();inp_arrangement.setValue();inp_serialprefix.setValue();inp_chkoe.select(false);inp_motor.setValue();inp_electric.setValue();inp_plumbing.setValue();inp_voltage.setValue();inp_serialstart.setValue();inp_serialend.setValue();inp_type.setValue();inp_engcapacity.setValue();inp_transcapacity.setValue();inp_hydcapacity.setValue();mdl_app.hide()">Save changes</button>
             </div>
         </div>
     </div>

views/layouts/main.ejs

@@ -41,6 +41,8 @@
 
   <link rel="stylesheet" href="/dmxAppConnect/dmxAutocomplete/dmxAutocomplete.css" />
   <script src="/dmxAppConnect/dmxAutocomplete/dmxAutocomplete.js" defer></script>
+  <script src="/dmxAppConnect/dmxBootbox5/bootstrap-modbox.min.js" defer></script>
+  <script src="/dmxAppConnect/dmxBootbox5/dmxBootbox5.js" defer></script>
 </head>
 
 <body is="dmx-app" id="main">