UI Improvement

DataStore to SQLlite

app/api/DSremove.json

@@ -0,0 +1,3 @@
+{
+  "exec": {}
+}

public/dmxAppConnect/config.js

@@ -21,6 +21,24 @@ dmx.config({
         "type": "text",
         "name": "da_driverLicenseState"
       }
+    ],
+    "dataID": {
+      "outputType": "text"
+    },
+    "DSflow1": {
+      "meta": {},
+      "local": [
+        {
+          "name": "DSConfirm",
+          "type": "boolean",
+          "metaData": {
+            "confirmMessage": {
+              "meta": null,
+              "outputType": "text"
+            }
+          }
+        }
       ]
     }
+  }
 });

public/dmxAppConnect/dmxBootstrap5TableGenerator/dmxBootstrap5TableGenerator.css

@@ -0,0 +1,78 @@
+    table.table thead>tr>th.sorting_asc,
+    table.table thead>tr>th.sorting_desc,
+    table.table thead>tr>th.sorting,
+    table.table thead>tr>td.sorting_asc,
+    table.table thead>tr>td.sorting_desc,
+    table.table thead>tr>td.sorting {
+      padding-right: 30px
+    }
+
+    table.table thead>tr>th:active,
+    table.table thead>tr>td:active {
+        outline: none
+    }
+
+    table.table thead .sorting,
+    table.table thead .sorting_asc,
+    table.table thead .sorting_desc,
+    table.table thead .sorting_asc_disabled,
+    table.table thead .sorting_desc_disabled {
+        cursor: pointer;
+        position: relative
+    }
+
+    table.table thead .sorting:before,
+    table.table thead .sorting:after,
+    table.table thead .sorting_asc:before,
+    table.table thead .sorting_asc:after,
+    table.table thead .sorting_desc:before,
+    table.table thead .sorting_desc:after,
+    table.table thead .sorting_asc_disabled:before,
+    table.table thead .sorting_asc_disabled:after,
+    table.table thead .sorting_desc_disabled:before,
+    table.table thead .sorting_desc_disabled:after {
+        position: absolute;
+        bottom: 0.9em;
+        display: block;
+        opacity: 0.3
+    }
+	table.table-sm thead .sorting:before,
+    table.table-sm thead .sorting:after,
+    table.table-sm thead .sorting_asc:before,
+    table.table-sm thead .sorting_asc:after,
+    table.table-sm thead .sorting_desc:before,
+    table.table-sm thead .sorting_desc:after,
+    table.table-sm thead .sorting_asc_disabled:before,
+    table.table-sm thead .sorting_asc_disabled:after,
+    table.table-sm thead .sorting_desc_disabled:before,
+    table.table-sm thead .sorting_desc_disabled:after {
+        bottom: 0.3em;
+    }
+
+    table.table thead .sorting:before,
+    table.table thead .sorting_asc:before,
+    table.table thead .sorting_desc:before,
+    table.table thead .sorting_asc_disabled:before,
+    table.table thead .sorting_desc_disabled:before {
+        right: 1em;
+        content: "\2191"
+    }
+
+    table.table thead .sorting:after,
+    table.table thead .sorting_asc:after,
+    table.table thead .sorting_desc:after,
+    table.table thead .sorting_asc_disabled:after,
+    table.table thead .sorting_desc_disabled:after {
+        right: 0.5em;
+        content: "\2193"
+    }
+
+    table.table thead .sorting_asc:before,
+    table.table thead .sorting_desc:after {
+        opacity: 1
+    }
+
+    table.table thead .sorting_asc_disabled:before,
+    table.table thead .sorting_desc_disabled:after {
+        opacity: 0
+    }

public/dmxAppConnect/dmxBootstrap5Toasts/dmxBootstrap5Toasts.js

