Wappler_Access/views/secure/dspec.ejs

<!-- Wappler include head-page="layouts/smain" is="dmx-app" id="dspec" appConnect="local" components="{dmxStateManagement:{},dmxAutocomplete:{},dmxDatePicker:{},dmxBootstrap5Navigation:{},dmxFormatter:{},dmxBootstrap5Modal:{},dmxBootstrap4Navigation:{},dmxBootstrap4Modal:{},dmxBootstrap4TableGenerator:{}}" jquery_slim_35="cdn" moment_2="cdn" bootstrap4="cdn" fontawesome_5pro="cdn" -->
<dmx-query-manager id="query_partid"></dmx-query-manager>
<dmx-serverconnect id="conn_dspecinfo" url="/api/DSpec/searchpn" dmx-param:pn="query_partid.data.id" dmx-on:success="pt_rev.setValue(conn_dspecinfo.data.dspec.data.rev)"></dmx-serverconnect>
<dmx-serverconnect id="conn_copybomitems" url="/api/BOM/copyitems" dmx-param:olddspecid="conn_dspecinfo.data.dspec.data.id" dmx-param:newdspecid="var_dspecid.value" dmx-on:success="conn_dspecinfo.load({})" noload="true"></dmx-serverconnect>

<dmx-serverconnect id="conn_copybomfromotherpart" url="/api/BOM/copyitems" dmx-param:olddspecid="var_bomdspecid.value" dmx-param:newdspecid="conn_dspecinfo.data.dspec.data.id" dmx-on:success="conn_dspecinfo.load({})" noload="true"></dmx-serverconnect>

<dmx-serverconnect id="conn_revup" url="/api/DSpec/revup" dmx-param:id="conn_dspecinfo.data.dspec.data.id" dmx-param:userid="whoami.data.identity" dmx-on:success="conn_dspecinfo.load({pn: query_partid.data.id})" noload="true"></dmx-serverconnect>

<dmx-api-action id="api_postdspec" noload="true" method="post" dmx-data:revisionlevel="pt_rev.value" dmx-data:partnumberid="conn_dspecinfo.data.part.data.id" dmx-data:statusidpn="conn_dspecinfo.data.part.data.status.id.toString()" dmx-data:partcodeid="conn_dspecinfo.data.part.data.partcode.id.toString()" dmx-data:parttypeid="conn_dspecinfo.data.part.data.partcode.parttype.id.toString()" dmx-data:statusiddspec="4" dmx-data:effectivedate="ds_effectivedate.value" dmx-data:reasonforchange="ds_reasonforchange.value" dmx-data:validation="ds_validation.value" dmx-data:note="ds_notes.value" dmx-bind:url="pg_apiurl.value.concat('designspecs/alt')" dmx-on:success="conn_dspecinfo.load({})" dmx-data:id="var_dspecid.value"></dmx-api-action>

<dmx-api-action id="api_bominsertitem" noload="true" method="post" data-type="json" dmx-bind:url="pg_apiurl.value.concat('boms/wapplerinsert')" dmx-data:updatedate="NOW" dmx-data:viewlocationid="var_viewlocationid.value.toString()" dmx-data:old="var_bominsertold.value.toString()" dmx-data:createdate="NOW" dmx-data:designspecid="conn_dspecinfo.data.dspec.data.id.toString()" dmx-data:createuserid="whoami.data.identity.toString()" dmx-data:new="var_bominsertnew.value.toString()" dmx-data:updateuserid="whoami.data.identity.toString()" dmx-data:partnumberid="var_bominsertpnid.value.toString()" dmx-on:success="api_loadbombydspec.load({},true);conn_dspecinfo.load({})"></dmx-api-action>

<dmx-api-action id="api_deletethisitem" noload="true" method="delete" dmx-bind:url="pg_apiurl.value.concat('boms/'.concat(var_partidtodelete.value))" dmx-data:id=""></dmx-api-action>
<dmx-serverconnect id="conn_deleteapp" url="/api/apps/deleteapp" dmx-on:success="conn_dspecinfo.load({pn: query_partid.data.id},true)" noload="true"></dmx-serverconnect>


