Initial

public/js/accounts.js

@@ -0,0 +1,67 @@
+function newCat(){
+    $('#editor').removeClass('d-none');
+    $("#id").val(0);
+    tree = document.getElementById('tree');
+    editor = document.getElementById("editor");
+    var elementTop = $('#editor').offset().top;
+    var elementBottom = elementTop + $(this).outerHeight();
+
+    var viewportTop = $(window).scrollTop();
+    var viewportBottom = viewportTop + $(window).height();
+
+    
+    if (!(elementBottom > viewportTop && elementTop < viewportBottom))
+        editor.scrollIntoView( {behavior: "smooth" });
+}
+
+$(function () {
+    $('.tree li:has(ul)').addClass('parent_li').find(' > span');
+    $('.tree li.parent_li > span').on('click', function (e) {
+        var children = $(this).parent('li.parent_li').find(' > ul > li');
+        if (children.is(":visible")) {
+            children.hide('fast');
+          //  $(this).find(' > i').addClass('icon-plus-sign').removeClass('icon-minus-sign');
+        } else {
+            children.show('fast');
+          //  $(this).find(' > i').addClass('icon-minus-sign').removeClass('icon-plus-sign');
+        }
+        e.stopPropagation();
+    });
+    $("span").on('click', function(e){
+        $('#editor').removeClass('d-none');
+        bookable = ($(this).attr('data-bookable') == 0)?false:true;
+        lkz = ($(this).attr('data-lkz') == 0)?false:true;
+        type = $(this).attr('data-type');
+        pid = $(this).attr('data-pid');
+        id = $(this).attr('data-id');
+        description = $(this).attr('data-description');
+        typeAccount = (type === "account") ? true : false;
+        typeInput = (type === "input") ? true : false;
+        typeOutput = (type === "output") ? true : false;
+        $('#bookable').prop('checked', bookable);
+        $('#typeInput').prop('checked', typeInput);
+        $('#typeOutput').prop('checked', typeOutput);
+        $('#typeAccount').prop('checked', typeAccount);
+        $('#lkz').prop('checked', lkz);
+        $("#parent").val(pid).change();
+        $("#id").val(id);
+        $("#description").val(description).change();
+        tree = document.getElementById('tree');
+        editor = document.getElementById("editor");
+        var elementTop = $('#editor').offset().top;
+        var elementBottom = elementTop + $(this).outerHeight();
+    
+        var viewportTop = $(window).scrollTop();
+        var viewportBottom = viewportTop + $(window).height();
+    
+        
+        if (!(elementBottom > viewportTop && elementTop < viewportBottom))
+            editor.scrollIntoView( {behavior: "smooth" });
+        //$('#parent').prop('selected', pid);
+
+    //     title: "Edit Account",
+    //     placement: 'bottom',
+    //     html: true, 
+    //     content: $('[data-name="popover-content"]')
+    });
+});

public/js/activities.js

@@ -0,0 +1,35 @@
+var datatable;
+var colomnspez = columns;
+colomnspez.splice(3, 0, { title: "Quelle",orderable:false, data: "source",className:"dt-source" });
+
+$(document).ready(function(){
+    datatable = $('#bookings').DataTable({
+        paging: false,
+        searching:true,
+        scrollX:false,
+        info:false, 
+        order: [[ 1, 'desc' ]],
+        "processing": true,
+        ajax: {
+            type : 'POST',
+            url : '/Ajax/getTabelData',
+            data : function(d){
+                d.datum_start = $('#datepickers').val();
+                d.datum_ende = $('#datepickere').val();
+                d.source = $('#source').val();
+            },
+            dataSrc:''},
+        dom: '<"toolbar">frt',
+        "createdRow": function ( row, data, index ) {
+            if(data.validate == "1"){
+               $(row).addClass('bg-warning');
+            }
+        },
+        columns: colomnspez,
+    });
+
+    $("div.toolbar").html('<a class="btn-sm btn-secondary mr-2" href="/Home/newBill" role="button">Neue Rechnung</a><a class="btn-sm btn-secondary" href="/Home/newTransfer" role="button">Neuer Transfer</a>');
+    $('#bookings tbody').on('click', 'td.dt-receiver', function () {collapseDetails($(this), datatable);} );
+    $('#bookings tbody').on('click', 'td.dt-datum', function () {location.href = '/Home/editBill/'+getId($(this),datatable);});
+    $('#bookings tbody').on('click', 'table.tabdet', function () {location.href = '/Home/editBill/'+$(this).attr('data-bs-id');});
+});

