UI/UX update - Datastore fixed

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

@@ -107,6 +107,51 @@
             }
           }
         }
+      },
+      "ertPointData": {
+        "db": {},
+        "columns": {
+          "ID": {
+            "db": {
+              "type": "integer",
+              "primary": true,
+              "unique": false,
+              "nullable": false
+            }
+          },
+          "Owner": {
+            "db": {
+              "type": "text",
+              "primary": false,
+              "unique": false,
+              "nullable": true
+            }
+          },
+          "numSection": {
+            "db": {
+              "type": "text",
+              "primary": false,
+              "unique": false,
+              "nullable": true
+            }
+          },
+          "numSectionValue": {
+            "db": {
+              "type": "text",
+              "primary": false,
+              "unique": false,
+              "nullable": true
+            }
+          },
+          "remove": {
+            "db": {
+              "type": "text",
+              "primary": false,
+              "unique": false,
+              "nullable": true
+            }
+          }
+        }
       }
     },
     "views": {}

app/api/qUpsert.json

@@ -0,0 +1,110 @@
+{
+  "meta": {
+    "$_GET": [
+      {
+        "type": "text",
+        "name": "sort"
+      },
+      {
+        "type": "text",
+        "name": "dir"
+      }
+    ],
+    "$_POST": [
+      {
+        "type": "text",
+        "name": "Owner"
+      },
+      {
+        "type": "text",
+        "name": "numSection"
+      },
+      {
+        "type": "text",
+        "name": "numSectionValue"
+      },
+      {
+        "type": "text",
+        "name": "remove"
+      }
+    ]
+  },
+  "exec": {
+    "steps": {
+      "name": "insert",
+      "module": "dbupdater",
+      "action": "insert",
+      "options": {
+        "connection": "DB",
+        "sql": {
+          "type": "insert",
+          "values": [
+            {
+              "table": "ertPointData",
+              "column": "Owner",
+              "type": "text",
+              "value": "{{$_POST.Owner}}"
+            },
+            {
+              "table": "ertPointData",
+              "column": "numSection",
+              "type": "text",
+              "value": "{{$_POST.numSection}}"
+            },
+            {
+              "table": "ertPointData",
+              "column": "numSectionValue",
+              "type": "text",
+              "value": "{{$_POST.numSectionValue}}"
+            },
+            {
+              "table": "ertPointData",
+              "column": "remove",
+              "type": "text",
+              "value": "{{$_POST.remove}}"
+            }
+          ],
+          "table": "ertPointData",
+          "returning": "ID",
+          "query": "insert into `ertPointData` (`Owner`, `numSection`, `numSectionValue`, `remove`) values (?, ?, ?, ?) returning `ID`",
+          "params": [
+            {
+              "name": ":P1",
+              "type": "expression",
+              "value": "{{$_POST.Owner}}",
+              "test": ""
+            },
+            {
+              "name": ":P2",
+              "type": "expression",
+              "value": "{{$_POST.numSection}}",
+              "test": ""
+            },
+            {
+              "name": ":P3",
+              "type": "expression",
+              "value": "{{$_POST.numSectionValue}}",
+              "test": ""
+            },
+            {
+              "name": ":P4",
+              "type": "expression",
+              "value": "{{$_POST.remove}}",
+              "test": ""
+            }
+          ]
+        }
+      },
+      "meta": [
+        {
+          "name": "identity",
+          "type": "text"
+        },
+        {
+          "name": "affected",
+          "type": "number"
+        }
+      ]
+    }
+  }
+}

app/config/routes.json

@@ -15,6 +15,11 @@
       "path": "/observationPage",
       "page": "observationPage",
       "layout": "main"
+    },
+    {
+      "path": "/ERTScoring",
+      "page": "ERTScoring",
+      "layout": "main"
     }
   ]
 }

public/dmxAppConnect/config.js

