Modal popup

.wappler/project.json

@@ -38,8 +38,8 @@
       "NodeImageType": "slim",
       "webLoggingMaxFiles": "5",
       "webLoggingMaxFileSize": "10m",
-      "databaseLoggingMaxFiles": "5",
+      "dockerTimezone": "Etc/UTC",
-      "databaseLoggingMaxFileSize": "10m"
+      "databaseConnectionType": "none"
     }
   ],
   "activeTarget": "Development",

app/config/routes.json

@@ -5,6 +5,11 @@
       "page": "index",
       "routeType": "page",
       "layout": "main"
+    },
+    {
+      "path": "/DAPage1",
+      "page": "DAPage1",
+      "layout": "main"
     }
   ]
 }

app/sockets/connect.json

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

app/sockets/disconnect.json

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

public/dmxAppConnect/config.js

@@ -0,0 +1,26 @@
+dmx.config({
+  "main": {
+    "datastore1": [
+      {
+        "type": "boolean",
+        "name": "dirty"
+      }
+    ]
+  },
+  "index": {
+    "datastore1": [
+      {
+        "type": "text",
+        "name": "da_fullName"
+      },
+      {
+        "type": "text",
+        "name": "da_driverLicense"
+      },
+      {
+        "type": "text",
+        "name": "da_driverLicenseState"
+      }
+    ]
+  }
+});

public/dmxAppConnect/dmxBootstrap5Modal/dmxBootstrap5Modal.js

@@ -0,0 +1,8 @@
+/*!
+ App Connect Bootstrap 5 Modal
+ Version: 2.0.1
+ (c) 2024 Wappler.io
+ @build 2024-06-19 11:47:11
+ */
+dmx.Component("bs5-modal",{initialData:{visible:!1},attributes:{nobackdrop:{type:Boolean,default:!1},nocloseonclick:{type:Boolean,default:!1},nokeyboard:{type:Boolean,default:!1},nofocus:{type:Boolean,default:!1},show:{type:Boolean,default:!1}},methods:{toggle(){this._instance.toggle()},show(){this._instance.show()},hide(){this._instance.hide()},update(){this._instance.handleUpdate()}},events:{show:Event,shown:Event,hide:Event,hidden:Event},init(s){s.addEventListener("show.bs.modal",this.dispatchEvent.bind(this,"show")),s.addEventListener("shown.bs.modal",this.dispatchEvent.bind(this,"shown")),s.addEventListener("hide.bs.modal",this.dispatchEvent.bind(this,"hide")),s.addEventListener("hidden.bs.modal",this.dispatchEvent.bind(this,"hidden")),s.addEventListener("show.bs.modal",(()=>{this.set("visible",!0)})),s.addEventListener("hidden.bs.modal",(()=>{this.set("visible",!1)})),this._instance=new bootstrap.Modal(s,{backdrop:!this.props.nobackdrop&&this.props.nocloseonclick?"static":!this.props.nobackdrop,keyboard:!this.props.nokeyboard,focus:!this.props.nofocus}),this.props.show&&requestAnimationFrame((()=>{this._instance.show(),this.set("visible",!0)}))},destroy(){this._instance.dispose()},performUpdate(s){(s.has("nobackdrop")||s.has("nocloseonclick")||s.has("nokeyboard")||s.has("nofocus"))&&(this._instance.dispose(),this._instance=new bootstrap.Modal(this.$node,{backdrop:!this.props.nobackdrop&&this.props.nocloseonclick?"static":!this.props.nobackdrop,keyboard:!this.props.nokeyboard,focus:!this.props.nofocus})),s.has("show")&&this._instance[this.props.show?"show":"hide"]()}});
+//# sourceMappingURL=dmxBootstrap5Modal.js.map