@@ -0,0 +1,8 @@
+/*!
+ App Connect Bootstrap 5 Toasts
+ Version: 2.0.6
+ (c) 2024 Wappler.io
+ @build 2024-07-09 16:56:29
+ */
+dmx.bs5toast={defaults:{iconType:"image",position:"top",align:"right",offsetX:15,offsetY:15,minWidth:240,maxWidth:350,animation:!0,autohide:!0,closable:!0,delay:5e3,headerClass:"",bodyClass:"",color:""},container:null,setup(t){t=Object.assign(dmx.bs5toast.defaults,t),dmx.bs5toast.container||(dmx.bs5toast.container=document.createElement("div"),document.body.appendChild(dmx.bs5toast.container));const e=dmx.bs5toast.container;e.className="toast-container",e.removeAttribute("style"),e.style.setProperty("position","fixed"),e.style.setProperty(t.align,t.offsetX+"px"),e.style.setProperty(t.position,t.offsetY+"px"),t.maxWidth&&e.style.setProperty("max-width",t.maxWidth+"px")},clear(){dmx.bs5toast.container&&(dmx.bs5toast.container.textContent="")},show(t){t=Object.assign({},dmx.bs5toast.defaults,t),dmx.bs5toast.container||dmx.bs5toast.setup();const e=dmx.bs5toast.create(t);dmx.bs5toast.container.appendChild(e);const s=new bootstrap.Toast(e,t);e.addEventListener("hidden.bs.toast",(()=>dmx.bs5toast.container.removeChild(e)),{once:!0}),s.show()},showSimple(t){t=Object.assign({},dmx.bs5toast.defaults,t),dmx.bs5toast.container||dmx.bs5toast.setup();const e=dmx.bs5toast.createSimple(t);dmx.bs5toast.container.appendChild(e);const s=new bootstrap.Toast(e,t);e.addEventListener("hidden.bs.toast",(()=>dmx.bs5toast.container.removeChild(e)),{once:!0}),s.show()},create(t){const e=document.createElement("div");if(e.className="toast",e.setAttribute("role","alert"),e.setAttribute("aria-live","assertive"),e.setAttribute("aria-atomic","true"),e.setAttribute("data-delay",t.delay),t.minWidth&&e.style.setProperty("min-width",t.minWidth+"px"),t.icon||t.title||t.subtitle||t.closable){const s=document.createElement("div");if(s.className="toast-header",t.headerClass&&(s.className+=" "+t.headerClass),t.icon){(t=>/\.(gif|jpe?g|tiff?|png|webp|bmp)$/i.test(t))(t.icon)?s.innerHTML=`<img src="${t.icon}" height="20" class="rounded me-2" alt="${t.alt||""}">`:s.innerHTML=`<i class="${t.icon} me-2"></i>`}if(t.title||t.subtitle||t.closable){const e=document.createElement("strong");e.className="me-auto",e.textContent=t.title||"",s.appendChild(e)}if(t.subtitle){const e=document.createElement("small");e.textContent=t.subtitle,s.appendChild(e)}if(t.closable){const t=document.createElement("button");t.type="button",t.className="btn-close",t.setAttribute("data-bs-dismiss","toast"),t.setAttribute("aria-label","Close"),s.appendChild(t)}e.appendChild(s)}if(t.message){const s=document.createElement("div");s.className="toast-body",t.bodyClass&&(s.className+=" "+t.bodyClass),t.useHTML?s.innerHTML=t.message:s.textContent=t.message,e.appendChild(s)}return e},createSimple(t){const e=document.createElement("div");e.className="toast align-items-center",e.setAttribute("role","alert"),e.setAttribute("aria-live","assertive"),e.setAttribute("aria-atomic","true"),e.setAttribute("data-delay",t.delay),t.minWidth&&e.style.setProperty("min-width",t.minWidth+"px"),t.type&&e.classList.add("border-0",`bg-${t.type}-subtle`,`text-${t.type}-emphasis`);const s=document.createElement("div");s.className="d-flex";const a=document.createElement("div");if(a.className="toast-body "+t.bodyClass,t.useHTML?a.innerHTML=t.message:a.textContent=t.message,s.appendChild(a),t.closable){const t=document.createElement("button");t.type="button",t.className="btn-close me-2 m-auto",t.setAttribute("data-bs-dismiss","toast"),t.setAttribute("aria-label","Close"),s.appendChild(t)}return e.appendChild(s),e}},dmx.Actions({"toast.setup"(t){dmx.bs5toast.setup(this.parse(t))},"toast.show"(t){dmx.bs5toast.show(this.parse(t))},"toast.showSimple"(t){dmx.bs5toast.showSimple(this.parse(t))},"toast.clear"(){dmx.bs5toast.clear()}}),dmx.Component("bs5-toasts",{attributes:{position:{type:String,default:"top",enum:["top","bottom"]},align:{type:String,default:"right",enum:["left","right"]},offsetX:{type:Number,default:15},offsetY:{type:Number,default:15},minWidth:{type:Number,default:240},maxWidth:{type:Number,default:350},zIndex:{type:Number,default:1e4},delay:{type:Number,default:5e3}},methods:{clear(){this._clear()},show(t){this._show(t)},showSimple(t){this._showSimple(t)}},init(t){dmx.bs5toast.setup(this.props)},performUpdate(t){dmx.bs5toast.setup(this.props)},_clear(){dmx.bs5toast.clear()},_show(t){dmx.bs5toast.show(t)},_showSimple(t){dmx.bs5toast.showSimple(t)}});
+//# sourceMappingURL=dmxBootstrap5Toasts.js.map

views/index.ejs