@@ -1,5 +1,63 @@
 dmx.config({
   "observationPage": {
+    "repeat2": {
+      "meta": [
+        {
+          "type": "number",
+          "name": "ID"
+        },
+        {
+          "type": "text",
+          "name": "db_fullName"
+        },
+        {
+          "type": "text",
+          "name": "db_licenseNumber"
+        },
+        {
+          "type": "text",
+          "name": "db_stateIssue"
+        },
+        {
+          "type": "number",
+          "name": "db_employeeID"
+        },
+        {
+          "type": "text",
+          "name": "owner"
+        }
+      ],
+      "outputType": "array"
+    },
+    "data_view1": {
+      "meta": [
+        {
+          "type": "number",
+          "name": "ID"
+        },
+        {
+          "type": "text",
+          "name": "db_fullName"
+        },
+        {
+          "type": "text",
+          "name": "db_licenseNumber"
+        },
+        {
+          "type": "text",
+          "name": "db_stateIssue"
+        },
+        {
+          "type": "number",
+          "name": "db_employeeID"
+        },
+        {
+          "type": "text",
+          "name": "owner"
+        }
+      ],
+      "outputType": "array"
+    },
     "datastore1": [
       {
         "type": "number",
@@ -8,6 +66,10 @@ dmx.config({
       {
         "type": "number",
         "name": "Points"
+      },
+      {
+        "type": "text",
+        "name": "description"
       }
     ]
   }

public/dmxAppConnect/dmxBootstrap5Offcanvas/dmxBootstrap5Offcanvas.js

@@ -0,0 +1,8 @@
+/*!
+ App Connect Bootstrap 5 Offcanvas
+ Version: 2.0.1
+ (c) 2024 Wappler.io
+ @build 2024-06-19 12:06:49
+ */
+dmx.Component("bs5-offcanvas",{initialData:{visible:!1},attributes:{show:{type:Boolean,default:!1},backdrop:{type:[Boolean,String],default:!0},nokeyboard:{type:Boolean,default:!1},scroll:{type:Boolean,default:!1}},methods:{toggle(){requestAnimationFrame((()=>this._instance.toggle()))},show(){requestAnimationFrame((()=>this._instance.show()))},hide(){requestAnimationFrame((()=>this._instance.hide()))}},events:{show:Event,shown:Event,hide:Event,hidden:Event},init(s){s.addEventListener("show.bs.offcanvas",this.dispatchEvent.bind(this,"show")),s.addEventListener("shown.bs.offcanvas",this.dispatchEvent.bind(this,"shown")),s.addEventListener("hide.bs.offcanvas",this.dispatchEvent.bind(this,"hide")),s.addEventListener("hidden.bs.offcanvas",this.dispatchEvent.bind(this,"hidden")),s.addEventListener("show.bs.offcanvas",(()=>this.set("visible",!0))),s.addEventListener("hidden.bs.offcanvas",(()=>this.set("visible",!1))),s.classList.toggle("show",this.props.show),this.set("visible",this.props.show);let t=this.props.backdrop;"static"!=t&&(t="false"!=t),this._instance=new bootstrap.Offcanvas(s,{backdrop:t,keyboard:!this.props.nokeyboard,scroll:this.props.scroll})},destroy(){this._instance.dispose()},performUpdate(s){s.has("show")&&(this.$node.classList.toggle("show",this.props.show),this.set("visible",this.props.show))}});
+//# sourceMappingURL=dmxBootstrap5Offcanvas.js.map

public/dmxAppConnect/dmxBootstrap5Offcanvas/dmxBootstrap5Offcanvas.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["components/offcanvas.js"],"names":["dmx","Component","initialData","visible","attributes","show","type","Boolean","default","backdrop","String","nokeyboard","scroll","methods","toggle","requestAnimationFrame","this","_instance","hide","events","Event","shown","hidden","init","node","addEventListener","dispatchEvent","bind","set","classList","props","bootstrap","Offcanvas","keyboard","destroy","dispose","performUpdate","updatedProps","has","$node"],"mappings":";;;;;;AAAAA,IAAAC,UAAA,gBAAA,CAEAC,YAAA,CACAC,SAAA,GAGAC,WAAA,CACAC,KAAA,CACAC,KAAAC,QACAC,SAAA,GAGAC,SAAA,CACAH,KAAA,CAAAC,QAAAG,QACAF,SAAA,GAGAG,WAAA,CACAL,KAAAC,QACAC,SAAA,GAGAI,OAAA,CACAN,KAAAC,QACAC,SAAA,IAIAK,QAAA,CACAC,SACAC,uBAAA,IAAAC,KAAAC,UAAAH,UACA,EAEAT,OACAU,uBAAA,IAAAC,KAAAC,UAAAZ,QACA,EAEAa,OACAH,uBAAA,IAAAC,KAAAC,UAAAC,QACA,GAGAC,OAAA,CACAd,KAAAe,MACAC,MAAAD,MACAF,KAAAE,MACAE,OAAAF,OAGAG,KAAAC,GACAA,EAAAC,iBAAA,oBAAAT,KAAAU,cAAAC,KAAAX,KAAA,SACAQ,EAAAC,iBAAA,qBAAAT,KAAAU,cAAAC,KAAAX,KAAA,UACAQ,EAAAC,iBAAA,oBAAAT,KAAAU,cAAAC,KAAAX,KAAA,SACAQ,EAAAC,iBAAA,sBAAAT,KAAAU,cAAAC,KAAAX,KAAA,WAEAQ,EAAAC,iBAAA,qBAAA,IAAAT,KAAAY,IAAA,WAAA,KACAJ,EAAAC,iBAAA,uBAAA,IAAAT,KAAAY,IAAA,WAAA,KAEAJ,EAAAK,UAAAf,OAAA,OAAAE,KAAAc,MAAAzB,MACAW,KAAAY,IAAA,UAAAZ,KAAAc,MAAAzB,MAEA,IAAAI,EAAAO,KAAAc,MAAArB,SACA,UAAAA,IACAA,EAAA,SAAAA,GAGAO,KAAAC,UAAA,IAAAc,UAAAC,UAAAR,EAAA,CACAf,SAAAA,EACAwB,UAAAjB,KAAAc,MAAAnB,WACAC,OAAAI,KAAAc,MAAAlB,QAEA,EAEAsB,UACAlB,KAAAC,UAAAkB,SACA,EAEAC,cAAAC,GACAA,EAAAC,IAAA,UACAtB,KAAAuB,MAAAV,UAAAf,OAAA,OAAAE,KAAAc,MAAAzB,MACAW,KAAAY,IAAA,UAAAZ,KAAAc,MAAAzB,MAEA","file":"dmxBootstrap5Offcanvas.js","sourcesContent":["dmx.Component('bs5-offcanvas', {\r\n\r\n  initialData: {\r\n    visible: false\r\n  },\r\n\r\n  attributes: {\r\n    show: {\r\n      type: Boolean,\r\n      default: false\r\n    },\r\n\r\n    backdrop: {\r\n      type: [Boolean, String],\r\n      default: true\r\n    },\r\n\r\n    nokeyboard: {\r\n      type: Boolean,\r\n      default: false\r\n    },\r\n\r\n    scroll: {\r\n      type: Boolean,\r\n      default: false\r\n    }\r\n  },\r\n\r\n  methods: {\r\n    toggle () {\r\n      requestAnimationFrame(() => this._instance.toggle());\r\n    },\r\n\r\n    show () {\r\n      requestAnimationFrame(() => this._instance.show());\r\n    },\r\n\r\n    hide () {\r\n      requestAnimationFrame(() => this._instance.hide());\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.offcanvas', this.dispatchEvent.bind(this, 'show'));\r\n    node.addEventListener('shown.bs.offcanvas', this.dispatchEvent.bind(this, 'shown'));\r\n    node.addEventListener('hide.bs.offcanvas', this.dispatchEvent.bind(this, 'hide'));\r\n    node.addEventListener('hidden.bs.offcanvas', this.dispatchEvent.bind(this, 'hidden'));\r\n\r\n    node.addEventListener('show.bs.offcanvas', () => this.set('visible', true));\r\n    node.addEventListener('hidden.bs.offcanvas', () => this.set('visible', false));\r\n\r\n    node.classList.toggle('show', this.props.show);\r\n    this.set('visible', this.props.show);\r\n\r\n    let backdrop = this.props.backdrop;\r\n    if (backdrop != 'static') {\r\n      backdrop = backdrop != 'false';\r\n    }\r\n\r\n    this._instance = new bootstrap.Offcanvas(node, {\r\n      backdrop: backdrop,\r\n      keyboard: !this.props.nokeyboard,\r\n      scroll: this.props.scroll\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('show')) {\r\n      this.$node.classList.toggle('show', this.props.show);\r\n      this.set('visible', this.props.show);\r\n    }\r\n  },\r\n\r\n});"]}

public/dmxAppConnect/dmxValidator/dmxValidator.css

@@ -0,0 +1,35 @@
+/* CSS Document */
+
+input.dmxValidator-invalid,
+select.dmxValidator-invalid,
+textarea.dmxValidator-invalid {
+	border-color: #C80000;
+	outline: none;
+	border-style:solid;
+	border-width: 1px;
+}
+input.dmxValidator-invalid:focus,
+select.dmxValidator-invalid:focus,
+textarea.dmxValidator-invalid:focus {
+-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483;
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483;
+}
+
+input.dmxValidator-valid,
+select.dmxValidator-valid,
+textarea.dmxValidator-valid {
+	border-color: #3c763d;
+	outline: none;
+	border-style:solid;
+	border-width: 1px;
+}
+input.dmxValidator-valid:focus,
+select.dmxValidator-valid:focus,
+textarea.dmxValidator-valid:focus {
+-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px #67b168;
+    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px #67b168;
+}
+span.dmxValidator-error {
+	color: #C80000;
+	padding-left: 5px;
+}

views/.wappler_folder.json

@@ -6,5 +6,9 @@
   "observationPage.ejs": {
     "layoutPage": "main",
     "description": "Observation Page for DT"
+  },
+  "ERTScoring.ejs": {
+    "layoutPage": "main",
+    "description": ""
   }
 }

views/DAPage1.ejs

@@ -1,4 +1,4 @@
-<!-- Wappler include head-page="layouts/main" fontawesome_5="cdn" bootstrap5="local" is="dmx-app" id="DAPage1" appConnect="local" components="{dmxDatastore:{},dmxFormatter:{}}" -->
+<!-- Wappler include head-page="layouts/main" fontawesome_5="cdn" bootstrap5="local" is="dmx-app" id="DAPage1" appConnect="local" components="{dmxDatastore:{},dmxFormatter:{},dmxSwiper:{}}" -->
 <dmx-datastore id="datastore1"></dmx-datastore>
 <div class="container">
     <p>A nice paragraph</p>
@@ -12,4 +12,18 @@
         </div>
     </div>
 </div>
+<div is="dmx-swiper" id="swiper1" space-between-md="5" slides-per-view-md="2" space-between-lg="10" slides-per-view-lg="4" slides-per-view-xl="5" space-between-xl="15" grab-cursor="true" mousewheel="true" pagination="bullets" navigation="true">
+    <div class="swiper-slide">
+        <h1>Fancy display heading</h1>
+    </div>
+    <div class="swiper-slide">
+        <h1>Fancy display blah</h1>
+    </div>
+    <div class="swiper-slide">
+        <h1>Fancy display blah blah</h1>
+    </div>
+    <div class="swiper-slide">
+        <h1>Fancy display last blah</h1>
+    </div>
+</div>
 <meta name="ac:route" content="/DAPage1">

views/ERTScoring.ejs

@@ -0,0 +1,5 @@
+<!-- Wappler include head-page="layouts/main" fontawesome_5="cdn" bootstrap5="local" is="dmx-app" id="ERTScoring" appConnect="local" components="{dmxDatastore:{}}" -->
+<meta name="ac:route" content="/ERTScoring">
+<dmx-datastore id="datastore1"></dmx-datastore>
+<dmx-serverconnect id="scQuerySubSections" url="/api/qSubSection"></dmx-serverconnect>
+

views/layouts/main.ejs

@@ -26,6 +26,12 @@
   <script src="/dmxAppConnect/dmxMasonry/dmxMasonry.js" defer></script>
   <script src="/dmxAppConnect/dmxBootstrap5Popovers/dmxBootstrap5Popovers.js" defer></script>
   <script src="/dmxAppConnect/dmxDataTraversal/dmxDataTraversal.js" defer></script>
+  <script src="/dmxAppConnect/dmxSwiper/dmxSwiper.js" defer></script>
+  <link rel="stylesheet" href="/dmxAppConnect/dmxSwiper/swiper.min.css" />
+  <script src="/dmxAppConnect/dmxSwiper/swiper.min.js" defer></script>
+  <link rel="stylesheet" href="/dmxAppConnect/dmxValidator/dmxValidator.css" />
+  <script src="/dmxAppConnect/dmxValidator/dmxValidator.js" defer></script>
+  <script src="/dmxAppConnect/dmxBootstrap5Offcanvas/dmxBootstrap5Offcanvas.js" defer></script>
 </head>
 
 <body is="dmx-app" id="main">
@@ -43,6 +49,7 @@
         <a class="nav-item nav-link" href="#">Edit</a>
         <a class="nav-item nav-link" href="#">About</a>
         <a class="nav-item nav-link" href="/observationPage">Observation</a>
+        <a class="nav-item nav-link" href="#" data-bs-toggle="offcanvas" data-bs-target="#offcanvas1">Settings</a>
       </div>
     </nav>
   </div>

views/observationPage.ejs

@@ -1,12 +1,68 @@
-<!-- Wappler include head-page="layouts/main" fontawesome_5="cdn" bootstrap5="local" is="dmx-app" id="observationPage" appConnect="local" components="{dmxBootstrap5TableGenerator:{},dmxMasonry:{},dmxFormatter:{},dmxBootstrap5Popovers:{},dmxBootstrap5Toasts:{},dmxDataTraversal:{},dmxStateManagement:{},dmxDatastore:{}}" -->
+<!-- Wappler include head-page="layouts/main" fontawesome_5="cdn" bootstrap5="local" is="dmx-app" id="observationPage" appConnect="local" components="{dmxBootstrap5TableGenerator:{},dmxMasonry:{},dmxFormatter:{},dmxBootstrap5Popovers:{},dmxBootstrap5Toasts:{},dmxDataTraversal:{},dmxStateManagement:{},dmxDatastore:{},dmxValidator:{},dmxBootstrap5Offcanvas:{}}" -->
+<dmx-serverconnect id="qDB" url="/api/query"></dmx-serverconnect>
+<div class="offcanvas offcanvas-start" id="offcanvas1" is="dmx-bs5-offcanvas" tabindex="-1">
+    <div class="offcanvas-header">
+        <h5 class="offcanvas-title">Offcanvas title</h5>
+        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+    </div>
+    <div class="offcanvas-body">
+        <div class="container">
+            <div class="form-check">
+                <input class="form-check-input" type="checkbox" value="" id="CKBinput1" name="canvasCBShowHideSectionDetail">
+                <label class="form-check-label" for="CKBinput1">Show Section detail</label>
+            </div>
+        </div>
+        <p>Offcanvas body text goes here.</p>
+    </div>
+</div>
 <dmx-toggle id="toggle1" checked="true"></dmx-toggle>
-<dmx-datastore id="datastore1" dmx-on:updated="toasts1.clear();toasts1.show({message: data[0].numSection+'Updated ', title: 'New Insert Added'})" dmx-on:inserted="toasts1.showSimple({message: data[0].numSection+'Inserted '})"></dmx-datastore>
+<dmx-datastore id="datastore1" dmx-on:updated="toasts1.show({message: 'Record Updated  ', title: 'New Insert Added'})" dmx-on:inserted="toasts1.showSimple({message: 'New Record Inserted '})"></dmx-datastore>
 <div is="dmx-bs5-toasts" id="toasts1"></div>
 <dmx-serverconnect id="scQuerySubSections" url="/api/qSubSection" noload="true" dmx-param:subid="1"></dmx-serverconnect>
 <dmx-serverconnect id="serverconnect1" url="/api/qSection"></dmx-serverconnect>
 <meta name="ac:route" content="/observationPage">
 <dmx-serverconnect id="scQuerySection" url="/api/qSection"></dmx-serverconnect>
 
+<div class="container border-primary border-2 border">
+    <div class="row"></div>
+    <div class="row">
+        <div class="col-3">
+            <p class="text-center"><b>Who you are grading</b></p>
+            <select id="select1" class="form-select" dmx-bind:options="qDB.data.query" optiontext="db_fullName" optionvalue="db_employeeID">
+            </select>
+        </div>
+        <div class="col">
+            <table class="table table-striped table-sm">
+                <thead>
+                    <tr>
+                        <th>DA Name</th>
+                        <th>License No.</th>
+                        <th>Issue State</th>
+                        <th>DA Empl. ID</th>
+                        <th>Driver Trainer</th>
+                    </tr>
+                </thead>
+                <tbody is="dmx-repeat" dmx-generator="bs5table" dmx-bind:repeat="data_view1.data" id="tableRepeat4">
+                    <tr>
+                        <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>
+            <dmx-data-view id="data_view1" dmx-bind:data="qDB.data.query" filter="db_employeeID==select1.value"></dmx-data-view>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col">
+            <button id="btn2" class="btn btn-primary">Print</button>
+        </div>
+        <div class="col"></div>
+        <div class="col"></div>
+    </div>
+</div>
 <div class="container border border-5 rounded border-warning-subtle" id="btnMenu">
     <div class="row" is="dmx-masonry" id="repeat1" dmx-bind:repeat="scQuerySection.data.query">
         <div class="col">
@@ -18,7 +74,7 @@
         </div>
     </div>
 </div>
-<div class="container" dmx-show="toggle1.checked">
+<div class="container border-warning border border-5" dmx-show="offcanvas1.CKBinput1.checked">
 
     <table class="table table-striped table-sm">
         <thead>
@@ -35,7 +91,6 @@
         </tbody>
     </table>
 </div>
-<button id="btn2" class="btn btn-info" dmx-on:click="toggle1.toggle()">Hide/Show</button>
 <div class="container">
 
     <table class="table">
@@ -51,7 +106,7 @@
             <tr>
                 <td>
                     <input id="pointValue" name="section" type="hidden" class="form-control" dmx-bind:value="numSection">
-                    <select id="selPoints" class="form-select" name="sPoints" dmx-on:changed="datastore1.upsert({numSection: pointValue.value, $id: numSection},{numSection: pointValue.value, Points: value})">
+                    <select id="selPoints" class="form-select" name="sPoints" dmx-on:changed="datastore1.upsert({numSection: pointValue.value, $id: numSection, description: txtSection},{numSection: pointValue.value, Points: value, description: txtSection})" dmx-bind:id="numSection">
                         <option value="0">0 points</option>
                         <option value="1">1 point</option>
                         <option value="2">2 points</option>
@@ -60,18 +115,22 @@
                 </td>
                 <td dmx-text="isSection"></td>
                 <td dmx-text="numSection"></td>
-                <td dmx-text="txtSection"></td>
+                <td dmx-text="txtSection" dmx-class:bg-warning="txtSection.startsWith('*')"></td>
             </tr>
         </tbody>
     </table>
 </div>
+<header>
+    <h3 id="scoreHeader" dmx-show="!datastore1.data.hasItems()">No Score shown yet.</h3>
+</header>
 <div class="container" id="DS">
-    <table class="table">
+    <table class="table table-striped">
         <thead>
             <tr>
                 <th>$id</th>
                 <th>Num section</th>
                 <th>Points</th>
+                <th>Description</th>
             </tr>
         </thead>
         <tbody is="dmx-repeat" dmx-generator="bs5table" dmx-bind:repeat="datastore1.data" id="tableRepeat3">
@@ -79,6 +138,7 @@
                 <td dmx-text="$id"></td>
                 <td dmx-text="numSection"></td>
                 <td dmx-text="Points"></td>
+                <td dmx-text="description"></td>
             </tr>
         </tbody>
     </table>