public/js/billing.js

@@ -0,0 +1,79 @@
+$(function() {
+     $('.parent').change(function() {
+        var $subs = $(this).parent().parent().children( ".sub" ).children();
+        $subs.children().remove().end();
+        var $output = '';
+        $liste = subsdata[$(this).val()];
+        $sort = Object.entries($liste).sort((a,b) => (a[1]>b[1])?1:(b[1]>a[1])?-1:0);
+        $.each($sort, function(key, value) {
+            $output += '<option value="'+value[0]+'">' + value[1] + '</option>';
+        });
+        $subs.append($output);
+    });
+    $('#multi').change(function() {
+        if($(this).is(":checked")) {
+            $('.single').addClass('d-none');
+            $('.multi').removeClass('d-none');
+           return;
+        }
+        $('.single').removeClass('d-none');
+        $('.multi').addClass('d-none');
+        //'unchecked' event code
+     }).change();
+     $('.dt-amount, .dt-subamount').change(function() {
+        var temp = convertInput( $(this).val());
+        $(this).val( convertOutput(temp));
+        if ($('#multi').is(":checked")) {
+            recalcOpenAmount();
+        }
+     }).change();
+     
+});
+
+function addLine(){
+    $('#linecont > div').each(function () {
+        if ($(this).hasClass("d-none")){
+            $(this).removeClass("d-none");
+            return false;
+        }
+    });
+}
+
+function convertInput( number )
+{
+    var zahl = number.replace( /\,/g, "." );
+    var czahl = eval( zahl );
+    return czahl;
+}
+
+function convertOutput( number )
+{
+    if ( typeof number !== 'undefined' )
+    {
+      var string = number.toFixed( 2 );
+      return string.replace( /\,/g, "." );
+    }
+    else
+        return "";
+}
+
+function recalcOpenAmount(){
+    var summe = 0.0;
+    $('.dt-subamount').each(function () {
+        b = $(this).val();
+        b = convertInput(b);
+        if (typeof b !== 'undefined'){
+            b = $(this).hasClass("text-danger") ? b*(-1) : b;
+            summe = summe +b;
+        }
+ //       summe = summe + convertInput($(this).val());
+    });
+    
+    $('#openamount').val(Math.round( ($('#total_in').val() - $('#total_out').val() - summe) * 100 ) / 100);
+}
+
+// $('form').submit(function () {
+//     alert("disable elements");
+//     $( ".d-none" ).prop( "disabled", true );
+//     return true;
+// });

public/js/demo/chart-area-demo.js