public/dmxAppConnect/dmxBootstrap5Modal/dmxBootstrap5Modal.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["components/modal.js"],"names":["dmx","Component","initialData","visible","attributes","nobackdrop","type","Boolean","default","nocloseonclick","nokeyboard","nofocus","show","methods","toggle","this","_instance","hide","update","handleUpdate","events","Event","shown","hidden","init","node","addEventListener","dispatchEvent","bind","set","bootstrap","Modal","backdrop","props","keyboard","focus","requestAnimationFrame","destroy","dispose","performUpdate","updatedProps","has","$node"],"mappings":";;;;;;AAAAA,IAAAC,UAAA,YAAA,CAEAC,YAAA,CACAC,SAAA,GAGAC,WAAA,CACAC,WAAA,CACAC,KAAAC,QACAC,SAAA,GAGAC,eAAA,CACAH,KAAAC,QACAC,SAAA,GAGAE,WAAA,CACAJ,KAAAC,QACAC,SAAA,GAGAG,QAAA,CACAL,KAAAC,QACAC,SAAA,GAGAI,KAAA,CACAN,KAAAC,QACAC,SAAA,IAIAK,QAAA,CACAC,SACAC,KAAAC,UAAAF,QACA,EAEAF,OACAG,KAAAC,UAAAJ,MACA,EAEAK,OACAF,KAAAC,UAAAC,MACA,EAEAC,SACAH,KAAAC,UAAAG,cACA,GAGAC,OAAA,CACAR,KAAAS,MACAC,MAAAD,MACAJ,KAAAI,MACAE,OAAAF,OAGAG,KAAAC,GACAA,EAAAC,iBAAA,gBAAAX,KAAAY,cAAAC,KAAAb,KAAA,SACAU,EAAAC,iBAAA,iBAAAX,KAAAY,cAAAC,KAAAb,KAAA,UACAU,EAAAC,iBAAA,gBAAAX,KAAAY,cAAAC,KAAAb,KAAA,SACAU,EAAAC,iBAAA,kBAAAX,KAAAY,cAAAC,KAAAb,KAAA,WAEAU,EAAAC,iBAAA,iBAAA,KAAAX,KAAAc,IAAA,WAAA,EAAA,IACAJ,EAAAC,iBAAA,mBAAA,KAAAX,KAAAc,IAAA,WAAA,EAAA,IAEAd,KAAAC,UAAA,IAAAc,UAAAC,MAAAN,EAAA,CACAO,UAAAjB,KAAAkB,MAAA5B,YAAAU,KAAAkB,MAAAxB,eAAA,UAAAM,KAAAkB,MAAA5B,WACA6B,UAAAnB,KAAAkB,MAAAvB,WACAyB,OAAApB,KAAAkB,MAAAtB,UAGAI,KAAAkB,MAAArB,MACAwB,uBAAA,KACArB,KAAAC,UAAAJ,OACAG,KAAAc,IAAA,WAAA,EAAA,GAGA,EAEAQ,UACAtB,KAAAC,UAAAsB,SACA,EAEAC,cAAAC,IACAA,EAAAC,IAAA,eAAAD,EAAAC,IAAA,mBAAAD,EAAAC,IAAA,eAAAD,EAAAC,IAAA,cACA1B,KAAAC,UAAAsB,UACAvB,KAAAC,UAAA,IAAAc,UAAAC,MAAAhB,KAAA2B,MAAA,CACAV,UAAAjB,KAAAkB,MAAA5B,YAAAU,KAAAkB,MAAAxB,eAAA,UAAAM,KAAAkB,MAAA5B,WACA6B,UAAAnB,KAAAkB,MAAAvB,WACAyB,OAAApB,KAAAkB,MAAAtB,WAIA6B,EAAAC,IAAA,SACA1B,KAAAC,UAAAD,KAAAkB,MAAArB,KAAA,OAAA,SAEA","file":"dmxBootstrap5Modal.js","sourcesContent":["dmx.Component('bs5-modal', {\r\n\r\n  initialData: {\r\n    visible: false,\r\n  },\r\n\r\n  attributes: {\r\n    nobackdrop: {\r\n      type: Boolean,\r\n      default: false\r\n    },\r\n\r\n    nocloseonclick: {\r\n      type: Boolean,\r\n      default: false\r\n    },\r\n\r\n    nokeyboard: {\r\n      type: Boolean,\r\n      default: false\r\n    },\r\n\r\n    nofocus: {\r\n      type: Boolean,\r\n      default: false\r\n    },\r\n\r\n    show: {\r\n      type: Boolean,\r\n      default: false\r\n    }\r\n  },\r\n\r\n  methods: {\r\n    toggle () {\r\n      this._instance.toggle();\r\n    },\r\n\r\n    show () {\r\n      this._instance.show();\r\n    },\r\n\r\n    hide () {\r\n      this._instance.hide();\r\n    },\r\n\r\n    update () {\r\n      this._instance.handleUpdate();\r\n    }\r\n  },\r\n\r\n  events: {\r\n    show: Event,\r\n    shown: Event,\r\n    hide: Event,\r\n    hidden: Event\r\n  },\r\n\r\n  init (node) {\r\n    node.addEventListener('show.bs.modal', this.dispatchEvent.bind(this, 'show'));\r\n    node.addEventListener('shown.bs.modal', this.dispatchEvent.bind(this, 'shown'));\r\n    node.addEventListener('hide.bs.modal', this.dispatchEvent.bind(this, 'hide'));\r\n    node.addEventListener('hidden.bs.modal', this.dispatchEvent.bind(this, 'hidden'));\r\n\r\n    node.addEventListener('show.bs.modal', () => { this.set('visible', true); });\r\n    node.addEventListener('hidden.bs.modal', () => { this.set('visible', false); });\r\n\r\n    this._instance = new bootstrap.Modal(node, {\r\n      backdrop: !this.props.nobackdrop && this.props.nocloseonclick ? 'static' : !this.props.nobackdrop,\r\n      keyboard: !this.props.nokeyboard,\r\n      focus: !this.props.nofocus,\r\n    });\r\n\r\n    if (this.props.show) {\r\n      requestAnimationFrame(() => {\r\n        this._instance.show();\r\n        this.set('visible', true);\r\n      });\r\n    }\r\n  },\r\n\r\n  destroy () {\r\n    this._instance.dispose();\r\n  },\r\n\r\n  performUpdate (updatedProps) {\r\n    if (updatedProps.has('nobackdrop') || updatedProps.has('nocloseonclick') || updatedProps.has('nokeyboard') || updatedProps.has('nofocus')) {\r\n      this._instance.dispose();\r\n      this._instance = new bootstrap.Modal(this.$node, {\r\n        backdrop: !this.props.nobackdrop && this.props.nocloseonclick ? 'static' : !this.props.nobackdrop,\r\n        keyboard: !this.props.nokeyboard,\r\n        focus: !this.props.nofocus,\r\n      });\r\n    }\r\n    \r\n    if (updatedProps.has('show')) {\r\n      this._instance[this.props.show ? 'show' : 'hide']();\r\n    }\r\n  },\r\n\r\n});\r\n"]}

