Buttons koennen nun mittels bool sichtbar gemacht werden, mit handler begonnen

frames

@@ -30,6 +30,8 @@ class Get < Riddl::Implementation
   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')))
     else
       Riddl::Parameter::Complex.new('ui','text/html',File.open(File.join(__dir__,'template','template.html')))
     end
@@ -55,11 +57,23 @@ class Put < Riddl::Implementation
     nil
   end
 
-  def headers
-    Riddl::Header.new('CPEE-CALLBACK', 'true')
+  
+  #def headers
+  #  Riddl::Header.new('CPEE-CALLBACK', 'true')
+  #end
+end
+
+
+#https://coderwall.com/p/atyfyq/ruby-string-to-boolean
+class String
+  def to_bool
+    return true if self == true || self =~ (/(true|t|yes|y|1)$/i)
+    return false if self == false || self.empty? || self =~ (/(false|f|no|n|0)$/i)
+    raise ArgumentError.new("invalid value for Boolean: \"#{self}\"")
   end
 end
 
+
 class NewFrame < Riddl::Implementation
   def response    
     path = File.join('data',@r.last,'frames.json')
@@ -85,7 +99,38 @@ class NewFrame < Riddl::Implementation
 #     }
     urls = JSON::parse(@p[4].value);
     
-    hash = {lx: @p[0].value.to_i, ly: @p[1].value.to_i, rx: (@p[0].value.to_i + @p[2].value.to_i - 1), ry: (@p[1].value.to_i + @p[3].value.to_i - 1), url: urls};
+    hash = {lx: @p[0].value.to_i, ly: @p[1].value.to_i, rx: (@p[0].value.to_i + @p[2].value.to_i - 1), ry: (@p[1].value.to_i + @p[3].value.to_i - 1), url: urls, showbutton: @p[5].value.to_bool};
+    data_hash["data"].push(hash)
+    File.write(path, JSON.dump(data_hash))
+    
+    #only send active url to client
+    infofile = File.join('data',@r.last,'info.json')
+    infojson = JSON::parse(File.read(infofile))
+    hash["url"] = urls[infojson["lang"]]
+
+    @a[0].send(JSON.dump(hash))
+    nil
+ 
+  end
+end
+
+
+
+class NewFramePut < Riddl::Implementation
+  def response    
+    path = File.join('data',@r.last,'frames.json')
+    file = File.read(path)
+    data_hash = JSON::parse(file)
+    
+    data_hash["data"].each do | c |
+      if doOverlap(c['lx'], c['ly'], c['rx'], c['ry'], @p[0].value.to_i, @p[1].value.to_i, (@p[0].value.to_i + @p[2].value.to_i - 1), (@p[1].value.to_i + @p[3].value.to_i - 1))
+        data_hash["data"].delete(c)
+      end
+    end
+    
+    urls = JSON::parse(@p[4].value);
+    
+  hash = {lx: @p[0].value.to_i, ly: @p[1].value.to_i, rx: (@p[0].value.to_i + @p[2].value.to_i - 1), ry: (@p[1].value.to_i + @p[3].value.to_i - 1), url: urls, showbutton: @p[5].value.to_bool, callback: @h['CPEE_CALLBACK']};
     data_hash["data"].push(hash)
     File.write(path, JSON.dump(data_hash))
     
@@ -98,6 +143,29 @@ class NewFrame < Riddl::Implementation
     nil
  
   end
+  
+  def headers
+    Riddl::Header.new('CPEE-CALLBACK', 'true')
+  end
+end
+
+
+class DeleteFrame < Riddl::Implementation
+  def response    
+    puts "deleting"
+    
+    path = File.join('data',@r.last,'frames.json')
+    file = File.read(path)
+    data_hash = JSON::parse(file)
+    
+    data_hash["data"].each do | c |
+      if doOverlap(c['lx'], c['ly'], c['rx'], c['ry'], @p[0].value.to_i, @p[1].value.to_i, (@p[0].value.to_i + 1), (@p[1].value.to_i + 1))
+        data_hash["data"].delete(c)
+      end
+    end
+    
+    File.write(path, JSON.dump(data_hash))
+  end
 end
 
 
