DockerERTFF/views/observationPage.ejs

<!-- Wappler include head-page="layouts/main" fontawesome_5="cdn" bootstrap5="local" is="dmx-app" id="observationPage" appConnect="local" components="{dmxBootstrap5TableGenerator:{},dmxMasonry:{},dmxFormatter:{},dmxBootstrap5Popovers:{},dmxBootstrap5Toasts:{},dmxDataTraversal:{},dmxStateManagement:{},dmxDatastore:{},dmxValidator:{},dmxBootstrap5Offcanvas:{}}" -->
<dmx-serverconnect id="qDB" url="/api/query"></dmx-serverconnect>
<div class="offcanvas offcanvas-start" id="offcanvas1" is="dmx-bs5-offcanvas" tabindex="-1">
    <div class="offcanvas-header">
        <h5 class="offcanvas-title">Offcanvas title</h5>
        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body">
        <div class="container">
            <div class="form-check">
                <input class="form-check-input" type="checkbox" value="" id="CKBinput1" name="canvasCBShowHideSectionDetail">
                <label class="form-check-label" for="CKBinput1">Show Section detail</label>
            </div>
        </div>
        <p>Offcanvas body text goes here.</p>
    </div>
</div>
<dmx-toggle id="toggle1" checked="true"></dmx-toggle>
<dmx-datastore id="datastore1" dmx-on:updated="toasts1.show({message: 'Record Updated  ', title: 'New Insert Added'})" dmx-on:inserted="toasts1.showSimple({message: 'New Record Inserted '})"></dmx-datastore>
<div is="dmx-bs5-toasts" id="toasts1"></div>
<dmx-serverconnect id="scQuerySubSections" url="/api/qSubSection" noload="true" dmx-param:subid="1"></dmx-serverconnect>
<dmx-serverconnect id="serverconnect1" url="/api/qSection"></dmx-serverconnect>
<meta name="ac:route" content="/observationPage">
<dmx-serverconnect id="scQuerySection" url="/api/qSection"></dmx-serverconnect>

<div class="container border-primary border-2 border">
    <div class="row"></div>
    <div class="row">
        <div class="col-3">
            <p class="text-center"><b>Who you are grading</b></p>
            <select id="select1" class="form-select" dmx-bind:options="qDB.data.query" optiontext="db_fullName" optionvalue="db_employeeID">
            </select>
        </div>
        <div class="col">
            <table class="table table-striped table-sm">
                <thead>
                    <tr>
                        <th>DA Name</th>
                        <th>License No.</th>
                        <th>Issue State</th>
                        <th>DA Empl. ID</th>
                        <th>Driver Trainer</th>
                    </tr>
                </thead>
                <tbody is="dmx-repeat" dmx-generator="bs5table" dmx-bind:repeat="data_view1.data" id="tableRepeat4">
                    <tr>
                        <td dmx-text="db_fullName"></td>
                        <td dmx-text="db_licenseNumber"></td>
                        <td dmx-text="db_stateIssue"></td>
                        <td dmx-text="db_employeeID"></td>
                        <td dmx-text="owner"></td>
                    </tr>
                </tbody>
            </table>
            <dmx-data-view id="data_view1" dmx-bind:data="qDB.data.query" filter="db_employeeID==select1.value"></dmx-data-view>
        </div>
    </div>
    <div class="row">
        <div class="col">
            <button id="btn2" class="btn btn-primary">Print</button>
        </div>
        <div class="col"></div>
        <div class="col"></div>
    </div>
</div>
<div class="container border border-5 rounded border-warning-subtle" id="btnMenu">
    <div class="row" is="dmx-masonry" id="repeat1" dmx-bind:repeat="scQuerySection.data.query">
        <div class="col">
            <form id="form1" action="/api/qSection" method="post">
                <input id="text1" name="text1" type="hidden" class="form-control" dmx-bind:value="numSection">
                <button id="btn1" class="btn btn-primary" dmx-text="txtSection.substring(0,25)" data-bs-toggle="button" dmx-bind:value="numSection" dmx-on:click="toasts1.show({message: value, title: 'Button Value', subtitle: tableRepeat1[0].txtSection});scQuerySubSections.load({subid: value});varSelectedSection.setValue(value)">Button</button>
            </form>

        </div>
    </div>
</div>
<div class="container border-warning border border-5" dmx-show="offcanvas1.CKBinput1.checked">

    <table class="table table-striped table-sm">
        <thead>
            <tr>
                <th>Num section</th>
                <th>Txt section</th>
            </tr>
        </thead>
        <tbody is="dmx-repeat" dmx-generator="bs5table" dmx-bind:repeat="scQuerySection.data.query" id="tableRepeat1">
            <tr>
                <td dmx-text="numSection"></td>
                <td dmx-text="txtSection"></td>
            </tr>
        </tbody>
    </table>
</div>
<div class="container">

    <table class="table">
        <thead>
            <tr>
                <th scope="row">Points</th>
                <th>Is section</th>
                <th>Num section</th>
                <th>Txt section</th>
            </tr>
        </thead>
        <tbody is="dmx-repeat" dmx-generator="bs5table" id="tableRepeat2" dmx-bind:repeat="scQuerySubSections.data.query">
            <tr>
                <td>
                    <input id="pointValue" name="section" type="hidden" class="form-control" dmx-bind:value="numSection">
                    <select id="selPoints" class="form-select" name="sPoints" dmx-on:changed="datastore1.upsert({numSection: pointValue.value, $id: numSection, description: txtSection},{numSection: pointValue.value, Points: value, description: txtSection})" dmx-bind:id="numSection">
                        <option value="0">0 points</option>
                        <option value="1">1 point</option>
                        <option value="2">2 points</option>
                        <option value="10">Did Not Demonstrate</option>
                    </select>
                </td>
                <td dmx-text="isSection"></td>
                <td dmx-text="numSection"></td>
                <td dmx-text="txtSection" dmx-class:bg-warning="txtSection.startsWith('*')"></td>
            </tr>
        </tbody>
    </table>
</div>
<header>
    <h3 id="scoreHeader" dmx-show="!datastore1.data.hasItems()">No Score shown yet.</h3>
</header>
<div class="container" id="DS">
    <table class="table table-striped">
        <thead>
            <tr>
                <th>$id</th>
                <th>Num section</th>
                <th>Points</th>
                <th>Description</th>
            </tr>
        </thead>
        <tbody is="dmx-repeat" dmx-generator="bs5table" dmx-bind:repeat="datastore1.data" id="tableRepeat3">
            <tr>
                <td dmx-text="$id"></td>
                <td dmx-text="numSection"></td>
                <td dmx-text="Points"></td>
                <td dmx-text="description"></td>
            </tr>
        </tbody>
    </table>
</div>