Dashboard/defaultContent/js/ui.js

function getAllData(){
  $( "#data" ).empty();
  var url_string = window.location.href
  var url = new URL(url_string);
  if(!url.searchParams.has("display")){
    var urlarray = ["aktivieren","aktivierenPrio","stornieren","moveTop","moveX","move","move2","edit"]
  }else{
    var urlparams = url.searchParams.get("display").replace("/","");
    var urlarray = urlparams.split(",");
  }
  if(url.searchParams.has("menu")){
    console.log("MENU");
    menuentries = url.searchParams.get("menu").split(",")
    $( "#data" ).append("<a class='ontop'href='" + menuentries[1] + "' target='_blank'>" + menuentries[0] +"</a>" );
  }

  $.ajax({
    type: "GET",
    url: 'data.db',
    async: false,
    success: function(ret) {      
      if(!$(ret.data).length == 0){
        container = document.getElementById("data");
        entry = document.createElement("div");
        
        tablehead = "<table><tbody id='tablecontent'><tr>";
                
        urlarray.forEach(function(element) { tablehead += "<th></th>" });
        
        
        var joinkey = urlarray.length;
        if(ret.data[0].hasOwnProperty('pkvalue')){
          tablehead += "<th class='primarykey'>Primary Key</th>";
        }
        else{
          --joinkey
        }
        
        
        for (var i = 0; i < Object.keys(JSON.parse(ret.data[0].alldata)).length; i++) {
          tablehead += "<th class='editable'>" + Object.keys(JSON.parse(ret.data[0].alldata))[i]
          
          if(url.searchParams.has("showfilter")){
            tablehead +=  '<br><input styl="width: 100%;" type="text" id="searchtable' + ++joinkey +'" onkeyup="searchtable(' + joinkey + ')" placeholder="Search for ' + Object.keys(JSON.parse(ret.data[0].alldata))[i] + '" name="' +Object.keys(JSON.parse(ret.data[0].alldata))[i] + '">'
          }
         tablehead += '</th>'
        }
        tablehead += "</tr></tbody></table>";
        
        $(entry).html(tablehead); 
        $(container).append(entry);
        
        
        container = document.getElementById("tablecontent");
        entry = document.createElement("tr");
        $(entry).attr("id","AddEntry");
        $(entry).attr("class","tableentryAdd");
        
        
        tableedit = "<td class='addEntry'><a onclick='addEntry()' href='#'>Add</a></td>"
        urlarray.forEach(function(element) {  });
        
        for (var i = 1; i < urlarray.length; i++) { //start at 1 as add is already set
          tableedit += "<td></td>"
        }
        
        if(ret.data[0].hasOwnProperty('pkvalue')){
          tableedit += "<td class='editableprimarykey'>Primary Key</td>";
        }
        tableedit += "<td class='editable'>" + Object.keys(JSON.parse(ret.data[0].alldata)).join("</td><td class='editable'>")  + "</td>"
        
        $(entry).append(tableedit); 
        $("#tablecontent").append(entry); 
        
        
        $.each(ret.data, function(i, item) {
          setSingleData(item, urlarray, i, url);
        });
      }
      
    }
    
  });
  
  
  if(url.searchParams.has("searchkey")){
    var searchkey = url.searchParams.get("searchkey").replace("/","");
    $('[name="' + searchkey +'"]').val(url.searchParams.get("searchterm").replace("/",""));
    $('[name="' + searchkey +'"]').keyup();
  }
  
  if(url.searchParams.has("sendListBack")){
    $('body').append('<a onclick="collectdata2sendBack()" href="#">Sende Liste</a>');
  }
  /*
  //Single move
  if(urlarray.includes("move")){
    $( "#data" ).prepend('<a id="storesortedtablebutton" onclick="storesortedtable()" hidden href="#">Store Table</a>');
    $( "#tablecontent" ).sortable({
      handle: '.handle',
      change: function (event, ui) {
        $( "#storesortedtablebutton" ).show();
      }
    });
  }*/
  
  if(urlarray.includes("move") || urlarray.includes("move")){
    $( "#data" ).prepend('<a id="storesortedtablebutton" onclick="storesortedtable()" hidden href="#">Store Table</a>');
  }
  //move single or multiple items (buttonpress) 
  if(urlarray.includes("move")){
    new Sortable(tablecontent, {
      handle: '.handle',
      multiDrag: true, // Enable multi-drag
      selectedClass: 'sortable-selected', // The class applied to the selected items
      fallbackTolerance: 3, // So that we can select items on mobile
      animation: 150,
      avoidImplicitDeselect: false,
      
      onSelect: function(/**Event*/evt) {
        $( 'tr[ grouping="' + $(evt.item).attr("grouping") + '"]' ).each(function( index ) {
          console.log( index + ":select " + $( this ).text() );
          Sortable.utils.select($(this)[0]);
        });
      },
      onDeselect: function(/**Event*/evt) {
        $( 'tr[ grouping="' + $(evt.item).attr("grouping") + '"]' ).each(function( index ) {
          console.log( index + ":deselect " + $( this ).text() );
          Sortable.utils.deselect($(this)[0]);
        });
      },
      onEnd: function (/**Event*/evt) {          //deselect all on end 
          $( 'tr' ).each(function( index ) {
            console.log( index + ": " + $( this ).text() );
            Sortable.utils.deselect($(this)[0]);
          });
      },
      onSort: function (/**Event*/evt) {  //on any change show store table button
        $( "#storesortedtablebutton" ).show();
      }
    });
  }
  
  if(urlarray.includes("move2")){
    new Sortable(tablecontent, {
      handle: '.handle2',
      multiDrag: true, // Enable multi-drag
      selectedClass: 'sortable-selected', // The class applied to the selected items
      fallbackTolerance: 3, // So that we can select items on mobile
      animation: 150,
      avoidImplicitDeselect: false,
      
      onSelect: function(/**Event*/evt) {
        $( 'tr[ grouping2="' + $(evt.item).attr("grouping2") + '"]' ).each(function( index ) {
          console.log( index + ": " + $( this ).text() );
          Sortable.utils.select($(this)[0]);
        });
      },
      onDeselect: function(/**Event*/evt) {
        $( 'tr[ grouping2="' + $(evt.item).attr("grouping2") + '"]' ).each(function( index ) {
          console.log( index + ": " + $( this ).text() );
          Sortable.utils.deselect($(this)[0]);
        });
      },
      onEnd: function (/**Event*/evt) {          //deselect all on end 
          $( 'tr' ).each(function( index ) {
            console.log( index + ": " + $( this ).text() );
            Sortable.utils.deselect($(this)[0]);
          });
      },
      onSort: function (/**Event*/evt) {  //on any change show store table button
        $( "#storesortedtablebutton" ).show();
      }
    });
  }
    
    /*
    $( "#tablecontent" ).sortable({
      multiDrag: true, // Enable the plugin
      selectedClass: "sortable-selected", // Class name for selected item
      multiDragKey: null, // Key that must be down for items to be selected
      avoidImplicitDeselect: true, // true - if you don't want to deselect items on outside click
      
      // Called when an item is selected
      onSelect: function(/**Event*/ /*evt) {
        evt.item // The selected item
        console.log(evt.item);
      },

      // Called when an item is deselected
      onDeselect: function(/**Event*/ /*evt) {
        evt.item // The deselected item
      }
      });
    }
    */
    
    //$( "#tablecontent" ).on( "sortstart", function( event, ui ) {console.log("start" + ui.item.html())} );

  
  


}