@@ -0,0 +1,118 @@
+// Set new default font family and font color to mimic Bootstrap's default styling
+Chart.defaults.global.defaultFontFamily = 'Nunito', '-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif';
+Chart.defaults.global.defaultFontColor = '#858796';
+
+function number_format(number, decimals, dec_point, thousands_sep) {
+  // *     example: number_format(1234.56, 2, ',', ' ');
+  // *     return: '1 234,56'
+  number = (number + '').replace(',', '').replace(' ', '');
+  var n = !isFinite(+number) ? 0 : +number,
+    prec = !isFinite(+decimals) ? 0 : Math.abs(decimals),
+    sep = (typeof thousands_sep === 'undefined') ? ',' : thousands_sep,
+    dec = (typeof dec_point === 'undefined') ? '.' : dec_point,
+    s = '',
+    toFixedFix = function(n, prec) {
+      var k = Math.pow(10, prec);
+      return '' + Math.round(n * k) / k;
+    };
+  // Fix for IE parseFloat(0.55).toFixed(0) = 0;
+  s = (prec ? toFixedFix(n, prec) : '' + Math.round(n)).split('.');
+  if (s[0].length > 3) {
+    s[0] = s[0].replace(/\B(?=(?:\d{3})+(?!\d))/g, sep);
+  }
+  if ((s[1] || '').length < prec) {
+    s[1] = s[1] || '';
+    s[1] += new Array(prec - s[1].length + 1).join('0');
+  }
+  return s.join(dec);
+}
+
+// Area Chart Example
+var ctx = document.getElementById("myAreaChart");
+var myLineChart = new Chart(ctx, {
+  type: 'line',
+  data: {
+    labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
+    datasets: [{
+      label: "Earnings",
+      lineTension: 0.3,
+      backgroundColor: "rgba(78, 115, 223, 0.05)",
+      borderColor: "rgba(78, 115, 223, 1)",
+      pointRadius: 3,
+      pointBackgroundColor: "rgba(78, 115, 223, 1)",
+      pointBorderColor: "rgba(78, 115, 223, 1)",
+      pointHoverRadius: 3,
+      pointHoverBackgroundColor: "rgba(78, 115, 223, 1)",
+      pointHoverBorderColor: "rgba(78, 115, 223, 1)",
+      pointHitRadius: 10,
+      pointBorderWidth: 2,
+      data: [0, 10000, 5000, 15000, 10000, 20000, 15000, 25000, 20000, 30000, 25000, 40000],
+    }],
+  },
+  options: {
+    maintainAspectRatio: false,
+    layout: {
+      padding: {
+        left: 10,
+        right: 25,
+        top: 25,
+        bottom: 0
+      }
+    },
+    scales: {
+      xAxes: [{
+        time: {
+          unit: 'date'
+        },
+        gridLines: {
+          display: false,
+          drawBorder: false
+        },
+        ticks: {
+          maxTicksLimit: 7
+        }
+      }],
+      yAxes: [{
+        ticks: {
+          maxTicksLimit: 5,
+          padding: 10,
+          // Include a dollar sign in the ticks
+          callback: function(value, index, values) {
+            return '$' + number_format(value);
+          }
+        },
+        gridLines: {
+          color: "rgb(234, 236, 244)",
+          zeroLineColor: "rgb(234, 236, 244)",
+          drawBorder: false,
+          borderDash: [2],
+          zeroLineBorderDash: [2]
+        }
+      }],
+    },
+    legend: {
+      display: false
+    },
+    tooltips: {
+      backgroundColor: "rgb(255,255,255)",
+      bodyFontColor: "#858796",
+      titleMarginBottom: 10,
+      titleFontColor: '#6e707e',
+      titleFontSize: 14,
+      borderColor: '#dddfeb',
+      borderWidth: 1,
+      xPadding: 15,
+      yPadding: 15,
+      displayColors: false,
+      intersect: false,
+      mode: 'index',
+      caretPadding: 10,
+      callbacks: {
+        label: function(tooltipItem, chart) {
+          var datasetLabel = chart.datasets[tooltipItem.datasetIndex].label || '';
+          return datasetLabel + ': $' + number_format(tooltipItem.yLabel);
+        }
+      }
+    }
+  }
+});

public/js/demo/chart-bar-demo.js

