TEST: Started working with S3 buckets for file storage
This commit is contained in:
parent
c7933c2ec4
commit
66ad3a4b5d
|
|
@ -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
|
||||
}
|
||||
]
|
||||
|
|
@ -50,6 +50,7 @@ function App(req = {}, res = {}) {
|
|||
|
||||
this.set({
|
||||
$_ERROR: null,
|
||||
$_EXCEPTION: null,
|
||||
//$_SERVER: process.env,
|
||||
$_ENV: process.env,
|
||||
$_GET: req.query,
|
||||
|
|
@ -497,6 +498,8 @@ App.prototype = {
|
|||
},
|
||||
|
||||
getDbConnection: function (name) {
|
||||
if (this.trx[name]) return this.trx[name];
|
||||
|
||||
if (config.db[name]) {
|
||||
return this.setDbConnection(name, config.db[name]);
|
||||
}
|
||||
|
|
@ -516,8 +519,6 @@ App.prototype = {
|
|||
name = JSON.stringify(this.parse(options));
|
||||
}
|
||||
|
||||
if (this.trx[name]) return this.trx[name];
|
||||
|
||||
return this.setDbConnection(name, options);
|
||||
},
|
||||
|
||||
|
|
@ -654,7 +655,8 @@ App.prototype = {
|
|||
|
||||
if (this.error !== false) {
|
||||
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;
|
||||
await this._exec(actions.catch, true);
|
||||
} else {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
@ -2,6 +2,7 @@ const { http, https } = require('follow-redirects');
|
|||
const querystring = require('querystring');
|
||||
const zlib = require('zlib');
|
||||
const pkg = require('../../package.json');
|
||||
const HttpError = require('../errors/httpError');
|
||||
|
||||
module.exports = {
|
||||
|
||||
|
|
@ -68,6 +69,10 @@ module.exports = {
|
|||
const req = (Url.protocol == 'https:' ? https : http).request(Url, opts, res => {
|
||||
let body = '';
|
||||
|
||||
if (res.statusCode == 204 || res.headers['content-length'] == 0) {
|
||||
return resolve({ status: res.statusCode, headers: res.headers, data: '' });
|
||||
}
|
||||
|
||||
let output = res;
|
||||
if (res.headers['content-encoding'] == 'br') {
|
||||
output = res.pipe(zlib.createBrotliDecompress());
|
||||
|
|
@ -82,11 +87,7 @@ module.exports = {
|
|||
output.setEncoding('utf8');
|
||||
output.on('data', chunk => body += chunk);
|
||||
output.on('end', () => {
|
||||
if (res.statusCode >= 400) {
|
||||
if (throwErrors) {
|
||||
return reject(res.statusCode + ' ' + body);
|
||||
}
|
||||
|
||||
if (passErrors && res.statusCode >= 400) {
|
||||
if (passErrors) {
|
||||
this.res.status(res.statusCode).send(body);
|
||||
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({
|
||||
status: res.statusCode,
|
||||
headers: res.headers,
|
||||
|
|
|
|||
|
|
@ -218,7 +218,8 @@ module.exports = {
|
|||
try {
|
||||
await this.exec(options.try, true);
|
||||
} catch (error) {
|
||||
this.scope.set('$_ERROR', error.message);
|
||||
this.scope.set('$_ERROR', error.message || error);
|
||||
this.scope.set('$_EXCEPTION', error);
|
||||
this.error = false;
|
||||
if (options.catch) {
|
||||
await this.exec(options.catch, true);
|
||||
|
|
|
|||
|
|
@ -154,7 +154,7 @@ module.exports = {
|
|||
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 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 overwrite = this.parseOptional(options.overwrite, 'boolean', false);
|
||||
let createPath = this.parseOptional(options.createPath, 'boolean', true);
|
||||
|
|
|
|||
|
|
@ -7,8 +7,10 @@ process.on('uncaughtException', (e) => {
|
|||
console.error(e);
|
||||
});
|
||||
|
||||
const debug = require('debug');
|
||||
debug.log = console.log.bind(console);
|
||||
|
||||
const config = require('./setup/config');
|
||||
const debug = require('debug')('server-connect:server');
|
||||
const secure = require('./setup/secure');
|
||||
const routes = require('./setup/routes');
|
||||
const sockets = require('./setup/sockets');
|
||||
|
|
@ -26,6 +28,12 @@ app.set('trust proxy', true);
|
|||
app.set('view engine', 'ejs');
|
||||
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')
|
||||
|
||||
if (config.compression) {
|
||||
|
|
@ -74,6 +82,7 @@ module.exports = {
|
|||
// if user has a custom 404 page, redirect to it
|
||||
if (req.accepts('html') && req.url != '/404' && app.get('has404')) {
|
||||
//res.redirect(303, '/404');
|
||||
res.status(404);
|
||||
req.url = '/404';
|
||||
app.handle(req, res);
|
||||
} else {
|
||||
|
|
@ -85,10 +94,11 @@ module.exports = {
|
|||
});
|
||||
|
||||
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 (req.accepts('html') && req.url != '/500' && app.get('has500')) {
|
||||
//res.redirect(303, '/500');
|
||||
res.status(500);
|
||||
req.url = '/500';
|
||||
app.handle(req, res);
|
||||
} else {
|
||||
|
|
|
|||
|
|
@ -2,8 +2,46 @@ const config = require('./config');
|
|||
|
||||
if (config.redis) {
|
||||
const Redis = require('ioredis');
|
||||
//global.redisClient = redis.createClient(config.redis === true ? 'redis://redis' : config.redis);
|
||||
global.redisClient = new Redis(config.redis === true ? 'redis://redis' : config.redis);
|
||||
const debug = require('debug')('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;
|
||||
|
|
@ -263,14 +263,20 @@ module.exports = async function (app) {
|
|||
|
||||
app[isPrivate ? 'privateRateLimiter' : 'rateLimiter'].consume(key, points).then(rateLimiterRes => {
|
||||
const reset = Math.ceil(rateLimiterRes.msBeforeNext / 1000);
|
||||
res.set('RateLimit-Policy', `${config.rateLimit.points};w=${config.rateLimit.duration}`);
|
||||
res.set('RateLimit', `limit=${config.rateLimit.points}, remaining=${rateLimiterRes.remainingPoints}, reset=${reset}`);
|
||||
const { points, duration } = isPrivate ? config.rateLimit.private : config.rateLimit;
|
||||
|
||||
res.set('RateLimit-Policy', `${points};w=${duration}`);
|
||||
res.set('RateLimit', `limit=${points}, remaining=${rateLimiterRes.remainingPoints}, reset=${reset}`);
|
||||
|
||||
next();
|
||||
}).catch(rateLimiterRes => {
|
||||
const reset = Math.ceil(rateLimiterRes.msBeforeNext / 1000);
|
||||
res.set('RateLimit-Policy', `${config.rateLimit.points};w=${config.rateLimit.duration}`);
|
||||
res.set('RateLimit', `limit=${config.rateLimit.points}, remaining=${rateLimiterRes.remainingPoints}, reset=${reset}`);
|
||||
const { points, duration } = isPrivate ? config.rateLimit.private : config.rateLimit;
|
||||
|
||||
res.set('RateLimit-Policy', `${points};w=${duration}`);
|
||||
res.set('RateLimit', `limit=${points}, remaining=${rateLimiterRes.remainingPoints}, reset=${reset}`);
|
||||
res.set('Retry-After', reset);
|
||||
|
||||
if (req.is('json')) {
|
||||
res.status(429).json({ error: 'Too Many Requests' });
|
||||
} else {
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -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="progress mb-5">
|
||||
|
|
@ -29,6 +42,54 @@
|
|||
</div>
|
||||
<button id="btn2" class="btn">Button</button>
|
||||
</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 -->
|
||||
<!-- lMI2BSf8dS+ZmWkyvsq9gTTjScr1SLEsd0OpsZZLAkc -->
|
||||
|
|
|
|||
501
views/index0.ejs
501
views/index0.ejs
|
|
@ -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" -->
|
||||
<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>
|
||||
<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-dialog modal-lg" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<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>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>Signature will show here. Is it acceptable? You can change it before saving everything.</p>
|
||||
<p>
|
||||
<div class="container" id="signatureContainer">
|
||||
<div class="row">
|
||||
<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">
|
||||
</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 class="modal-dialog modal-lg" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<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>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>Signature will show here. Is it acceptable? You can change it before saving everything.</p>
|
||||
<p>
|
||||
<div class="container" id="signatureContainer">
|
||||
<div class="row">
|
||||
<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">
|
||||
</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 class="modal" id="modal-success" is="dmx-bs5-modal" tabindex="-1" role="dialog">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-body">
|
||||
<p class="text-center text-success"><i class="fas fa-check-circle fa-6x"></i></p>
|
||||
<h4 class="text-center fw-light">Success!</h4>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-body">
|
||||
<p class="text-center text-success"><i class="fas fa-check-circle fa-6x"></i></p>
|
||||
<h4 class="text-center fw-light">Success!</h4>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal" id="modal-error" is="dmx-bs5-modal" tabindex="-1" role="dialog">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-body">
|
||||
<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">Something wrong happen. <br>Get help from a Trainer.!</h4>
|
||||
<p>system returned: {{pouchconnectform1.lastError.message}}</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-body">
|
||||
<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">Something wrong happen. <br>Get help from a Trainer.!</h4>
|
||||
<p>system returned: {{pouchconnectform1.lastError.message}}</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="modal" id="SignatureModal1" is="dmx-bs5-modal" tabindex="-1">
|
||||
<div class="modal-dialog modal-lg" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">Hi {{pouchconnectform1.inp_db_fullName.value}}, double check info and sign the box below. Thanks.</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<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>
|
||||
<div class="modal-dialog modal-lg" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">Hi {{pouchconnectform1.inp_db_fullName.value}}, double check info and sign the box below. Thanks.</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<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>
|
||||
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">Name</th>
|
||||
<th scope="col">DL No.</th>
|
||||
<th scope="col">State</th>
|
||||
<th scope="col">Date</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">{{pouchconnectform1.inp_db_fullName.value}}</th>
|
||||
<td>{{pouchconnectform1.inp_db_licenseNumber.value}}</td>
|
||||
<td>{{pouchconnectform1.db_stateIssue.value}}</td>
|
||||
<td>{{pouchconnectform1.inp_owner.value}}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p> Please submit your signature and click the save button.</p>
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">Name</th>
|
||||
<th scope="col">DL No.</th>
|
||||
<th scope="col">State</th>
|
||||
<th scope="col">Date</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">{{pouchconnectform1.inp_db_fullName.value}}</th>
|
||||
<td>{{pouchconnectform1.inp_db_licenseNumber.value}}</td>
|
||||
<td>{{pouchconnectform1.db_stateIssue.value}}</td>
|
||||
<td>{{pouchconnectform1.inp_owner.value}}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p> 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 class="modal-footer">
|
||||
<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-success w-auto" data-bs-dismiss="modal" dmx-on:click="signatureEncodeFlow.run()">Accept</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<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-success w-auto" data-bs-dismiss="modal" dmx-on:click="signatureEncodeFlow.run()">Accept</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">Record Count: {{DBSC1.data.query.count()}} </h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="row">
|
||||
<table class="table" dmx-show="DBSC1.data.query.hasItems()">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>Name</th>
|
||||
<th>License number</th>
|
||||
<th>state issue</th>
|
||||
<th>Trainer ID</th>
|
||||
<th>Date</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody is="dmx-repeat" dmx-generator="bs5table" dmx-bind:repeat="DBSC1.data.query" id="tableRepeat1">
|
||||
<tr>
|
||||
<td>
|
||||
<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">
|
||||
<button id="btn3" class="btn btn-sm text-danger" type="submit"><i class="far fa-trash-alt fa-lg"></i></button>
|
||||
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">Record Count: {{DBSC1.data.query.count()}} </h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="row">
|
||||
<table class="table" dmx-show="DBSC1.data.query.hasItems()">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>Name</th>
|
||||
<th>License number</th>
|
||||
<th>state issue</th>
|
||||
<th>Trainer ID</th>
|
||||
<th>Date</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody is="dmx-repeat" dmx-generator="bs5table" dmx-bind:repeat="DBSC1.data.query" id="tableRepeat1">
|
||||
<tr>
|
||||
<td>
|
||||
<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">
|
||||
<button id="btn3" class="btn btn-sm text-danger" type="submit"><i class="far fa-trash-alt fa-lg"></i></button>
|
||||
|
||||
</form>
|
||||
</td>
|
||||
<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>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-7">
|
||||
<a></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="modal-footer">{{DateTimeNow.datetime.formatDate('MM-dd-yyyy')}}</div>
|
||||
</form>
|
||||
</td>
|
||||
<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>
|
||||
</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>
|
||||
<dmx-toggle id="toggleRecordsTable" checked="true"></dmx-toggle>
|
||||
<div class="container wappler-block pt-3 pb-3">
|
||||
|
||||
<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">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div id="collapse1" class="collapse navbar-collapse">
|
||||
<a class="navbar-brand" href="#">ERT</a>
|
||||
<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="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>
|
||||
</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>
|
||||
<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">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div id="collapse1" class="collapse navbar-collapse">
|
||||
<a class="navbar-brand" href="#">ERT</a>
|
||||
<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="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>
|
||||
</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>
|
||||
|
||||
<dmx-datetime id="DateTimeNow" interval="minutes"></dmx-datetime>
|
||||
|
|
@ -403,98 +416,98 @@
|
|||
|
||||
|
||||
<div class="container">
|
||||
<div class="row" id="daForm">
|
||||
<div class="row" id="daForm">
|
||||
|
||||
<div class="col-12" id="userEntryForm">
|
||||
<dmx-value id="insertID"></dmx-value>
|
||||
<div class="container text-center">
|
||||
<div class="col-12" id="userEntryForm">
|
||||
<dmx-value id="insertID"></dmx-value>
|
||||
<div class="container text-center">
|
||||
|
||||
<div class="row">
|
||||
<div class="col" id="colTop">
|
||||
<h1 class="text-center">Please enter required information </h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<p>*All fields are required </p>
|
||||
<!--
|
||||
<div class="row">
|
||||
<div class="col" id="colTop">
|
||||
<h1 class="text-center">Please enter required information </h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<p>*All fields are required </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>
|
||||
-->
|
||||
</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')">
|
||||
<div class="form-group mb-3 row">
|
||||
<label for="inp_ertDriveDate" class="col-sm-2 col-form-label">Date</label>
|
||||
<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">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group mb-3 row">
|
||||
<label for="inp_owner1" class="col-sm-2 col-form-label">Company Name</label>
|
||||
<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>
|
||||
|
||||
</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 </button>
|
||||
<button id="btn6" class="btn" type="reset">reset</button>
|
||||
</form>
|
||||
|
||||
</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')">
|
||||
<div class="form-group mb-3 row">
|
||||
<label for="inp_ertDriveDate" class="col-sm-2 col-form-label">Date</label>
|
||||
<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">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group mb-3 row">
|
||||
<label for="inp_owner1" class="col-sm-2 col-form-label">Company Name</label>
|
||||
<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>
|
||||
|
||||
</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 </button>
|
||||
<button id="btn6" class="btn" type="reset">reset</button>
|
||||
</form>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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.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="/dmxAppConnect/dmxPouchDB/dmxPouchDB.js" defer></script>
|
||||
</head>
|
||||
|
||||
<body is="dmx-app" id="main">
|
||||
|
|
|
|||
Loading…
Reference in New Issue