<!-- Wappler include head-page="layouts/smain" fontawesome_5="cdn" bootstrap5="local" is="dmx-app" id="dspec" appConnect="local" components="{dmxStateManagement:{},dmxAutocomplete:{},dmxDatePicker:{},dmxBootstrap5Navigation:{},dmxFormatter:{}}" jquery_slim_35="cdn" moment_2="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-serverconnect>
<header>
    <h1 class="mt-3 ms-4">DSpec</h1>


</header>
<div class="w-100 rounded-3 rounded border-secondary border-5 bg-info container-xxl text-start ms-auto me-auto pt-0 pb-0 ps-0 pe-0">
    <h1 class="text-center">Part Info</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">

                <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" placeholder="Rev" style="width: fit-content; display:inline-block;" dmx-bind:value="conn_dspecinfo.data.api.data.revisionlevel">
                    <button id="btn_newrev" class="btn btn-secondary btn-sm" style="display:inline-block;">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="w-100 rounded-3 rounded border-secondary border-5 bg-warning-subtle container-xxl ms-auto me-auto pt-0 pb-0 ps-0 pe-0">
    <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">Save DSPEC</button>
        </div>
    </div>
</div>
<div class="container-xxl bg-success-subtle mt-3 mb-4 ms-auto me-auto pb-3 ps-0 pe-0">
    <h1 class="text-center">BOMS</h1>
    <div class="row">
        <div class="col">
            <button id="btn_copybom" class="btn btn-secondary shadow-lg">Copy BOM</button>
        </div>
    </div>
    <div class="row">
        <div class="col">
            <ul class="nav nav-tabs" id="navTabs1_tabs" role="tablist">
                <li class="nav-item">
                    <a class="nav-link active bg-primary text-white" 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" 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" 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" 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" id="navTabs1_5_tab" data-bs-toggle="tab" href="#" data-bs-target="#navTabs1_5" role="tab" aria-controls="navTabs1_5" aria-selected="false" dmx-on:click="var_viewlocationid.setValue(21)">Applications</a>
                </li>
            </ul>
            <div class="tab-content" id="navTabs1_content" dmx-on:blur="frm_motor.reset()">
                <div class="tab-pane fade show active" id="navTabs1_1" role="tabpanel">
                    <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"></th>
                                    <th scope="row"><input id="bom_searchpart" name="bom_searchpart" type="text" class="form-control"></th>
                                    <th scope="row">
                                        <input id="bom_partdescription" name="bompartdescription" type="text" class="form-control">
                                    </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">Add</button>
                                    </th>
                                </tr>
                            </thead>
                            <tbody is="dmx-repeat" dmx-generator="bs5table" dmx-bind:repeat="conn_dspecinfo.data.boms.data.where(`tab`, 14, '==')" 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">X</button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="tab-pane fade" id="navTabs1_2" role="tabpanel">
                    <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"></th>
                                    <th scope="row"><input id="bom_searchelecpart" name="bom_searchpart" type="text" class="form-control"></th>
                                    <th scope="row">
                                        <input id="bom_partelecdescription" name="bompartelecdescription" type="text" class="form-control">
                                    </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">Add</button>
                                    </th>
                                </tr>
                            </thead>
                            <tbody is="dmx-repeat" dmx-generator="bs5table" dmx-bind:repeat="conn_dspecinfo.data.boms.data.where(`tab`, 19, '==')" 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">X</button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="tab-pane fade" id="navTabs1_3" role="tabpanel">
                    <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"></th>
                                    <th scope="row"><input id="bom_searchplumbpart" name="bom_searchplumbpart" type="text" class="form-control"></th>
                                    <th scope="row">
                                        <input id="bom_partplumbdescription" name="bompartplumbdescription" type="text" class="form-control">
                                    </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">Add</button>
                                    </th>
                                </tr>
                            </thead>
                            <tbody is="dmx-repeat" dmx-generator="bs5table" dmx-bind:repeat="conn_dspecinfo.data.boms.data.where(`tab`, 17, '==')" 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">X</button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="tab-pane fade" id="navTabs1_4" role="tabpanel">
                    <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"></th>
                                    <th scope="row"><input id="bom_searchinspart" name="bom_searchinspart" type="text" class="form-control"></th>
                                    <th scope="row">
                                        <input id="bom_partinsdescription" name="bompartinsdescription" type="text" class="form-control">
                                    </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">Add</button>
                                    </th>
                                </tr>
                            </thead>
                            <tbody is="dmx-repeat" dmx-generator="bs5table" dmx-bind:repeat="conn_dspecinfo.data.boms.data.where(`tab`, 11, '==')" 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">X</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>
            </div>
        </div>
    </div>
</div>
<meta name="ac:route" content="/dspecm">