public/dmxAppConnect/dmxBootstrap5Navigation/dmxBootstrap5Navigation.js

@@ -0,0 +1,50 @@
+(function() {
+
+  // ignore if routing is enabled
+  if (dmx.routing) return;
+
+  dmx.config.mapping['a.nav-link:not([href^="#"])'] = 'nav-link';
+
+  dmx.Component('nav-link', {
+
+    init (node) {
+      this._stateHandler = this._stateHandler.bind(this);
+      window.addEventListener("popstate", this._stateHandler);
+      window.addEventListener("pushstate", this._stateHandler);
+      window.addEventListener("replacestate", this._stateHandler);
+      window.addEventListener('hashchange', this._stateHandler);
+      this._stateHandler();
+    },
+
+    destroy () {
+      window.removeEventListener("popstate", this._stateHandler);
+      window.removeEventListener("pushstate", this._stateHandler);
+      window.removeEventListener("replacestate", this._stateHandler);
+      window.removeEventListener('hashchange', this._stateHandler);
+    },
+
+    _stateHandler () {
+      const node = this.$node;
+      const active = node.href == window.location.href || node.href == window.location.href.split("?")[0].split("#")[0];
+
+      node.classList.toggle('active', active);
+
+      if (node.classList.contains('dropdown-item')) {
+        const items = node.parentNode.querySelectorAll('.dropdown-item');
+        node.classList.remove('active');
+
+        for (let i = 0; i < items.length; i++) {
+          const match = items[i].href == window.location.href || items[i].href == window.location.href.split("?")[0].split("#")[0];
+          if (match) {
+            items[i].classList.add('active');
+            node.classList.add('active');
+          } else {
+            items[i].classList.remove('active');
+          }
+        }
+      }
+    },
+
+  });
+
+})()

public/dmxAppConnect/dmxDatastore/dmxDatastore.js