@@ -0,0 +1,111 @@
+// Set new default font family and font color to mimic Bootstrap's default styling
+Chart.defaults.global.defaultFontFamily = 'Nunito', '-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif';
+Chart.defaults.global.defaultFontColor = '#858796';
+
+function number_format(number, decimals, dec_point, thousands_sep) {
+  // *     example: number_format(1234.56, 2, ',', ' ');
+  // *     return: '1 234,56'
+  number = (number + '').replace(',', '').replace(' ', '');
+  var n = !isFinite(+number) ? 0 : +number,
+    prec = !isFinite(+decimals) ? 0 : Math.abs(decimals),
+    sep = (typeof thousands_sep === 'undefined') ? ',' : thousands_sep,
+    dec = (typeof dec_point === 'undefined') ? '.' : dec_point,
+    s = '',
+    toFixedFix = function(n, prec) {
+      var k = Math.pow(10, prec);
+      return '' + Math.round(n * k) / k;
+    };
+  // Fix for IE parseFloat(0.55).toFixed(0) = 0;
+  s = (prec ? toFixedFix(n, prec) : '' + Math.round(n)).split('.');
+  if (s[0].length > 3) {
+    s[0] = s[0].replace(/\B(?=(?:\d{3})+(?!\d))/g, sep);
+  }
+  if ((s[1] || '').length < prec) {
+    s[1] = s[1] || '';
+    s[1] += new Array(prec - s[1].length + 1).join('0');
+  }
+  return s.join(dec);
+}
+
+// Bar Chart Example
+var ctx = document.getElementById("myBarChart");
+var myBarChart = new Chart(ctx, {
+  type: 'bar',
+  data: {
+    labels: ["January", "February", "March", "April", "May", "June"],
+    datasets: [{
+      label: "Revenue",
+      backgroundColor: "#4e73df",
+      hoverBackgroundColor: "#2e59d9",
+      borderColor: "#4e73df",
+      data: [4215, 5312, 6251, 7841, 9821, 14984],
+    }],
+  },
+  options: {
+    maintainAspectRatio: false,
+    layout: {
+      padding: {
+        left: 10,
+        right: 25,
+        top: 25,
+        bottom: 0
+      }
+    },
+    scales: {
+      xAxes: [{
+        time: {
+          unit: 'month'
+        },
+        gridLines: {
+          display: false,
+          drawBorder: false
+        },
+        ticks: {
+          maxTicksLimit: 6
+        },
+        maxBarThickness: 25,
+      }],
+      yAxes: [{
+        ticks: {
+          min: 0,
+          max: 15000,
+          maxTicksLimit: 5,
+          padding: 10,
+          // Include a dollar sign in the ticks
+          callback: function(value, index, values) {
+            return '$' + number_format(value);
+          }
+        },
+        gridLines: {
+          color: "rgb(234, 236, 244)",
+          zeroLineColor: "rgb(234, 236, 244)",
+          drawBorder: false,
+          borderDash: [2],
+          zeroLineBorderDash: [2]
+        }
+      }],
+    },
+    legend: {
+      display: false
+    },
+    tooltips: {
+      titleMarginBottom: 10,
+      titleFontColor: '#6e707e',
+      titleFontSize: 14,
+      backgroundColor: "rgb(255,255,255)",
+      bodyFontColor: "#858796",
+      borderColor: '#dddfeb',
+      borderWidth: 1,
+      xPadding: 15,
+      yPadding: 15,
+      displayColors: false,
+      caretPadding: 10,
+      callbacks: {
+        label: function(tooltipItem, chart) {
+          var datasetLabel = chart.datasets[tooltipItem.datasetIndex].label || '';
+          return datasetLabel + ': $' + number_format(tooltipItem.yLabel);
+        }
+      }
+    },
+  }
+});

public/js/demo/chart-pie-demo.js

@@ -0,0 +1,35 @@
+// Set new default font family and font color to mimic Bootstrap's default styling
+Chart.defaults.global.defaultFontFamily = 'Nunito', '-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif';
+Chart.defaults.global.defaultFontColor = '#858796';
+
+// Pie Chart Example
+var ctx = document.getElementById("myPieChart");
+var myPieChart = new Chart(ctx, {
+  type: 'doughnut',
+  data: {
+    labels: ["Direct", "Referral", "Social"],
+    datasets: [{
+      data: [55, 30, 15],
+      backgroundColor: ['#4e73df', '#1cc88a', '#36b9cc'],
+      hoverBackgroundColor: ['#2e59d9', '#17a673', '#2c9faf'],
+      hoverBorderColor: "rgba(234, 236, 244, 1)",
+    }],
+  },
+  options: {
+    maintainAspectRatio: false,
+    tooltips: {
+      backgroundColor: "rgb(255,255,255)",
+      bodyFontColor: "#858796",
+      borderColor: '#dddfeb',
+      borderWidth: 1,
+      xPadding: 15,
+      yPadding: 15,
+      displayColors: false,
+      caretPadding: 10,
+    },
+    legend: {
+      display: false
+    },
+    cutoutPercentage: 80,
+  },
+});

