|
@@ -2,20 +2,20 @@ var reason ="";
|
|
var storage = []; //{col:1, row:1, colamount:1, rowamount: 1}];
|
|
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)
|
|
|
|
|
|
+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;
|
|
return false;
|
|
- // If one rectangle is above other
|
|
|
|
- if (l1y > r2y || l2y > r1y)
|
|
|
|
|
|
+ // If one rectangle is above other
|
|
|
|
+ if (l1y > r2y || l2y > r1y)
|
|
return false;
|
|
return false;
|
|
- return true;
|
|
|
|
|
|
+ return true;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
function makeFrame(lx, ly, rx, ry, content = "", id = "", defaultpara = "", showbutton = "", style = "") {
|
|
function makeFrame(lx, ly, rx, ry, content = "", id = "", defaultpara = "", showbutton = "", style = "") {
|
|
-
|
|
|
|
-
|
|
|
|
|
|
+
|
|
|
|
+
|
|
//check if rects overlap if they do remove old ones
|
|
//check if rects overlap if they do remove old ones
|
|
for (i = 0; i < window.storage.length; i++) {
|
|
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)){
|
|
if(doOverlap(window.storage[i].lx, window.storage[i].ly, window.storage[i].rx, window.storage[i].ry, lx, ly, rx, ry)){
|
|
@@ -28,10 +28,10 @@ function makeFrame(lx, ly, rx, ry, content = "", id = "", defaultpara = "", show
|
|
console.log(content);
|
|
console.log(content);
|
|
if(content != "empty"){
|
|
if(content != "empty"){
|
|
console.log("drinn");
|
|
console.log("drinn");
|
|
-
|
|
|
|
|
|
+
|
|
//add new ellement to storage
|
|
//add new ellement to storage
|
|
window.storage.push({lx:lx, ly:ly, rx:rx, ry: ry})
|
|
window.storage.push({lx:lx, ly:ly, rx:rx, ry: ry})
|
|
-
|
|
|
|
|
|
+
|
|
const container = document.getElementById("container");
|
|
const container = document.getElementById("container");
|
|
let cell = document.createElement("div");
|
|
let cell = document.createElement("div");
|
|
cell.classList.add("grid-item");
|
|
cell.classList.add("grid-item");
|
|
@@ -40,27 +40,27 @@ function makeFrame(lx, ly, rx, ry, content = "", id = "", defaultpara = "", show
|
|
spancol= ""
|
|
spancol= ""
|
|
if(rx-lx+1 > 1){
|
|
if(rx-lx+1 > 1){
|
|
spancol = " / span " + (rx-lx+1);
|
|
spancol = " / span " + (rx-lx+1);
|
|
-
|
|
|
|
|
|
+
|
|
}
|
|
}
|
|
-
|
|
|
|
|
|
+
|
|
spanrow= ""
|
|
spanrow= ""
|
|
if(ry-ly+1 > 1){
|
|
if(ry-ly+1 > 1){
|
|
spanrow = " / span " + (ry-ly+1);
|
|
spanrow = " / span " + (ry-ly+1);
|
|
}
|
|
}
|
|
-
|
|
|
|
|
|
+
|
|
jQuery.cssNumber.gridColumnStart = true;
|
|
jQuery.cssNumber.gridColumnStart = true;
|
|
jQuery.cssNumber.gridColumnEnd = true;
|
|
jQuery.cssNumber.gridColumnEnd = true;
|
|
jQuery.cssNumber.gridRowStart = true;
|
|
jQuery.cssNumber.gridRowStart = true;
|
|
jQuery.cssNumber.gridRowEnd = true;
|
|
jQuery.cssNumber.gridRowEnd = true;
|
|
-
|
|
|
|
|
|
+
|
|
$(cell).css({"grid-column": (lx+1) + spancol, "grid-row": ly+1 + spanrow});
|
|
$(cell).css({"grid-column": (lx+1) + spancol, "grid-row": ly+1 + spanrow});
|
|
-
|
|
|
|
|
|
+
|
|
container.appendChild(cell);
|
|
container.appendChild(cell);
|
|
//Create new element with width, heigth and content
|
|
//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 != ""){
|
|
if(content != null && content != ""){
|
|
-
|
|
|
|
|
|
+
|
|
var fullurl = content;
|
|
var fullurl = content;
|
|
//encode default parameter in URL
|
|
//encode default parameter in URL
|
|
if(defaultpara != "{}"){
|
|
if(defaultpara != "{}"){
|
|
@@ -71,46 +71,46 @@ function makeFrame(lx, ly, rx, ry, content = "", id = "", defaultpara = "", show
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
-
|
|
|
|
-
|
|
|
|
-
|
|
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+
|
|
fullurl = encodeURI(fullurl);
|
|
fullurl = encodeURI(fullurl);
|
|
- $(".item" + lx + "-" + ly).html("<iframe width=100% height=100% name='" + id +"' id='" + id +"' src='" + fullurl + "' title='' frameBorder='0' ></iframe>");
|
|
|
|
-
|
|
|
|
|
|
+ $(".item" + lx + "-" + ly).html("<iframe name='" + id +"' id='" + id +"' src='" + fullurl + "' title='' frameBorder='0' ></iframe>");
|
|
|
|
+
|
|
if(showbutton){
|
|
if(showbutton){
|
|
$(".item" + lx + "-" + ly).append('<button class="formbutton" type="button" onclick="sendForm(\'' + '.item' + lx + '-' + ly +'\', \'' + encodeURIComponent(id) + '\', \'' + lx + '\', \'' + ly + '\')">' + showbutton + '</button>')
|
|
$(".item" + lx + "-" + ly).append('<button class="formbutton" type="button" onclick="sendForm(\'' + '.item' + lx + '-' + ly +'\', \'' + encodeURIComponent(id) + '\', \'' + lx + '\', \'' + ly + '\')">' + showbutton + '</button>')
|
|
}
|
|
}
|
|
-
|
|
|
|
- if(style){
|
|
|
|
|
|
+
|
|
|
|
+ if(style){
|
|
$(".item" + lx + "-" + ly).find("iframe").on('load', function(){
|
|
$(".item" + lx + "-" + ly).find("iframe").on('load', function(){
|
|
- $(this).contents().find("head").append($("<link/>",
|
|
|
|
|
|
+ $(this).contents().find("head").append($("<link/>",
|
|
{ rel: "stylesheet", href: style, type: "text/css" }
|
|
{ rel: "stylesheet", href: style, type: "text/css" }
|
|
));
|
|
));
|
|
- });
|
|
|
|
|
|
+ });
|
|
}
|
|
}
|
|
-
|
|
|
|
-
|
|
|
|
|
|
+
|
|
|
|
+
|
|
//hideRectangel(lx, ly, rx, ry)
|
|
//hideRectangel(lx, ly, rx, ry)
|
|
}
|
|
}
|
|
else{
|
|
else{
|
|
$(".item" + lx + "-" + ly).html("No language available.<br> Nicht in der Sprache verfügbar.");
|
|
$(".item" + lx + "-" + ly).html("No language available.<br> Nicht in der Sprache verfügbar.");
|
|
}
|
|
}
|
|
}
|
|
}
|
|
-
|
|
|
|
|
|
+
|
|
}
|
|
}
|
|
|
|
|
|
function sendForm(menuitem, cpeecallback,lx,ly){
|
|
function sendForm(menuitem, cpeecallback,lx,ly){
|
|
//Call iframe function that button has been pressed iframe should send json back
|
|
//Call iframe function that button has been pressed iframe should send json back
|
|
//document.getElementById(decodeURIComponent(cpeecallback)).contentWindow.buttonPressed(cpeecallback);
|
|
//document.getElementById(decodeURIComponent(cpeecallback)).contentWindow.buttonPressed(cpeecallback);
|
|
-
|
|
|
|
-
|
|
|
|
|
|
+
|
|
|
|
+
|
|
var formdata;
|
|
var formdata;
|
|
if (typeof document.getElementById(decodeURIComponent(cpeecallback)).contentWindow.buttonPressed !== 'undefined' && $.isFunction(document.getElementById(decodeURIComponent(cpeecallback)).contentWindow.buttonPressed)) {
|
|
if (typeof document.getElementById(decodeURIComponent(cpeecallback)).contentWindow.buttonPressed !== 'undefined' && $.isFunction(document.getElementById(decodeURIComponent(cpeecallback)).contentWindow.buttonPressed)) {
|
|
var formdata = document.getElementById(decodeURIComponent(cpeecallback)).contentWindow.buttonPressed();
|
|
var formdata = document.getElementById(decodeURIComponent(cpeecallback)).contentWindow.buttonPressed();
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
-
|
|
|
|
|
|
+
|
|
$.ajax({
|
|
$.ajax({
|
|
type: "PUT",
|
|
type: "PUT",
|
|
url: decodeURIComponent(cpeecallback),
|
|
url: decodeURIComponent(cpeecallback),
|
|
@@ -119,13 +119,13 @@ function sendForm(menuitem, cpeecallback,lx,ly){
|
|
success: function (data) {
|
|
success: function (data) {
|
|
}
|
|
}
|
|
});
|
|
});
|
|
-
|
|
|
|
-
|
|
|
|
-
|
|
|
|
-
|
|
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+
|
|
//Its a design question if removing the frame should be done within centurio, do have more controll, or automatic within code?
|
|
//Its a design question if removing the frame should be done within centurio, do have more controll, or automatic within code?
|
|
//close frame
|
|
//close frame
|
|
-
|
|
|
|
|
|
+
|
|
$(menuitem).remove();
|
|
$(menuitem).remove();
|
|
//remove frame from Server
|
|
//remove frame from Server
|
|
$.ajax({
|
|
$.ajax({
|
|
@@ -133,14 +133,14 @@ function sendForm(menuitem, cpeecallback,lx,ly){
|
|
url: "",
|
|
url: "",
|
|
headers: {"content-id": "deleteframe"},
|
|
headers: {"content-id": "deleteframe"},
|
|
data: {lx: lx, ly: ly},
|
|
data: {lx: lx, ly: ly},
|
|
- success: function (data) {
|
|
|
|
|
|
+ success: function (data) {
|
|
}
|
|
}
|
|
});
|
|
});
|
|
-
|
|
|
|
|
|
+
|
|
}
|
|
}
|
|
|
|
|
|
function sendData(dataelement, datavalue){
|
|
function sendData(dataelement, datavalue){
|
|
-
|
|
|
|
|
|
+
|
|
$.ajax({
|
|
$.ajax({
|
|
type: "Get",
|
|
type: "Get",
|
|
url: 'cpeeinstance.url',
|
|
url: 'cpeeinstance.url',
|
|
@@ -149,30 +149,30 @@ function sendData(dataelement, datavalue){
|
|
type: "Put",
|
|
type: "Put",
|
|
url: ret + "/properties/dataelements/" + dataelement,
|
|
url: ret + "/properties/dataelements/" + dataelement,
|
|
data: {value: datavalue},
|
|
data: {value: datavalue},
|
|
- success: function (data) {
|
|
|
|
|
|
+ success: function (data) {
|
|
alert("Data Sent")
|
|
alert("Data Sent")
|
|
}
|
|
}
|
|
});
|
|
});
|
|
}
|
|
}
|
|
});
|
|
});
|
|
-
|
|
|
|
|
|
+
|
|
}
|
|
}
|
|
|
|
|
|
function sendCallback(callbackUrl, jsonToSend){
|
|
function sendCallback(callbackUrl, jsonToSend){
|
|
-
|
|
|
|
|
|
+
|
|
$.ajax({
|
|
$.ajax({
|
|
type: "PUT",
|
|
type: "PUT",
|
|
url: callbackUrl,
|
|
url: callbackUrl,
|
|
contentType: "application/json",
|
|
contentType: "application/json",
|
|
data: jsonToSend,
|
|
data: jsonToSend,
|
|
success: function (data) {
|
|
success: function (data) {
|
|
-
|
|
|
|
|
|
+
|
|
}
|
|
}
|
|
});
|
|
});
|
|
}
|
|
}
|
|
|
|
|
|
function showDocument() {
|
|
function showDocument() {
|
|
-
|
|
|
|
|
|
+
|
|
$.ajax({
|
|
$.ajax({
|
|
type: "GET",
|
|
type: "GET",
|
|
url: 'style.url',
|
|
url: 'style.url',
|
|
@@ -180,7 +180,7 @@ function showDocument() {
|
|
$('head link.custom').attr('href',ret);
|
|
$('head link.custom').attr('href',ret);
|
|
}
|
|
}
|
|
});
|
|
});
|
|
-
|
|
|
|
|
|
+
|
|
$.ajax({
|
|
$.ajax({
|
|
type: "GET",
|
|
type: "GET",
|
|
url: 'info.json',
|
|
url: 'info.json',
|
|
@@ -194,7 +194,7 @@ function showDocument() {
|
|
success: function(ret2) {
|
|
success: function(ret2) {
|
|
for (i of ret2.data) {
|
|
for (i of ret2.data) {
|
|
makeFrame(i.lx,i.ly,i.rx,i.ry, i.url, i.callback, i.default, i.showbutton, i.style);
|
|
makeFrame(i.lx,i.ly,i.rx,i.ry, i.url, i.callback, i.default, i.showbutton, i.style);
|
|
- }
|
|
|
|
|
|
+ }
|
|
}
|
|
}
|
|
});
|
|
});
|
|
},
|
|
},
|
|
@@ -203,10 +203,10 @@ function showDocument() {
|
|
clearDocument();
|
|
clearDocument();
|
|
}
|
|
}
|
|
});
|
|
});
|
|
-
|
|
|
|
-
|
|
|
|
-
|
|
|
|
-
|
|
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+
|
|
/*
|
|
/*
|
|
$.ajax({
|
|
$.ajax({
|
|
type: "GET",
|
|
type: "GET",
|
|
@@ -339,7 +339,7 @@ function init() {
|
|
};
|
|
};
|
|
}
|
|
}
|
|
|
|
|
|
-
|
|
|
|
|
|
+
|
|
|
|
|
|
function makeGrid(x, y) {
|
|
function makeGrid(x, y) {
|
|
const container = document.getElementById("container");
|
|
const container = document.getElementById("container");
|
|
@@ -349,8 +349,8 @@ function makeGrid(x, y) {
|
|
for (c = 0; c < (x * y); c++) {
|
|
for (c = 0; c < (x * y); c++) {
|
|
let cell = document.createElement("div");
|
|
let cell = document.createElement("div");
|
|
//cell.innerText = (c + 1);
|
|
//cell.innerText = (c + 1);
|
|
- cell.classList.add("item" + (c% y) + "-" + (Math.floor(c / y )));
|
|
|
|
-
|
|
|
|
|
|
+ cell.classList.add("item" + (c% y) + "-" + (Math.floor(c / y )));
|
|
|
|
+
|
|
cell.classList.add("grid-item");
|
|
cell.classList.add("grid-item");
|
|
|
|
|
|
container.appendChild(cell);
|
|
container.appendChild(cell);
|