Changed Button, now the button calls a function from the iframe retrieves data and sends it back, meaning the control of the data is within the iframe to allow diverse applications

frames

@@ -27,11 +27,13 @@ require 'typhoeus'
 # https://centurio.work/customers/evva/flow/?monitor=https://centurio.work/flow-test/engine/729/
 
 class Get < Riddl::Implementation
-  def response
+  def response    
     if @r[0] == 'test'
       Riddl::Parameter::Complex.new('ui','text/html',File.open(File.join(__dir__,'template','test.html')))
     elsif @r[0] == 'menu'
       Riddl::Parameter::Complex.new('ui','text/html',File.open(File.join(__dir__,'template','menu.html')))
+    elsif @r[0] == 'framedata'
+      Riddl::Parameter::Complex.new('ui','text/html',File.open(File.join(__dir__,'template','framedata.html')))
     else
       Riddl::Parameter::Complex.new('ui','text/html',File.open(File.join(__dir__,'template','template.html')))
     end
@@ -41,12 +43,22 @@ end
 class Put < Riddl::Implementation
   def response
     Dir.mkdir(File.join('data',@r.last)) rescue nil
-    File.write(File.join('data',@r.last,'style.url'),@p[0].value)
+    
+    
+    if @p[0].value.to_s.strip.empty?
+      File.write(File.join('data',@r.last,'style.url'), "../css/frames.css")
+    else
+      File.write(File.join('data',@r.last,'style.url'),@p[0].value)
+    end
+    
+    
     
     File.write(File.join('data',@r.last,'document.xml'),@p[1].value)
     
     File.write(File.join('data',@r.last,'frames.json'),JSON.dump(JSON.parse('{"data":[]}')))
     
+    File.write(File.join('data',@r.last,'dataelements.json'),JSON.dump(JSON.parse('{"data":[]}')))
+    
     
     File.write(File.join('data',@r.last,'info.json'),JSON.dump(JSON.parse('{"x_amount":' + @p[2].value + ', "y_amount":' + @p[3].value + ', "lang":"' + @p[4].value  + '", "langs":["' + @p[4].value +  '"]}')))
 
@@ -203,6 +215,7 @@ class Delete < Riddl::Implementation
   end
 end
 
+
 class GetFrames < Riddl::Implementation #{{{
   def response
     fname = File.join('data',@r[-2],'frames.json')
@@ -224,6 +237,22 @@ class GetFrames < Riddl::Implementation #{{{
   end
 end #}}}
 
+
+class GetDataElements < Riddl::Implementation #{{{
+  def response
+    fname = File.join('data',@r[-2],'dataelements.json')
+    if File.exists? fname
+      Riddl::Parameter::Complex.new('value','application/json',File.read(fname))
+    else
+      @status = 404
+    end
+  end
+end #}}}
+
+
+
+
+
 class GetInfo < Riddl::Implementation #{{{
   def response
     fname = File.join('data',@r[-2],'info.json')
@@ -333,11 +362,10 @@ end #}}}
 
 class Handler < Riddl::Implementation
   def response    
+    puts "handler"
   
       topic         = @p[1].value
       event_name    = @p[2].value
-      log_dir       = @a[0]
-      template      = @a[1]
       notification  = JSON.parse(@p[3].value.read)
       
       
@@ -352,9 +380,25 @@ class Handler < Riddl::Implementation
       
       
       if content['values']&.any?
-        puts alldata['ausfuehrungen']
+        #puts alldata['ausfuehrungen']
+        puts "writing file"
+        path = File.join('data',@r[0],'dataelements.json')
+        File.write(path, JSON.dump(content['values']))
       end
+      
+      
+      
+      
+      
+      
+      
+      
+      
+      
+      
   
+      @a[0].send(@r[0])
+      nil
   
     nil
   end
@@ -364,10 +408,24 @@ end
 
 
 
+class SSE < Riddl::SSEImplementation #{{{
+  def onopen
+    signals = @a[0]
+    signals.add self
+    send 'started'
+    true
+  end
 
