Changed some icons, modules block: different input elements (not tested), write permission promt

client/cssFiles/SEAWebClientSwiper.css

@@ -1,54 +0,0 @@
-@CHARSET "UTF-8";
-
-/* This file is obsolete because the swoiper was removed */
-
-.swiper-container-main {
-	width: 100%;
-	height: 100%;
-	overflow: hidden;
-}
-
-.swiper-slide-main {
-	background-color: white;
-	overflow: hidden;
-	width: 100%;
-	height: 100%;
-	padding-bottom: 30px;
-}
-
-.swiper-button-prev.swiper-button-disabled,
-.swiper-button-next.swiper-button-disabled {
-  opacity: 0;
-}
-/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
-/* PANEL */
-.panel {
-	background-color: #303030;
-	/* position: absolute; */
-	z-index: 20;
-	width: 100%;
-	height: 30px;
-}
-.panel:not(.graphics) {
-	color: white;
-	text-align: center;
-	padding: 6px 6px 6px 6px;
-}
-
-.panel.graphics{
-    display: flex;
-    justify-content: flex-end;
-}
-
-.slide-close-icon {
-	transition: 0.4s;
-	cursor: pointer;
-	float: right;
-	padding-right: 6px;
-	height: 100%;
-	fill: white;
-}
-
-.toggle-updates-graphics {
-	float: right;
-}

client/jsFiles/SEAWebClientGroup.js

@@ -1,8 +1,11 @@
-// %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
+var writePermission = false;
-// % GROUP
+var showParams = false;
-
+var showConsole = false;
 var prompt = false // True while a prompt is opened.
 
