cpee-frames 1.0.0

data/ui/js/test.js

@@ -0,0 +1,68 @@
+
+
+document.addEventListener('keyup', (event) => {
+  if (event.key == 'ArrowRight') {
+    $.ajax({
+      type: "PUT",
+      url: "../Manuel",
+      headers: {"content-id": "input"},
+      data: { style_url: "mystyleURL", document_url: 'www.nixdrin.at' },
+      success: function(res) {
+        location.reload();
+      },
+      error: function (request, status, error) {
+        alert(request.responseText + status + error);
+      }
+    });
+  }
+  
+    if (event.key == 'ArrowUp') {
+
+      $.ajax({
+        type: "POST",
+        url: "../Manuel",
+        headers: {"content-id": "frame"},
+        data: { lx: "2", ly: '0', rx: '1', ry: '2', url: 'https://centurio.work/' },
+        success: function(res) {
+          location.reload();
+        },
+        error: function (request, status, error) {
+          alert(request.responseText + status + error);
+        }
+      });
+    }
+    
+    
+    if (event.key == 'ArrowDown') {
+      $.ajax({
+        type: "POST",
+        url: "../Manuel",
+        headers: {"content-id": "frame"},
+        data: { lx: "0", ly: '0', rx: '2', ry: '2', url: 'https://centurio.work/flow-test/' },
+        success: function(res) {
+          location.reload();
+        },
+        error: function (request, status, error) {
+          alert(request.responseText + status + error);
+        }
+      });
+    }
+    
+    if (event.key == 'ArrowLeft') {
+      $.ajax({
+        type: "POST",
+        url: "../Manuel",
+        headers: {"content-id": "frame"},
+        data: { lx: "1", ly: '1', rx: '2', ry: '2', url: 'https://centurio.work/customers/evva/was/ui/' },
+        success: function(res) {
+          location.reload();
+        },
+        error: function (request, status, error) {
+          alert(request.responseText + status + error);
+        }
+      });
+    }
+  
+    
+});
+   

data/ui/js/ui.js