<dmx-value id="var_viewlocationid"></dmx-value>
<dmx-value id="var_bominsertold"></dmx-value>
<dmx-value id="var_bominsertnew"></dmx-value>
<dmx-value id="var_bominsertpnid"></dmx-value>
<dmx-value id="var_partidtodelete" dmx-on:updated="run([{run:{outputType:'text',action:`api_deletethisitem.load({})`}},{wait:{delay:1000}},{run:{outputType:'text',action:`conn_dspecinfo.load({pn: query_partid.data.id},true)`}}])"></dmx-value>
<dmx-value id="var_deleteapp" dmx-on:updated="conn_deleteapp.load({id: value})"></dmx-value>
<dmx-value id="var_revup" dmx-on:updated="run([{run:{outputType:'text',action:`var_dspecid.setValue(null)`}},{run:{outputType:'text',action:`api_postdspec.load({})`}},{run:{outputType:'text',action:`var_dspecid.setValue(api_postdspec.data.id)`}},{run:{outputType:'text',action:`conn_copybomitems.load({})`}}])"></dmx-value>
<dmx-value id="var_dspecid" dmx-bind:value="conn_dspecinfo.data.dspec.data.id"></dmx-value>

<div class="modal rounded rounded-3 border-dark" id="mdl_cpybom" is="dmx-bs5-modal" tabindex="-1">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Seach by Part#</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <dmx-value id="var_bomdspecid" dmx-bind:value="conn_searchforbom.data.dspec.data.id"></dmx-value>
                <div class="container">
                    <div class="row">
                        <div class="col-9"><input id="txt_searchforbom" name="searchbom" type="text" class="form-control" placeholder="Part#"></div>
                        <div class="col">
                            <button id="btn_search" class="btn btn-primary" dmx-on:click="conn_search.load({input: txt_searchforbom.value});var_dspecid.setValue(conn_search.data.api.data.id)">
                                <i class="fas fa-search" dmx-on:click="conn_searchforbom.load({pn: txt_searchforbom.value},true)"></i>
                            </button>
                            <button id="btn_copyfromotherpart" class="btn btn-primary" dmx-on:click="conn_copybomfromotherpart.load({olddspecid: var_bomdspecid.value, newdspecid: conn_dspecinfo.data.dspec.data.id});mdl_cpybom.hide();conn_dspecinfo.load({})">
                                <i class="fas fa-copy" dmx-on:click="conn_copybomfromotherpart.load({});conn_dspecinfo.load({})"></i>
                            </button>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col">
                            <div class="table-responsive">
                                <table class="table table-striped table-bordered table-hover table-sm">
                                    <thead>
                                        <tr>
                                            <th class="visually-hidden">Id</th>
                                            <th class="visually-hidden">Partnumberid</th>
                                            <th class="visually-hidden">Tab</th>
                                            <th>Partnumber</th>
                                            <th>Description</th>
                                            <th>Old</th>
                                            <th>New</th>
                                        </tr>
                                    </thead>
                                    <tbody is="dmx-repeat" dmx-generator="bs4table" dmx-bind:repeat="conn_searchforbom.data.boms.data" id="tableRepeat1">
                                        <tr>
                                            <td dmx-text="id" class="visually-hidden"></td>
                                            <td dmx-text="partnumberid" class="visually-hidden"></td>
                                            <td dmx-text="tab" class="visually-hidden"></td>
                                            <td dmx-text="partnumber"></td>
                                            <td dmx-text="description"></td>
                                            <td dmx-text="old"></td>
                                            <td dmx-text="new"></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>