public/js/demo/datatables-demo.js

@@ -0,0 +1,4 @@
+// Call the dataTables jQuery plugin
+$(document).ready(function() {
+  $('#dataTable').DataTable();
+});

public/js/sb-admin-2.js

@@ -0,0 +1,56 @@
+(function($) {
+  "use strict"; // Start of use strict
+
+  // Toggle the side navigation
+  $("#sidebarToggle, #sidebarToggleTop").on('click', function(e) {
+    $("body").toggleClass("sidebar-toggled");
+    $(".sidebar").toggleClass("toggled");
+    if ($(".sidebar").hasClass("toggled")) {
+      $('.sidebar .collapse').collapse('hide');
+    };
+  });
+
+  // Close any open menu accordions when window is resized below 768px
+  $(window).resize(function() {
+    if ($(window).width() < 768) {
+      $('.sidebar .collapse').collapse('hide');
+    };
+    
+    // Toggle the side navigation when window is resized below 480px
+    if ($(window).width() < 480 && !$(".sidebar").hasClass("toggled")) {
+      $("body").addClass("sidebar-toggled");
+      $(".sidebar").addClass("toggled");
+      $('.sidebar .collapse').collapse('hide');
+    };
+  });
+
+  // Prevent the content wrapper from scrolling when the fixed side navigation hovered over
+  $('body.fixed-nav .sidebar').on('mousewheel DOMMouseScroll wheel', function(e) {
+    if ($(window).width() > 768) {
+      var e0 = e.originalEvent,
+        delta = e0.wheelDelta || -e0.detail;
+      this.scrollTop += (delta < 0 ? 1 : -1) * 30;
+      e.preventDefault();
+    }
+  });
+
+  // Scroll to top button appear
+  $(document).on('scroll', function() {
+    var scrollDistance = $(this).scrollTop();
+    if (scrollDistance > 100) {
+      $('.scroll-to-top').fadeIn();
+    } else {
+      $('.scroll-to-top').fadeOut();
+    }
+  });
+
+  // Smooth scrolling using jQuery easing
+  $(document).on('click', 'a.scroll-to-top', function(e) {
+    var $anchor = $(this);
+    $('html, body').stop().animate({
+      scrollTop: ($($anchor.attr('href')).offset().top)
+    }, 1000, 'easeInOutExpo');
+    e.preventDefault();
+  });
+
+})(jQuery); // End of use strict

public/js/sb-admin-2.min.js

@@ -0,0 +1,7 @@
+/*!
+ * Start Bootstrap - SB Admin 2 v4.1.3 (https://startbootstrap.com/theme/sb-admin-2)
+ * Copyright 2013-2021 Start Bootstrap
+ * Licensed under MIT (https://github.com/StartBootstrap/startbootstrap-sb-admin-2/blob/master/LICENSE)
+ */
+
+!function(l){"use strict";l("#sidebarToggle, #sidebarToggleTop").on("click",function(e){l("body").toggleClass("sidebar-toggled"),l(".sidebar").toggleClass("toggled"),l(".sidebar").hasClass("toggled")&&l(".sidebar .collapse").collapse("hide")}),l(window).resize(function(){l(window).width()<768&&l(".sidebar .collapse").collapse("hide"),l(window).width()<480&&!l(".sidebar").hasClass("toggled")&&(l("body").addClass("sidebar-toggled"),l(".sidebar").addClass("toggled"),l(".sidebar .collapse").collapse("hide"))}),l("body.fixed-nav .sidebar").on("mousewheel DOMMouseScroll wheel",function(e){var o;768<l(window).width()&&(o=(o=e.originalEvent).wheelDelta||-o.detail,this.scrollTop+=30*(o<0?1:-1),e.preventDefault())}),l(document).on("scroll",function(){100<l(this).scrollTop()?l(".scroll-to-top").fadeIn():l(".scroll-to-top").fadeOut()}),l(document).on("click","a.scroll-to-top",function(e){var o=l(this);l("html, body").stop().animate({scrollTop:l(o.attr("href")).offset().top},1e3,"easeInOutExpo"),e.preventDefault()})}(jQuery);

