cpee-frames 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
data/ui/js/test.js ADDED
@@ -0,0 +1,68 @@
1
+
2
+
3
+ document.addEventListener('keyup', (event) => {
4
+ if (event.key == 'ArrowRight') {
5
+ $.ajax({
6
+ type: "PUT",
7
+ url: "../Manuel",
8
+ headers: {"content-id": "input"},
9
+ data: { style_url: "mystyleURL", document_url: 'www.nixdrin.at' },
10
+ success: function(res) {
11
+ location.reload();
12
+ },
13
+ error: function (request, status, error) {
14
+ alert(request.responseText + status + error);
15
+ }
16
+ });
17
+ }
18
+
19
+ if (event.key == 'ArrowUp') {
20
+
21
+ $.ajax({
22
+ type: "POST",
23
+ url: "../Manuel",
24
+ headers: {"content-id": "frame"},
25
+ data: { lx: "2", ly: '0', rx: '1', ry: '2', url: 'https://centurio.work/' },
26
+ success: function(res) {
27
+ location.reload();
28
+ },
29
+ error: function (request, status, error) {
30
+ alert(request.responseText + status + error);
31
+ }
32
+ });
33
+ }
34
+
35
+
36
+ if (event.key == 'ArrowDown') {
37
+ $.ajax({
38
+ type: "POST",
39
+ url: "../Manuel",
40
+ headers: {"content-id": "frame"},
41
+ data: { lx: "0", ly: '0', rx: '2', ry: '2', url: 'https://centurio.work/flow-test/' },
42
+ success: function(res) {
43
+ location.reload();
44
+ },
45
+ error: function (request, status, error) {
46
+ alert(request.responseText + status + error);
47
+ }
48
+ });
49
+ }
50
+
51
+ if (event.key == 'ArrowLeft') {
52
+ $.ajax({
53
+ type: "POST",
54
+ url: "../Manuel",
55
+ headers: {"content-id": "frame"},
56
+ data: { lx: "1", ly: '1', rx: '2', ry: '2', url: 'https://centurio.work/customers/evva/was/ui/' },
57
+ success: function(res) {
58
+ location.reload();
59
+ },
60
+ error: function (request, status, error) {
61
+ alert(request.responseText + status + error);
62
+ }
63
+ });
64
+ }
65
+
66
+
67
+ });
68
+
data/ui/js/ui.js ADDED
@@ -0,0 +1,374 @@
1
+ var reason ="";
2
+ var storage = []; //{col:1, row:1, colamount:1, rowamount: 1}];
3
+
4
+
5
+ function doOverlap(l1x, l1y, r1x, r1y, l2x, l2y, r2x, r2y) {
6
+ // If one rectangle is on left side of other
7
+ if (l1x > r2x || l2x > r1x)
8
+ return false;
9
+ // If one rectangle is above other
10
+ if (l1y > r2y || l2y > r1y)
11
+ return false;
12
+ return true;
13
+ }
14
+
15
+
16
+ function makeFrame(lx, ly, rx, ry, content = "", id = "", defaultpara = "", showbutton = "", style = "") {
17
+
18
+
19
+ //check if rects overlap if they do remove old ones
20
+ for (i = 0; i < window.storage.length; i++) {
21
+ if(doOverlap(window.storage[i].lx, window.storage[i].ly, window.storage[i].rx, window.storage[i].ry, lx, ly, rx, ry)){
22
+ $(".item" + window.storage[i].lx + "-" + window.storage[i].ly).remove();
23
+ //clearRectangel(window.storage[i].lx, window.storage[i].ly, window.storage[i].rx, window.storage[i].ry)
24
+ window.storage.splice(i,1);
25
+ --i;
26
+ }
27
+ }
28
+ console.log(content);
29
+ if(content != "empty"){
30
+ //add new ellement to storage
31
+ window.storage.push({lx:lx, ly:ly, rx:rx, ry: ry})
32
+
33
+ const container = document.getElementById("container");
34
+ let cell = document.createElement("div");
35
+ cell.classList.add("grid-item");
36
+ cell.classList.add("item" + lx + "-" + ly);
37
+
38
+ spancol= ""
39
+ if(rx-lx+1 > 1){
40
+ spancol = " / span " + (rx-lx+1);
41
+
42
+ }
43
+
44
+ spanrow= ""
45
+ if(ry-ly+1 > 1){
46
+ spanrow = " / span " + (ry-ly+1);
47
+ }
48
+
49
+ jQuery.cssNumber.gridColumnStart = true;
50
+ jQuery.cssNumber.gridColumnEnd = true;
51
+ jQuery.cssNumber.gridRowStart = true;
52
+ jQuery.cssNumber.gridRowEnd = true;
53
+
54
+ $(cell).css({"grid-column": (lx+1) + spancol, "grid-row": ly+1 + spanrow});
55
+
56
+ container.appendChild(cell);
57
+ //Create new element with width, heigth and content
58
+ //$(".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)});
59
+
60
+ if(content != null && content != ""){
61
+ var fullurl = encodeURI(content);
62
+ //encode default parameter in URL
63
+ if(defaultpara != "{}"){
64
+ var fullurl = fullurl + "?";
65
+ for (var key in defaultpara) {
66
+ if (defaultpara.hasOwnProperty(key)) {
67
+ fullurl = fullurl + key + "=" + encodeURIComponent(defaultpara[key]) + "&";
68
+ }
69
+ }
70
+ fullurl = fullurl.slice(0, -1);
71
+ }
72
+
73
+ $(".item" + lx + "-" + ly).html("<iframe style='height: 100%; width: 100%' name='" + id +"' id='" + id +"' src='" + fullurl + "' title='' frameBorder='0' ></iframe>");
74
+
75
+ if(showbutton){
76
+ $(".item" + lx + "-" + ly).append('<button class="formbutton" type="button" onclick="sendForm(\'' + '.item' + lx + '-' + ly +'\', \'' + encodeURIComponent(id) + '\', \'' + lx + '\', \'' + ly + '\')">' + showbutton + '</button>')
77
+ }
78
+
79
+ if(style){
80
+ $(".item" + lx + "-" + ly).find("iframe").on('load', function(){
81
+ $(this).contents().find("head").append($("<link/>",
82
+ { rel: "stylesheet", href: style, type: "text/css" }
83
+ ));
84
+ });
85
+ }
86
+
87
+
88
+ //hideRectangel(lx, ly, rx, ry)
89
+ }
90
+ else{
91
+ $(".item" + lx + "-" + ly).html("No language available.<br> Nicht in der Sprache verfügbar.");
92
+ }
93
+ }
94
+
95
+ }
96
+
97
+ function sendForm(menuitem, cpeecallback,lx,ly){
98
+ //Call iframe function that button has been pressed iframe should send json back
99
+ //document.getElementById(decodeURIComponent(cpeecallback)).contentWindow.buttonPressed(cpeecallback);
100
+
101
+
102
+ var formdata;
103
+ if (typeof document.getElementById(decodeURIComponent(cpeecallback)).contentWindow.buttonPressed !== 'undefined' && $.isFunction(document.getElementById(decodeURIComponent(cpeecallback)).contentWindow.buttonPressed)) {
104
+ var formdata = document.getElementById(decodeURIComponent(cpeecallback)).contentWindow.buttonPressed();
105
+ }
106
+
107
+
108
+
109
+ $.ajax({
110
+ type: "PUT",
111
+ url: decodeURIComponent(cpeecallback),
112
+ contentType: "application/json",
113
+ data: JSON.stringify(formdata),
114
+ success: function (data) {
115
+ }
116
+ });
117
+
118
+
119
+
120
+
121
+ //Its a design question if removing the frame should be done within centurio, do have more controll, or automatic within code?
122
+ //close frame
123
+
124
+ $(menuitem).remove();
125
+ //remove frame from Server
126
+ $.ajax({
127
+ type: "Post",
128
+ url: "",
129
+ headers: {"content-id": "deleteframe"},
130
+ data: {lx: lx, ly: ly},
131
+ success: function (data) {
132
+ }
133
+ });
134
+
135
+ }
136
+
137
+ function sendData(dataelement, datavalue){
138
+
139
+ $.ajax({
140
+ type: "Get",
141
+ url: 'cpeeinstance.url',
142
+ success: function(ret) {
143
+ $.ajax({
144
+ type: "Put",
145
+ url: ret + "/properties/dataelements/" + dataelement,
146
+ data: {value: datavalue},
147
+ success: function (data) {
148
+ alert("Data Sent")
149
+ }
150
+ });
151
+ }
152
+ });
153
+
154
+ }
155
+
156
+ function sendCallback(callbackUrl, jsonToSend){
157
+
158
+ $.ajax({
159
+ type: "PUT",
160
+ url: callbackUrl,
161
+ contentType: "application/json",
162
+ data: jsonToSend,
163
+ success: function (data) {
164
+
165
+ }
166
+ });
167
+ }
168
+
169
+ function showDocument() {
170
+
171
+ $.ajax({
172
+ type: "GET",
173
+ url: 'style.url',
174
+ success: function(ret) {
175
+ $('head link.custom').attr('href',ret);
176
+ }
177
+ });
178
+
179
+ $.ajax({
180
+ type: "GET",
181
+ url: 'info.json',
182
+ success: function(ret) {
183
+ makeGrid(ret.x_amount, ret.y_amount);
184
+ //set name
185
+ document.title = ret.document_name;
186
+ $.ajax({
187
+ type: "GET",
188
+ url: 'frames.json',
189
+ success: function(ret2) {
190
+ for (i of ret2.data) {
191
+ makeFrame(i.lx,i.ly,i.rx,i.ry, i.url, i.callback, i.default, i.showbutton, i.style);
192
+ }
193
+ }
194
+ });
195
+ },
196
+ error: function() {
197
+ reason = '';
198
+ clearDocument();
199
+ }
200
+ });
201
+
202
+
203
+
204
+
205
+ /*
206
+ $.ajax({
207
+ type: "GET",
208
+ url: 'languages',
209
+ success: function(ret) {
210
+ $('#content .added').remove();
211
+ $('#control .added').remove();
212
+ var ctemplate = $('#content template')[0];
213
+ var btemplate = $('#control template')[0];
214
+ var promises = [];
215
+ $('language',ret).each(function(i,e){
216
+ var cclone = document.importNode(ctemplate.content, true);
217
+ var bclone = document.importNode(btemplate.content, true);
218
+ promises.push(new Promise((resolve, reject) => {
219
+ $('> *',cclone).each(function(j,c){
220
+ $(c).addClass('added');
221
+ $(c).attr('lang', e.textContent);
222
+ $.ajax({
223
+ type: "GET",
224
+ url: 'documents/' + e.textContent,
225
+ success: function(doc) {
226
+ if (c.nodeName == 'IFRAME') {
227
+ $(c).attr('src',doc);
228
+ } else {
229
+ $('iframe',c).attr('src',doc);
230
+ }
231
+ $('#content').append(c);
232
+ resolve(true);
233
+ },
234
+ error: function() {
235
+ reject(false);
236
+ setTimeout(function(){ showDocument(); }, 500);
237
+ }
238
+ });
239
+ });
240
+ }));
241
+ promises.push(new Promise((resolve, reject) => {
242
+ $('> *',bclone).each(function(j,c){
243
+ $(c).addClass('added');
244
+ $(c).attr('lang', e.textContent);
245
+ $.ajax({
246
+ type: "GET",
247
+ url: 'buttons/' + e.textContent,
248
+ success: function(but) {
249
+ if (c.nodeName == 'BUTTON') {
250
+ $(c).text(but);
251
+ } else {
252
+ $('button',c).text(but);
253
+ }
254
+ $('#control').append(c);
255
+ resolve(true);
256
+ },
257
+ error: function() {
258
+ resolve(true);
259
+ }
260
+ });
261
+ });
262
+ }));
263
+ });
264
+ Promise.all(promises).then((values) => {
265
+ $.ajax({
266
+ type: "GET",
267
+ url: 'style.url',
268
+ success: function(ret) {
269
+ $('head link.custom').attr('href',ret);
270
+ }
271
+ });
272
+ lang_init('#content','#languages');
273
+ $('#languages').removeClass('hidden');
274
+ $('#nope').addClass('hidden');
275
+ });
276
+ },
277
+ error: function() {
278
+ reason = '';
279
+ clearDocument();
280
+ }
281
+ });
282
+ */
283
+ }
284
+
285
+
286
+ function clearDocument() {
287
+ console.log('rrrr');
288
+ $('#languages').addClass('hidden');
289
+ $('#nope').removeClass('hidden');
290
+ $('#control .added').remove();
291
+ $('#content .added').remove();
292
+ $('#reason').text(reason);
293
+ }
294
+
295
+ function reloadAllFrames() {
296
+ location.reload();
297
+ }
298
+
299
+
300
+ function init() {
301
+ es = new EventSource('sse/');
302
+ es.onopen = function() {
303
+ showDocument();
304
+ // load
305
+ };
306
+ es.onmessage = function(e) {
307
+ if (e.data == 'new') {
308
+ reason = '';
309
+ showDocument();
310
+ }
311
+ if (e.data == 'reset') {
312
+ reason = '';
313
+ showDocument();
314
+ }
315
+ else{
316
+ if(e.data == "update"){
317
+ alert("update")
318
+ }
319
+ if(e.data != "keepalive" && e.data != "started"){
320
+ try {
321
+ //alert(e.data)
322
+ var frd = JSON.parse(e.data)
323
+ makeFrame(frd.lx,frd.ly,frd.rx,frd.ry, frd.url, frd.callback, frd.default, frd.showbutton, frd.style);
324
+ }
325
+ catch (e) {
326
+ }
327
+ }
328
+ }
329
+ };
330
+ es.onerror = function() {
331
+ reason = 'Server down.';
332
+ clearDocument();
333
+ setTimeout(init, 10000);
334
+ };
335
+ }
336
+
337
+
338
+
339
+ function makeGrid(x, y) {
340
+ const container = document.getElementById("container");
341
+ container.style.setProperty('--grid-rows', y);
342
+ container.style.setProperty('--grid-cols', x);
343
+ /*
344
+ for (c = 0; c < (x * y); c++) {
345
+ let cell = document.createElement("div");
346
+ //cell.innerText = (c + 1);
347
+ cell.classList.add("item" + (c% y) + "-" + (Math.floor(c / y )));
348
+
349
+ cell.classList.add("grid-item");
350
+
351
+ container.appendChild(cell);
352
+ };
353
+ */
354
+ };
355
+
356
+
357
+ //https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Function/caller
358
+ function sendJson(callback, jsonToSend){
359
+ $.ajax({
360
+ type: "PUT",
361
+ url: callback,
362
+ contentType: "application/json",
363
+ data: JSON.stringify(jsonToSend),
364
+ success: function (data) {
365
+
366
+ }
367
+ });
368
+ }
369
+
370
+
371
+ $(document).ready(function() {
372
+ init();
373
+ });
374
+
metadata ADDED
@@ -0,0 +1,98 @@
1
+ --- !ruby/object:Gem::Specification
2
+ name: cpee-frames
3
+ version: !ruby/object:Gem::Version
4
+ version: 1.0.0
5
+ platform: ruby
6
+ authors:
7
+ - Manuell Gall
8
+ - Juergen 'eTM' Mangler
9
+ autorequire:
10
+ bindir: tools
11
+ cert_chain: []
12
+ date: 2023-02-21 00:00:00.000000000 Z
13
+ dependencies:
14
+ - !ruby/object:Gem::Dependency
15
+ name: riddl
16
+ requirement: !ruby/object:Gem::Requirement
17
+ requirements:
18
+ - - "~>"
19
+ - !ruby/object:Gem::Version
20
+ version: '0.99'
21
+ type: :runtime
22
+ prerelease: false
23
+ version_requirements: !ruby/object:Gem::Requirement
24
+ requirements:
25
+ - - "~>"
26
+ - !ruby/object:Gem::Version
27
+ version: '0.99'
28
+ - !ruby/object:Gem::Dependency
29
+ name: json
30
+ requirement: !ruby/object:Gem::Requirement
31
+ requirements:
32
+ - - "~>"
33
+ - !ruby/object:Gem::Version
34
+ version: '2.1'
35
+ type: :runtime
36
+ prerelease: false
37
+ version_requirements: !ruby/object:Gem::Requirement
38
+ requirements:
39
+ - - "~>"
40
+ - !ruby/object:Gem::Version
41
+ version: '2.1'
42
+ description: Flexibly arrange and display user interface components in a grid from
43
+ executable process models. Very useful if you want to build dashboards.
44
+ email: gall.manuel.89@gmail.com
45
+ executables:
46
+ - cpee-frames
47
+ extensions: []
48
+ extra_rdoc_files:
49
+ - README.md
50
+ files:
51
+ - AUTHORS
52
+ - LICENSE
53
+ - README.md
54
+ - Rakefile
55
+ - cpee-frames.gemspec
56
+ - lib/cpee-frames/frames.xml
57
+ - lib/cpee-frames/implementation.rb
58
+ - lib/cpee-frames/ui/framedata.html
59
+ - lib/cpee-frames/ui/menu.html
60
+ - lib/cpee-frames/ui/template.html
61
+ - lib/cpee-frames/ui/test.html
62
+ - lib/cpee-frames/ui/tutorial.html
63
+ - server/frames
64
+ - server/frames.conf
65
+ - tools/cpee-frames
66
+ - ui/css/favicon-16x16.png
67
+ - ui/css/favicon-32x32.png
68
+ - ui/css/favicon-96x96.png
69
+ - ui/css/frames.css
70
+ - ui/js/frame_data.js
71
+ - ui/js/language.js
72
+ - ui/js/test.js
73
+ - ui/js/ui.js
74
+ homepage: https://github.com/ManuelGall/cpee-frames
75
+ licenses:
76
+ - GPL-3.0
77
+ metadata: {}
78
+ post_install_message:
79
+ rdoc_options: []
80
+ require_paths:
81
+ - lib
82
+ required_ruby_version: !ruby/object:Gem::Requirement
83
+ requirements:
84
+ - - ">="
85
+ - !ruby/object:Gem::Version
86
+ version: '3.0'
87
+ required_rubygems_version: !ruby/object:Gem::Requirement
88
+ requirements:
89
+ - - ">="
90
+ - !ruby/object:Gem::Version
91
+ version: '0'
92
+ requirements: []
93
+ rubygems_version: 3.1.2
94
+ signing_key:
95
+ specification_version: 4
96
+ summary: Dashboard management service with UI and backend for the cpee.org family
97
+ of workflow management tools
98
+ test_files: []