<div class="modal rounded rounded-3 border-dark" id="mdl_app" is="dmx-bs5-modal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-xl" role="document">
        <div class="modal-content">
            <dmx-value id="var_appid" dmx-on:updated="inp_appmodel.setValue(conn_dspecinfo.data.apps.data.where(`id`, value, '==')[0].model.id);txt_appid.setValue(value);inp_appengine.setValue(conn_dspecinfo.data.apps.data.where(`id`, value, '==')[0].engine.id);inp_appdesc.setValue(conn_dspecinfo.data.apps.data.where(`id`, value, '==')[0].description)"></dmx-value>
            <dmx-value id="var_newmodelid"></dmx-value>
            <dmx-api-action id="api_postapplication" noload="true" dmx-bind:url="pg_apiurl.value.concat('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="conn_dspecinfo.data.part.data.id" 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="mdl_app.hide();conn_dspecinfo.load({})"></dmx-api-action>
            <div class="modal-header">
                <h5 class="modal-title">Application</h5>&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();mod_newengine.inp_newengineproduct.setValue(6);mod_newengine.inp_newengineproduct.disable(true)">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 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" 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({});var_newmodelid.setValue(api_postmodel.data.id);inp_appmodel.setValue(api_postmodel.data.id);mod_newmodel.hide();mod_confirmnewmodel.hide()" dmx-bind:url="pg_apiurl.value.concat('models')" dmx-data:displacement="null"></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="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>Name:</label>
                                            <input id="inp_newmodelname" name="newmodelname" type="text" class="form-control">
                                            &nbsp;&nbsp;

                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col" style="display: flex; width: 100%;">
                                            <label>Product:</label>
                                            <input id="inp_newmodelproduct" name="inpnewmodelproduct" type="text" class="form-control" is="dmx-autocomplete" dmx-bind:data="api_products.data" optiontext="name" optionvalue="id" optionsearch="name">&nbsp;&nbsp;

                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col" style="display: flex; width: 100%;">
                                            <label>Make:</label>
                                            <input id="inp_newmodelmake" name="inpnewmodelmake" type="text" class="form-control" is="dmx-autocomplete" dmx-bind:data="api_makes.data" optiontext="name" optionvalue="id" optionsearch="name">&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="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>
                </div>
                <div class="modal bg-secondary" id="mod_newengine" is="dmx-bs5-modal" tabindex="-1">
                    <div class="modal-dialog modal-dialog-centered" role="document">
                        <div class="modal-content">
                            <dmx-api-action id="api_postenginemodel" noload="true" method="post" data-type="json" dmx-data:name="inp_newenginename.value" dmx-data:makeid="inp_newenginemake.value.toNumber()" dmx-data:productid="inp_newengineproduct.value.toNumber()" dmx-data:description="null" dmx-data:createuserid="-1" dmx-data:updateuserid="-1" dmx-on:success="api_models.load({});inp_appengine.setValue(api_postenginemodel.data.id);mod_confirmnewengine.hide();mod_newengine.hide()" dmx-bind:url="pg_apiurl.value.concat('models')" dmx-data:displacement="inp_newenginedisplacement.value"></dmx-api-action>
                            <div class="modal-header">
                                <h5 class="modal-title" id="mod_customer2">New Engine</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                            </div>
                            <div class="modal-body">
                                <div class="modal" id="mod_confirmnewengine" 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_yesengine" class="btn btn-success btn-sm" dmx-on:click="api_postenginemodel.load({})">YES</button>
                                                <button id="btn_cancelengine" class="btn btn-danger btn-sm" dmx-on:click="mod_confirmnewengine.hide()">NO</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="container">
                                    <div class="row">
                                        <div class="col" style="display: flex; width: 100%;">
                                            <label>Displacement:</label>
                                            <input id="inp_newenginename" name="newenginename" type="text" class="form-control">
                                            &nbsp;&nbsp;

                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col" style="display: flex; width: 100%;">
                                            <label>Name:</label>
                                            <input id="inp_newenginedisplacement" name="newenginedisplacement" type="text" class="form-control">
                                            &nbsp;&nbsp;

                                        </div>
                                    </div>
                                    <div class="row visually-hidden">
                                        <div class="col" style="display: flex; width: 100%;">
                                            <label>Product:</label>
                                            <input id="inp_newengineproduct" name="inpnewengineproduct" type="text" class="form-control" is="dmx-autocomplete" dmx-bind:data="api_products.data" optiontext="name" optionvalue="id" optionsearch="name">&nbsp;&nbsp;

                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col" style="display: flex; width: 100%;">
                                            <label>Make:</label>
                                            <input id="inp_newenginemake" name="inpnewenginemake" type="text" class="form-control" is="dmx-autocomplete" dmx-bind:data="api_makes.data" optiontext="name" optionvalue="id" optionsearch="name">&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="run({condition:{if:`api_models.data.where(\`name\`, inp_newenginename.value, \'==\')`,then:{steps:{run:{action:`mod_confirmnewengine.show()`,outputType:'text'}}},else:{steps:{run:{action:`api_postenginemodel.load({})`,outputType:'text'}}},outputType:'boolean'}})">Save changes</button>
                            </div>
                        </div>
                    </div>
                </div>
                <input id="txt_appid" name="appid" type="hidden" 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 style="padding: 10px;">Model:</label>
                        <input id="inp_appmodel" name="inpappmodel" type="text" class="form-control" is="dmx-autocomplete" dmx-bind:data="conn_basedata.data.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="conn_basedata.data.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 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; 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 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 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 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>
            <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({});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>
</div>


<header>
    <h1 class="mt-3 ms-4 text-center">Kit DSpec</h1>