+// %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
+// COMMUNICATION
+
 function getGroup(s, name) {
     console.log('name: ',name, ', id: '.ClientID);
     reqJSON(s, "http://" + hostPort + "/getblock?path=" + name
@@ -14,6 +17,9 @@ function sendCommand(s, command) {
             + "&id=" + clientID, successHandler, errorHandler);
 }
 
+// %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
+//  GROUP
+
 function createContent(message) {
     // Depending on the message received from the server the content of the
     // group is created dynamically. Handles draw-message.
@@ -58,64 +64,9 @@ function createRowForModules(component) {
 }
 
 function createRowForParameters(component) {
-    let left = document.createElement('span');
+    let left =  createLeftColumnForParameters(component);
-    left.classList.add('col-left');
+    let right = createRightColumnForParameters(component);
-    left.innerHTML = component.title;
-    let right = document.createElement('span');
-    right.classList.add('col-right-parameters');
-    let value = document.createElement('span');
-    value.classList.add('col-right-value');
-    value.setAttribute('name', component.name);
-    value.__ctype__ = 'rdonly';
-    right.appendChild(value);
-    
-    if (component.type == 'input' ||
-        component.type == 'pushbutton' ||
-        component.type == 'checkbox' ||
-        component.type == 'enum'
-    ) {
-        var input_element;
-        switch (component.type) {
-            case 'enum':
-                input_element = createEnum(component);
-                input_element.classList.add('input-element', 'input-element-hidden');
-                break;
-            case 'pushbutton':
-                input_element = createPushbutton(component);
-                input_element.classList.add('input-element-button', 'input-element-button-hidden');
-                break;  
-            case 'input':
-                input_element = createInput(component);
-                input_element.classList.add('input-element', 'input-element-hidden');
-                break;
-            case 'checkbox':
-                input_element = createCheckbox(component);
-                input_element.classList.add('input-element', 'input-element-hidden');
-                break;
-        }
-        if (component.type != 'pushbutton') {
-            let icon_edit = createIconEdit();
-            right.appendChild(icon_edit);
-        }
-        right.appendChild(input_element);
-    }
     return appendToContent(left, right);
-
-    function createIconEdit () {
-        let icon_edit = document.createElement('img');
-        icon_edit.setAttribute('src', 'res/icon_edit.png');
-        icon_edit.classList.add('icon-modules', 'icon-edit', 'icon-edit-hidden');
-
-        icon_edit.onclick = function () {
-            let is_hidden = input_element.classList.contains('input-element-hidden');
-            hideInputElements();
-            if (is_hidden) {
-                input_element.classList.remove('input-element-hidden');
-            }
-        }
-
-        return icon_edit;
-    }
 }
 
 function appendToContent(left, right) {
@@ -182,43 +133,115 @@ function createLeftColumnForModules(component) {
     }
 }
 
+function createLeftColumnForParameters(component) {
+    let left = document.createElement('span');
+    left.classList.add('col-left');
+    left.innerHTML = component.title;
+    return left;
+}
+
 /* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
 // RIGHT COLUMN
 
 function createRightColumnForModules(component) {
+    
     var right = document.createElement('span');
     right.classList.add('col-right', 'col-right-modules');
-    let value = document.createElement('span');
+    
-    value.classList.add('col-right-value');
+    right.appendChild(createValue(component));
-    value.setAttribute('name', component.name);
+    
-    // value.__ctype__ = component.type;
-    value.__ctype__ = 'rdonly';
-    right.appendChild(value);
     if (component.targetname) {
-        var input_element = createInput(component);
+        if (component.type == 'input' ||
-        input_element.classList.add('input-element', 'input-element-hidden');
+            component.type == 'pushbutton' ||
-        let icon_edit = createIconEdit();
+            component.type == 'checkbox' ||
-        right.appendChild(icon_edit);
+            component.type == 'enum'
+        ) {
+            let input_element = createType(component);
+            if (component.type != 'pushbutton') {
+                let icon_edit = createIconEdit(input_element);
+                right.appendChild(icon_edit);
+            }
+            right.appendChild(input_element);
+        }
+    }
+    return right;
+}
+
+function createRightColumnForParameters(component) {
+    
+    let right = document.createElement('span');
+    right.classList.add('col-right-parameters');
+    
+    right.appendChild(createValue(component));
+    
+    if (component.type == 'input' ||
+        component.type == 'pushbutton' ||
+        component.type == 'checkbox' ||
+        component.type == 'enum'
+    ) {
+        let input_element = createType(component);
+        if (component.type != 'pushbutton') {
+            let icon_edit = createIconEdit(input_element);
+            right.appendChild(icon_edit);
+        }
         right.appendChild(input_element);
     }
     return right;
+}
 
-    function createIconEdit () {
+function createValue (component) {
-        let icon_edit = document.createElement('img');
+    let value = document.createElement('span');
-        icon_edit.setAttribute('src', 'res/icon_edit.png');
+    value.classList.add('col-right-value');
-        icon_edit.classList.add('icon-modules', 'icon-edit', 'icon-edit-hidden');
+    value.setAttribute('name', component.name);
+    value.__ctype__ = 'rdonly';
+    return value;
+}
 
-        icon_edit.onclick = function (event) {
+function createIconEdit (input_element) {
-            event.stopPropagation()
-            let is_hidden = input_element.classList.contains('input-element-hidden');
-            hideInputElements();
-            if (is_hidden) {
-                input_element.classList.remove('input-element-hidden');
-            }
-        }
     
-        return icon_edit;
+    let icon_edit = document.createElement('img');
+    icon_edit.setAttribute('src', 'res/icon_edit.png');
+    icon_edit.classList.add('icon-modules', 'icon-edit');
+    if (writePermission == false) {
+        icon_edit.classList.add('icon-edit-hidden');
     }
+
+    icon_edit.onclick = function (event) {
+        event.stopPropagation()
+        let is_hidden = input_element.classList.contains('input-element-hidden');
+        hideInputElements();
+        if (is_hidden) {
+            input_element.classList.remove('input-element-hidden');
+        }
+    }
+
+    return icon_edit;
+}
+
+function createType (component) {
+    let input_element;
+    switch (component.type) {
+        case 'enum':
+            input_element = createEnum(component);
+            input_element.classList.add('input-element', 'input-element-hidden');
+            break;
+        case 'pushbutton':
+            input_element = createPushbutton(component);
+            input_element.classList.add('input-element-button');
+            if (writePermission == false) {
+                input_element.classList.add('input-element-button-hidden');
+            }
+            break;  
+        case 'input':
+            input_element = createInputText(component);
+            input_element.classList.add('input-element', 'input-element-hidden');
+            break;
+        case 'checkbox':
+            input_element = createCheckbox(component);
+            input_element.classList.add('input-element', 'input-element-hidden');
+            break;
+    }
+    return input_element;
 }
 
 /* ---------------------------------------------------------------------------------- */
@@ -239,7 +262,7 @@ function createPushbutton(component) {
     return elem;
 }
 
-function createInput(component) {
+function createInputText(component) {
     // Creates row-element containing input-item.
     var command = component.command;
     var input = createInputElement(component, 'input', 'input-text');

client/jsFiles/SEAWebClientMain.js

@@ -1,9 +1,5 @@
 // %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
 // % INIT
-
-var MAXBLOCK = 4; // max number of blocks
-var elements = []; // grid elements
-// var swiper = []; // This array contains main-swiper-Instances.
 var hostPort = ""; // Address and port of static html-file.
 var clientID = ""; // ID given by server when SSE-connection is established.
 var clientTitle = ""; // Contains name of instrument and device.
@@ -11,11 +7,7 @@ var getUpdates = true;
 var getUpdatesGraphics = true;
 var initCommands = [];
 var loadingShown = true;
-var writePermission = false;
 var panelOn = true;
-var firstState = 0;
-var showParams = false;
-var showConsole = false;
 
 function Settings() {
     // get key/value pairs from search part of the URL and fill into query
@@ -190,14 +182,24 @@ window.onload = function() {
         let array_icon_edit = document.getElementsByClassName('icon-edit');
         let array_button = document.getElementsByClassName('input-element-button');
         if (writePermission == false) {
-            writePermission = true;
+            alertify.confirm("WRITE PERMISSION", "You are working on <b>"+ clientTitle + "</b>. Are You sure you want to change things here?", 
-            icon_lock_container.innerHTML = '<img class = "icon-main icon-lock" src="res/icon_lock_open.png">';
+            function () {
-            for(i = 0; i < array_icon_edit.length; i++) {
+                // User decided to proceed.
-                array_icon_edit[i].classList.remove('icon-edit-hidden');
+                prompt = false;
-            }
+
-            for(i = 0; i < array_button.length; i++) {
+                writePermission = true;
-                array_button[i].classList.remove('input-element-button-hidden');
+                icon_lock_container.innerHTML = '<img class = "icon-main icon-lock" src="res/icon_lock_open.png">';
+                for(i = 0; i < array_icon_edit.length; i++) {
+                    array_icon_edit[i].classList.remove('icon-edit-hidden');
+                }
+                for(i = 0; i < array_button.length; i++) {
+                    array_button[i].classList.remove('input-element-button-hidden');
+                }
             }
+            , function () {
+                // User decided to cancel
+                prompt = false;
+            });
         } else {
             writePermission = false;
             icon_lock_container.innerHTML = '<img class = "icon-main icon-lock" src="res/icon_lock_closed.png">';

client/jsFiles/SEAWebClientResponsivity.js

@@ -3,14 +3,17 @@
 
 var nColumns = 1; // Viewport is subdivided in nColumns columns.
 var nRows = 1; // Viewport is subdivided in nRows rows.
-var gridCountGraphics = 2; // Number of displayed graphics-swipers.
 var MINWIDTH = 400; // Minimal width of block.
 var MINHEIGHT = 700; // Minimal height of block.
+var MAXBLOCK = 4; // max number of blocks
+var elements = []; // grid elements
 
 function createGrid() {
-    // Creates grid-elements. By default only the first one is shown
+    // Creates grid-elements.
-    // and
+    // 1 - graphics
-    // takes the whole viewport.
+    // 2 - modules
+    // 3 - parameters
+    // 4 - log
     var elements = [];
     for (var i = 0; i < 4; i++) {
         var element = document.createElement('div');
@@ -52,8 +55,8 @@ function sizeChange() {
 }
 
 function adjustGrid() {
-    // Determines size of grid-elements depending on number of columns 'nColumns' and
+    // Determines size of grid-elements depending on number
-    // rows 'nRows'
+    // of columns 'nColumns' and rows 'nRows'
 
     var width = window.innerWidth || document.documentElement.clientWidth
             || document.body.clientWidth;

client/jsFiles/SEAWebClientSwiper.js

@@ -1,148 +0,0 @@
-// %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
-// % SWIPER
-
-// This file is obolete, swiper was removed!
-
-function insertSwiper(s) {
-    // Create an empty swiper-instance and append the swiper-container to
-    // 'grid-element' s.
-
-    var container = document.createElement('div');
-    container.classList.add("swiper", "swiper-container-main");
-    elements[s].appendChild(container);
-
-    var swiperwrapper = document.createElement('div');
-    swiperwrapper.classList.add("swiper-wrapper", "swiper-wrapper-main");
-    swiperwrapper.s = s;
-    container.appendChild(swiperwrapper);
-
-    var paginationWrapper = document.createElement('div');
-    paginationWrapper.classList.add("swiper-pagination");
-    container.appendChild(paginationWrapper);
-
-    var buttonPrev = document.createElement("div");
-    buttonPrev.classList.add("swiper-button-prev", "swiper-button-black");
-
-    var buttonNext = document.createElement("div");
-    buttonNext.classList.add("swiper-button-next", "swiper-button-black");
-
-    var swiper = new Swiper(container, {
-        direction : 'horizontal',
-        pagination: {
-            el: paginationWrapper,
-            clickable: true,
-        },
-        watchOverflow: true,
-        spaceBetween : 0,
-        navigation:{
-            prevEl: buttonPrev,
-            nextEl: buttonNext
-        },
-        noSwiping: true, // this activates the noSwipingClass functionality
-    });
-    //console.log(swiper);
-
-    // the graphics slide will disable swiping (use hide box instead)
-    if (isTouchDevice) {
-        function enableSwiping(allow) {
-            swiper.params.noSwipingClass = allow ? null : "swiper-slide-main";
-        }
-    } else {
-        function enableSwiping(allow) {
-            buttonPrev.style.display = allow ? 'block' : 'none';
-            buttonNext.style.display = allow ? 'block' : 'none';
-        }
-        swiper.params.noSwipingClass = "swiper-slide-main";
-        container.appendChild(buttonPrev);
-        container.appendChild(buttonNext);
-    }
-    swiper.enableSwiping = enableSwiping;
-    return swiper;
-}
-
-function findSlide(s, type) {
-    var i;
-    for (i = 0; i < swiper[s].slides.length; i++) {
-        if (swiper[s].slides[i].slideType === type) {
-            if (debug_swiper_daniel) {
-                console.log ('found slide ',i);
-            }
-            return i;
-        }
-    }
-    return null;
-}
-
-function replaceSlideContent(slide, title, content) {
-    titlewrapper = slide.childNodes[0].childNodes[0];
-    titlewrapper.innerHTML = title;
-    slide.replaceChild(content, slide.childNodes[1])
-}
-
-function insertSlideXXX(s, title, type, content) {
-    var panel = document.createElement('div');
-    panel.classList.add("panel");
-
-    titlewrapper = document.createElement('span');
-    titlewrapper.innerHTML = title;
-    panel.appendChild(titlewrapper);
-
-    var gridContainer = document.createElement('div');
-    gridContainer.classList.add("grid-container");
-    // Store type so it can be found easiely later.
-    gridContainer.slideType = type;
-    gridContainer.appendChild(panel);
-    gridContainer.appendChild(content);
-
-    var gridelements = document.getElementsByClassName('grid-element');
-                    gridelements[s].innerHTML = "";
-                    gridelements[s].appendChild(gridContainer);
-
-    let pos = 0;
-    return pos;
-}
-
-function createCloseButton(s) {
-    // Creates 'span'-element containing close-button.
-    var wrapper = document.createElement('span');
-    wrapper.onclick = function () {
-        swiper[s].removeSlide(swiper[s].activeIndex);
-        swiper[s].slidePrev();
-    };
-    var closeButton = '<svg class="interactive icon slide-close-icon" fill="#000000" height="24" viewBox="0 0 24 24" width="24"><path d="M19 6.41L17.6 5 12 10.6 6.4 5 5 6.4 10.6 12 5 17.6 6.4 19 12 13.4 17.6 19 19 17.6 13.4 12z"/><path d="M0 0h24v24H0z" fill="none"/></svg>';
-    wrapper.innerHTML = closeButton;
-    return wrapper;
-}
-
-function createUpdateButton(s){
-    // Creates 'span'-element containing update-button (Should be removed later!)
-    var button = document.createElement('span');
-    button.classList.add("interactive", "toggle-updates-graphics")
-    button.onclick = function () {
-        getUpdatesGraphics = ! getUpdatesGraphics;
-        button.innerHTML = "updates = "+getUpdatesGraphics;
-    };
-    button.innerHTML = "updates: "+getUpdatesGraphics;
-    return button;
-}
-
-function defaultSlidePos(s) {
-  return s < 3 ? 0 : swiper[s].slides.length-1;
-}
-
-function getSlideNames() {
-    var names = []
-    for (var s=0; s<MAXBLOCK; s++) {
-        var sw = swiper[s];
-        var name = "";
-        if (sw.activeIndex != defaultSlidePos(s) && sw.slides.length > 0) {
-            name = sw.slides[sw.activeIndex].slideType;
-        }
-        names.push();
-    }
-    for (var s=MAXBLOCK-1; s>=0; s--) {
-        if (names[s] != "") break;
-        names.pop();
-    }
-    return names;
-}