function collectdata2sendBack(){ 
  console.log("sending");
  var sendback = [];
  $('[name="pkvalues"]:visible').each(function(){
    sendback.push($(this).html());
  });
  
  sendDataElementBack(sendback)
}

function searchtable(key) {
  // Declare variables
  var input, filter, table, tr, td, i, txtValue;
  input = document.getElementById("searchtable" +key);
  filter = input.value.toUpperCase();
  table = document.getElementById("tablecontent");
  tr = table.getElementsByTagName("tr");

  // Loop through all table rows, and hide those who don't match the search query
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[key];
    if (td) {
      txtValue = td.textContent || td.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
  }
}
function sortTable(n) {
  var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
  table = document.getElementById("tablecontent");
  switching = true;
  // Set the sorting direction to ascending:
  dir = "asc";
  /* Make a loop that will continue until
  no switching has been done: */
  while (switching) {
    // Start by saying: no switching is done:
    switching = false;
    rows = table.rows;
    /* Loop through all table rows (except the
    first, which contains table headers): */
    for (i = 1; i < (rows.length - 1); i++) {
      // Start by saying there should be no switching:
      shouldSwitch = false;
      /* Get the two elements you want to compare,
      one from current row and one from the next: */
      x = rows[i].getElementsByTagName("TD")[n];
      y = rows[i + 1].getElementsByTagName("TD")[n];
      /* Check if the two rows should switch place,
      based on the direction, asc or desc: */
      if (dir == "asc") {
        if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
          // If so, mark as a switch and break the loop:
          shouldSwitch = true;
          break;
        }
      } else if (dir == "desc") {
        if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
          // If so, mark as a switch and break the loop:
          shouldSwitch = true;
          break;
        }
      }
    }
    if (shouldSwitch) {
      /* If a switch has been marked, make the switch
      and mark that a switch has been done: */
      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
      switching = true;
      // Each time a switch is done, increase this count by 1:
      switchcount ++;
    } else {
      /* If no switching has been done AND the direction is "asc",
      set the direction to "desc" and run the while loop again. */
      if (switchcount == 0 && dir == "asc") {
        dir = "desc";
        switching = true;
      }
    }
  }
}