@@ -1,10 +1,24 @@
-<!-- Wappler include head-page="layouts/main" fontawesome_5="cdn" bootstrap5="local" is="dmx-app" id="index" appConnect="local" components="{dmxBootstrap5Navigation:{},dmxAnimateCSS:{},dmxStateManagement:{},dmxDatastore:{},dmxBootstrap5Modal:{}}" -->
+<!-- Wappler include head-page="layouts/main" fontawesome_5="cdn" bootstrap5="local" is="dmx-app" id="index" appConnect="local" components="{dmxBootstrap5Navigation:{},dmxAnimateCSS:{},dmxStateManagement:{},dmxDatastore:{},dmxBootstrap5Modal:{},dmxFormatter:{},dmxBootstrap5TableGenerator:{},dmxBootstrap5Toasts:{}}" -->
+<script is="dmx-flow" id="DSflow1" type="text/dmx-flow">{
+  confirm: {
+    name: "DSConfirm",
+    outputType: "boolean",
+    message: "{{datastore1.data[0].da_fullName}}",
+    then: {
+      steps: {
+        toast.showSimple: {message: "This will remove record"}
+      }
+    }
+  }
+}</script>
+<dmx-value id="dataID"></dmx-value>
 <dmx-json-datasource id="stateJSON" is="dmx-serverconnect" url="/states.json"></dmx-json-datasource>
+<dmx-datastore id="datastore1"></dmx-datastore>
 <div class="modal" id="modal1" is="dmx-bs5-modal" tabindex="-1">
     <div class="modal-dialog" role="document">
         <div class="modal-content">
             <div class="modal-header">
-                <h5 class="modal-title">Modal title</h5>
+                <h5 class="modal-title">Driver Information</h5>
                 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
             </div>
             <div class="modal-body">
@@ -40,16 +54,16 @@
                         </div>
                     </form>
                 </div>
-                <p>Use this for a count or modal footer</p>
+                <p>Today Date&nbsp;</p>
             </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="datastore1.insert()">Save changes</button>
+                <button type="button" class="btn btn-primary" dmx-on:click="datastore1.insert({da_fullName: form1.input1.value, da_driverLicense: form1.input2.value, da_driverLicenseState: form1.input3.selectedValue})">Save changes</button>
             </div>
         </div>
     </div>
 </div>
-<dmx-datastore id="datastore1"></dmx-datastore>
+
 <div class="container">
     <h1 class="text-center">Lets Begin.&nbsp;What is your Role?</h1>
 </div>
@@ -62,6 +76,32 @@
             <button id="btn2" class="btn lh-lg btn-warning">Driver Trainers</button>
         </div>
     </div>
+    <div class="row" dmx-hide="datastore1.data.isEmpty()">
+        <table class="table table-striped table-sm">
+            <thead>
+                <tr>
+                    <th>$id</th>
+                    <th>Da full name</th>
+                    <th>Da driver license</th>
+                    <th dmx-on:click="datastore1.clear()">Da driver license state</th>
+                </tr>
+            </thead>
+            <tbody is="dmx-repeat" dmx-generator="bs5table" dmx-bind:repeat="datastore1.data" id="tableRepeat1">
+                <tr>
+                    <td>
+                        <button id="btn3" class="btn btn-sm btn-warning" dmx-bind:value="$id" dmx-on:click="datastore1.delete({$id: $id})" data-bs-toggle="button">{{$id}}</button>
+
+                    </td>
+                    <td dmx-text="da_fullName"></td>
+                    <td dmx-text="da_driverLicense"></td>
+                    <td dmx-text="da_driverLicenseState"></td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+    <div class="row">
+        <h3 dmx-show="datastore1.data.isEmpty()">No Records</h3>
+    </div>
 </div>
 
 <meta name="ac:route" content="/">

views/layouts/main.ejs

@@ -19,9 +19,12 @@
   <script src="/dmxAppConnect/dmxStateManagement/dmxStateManagement.js" defer></script>
   <script src="/dmxAppConnect/dmxFormatter/dmxFormatter.js" defer></script>
   <script src="/dmxAppConnect/dmxBootstrap5Modal/dmxBootstrap5Modal.js" defer></script>
+  <link rel="stylesheet" href="/dmxAppConnect/dmxBootstrap5TableGenerator/dmxBootstrap5TableGenerator.css" />
+  <script src="/dmxAppConnect/dmxBootstrap5Toasts/dmxBootstrap5Toasts.js" defer></script>
 </head>
 
 <body is="dmx-app" id="main">
+  <dmx-datastore id="datastore1"></dmx-datastore>
   <div class="container">
     <nav class="navbar navbar-expand-lg">
       <div class="navbar-nav w-100">
@@ -29,7 +32,7 @@
           <div class="dropdown-menu" aria-labelledby="dropdown1">
             <a class="dropdown-item" href="#">Action</a>
             <a class="dropdown-item" href="#">Another action</a>
-            <a class="dropdown-item" href="#">Something else here</a>
+            <a class="dropdown-item" href="#" dmx-on:click="">Something else here</a>
           </div>
         </div>
         <a class="nav-item nav-link" href="#">File</a>