@@ -257,11 +325,54 @@ class GetButton < Riddl::Implementation #{{{
   end
 end #}}}
 
+
+
+
+
+
+
+class Handler < Riddl::Implementation
+  def response    
+  
+      topic         = @p[1].value
+      event_name    = @p[2].value
+      log_dir       = @a[0]
+      template      = @a[1]
+      notification  = JSON.parse(@p[3].value.read)
+      
+      
+      instancenr = notification['instance']
+      content = notification['content']
+      activity = content['activity']
+      parameters = content['parameters']
+      receiving = content['received']
+  
+      #puts instancenr
+      #puts activity
+      
+      
+      if content['values']&.any?
+        puts alldata['ausfuehrungen']
+      end
+  
+  
+    nil
+  end
+end
+
+
+
+
+
+
+
+
 class SSE < Riddl::SSEImplementation #{{{
   def onopen
     signals = @a[0]
     signals.add self
     send 'started'
+    true
   end
 
   def onclose
@@ -314,8 +425,21 @@ server = Riddl::Server.new(File.join(__dir__,'/frames.xml'), :host => 'localhost
       opts[:signals][idx] ||= Signaling.new
 
       run Get if get
-      run NewFrame, opts[:signals][idx] if post 'frame'
       run Put, opts[:signals][idx] if put 'input'
+      
+      run NewFrame, opts[:signals][idx] if post 'frame'
+      run NewFramePut, opts[:signals][idx] if put 'frame'
+      
+      run DeleteFrame, opts[:signals][idx] if post 'deleteframe'
+      
+      
+      
+      on resource 'handler' do
+        run Handler if post 
+      end 
+      
+      
+      
       run Delete, opts[:signals][idx] if delete 'opa'
       run Delete, opts[:signals][idx] if delete 'opb'
       on resource 'sse' do

frames.xml

@@ -27,9 +27,14 @@
   <message name="frame">
     <parameter name="lx" type="string"/>
     <parameter name="ly" type="string"/>
-    <parameter name="rx" type="string"/>
-    <parameter name="ry" type="string"/>
+    <parameter name="x_amount" type="string"/>
+    <parameter name="y_amount" type="string"/>
     <parameter name="url" type="string"/>
+    <parameter name="button" type="string"/>
+  </message>
+  <message name="deleteframe">
+    <parameter name="lx" type="string"/>
+    <parameter name="ly" type="string"/>
   </message>
   <message name="ui">
     <parameter name="ui" mimetype="text/html"/>
@@ -63,8 +68,19 @@
   <resource>
     <resource>
       <get out="ui"/>
-      <put in='input' out="callback"/>
+      <put in='input'/>
+      
+      <put in='frame' out="callback"/>
       <post in='frame'/>
+      <post in='deleteframe'/>
+      
+      
+      
+      
+      
+      
+      
+      
       <delete in='opa'/>
       <delete in='opb'/>
       <resource relative='sse'>
@@ -88,6 +104,10 @@
       <resource relative="frames.json">
         <get out="json"/>
       </resource>
+      
+      <resource relative='handler'>
+        <post />
+      </resource>
     </resource>
   </resource>
 </description>

template/css/design.css

@@ -1,33 +0,0 @@
-*{
-  box-sizing: border-box;
-  padding: 0;
-  margin: 0;
-}
-
-
-:root {
-  --grid-cols: 1;
-  --grid-rows: 1;
-}
-
-#container {
-  display: grid;
-  grid-template-rows: repeat(var(--grid-rows), 1fr);
-  grid-template-columns: repeat(var(--grid-cols), 1fr);
-  width: 100vw;
-  height: 100vh;
-}
-
-.grid-item {
-  border: none;
-  background-color: #ddd;
-  text-align: center;
-}
-
-.grid-item-invis{
-  border: none;
-  text-align: center;
-  width: 0px;
-  height: 0px;
-  background-color: #fff;
-}

template/css/ui.css