function deleteDataElement(dataelement){
  console.log("Löschen")
  console.log(dataelement)
  $.ajax({
    type: "DELETE",
    url: location.protocol + '//' + location.host + location.pathname,
    contentType: "application/json",
		headers: {"content-id": "deleteByID"},
    data: JSON.stringify(dataelement),
    success: function(ret) {
      getAllData();
    }
  });
}

//if used in frames send row to frames
function sendDataElementBack(dataelement, type){
  parent.sendJson(window.name,{ type: type, dataelement: dataelement })
  //deleteDataElement(dataelement.__orderID__)
}

//retrieves ID´s in current order and sends back 2 server
//security, in case an id got removed it is not retrieved, in case an id got added it will still be added
//server does the following: looks for ID and sets the order to the current order we sent,
//in case the id is not found nothing happens (entry was removed during sorting by someone else)
//in case another ID is in the db that was added while we sort, the id will remain (maybe at different position)
function storesortedtable(){
  
  var alldata = [];
  alldata.entry = entry;
  $( ".tableentry" ).each(function( index ) {
    alldata.push($( this ).attr("id"));
  });
  
  $.LoadingOverlay("show");

  $.ajax({
    type: "PUT",
    url: location.protocol + '//' + location.host + location.pathname,
		headers: {"content-id": "storesortedtable"},
    contentType: "application/json",
    data: JSON.stringify(alldata),
    success: function(ret) {
      $.LoadingOverlay("hide");
      getAllData();
    }
  });

  
}


function move(from, to){
  $.ajax({
    type: "PUT",
    url: location.protocol + '//' + location.host + location.pathname,
		headers: {"content-id": "move"},
    contentType: "application/json",
    data: JSON.stringify({"From": from, "To": to}),
    success: function(ret) {
      getAllData();
    }
  });
}