@@ -0,0 +1,8 @@
+/*!
+ App Connect Datastore
+ Version: 2.0.0
+ (c) 2024 Wappler.io
+ @build 2024-04-15 17:48:46
+ */
+dmx.Component("datastore",{initialData:{batch:!1,data:[]},attributes:{session:{type:Boolean,default:!1},columns:{type:Object,default:null}},methods:{insert(e){this._insert(e)},update(e,t){this._update(e,t)},upsert(e,t){this._upsert(e,t)},delete(e){this._delete(e)},clear(){this._clear()},get(e){return this._filter(e)},startBatch(){this.set("batch",!0)},endBatch(){this.set("batch",!1),this._updateData()}},events:{inserted:Event,updated:Event,deleted:Event},render:!1,init(){this._records=[],this._lastid=0,this._save=this._save.bind(this),this._updateData=this._updateData.bind(this),this._storageHandler=this._storageHandler.bind(this),window.addEventListener("storage",this._storageHandler),this._read()},destroy(){window.removeEventListener("storage",this._storageHandler)},performUpdate(e){e.has("columns")&&this._updateData()},_read(){try{const e=JSON.parse(this._store().getItem("datastore_"+this.name));e&&(e.records&&(this._records=e.records),e.lastid&&(this._lastid=e.lastid),this._updateData())}catch(e){console.warn("Error parsing datastore",e)}},_filter(e){return"number"==typeof e&&(e={$id:e}),this._records.filter((t=>{if(Array.isArray(e)){for(const s=0;s<e.length;s++)for(const i in e[s])if(t[i]===e[s][i])return!0}else for(const s in e)if(t[s]===e[s])return!0;return!1}))},_insert(e){const t={inserted:[],deleted:[]};dmx.debug&&(console.debug("_insert method"),console.time("_insert"+this.name)),this._array(e).forEach((e=>{const s=this._mergeData({$id:++this._lastid},e);this._records.push(s),t.inserted.push(dmx.clone(s))})),dmx.debug&&console.timeEnd("_insert"+this.name),this._save(),this.dispatchEvent("inserted",null,t)},_update(e,t){if(!this._validData(t))return void console.warn("Invalid data!",t);const s={inserted:[],deleted:[]};dmx.debug&&(console.debug("_update method"),console.time("_update"+this.name)),this._filter(e).forEach((e=>{const i=this._mergeData(e,t);dmx.equal(e,i)||(s.deleted.push(dmx.clone(e)),s.inserted.push(dmx.clone(i)),Object.assign(e,i))})),dmx.debug&&console.timeEnd("_update"+this.name),this._save(),this.dispatchEvent("updated",null,s)},_upsert(e,t){this._filter(e).length?this._update(e,t):this._insert(t)},_delete(e){const t={inserted:[],deleted:[]};"number"==typeof e&&(e={$id:e}),dmx.debug&&(console.debug("_delete method"),console.time("_delete"+this.name)),this._records=this._records.filter((s=>{for(const i in e)if(s[i]===e[i])return t.deleted.push(dmx.clone(s)),!1;return!0})),dmx.debug&&console.timeEnd("_delete"+this.name),this._save(),this.dispatchEvent("deleted",null,t)},_clear(){this._records=[],this._lastid=0,this._save()},_validData:e=>"object"==typeof e&&!Array.isArray(e),_mergeData(e,t){dmx.debug&&(console.debug("Merge Data"),console.time("merge"+this.name));const s=Object.assign({},e);for(const i in t){let a=t[i];this._isExpression(a)&&(a=dmx.parse(a,dmx.DataScope(e,this))),s[i]=a}return dmx.debug&&console.timeEnd("merge"+this.name),s},_updateData(){this.data.batch||(this.props.columns&&"object"==typeof this.props.columns?(dmx.debug&&(console.debug("Update data columns"),console.time("update"+this.name)),this.set("data",this._records.map(((e,t)=>{const s=dmx.clone(e),i=dmx.DataScope({$value:e,$index:t,$key:t,...e},this);for(const e in this.props.columns){let t=this.props.columns[e];this._isExpression(t)&&(t=dmx.parse(t,i)),s[e]=t}return s}))),dmx.debug&&console.timeEnd("update"+this.name)):(dmx.debug&&(console.debug("Update data records"),console.time("update"+this.name)),this.set("data",dmx.clone(this._records)),dmx.debug&&console.timeEnd("update"+this.name)))},_save(){this._updateData(),this.delay&&clearTimeout(this.delay),this.delay=setTimeout((()=>{dmx.debug&&(console.debug("Save data to storage"),console.time("store"+this.name));const e=JSON.stringify({records:this._records,lastid:this._lastid});this._store().setItem("datastore_"+this.name,e),dmx.debug&&console.timeEnd("store"+this.name)}))},_isExpression:e=>"string"==typeof e&&e.includes("{{"),_array:e=>Array.isArray(e)?e:[e],_store(){return window[(this.props.session?"session":"local")+"Storage"]},_storageHandler(e){this._read()}});
+//# sourceMappingURL=dmxDatastore.js.map