+  def onclose
+    signals = @a[0]
+    signals.remove self
+    nil
+  end
+end #}}}
 
 
-class SSE < Riddl::SSEImplementation #{{{
+
+class SSE2 < Riddl::SSEImplementation #{{{
   def onopen
     signals = @a[0]
     signals.add self
@@ -409,6 +467,7 @@ server = Riddl::Server.new(File.join(__dir__,'/frames.xml'), :host => 'localhost
   cross_site_xhr true
 
   opts[:signals] = {}
+  opts[:signals2] = {}
 
   parallel do
     loop do
@@ -417,14 +476,21 @@ server = Riddl::Server.new(File.join(__dir__,'/frames.xml'), :host => 'localhost
       end
       sleep 5
     end
+    loop do
+      opts[:signals2].each do |k,v|
+        v.send('keepalive')
+      end
+      sleep 5
+    end
   end
 
   on resource do
     on resource do |r|
       idx = r[:r][0]
       opts[:signals][idx] ||= Signaling.new
+      opts[:signals2]["handler"] ||= Signaling.new
 
-      run Get if get
+      run Get, "test" if get
       run Put, opts[:signals][idx] if put 'input'
       
       run NewFrame, opts[:signals][idx] if post 'frame'
@@ -435,7 +501,10 @@ server = Riddl::Server.new(File.join(__dir__,'/frames.xml'), :host => 'localhost
       
       
       on resource 'handler' do
-        run Handler if post 
+        run Handler, opts[:signals2]["handler"] if post 
+        on resource 'sse' do
+          run SSE2, opts[:signals2]["handler"] if sse
+        end
       end 
       
       
@@ -459,6 +528,10 @@ server = Riddl::Server.new(File.join(__dir__,'/frames.xml'), :host => 'localhost
         run GetFrames if get
       end
       
+      on resource 'dataelements.json' do
+        run GetDataElements if get
+      end
+      
       on resource 'buttons' do
         on resource '[a-zA-Z]{1,8}(-[a-zA-Z0-9]{1,8})*' do
           run GetButton if get

frames.xml

@@ -104,9 +104,16 @@
       <resource relative="frames.json">
         <get out="json"/>
       </resource>
+      <resource relative="dataelements.json">
+        <get out="json"/>
+      </resource>
       
       <resource relative='handler'>
         <post />
+        
+        <resource relative='sse'>
+          <sse/>
+        </resource>
       </resource>
     </resource>
   </resource>

template/js/ui.js

@@ -1,8 +1,133 @@
 var reason ="";
 
 
+var storage = []; //{col:1, row:1, colamount:1, rowamount: 1}];
+
+
+function doOverlap(l1x, l1y, r1x, r1y, l2x, l2y, r2x, r2y) { 
+    // If one rectangle is on left side of other 
+    if (l1x > r2x || l2x > r1x) 
+        return false;
+    // If one rectangle is above other 
+    if (l1y > r2y || l2y > r1y) 
+        return false;
+    return true; 
+}
+
+
+function makeFrame(lx, ly, rx, ry, content = "", id = "", showbutton=false) {
+  
+  //check if rects overlap if they do remove old ones
+  for (i = 0; i < window.storage.length; i++) {
+    if(doOverlap(window.storage[i].lx, window.storage[i].ly, window.storage[i].rx, window.storage[i].ry, lx, ly, rx, ry)){
+      $(".item" + window.storage[i].lx + "-" + window.storage[i].ly).remove();
+      //clearRectangel(window.storage[i].lx, window.storage[i].ly, window.storage[i].rx, window.storage[i].ry)
+      window.storage.splice(i,1);
+      --i;
+    }
+  }
+  
+  //add new ellement to storage
+  window.storage.push({lx:lx, ly:ly, rx:rx, ry: ry})
+  
+  
+  
+  const container = document.getElementById("container");
+  let cell = document.createElement("div");
+  cell.classList.add("grid-item");
+  cell.classList.add("item" + lx + "-" + ly);
+
+  spancol= ""
+  if(rx-lx+1 > 1){
+    spancol = " / span " + (rx-lx+1);
+    
+  }
+  
+  spanrow= ""
+  if(ry-ly+1 > 1){
+    spanrow = " / span " + (ry-ly+1);
+  }
+  
+  jQuery.cssNumber.gridColumnStart = true;
+  jQuery.cssNumber.gridColumnEnd = true;
+  jQuery.cssNumber.gridRowStart = true;
+  jQuery.cssNumber.gridRowEnd = true;
+  
+  $(cell).css({"display": "block", "border-style": "solid", "border-color": "blue", "grid-column": (lx+1) + spancol,  "grid-row": ly+1 + spanrow});
+  
+  
+  container.appendChild(cell);
+    
+  //Create new element with width, heigth and content
+  //$(".item" + lx + "-" + ly).css({"display": "block", "border-style": "solid", "border-color": "blue", "grid-column": (lx+1) + " / span " + (rx-lx+1),  "grid-row": ly+1 + " / span " + (ry-ly+1)});
+  
+  if(content != null && content != ""){
+    $(".item" + lx + "-" + ly).html("<iframe width=100% height=100% name='" + id +"' id='" + id +"' src='" + content + "' title=''></iframe>");
+            
+    if(showbutton && content.startsWith("https://centurio.work/out/forms")){
+      $(".item" + lx + "-" + ly).append('<button class="formbutton" type="button" onclick="sendForm(\'' + '.item' + lx + '-' + ly +'\', \'' + encodeURIComponent(id) + '\', \'' + lx  + '\', \'' + ly  + '\')">Send Form</button>')    
+    }
+    
+    //hideRectangel(lx, ly, rx, ry)
+  }
+  else{
+    $(".item" + lx + "-" + ly).html("No language available.<br> Nicht in der Sprache verfügbar.");
+    //hideRectangel(lx, ly, rx, ry)
+  }
+  
+}
+
+function getFormData($form){
+    var unindexed_array = $form.serializeArray();
+    var indexed_array = {};
+
+    $.map(unindexed_array, function(n, i){
+        indexed_array[n['name']] = n['value'];
+    });
+
+    return indexed_array;
+}
+
+
+
+function sendForm(menuitem, cpeecallback,lx,ly){
+  //Call iframe function that button has been pressed iframe decides what to do
+  //document.getElementById(decodeURIComponent(cpeecallback)).contentWindow.buttonPressed(cpeecallback);
+  
+  $.ajax({
+    type: "PUT",
+    url: decodeURIComponent(cpeecallback),
+    contentType: "application/json",
+    data: document.getElementById(decodeURIComponent(cpeecallback)).contentWindow.buttonPressed(),
+    success: function (data) {
+    }
+  });
+  
+  
+  //close form
+  $(menuitem).remove();
+  //remove form from Server
+  $.ajax({
+    type: "Post",
+    url: "",
+		headers: {"content-id": "deleteframe"},
+    data: {lx: lx, ly: ly},
+    success: function (data) {      
+    }
+  });
+}
+
+
 function showDocument() {
   
+  $.ajax({
+    type: "GET",
+    url: 'style.url',
+    success: function(ret) {
+      $('head link.custom').attr('href',ret);
+    }
+  });
+        
   $.ajax({
     type: "GET",
     url: 'info.json',
@@ -134,15 +259,19 @@ function init() {
       showDocument();
     }
     else{
+      if(e.data == "update"){
+        alert("update")
+      }
       if(e.data != "keepalive" && e.data != "started"){
         try {
           //alert(e.data)
           var frd = JSON.parse(e.data)
-          makeFrame(frd.lx,frd.ly,frd.rx,frd.ry, frd.url, frd.callback);
+          makeFrame(frd.lx,frd.ly,frd.rx,frd.ry, frd.url, frd.callback, frd.showbutton);
         }
         catch (e) {
         }
       }
+      
         
     }
   };
@@ -153,7 +282,7 @@ function init() {
   };
 }
 
-
+ 
 
 function makeGrid(x, y) {
   const container = document.getElementById("container");
@@ -174,21 +303,7 @@ function makeGrid(x, y) {
 
 
 
-
 $(document).ready(function() {
-  $('#control').on('click','button[name=send]',b_send);
   init();
 });
 
-function b_send() {
-  var formData = new FormData();
-  var content = JSON.stringify($('iframe:visible')[0].contentWindow.send_it());
-  var blob = new Blob([content], { type: "application/json"});
-
-  formData.append("op", "result");
-  formData.append("value", blob);
-
-  var request = new XMLHttpRequest();
-  request.open("DELETE", location.href);
-  request.send(formData);
-}

template/js/ui2.js

@@ -1,179 +0,0 @@
-
-
-var storage = []; //{col:1, row:1, colamount:1, rowamount: 1}];
-
-
-function doOverlap(l1x, l1y, r1x, r1y, l2x, l2y, r2x, r2y) 
-{ 
-    // If one rectangle is on left side of other 
-    if (l1x > r2x || l2x > r1x) 
-        return false;
-    // If one rectangle is above other 
-    if (l1y > r2y || l2y > r1y) 
-        return false;
-    return true; 
-}
-/*
-function clearRectangel(l1x, l1y, r1x, r1y){
-  for(var i = l1x; i <= r1x; ++i)
-    for(var k = l1y; k <= r1y; ++k){
-      $(".item" + (i) + "-" + (k)).remove();
-      //$(".item" + (i) + "-" + (k)).css({"display": "block", "border-style": "none", "border-color": "black", "grid-area": "auto"});
-      //$(".item" + (i) + "-" + (k)).text("");
-    }
-}
-
-function hideRectangel(l1x, l1y, r1x, r1y){
-  for(var i = l1x; i <= r1x; ++i)
-    for(var k = l1y; k <= r1y; ++k)
-      if(!(i == l1x && k == l1y))
-        $(".item" + (i) + "-" + (k)).hide(100);
-}
-*/
-
-
-function makeFrame(lx, ly, rx, ry, content = "", id = "", showbutton=false) {
-  
-  //check if rects overlap if they do remove old ones
-  for (i = 0; i < window.storage.length; i++) {
-    if(doOverlap(window.storage[i].lx, window.storage[i].ly, window.storage[i].rx, window.storage[i].ry, lx, ly, rx, ry)){
-      $(".item" + window.storage[i].lx + "-" + window.storage[i].ly).remove();
-      //clearRectangel(window.storage[i].lx, window.storage[i].ly, window.storage[i].rx, window.storage[i].ry)
-      window.storage.splice(i,1);
-      --i;
-    }
-  }
-  
-  //add new ellement to storage
-  window.storage.push({lx:lx, ly:ly, rx:rx, ry: ry})
-  
-  
-  
-  const container = document.getElementById("container");
-  let cell = document.createElement("div");
-  cell.classList.add("grid-item");
-  cell.classList.add("item" + lx + "-" + ly);
-
-  spancol= ""
-  if(rx-lx+1 > 1){
-    spancol = " / span " + (rx-lx+1);
-    
-  }
-  
-  spanrow= ""
-  if(ry-ly+1 > 1){
-    spanrow = " / span " + (ry-ly+1);
-  }
-  
-  jQuery.cssNumber.gridColumnStart = true;
-  jQuery.cssNumber.gridColumnEnd = true;
-  jQuery.cssNumber.gridRowStart = true;
-  jQuery.cssNumber.gridRowEnd = true;
-  
-  $(cell).css({"display": "block", "border-style": "solid", "border-color": "blue", "grid-column": (lx+1) + spancol,  "grid-row": ly+1 + spanrow});
-  
-  console.log({"display": "block", "border-style": "solid", "border-color": "blue", "grid-column-start": (lx+1), "grid-column-end": (rx+1),  "grid-row-start": ly+1,  "grid-row-end": ry+1})
-  
-  container.appendChild(cell);
-    
-  //Create new element with width, heigth and content
-  //$(".item" + lx + "-" + ly).css({"display": "block", "border-style": "solid", "border-color": "blue", "grid-column": (lx+1) + " / span " + (rx-lx+1),  "grid-row": ly+1 + " / span " + (ry-ly+1)});
-  
-  if(content != null && content != ""){
-    $(".item" + lx + "-" + ly).html("<iframe width=100% height=100% name='" + id +"' src='" + content + "' title=''></iframe>");
-            
-    if(showbutton && content.startsWith("https://centurio.work/out/forms")){
-      $(".item" + lx + "-" + ly).append('<button class="formbutton" type="button" onclick="sendForm(\'' + '.item' + lx + '-' + ly +'\', \'' + encodeURIComponent(id) + '\', \'' + lx  + '\', \'' + ly  + '\')">Send Form</button>')    
-    }
-    
-    //hideRectangel(lx, ly, rx, ry)
-  }
-  else{
-    $(".item" + lx + "-" + ly).html("No language available.<br> Nicht in der Sprache verfügbar.");
-    //hideRectangel(lx, ly, rx, ry)
-  }
-  
-};
-
-function getFormData($form){
-    var unindexed_array = $form.serializeArray();
-    var indexed_array = {};
-
-    $.map(unindexed_array, function(n, i){
-        indexed_array[n['name']] = n['value'];
-    });
-
-    return indexed_array;
-}
-
-
-
-function sendForm(menuitem, cpeecallback,lx,ly){
-  /* old can be used when formi js is active */
-  $.ajax({
-    type: "PUT",
-    url: decodeURIComponent(cpeecallback),
-    contentType: "application/json",
-    data: $('iframe[name="' + decodeURIComponent(cpeecallback) +  '"]').contents().find("#submission").html(),
-    success: function (data) {
-      //close form
-      $(menuitem).remove();
-    }
-  });
-  
-  
-  //get Iframe then data
-  /* without formio JS
-  var $form = $('iframe[name="' + decodeURIComponent(cpeecallback) +  '"]').contents().find("#form");
-  var formdatajson = getFormData($form);
-  alert(JSON.stringify(formdatajson))
-
-  $.ajax({
-    type: "PUT",
-    url: decodeURIComponent(cpeecallback),
-    contentType: "application/json",
-    data: JSON.stringify(formdatajson),
-    success: function (data) {
-      //close form
-      $(menuitem).remove();
-    }
-  });
-  */
-  
-  //remove from Server
-  $.ajax({
-    type: "Post",
-    url: "",
-		headers: {"content-id": "deleteframe"},
-    data: {lx: lx, ly: ly},
-    success: function (data) {      
-    }
-  });
-}
-
-
-
-
-/*
-document.addEventListener('keyup', (event) => {
-    if (event.key == 'ArrowUp') {
-        alert("ArrowUp");
-        makeFrame(0,0,0,0, "a")
-    }
-    if (event.key == 'ArrowDown') {
-        alert("ArrowDown");
-        
-        makeFrame(0,0,1,1, "b")
-    }
-    if (event.key == 'ArrowLeft') {
-        alert("ArrowLeft");
-        
-        makeFrame(1,1,2,2, "c")
-    }
-    
-    if (event.key == 'ArrowRight') {
-        alert(JSON.stringify(window.storage));
-    }
-});
-*/
-  

template/template.html

@@ -38,9 +38,7 @@
 
     <!-- custom stuff, play arround  -->
     <script type="text/javascript" src="../js/ui.js"></script>
-    <script type="text/javascript" src="../js/ui2.js"></script>
     <script type="text/javascript" src="../js/language.js"></script>
-    <link rel="stylesheet" href="../css/frames.css" type="text/css"/>
     <link class='custom' rel="stylesheet" href="" type="text/css"/>