function setSingleData(singleData, urlarray, i = -1, url = ""){
  
  container = document.getElementById("tablecontent");
  entry = document.createElement("tr");
  $(entry).attr("id",singleData.__orderID__);
  $(entry).attr("class","tableentry");
  
  if(urlarray.includes("move")){
  if(url.searchParams.has("group1column")){
    $(entry).attr("grouping","Grp1" + JSON.parse(singleData.alldata)[url.searchParams.get("group1column").replace("/","")]);
  }
  }
  if(urlarray.includes("move2")){
  if(url.searchParams.has("group2column1") & url.searchParams.has("group2column2")){
    $(entry).attr("grouping2","Grp2" + JSON.parse(singleData.alldata)[url.searchParams.get("group2column1").replace("/","")]+ "_" + JSON.parse(singleData.alldata)[url.searchParams.get("group2column2").replace("/","")]);
  }
  }
  
  /*
  if(urlarray.includes("move")){
    $(entry).attr("draggable","true");
    $(entry).attr("ondragstart","start()");
    $(entry).attr("ondragover","dragover()");
  }
  */
  
  
  
  if(url.searchParams.has("colorize")){
    if(i == 0){
      var tableheader = url.searchParams.has("colorize") ? url.searchParams.get("colorize").replace("/","") : "";
      var colorizestart = url.searchParams.has("colorize2") ? url.searchParams.get("colorizestart").replace("/","") : "";
      var colorizecol = url.searchParams.has("colorize2") ? url.searchParams.get("colorizecol").replace("/","") : "";
      
      var table2header = url.searchParams.has("colorize2") ? url.searchParams.get("colorize2").replace("/","") : "";
      var colorize2start = url.searchParams.has("colorize2start") ? url.searchParams.get("colorize2start").replace("/","") : "";
      var colorize2col = url.searchParams.has("colorize2col") ? url.searchParams.get("colorize2col").replace("/","") : "";
      
      if(JSON.parse(singleData.alldata).hasOwnProperty(tableheader)){
        if(JSON.parse(singleData.alldata)[tableheader].startsWith(colorizestart)){
          $(entry).attr("style","background-color: #" + colorizecol);
        }
      }
      if(JSON.parse(singleData.alldata).hasOwnProperty(table2header)){
        if(JSON.parse(singleData.alldata)[table2header].startsWith(colorize2start)){
          $(entry).attr("style","background-color: #" + colorize2col);
        }
      }
    }
  }
  
  tableentry = "";
  if(urlarray.includes("aktivieren")){
    tableentry += "<td><a onclick='sendDataElementBack(" + JSON.stringify(singleData) +", \"normal\")' href='#'>Aktivieren</a></td>"
  }
  if(urlarray.includes("aktivierenPrio")){
    tableentry += "<td><a onclick='sendDataElementBack(" + JSON.stringify(singleData) +", \"prio\")' href='#'>Aktivieren Prio</a></td>"
  }
  if(urlarray.includes("stornieren")){
    tableentry += "<td><a onclick='deleteDataElement(" + singleData.__orderID__ +")' href='#'>Stornieren</a></td>"
  }
  if(urlarray.includes("moveTop")){
    tableentry += "<td><a onclick='move(" + singleData.__orderID__ +",0)' href='#'>MoveTop</a></td>"
  }
  if(urlarray.includes("moveX")){
    tableentry += "<td><a onclick='move(" + singleData.__orderID__ +",7)' href='#'>MovetoX</a></td>"
  }
  
  if(urlarray.includes("move")){
    var name = "⇅";
    if(url.searchParams.has("group1name")){
      name = url.searchParams.get("group1name").replace("/","")
    }
    tableentry += '<td class="handle"><a href="#">' + name +'</a></td>'
  
  }
  if(urlarray.includes("move2")){
    var name = "⇅";
    if(url.searchParams.has("group2name")){
      name = url.searchParams.get("group2name").replace("/","")
    }
    tableentry += '<td class="handle2"><a href="#">' + name + '</a></td>'
  }
  url.searchParams.get("menu")
  if(urlarray.includes("edit")){
    tableentry += "<td class='edit'><a onclick='edit(" + singleData.__orderID__ +")' href='#'>Edit</a></td>"
  }


  if(singleData.hasOwnProperty('pkvalue')){
    tableentry += "<td name='pkvalues'>" + singleData.pkvalue + "</td>";
  }
  tableentry += "<td class='editable'>" +  Object.values(JSON.parse(singleData.alldata)).join("</td><td class='editable'>")  + "</td>"
  $(entry).html(tableentry); 

  //$(entry).hide().fadeIn(2000);
  $("#tablecontent tr:last").before(entry);
}

function getUpdateData(id){
  //Json aufbauen
  var i = 0;
  var obj = {};
  $("#tablecontent th[class='editable'").each(function( index ) {
    
    curname = $( this ).html();
    curvalue = $("#" + id + " .editable:eq(" + i + ") input").val();
    
    if(isNaN(curvalue)){
      obj[curname] = curvalue;
    }else{
      obj[curname] = parseInt(curvalue, 10);
    }

    ++i;
  });  
  console.log("TEST" + JSON.stringify(obj));
  update(id, obj)
}