</header>
<div class="container bg-secondary-subtle">
    <h1 class="text-center">Part Info</h1>
    <div class="row">
        <div class="col">
            <div class="form-group mb-3">
                <label for="inp_createdby" class="form-label">Created By</label>
                <input type="text" class="form-control" id="inp_createdby" name="createby" aria-describedby="input1_help" placeholder="Enter some text" readonly="true" dmx-bind:value="conn_dspecinfo.data.creator.firstname+' '+conn_dspecinfo.data.creator.lastname">
            </div>
        </div>
        <div class="col">
            <div class="form-check">
                <input class="form-check-input" type="checkbox" value="" id="inp_approved" name="approved">
                <label class="form-check-label" for="inp_approved">Approved By</label>
            </div>
            <div class="form-check">
                <input class="form-check-input" type="checkbox" value="" id="inp_approved1" name="approved1">
                <label class="form-check-label" for="inp_approved1">FAQ By</label>
            </div>
        </div>
    </div>
    <div class="row w-100 pt-0 pb-0 ps-0 pe-0">
        <div class="col w-100 ms-1 pt-0 pb-0 pe-0">
            <div class="form-group mb-3 row">

                <label for="pt_obsolete" class="col-sm-2 col-form-label" style="width: fit-content;">Part #:</label>
                <div class="ms-2 col-sm-3">
                    <input type="text" class="form-control" id="pt_pn" name="ptpn" aria-describedby="pn_help" placeholder="Part#" style="width: fit-content;" dmx-bind:value="conn_dspecinfo.data.part.data.number">
                </div>
                <label for="rev" class="col-sm-2 col-form-label" style="width: fit-content;">Rev:</label>
                <div class="ms-2 col-sm-6" style="display:inline-block;">
                    <input type="text" class="form-control" id="pt_rev" name="ptrev" aria-describedby="input1_help" style="width: fit-content; display:inline-block;" dmx-bind:value="conn_dspecinfo.data.dspec.data.rev">
                    <button id="btn_newrev" class="btn btn-secondary btn-sm" style="display:inline-block;" dmx-on:click="conn_revup.load({id: conn_dspecinfo.data.dspec.data.id, userid: whoami.data.identity},true)" dmx-show="conn_dspecinfo.data.dspec.data.id">
                        New Rev</button>
                </div>
            </div>
        </div>
    </div>
    <div class="row w-100 pt-0 pb-0 ps-0 pe-0">
        <div class="col w-100 ms-1 pt-0 pb-0 pe-0 align-self-center">
            <div class="form-group mb-3 row">

                <label for="pt_obsolete" class="col-sm-2 col-form-label" style="width: fit-content;">Part Code:</label>
                <div class="ms-2 col-sm-3 align-self-center">
                    <input type="text" class="form-control" id="pt_partcode" name="ptpartcode" aria-describedby="pn_help" placeholder="Part#" style="width: fit-content;" is="dmx-autocomplete" dmx-bind:data="conn_basedata.data.partcodes.data" optiontext="name" optionvalue="id" optionsearch="name" dmx-bind:value="conn_dspecinfo.data.part.data.partcode.id">
                </div>
                <div class="ms-2 col-sm-2 align-self-center">
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" value="" id="pt_obsolete" name="ptobsolete" dmx-bind:checked="(conn_dspecinfo.data.part.data.status.id == 2)">
                        <label class="form-check-label" for="pt_obsolete" style="width: fit-content;">Obsolete</label>
                    </div>
                </div>
                <label for="pt_replacedby" class="col-sm-2 col-form-label" style="width: fit-content;">Replaced By:</label>
                <div class="ms-2 col-sm-2 align-self-center">
                    <div class="form-check">
                        <input type="text" class="form-control" id="pt_replacedby" name="ptreplacedby" aria-describedby="ptreplacedby_help" placeholder="Replaced By" style="width: fit-content;" dmx-bind:value="conn_dspecinfo.data.part.data.replacedby.number">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col">
            <label for="pt_description" class="col-sm-2 col-form-label" style="width: fit-content;">Description</label>
            <textarea id="pt_description" class="form-control" name="ptdescription" dmx-bind:value="conn_dspecinfo.data.part.data.description"></textarea>

        </div>
    </div>
    <div class="row mb-3 pb-2">
        <div class="col">
            <label for="pt_comment" class="col-sm-2 col-form-label" style="width: fit-content;">Comments</label>
            <textarea id="pt_comment" class="form-control" name="ptcomment" dmx-bind:value="conn_dspecinfo.data.part.data.comments"></textarea>

        </div>
    </div>