@@ -1,112 +0,0 @@
-:root {
-  --content-height: 100vh;
-  --language-height: 10vh;
-  --bottom-height: 10vh;
-  --nav-top: 25vh;
-}
-
-[is="x-ui"] {
-  font-family: sans-serif;
-  font-size: 1.5em;
-}
-
-body {
-  margin: 0;
-  padding: 0;
-}
-.hidden {
-  display: none !important;
-}
-
-#content {
-  display: table;
-  padding: 0;
-  margin: 0;
-  width: 100%;
-  height: var(--content-height);
-}
-#content .added {
-  background-repeat: no-repeat;
-  background-position: center;
-  background-size: contain;
-  width: 100vw;
-  height: 100vh;
-}
-
-#control {
-  position: absolute;
-  padding: 0;
-  margin: 0;
-  height: var(--bottom-height);
-  bottom: 0;
-  width: 100%;
-}
-#control > button {
-  position: absolute;
-  bottom: 0.5em;
-  outline: 0;
-}
-#control > button::-moz-focus-inner {
-  border: 0;
-}
-#control button[name=previous] {
-  left: 4em;
-}
-#control button[name=first] {
-  left: 1em;
-}
-#control button[name=error] {
-  left: 50%;
-  transform: translate(-50%, 0);
-}
-#control button[name=next] {
-  right: 4em;
-}
-#control button[name=last] {
-  right: 1em;
-}
-
-#reasons {
-  position: absolute;
-  bottom: var(--bottom-height);
-  left: 50%;
-  transform: translate(-50%, 0);
-}
-#reasons button {
-  width: 100%;
-}
-
-#nope {
-  display: table-cell;
-  font-weight: bold;
-  vertical-align: middle;
-  text-align: center;
-  height: 100%;
-  width: 100%;
-  font-size: 3em;
-}
-
-#nav {
-  position: absolute;
-  right: 0;
-  top: var(--nav-top);
-  left: 0;
-}
-
-#languages {
-  position: absolute;
-  right: 0;
-  top: 0;
-
-  flex: 0 1 auto;
-  text-align: right;
-  font-size: var(--language-height);
-}
-@font-face {
-  font-family: flag-font;
-  src: local("BabelStoneFlags.ttf") format("truetype");
-}
-.lang-select-item {
-  padding-right: 0.1em;
-  font-family: flag-font;
-}

template/js/ui.js

@@ -13,7 +13,7 @@ function showDocument() {
         url: 'frames.json',
         success: function(ret2) {
           for (i in ret2.data) {
-            makeFrame(ret2.data[i].lx,ret2.data[i].ly,ret2.data[i].rx,ret2.data[i].ry, ret2.data[i].url);
+            makeFrame(ret2.data[i].lx,ret2.data[i].ly,ret2.data[i].rx,ret2.data[i].ry, ret2.data[i].url, ret2.data[i].callback, ret2.data[i].showbutton);
           }
         }
       });
@@ -138,7 +138,7 @@ function init() {
         try {
           //alert(e.data)
           var frd = JSON.parse(e.data)
-          makeFrame(frd.lx,frd.ly,frd.rx,frd.ry, frd.url);
+          makeFrame(frd.lx,frd.ly,frd.rx,frd.ry, frd.url, frd.callback);
         }
         catch (e) {
         }

template/js/ui2.js

@@ -32,7 +32,7 @@ function hideRectangel(l1x, l1y, r1x, r1y){
 */
 
 
-function makeFrame(lx, ly, rx, ry, content = "") {
+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++) {
@@ -53,14 +53,39 @@ function makeFrame(lx, ly, rx, ry, content = "") {
   let cell = document.createElement("div");
   cell.classList.add("grid-item");
   cell.classList.add("item" + lx + "-" + ly);
-  $(cell).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)});
+
+  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% src='" + content + "' title=''></iframe>");
+    $(".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{
@@ -70,6 +95,65 @@ function makeFrame(lx, ly, rx, ry, content = "") {
   
 };
 
+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') {

template/template.html

@@ -40,12 +40,18 @@
     <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/design.css" type="text/css"/>
+    <link rel="stylesheet" href="../css/frames.css" type="text/css"/>
     <link class='custom' rel="stylesheet" href="" type="text/css"/>
+    
+    
+    
+    <!-- Forms  
+    <script src='https://centurio.work/out/forms/js/formio.full.min.js'></script>
+    -->
     <script>
       if (location.href.match(/\/$/) == null) {
         location.href = location.href + '/';
-      }
+        }
     </script>
   </head>
   <body is="x-ui">