public/dmxAppConnect/dmxStateManagement/dmxStateManagement.js

@@ -0,0 +1,8 @@
+/*!
+ App Connect State Management
+ Version: 2.0.0
+ (c) 2024 Wappler.io
+ @build 2024-04-15 17:48:46
+ */
+dmx.Component("query-manager",{initialData:{data:{}},methods:{set(e,t){this._setQueryParam(e,t)},remove(e){this._setQueryParam(e)},removeAll(){this._setQueryParam()}},render:!1,init(){this._updateHandler=this._updateHandler.bind(this),window.addEventListener("popstate",this._updateHandler),window.addEventListener("pushstate",this._updateHandler),window.addEventListener("replacestate",this._updateHandler),this._updateHandler()},destroy(){window.removeEventListener("popstate",this._updateHandler),window.removeEventListener("pushstate",this._updateHandler),window.removeEventListener("replacestate",this._updateHandler)},_setQueryParam:function(e,t){let o=!1,a=dmx.clone(this.data.data);if(null==t?null==e?(a={},o=!0):a[e]&&(delete a[e],o=!0):a[e]!=t&&(a[e]=t,o=!0),o){const e=new URL(window.location);e.search=new URLSearchParams(a),window.history.pushState(null,null,e)}},_buildQuery:function(e){const t=Object.keys(e);return t.length?"?"+t.reduce((function(t,o){return t&&(t+="&"),t+=encodeURIComponent(o)+"="+encodeURIComponent(e[o])}),""):""},_parseQuery:function(){return this.search.replace(/^\?/,"").split("&").reduce((function(e,t){const o=t.replace(/\+/g," ").split("=");return o[0]&&(e[decodeURIComponent(o[0])]=decodeURIComponent(o[1]||"")),e}),{})},_updateHandler(){this.search!==window.location.search&&(this.search=window.location.search,this.set("data",this._parseQuery()))}}),dmx.Component("cookie-manager",{initialData(){return this._cookie=document.cookie,{data:this._getCookie()}},methods:{set(e,t,o={}){this._setCookie(e,t,o)},remove(e,t={}){t.expires="1970-01-01T00:00:00Z",this._setCookie(e,"",t)},removeAll(e={}){e.expires="1970-01-01T00:00:00Z",Object.keys(this.data.data).forEach((function(t){this._setCookie(t,"",e)}))}},render:!1,_getCookie(){return this._cookie.split(/;\s*/).reduce((function(e,t){var o=t.indexOf("=");return e[decodeURIComponent(t.substr(0,o))]=decodeURIComponent(t.substr(o+1)),e}),{})},_setCookie:function(e,t,o){if(!e||/^(?:expires|max\-age|path|domain|secure)$/i.test(e))return!1;(o=o||{}).path=o.path||"/";var a=(e=(e=(e=encodeURIComponent(String(e))).replace(/%(23|24|26|2B|5E|60|7C)/g,decodeURIComponent)).replace(/[\(\)]/g,escape))+"="+(t=(t=encodeURIComponent(String(t))).replace(/%(23|24|26|2B|3A|3C|3E|3D|2F|3F|40|5B|5D|5E|60|7B|7D|7C)/g,decodeURIComponent));o.expires&&("number"==typeof o.expires&&(o.expires=Date.now()+864e5*o.expires),a+="; expires="+new Date(o.expires).toUTCString()),o.domain&&(a+="; domain="+o.domain),o.path&&(a+="; path="+o.path),o.secure&&(a+="; secure"),document.cookie=a,this._cookie=document.cookie,this.set("data",this._getCookie())}}),dmx.Component("local-manager",{initialData:{data:{}},methods:{set(e,t){const o=JSON.stringify(t);null!=o?window.localStorage.setItem("dmxState-"+e,o):window.localStorage.removeItem("dmxState-"+e),this._getData()},remove(e){window.localStorage.removeItem("dmxState-"+e),this._getData()},removeAll(){Object.keys(window.localStorage).forEach((function(e){e.startsWith("dmxState-")&&window.localStorage.removeItem(e)})),this._getData()}},render:!1,init(){this._getData()},_getData(){this.set("data",Object.keys(window.localStorage).reduce((function(e,t){if(t.startsWith("dmxState-"))try{e[t.slice(9)]=JSON.parse(window.localStorage.getItem(t))}catch(e){console.warn("Error parsing JSON: "+window.localStorage.getItem(t))}return e}),{}))}}),dmx.Component("session-manager",{initialData:{data:{}},methods:{set(e,t){const o=JSON.stringify(t);null!=o?window.sessionStorage.setItem("dmxState-"+e,o):window.sessionStorage.removeItem("dmxState-"+e),this._getData()},remove(e){window.sessionStorage.removeItem("dmxState-"+e),this._getData()},removeAll(){Object.keys(window.sessionStorage).forEach((function(e){e.startsWith("dmxState-")&&window.sessionStorage.removeItem(e)})),this._getData()}},render:!1,init(e){this._getData()},_getData(){this.set("data",Object.keys(window.sessionStorage).reduce((function(e,t){if(t.startsWith("dmxState-"))try{e[t.slice(9)]=JSON.parse(window.sessionStorage.getItem(t))}catch(e){console.warn("Error parsing JSON: "+window.sessionStorage.getItem(t))}return e}),{}))}});
+//# sourceMappingURL=dmxStateManagement.js.map

