Bugfix and documentation

dashboard

@@ -37,7 +37,9 @@ end
 class GetAllConfigs < Riddl::Implementation
   def response  
     Dir.chdir( __dir__  + '/data')
-    Riddl::Parameter::Complex.new('list','application/json',JSON::pretty_generate(Dir.glob('*/').sort_by{|x| x.downcase}))
+    databack = JSON::pretty_generate(Dir.glob('*/').sort_by{|x| x.downcase});
+    Dir.chdir( __dir__)
+    Riddl::Parameter::Complex.new('list','application/json',databack)
   end
 end
 
@@ -312,6 +314,45 @@ class Update < Riddl::Implementation
   end
 end
 
+class Storesortedtable < Riddl::Implementation
+  def response
+    fname = File.join('data',@r.last,'data.db')
+    db = SQLite3::Database.open fname
+    
+    #invert keys from + to - to prevent duplicate primary keys when reordering
+    db.execute("UPDATE Entries SET __orderID__ = __orderID__ *-1 -1")
+    
+    updateData = JSON.parse(@p[0].value.read)
+    
+    updateData.each_with_index  do |child, idx|
+      db.execute("UPDATE Entries SET __orderID__ = ? WHERE  __orderID__ = ?", [idx, child.to_i*-1 -1])
+    end
+    
+    
+    #security
+    #in case there are negative entries remaining add them with positive value to the end
+    
+    result = db.execute "SELECT MAX(__orderID__) FROM Entries"
+    if(result[0][0] == nil)
+      maxorderID = 0
+      else
+      maxorderID = result[0][0] +1
+    end
+    
+    resultpattern = db.execute "SELECT * FROM Entries WHERE __orderID__ < 0"
+    resultpattern.each do |row2|
+      db.execute("UPDATE Entries SET __orderID__ = ? WHERE  __orderID__ = ?", [maxorderID, row2[0]]);
+      maxorderID = maxorderID +1;
+    end
+    
+    @a[0].send("reset")
+    
+    nil
+  end
+end
+
+
+
 
 class Delete < Riddl::Implementation
   def response
@@ -493,6 +534,7 @@ server = Riddl::Server.new(File.join(__dir__,'/dashboard.xml'), :host => 'localh
       run PutPrioN, opts[:signals][idx] if put 'inputNprio'
       run Move if put 'move'
       run Update if put 'update'
+      run Storesortedtable, opts[:signals][idx] if put 'storesortedtable'
       run AddEntry, opts[:signals][idx] if post 'directADD'
       run Delete if delete 'deleteMsg'
       run DeleteID if delete 'deleteByID'

dashboard.xml

@@ -51,6 +51,9 @@
   <message name="deleteAll">
     <parameter name="deleteAll" type="string"/>
   </message>
+  <message name="storesortedtable">
+    <parameter name="storesortedtable" mimetype="application/json"/>
+  </message>
   <message name="ui">
     <parameter name="ui" mimetype="text/html"/>
   </message>
@@ -110,6 +113,7 @@
       <put in='inputNprio' />
       <put in='move' />
       <put in='update' />
+      <put in='storesortedtable' />
       <post in='directADD' />
       <delete in='deleteMsg' />
       <delete in='deleteByID' />

defaultContent/js/ui.js

@@ -2,21 +2,14 @@
 
 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","edit"]
+    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(",")
@@ -60,7 +53,7 @@ function getAllData(){
         container = document.getElementById("tablecontent");
         entry = document.createElement("tr");
         $(entry).attr("id","AddEntry");
-        $(entry).attr("class","tableentry");
+        $(entry).attr("class","tableentryAdd");
         
         
         tableedit = "<td class='addEntry'><a onclick='addEntry()' href='#'>Add</a></td>"
@@ -95,25 +88,121 @@ function getAllData(){
     $('[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
+      }
+      });
+    }
+    */
     
-    $('body').append('<a onclick="collectdata2sendBack()" href="#">Sende Liste</a>');
+    //$( "#tablecontent" ).on( "sortstart", function( event, ui ) {console.log("start" + ui.item.html())} );
 
