jeff
/
DockerERTFF
mirror of https://github.com/jndaniels/DockerERTFF.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

UI Improvement 

DataStore to SQLlite
This commit is contained in:
jndaniels 2024-10-29 20:52:55 -05:00
parent c64b771cb4
commit 89dbd1d2c6
8 changed files with 158 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
ERTSQlite.db Normal file
View File

Binary file not shown.

3
app/api/DSremove.json Normal file
View File

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

18
public/dmxAppConnect/config.js
View File

@ -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"
}
}
}
]
}
}
});

78
public/dmxAppConnect/dmxBootstrap5TableGenerator/dmxBootstrap5TableGenerator.css Normal file
View File

@ -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
}

8
public/dmxAppConnect/dmxBootstrap5Toasts/dmxBootstrap5Toasts.js Normal file
View File

@ -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

1
public/dmxAppConnect/dmxBootstrap5Toasts/dmxBootstrap5Toasts.js.map Normal file
View File

File diff suppressed because one or more lines are too long

50
views/index.ejs
View File

@ -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="/">

5
views/layouts/main.ejs
View File

@ -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>