public/js/scheduled.js

@@ -0,0 +1,21 @@
+var datatable;
+var columnspez = columns;
+columnspez.splice(3, 0, { title: "Quelle",orderable:false, data: "source",className:"dt-source" });
+
+$(document).ready(function(){
+    datatable = $('#scheduled').DataTable({
+        paging: false,
+        searching:true,
+        scrollX:false,
+        info:false, 
+        order: [[ 1, 'asc' ]],
+        ajax: {url: '/Ajax/getScheduledData',dataSrc:''},
+        dom: '<"toolbar">frt',
+        columns: columnspez
+    });
+    $("div.toolbar").html('<a class="btn-sm btn-secondary" href="/Home/newScheduled" role="button">Neuer Eintrag</a>');
+
+    $('#scheduled tbody').on('click', 'td.dt-receiver', function () {collapseDetails($(this), datatable);} );
+    $('#scheduled tbody').on('click', 'td.dt-datum', function () {location.href = '/Home/editScheduled/'+getId($(this),datatable);});
+    $('#scheduled tbody').on('click', 'table.tabdet', function () {location.href = '/Home/editScheduled/'+$(this).attr('data-bs-id');});
+});

public/js/tab_accounts.js

@@ -0,0 +1,15 @@
+var accounts;
+$(document).ready(function(){
+    accounts = $('#accounts').DataTable({
+        paging: false,
+        searching:false,
+        scrollX:false,
+        info:false, 
+        ajax: { url: '/Ajax/getAccountsBalance', dataSrc:''},
+        dom: '<"toolbar">frtip',
+        columns: [
+            { title: "Konto",orderable:false, data: "description",className:"dt-receiver" },
+            colBetrag
+            ]
+    });
+});

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;
+    });
+
+});

public/js/tabs_overview.js

@@ -0,0 +1,36 @@
+var datatable;
+var todos;
+
+$(document).ready(function(){
+     datatable = $('#bookings').DataTable({
+        paging: false,
+        searching:true,
+        scrollX:false,
+        info:false, 
+        order: [[ 1, 'desc' ]],
+        ajax: { url: '/Ajax/getOverviewData', dataSrc:''},
+        dom: '<"toolbar">frt',
+        columns: columns,
+    });
+    $("div.toolbar").html('<a class="btn-sm btn-secondary" href="/Home/newBill" role="button">Neuer Eintrag</a>');
+    // Add event listener for opening and closing details
+    $('#bookings tbody').on('click', 'td.dt-receiver', function () {collapseDetails($(this), datatable);} );
+    $('#bookings tbody').on('click', 'td.dt-datum', function () {location.href = '/Home/editBill/'+getId($(this),todos);});
+    $('#bookings tbody').on('click', 'table.tabdet', function () {location.href = '/Home/editBill/'+$(this).attr('data-bs-id');});
+
+    todos = $('#todos').DataTable({
+        paging: true,
+        searching:true,
+        scrollX:false,
+        info:true, 
+        order: [[ 1, 'desc' ]],
+        ajax: { url: '/Ajax/getToDosData', dataSrc:''},
+        dom: '<"top"i<"syncbutton">>frt<"bottom"lp><"clear">',
+        columns: columns,
+    });
+    $("div.syncbutton").html('<a class="btn-sm btn-secondary" href="/Home/syncScheduled" role="button">Sync</a>');
+    // Add event listener for opening and closing details
+    $('#todos tbody').on('click', 'td.dt-receiver', function () {collapseDetails($(this), todos);} );
+    $('#todos tbody').on('click', 'td.dt-datum', function () {location.href = '/Home/editBill/'+getId($(this),todos);});
+    $('#todos tbody').on('click', 'table.tabdet', function () {location.href = '/Home/editBill/'+$(this).attr('data-bs-id');});
+});