Initial

public/js/tables.js

@@ -0,0 +1,144 @@
+var colBetrag = {   
+            title: "Betrag", 
+            orderable:false,
+            data: "amount",
+            className:"dt-amount",  
+            render: function ( data, type, row ) {
+                var ret = (Number(data)<0)?'<span style="color:red;">':'<span>';
+                ret += new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(data);
+                ret += '</span>';
+                return ret;
+                } 
+};
+
+var columns = [
+    {
+        title:"",
+        data:'id',
+        className:"dt-id",
+        orderable:false,
+        render: function ( data, type, row ) {
+            if ( type === 'display')
+                return '<a class=""  data-bs-toggle="modal" data-bs-id="'+data+'" data-bs-target="#mymodal"><i class="fa fa-trash"></i></a>';
+        return data;
+        }
+    },
+    {   title: "Datum", 
+        data: "datum", 
+        type: 'int',
+        className:"dt-datum",
+        orderable:true, 
+        render: function ( data, type, row ) {
+            if (type === 'sort'){
+                const [day, month, year] = data.split('.');
+                const date2 = new Date(+year, month - 1, +day);
+                return date2.getTime();
+            }
+            return data;
+            } 
+    },
+    { title: "Empfänger",orderable:false, data: "receiver",className:"dt-receiver" },
+    colBetrag
+  ];
+
+function alert(alertPlaceholder, message, type) {
+    var wrapper = document.createElement('div');
+    wrapper.innerHTML = '<div class="alert alert-' + type + ' alert-dismissible" role="alert">' + message + '<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button></div>';
+    alertPlaceholder.append(wrapper);
+}
+
+function deleteId(id, table) {
+    if (table == "scheduled")
+        cmnd = "deleteScheduled";
+    else
+        cmnd = "deleteBill";
+    $.ajax({
+        type: "POST",
+        url: "/Ajax/"+cmnd+"/"+id,
+        data: {"id" : id}, // serializes the form's elements.
+        success: function(data){
+            var ph = document.getElementById('alertbox');
+            alert(ph,"erfolgreich gelöscht",'success');
+            $('#'+table).DataTable().ajax.reload();
+        },
+        error: function(data){
+            var ph = document.getElementById('alertbox');
+            alert(ph,"Fehler beim löschen",'danger');
+            $('#'+table).DataTable().ajax.reload();
+        }
+    });
+    
+}
+
+function formatDetails ( d ) {
+    details = '';
+    str='';
+    // `d` is the original data object for the row
+    d.details.forEach(function(item){
+        details += '<tr>';
+        details += '<td>'+item.comment+'</td>';        
+        details += '<td class="dt-amount">'+item.description+'</td>';
+        details += '<td class="dt-amount';
+        details += (Number(item.subamount)<0) ? ' text-danger' : ''; 
+        details += '">'+new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(item.subamount);+'</td>';
+        details += '</tr>';
+      });
+    if (typeof d.quelle !== 'undefined'){
+        str ='<table class="tabdet" data-bs-id="'+d.id+'">'+
+        '<tr>'+
+            '<td>Quelle:</td>'+
+            '<td>'+d.quelle+'</td>'+
+        '</tr></table>';
+    }
+    str += '<table class="table table-striped tabdet" width="100%" data-bs-id="'+d.id+'">'+
+        details +
+    '</table>';
+    return str;
+}
+
+//   $('#example').DataTable( {
+//     columns: $.extend( true, columns, [
+//        { title: 'xx' },
+//        null
+//      ] )
+//   } );
+function collapseDetails(element, table){
+    var tr = element.closest('tr');
+    var row = table.row( tr );
+
+    if ( row.child.isShown() ) {
+        // This row is already open - close it
+        row.child.hide();
+        tr.removeClass('shown');
+    }
+    else {
+        // Open this row
+        row.child( formatDetails(row.data()) ).show();
+        tr.addClass('shown');
+    }
+}
+
+function getId(ele, table) {
+    var tr = ele.closest('tr');
+    var row = table.row( tr );
+    return row.data().id;
+}
+
+$(document).ready(function(){
+    var myModal = document.getElementById('mymodal');
+    const modal = new bootstrap.Modal(myModal);
+    $("#modal_ok").click(function (e) {
+        modal.hide();
+        deleteId(myModal.getAttribute('data-bs-id'), myModal.getAttribute('data-bs-table'));
+    });
+    myModal.addEventListener('show.bs.modal', function (event) {
+        var button = event.relatedTarget;
+        table = button.closest('table').id; // table row ID 
+         var id = button.getAttribute('data-bs-id');
+        myModal.setAttribute('data-bs-id',id);
+        myModal.setAttribute('data-bs-table',table);
+        var modalTitle = myModal.querySelector('.modal-title');
+        modalTitle.textContent = 'Lösche Eintrag Nr. ' + id;
+    });
+
+});