redesign for mulituser

change validation concept (client and server)
using entities

public/js/tab_todos.js

@@ -0,0 +1,99 @@
+var todosdata;
+
+function loadToDosData(){
+    document.todos.setMessage("Loading Data");
+    fetch("/getToDosData", { method: "GET",headers: {"X-Requested-With": "XMLHttpRequest"},})
+    .then(response => {
+            let status = response.statusText;
+            if (!response.ok) {
+                throw "HTTP error: " + response.status + "; " + status;
+            } else
+                return response.json();
+    })
+    .then(data => {            
+        if (document.todos.hasRows){
+            document.todos.data.data.splice(0,document.todos.data.data.length);
+            document.todos.hasRows = false;
+        }
+        document.todos.insert({data:data.map(item => [item.id, item.datum, item.receiver,item.amount])});
+        document.todos.update(true);
+    })
+    .catch(err => {
+            document.todos.setMessage(err);
+    });
+}
+function createDtToDos(){
+    document.todos = new simpleDatatables.DataTable("#todos", {
+        searchable: true,
+        paging: true,
+        classes: {
+            active: "active",
+            disabled: "disabled",
+            selector: "form-select",
+            paginationList: "pagination",
+            paginationListItem: "page-item",
+            paginationListItemLink: "page-link",
+            table: "table table-striped table-sm",
+        },
+        data: {
+            headings: ["","Datum","Empfänger","Betrag"],
+            data: todosdata,
+        },
+        rowRender: (row, tr, _index) => {
+            tr.childNodes[1].attributes.onclick = `location.href='editBill/${row.cells[0].data}'`;
+        },
+
+        columns: [
+            {
+                select:0,
+         //       render: (data, _cell, _dataIndex, _cellIndex) => { return `<a data-bs-toggle="modal" role="button" data-bs-id="'${data}'" data-bs-target="#mymodal" ><i class="fa-solid fa-trash"></a>` },
+                cellClass: "datatable-icon",
+                type: "number",
+                hidden:true,
+            },{
+                select:1,
+                type: 'date',
+                format: 'dd.mm.yyyy',
+                cellClass:"dt-datum",
+                sortable: true, 
+                sort: "desc",
+            },{
+                select:2,
+                type: 'string',
+                cellClass:"dt-receiver",
+            },{
+                select:3,
+                type: 'number',
+                headerClass: "dt-amount",
+                cellClass:"dt-amount",
+                render: renderAmount
+            }
+        ],           
+        template: (options, dom) => `<div class='${options.classes.top}'>
+                <div class='float-start'>
+                    <a class="btn btn-sm btn-secondary" data-bs-toggle="modal" role="button" data-bs-target="#mySnycModal" onclick="syncScheduled(this)">Synch</a>
+                </div>
+                <div class='${options.classes.search} float-end'>
+                    <input class='${options.classes.input}' placeholder='Search' type='search' title='${options.labels.searchTitle}'${dom.id ? ` aria-controls="${dom.id}"` : ""}>
+                </div>
+                </div>
+                <div class='${options.classes.container}'${options.scrollY.length ? ` style='height: ${options.scrollY}; overflow-Y: auto;'` : ""}></div>
+                <div class='${options.classes.bottom}'>
+                <div class='float-start'>
+                <div class='datatable-dropdown'>
+                    <label>
+                        <select class='${options.classes.selector}'></select>
+                    </label>
+                </div>
+                </div>
+                <div class='float-end'>
+                <nav class='${options.classes.pagination}'></nav>
+                </div>
+            </div>`
+    });
+    loadToDosData();
+}
+
+document.addEventListener("DOMContentLoaded", function(event) {
+    createDtToDos();
+});