function update(id, obj){
  $.ajax({
    type: "PUT",
    url: location.protocol + '//' + location.host + location.pathname,
		headers: {"content-id": "update"},
    contentType: "application/json",
    data: JSON.stringify({"ID": id, "alldata": obj}),
    success: function(ret) {
      getAllData();
    }
  });
  
}

function edit(id){
  console.log("#" + id + " .editable");
  
  $("#" + id + " .edit").each(function( index ) {
    $( this ).html("<a onclick='getUpdateData(" + id +")' href='#'>Update</a>");
  });
  
  $("#" + id + " .editable").each(function( index ) {
    if(isNaN($( this ).text())){
      $( this ).html("<input type='text' value='" + $( this ).text() +"'>");
    }else{
      $( this ).html("<input type='number' value='" + $( this ).text() +"'>");
    }
  });
}


function addEntry() {
    
  $("#AddEntry .addEntry").each(function( index ) {
    $( this ).html("<a onclick='getNewData(\"AddEntry\")' href='#'>Add</a>");
  });
  
  $("#AddEntry .editableprimarykey").each(function( index ) {
    $( this ).html("<input type='text' value='" + $( this ).text() +"'>");
  });
  
  
  $("#AddEntry .editable").each(function( index ) {
    $( this ).html("<input type='text' value='" + $( this ).text() +"'>");
  });
  
}

function getNewData(id){
  //Json aufbauen
  var i = 0;
  var obj = {};
  $("#tablecontent th[class='editable'").each(function( index ) {
    
    curname = $( this ).html();
    curvalue = $("#" + id + " .editable:eq(" + i + ") input").val();
    
    if(isNaN(curvalue)){
      obj[curname] = curvalue;
    }else{
      obj[curname] = parseInt(curvalue, 10);
    }

    ++i;
  });
  
  pk = $("#" + id + " .editableprimarykey input").val()
  obj = {alldata: obj, pkvalue: pk}
  addNewData(id, obj)
}

function addNewData(id, obj){

  $.ajax({
    type: "POST",
    url: location.protocol + '//' + location.host + location.pathname,
		headers: {"content-id": "directADD"},
    contentType: "application/json",
    data: JSON.stringify(obj),
    success: function(ret) {
      getAllData();
    }
  });
  
}

function openlink(menuitem){
  var menu = { name: menuitem };

  $.ajax({
    type: "PUT",
    url: window.name,
    contentType: "application/json",
    data: JSON.stringify(menu),
    success: function (data) {
      
    }
  });
}

function showDocument() {
  
  $.ajax({
    type: "GET",
    url: location.protocol + '//' + location.host + location.pathname + 'style.url',
    success: function(ret) {
      $('head link.custom').attr('href',ret);
    }
  });
  /*
  $.ajax({
    type: "GET",
    url: 'info.json',
    success: function(ret) {
      makeGrid(ret.x_amount, ret.y_amount);
      //set name
      document.title = ret.document_name;
      $.ajax({
        type: "GET",
        url: 'frames.json',
        success: function(ret2) {
          for (i of ret2.data) {
            makeFrame(i.lx,i.ly,i.rx,i.ry, i.url, i.callback, i.default, i.showbutton, i.style);
          } 
        }
      });
    },
    error: function() {
      reason = '';
      clearDocument();
    }
  });*/
}

function clearDocument() {
  console.log('rrrr');
  $('#languages').addClass('hidden');
  $('#nope').removeClass('hidden');
  $('#control .added').remove();
  $('#content .added').remove();
  $('#reason').text(reason);
}


function init() {
  es = new EventSource('sse/');
  es.onopen = function() {
    getAllData();
    // load
  };
  es.onmessage = function(e) {
    console.log("Got SSE");
    if (e.data == 'new') {
      reason = '';
      getAllData();
    }
    if (e.data == 'reset') {
      reason = '';
      getAllData();
    }
    else{
      if(e.data == "update"){
        alert("update")
      }
      if(e.data != "keepalive" && e.data != "started"){
        try {
          var prdata = JSON.parse(e.data)
          //alert("LastIf" + prdata.seriennummer)
          setSingleData(prdata);
        }
        catch (e) {
        }
      }
    }
  };
  es.onerror = function() {
    es.close();
    reason = 'Server down.';
    clearDocument();
    setTimeout(init, 10000);
  };
}


$(document).ready(function() {
  init();
});