WAPPLER UPDATE to v7b13

Moved Signature canvas to modal popup
in clean up mode
fit to tablet

.wappler/migrations/DB/20241205001920_Mod db_signatureData to Text from String.js

@@ -0,0 +1,15 @@
+
+exports.up = function(knex) {
+  return knex.schema
+    .table('da', async function (table) {
+      table.text('db_SignatureData').alter();
+    })
+
+};
+
+exports.down = function(knex) {
+  return knex.schema
+    .table('da', async function (table) {
+      table.string('db_SignatureData', 255).alter();
+    })
+};

.wappler/targets/Development/databases/DB.json

@@ -9,73 +9,6 @@
       "_da_old_20241029": {
         "db": {}
       },
-      "da": {
-        "db": {},
-        "columns": {
-          "ID": {
-            "db": {
-              "type": "increments",
-              "primary": true,
-              "unique": false,
-              "nullable": false
-            }
-          },
-          "db_fullName": {
-            "db": {
-              "type": "text",
-              "primary": false,
-              "unique": false,
-              "nullable": true
-            }
-          },
-          "db_licenseNumber": {
-            "db": {
-              "type": "text",
-              "primary": false,
-              "unique": false,
-              "nullable": true
-            }
-          },
-          "db_stateIssue": {
-            "db": {
-              "type": "text",
-              "primary": false,
-              "unique": false,
-              "nullable": true
-            }
-          },
-          "db_employeeID": {
-            "db": {
-              "type": "integer",
-              "primary": false,
-              "unique": false,
-              "nullable": true
-            }
-          },
-          "owner": {
-            "db": {
-              "type": "text",
-              "primary": false,
-              "unique": false,
-              "nullable": true
-            }
-          },
-          "db_SignatureData": {
-            "ui": {
-              "label": "Signature",
-              "help": "Base64 encoded image "
-            },
-            "meta": [],
-            "db": {
-              "type": "string",
-              "maxLength": 255,
-              "primary": false,
-              "unique": false,
-              "nullable": true
-            }
-          }
-        }
-      },
       "_tSections_old_20241031": {
         "db": {}
       },
@@ -228,6 +161,73 @@
           }
         },
         "db": {}
+      },
+      "da": {
+        "db": {},
+        "columns": {
+          "ID": {
+            "db": {
+              "type": "increments",
+              "primary": true,
+              "unique": false,
+              "nullable": false
+            }
+          },
+          "db_fullName": {
+            "db": {
+              "type": "text",
+              "primary": false,
+              "unique": false,
+              "nullable": true
+            }
+          },
+          "db_licenseNumber": {
+            "db": {
+              "type": "text",
+              "primary": false,
+              "unique": false,
+              "nullable": true
+            }
+          },
+          "db_stateIssue": {
+            "db": {
+              "type": "text",
+              "primary": false,
+              "unique": false,
+              "nullable": true
+            }
+          },
+          "db_employeeID": {
+            "db": {
+              "type": "integer",
+              "primary": false,
+              "unique": false,
+              "nullable": true
+            }
+          },
+          "owner": {
+            "db": {
+              "type": "text",
+              "primary": false,
+              "unique": false,
+              "nullable": true
+            }
+          },
+          "db_SignatureData": {
+            "ui": {
+              "label": "Signature",
+              "help": "Base64 encoded image "
+            },
+            "meta": [],
+            "db": {
+              "type": "text",
+              "maxLength": 255,
+              "primary": false,
+              "unique": false,
+              "nullable": true
+            }
+          }
+        }
       }
     },
     "views": {}

app/config/routes.json

@@ -50,6 +50,11 @@
       "path": "/buckets",
       "page": "buckets",
       "layout": "main"
+    },
+    {
+      "path": "/success",
+      "page": "success",
+      "layout": "main"
     }
   ]
 }

public/dmxAppConnect/config.js

@@ -105,6 +105,19 @@ dmx.config({
           }
         }
       ]
+    },
+    "signatureEncodeFlow": {
+      "meta": [
+        {
+          "name": "signatureEncoded",
+          "type": "text"
+        },
+        {
+          "name": "submitServerConnect",
+          "type": "text"
+        }
+      ],
+      "local": {}
     }
   }
 });

views/.wappler_folder.json

@@ -34,5 +34,9 @@
   "buckets.ejs": {
     "layoutPage": "main",
     "description": ""
+  },
+  "success.ejs": {
+    "layoutPage": "main",
+    "description": ""
   }
 }