-    
-  }
   
-  /*
-  new Sortable(document.getElementById('data'),{
-	  handle: '.handle',
-	  animation: 150
-  });
-  */
   
+
+
 }
 
-function collectdata2sendBack(){
+function collectdata2sendBack(){ 
   console.log("sending");
   var sendback = [];
   $('[name="pkvalues"]:visible').each(function(){
@@ -123,26 +212,7 @@ function collectdata2sendBack(){
   sendDataElementBack(sendback)
 }
 
-//https://www.therogerlab.com/sandbox/pages/how-to-reorder-table-rows-in-javascript?s=0ea4985d74a189e8b7b547976e7192ae.4122809346f6a15e41c9a43f6fcb5fd5
-var row;
-
-function start(){  
-  row = event.target; 
-}
-function dragover(){
-  var e = event;
-  e.preventDefault(); 
-    
-  let children= Array.from(e.target.parentNode.parentNode.children);
-  
-  if(children.indexOf(e.target.parentNode)>children.indexOf(row))
-    e.target.parentNode.after(row);
-  else
-    e.target.parentNode.before(row);
-}
-
 function searchtable(key) {
-  console.log("AAA");
   // Declare variables
   var input, filter, table, tr, td, i, txtValue;
   input = document.getElementById("searchtable" +key);
@@ -241,6 +311,35 @@ function sendDataElementBack(dataelement, type){
   //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){
@@ -265,13 +364,24 @@ function setSingleData(singleData, urlarray, i = -1, url = ""){
   $(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()");
   }
-  
+  */
   
   
   
@@ -314,9 +424,23 @@ function setSingleData(singleData, urlarray, i = -1, url = ""){
   if(urlarray.includes("moveX")){
     tableentry += "<td><a onclick='move(" + singleData.__orderID__ +",7)' href='#'>MovetoX</a></td>"
   }
+  
   if(urlarray.includes("move")){
-    tableentry += '<td class="handle"><a href="#">⇅</a></td>'
+    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>"
   }
@@ -328,7 +452,7 @@ function setSingleData(singleData, urlarray, i = -1, url = ""){
   tableentry += "<td class='editable'>" +  Object.values(JSON.parse(singleData.alldata)).join("</td><td class='editable'>")  + "</td>"
   $(entry).html(tableentry); 
 
-  $(entry).hide().fadeIn(2000);
+  //$(entry).hide().fadeIn(2000);
   $("#tablecontent tr:last").before(entry);
 }
 
@@ -529,6 +653,7 @@ function init() {
     }
   };
   es.onerror = function() {
+    es.close();
     reason = 'Server down.';
     clearDocument();
     setTimeout(init, 10000);

template/index.html

@@ -47,15 +47,37 @@
     </script>
   </head>
   <body is="x-ui">
-    Todo:
-    List all configs
-      Select config
-        Show visualizations
-        create new visualizations (with button omit null values)
+  
+    Used spaces: <select id="selectfolders"></select><br><br>
+  
+        
+     <h1>Configurations</h1>
+     
+     
+     <h2>Coloring entries</h1>
+        ?colorize=Yourcolumnname<br>
+        &colorizestart=beginningtext of entrie that should be colorized<br>
+        &colorizecol=3465a4 color without #<br><br>
+        
+        second color<br>
+        ?colorize2=Yourcolumnname<br>
+        &colorize2start=beginningtext of entrie that should be colorized<br>
+        &colorize2col=3465a4 color without #<br>
     
+    
+    
+    <h1>Search</h1>
+      e.g. https://centurio.evva.com/dashboard/LinieNfcId/search/PK/5
+      
+      
+      
+    <h1>Todo</h1>
+    List all configs<br>
+      Select config<br>
+        Show visualizations<br>
+        create new visualizations (with button omit null values)
+     
   
-    <select id="selectfolders">
-    </select><br>
     
   </body>
 </html>