public/states.json

@@ -0,0 +1,204 @@
+{
+    "states": [
+        {
+            "name": "Alabama",
+            "abbreviation": "AL"
+        },
+        {
+            "name": "Alaska",
+            "abbreviation": "AK"
+        },
+        {
+            "name": "Arizona",
+            "abbreviation": "AZ"
+        },
+        {
+            "name": "Arkansas",
+            "abbreviation": "AR"
+        },
+        {
+            "name": "California",
+            "abbreviation": "CA"
+        },
+        {
+            "name": "Colorado",
+            "abbreviation": "CO"
+        },
+        {
+            "name": "Connecticut",
+            "abbreviation": "CT"
+        },
+        {
+            "name": "Delaware",
+            "abbreviation": "DE"
+        },
+        {
+            "name": "Florida",
+            "abbreviation": "FL"
+        },
+        {
+            "name": "Georgia",
+            "abbreviation": "GA"
+        },
+        {
+            "name": "Hawaii",
+            "abbreviation": "HI"
+        },
+        {
+            "name": "Idaho",
+            "abbreviation": "ID"
+        },
+        {
+            "name": "Illinois",
+            "abbreviation": "IL"
+        },
+        {
+            "name": "Indiana",
+            "abbreviation": "IN"
+        },
+        {
+            "name": "Iowa",
+            "abbreviation": "IA"
+        },
+        {
+            "name": "Kansas",
+            "abbreviation": "KS"
+        },
+        {
+            "name": "Kentucky",
+            "abbreviation": "KY"
+        },
+        {
+            "name": "Louisiana",
+            "abbreviation": "LA"
+        },
+        {
+            "name": "Maine",
+            "abbreviation": "ME"
+        },
+        {
+            "name": "Maryland",
+            "abbreviation": "MD"
+        },
+        {
+            "name": "Massachusetts",
+            "abbreviation": "MA"
+        },
+        {
+            "name": "Michigan",
+            "abbreviation": "MI"
+        },
+        {
+            "name": "Minnesota",
+            "abbreviation": "MN"
+        },
+        {
+            "name": "Mississippi",
+            "abbreviation": "MS"
+        },
+        {
+            "name": "Missouri",
+            "abbreviation": "MO"
+        },
+        {
+            "name": "Montana",
+            "abbreviation": "MT"
+        },
+        {
+            "name": "Nebraska",
+            "abbreviation": "NE"
+        },
+        {
+            "name": "Nevada",
+            "abbreviation": "NV"
+        },
+        {
+            "name": "New Hampshire",
+            "abbreviation": "NH"
+        },
+        {
+            "name": "New Jersey",
+            "abbreviation": "NJ"
+        },
+        {
+            "name": "New Mexico",
+            "abbreviation": "NM"
+        },
+        {
+            "name": "New York",
+            "abbreviation": "NY"
+        },
+        {
+            "name": "North Carolina",
+            "abbreviation": "NC"
+        },
+        {
+            "name": "North Dakota",
+            "abbreviation": "ND"
+        },
+        {
+            "name": "Ohio",
+            "abbreviation": "OH"
+        },
+        {
+            "name": "Oklahoma",
+            "abbreviation": "OK"
+        },
+        {
+            "name": "Oregon",
+            "abbreviation": "OR"
+        },
+        {
+            "name": "Pennsylvania",
+            "abbreviation": "PA"
+        },
+        {
+            "name": "Rhode Island",
+            "abbreviation": "RI"
+        },
+        {
+            "name": "South Carolina",
+            "abbreviation": "SC"
+        },
+        {
+            "name": "South Dakota",
+            "abbreviation": "SD"
+        },
+        {
+            "name": "Tennessee",
+            "abbreviation": "TN"
+        },
+        {
+            "name": "Texas",
+            "abbreviation": "TX"
+        },
+        {
+            "name": "Utah",
+            "abbreviation": "UT"
+        },
+        {
+            "name": "Vermont",
+            "abbreviation": "VT"
+        },
+        {
+            "name": "Virginia",
+            "abbreviation": "VA"
+        },
+        {
+            "name": "Washington",
+            "abbreviation": "WA"
+        },
+        {
+            "name": "West Virginia",
+            "abbreviation": "WV"
+        },
+        {
+            "name": "Wisconsin",
+            "abbreviation": "WI"
+        },
+        {
+            "name": "Wyoming",
+            "abbreviation": "WY"
+        }
+    ]
+}