</div>
<div class="container bg-secondary-subtle">
    <h1 class="text-center">Design Spec</h1>
    <div class="row w-100 pt-0 pb-0 ps-0 pe-0">
        <div class="col w-100 ms-1 pt-0 pb-0 pe-0">
            <div class="form-group mb-3 row" style="float:left;">

                <label for="pt_obsolete1" class="col-sm-2 col-form-label" style="width: fit-content; float: left;">Effective Date:</label>
                <div class="ms-2 col-sm-2">
                    <input type="text" class="form-control" id="ds_effectivedate" name="dseffectivedate" aria-describedby="pn_help" style="width: 150px; float: left;" is="dmx-date-picker" placeholder="mm/dd/yyyy" dmx-bind:value="conn_dspecinfo.data.api.data.effectivedate.toDate()">
                </div>
                <label for="ds_workinstruction" class="col-sm-2 col-form-label" style="width: fit-content; float: left;">Work Instruction:</label>
                <div class="ms-2 col-sm-2" style="display:inline-block;">
                    <input type="text" class="form-control" id="ds_workinstruction" name="dsworkinstruction" aria-describedby="input1_help" style="width: 150px; display:inline-block; float: left;" dmx-bind:value="conn_dspecinfo.data.api.data.workinstruction">
                </div>
                <label for="ds_application" class="col-sm-2 col-form-label" style="width: fit-content; float: left;">Application:</label>
                <div class="ms-2 col-sm-2" style="display:inline-block;">
                    <input type="text" class="form-control" id="ds_application" name="dsapplication" style="width: fit-content; display:inline-block; float: left;" dmx-bind:value="conn_dspecinfo.data.api.data.application">
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col">
            <label for="ds_reasonforchange" class="col-sm-2 col-form-label" style="width: fit-content;">Reason for change</label>
            <textarea id="ds_reasonforchange" class="form-control" name="dsreasonforchange" dmx-bind:value="conn_dspecinfo.data.api.data.reasonforchange"></textarea>

        </div>
    </div>
    <div class="row mb-3 pb-2">
        <div class="col">
            <label for="ds_validation" class="col-sm-2 col-form-label" style="width: fit-content;">Validation</label>
            <textarea id="ds_validation" class="form-control" name="dsvalidation" dmx-bind:value="conn_dspecinfo.data.api.data.validation"></textarea>

        </div>
    </div>
    <div class="row mb-3 pb-2">
        <div class="col">
            <label for="ds_notes" class="col-sm-2 col-form-label" style="width: fit-content;">Notes</label>
            <textarea id="ds_notes" class="form-control" name="dsnotes" dmx-bind:value="conn_dspecinfo.data.api.data.note"></textarea>

        </div>
    </div>
    <div class="row pb-2">
        <div class="col align-self-center text-end">
            <button id="btn_savedspec" class="btn btn-success" dmx-on:click="api_postdspec.load({})">
                Save DSPEC</button>
        </div>
    </div>