@@ -0,0 +1,374 @@
+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 = "", defaultpara = "", showbutton = "", style = "") {
+
+
+  //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;
+    }
+  }
+  console.log(content);
+  if(content != "empty"){
+    //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({"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 != ""){
+      var fullurl = encodeURI(content);
+      //encode default parameter in URL
+      if(defaultpara != "{}"){
+        var fullurl = fullurl + "?";
+        for (var key in defaultpara) {
+          if (defaultpara.hasOwnProperty(key)) {
+            fullurl = fullurl + key + "=" +  encodeURIComponent(defaultpara[key]) + "&";
+           }
+        }
+        fullurl = fullurl.slice(0, -1);
+      }
+
+      $(".item" + lx + "-" + ly).html("<iframe style='height: 100%; width: 100%' name='" + id +"' id='" + id +"' src='" + fullurl + "' title='' frameBorder='0' ></iframe>");
+
+      if(showbutton){
+        $(".item" + lx + "-" + ly).append('<button class="formbutton" type="button" onclick="sendForm(\'' + '.item' + lx + '-' + ly +'\', \'' + encodeURIComponent(id) + '\', \'' + lx  + '\', \'' + ly  + '\')">' + showbutton + '</button>')
+      }
+
+      if(style){
+        $(".item" + lx + "-" + ly).find("iframe").on('load', function(){
+          $(this).contents().find("head").append($("<link/>",
+            { rel: "stylesheet", href: style, type: "text/css" }
+          ));
+        });
+      }
+
+
+      //hideRectangel(lx, ly, rx, ry)
+    }
+    else{
+      $(".item" + lx + "-" + ly).html("No language available.<br> Nicht in der Sprache verfügbar.");
+    }
+  }
+
+}
+
+function sendForm(menuitem, cpeecallback,lx,ly){
+  //Call iframe function that button has been pressed iframe should send json back
+  //document.getElementById(decodeURIComponent(cpeecallback)).contentWindow.buttonPressed(cpeecallback);
+
+
+  var formdata;
+ if (typeof document.getElementById(decodeURIComponent(cpeecallback)).contentWindow.buttonPressed !== 'undefined' && $.isFunction(document.getElementById(decodeURIComponent(cpeecallback)).contentWindow.buttonPressed)) {
+    var formdata = document.getElementById(decodeURIComponent(cpeecallback)).contentWindow.buttonPressed();
+  }
+
+
+
+  $.ajax({
+    type: "PUT",
+    url: decodeURIComponent(cpeecallback),
+    contentType: "application/json",
+    data: JSON.stringify(formdata),
+    success: function (data) {
+    }
+  });
+
+
+
+
+  //Its a design question if removing the frame should be done within centurio, do have more controll, or automatic within code?
+  //close frame
+
+  $(menuitem).remove();
+  //remove frame from Server
+  $.ajax({
+    type: "Post",
+    url: "",
+		headers: {"content-id": "deleteframe"},
+    data: {lx: lx, ly: ly},
+    success: function (data) {
+    }
+  });
+
+}
+
+function sendData(dataelement, datavalue){
+
+  $.ajax({
+    type: "Get",
+    url: 'cpeeinstance.url',
+    success: function(ret) {
+      $.ajax({
+        type: "Put",
+        url: ret + "/properties/dataelements/" + dataelement,
+        data: {value: datavalue},
+        success: function (data) {
+          alert("Data Sent")
+        }
+      });
+    }
+  });
+
+}
+
+function sendCallback(callbackUrl, jsonToSend){
+
+  $.ajax({
+    type: "PUT",
+    url: callbackUrl,
+    contentType: "application/json",
+    data: jsonToSend,
+    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',
+    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();
+    }
+  });
+
+
+
+
+  /*
+  $.ajax({
+    type: "GET",
+    url: 'languages',
+    success: function(ret) {
+      $('#content .added').remove();
+      $('#control .added').remove();
+      var ctemplate = $('#content template')[0];
+      var btemplate = $('#control template')[0];
+      var promises = [];
+      $('language',ret).each(function(i,e){
+        var cclone = document.importNode(ctemplate.content, true);
+        var bclone = document.importNode(btemplate.content, true);
+        promises.push(new Promise((resolve, reject) => {
+          $('> *',cclone).each(function(j,c){
+            $(c).addClass('added');
+            $(c).attr('lang', e.textContent);
+            $.ajax({
+              type: "GET",
+              url: 'documents/' + e.textContent,
+              success: function(doc) {
+                if (c.nodeName == 'IFRAME') {
+                  $(c).attr('src',doc);
+                } else {
+                  $('iframe',c).attr('src',doc);
+                }
+                $('#content').append(c);
+                resolve(true);
+              },
+              error: function() {
+                reject(false);
+                setTimeout(function(){ showDocument(); }, 500);
+              }
+            });
+          });
+        }));
+        promises.push(new Promise((resolve, reject) => {
+          $('> *',bclone).each(function(j,c){
+            $(c).addClass('added');
+            $(c).attr('lang', e.textContent);
+            $.ajax({
+              type: "GET",
+              url: 'buttons/' + e.textContent,
+              success: function(but) {
+                if (c.nodeName == 'BUTTON') {
+                  $(c).text(but);
+                } else {
+                  $('button',c).text(but);
+                }
+                $('#control').append(c);
+                resolve(true);
+              },
+              error: function() {
+                resolve(true);
+              }
+            });
+          });
+        }));
+      });
+      Promise.all(promises).then((values) => {
+        $.ajax({
+          type: "GET",
+          url: 'style.url',
+          success: function(ret) {
+            $('head link.custom').attr('href',ret);
+          }
+        });
+        lang_init('#content','#languages');
+        $('#languages').removeClass('hidden');
+        $('#nope').addClass('hidden');
+      });
+    },
+    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 reloadAllFrames() {
+  location.reload();
+}
+
+
+function init() {
+  es = new EventSource('sse/');
+  es.onopen = function() {
+    showDocument();
+    // load
+  };
+  es.onmessage = function(e) {
+    if (e.data == 'new') {
+      reason = '';
+      showDocument();
+    }
+    if (e.data == 'reset') {
+      reason = '';
+      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, frd.default, frd.showbutton, frd.style);
+        }
+        catch (e) {
+        }
+      }
+    }
+  };
+  es.onerror = function() {
+    reason = 'Server down.';
+    clearDocument();
+    setTimeout(init, 10000);
+  };
+}
+
+
+
+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);
+  };
+  */
+};
+
+
+//https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Function/caller
+function sendJson(callback, jsonToSend){
+  $.ajax({
+    type: "PUT",
+    url: callback,
+    contentType: "application/json",
+    data: JSON.stringify(jsonToSend),
+    success: function (data) {
+
+    }
+  });
+}
+
+
+$(document).ready(function() {
+  init();
+});
+

metadata

@@ -0,0 +1,98 @@
+--- !ruby/object:Gem::Specification
+name: cpee-frames
+version: !ruby/object:Gem::Version
+  version: 1.0.0
+platform: ruby
+authors:
+- Manuell Gall
+- Juergen 'eTM' Mangler
+autorequire: 
+bindir: tools
+cert_chain: []
+date: 2023-02-21 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: riddl
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '0.99'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '0.99'
+- !ruby/object:Gem::Dependency
+  name: json
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '2.1'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '2.1'
+description: Flexibly arrange and display user interface components in a grid from
+  executable process models. Very useful if you want to build dashboards.
+email: gall.manuel.89@gmail.com
+executables:
+- cpee-frames
+extensions: []
+extra_rdoc_files:
+- README.md
+files:
+- AUTHORS
+- LICENSE
+- README.md
+- Rakefile
+- cpee-frames.gemspec
+- lib/cpee-frames/frames.xml
+- lib/cpee-frames/implementation.rb
+- lib/cpee-frames/ui/framedata.html
+- lib/cpee-frames/ui/menu.html
+- lib/cpee-frames/ui/template.html
+- lib/cpee-frames/ui/test.html
+- lib/cpee-frames/ui/tutorial.html
+- server/frames
+- server/frames.conf
+- tools/cpee-frames
+- ui/css/favicon-16x16.png
+- ui/css/favicon-32x32.png
+- ui/css/favicon-96x96.png
+- ui/css/frames.css
+- ui/js/frame_data.js
+- ui/js/language.js
+- ui/js/test.js
+- ui/js/ui.js
+homepage: https://github.com/ManuelGall/cpee-frames
+licenses:
+- GPL-3.0
+metadata: {}
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '3.0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubygems_version: 3.1.2
+signing_key: 
+specification_version: 4
+summary: Dashboard management service with UI and backend for the cpee.org family
+  of workflow management tools
+test_files: []