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

TEST: Started working with S3 buckets for file storage

This commit is contained in:
Jeff Daniels 2025-03-10 21:59:59 -05:00
parent c7933c2ec4
commit 66ad3a4b5d
18 changed files with 499 additions and 279 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
app/api/s3control.json Normal file
View File

@ -0,0 +1,61 @@
[
{
"name": "listFiles",
"module": "s3",
"action": "listBuckets",
"options": {
"provider": "s3"
},
"output": true,
"outputType": "object",
"meta": [
{
"name": "Buckets",
"type": "array",
"sub": [
{
"name": "Name",
"type": "text"
},
{
"name": "CreationDate",
"type": "date"
}
]
},
{
"name": "Owner",
"type": "object",
"sub": [
{
"name": "DisplayName",
"type": "text"
},
{
"name": "ID",
"type": "text"
}
]
}
]
},
{
"name": "s3b",
"module": "core",
"action": "setvalue",
"options": {
"key": "bucket",
"value": "{{listFiles.Buckets[0].Name}}"
},
"meta": [],
"outputType": "text"
},
{
"name": "api",
"module": "api",
"action": "send",
"options": {},
"output": true,
"collapsed": true
}
]

8
lib/core/app.js
View File

@ -50,6 +50,7 @@ function App(req = {}, res = {}) {
this.set({ this.set({
$_ERROR: null, $_ERROR: null,
$_EXCEPTION: null,
//$_SERVER: process.env, //$_SERVER: process.env,
$_ENV: process.env, $_ENV: process.env,
$_GET: req.query, $_GET: req.query,
@ -497,6 +498,8 @@ App.prototype = {
}, },
getDbConnection: function (name) { getDbConnection: function (name) {
if (this.trx[name]) return this.trx[name];
if (config.db[name]) { if (config.db[name]) {
return this.setDbConnection(name, config.db[name]); return this.setDbConnection(name, config.db[name]);
} }
@ -516,8 +519,6 @@ App.prototype = {
name = JSON.stringify(this.parse(options)); name = JSON.stringify(this.parse(options));
} }
if (this.trx[name]) return this.trx[name];
return this.setDbConnection(name, options); return this.setDbConnection(name, options);
}, },
@ -654,7 +655,8 @@ App.prototype = {
if (this.error !== false) { if (this.error !== false) {
if (actions.catch) { if (actions.catch) {
this.scope.set('$_ERROR', this.error.message); this.scope.set('$_ERROR', this.error.message || this.error);
this.scope.set('$_EXCEPTION', this.error);
this.error = false; this.error = false;
await this._exec(actions.catch, true); await this._exec(actions.catch, true);
} else { } else {

17
lib/errors/httpError.js Normal file
View File

@ -0,0 +1,17 @@
class HttpError extends Error {
name = 'HttpError';
url = "";
status = 0;
statusText = "";
body = "";
constructor(options) {
super(`Request "${options.url || ''}" responded with ${options.status || ''} ${options.statusText || ''}`);
this.name = "HttpError";
this.status = options.status;
this.statusText = options.statusText;
this.body = options.body;
}
}
module.exports = HttpError;

20
lib/modules/api.js
View File

@ -2,6 +2,7 @@ const { http, https } = require('follow-redirects');
const querystring = require('querystring'); const querystring = require('querystring');
const zlib = require('zlib'); const zlib = require('zlib');
const pkg = require('../../package.json'); const pkg = require('../../package.json');
const HttpError = require('../errors/httpError');
module.exports = { module.exports = {
@ -68,6 +69,10 @@ module.exports = {
const req = (Url.protocol == 'https:' ? https : http).request(Url, opts, res => { const req = (Url.protocol == 'https:' ? https : http).request(Url, opts, res => {
let body = ''; let body = '';
if (res.statusCode == 204 || res.headers['content-length'] == 0) {
return resolve({ status: res.statusCode, headers: res.headers, data: '' });
}
let output = res; let output = res;
if (res.headers['content-encoding'] == 'br') { if (res.headers['content-encoding'] == 'br') {
output = res.pipe(zlib.createBrotliDecompress()); output = res.pipe(zlib.createBrotliDecompress());
@ -82,11 +87,7 @@ module.exports = {
output.setEncoding('utf8'); output.setEncoding('utf8');
output.on('data', chunk => body += chunk); output.on('data', chunk => body += chunk);
output.on('end', () => { output.on('end', () => {
if (res.statusCode >= 400) { if (passErrors && res.statusCode >= 400) {
if (throwErrors) {
return reject(res.statusCode + ' ' + body);
}
if (passErrors) { if (passErrors) {
this.res.status(res.statusCode).send(body); this.res.status(res.statusCode).send(body);
return resolve(); return resolve();
@ -105,6 +106,15 @@ module.exports = {
} }
} }
if (throwErrors && res.statusCode >= 400) {
return reject(new HttpError({
url: url,
status: res.statusCode,
statusText: res.statusMessage,
body: body
}));
}
resolve({ resolve({
status: res.statusCode, status: res.statusCode,
headers: res.headers, headers: res.headers,

3
lib/modules/core.js
View File

@ -218,7 +218,8 @@ module.exports = {
try { try {
await this.exec(options.try, true); await this.exec(options.try, true);
} catch (error) { } catch (error) {
this.scope.set('$_ERROR', error.message); this.scope.set('$_ERROR', error.message || error);
this.scope.set('$_EXCEPTION', error);
this.error = false; this.error = false;
if (options.catch) { if (options.catch) {
await this.exec(options.catch, true); await this.exec(options.catch, true);

2
lib/modules/image.js
View File

@ -154,7 +154,7 @@ module.exports = {
if (!sharp) throw new Error(`image.save: instance "${options.instance} doesn't exist.`); if (!sharp) throw new Error(`image.save: instance "${options.instance} doesn't exist.`);
let path = toSystemPath(this.parseRequired(options.path, 'string', 'image.save: path is required.')); let path = toSystemPath(this.parseRequired(options.path, 'string', 'image.save: path is required.'));
let format = this.parseOptional(options.format, 'string', 'jpeg').toLowerCase(); let format = this.parseOptional(options.format, 'string', 'auto').toLowerCase();
let template = this.parseOptional(options.template, 'string', '{name}{ext}'); let template = this.parseOptional(options.template, 'string', '{name}{ext}');
let overwrite = this.parseOptional(options.overwrite, 'boolean', false); let overwrite = this.parseOptional(options.overwrite, 'boolean', false);
let createPath = this.parseOptional(options.createPath, 'boolean', true); let createPath = this.parseOptional(options.createPath, 'boolean', true);

14
lib/server.js
View File

@ -7,8 +7,10 @@ process.on('uncaughtException', (e) => {
console.error(e); console.error(e);
}); });
const debug = require('debug');
debug.log = console.log.bind(console);
const config = require('./setup/config'); const config = require('./setup/config');
const debug = require('debug')('server-connect:server');
const secure = require('./setup/secure'); const secure = require('./setup/secure');
const routes = require('./setup/routes'); const routes = require('./setup/routes');
const sockets = require('./setup/sockets'); const sockets = require('./setup/sockets');
@ -26,6 +28,12 @@ app.set('trust proxy', true);
app.set('view engine', 'ejs'); app.set('view engine', 'ejs');
app.set('view options', { root: 'views', async: true }); app.set('view options', { root: 'views', async: true });
app.set('json replacer', (key, value) => {
if (value instanceof Set) return [...value];
if (value instanceof Error) return value.toString();
return value;
});
app.disable('x-powered-by') app.disable('x-powered-by')
if (config.compression) { if (config.compression) {
@ -74,6 +82,7 @@ module.exports = {
// if user has a custom 404 page, redirect to it // if user has a custom 404 page, redirect to it
if (req.accepts('html') && req.url != '/404' && app.get('has404')) { if (req.accepts('html') && req.url != '/404' && app.get('has404')) {
//res.redirect(303, '/404'); //res.redirect(303, '/404');
res.status(404);
req.url = '/404'; req.url = '/404';
app.handle(req, res); app.handle(req, res);
} else { } else {
@ -85,10 +94,11 @@ module.exports = {
}); });
app.use((err, req, res, next) => { app.use((err, req, res, next) => {
debug(`Got error? %O`, err); console.error(err);
// if user has a custom 500 page, redirect to it // if user has a custom 500 page, redirect to it
if (req.accepts('html') && req.url != '/500' && app.get('has500')) { if (req.accepts('html') && req.url != '/500' && app.get('has500')) {
//res.redirect(303, '/500'); //res.redirect(303, '/500');
res.status(500);
req.url = '/500'; req.url = '/500';
app.handle(req, res); app.handle(req, res);
} else { } else {

42
lib/setup/redis.js
View File

@ -2,8 +2,46 @@ const config = require('./config');
if (config.redis) { if (config.redis) {
const Redis = require('ioredis'); const Redis = require('ioredis');
//global.redisClient = redis.createClient(config.redis === true ? 'redis://redis' : config.redis); const debug = require('debug')('redis');
global.redisClient = new Redis(config.redis === true ? 'redis://redis' : config.redis);
global.redisClient = new Redis(config.redis === true ? 'redis://redis' : config.redis, {
retryStrategy: function(times) {
var delay = Math.min(times * 50, 2000);
return delay;
},
reconnectOnError: function(err) {
if (err.message.includes('READONLY')) {
return true;
}
if (err.message.includes('ECONNRESET')) {
return true;
}
return false;
}
});
global.redisClient.on('connect', () => {
debug('Redis connected successfully.');
});
global.redisClient.on('ready', () => {
debug('Redis is ready to use.');
});
global.redisClient.on('error', (err) => {
debug('Got a Redis error');
console.error(err);
});
global.redisClient.on('reconnecting', (delay) => {
debug(`Reconnecting to Redis in ${delay}ms...`);
});
global.redisClient.on('end', () => {
debug('Redis connection has been closed.');
});
} }
module.exports = global.redisClient; module.exports = global.redisClient;

14
lib/setup/routes.js
View File

@ -263,14 +263,20 @@ module.exports = async function (app) {
app[isPrivate ? 'privateRateLimiter' : 'rateLimiter'].consume(key, points).then(rateLimiterRes => { app[isPrivate ? 'privateRateLimiter' : 'rateLimiter'].consume(key, points).then(rateLimiterRes => {
const reset = Math.ceil(rateLimiterRes.msBeforeNext / 1000); const reset = Math.ceil(rateLimiterRes.msBeforeNext / 1000);
res.set('RateLimit-Policy', `${config.rateLimit.points};w=${config.rateLimit.duration}`); const { points, duration } = isPrivate ? config.rateLimit.private : config.rateLimit;
res.set('RateLimit', `limit=${config.rateLimit.points}, remaining=${rateLimiterRes.remainingPoints}, reset=${reset}`);
res.set('RateLimit-Policy', `${points};w=${duration}`);
res.set('RateLimit', `limit=${points}, remaining=${rateLimiterRes.remainingPoints}, reset=${reset}`);
next(); next();
}).catch(rateLimiterRes => { }).catch(rateLimiterRes => {
const reset = Math.ceil(rateLimiterRes.msBeforeNext / 1000); const reset = Math.ceil(rateLimiterRes.msBeforeNext / 1000);
res.set('RateLimit-Policy', `${config.rateLimit.points};w=${config.rateLimit.duration}`); const { points, duration } = isPrivate ? config.rateLimit.private : config.rateLimit;
res.set('RateLimit', `limit=${config.rateLimit.points}, remaining=${rateLimiterRes.remainingPoints}, reset=${reset}`);
res.set('RateLimit-Policy', `${points};w=${duration}`);
res.set('RateLimit', `limit=${points}, remaining=${rateLimiterRes.remainingPoints}, reset=${reset}`);
res.set('Retry-After', reset); res.set('Retry-After', reset);
if (req.is('json')) { if (req.is('json')) {
res.status(429).json({ error: 'Too Many Requests' }); res.status(429).json({ error: 'Too Many Requests' });
} else { } else {

10
public/dmxAppConnect/dmxAppConnect.js
View File

File diff suppressed because one or more lines are too long

2
public/dmxAppConnect/dmxAppConnect.js.map
View File

File diff suppressed because one or more lines are too long

8
public/dmxAppConnect/dmxRouting/dmxRouting.js
View File

File diff suppressed because one or more lines are too long

2
public/dmxAppConnect/dmxRouting/dmxRouting.js.map
View File

File diff suppressed because one or more lines are too long

8
public/dmxAppConnect/dmxS3Upload/dmxS3Upload.js
View File

File diff suppressed because one or more lines are too long

2
public/dmxAppConnect/dmxS3Upload/dmxS3Upload.js.map
View File

File diff suppressed because one or more lines are too long

63
views/buckets.ejs
View File

@ -1,4 +1,17 @@
<!-- Wappler include head-page="layouts/main" fontawesome_5="cdn" bootstrap5="local" is="dmx-app" id="buckets" appConnect="local" --> <!-- Wappler include head-page="layouts/main" fontawesome_5="cdn" bootstrap5="local" is="dmx-app" id="buckets" appConnect="local" components="{dmxS3Upload:{},dmxNotifications:{},dmxBootstrap5TableGenerator:{}}" -->
<div id="s3upload1" is="dmx-s3-upload" url="/api/s3control" accept="image/*" class="text-center border">
<p dmx-show="!file">Select file</p>
<p dmx-show="file">{{file.name}}</p>
<p dmx-hide="state.uploading">
<button class="btn btn-primary" dmx-on:click.stop="s3upload1.select()" dmx-show="state.idle">Browse</button>
<button class="btn btn-primary" dmx-on:click.stop="s3upload1.upload()" dmx-show="state.ready">Upload</button>
<button class="btn btn-danger" dmx-on:click.stop="s3upload1.reset()" dmx-show="state.done">Reset</button>
</p>
<p dmx-show="state.uploading">
Uploading {{uploadProgress.percent}}%
<button class="btn btn-danger" dmx-on:click.stop="s3upload1.abort()">Abort</button>
</p>
</div>
<div class="container wappler-block p-3"> <div class="container wappler-block p-3">
<div class="progress mb-5"> <div class="progress mb-5">
@ -29,6 +42,54 @@
</div> </div>
<button id="btn2" class="btn">Button</button> <button id="btn2" class="btn">Button</button>
</div> </div>
<div class="container">
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Creation date</th>
</tr>
</thead>
<tbody is="dmx-repeat" dmx-generator="bs5table" dmx-bind:repeat="s3upload1.data.listFiles.Buckets" id="tableRepeat1">
<tr>
<td dmx-text="Name"></td>
<td dmx-text="CreationDate"></td>
</tr>
</tbody>
</table>
</div>
<dmx-notifications id="notifies1"></dmx-notifications>
<div class="container">
<script>
// An efficient JavaScript program to remove all
// spaces from a string
let str = '2JAxQ9pH Mhy87Sr5NCJ I Be9qj Nd p9eY3vW7BKqN Msxk='
// Function to remove all spaces
// from a given string
function removeSpaces(str) {
// To keep track of non-space
// character count
var count = 0;
// Traverse the given string. If current
// character is not space, then place
// it at index 'count++'
for (var i = 0; i < str.length; i++)
if (str[i] !== " ") str[count++] = str[i];
// here count is
// incremented
return count;
}
// Driver code
var str = "g eeks for ge eeks ".split("");
var i = removeSpaces(str);
document.write(str.join("").substring(0, i));
</script>
</div>
<!-- DO00RXH3C276N9Y9PQBG --> <!-- DO00RXH3C276N9Y9PQBG -->
<!-- lMI2BSf8dS+ZmWkyvsq9gTTjScr1SLEsd0OpsZZLAkc --> <!-- lMI2BSf8dS+ZmWkyvsq9gTTjScr1SLEsd0OpsZZLAkc -->

501
views/index0.ejs
View File

@ -1,4 +1,17 @@
<!-- 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:{},dmxBootbox5:{},dmxBrowser:{},dmxBootstrap5Tooltips:{},dmxValidator:{},dmxS3Upload:{},dmxDatePicker:{},dmxMasonry:{},dmxBootstrap5Popovers:{},dmxPouchDB:{},dmxLazyLoad:{}}" jquery_slim_35="cdn" moment_2="cdn" --> <!-- 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:{},dmxBootbox5:{},dmxBrowser:{},dmxBootstrap5Tooltips:{},dmxValidator:{},dmxS3Upload:{},dmxDatePicker:{},dmxMasonry:{},dmxBootstrap5Popovers:{},dmxPouchDB:{},dmxLazyLoad:{}}" jquery_slim_35="cdn" moment_2="cdn" -->
<div id="s3upload1" is="dmx-s3-upload" url="" accept="image/*" class="text-center border">
<p dmx-show="!file">Select file</p>
<p dmx-show="file">{{file.name}}</p>
<p dmx-hide="state.uploading">
<button class="btn btn-primary" dmx-on:click.stop="s3upload1.select()" dmx-show="state.idle">Browse</button>
<button class="btn btn-primary" dmx-on:click.stop="s3upload1.upload()" dmx-show="state.ready">Upload</button>
<button class="btn btn-danger" dmx-on:click.stop="s3upload1.reset()" dmx-show="state.done">Reset</button>
</p>
<p dmx-show="state.uploading">
Uploading {{uploadProgress.percent}}%
<button class="btn btn-danger" dmx-on:click.stop="s3upload1.abort()">Abort</button>
</p>
</div>
@ -175,196 +188,196 @@
]</script> ]</script>
<dmx-serverconnect id="serverconnect_sign" url="/api/uploadSignature" noload="true"></dmx-serverconnect> <dmx-serverconnect id="serverconnect_sign" url="/api/uploadSignature" noload="true"></dmx-serverconnect>
<div class="modal" id="modalVerifySignature" is="dmx-bs5-modal" tabindex="-1"> <div class="modal" id="modalVerifySignature" is="dmx-bs5-modal" tabindex="-1">
<div class="modal-dialog modal-lg" role="document"> <div class="modal-dialog modal-lg" role="document">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h5 class="modal-title" contenteditable="false">Submitted Signature for {{pouchconnectform1.inp_db_fullName.value}}</h5> <h5 class="modal-title" contenteditable="false">Submitted Signature for {{pouchconnectform1.inp_db_fullName.value}}</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" is="dmx-button" value=""></button> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" is="dmx-button" value=""></button>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<p>Signature will show here. Is it acceptable? You can change it before saving everything.</p> <p>Signature will show here. Is it acceptable? You can change it before saving everything.</p>
<p> <p>
<div class="container" id="signatureContainer"> <div class="container" id="signatureContainer">
<div class="row"> <div class="row">
<div class="col text-center"> <div class="col text-center">
<img id="uploadedSignature" alt="Signature will appear here" dmx-style:uploadedsignaturestyle="'max-width: 690; border: 1px solid #ccc;'" width="700" height="225" dmx-bind:src="signatureEncoded.value"> <img id="uploadedSignature" alt="Signature will appear here" dmx-style:uploadedsignaturestyle="'max-width: 690; border: 1px solid #ccc;'" width="700" height="225" dmx-bind:src="signatureEncoded.value">
</div>
</div>
</div>
</p>
</div>
<div is="dmx-pouchdb-detail" id="pouchdbdetail2" dmx-bind:docid="tableRepeat3[0].btn5.value" db="dbCouch" collection="da"></div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div> </div>
</div>
</div> </div>
</p>
</div>
<div is="dmx-pouchdb-detail" id="pouchdbdetail2" dmx-bind:docid="tableRepeat3[0].btn5.value" db="dbCouch" collection="da"></div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div> </div>
</div>
</div> </div>
<div class="modal" id="modal-success" is="dmx-bs5-modal" tabindex="-1" role="dialog"> <div class="modal" id="modal-success" is="dmx-bs5-modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document"> <div class="modal-dialog" role="document">
<div class="modal-content"> <div class="modal-content">
<div class="modal-body"> <div class="modal-body">
<p class="text-center text-success"><i class="fas fa-check-circle fa-6x"></i></p> <p class="text-center text-success"><i class="fas fa-check-circle fa-6x"></i></p>
<h4 class="text-center fw-light">Success!</h4> <h4 class="text-center fw-light">Success!</h4>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div> </div>
</div>
</div> </div>
</div>
</div> </div>
<div class="modal" id="modal-error" is="dmx-bs5-modal" tabindex="-1" role="dialog"> <div class="modal" id="modal-error" is="dmx-bs5-modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document"> <div class="modal-dialog" role="document">
<div class="modal-content"> <div class="modal-content">
<div class="modal-body"> <div class="modal-body">
<p class="text-center text-danger"><i class="fas fa-times-circle fa-6x"></i></p> <p class="text-center text-danger"><i class="fas fa-times-circle fa-6x"></i></p>
<h4 class="text-center fw-light">Error!</h4> <h4 class="text-center fw-light">Error!</h4>
<h4 class="text-center fw-light">Something wrong happen. <br>Get help from a Trainer.!</h4> <h4 class="text-center fw-light">Something wrong happen. <br>Get help from a Trainer.!</h4>
<p>system returned: {{pouchconnectform1.lastError.message}}</p> <p>system returned: {{pouchconnectform1.lastError.message}}</p>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div> </div>
</div>
</div> </div>
</div>
</div> </div>
<div class="modal" id="SignatureModal1" is="dmx-bs5-modal" tabindex="-1"> <div class="modal" id="SignatureModal1" is="dmx-bs5-modal" tabindex="-1">
<div class="modal-dialog modal-lg" role="document"> <div class="modal-dialog modal-lg" role="document">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h5 class="modal-title">Hi {{pouchconnectform1.inp_db_fullName.value}}, double check info and sign the box below.&nbsp; Thanks.</h5> <h5 class="modal-title">Hi {{pouchconnectform1.inp_db_fullName.value}}, double check info and sign the box below.&nbsp; Thanks.</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div> </div>
<div class="modal-body text-center"> <div class="modal-body text-center">
<h5 class="text-start text-lowercase">Please review your information for errors. Close this window to correct any mistakes, then return to complete your task. Thank you!</h5> <h5 class="text-start text-lowercase">Please review your information for errors. Close this window to correct any mistakes, then return to complete your task. Thank you!</h5>
<table class="table"> <table class="table">
<thead> <thead>
<tr> <tr>
<th scope="col">Name</th> <th scope="col">Name</th>
<th scope="col">DL No.</th> <th scope="col">DL No.</th>
<th scope="col">State</th> <th scope="col">State</th>
<th scope="col">Date</th> <th scope="col">Date</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<th scope="row">{{pouchconnectform1.inp_db_fullName.value}}</th> <th scope="row">{{pouchconnectform1.inp_db_fullName.value}}</th>
<td>{{pouchconnectform1.inp_db_licenseNumber.value}}</td> <td>{{pouchconnectform1.inp_db_licenseNumber.value}}</td>
<td>{{pouchconnectform1.db_stateIssue.value}}</td> <td>{{pouchconnectform1.db_stateIssue.value}}</td>
<td>{{pouchconnectform1.inp_owner.value}}</td> <td>{{pouchconnectform1.inp_owner.value}}</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
<p>&nbsp;Please submit your signature and click the save button.</p> <p>&nbsp;Please submit your signature and click the save button.</p>
<canvas id="signatureCanvas" width="700" height="200" style="border:1px solid #000;" onmousedown="startDrawing(event)" onmouseup="endDrawing()" onmousemove="draw(event)" class="bg-warning-subtle" ontouchstart="startDrawing(event.touches[0])" ontouchend="endDrawing()" ontouchmove="draw(event.touches[0])"></canvas> <canvas id="signatureCanvas" width="700" height="200" style="border:1px solid #000;" onmousedown="startDrawing(event)" onmouseup="endDrawing()" onmousemove="draw(event)" class="bg-warning-subtle" ontouchstart="startDrawing(event.touches[0])" ontouchend="endDrawing()" ontouchmove="draw(event.touches[0])"></canvas>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button id="btn4" class="btn btn-warning w-25" data-bs-toggle="button" onclick="clearCanvas()">Clear Signature</button> <button id="btn4" class="btn btn-warning w-25" data-bs-toggle="button" onclick="clearCanvas()">Clear Signature</button>
<button type="button" class="btn btn-danger w-auto" data-bs-dismiss="modal" dmx-bs-tooltip="'Close Signature Panel'" data-bs-trigger="hover" data-bs-placement="top" onclick="getSignatureData()">CLOSE</button> <button type="button" class="btn btn-danger w-auto" data-bs-dismiss="modal" dmx-bs-tooltip="'Close Signature Panel'" data-bs-trigger="hover" data-bs-placement="top" onclick="getSignatureData()">CLOSE</button>
<button type="button" class="btn btn-success w-auto" data-bs-dismiss="modal" dmx-on:click="signatureEncodeFlow.run()">Accept</button> <button type="button" class="btn btn-success w-auto" data-bs-dismiss="modal" dmx-on:click="signatureEncodeFlow.run()">Accept</button>
</div> </div>
</div>
</div> </div>
</div>
</div> </div>
<div class="modal" id="modal1" is="dmx-bs5-modal" tabindex="-1"> <div class="modal" id="modal1" is="dmx-bs5-modal" tabindex="-1">
<div class="modal-dialog modal-dialog-centered modal-lg" role="document"> <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h5 class="modal-title">Record Count: {{DBSC1.data.query.count()}}&nbsp;</h5> <h5 class="modal-title">Record Count: {{DBSC1.data.query.count()}}&nbsp;</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<div class="row"> <div class="row">
<table class="table" dmx-show="DBSC1.data.query.hasItems()"> <table class="table" dmx-show="DBSC1.data.query.hasItems()">
<thead> <thead>
<tr> <tr>
<th></th> <th></th>
<th>Name</th> <th>Name</th>
<th>License number</th> <th>License number</th>
<th>state issue</th> <th>state issue</th>
<th>Trainer ID</th> <th>Trainer ID</th>
<th>Date</th> <th>Date</th>
</tr> </tr>
</thead> </thead>
<tbody is="dmx-repeat" dmx-generator="bs5table" dmx-bind:repeat="DBSC1.data.query" id="tableRepeat1"> <tbody is="dmx-repeat" dmx-generator="bs5table" dmx-bind:repeat="DBSC1.data.query" id="tableRepeat1">
<tr> <tr>
<td> <td>
<form action="/api/delRecord" method="post" dmx-on:success="DBSC1.load({})" is="dmx-serverconnect-form" id="serverconnectform3"> <form action="/api/delRecord" method="post" dmx-on:success="DBSC1.load({})" is="dmx-serverconnect-form" id="serverconnectform3">
<input id="deleteid" name="deleteid" type="hidden" class="form-control" dmx-bind:value="ID"> <input id="deleteid" name="deleteid" type="hidden" class="form-control" dmx-bind:value="ID">
<button id="btn3" class="btn btn-sm text-danger" type="submit"><i class="far fa-trash-alt fa-lg"></i></button> <button id="btn3" class="btn btn-sm text-danger" type="submit"><i class="far fa-trash-alt fa-lg"></i></button>
</form> </form>
</td> </td>
<td dmx-text="db_fullName"></td> <td dmx-text="db_fullName"></td>
<td dmx-text="db_licenseNumber"></td> <td dmx-text="db_licenseNumber"></td>
<td dmx-text="db_stateIssue"></td> <td dmx-text="db_stateIssue"></td>
<td dmx-text="db_employeeID"></td> <td dmx-text="db_employeeID"></td>
<td dmx-text="owner"></td> <td dmx-text="owner"></td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div>
<div class="row">
<div class="col-7">
<a></a>
</div>
</div>
</div>
<div class="modal-footer">{{DateTimeNow.datetime.formatDate('MM-dd-yyyy')}}</div>
</div> </div>
<div class="row">
<div class="col-7">
<a></a>
</div>
</div>
</div>
<div class="modal-footer">{{DateTimeNow.datetime.formatDate('MM-dd-yyyy')}}</div>
</div> </div>
</div>
</div> </div>
<dmx-toggle id="toggleRecordsTable" checked="true"></dmx-toggle> <dmx-toggle id="toggleRecordsTable" checked="true"></dmx-toggle>
<div class="container wappler-block pt-3 pb-3"> <div class="container wappler-block pt-3 pb-3">
<nav class="navbar navbar-expand-lg justify-content-around"> <nav class="navbar navbar-expand-lg justify-content-around">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapse1" aria-controls="collapse1" aria-expanded="false" aria-label="Toggle navigation"> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapse1" aria-controls="collapse1" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
</button> </button>
<div id="collapse1" class="collapse navbar-collapse"> <div id="collapse1" class="collapse navbar-collapse">
<a class="navbar-brand" href="#">ERT</a> <a class="navbar-brand" href="#">ERT</a>
<div class="navbar-nav w-100 justify-content-start"> <div class="navbar-nav w-100 justify-content-start">
<div class="nav-item dropdown"><a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" id="dropdown1" role="button" aria-haspopup="true" aria-expanded="false">File</a> <div class="nav-item dropdown"><a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" id="dropdown1" role="button" aria-haspopup="true" aria-expanded="false">File</a>
<div class="dropdown-menu" aria-labelledby="dropdown1"> <div class="dropdown-menu" aria-labelledby="dropdown1">
<a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a> <a class="dropdown-item" href="#">Something else here</a>
</div> </div>
</div>
<div class="nav-item dropdown"><a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" id="dropdown2" role="button" aria-haspopup="true" aria-expanded="false">Edit</a>
<div class="dropdown-menu" aria-labelledby="dropdown2">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<div class="nav-item dropdown"><a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" id="dropdown3" role="button" aria-haspopup="true" aria-expanded="false">view</a>
<div class="dropdown-menu" aria-labelledby="dropdown3">
<a class="dropdown-item" dmx-on:click="toggleRecordsTable.toggle()">Show Records</a>
<a class="dropdown-item" href="#" dmx-on:click="SignatureModal1.show()">SignatureModal1</a>
<a class="dropdown-item" href="#" dmx-on:click="toggleSignatureDataEncoded.toggle()">SignatureEncoding</a>
<a class="dropdown-item" href="#" dmx-on:click="modalVerifySignature.show()">modalVerifySignature</a>
<a class="dropdown-item" href="/observationPage" dmx-on:click="toggleSignatureDataEncoded.toggle()" internal="true">Observation</a>
<a class="dropdown-item" dmx-on:click="toggleSignatureDataEncoded.toggle()">ToggleViews</a>
</div>
</div>
<div class="nav-item dropdown"><a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" id="dropdown4" role="button" aria-haspopup="true" aria-expanded="false">Help</a>
<div class="dropdown-menu" aria-labelledby="dropdown4">
<a class="dropdown-item">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</div>
</div> </div>
</nav> <div class="nav-item dropdown"><a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" id="dropdown2" role="button" aria-haspopup="true" aria-expanded="false">Edit</a>
<div class="dropdown-menu" aria-labelledby="dropdown2">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<div class="nav-item dropdown"><a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" id="dropdown3" role="button" aria-haspopup="true" aria-expanded="false">view</a>
<div class="dropdown-menu" aria-labelledby="dropdown3">
<a class="dropdown-item" dmx-on:click="toggleRecordsTable.toggle()">Show Records</a>
<a class="dropdown-item" href="#" dmx-on:click="SignatureModal1.show()">SignatureModal1</a>
<a class="dropdown-item" href="#" dmx-on:click="toggleSignatureDataEncoded.toggle()">SignatureEncoding</a>
<a class="dropdown-item" href="#" dmx-on:click="modalVerifySignature.show()">modalVerifySignature</a>
<a class="dropdown-item" href="/observationPage" dmx-on:click="toggleSignatureDataEncoded.toggle()" internal="true">Observation</a>
<a class="dropdown-item" dmx-on:click="toggleSignatureDataEncoded.toggle()">ToggleViews</a>
</div>
</div>
<div class="nav-item dropdown"><a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" id="dropdown4" role="button" aria-haspopup="true" aria-expanded="false">Help</a>
<div class="dropdown-menu" aria-labelledby="dropdown4">
<a class="dropdown-item">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</div>
</div>
</nav>
</div> </div>
<dmx-datetime id="DateTimeNow" interval="minutes"></dmx-datetime> <dmx-datetime id="DateTimeNow" interval="minutes"></dmx-datetime>
@ -403,98 +416,98 @@
<div class="container"> <div class="container">
<div class="row" id="daForm"> <div class="row" id="daForm">
<div class="col-12" id="userEntryForm"> <div class="col-12" id="userEntryForm">
<dmx-value id="insertID"></dmx-value> <dmx-value id="insertID"></dmx-value>
<div class="container text-center"> <div class="container text-center">
<div class="row"> <div class="row">
<div class="col" id="colTop"> <div class="col" id="colTop">
<h1 class="text-center">Please enter required information&nbsp;</h1> <h1 class="text-center">Please enter required information&nbsp;</h1>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<p>*All fields are required&nbsp;</p> <p>*All fields are required&nbsp;</p>
<!-- <!--
<form is="dmx-serverconnect-form" id="serverconnectform1" method="post" action="/api/insert" dmx-generator="bootstrap5" dmx-form-type="horizontal" dmx-on:done="DBSC1.load({})" dmx-on:success="insertID.setValue(serverconnectform1.data.insert.identity);toasts1.showSimple({message: 'Save successful', delay: 2500, type: 'success'});cookies1.set('userIdentifier',serverconnectform1.data.insert.identity,{})" dmx-on:submit="SignatureModal1.hide()"> <form is="dmx-serverconnect-form" id="serverconnectform1" method="post" action="/api/insert" dmx-generator="bootstrap5" dmx-form-type="horizontal" dmx-on:done="DBSC1.load({})" dmx-on:success="insertID.setValue(serverconnectform1.data.insert.identity);toasts1.showSimple({message: 'Save successful', delay: 2500, type: 'success'});cookies1.set('userIdentifier',serverconnectform1.data.insert.identity,{})" dmx-on:submit="SignatureModal1.hide()">
</form> </form>
--> -->
</div> </div>
<form id="myDBSeverForm1" is="dmx-serverconnect-form" method="post" action="/api/myInsert" dmx-on:success="browser1.goto('/success',true,'Success')" dmx-on:error="browser1.goto('/unsuccessful',true,'Something wrong happen')"> <form id="myDBSeverForm1" is="dmx-serverconnect-form" method="post" action="/api/myInsert" dmx-on:success="browser1.goto('/success',true,'Success')" dmx-on:error="browser1.goto('/unsuccessful',true,'Something wrong happen')">
<div class="form-group mb-3 row"> <div class="form-group mb-3 row">
<label for="inp_ertDriveDate" class="col-sm-2 col-form-label">Date</label> <label for="inp_ertDriveDate" class="col-sm-2 col-form-label">Date</label>
<div class="col-sm-3"> <div class="col-sm-3">
<input type="text" class="form-control" id="inp_ertDriveDate" name="ertDriveDate" placeholder="Date" dmx-bind:value="DateTimeNow.datetime.formatDate('MM-dd-yyyy')" readonly="true"> <input type="text" class="form-control" id="inp_ertDriveDate" name="ertDriveDate" placeholder="Date" dmx-bind:value="DateTimeNow.datetime.formatDate('MM-dd-yyyy')" readonly="true">
</div> </div>
</div> </div>
<div class="form-group mb-3 row"> <div class="form-group mb-3 row">
<label for="inp_owner1" class="col-sm-2 col-form-label">Company Name</label> <label for="inp_owner1" class="col-sm-2 col-form-label">Company Name</label>
<div class="col-sm-3"> <div class="col-sm-3">
<select id="inp_db_dspShortCode" class="form-select" dmx-bind:options="dspListJson.data.DSPCompanies" optionvalue="dspShortCode" optiontext="dspName.titlecase()" name="dspShortCode"> <select id="inp_db_dspShortCode" class="form-select" dmx-bind:options="dspListJson.data.DSPCompanies" optionvalue="dspShortCode" optiontext="dspName.titlecase()" name="dspShortCode">
</select> </select>
</div>
</div>
<div class="form-group mb-3 row">
<label for="inp_db_fullName" class="col-sm-2 col-form-label">Name</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="inp_db_fullName" name="db_fullName" aria-describedby="inp_db_fullName_help" placeholder="First and Last name" required="">
</div>
</div>
<div class="form-group mb-3 row">
<label for="inp_db_licenseNumber" class="col-sm-2 col-form-label">License #</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="inp_db_licenseNumber" name="db_licenseNumber" aria-describedby="inp_db_licenseNumber_help" placeholder="Enter license number" required="">
</div>
</div>
<div class="form-group mb-3 row">
<label for="inp_db_stateIssue" class="col-sm-2 col-form-label">State</label>
<div class="col-sm-3">
<select id="inp_db_stateIssue" class="form-select" dmx-bind:options="stateJSON.data.states" optiontext="name" name="db_state" optionvalue="abbreviation">
</select>
</div>
</div>
<div class="form-group mb-3 row">
<label for="inp_db_trainerSelected" class="col-sm-2 col-form-label">Trainer</label>
<div class="col-3">
<select id="inp_db_trainerSelected" class="form-select" dmx-bind:options="trainerJSON.data.Trainer" name="db_trainerSelected" optiontext="Name" optionvalue="Login">
</select>
</div>
</div>
<div class="form-group mb-3 row" dmx-show="toggleSignatureDataEncoded.checked">
<div class="col align-self-center">
<div class="row">
<div class="col-6 offset-1">
<button id="btn2" class="btn text-start">Encoded signature Data</button>
</div>
</div>
</div>
<div class="col-sm-9">
<textarea id="db_signatureData" class="form-control" name="db_signatureData" dmx-bind:value="signatureEncoded.value"></textarea>
</div>
</div>
<div class="row justify-content-center border border-2">
<h4 class="text-center" dmx-hide="!signatureEncoded.value.isEmpty()">Waiting for signature</h4>
<div class="row justify-content-center">
<img width="100" class="align-self-start bg-opacity-25 bg-light-subtle w-75" dmx-bind:data-srcset="" dmx-bind:data-src="pouchconnectform1.db_signatureData.value" dmx-bind:src="signatureEncoded.value" alt="SignatureCapture" height="75" id="imgSignatureDataCapture">
</div>
</div>
<p></p>
<img width="75" height="75" src="/assets/images/icons/signature.png" loading="lazy" dmx-on:click="SignatureModal1.show()">
<button id="btn1" class="btn btn-lg text-bg-primary text-warning fw-bold text-capitalize visually-hidden" data-bs-toggle="modal" data-bs-target="#SignatureModal1"><span style="font-weight: normal;">Sign</span></button><button id="btn5" class="btn btn-lg text-warning fw-bold text-capitalize text-bg-success ms-4" data-bs-target="#SignatureModal1" dmx-on:click="myDBSeverForm1.submit()" dmx-bind:disabled="signatureEncoded.value.isEmpty()">Save&nbsp;</button>
<button id="btn6" class="btn" type="reset">reset</button>
</form>
</div> </div>
</div> </div>
<div class="form-group mb-3 row">
<label for="inp_db_fullName" class="col-sm-2 col-form-label">Name</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="inp_db_fullName" name="db_fullName" aria-describedby="inp_db_fullName_help" placeholder="First and Last name" required="">
</div>
</div>
<div class="form-group mb-3 row">
<label for="inp_db_licenseNumber" class="col-sm-2 col-form-label">License #</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="inp_db_licenseNumber" name="db_licenseNumber" aria-describedby="inp_db_licenseNumber_help" placeholder="Enter license number" required="">
</div>
</div>
<div class="form-group mb-3 row">
<label for="inp_db_stateIssue" class="col-sm-2 col-form-label">State</label>
<div class="col-sm-3">
<select id="inp_db_stateIssue" class="form-select" dmx-bind:options="stateJSON.data.states" optiontext="name" name="db_state" optionvalue="abbreviation">
</select>
</div>
</div>
<div class="form-group mb-3 row">
<label for="inp_db_trainerSelected" class="col-sm-2 col-form-label">Trainer</label>
<div class="col-3">
<select id="inp_db_trainerSelected" class="form-select" dmx-bind:options="trainerJSON.data.Trainer" name="db_trainerSelected" optiontext="Name" optionvalue="Login">
</select>
</div>
</div>
<div class="form-group mb-3 row" dmx-show="toggleSignatureDataEncoded.checked">
<div class="col align-self-center">
<div class="row">
<div class="col-6 offset-1">
<button id="btn2" class="btn text-start">Encoded signature Data</button>
</div>
</div>
</div>
<div class="col-sm-9">
<textarea id="db_signatureData" class="form-control" name="db_signatureData" dmx-bind:value="signatureEncoded.value"></textarea>
</div>
</div>
<div class="row justify-content-center border border-2">
<h4 class="text-center" dmx-hide="!signatureEncoded.value.isEmpty()">Waiting for signature</h4>
<div class="row justify-content-center">
<img width="100" class="align-self-start bg-opacity-25 bg-light-subtle w-75" dmx-bind:data-srcset="" dmx-bind:data-src="pouchconnectform1.db_signatureData.value" dmx-bind:src="signatureEncoded.value" alt="SignatureCapture" height="75" id="imgSignatureDataCapture">
</div>
</div>
<p></p>
<img width="75" height="75" src="/assets/images/icons/signature.png" loading="lazy" dmx-on:click="SignatureModal1.show()">
<button id="btn1" class="btn btn-lg text-bg-primary text-warning fw-bold text-capitalize visually-hidden" data-bs-toggle="modal" data-bs-target="#SignatureModal1"><span style="font-weight: normal;">Sign</span></button><button id="btn5" class="btn btn-lg text-warning fw-bold text-capitalize text-bg-success ms-4" data-bs-target="#SignatureModal1" dmx-on:click="myDBSeverForm1.submit()" dmx-bind:disabled="signatureEncoded.value.isEmpty()">Save&nbsp;</button>
<button id="btn6" class="btn" type="reset">reset</button>
</form>
</div>
</div> </div>
</div>
</div> </div>

1
views/layouts/main.ejs
View File

@ -77,6 +77,7 @@
<script src="https://cdn.jsdelivr.net/npm/pouchdb@8.0.1/dist/pouchdb.min.js" defer></script> <script src="https://cdn.jsdelivr.net/npm/pouchdb@8.0.1/dist/pouchdb.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/pouchdb@8.0.1/dist/pouchdb.find.min.js" defer></script> <script src="https://cdn.jsdelivr.net/npm/pouchdb@8.0.1/dist/pouchdb.find.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/pouchdb@8.0.1/dist/pouchdb.indexeddb.min.js" defer></script> <script src="https://cdn.jsdelivr.net/npm/pouchdb@8.0.1/dist/pouchdb.indexeddb.min.js" defer></script>
<script src="/dmxAppConnect/dmxPouchDB/dmxPouchDB.js" defer></script>
</head> </head>
<body is="dmx-app" id="main"> <body is="dmx-app" id="main">