views/index0.ejs

@@ -1,4 +1,28 @@
 <!-- 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:{}}" jquery_slim_35="cdn" moment_2="cdn" -->
+<script is="dmx-flow" id="signatureEncodeFlow" type="text/dmx-flow">[
+  {
+    toast.showSimple: {message: "Start-Flow", delay: 2500}
+  },
+  {
+    runJS: {
+      name: "signatureEncoded",
+      output: true,
+      outputType: "text",
+      function: "getSignatureData"
+    }
+  },
+  {
+    run: {
+      name: "submitServerConnect",
+      output: true,
+      outputType: "text",
+      action: "{{serverconnectform1.submit()}}"
+    }
+  },
+  {
+    toast.showSimple: {message: "End-Flow", delay: 2000}
+  }
+]</script>
 <script is="dmx-flow" id="flow1" type="text/dmx-flow">[
   {
     runJS: {
@@ -109,8 +133,8 @@
             </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">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">Cancel</button>
-                <button type="button" class="btn btn-success w-auto" dmx-on:click="serverconnectform1.submit()">Save</button>
+                <button type="button" class="btn btn-success w-auto" dmx-on:click="signatureEncodeFlow.run()">Save</button>
             </div>
         </div>
     </div>
@@ -208,9 +232,6 @@
 
 
 
-<div class="container">
-
-</div>
 <div class="container">
     <div class="row" id="daForm">
 
@@ -260,7 +281,7 @@
                             <div class="col-sm-4">
                                 <input type="text" class="form-control" id="inp_owner" name="owner" aria-describedby="inp_owner_help" placeholder="Enter Owner" dmx-bind:value="DateTimeNow.datetime.formatDate('MM-dd-yyyy')" readonly="true" is="dmx-date-picker" mindate="2024-12-01" maxdate="2025-12-31">
                             </div>
-                            <div class="col-6"><button type="submit" class="btn btn-success" dmx-bind:disabled="state.executing">Save <span class="spinner-border spinner-border-sm" role="status" dmx-show="state.executing"><button id="xbtn4" class="btn btn-secondary" data-bs-dismiss="modal" type="reset">Clear</button></span></button></div>
+                            <div class="col-6"><button type="submit" class="btn btn-success" onclick="getSignatureData()">Save <button id="xbtn4" class="btn btn-secondary" data-bs-dismiss="modal" type="reset">Clear</button></span></button></div>
                         </div>
                         <div class="form-group mb-3 row">
                             <div class="col-sm-2">
@@ -275,6 +296,7 @@
                     </form>
                 </div>
                 <button id="btn1" class="btn btn-lg text-bg-primary text-warning fw-bold text-capitalize" data-bs-toggle="modal" data-bs-target="#SignatureModal1">Click for the next step&nbsp;</button>
+                <button id="btn2" class="btn btn-lg fw-bold text-capitalize text-warning text-bg-success" data-bs-toggle="modal" data-bs-target="#SignatureModal1">Click for the next step&nbsp;</button>
             </div>
         </div>
 
@@ -300,6 +322,10 @@
     </div>
 
 </div>
+<div class="container">
+    <textarea id="textAreaTEST" class="form-control" name="dummyTextArea" dmx-bind:value="canvasDataEncoded"></textarea>
+    <p>A nice paragraph {{canvasDataEncoded}}</p>
+</div>
 
 
 <script src="/PDF/pdfLibSignature.js"></script>

views/success.ejs

@@ -0,0 +1,14 @@
+<!-- Wappler include head-page="layouts/main" fontawesome_5="cdn" bootstrap5="local" is="dmx-app" id="success" appConnect="local" -->
+<meta name="ac:route" content="/success">
+<div class="container wappler-block p-5">
+    <div class="row text-center p-5">
+        <div class="col">
+            <svg xmlns="http://www.w3.org/2000/svg" width="150" height="150" fill="#51c42b" class="bi bi-check-circle-fill" viewBox="0 0 16 16">
+                <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"></path>
+            </svg>
+            <h1 class="mt-4">All Done<br>Thank you</h1>
+            <p class="lead">Thank you for filling out the forms. Your trainer will get with you when its your turn</p>
+            <a class="btn btn-primary" href="/">Return home</a>
+        </div>
+    </div>
+</div>