views/.wappler_folder.json

@@ -0,0 +1,6 @@
+{
+  "DAPage1.ejs": {
+    "layoutPage": "main",
+    "description": "Initalization page for Delivery Associate"
+  }
+}

views/DAPage1.ejs

@@ -0,0 +1,15 @@
+<!-- Wappler include head-page="layouts/main" fontawesome_5="cdn" bootstrap5="local" is="dmx-app" id="DAPage1" appConnect="local" components="{dmxDatastore:{},dmxFormatter:{}}" -->
+<dmx-datastore id="datastore1"></dmx-datastore>
+<div class="container">
+    <p>A nice paragraph</p>
+    <p>A nice paragraph</p>
+    <p>A nice paragraph</p>
+    <p>A nice paragraph</p>
+    <div id="content">
+        <div id="page1" class="page" dmx-hide="session1.data.isEmpty()">
+        </div>
+        <div id="page2" class="page">
+        </div>
+    </div>
+</div>
+<meta name="ac:route" content="/DAPage1">

views/index.ejs

@@ -1,2 +1,67 @@
-<!-- Wappler include head-page="layouts/main" fontawesome_5="cdn" bootstrap5="local" is="dmx-app" id="index" appConnect="local" -->
+<!-- Wappler include head-page="layouts/main" fontawesome_5="cdn" bootstrap5="local" is="dmx-app" id="index" appConnect="local" components="{dmxBootstrap5Navigation:{},dmxAnimateCSS:{},dmxStateManagement:{},dmxDatastore:{},dmxBootstrap5Modal:{}}" -->
+<dmx-json-datasource id="stateJSON" is="dmx-serverconnect" url="/states.json"></dmx-json-datasource>
+<div class="modal" id="modal1" is="dmx-bs5-modal" tabindex="-1">
+    <div class="modal-dialog" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title">Modal title</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="modal-body">
+                <div class="container">
+                    <form id="form1">
+                        <div class="form-group mb-3 row">
+                            <label for="input1" class="col-sm-2 col-form-label">Full Name</label>
+                            <div class="col-sm-10">
+                                <input type="text" class="form-control" id="input1" name="input1" aria-describedby="input1_help">
+                                <small id="input1_help" class="form-text text-muted">*Enter your full name</small>
+                            </div>
+                        </div>
+                        <div class="form-group mb-3 row">
+                            <label for="input2" class="col-sm-2 col-form-label">License no.</label>
+                            <div class="col-sm-10">
+                                <input type="text" class="form-control" id="input2" name="input2" aria-describedby="input1_help">
+                                <small id="input1_help1" class="form-text text-muted">*Enter your driver license number</small>
+                            </div>
+                        </div>
+                        <div class="form-group mb-3 row">
+                            <label for="input3" class="col-sm-2 col-form-label">License State</label>
+                            <div class="col">
+                                <div class="form-group mb-3">
+                                    <label for="input3" class="form-label">Select</label>
+                                    <select id="input3" class="form-select" dmx-bind:options="stateJSON.data.states" optiontext="name" optionvalue="abbreviation">
+                                        <option value="1">Option One</option>
+                                        <option value="2">Option Two</option>
+                                        <option value="3">Option Three</option>
+                                    </select>
+                                    <small id="select1Help" class="form-text text-muted">Pick the state your License is issued from</small>
+                                </div>
+                            </div>
+                        </div>
+                    </form>
+                </div>
+                <p>Use this for a count or modal footer</p>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+                <button type="button" class="btn btn-primary" dmx-on:click="datastore1.insert()">Save changes</button>
+            </div>
+        </div>
+    </div>
+</div>
+<dmx-datastore id="datastore1"></dmx-datastore>
+<div class="container">
+    <h1 class="text-center">Lets Begin.&nbsp;What is your Role?</h1>
+</div>
+<div class="container">
+    <div class="row">
+        <div class="text-center col-4 offset-1" id="cLeft">
+            <button id="btn1" class="btn text-center lh-lg btn-success" dmx-on:click="modal1.show()">Delivery Associate</button>
+        </div>
+        <div class="text-center offset-2 col-3" id="cRight">
+            <button id="btn2" class="btn lh-lg btn-warning">Driver Trainers</button>
+        </div>
+    </div>
+</div>
+
 <meta name="ac:route" content="/">

