New drawing witout unnecesary grid items, added language support

frames

@@ -22,6 +22,10 @@ require 'xml/smart'
 require 'riddl/server'
 require 'fileutils'
 require 'typhoeus'
+
+# process:
+# https://centurio.work/customers/evva/flow/?monitor=https://centurio.work/flow-test/engine/729/
+
 class Get < Riddl::Implementation
   def response
     if @r[0] == 'test'
@@ -34,15 +38,16 @@ end
 
 class Put < Riddl::Implementation
   def response
-    puts "AAAAAAAAAAAAAAAAAAA"
     Dir.mkdir(File.join('data',@r.last)) rescue nil
     File.write(File.join('data',@r.last,'style.url'),@p[0].value)
+    
     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,'info.json'),JSON.dump(JSON.parse('{"x_amount":' + @p[2].value + ', "y_amount":' + @p[3].value + ', "lang":"' + @p[4].value  + '", "langs":["' + @p[4].value +  '"]}')))
 
-    if @p[2]&.name == 'info'
-      File.write(File.join('data',@r.last,'info.json'),@p[2].value)
-    end
 
     File.write(File.join('data',@r.last,'callback'),@h['CPEE_CALLBACK'])
 
@@ -61,19 +66,33 @@ class NewFrame < Riddl::Implementation
     file = File.read(path)
     data_hash = JSON::parse(file)
     
-    #puts "Before " + JSON.dump(data_hash);
-    
     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
     
-    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: @p[4].value};
-    
+#    example
+#    myObj = {
+#      "lx":3,
+#      "ly":3,
+#      "rx":3,
+#      "ry":3,
+#      "url": {
+#        "de-at":"xyz.at",
+#        "en-us":"xyz.com"
+#      }
+#     }
+    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};
+    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
@@ -116,6 +135,27 @@ class Delete < Riddl::Implementation
   end
 end
 
+class GetFrames < Riddl::Implementation #{{{
+  def response
+    fname = File.join('data',@r[-2],'frames.json')
+    if File.exists? fname
+    
+      infofile = File.join('data',@r[-2],'info.json')
+      infojson = JSON::parse(File.read(infofile))
+      
+      #remove not used languages
+      file = JSON::parse(File.read(fname))
+      file["data"].each do |child|      
+        child["url"] = child["url"][infojson["lang"]]
+      end
+      
+      Riddl::Parameter::Complex.new('value','application/json',JSON.dump(file))
+    else
+      @status = 404
+    end
+  end
+end #}}}
+
 class GetInfo < Riddl::Implementation #{{{
   def response
     fname = File.join('data',@r[-2],'info.json')
@@ -142,6 +182,32 @@ class GetLangs < Riddl::Implementation #{{{
     end
   end
 end #}}}
+
+class SetLang < Riddl::Implementation #{{{
+  def response
+    fname = File.join('data',@r[-2],'info.json')
+    if File.exists? fname
+      infojson = JSON::parse(File.read(fname))
+      infojson["lang"] = @p[0].value
+      
+      
+      #add to langs
+      if !infojson["langs"].include?(@p[0].value)
+        infojson["langs"].push(@p[0].value)
+      end
+      
+      File.write(fname, JSON.dump(infojson))
+      
+      
+      
+      @a[0].send('reset')
+      nil
+    else
+      @status = 404
+    end
+  end
+end #}}}
+
 class GetStyle < Riddl::Implementation #{{{
   def response
     fname = File.join('data',@r[-2],'style.url')