</div>
<div class="container bg-secondary-subtle">
    <h1 class="text-center">BOMS</h1>
    <div class="row">
        <div class="col">
            <button id="btn_copybom" class="btn btn-secondary shadow-lg mb-3" dmx-on:click="mdl_cpybom.show()">
                <i class="fas fa-copy" dmx-on:click="mdl_cpybom.show()"></i></button>
        </div>
    </div>
    <div class="row">
        <div class="col">
            <ul class="nav nav-tabs mb-2" id="navTabs1_tabs" role="tablist">
                <li class="nav-item">
                    <a class="nav-link active me-2 tab text-white bg-primary" id="navTabs1_1_tab" data-bs-toggle="tab" href="#" data-bs-target="#navTabs1_1" role="tab" aria-controls="navTabs1_1" aria-selected="true" dmx-on:click="var_viewlocationid.setValue(14)">Motor</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link bg-primary text-white me-2" id="navTabs1_2_tab" data-bs-toggle="tab" href="#" data-bs-target="#navTabs1_2" role="tab" aria-controls="navTabs1_2" aria-selected="false" dmx-on:click="var_viewlocationid.setValue(19)">Electrical</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link text-white bg-primary me-2" id="navTabs1_3_tab" data-bs-toggle="tab" href="#" data-bs-target="#navTabs1_3" role="tab" aria-controls="navTabs1_3" aria-selected="false" dmx-on:click="var_viewlocationid.setValue(17)">Plumbing</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link bg-primary text-white me-2" id="navTabs1_4_tab" data-bs-toggle="tab" href="#" data-bs-target="#navTabs1_4" role="tab" aria-controls="navTabs1_4" aria-selected="false" dmx-on:click="var_viewlocationid.setValue(11)">Instructions</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link text-white bg-primary me-2" id="navTabs1_5_tab" data-bs-toggle="tab" href="#" data-bs-target="#navTabs1_5" role="tab" aria-controls="navTabs1_5" aria-selected="false">Applications</a>
                </li>
            </ul>
            <div class="tab-content" id="navTabs1_content">
                <div class="tab-pane fade show active" id="navTabs1_1" role="tabpanel" dmx-on:blur="bom_partid.setValue('');bom_searchpart.setValue('');bom_partdescription.setValue('');bom_partold.setValue('');bom_partnew.setValue('');var_ptsearch.setValue('')">
                    <div class="table-responsive">
                        <table class="table table-striped table-bordered table-hover table-sm">
                            <thead>
                                <tr>
                                    <th class="visually-hidden">Id</th>
                                    <th class="visually-hidden">Partnumberid</th>
                                    <th>Part #</th>
                                    <th>Description</th>
                                    <th>Old</th>
                                    <th>New</th>
                                    <th>Action</th>
                                </tr>
                                <tr>
                                    <th scope="row" class="visually-hidden">

                                    </th>
                                    <th scope="row" class="visually-hidden"><input id="bom_partid" name="bompartid" type="text" class="form-control" dmx-bind:value="conn_search.data.api.data.id"></th>
                                    <th scope="row"><input id="bom_searchpart" name="bom_searchpart" type="text" class="form-control" dmx-on:blur="var_ptsearch.setValue(value)"></th>
                                    <th scope="row">
                                        <input id="bom_partdescription" name="bompartdescription" type="text" class="form-control" dmx-bind:value="conn_search.data.api.data.description">
                                    </th>
                                    <th scope="row">
                                        <input id="bom_partold" name="bompartold" type="text" class="form-control">
                                    </th>
                                    <th scope="row">
                                        <input id="bom_partnew" name="bompartnew" type="text" class="form-control">
                                    </th>
                                    <th scope="row">
                                        <button id="btn_newbomitem" class="btn btn-dark" dmx-on:click="var_viewlocationid.setValue(14);var_bominsertold.setValue(bom_partold.value);var_bominsertnew.setValue(bom_partnew.value);var_bominsertpnid.setValue(bom_partid.value);api_bominsertitem.load({})">
                                            +</button>
                                    </th>
                                </tr>
                            </thead>
                            <tbody is="dmx-repeat" dmx-generator="bs5table" dmx-bind:repeat="conn_dspecinfo.data.boms.data.where(`tab`, 61, '==')" id="tablemotor">
                                <tr>
                                    <td dmx-text="id" class="visually-hidden"></td>
                                    <td dmx-text="partnumberid" class="visually-hidden"></td>
                                    <td dmx-text="partnumber"></td>
                                    <td dmx-text="description"></td>
                                    <td dmx-text="old"></td>
                                    <td dmx-text="new"></td>
                                    <td>
                                        <button id="btn_deleteitem" class="btn btn-danger shadow" dmx-on:click="var_partidtodelete.setValue(id)">
                                            <i class="fas fa-trash-alt"></i>
                                        </button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="tab-pane fade" id="navTabs1_2" role="tabpanel" dmx-on:blur="bom_elecpartid.setValue('');bom_searchelecpart.setValue('');bom_partelecdescription.setValue('');bom_partelecnew.setValue('');bom_partelecold.setValue('');var_ptsearch.setValue('')">
                    <div class="table-responsive">
                        <table class="table table-striped table-bordered table-hover table-sm">
                            <thead>
                                <tr>
                                    <th class="visually-hidden">Id</th>
                                    <th class="visually-hidden">Partnumberid</th>
                                    <th>Part #</th>
                                    <th>Description</th>
                                    <th>Old</th>
                                    <th>New</th>
                                    <th>Action</th>
                                </tr>
                                <tr>
                                    <th scope="row" class="visually-hidden">

                                    </th>
                                    <th scope="row" class="visually-hidden"><input id="bom_elecpartid" name="bomelecpartid" type="text" class="form-control" dmx-bind:value="conn_search.data.api.data.id"></th>
                                    <th scope="row"><input id="bom_searchelecpart" name="bom_searchpart" type="text" class="form-control" dmx-on:blur="var_ptsearch.setValue(value)"></th>
                                    <th scope="row">
                                        <input id="bom_partelecdescription" name="bompartelecdescription" type="text" class="form-control" dmx-bind:value="conn_search.data.api.data.description">
                                    </th>
                                    <th scope="row">
                                        <input id="bom_partelecold" name="bompartelecold" type="text" class="form-control">
                                    </th>
                                    <th scope="row">
                                        <input id="bom_partelecnew" name="bompartelecnew" type="text" class="form-control">
                                    </th>
                                    <th scope="row">
                                        <button id="btn_newbomelecitem" class="btn btn-dark" dmx-on:click="var_viewlocationid.setValue(19);var_bominsertold.setValue(bom_partelecold.value);var_bominsertnew.setValue(bom_partelecnew.value);var_bominsertpnid.setValue(bom_elecpartid.value);api_bominsertitem.load({})">Add</button>
                                    </th>
                                </tr>
                            </thead>
                            <tbody is="dmx-repeat" dmx-generator="bs5table" dmx-bind:repeat="conn_dspecinfo.data.boms.data.where(`tab`, 63, '==')" id="tableelectric">
                                <tr>
                                    <td dmx-text="id" class="visually-hidden"></td>
                                    <td dmx-text="partnumberid" class="visually-hidden"></td>
                                    <td dmx-text="partnumber"></td>
                                    <td dmx-text="description"></td>
                                    <td dmx-text="old"></td>
                                    <td dmx-text="new"></td>
                                    <td>
                                        <button id="btn_deleteelecitem" class="btn btn-danger" dmx-on:click="var_partidtodelete.setValue(id)"><i class="fas fa-trash-alt"></i></button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="tab-pane fade" id="navTabs1_3" role="tabpanel" dmx-on:blur="bom_partplumbid.setValue('');bom_searchplumbpart.setValue('');bom_partplumbdescription.setValue('');bom_partplumbold.setValue('');bom_partplumbnew.setValue('');var_ptsearch.setValue('')">
                    <div class="table-responsive">
                        <table class="table table-striped table-bordered table-hover table-sm">
                            <thead>
                                <tr>
                                    <th class="visually-hidden">Id</th>
                                    <th class="visually-hidden">Partnumberid</th>
                                    <th>Part #</th>
                                    <th>Description</th>
                                    <th>Old</th>
                                    <th>New</th>
                                    <th>Action</th>
                                </tr>
                                <tr>
                                    <th scope="row" class="visually-hidden">

                                    </th>
                                    <th scope="row" class="visually-hidden"><input id="bom_partplumbid" name="bompartplumbid" type="text" class="form-control" dmx-bind:value="conn_search.data.api.data.id"></th>
                                    <th scope="row"><input id="bom_searchplumbpart" name="bom_searchplumbpart" type="text" class="form-control" dmx-on:blur="var_ptsearch.setValue(value)"></th>
                                    <th scope="row">
                                        <input id="bom_partplumbdescription" name="bompartplumbdescription" type="text" class="form-control" dmx-bind:value="conn_search.data.api.data.description">
                                    </th>
                                    <th scope="row">
                                        <input id="bom_partplumbold" name="bompartplumbold" type="text" class="form-control">
                                    </th>
                                    <th scope="row">
                                        <input id="bom_partplumbnew" name="bompartplumbnew" type="text" class="form-control">
                                    </th>
                                    <th scope="row">
                                        <button id="btn_newbomplumbitem" class="btn btn-dark" dmx-on:click="var_viewlocationid.setValue(17);var_bominsertold.setValue(bom_partplumbold.value);var_bominsertnew.setValue(bom_partplumbnew.value);var_bominsertpnid.setValue(bom_partplumbid.value);api_bominsertitem.load({})">Add</button>
                                    </th>
                                </tr>
                            </thead>
                            <tbody is="dmx-repeat" dmx-generator="bs5table" dmx-bind:repeat="conn_dspecinfo.data.boms.data.where(`tab`, 62, '==')" id="tableplumb">
                                <tr>
                                    <td dmx-text="id" class="visually-hidden"></td>
                                    <td dmx-text="partnumberid" class="visually-hidden"></td>
                                    <td dmx-text="partnumber"></td>
                                    <td dmx-text="description"></td>
                                    <td dmx-text="old"></td>
                                    <td dmx-text="new"></td>
                                    <td>
                                        <button id="btn_deleteplumbitem" class="btn btn-danger" dmx-on:click="var_partidtodelete.setValue(id)"><i class="fas fa-trash-alt"></i></button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="tab-pane fade" id="navTabs1_4" role="tabpanel" dmx-on:blur="bom_partinsid.setValue('');bom_searchinspart.setValue('');bom_partinsdescription.setValue('');bom_partinsold.setValue('');bom_partinsnew.setValue('');var_ptsearch.setValue('')">
                    <div class="table-responsive">
                        <table class="table table-striped table-bordered table-hover table-sm">
                            <thead>
                                <tr>
                                    <th class="visually-hidden">Id</th>
                                    <th class="visually-hidden">Partnumberid</th>
                                    <th>Part #</th>
                                    <th>Description</th>
                                    <th>Old</th>
                                    <th>New</th>
                                    <th>Action</th>
                                </tr>
                                <tr>
                                    <th scope="row" class="visually-hidden">

                                    </th>
                                    <th scope="row" class="visually-hidden"><input id="bom_partinsid" name="bompartinsid" type="text" class="form-control" dmx-bind:value="conn_search.data.api.data.id"></th>
                                    <th scope="row"><input id="bom_searchinspart" name="bom_searchinspart" type="text" class="form-control" dmx-on:blur="var_ptsearch.setValue(value)"></th>
                                    <th scope="row">
                                        <input id="bom_partinsdescription" name="bompartinsdescription" type="text" class="form-control" dmx-bind:value="conn_search.data.api.data.description">
                                    </th>
                                    <th scope="row">
                                        <input id="bom_partinsold" name="bompartinsold" type="text" class="form-control">
                                    </th>
                                    <th scope="row">
                                        <input id="bom_partinsnew" name="bompartinsnew" type="text" class="form-control">
                                    </th>
                                    <th scope="row">
                                        <button id="btn_newbominsitem" class="btn btn-dark" dmx-on:click="var_viewlocationid.setValue(11);var_bominsertold.setValue(bom_partinsold.value);var_bominsertnew.setValue(bom_partinsnew.value);var_bominsertpnid.setValue(bom_partinsid.value);api_bominsertitem.load({})">Add</button>
                                    </th>
                                </tr>
                            </thead>
                            <tbody is="dmx-repeat" dmx-generator="bs5table" dmx-bind:repeat="conn_dspecinfo.data.boms.data.where(`tab`, 64, '==')" id="tableins">
                                <tr>
                                    <td dmx-text="id" class="visually-hidden"></td>
                                    <td dmx-text="partnumberid" class="visually-hidden"></td>
                                    <td dmx-text="partnumber"></td>
                                    <td dmx-text="description"></td>
                                    <td dmx-text="old"></td>
                                    <td dmx-text="new"></td>
                                    <td>
                                        <button id="btn_deleteinsitem" class="btn btn-danger" dmx-on:click="var_partidtodelete.setValue(id)"><i class="fas fa-trash-alt"></i></button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </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>
                                <tr>
                                    <th scope="row">Action</th>
                                    <th>Serialprefix</th>
                                    <th>Startingserial</th>
                                    <th>Endingserial</th>
                                    <th>Type</th>


                                    <th>Model</th>
                                    <th>Product</th>
                                    <th>Description</th>
                                </tr>
                            </thead>
                            <tbody is="dmx-repeat" dmx-generator="bs5table" dmx-bind:repeat="conn_dspecinfo.data.apps.data" id="tableRepeat5">
                                <tr>
                                    <td style="display: inline-block;">
                                        <button id="btn_viewapp" class="btn btn-primary btn-sm" dmx-bind:value="id" dmx-on:click="mdl_app.var_appid.setValue(id);mdl_app.show()">
                                            <i class="fas fa-edit"></i>
                                        </button>
                                        <button id="btn_deleteapp" class="btn btn-danger btn-sm" dmx-bind:value="id" dmx-on:click="var_deleteapp.setValue(value)">
                                            <i class="fas fa-trash-alt"></i>
                                        </button>
                                    </td>
                                    <td dmx-text="serialprefix"></td>
                                    <td dmx-text="startingserial"></td>
                                    <td dmx-text="endingserial"></td>
                                    <td dmx-text="type"></td>


                                    <td dmx-text="model.name"></td>
                                    <td dmx-text="model.product.name"></td>
                                    <td dmx-text="description"></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<meta name="ac:route" content="/dspec">