views/layouts/main.ejs

@@ -12,12 +12,43 @@
   <link rel="stylesheet" href="/bootstrap/5/css/bootstrap.min.css" />
   <link rel="stylesheet" href="/css/style.css" />
   <script src="/dmxAppConnect/dmxRouting/dmxRouting.js" defer></script>
+  <script src="/dmxAppConnect/dmxBootstrap5Navigation/dmxBootstrap5Navigation.js" defer></script>
+  <link rel="stylesheet" href="/dmxAppConnect/dmxAnimateCSS/animate.min.css" />
+  <script src="/dmxAppConnect/dmxAnimateCSS/dmxAnimateCSS.js" defer></script>
+  <script src="/dmxAppConnect/dmxDatastore/dmxDatastore.js" defer></script>
+  <script src="/dmxAppConnect/dmxStateManagement/dmxStateManagement.js" defer></script>
+  <script src="/dmxAppConnect/dmxFormatter/dmxFormatter.js" defer></script>
+  <script src="/dmxAppConnect/dmxBootstrap5Modal/dmxBootstrap5Modal.js" defer></script>
 </head>
 
 <body is="dmx-app" id="main">
+  <div class="container">
+    <nav class="navbar navbar-expand-lg">
+      <div class="navbar-nav w-100">
+        <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">Command</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>
+        <a class="nav-item nav-link" href="#">File</a>
+        <a class="nav-item nav-link" href="#">Edit</a>
+        <a class="nav-item nav-link" href="#">About</a>
+      </div>
+    </nav>
+  </div>
+  <header>
+
+
+    <h3 class="text-center">ERT Fast Filler</h3>
+  </header>
   <main is="dmx-view" id="content">
     <%- await include(content, locals); %>
   </main>
+  <footer>
+    <p class="text-center d-lg-none d-xl-block">ERT Fast Fill - Developed by Jeff Daniels (DNIJE) / Data only locally saved / Powered by Docker and Node.js</p>
+  </footer>
   <script src="/bootstrap/5/js/bootstrap.bundle.min.js"></script>