@@ -257,6 +323,7 @@ server = Riddl::Server.new(File.join(__dir__,'/frames.xml'), :host => 'localhost
       end
       on resource 'languages' do
         run GetLangs if get
+        run SetLang, opts[:signals][idx] if post 'lang'
       end
       on resource 'style.url' do
         run GetStyle if get
@@ -264,6 +331,10 @@ server = Riddl::Server.new(File.join(__dir__,'/frames.xml'), :host => 'localhost
       on resource 'info.json' do
         run GetInfo if get
       end
+      on resource 'frames.json' do
+        run GetFrames 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

@@ -20,9 +20,9 @@
   <message name="input">
     <parameter name="style_url" type="string"/>
     <parameter name="document_url" type="string"/>
-    <optional>
-      <parameter name="info" type="string"/>
-    </optional>
+    <parameter name="x_amount" type="string"/>
+    <parameter name="y_amount" type="string"/>
+    <parameter name="lang" type="string"/>
   </message>
   <message name="frame">
     <parameter name="lx" type="string"/>
@@ -45,6 +45,9 @@
       <xi:include href="rngs/langs.rng"/>
     </parameter>
   </message>
+  <message name="lang">
+    <parameter name="lang" type="string"/>
+  </message>
   <message name="opa">
     <parameter name="op" fixed="error"/>
     <parameter name="reason" type="string"/>
@@ -69,6 +72,7 @@
       </resource>
       <resource relative="languages">
         <get out="langs"/>
+        <post in='lang'/>
       </resource>
       <resource relative="style.url">
         <get out="url"/>
@@ -81,6 +85,9 @@
       <resource relative="info.json">
         <get out="json"/>
       </resource>
+      <resource relative="frames.json">
+        <get out="json"/>
+      </resource>
     </resource>
   </resource>
 </description>

template/js/ui.js

@@ -3,6 +3,30 @@ var reason ="";
 
 function showDocument() {
   
+  $.ajax({
+    type: "GET",
+    url: 'info.json',
+    success: function(ret) {
+      makeGrid(ret.x_amount, ret.y_amount);
+      $.ajax({
+        type: "GET",
+        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);
+          }
+        }
+      });
+    },
+    error: function() {
+      reason = '';
+      clearDocument();
+    }
+  });
+  
+  
+  
+  
   /*
   $.ajax({
     type: "GET",
@@ -104,19 +128,20 @@ function init() {
     if (e.data == 'new') {
       reason = '';
       showDocument();
-      alert("Test1")
     }
     if (e.data == 'reset') {
       reason = '';
-      console.log('xxx');
-      clearDocument();
-      alert("TEST2")
+      showDocument();
     }
     else{
       if(e.data != "keepalive" && e.data != "started"){
-      alert(e.data)
-        var frd = JSON.parse(e.data)
-        makeFrame(frd.lx,frd.ly,frd.rx,frd.ry, frd.url);
+        try {
+          //alert(e.data)
+          var frd = JSON.parse(e.data)
+          makeFrame(frd.lx,frd.ly,frd.rx,frd.ry, frd.url);
+        }
+        catch (e) {
+        }
       }
         
     }
@@ -130,7 +155,22 @@ function init() {
 
 
 
-
+function makeGrid(x, y) {
+  const container = document.getElementById("container");
+  container.style.setProperty('--grid-rows', y);
+  container.style.setProperty('--grid-cols', x);
+  /*
+  for (c = 0; c < (x * y); c++) {
+    let cell = document.createElement("div");
+    //cell.innerText = (c + 1);
+    cell.classList.add("item" + (c% y) + "-" + (Math.floor(c / y ))); 
+    
+    cell.classList.add("grid-item");
+
+    container.appendChild(cell);
+  };
+  */
+};
 
 
 

template/js/ui2.js

@@ -13,12 +13,13 @@ function doOverlap(l1x, l1y, r1x, r1y, l2x, l2y, r2x, r2y)
         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)).css({"display": "block", "border-style": "none", "border-color": "black", "grid-area": "auto"});
-      $(".item" + (i) + "-" + (k)).text("");
+      $(".item" + (i) + "-" + (k)).remove();
+      //$(".item" + (i) + "-" + (k)).css({"display": "block", "border-style": "none", "border-color": "black", "grid-area": "auto"});
+      //$(".item" + (i) + "-" + (k)).text("");
     }
 }
 
@@ -28,7 +29,7 @@ function hideRectangel(l1x, l1y, r1x, r1y){
       if(!(i == l1x && k == l1y))
         $(".item" + (i) + "-" + (k)).hide(100);
 }
-
+*/
 
 
 function makeFrame(lx, ly, rx, ry, content = "") {
@@ -36,7 +37,8 @@ function makeFrame(lx, ly, rx, ry, content = "") {
   //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)){
-      clearRectangel(window.storage[i].lx, window.storage[i].ly, window.storage[i].rx, window.storage[i].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;
     }
@@ -45,11 +47,27 @@ function makeFrame(lx, ly, rx, ry, content = "") {
   //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);
+  $(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)});
+  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)});
+  //$(".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>");
+    //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)
+  }
   
-  $(".item" + lx + "-" + ly).html("<iframe width=100% height=100% src='" + content + "' title=''></iframe>");
-  hideRectangel(lx, ly, rx, ry)
 };
 
 /*

template/template.html

@@ -51,28 +51,6 @@
   <body is="x-ui">
     <div id="container">
     </div>
-
-<script>
-  const container = document.getElementById("container");
-
-  function makeRows(rows, cols) {
-    container.style.setProperty('--grid-rows', rows);
-    container.style.setProperty('--grid-cols', cols);
-    for (c = 0; c < (rows * cols); c++) {
-      let cell = document.createElement("div");
-      //cell.innerText = (c + 1);
-      cell.classList.add("item" + (c% cols) + "-" + (Math.floor(c / cols ))); 
-      
-      cell.classList.add("grid-item");
-
-      container.appendChild(cell);
-    };
-  };
-
-  makeRows(6, 3);
-  //makeRows(200, 300);
-
-</script>
 <!--
     <div id="languages" class="hidden"></div>