first commit

MessagesMap/konvaperform/js/app.js

@@ -0,0 +1,54 @@
+$(document).foundation();
+
+    swapShiftKey = 0;
+    swapZKey = 0;
+    swapAKey = 0;
+    swapMouseOver = 0;
+
+    document.getElementById("loadingMap").innerHTML = "<div class='spinner-wrapper'><span class='spinner-text'>Daten werden geladen...</span><span class='spinner'></span></div>";
+
+    document.addEventListener('keyup', function (event) {
+      if (event.key === 'z') {
+        console.log('%c Zoom zurückgesetzt !', 'color:#ff0a0a');
+        swapZKey = 0;
+        fitStageReset();
+      }
+    });
+    document.addEventListener('keydown', function (event) {
+      if (event.key === 'z' && swapZKey === 0) {
+        console.log('%c Zoom zurücksetzen', 'color:#008002');
+        swapZKey = 1;
+      }
+    });
+
+    document.addEventListener('keyup', function (event) {
+      if (event.key === 'q') {
+        console.log('%c Zoom zurückgesetzt !', 'color:#ff0a0a');
+        swapAKey = 0;
+        cableReset();
+      }
+    });
+    document.addEventListener('keydown', function (event) {
+      if (event.key === 'q' && swapZKey === 0) {
+        console.log('%c Zoom zurücksetzen', 'color:#008002');
+        swapAKey = 1;
+      }
+    });
+
+
+
+    document.addEventListener('wheel', function (event) {
+      stage.listening(false);
+      //document.getElementById("zoomAktuell").innerHTML = "<b>"+newScale.toFixed(2)+"</b>";
+      //console.log("Listerner Aus");
+      setTimeout(() => {
+        stage.listening(true);
+        layer.batchDraw();   
+        //console.log("Listerner Ein");
+      }, 500);
+    });
+
+    function closeInfoSheet() {
+      document.getElementById("infoSheet").style.visibility = "hidden";
+      localStorage.setItem("infoSheet",1);
+    }

MessagesMap/konvaperform/js/conditions.js

@@ -0,0 +1,206 @@
+var statusData = [];
+var statusDataCable = [];
+var statusDataKue = [];
+
+function getConditions() {
+  //console.log("%cDAT | Angezeigte Punkte : 4880", "color:blue;");
+  //console.log("%cDAT | Angezeigte Linien : ---", "color:blue;");
+
+  console.log("%cSYS | Meldungen werden geladen","color:orange;");
+
+  var req = new XMLHttpRequest();
+req.open("GET", jsonStatusURL , true);
+
+req.onreadystatechange = function(){
+    if ( req.readyState == 4) {
+        if ( req.status >= 200 && req.status < 300 ||req.status == 304 ) {      
+            var returnData = req.responseText;
+            console.log('Statis geladen');
+            statusData = JSON.parse(returnData);
+            setConditions();
+        } else {
+            console.log("Fehler; request.status = " + req.status);
+        }
+        req = null;
+    };
+}
+req.send();
+}
+
+function getConditionsCable() {
+  console.log("%cSYS | Meldungen werden geladen","color:orange;");
+
+  var req = new XMLHttpRequest();
+req.open("GET", jsonServiceURL , true);
+
+req.onreadystatechange = function(){
+    if ( req.readyState == 4) {
+        if ( req.status >= 200 && req.status < 300 ||req.status == 304 ) {      
+            var returnData = req.responseText;
+            console.log('Dienst Statis geladen');
+            statusDataCable = JSON.parse(returnData);
+            getConditionsKue();
+        } else {
+            console.log("Fehler; request.status = " + req.status);
+        }
+        req = null;
+    };
+}
+req.send();
+}
+
+function getConditionsKue() {
+  console.log("%cSYS | Meldungen werden geladen","color:orange;");
+
+  var req = new XMLHttpRequest();
+req.open("GET", jsonKueStatusURL , true);
+
+req.onreadystatechange = function(){
+    if ( req.readyState == 4) {
+        if ( req.status >= 200 && req.status < 300 ||req.status == 304 ) {      
+            var returnData = req.responseText;
+            console.log('KUE Statis geladen');
+            statusDataKue= JSON.parse(returnData);
+            setConditionsCable();
+            document.getElementById("loadingMap").innerHTML = "";
+        } else {
+            console.log("Fehler; request.status = " + req.status);
+        }
+        req = null;
+    };
+}
+req.send();
+}
+
+function setConditions() {
+  // Shape Color Change
+  var anzahlStatis = statusData.Statis.length;
+  var IdLalt = 0;
+  var idlSet = [];
+
+  for (var n = 0; n < anzahlStatis; n++) {
+    
+    if (statusData.Statis[n].IdL > 0) {
+     //console.log(statusData.Statis[n].IdL);
+      var statusID = statusData.Statis[n].IdL;
+      var statusColor = statusData.Statis[n].Co;
+      var statusFeld = statusData.Statis[n].Feld;
+      var statusNa = statusData.Statis[n].Na;
+      var shape = stage.find("#stationCircle"+statusID);
+      
+        if(idlSet.indexOf(statusID) !== -1){
+          //console.log("ID vorhanden! "+statusID)
+          
+        } else{
+          //console.log("ID noch nicht vorhanden! "+statusID)
+
+          shape.fill(statusColor);
+          var shapeQuad = stage.find("#station"+statusFeld+"f"+statusID);
+          //console.log("StatusID= station"+statusFeld+"f"+statusID+" Statusfarbe= "+statusColor);
+          shapeQuad.fill(statusColor);
+        
+
+        if (newScale <= 10){
+          shape.height((standardMeldestationen/5)*meldungMeldestationen);
+          shape.width((standardMeldestationen/5)*meldungMeldestationen);
+          shape.strokeWidth((standardMeldestationen/100)*meldungMeldestationen);
+        }
+        else {
+          shape.height(standardMeldestationen/5);
+          shape.width(standardMeldestationen/5);
+          shape.strokeWidth(standardMeldestationen/100);
+        }
+      }
+        IdLalt = statusID;
+        idlSet.push(statusID);
+    }
+  }
+  layer.batchDraw();
+}
+
+function setConditionsCable() {
+  // Menge an Meldungen Service
+  var anzahlStatis = statusDataCable.Statis.length;
+  console.log("Anzahl geladener Dienst Stati : "+anzahlStatis);
+  // Menge an Meldungen KUE
+  var anzahlStatisKue = statusDataKue.Statis.length;
+  console.log("Anzahl geladener KUEG Stati : "+anzahlStatisKue);
+
+  // KUE Meldungen
+  if (document.getElementById("buttonKabel").style.opacity > 0.6) {
+    for (var n = 0; n < anzahlStatisKue; n++) {
+      var sucheTemp = statusDataKue.Statis[n].IdLD;
+      var sucheSlTemp = statusDataKue.Statis[n].Sl;
+  
+      for (var x = 0; x < jko.Services.length; x++) {
+        if (sucheTemp == jko.Services[x].IdLD && sucheSlTemp == jko.Services[x].Sl) {
+         //console.log("Test: "+sucheTemp+" IdS "+jko.Services[x].IdS);
+        var statusColor = statusDataKue.Statis[n].Co;
+          var shape = stage.find("#line"+jko.Services[x].IdS);
+          shape.stroke(statusColor);
+          shape.strokeWidth(meldungCableThickness/5); 
+        }
+      }
+    }
+  }
+  else {
+    console.log("KÜG Layer abgeschaltet");
+  }
+
+  // Dienste Meldungen
+  if (document.getElementById("buttonDienste").style.opacity > 0.6) {
+    for (var n = 0; n < anzahlStatis; n++) {
+      var sucheTemp = statusDataCable.Statis[n].IdLD;
+      console.log("IdlD Services: "+sucheTemp);
+      for (var x = 0; x < jso.Services.length; x++) {
+        if (sucheTemp == jso.Services[x].IdLD) {
+          //console.log("Test: "+sucheTemp+" IdS "+jso.Services[x].IdS);
+          var statusColor = statusDataCable.Statis[n].Co;
+          var shape = stage.find("#line"+jso.Services[x].IdS);
+          shape.stroke(statusColor);
+            shape.strokeWidth(meldungCableThickness/20);
+        }
+      }
+    }
+  } 
+  else {
+    console.log("Dienste Layer abgeschaltet");
+  }
+
+  layer.batchDraw();
+
+}
+
+function ulafCableDisable() {
+  var anzahlUlafKabel = jso.Services.length;
+  for (var n = 0; n < anzahlUlafKabel; n++) {
+        var shape = stage.find("#line"+jso.Services[n].IdS);
+        //console.log(jso.Services[n].IdS);
+        shape.hide();  
+        layer.batchDraw();
+  }
+  var anzahlKUEKabel = jko.Services.length;
+  for (var n = 0; n < anzahlKUEKabel; n++) {
+        var shape = stage.find("#line"+jko.Services[n].IdS);
+        //console.log(jko.Services[n].IdS);
+        shape.show();  
+        layer.batchDraw();
+  }
+}
+
+function kueCableDisable() {
+  var anzahlKUEKabel = jko.Services.length;
+  for (var n = 0; n < anzahlKUEKabel; n++) {
+        var shape = stage.find("#line"+jko.Services[n].IdS);
+        //console.log(jso.Services[n].IdS);
+        shape.hide();  
+        layer.batchDraw();
+  }
+  var anzahlUlafKabel = jso.Services.length;
+  for (var n = 0; n < anzahlUlafKabel; n++) {
+        var shape = stage.find("#line"+jso.Services[n].IdS);
+        //console.log(jko.Services[n].IdS);
+        shape.show();  
+        layer.batchDraw();
+  }
+}

MessagesMap/konvaperform/js/functions.js

@@ -0,0 +1,463 @@
+function fitStageIntoParentContainer() {
+  
+    var container = document.querySelector('#stage-parent');
+
+    // now we need to fit stage into parent
+    var containerWidth = container.offsetWidth;
+    // to do this we need to scale the stage
+    var scale = containerWidth / stageWidth;
+
+    // stage. und layer. Test
+
+    stage.width(stageWidth * scale);
+    stage.height(stageHeight * scale);
+    stage.scale({ x: scale, y: scale });
+
+      stage.on('wheel', (e) => {
+        //getConditions()
+        e.evt.preventDefault();
+        var oldScale = stage.scaleX();
+
+        var pointer = stage.getPointerPosition();
+
+        var mousePointTo = {
+          x: (pointer.x - stage.x()) / oldScale,
+          y: (pointer.y - stage.y()) / oldScale,
+        };
+
+        newScale = e.evt.deltaY > 0 ? oldScale * scaleBy : oldScale / scaleBy; // Mouse Wheel Richtung > oder <
+        scaleRatio = newScale;
+        localStorage.setItem('zoomStage', newScale);
+        //console.log("Scale Wert: "+scaleRatio+" x: "+stage.x() +" y: "+stage.y());
+
+        //console.log("Pointer Wert  x: "+pointer.x+" y: "+pointer.y);
+        if (newScale > 0.20 && newScale < 150){
+          stage.scale({ x: newScale, y: newScale });
+          //console.log("ZOOM");
+        var newPos = {
+          x: pointer.x - mousePointTo.x * newScale,
+          y: pointer.y - mousePointTo.y * newScale,
+        };
+
+        stage.position(newPos);
+        var pos = JSON.stringify(stage.position());
+        localStorage.setItem("Position",pos);
+        if(newScale <= 10 && big === 0) {
+          big = 1;
+          setConditions();
+        }
+        if(newScale > 10 && big === 1) {
+          big = 0;
+          setConditions();
+        }
+        }
+
+        layer.batchDraw();      
+      });
+    
+}
+
+function fitStageReset() {
+    localStorage.removeItem('xStage');
+    localStorage.removeItem('yStage');
+    localStorage.removeItem('Position');
+    localStorage.removeItem('Scale');
+    localStorage.removeItem('zoomStage');
+    localStorage.removeItem('AbsolutePosition');
+    location.reload();    
+}
+
+function getStageData() {
+    localStorage.removeItem('xStage');
+    localStorage.removeItem('yStage');
+    localStorage.removeItem('Position');
+    localStorage.removeItem('Scale');
+    localStorage.removeItem('zoomStage');
+    localStorage.removeItem('AbsolutePosition');
+    location.reload();   
+}
+
+fitStageIntoParentContainer();
+// adapt the stage on any window resize
+window.addEventListener('resize', fitStageIntoParentContainer);
+
+function getDistance(p1, p2) {
+    return Math.sqrt(Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2));
+}
+
+function getCenter(p1, p2) {
+      return {
+        x: (p1.x + p2.x) / 2,
+        y: (p1.y + p2.y) / 2,
+      };
+}
+
+function stageTouchController(){
+    var lastCenter = null;
+    var lastDist = 0;
+
+    stage.on('touchmove', function (e) {
+      stage.draggable(true);
+      stage.listening(false);
+      e.evt.preventDefault();
+      var touch1 = e.evt.touches[0];
+      var touch2 = e.evt.touches[1];
+
+      if (touch1 && touch2) {
+        // if the stage was under Konva's drag&drop
+        // we need to stop it, and implement our own pan logic with two pointers
+        if (stage.isDragging()) {
+          stage.stopDrag();
+        }
+
+        var p1 = {
+          x: touch1.clientX,
+          y: touch1.clientY,
+        };
+        var p2 = {
+          x: touch2.clientX,
+          y: touch2.clientY,
+        };
+
+        if (!lastCenter) {
+          lastCenter = getCenter(p1, p2);
+          return;
+        }
+        var newCenter = getCenter(p1, p2);
+
+        var dist = getDistance(p1, p2);
+
+        if (!lastDist) {
+          lastDist = dist;
+        }
+
+        // local coordinates of center point
+        var pointTo = {
+          x: (newCenter.x - stage.x()) / stage.scaleX(),
+          y: (newCenter.y - stage.y()) / stage.scaleX(),
+        };
+
+        var scale = stage.scaleX() * (dist / lastDist);
+
+        stage.scaleX(scale);
+        stage.scaleY(scale);
+
+        // calculate new position of the stage
+        var dx = newCenter.x - lastCenter.x;
+        var dy = newCenter.y - lastCenter.y;
+
+        var newPos = {
+          x: newCenter.x - pointTo.x * scale + dx,
+          y: newCenter.y - pointTo.y * scale + dy,
+        };
+
+        stage.position(newPos);
+        stage.batchDraw();
+
+        //setConditions();
+        //setConditionsCable();
+
+        lastDist = dist;
+        lastCenter = newCenter;
+      }
+    });
+
+    stage.on('touchend', function () {
+      stage.draggable(false);
+      stage.listening(true);
+      lastDist = 0;
+      lastCenter = null;
+    });
+
+    var container = stage.container();
+
+      // make it focusable
+
+      container.tabIndex = 1;
+      // focus it
+      // also stage will be in focus on its click
+      container.focus();
+
+    const DELTA = 10;
+
+      container.addEventListener('keydown', function (e) {
+        if (e.keyCode === 39 || e.keyCode === 68) {
+          stage.listening(false);
+          stage.x(stage.x() - DELTA);
+        } else if (e.keyCode === 40 || e.keyCode === 83) {
+          stage.listening(false);
+          stage.y(stage.y() - DELTA);
+        } else if (e.keyCode === 37 || e.keyCode === 65) {
+          stage.listening(false);
+          stage.x(stage.x() + DELTA);
+        } else if (e.keyCode === 38 || e.keyCode === 87) {
+          stage.listening(false);
+          stage.y(stage.y() + DELTA);
+        } else {
+          return;
+        }
+        e.preventDefault();
+
+        layer.batchDraw();
+      });
+      container.addEventListener('keyup', function (e) {
+        if (e.keyCode === 39 || e.keyCode === 68) {
+          stage.listening(true);
+        } else if (e.keyCode === 40 || e.keyCode === 83) {
+          stage.listening(true);
+        } else if (e.keyCode === 37 || e.keyCode === 65) {
+          stage.listening(true);
+        } else if (e.keyCode === 38 || e.keyCode === 87) {
+          stage.listening(true);
+        } else {
+          return;
+        }
+        e.preventDefault();
+        layer.batchDraw();
+      });
+}
+
+stageTouchController();
+
+function sideReload() {
+  window.location.reload(false); 
+}
+
+function getStationInfos(id,color) {
+  //console.log("getStationInfo Test: "+id+" Farbe: "+color);
+  var res = id.split("station");
+  var stationIdInfo = res[1];
+  //console.log("Stations Listen ID: "+stationIdInfo);
+  var stationName = "";
+  for(i=0;i<anzahlStationen;i++) {
+    if(jdo.Points[i].IdL == stationIdInfo) {
+      stationName = jdo.Points[i].Name;
+    }
+  }
+  document.getElementById("tooltipTest").innerHTML = "<h4 style='text-transform: uppercase;'><i class='fi-marker'></i> "+stationName+"</h4><b style='color:"+color+";text-transform: uppercase;'><i class='fi-alert'></i> Fehlertext Test</b><p style='padding-top:5px;'>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et...</p>";
+}
+
+function getLineInfos(id,color) {
+  //console.log("getStationInfo Test: "+id+" Farbe: "+color);
+  var res = id.split("line");
+  var lineId = res[1];
+  //console.log("Strang Listen ID: "+lineId);
+  document.getElementById("tooltipTest").innerHTML = "<h4 style='text-transform: uppercase;'><i class='fi-share'></i> Strang ID: "+jco.Lines[lineId].Short+"</h4><b style='color:"+color+";text-transform: uppercase;'><i class='fi-x'></i> Fehlertext Test</b><p style='padding-top:5px;'>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et...</p>";
+}
+
+dragElement(document.getElementById("mainDataSheet"));
+
+function dragElement(elmnt) {
+  var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
+  if (document.getElementById(elmnt.id + "header")) {
+    // if present, the header is where you move the DIV from:
+    document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
+  } else {
+    // otherwise, move the DIV from anywhere inside the DIV:
+    elmnt.onmousedown = dragMouseDown;
+  }
+
+  function dragMouseDown(e) {
+    e = e || window.event;
+    e.preventDefault();
+    // get the mouse cursor position at startup:
+    pos3 = e.clientX;
+    pos4 = e.clientY;
+    document.onmouseup = closeDragElement;
+    // call a function whenever the cursor moves:
+    document.onmousemove = elementDrag;
+  }
+
+  function elementDrag(e) {
+    e = e || window.event;
+    e.preventDefault();
+    // calculate the new cursor position:
+    pos1 = pos3 - e.clientX;
+    pos2 = pos4 - e.clientY;
+    pos3 = e.clientX;
+    pos4 = e.clientY;
+    // set the element's new position:
+    elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
+    elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
+    localStorage.setItem("mainDataSheetX", elmnt.style.left);
+    localStorage.setItem("mainDataSheetY", elmnt.style.top);
+  }
+
+  function closeDragElement() {
+    // stop moving when mouse button is released:
+    document.onmouseup = null;
+    document.onmousemove = null;
+  }
+}
+
+if (localStorage.getItem("mainDataSheetX")) {
+  document.getElementById("mainDataSheet").style.left = localStorage.getItem("mainDataSheetX");
+  document.getElementById("mainDataSheet").style.top = localStorage.getItem("mainDataSheetY");
+}
+
+function mainDataSheetPositionReset() {
+  localStorage.removeItem("mainDataSheetX");
+  localStorage.removeItem("mainDataSheetY");
+  document.getElementById("mainDataSheet").style.left = "";
+  document.getElementById("mainDataSheet").style.right = "25px";
+  document.getElementById("mainDataSheet").style.top = "25px";
+}
+
+document.getElementById("mousovertext").innerHTML = "OGE Masterkarte<br />Version 0.9.7";
+
+setInterval(() => {
+  if (swapShiftKey === 0) {
+    //document.getElementById("loadingMap").innerHTML = "<div class='spinner-wrapper'><span class='spinner-text'>Update der Daten...</span><span class='spinner'></span></div>";        
+    cableReset();
+  }
+}, (updateInterval*60000));
+
+stage.on('dragstart', function () {
+  layer.listening(false);
+  var pos = JSON.stringify(stage.position());
+  localStorage.setItem("Position",pos);
+  var sca = JSON.stringify(stage.scale());
+  localStorage.setItem("Scale",sca);
+  console.log("AUS");
+});
+stage.on('dragend', function () {
+  layer.listening(true);
+  var pos = JSON.stringify(stage.absolutePosition());
+  localStorage.setItem("AbsolutePosition",pos);
+  var pos = JSON.stringify(stage.position());
+  localStorage.setItem("Position",pos);
+  var sca = JSON.stringify(stage.scale());
+  localStorage.setItem("Scale",sca);
+  layer.batchDraw();
+  console.log("EIN");
+});
+
+function stationButtonChange() {
+  var el = document.getElementById("buttonStation");
+  if(el.style.opacity > 0.6) {  
+    console.log("Aus");  
+    el.style.border = "none";
+    el.style.opacity = 0.4;
+    document.getElementById("ebenenSpeichernButton").style.opacity = 1;
+  }
+  else {
+    console.log("Ein");
+    el.style.border = "2px solid #63de17";
+    el.style.opacity = 1;
+    document.getElementById("ebenenSpeichernButton").style.opacity = 1;
+  }
+}
+
+function ustationButtonChange() {
+
+  var el = document.getElementById("buttonUStation");
+  if(el.style.opacity > 0.6) {  
+    console.log("Aus");  
+    el.style.border = "none";
+    el.style.opacity = 0.4;
+    document.getElementById("ebenenSpeichernButton").style.opacity = 1;
+  }
+  else {
+    console.log("Ein");
+    el.style.border = "2px solid #63de17";
+    el.style.opacity = 1;
+    document.getElementById("ebenenSpeichernButton").style.opacity = 1;
+  }
+
+}
+
+function pstationButtonChange() {
+
+  var el = document.getElementById("buttonPStation");
+  if(el.style.opacity > 0.6) {  
+    console.log("Aus");  
+    el.style.border = "none";
+    el.style.opacity = 0.4;
+    document.getElementById("ebenenSpeichernButton").style.opacity = 1;
+  }
+  else {
+    console.log("Ein");
+    el.style.border = "2px solid #63de17";
+    el.style.opacity = 1;
+    document.getElementById("ebenenSpeichernButton").style.opacity = 1;
+  }
+
+}
+
+function diensteButtonChange() { 
+
+  var el = document.getElementById("buttonDienste");
+  if(el.style.opacity > 0.6) {  
+    console.log("Aus");  
+    el.style.border = "none";
+    el.style.opacity = 0.4;
+    document.getElementById("ebenenSpeichernButton").style.opacity = 1;
+  }
+  else {
+    console.log("Ein");
+    el.style.border = "2px solid #63de17";
+    el.style.opacity = 1;
+    document.getElementById("ebenenSpeichernButton").style.opacity = 1;
+  }
+
+}
+
+function kabelButtonChange() {
+
+  var el = document.getElementById("buttonKabel");
+  if(el.style.opacity > 0.6) {  
+    console.log("Aus");  
+    el.style.border = "none";
+    el.style.opacity = 0.4;
+    document.getElementById("ebenenSpeichernButton").style.opacity = 1;
+  }
+  else {
+    console.log("Ein");
+    el.style.border = "2px solid #63de17";
+    el.style.opacity = 1;
+    document.getElementById("ebenenSpeichernButton").style.opacity = 1;
+  }
+
+}
+
+function ebenenSpeichern() {
+  var ebenenNamen = ["buttonStation","buttonUStation","buttonPStation","buttonDienste","buttonKabel"];
+  var ebenenTemp = [];
+  for (x = 0;x < 5; x++){
+    var el = document.getElementById(ebenenNamen[x]);
+    if(el.style.opacity > 0.6) { 
+      ebenenTemp.push(1);
+    }
+    else{
+      ebenenTemp.push(0);
+    } 
+  }
+  localStorage.setItem("ebenenLayer",ebenenTemp);
+  cableReset();
+}
+
+function ebenenZuruecksetzen() {
+  var ebenenNamen = ["buttonStation","buttonUStation","buttonPStation","buttonDienste","buttonKabel"];
+  document.getElementById("ebenenSpeichernButton").style.opacity = 0;
+  ebenenLayer = localStorage.getItem("ebenenLayer");
+  ebenenLayer = ebenenLayer.replaceAll(",","");
+  //console.log("Layer "+ebenenLayer);
+  for (x = 0;x < 5; x++){
+    if (parseInt(ebenenLayer[x]) > 0) {
+      //console.log("Layer "+x+" Ein - " +ebenenLayer[x]);
+      var el = document.getElementById(ebenenNamen[x]);
+      el.style.border = "2px solid #63de17";
+      el.style.opacity = 1;
+    }
+    else {
+      //console.log("Layer "+x+" Aus - " +ebenenLayer[x]);
+      var el = document.getElementById(ebenenNamen[x]);
+      el.style.border = "none";
+      el.style.opacity = 0.4;
+    }
+  }
+}
+
+setTimeout(() => {
+  ebenenZuruecksetzen(); 
+}, 5000); 

MessagesMap/konvaperform/js/static.js

@@ -0,0 +1,130 @@
+function getMapGeoStatic(){
+    var req = new XMLHttpRequest();
+    req.open("GET", jsonMapBorderURL, true);
+
+    req.onreadystatechange = function(){
+        if ( req.readyState == 4) {
+            if ( req.status >= 200 && req.status < 300 ||req.status == 304 ) {      
+                var returnData = req.responseText;
+                console.log('Datentransfer -Geo Karte- erfolgreich');
+                JsonMapBorder = JSON.parse(returnData);
+                drawMapBorder();
+        
+            } else {
+                console.log("Fehler; request.status = " + req.status);
+            }
+            req = null;
+        };
+    }
+    req.send();
+}
+function getMapGeoStatic2(){
+var req = new XMLHttpRequest();
+req.open("GET", jsonMapBorderURL2, true);
+
+req.onreadystatechange = function(){
+    if ( req.readyState == 4) {
+        if ( req.status >= 200 && req.status < 300 ||req.status == 304 ) {      
+            var returnData = req.responseText;
+            console.log('Datentransfer -Geo Karte- erfolgreich');
+            JsonMapBorder2 = JSON.parse(returnData);
+            drawMapBorder2();
+    
+        } else {
+            console.log("Fehler; request.status = " + req.status);
+        }
+        req = null;
+    };
+}
+req.send();
+}
+
+function drawMapBorder() {
+        borderpoints = [];
+        countPointsMapBorder = JsonMapBorder.coordinates.length;
+        //console.log("Point Border Count: "+countPointsMapBorder);
+        
+        //var cableLayer = new Konva.Layer();
+        // Namen schreiben    
+        
+        // Stationen zeichnen
+        for(i=0;i<countPointsMapBorder;i++) { 
+           // console.log("Coordinates: "+JsonMapBorder.coordinates[i]);
+            var BorderXY = JsonMapBorder.coordinates[i].toString();
+            var LineParts = BorderXY.split(",");
+            LineParts[0] = (parseFloat(LineParts[0]))/10;
+            LineParts[1] = (parseFloat(LineParts[1]))/10;
+
+           // console.log("X: "+LineParts[0]+" Y: "+LineParts[1]);
+
+            var xLineTemp = Math.round(parseInt(((LineParts[0])/skalierung)-minX)/displayFactor);
+            var yLineTemp = Math.round(parseInt((maxY-(LineParts[1])/skalierung))/displayFactor);
+
+           // console.log("X: "+parseInt(xLineTemp)+" Y: "+parseInt(yLineTemp));
+
+            borderpoints.push(parseInt(xLineTemp));
+            borderpoints.push(parseInt(yLineTemp));                                                        
+        }
+
+         //console.log(borderpoints);
+        var border = new Konva.Line({
+            points: borderpoints,
+            stroke: 'grey',
+            strokeWidth: 1,
+            lineJoin: 'square',
+            tension: 0,
+            lineCap: 'square',
+            closed: true,
+            fill: '#fbf5e0',
+          });
+        layer.add(border);
+
+        stage.add(layer);
+}
+
+function drawMapBorder2() {
+    borderpoints2 = [];
+    countPointsMapBorder = JsonMapBorder2.coordinates.length;
+    //console.log("Point Border Count: "+countPointsMapBorder);
+    
+    //var cableLayer = new Konva.Layer();
+    // Namen schreiben    
+    
+    // Stationen zeichnen
+    for(i=0;i<countPointsMapBorder;i++) { 
+       // console.log("Coordinates: "+JsonMapBorder.coordinates[i]);
+        var BorderXY2 = JsonMapBorder2.coordinates[i].toString();
+        var LineParts2 = BorderXY2.split(",");
+        LineParts2[0] = (parseFloat(LineParts2[0]))/10;
+        LineParts2[1] = (parseFloat(LineParts2[1]))/10;
+
+       // console.log("X: "+LineParts[0]+" Y: "+LineParts[1]);
+
+        var xLineTemp2 = Math.round(parseInt(((LineParts2[0])/skalierung)-minX)/displayFactor);
+        var yLineTemp2 = Math.round(parseInt((maxY-(LineParts2[1])/skalierung))/displayFactor);
+
+       // console.log("X: "+parseInt(xLineTemp)+" Y: "+parseInt(yLineTemp));
+
+        borderpoints2.push(parseInt(xLineTemp2));
+        borderpoints2.push(parseInt(yLineTemp2));                                                        
+    }
+
+     //console.log(borderpoints);
+    var border2 = new Konva.Line({
+        points: borderpoints2,
+        //stroke: 'grey',
+        //strokeWidth: 1,
+        lineJoin: 'square',
+        tension: 0,
+        lineCap: 'square',
+        closed: true,
+        fill: '#f3f0dd',
+        offsetX: 20,
+      });
+    layer.add(border2);
+
+    stage.add(layer);
+}
+
+getMapGeoStatic2();
+getMapGeoStatic()

MessagesMap/konvaperform/js/test.js

@@ -0,0 +1,76 @@
+function drawStart() {
+    var canvas = document.getElementById('test');
+    if (canvas.getContext) {
+      var ctx = canvas.getContext('2d');
+      ctx.fillStyle = "rgb(0,0,0)";
+      ctx.fillRect(40, 40, 30, 30);
+      ctx.strokeStyle = "rgb(200,200,200)";
+      ctx.strokeRect(50, 50, (mapWidth-100), (mapHeight-100));
+      getOrte();
+      getLinien();
+
+    }
+}
+
+function getOrte() {
+    var canvas = document.getElementById('test');
+    if (canvas.getContext) {
+        for (i=0;i<10000;i++) {
+            var ctx = canvas.getContext('2d');
+            ctx.fillStyle = "rgb(200,0,0)";
+            //ypsilon = Math.floor(Math.random() * (mapHeight - 100)) + 50;
+            //xsss = Math.floor(Math.random() * (displayWidth - 100)) + 50;
+            ypsilon = Math.floor(Math.random() * (mapHeight - 50)) + 50;
+            xsss = Math.floor(Math.random() * (mapWidth- 50)) + 50;
+            ctx.fillRect(xsss, ypsilon, 10, 10);
+        }
+        for (i=0;i<20000;i++) {
+            var ctx = canvas.getContext('2d');
+            ctx.fillStyle = "rgb(100,0,0)";
+            //ypsilon = Math.floor(Math.random() * (mapHeight - 100)) + 50;
+            //xsss = Math.floor(Math.random() * (displayWidth - 100)) + 50;
+            ypsilon = Math.floor(Math.random() * (mapHeight - 50)) + 50;
+            xsss = Math.floor(Math.random() * (mapWidth- 50)) + 50;
+            ctx.fillRect(xsss, ypsilon, 3, 3);
+        }
+        for (i=0;i<10000;i++) {
+            var ctx = canvas.getContext('2d');
+            ctx.fillStyle = "rgb(100,100,100)";
+            //ypsilon = Math.floor(Math.random() * (mapHeight - 100)) + 50;
+            //xsss = Math.floor(Math.random() * (displayWidth - 100)) + 50;
+            ypsilon = Math.floor(Math.random() * (mapHeight - 50)) + 50;
+            xsss = Math.floor(Math.random() * (mapWidth- 50)) + 50;
+            ctx.fillRect(xsss, ypsilon, 5, 5);
+        }
+    }
+}
+
+function getLinien() {
+    var canvas = document.getElementById('test');
+    if (canvas.getContext) {
+        
+        for (i=0;i<10000;i++) {
+            var ctx = canvas.getContext('2d');
+            ctx.beginPath(); 
+            //ypsilon = Math.floor(Math.random() * (mapHeight - 100)) + 50;
+            //xsss = Math.floor(Math.random() * (displayWidth- 100)) + 50;
+            //ypsilon2 = Math.floor(Math.random() * (mapHeight - 100)) + 50;
+            //xsss2 = Math.floor(Math.random() * (displayWidth - 100)) + 50;
+            ypsilon = Math.floor(Math.random() * (mapHeight - 50)) + 50;
+            xsss = Math.floor(Math.random() * (mapWidth- 50)) + 50;
+            ypsilon2 = Math.floor(Math.random() * (mapHeight - 50)) + 50;
+            xsss2 = Math.floor(Math.random() * (mapWidth - 50)) + 50;
+            ctx.moveTo(xsss, ypsilon);
+            ctx.lineTo(xsss2, ypsilon2);
+            ctx.lineWidth = 0.25;
+            ctx.strokeStyle = 'green';
+            ctx.stroke();
+        }
+    }
+}
+
+// Mausraderkennung -> Runter +1 | Hoch -1
+window.addEventListener("wheel", event => {
+    const delta = Math.sign(event.deltaY);
+    console.info(delta);
+});

MessagesMap/konvaperform/js/vendor/what-input.js

@@ -0,0 +1,494 @@
+/**
+ * what-input - A global utility for tracking the current input method (mouse, keyboard or touch).
+ * @version v5.2.3
+ * @link https://github.com/ten1seven/what-input
+ * @license MIT
+ */
+(function webpackUniversalModuleDefinition(root, factory) {
+	if(typeof exports === 'object' && typeof module === 'object')
+		module.exports = factory();
+	else if(typeof define === 'function' && define.amd)
+		define("whatInput", [], factory);
+	else if(typeof exports === 'object')
+		exports["whatInput"] = factory();
+	else
+		root["whatInput"] = factory();
+})(this, function() {
+return /******/ (function(modules) { // webpackBootstrap
+/******/ 	// The module cache
+/******/ 	var installedModules = {};
+
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+
+/******/ 		// Check if module is in cache
+/******/ 		if(installedModules[moduleId])
+/******/ 			return installedModules[moduleId].exports;
+
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = installedModules[moduleId] = {
+/******/ 			exports: {},
+/******/ 			id: moduleId,
+/******/ 			loaded: false
+/******/ 		};
+
+/******/ 		// Execute the module function
+/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
+
+/******/ 		// Flag the module as loaded
+/******/ 		module.loaded = true;
+
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+
+
+/******/ 	// expose the modules object (__webpack_modules__)
+/******/ 	__webpack_require__.m = modules;
+
+/******/ 	// expose the module cache
+/******/ 	__webpack_require__.c = installedModules;
+
+/******/ 	// __webpack_public_path__
+/******/ 	__webpack_require__.p = "";
+
+/******/ 	// Load entry module and return exports
+/******/ 	return __webpack_require__(0);
+/******/ })
+/************************************************************************/
+/******/ ([
+/* 0 */
+/***/ (function(module, exports) {
+
+	'use strict';
+
+	module.exports = function () {
+	  /*
+	   * bail out if there is no document or window
+	   * (i.e. in a node/non-DOM environment)
+	   *
+	   * Return a stubbed API instead
+	   */
+	  if (typeof document === 'undefined' || typeof window === 'undefined') {
+	    return {
+	      // always return "initial" because no interaction will ever be detected
+	      ask: function ask() {
+	        return 'initial';
+	      },
+
+	      // always return null
+	      element: function element() {
+	        return null;
+	      },
+
+	      // no-op
+	      ignoreKeys: function ignoreKeys() {},
+
+	      // no-op
+	      specificKeys: function specificKeys() {},
+
+	      // no-op
+	      registerOnChange: function registerOnChange() {},
+
+	      // no-op
+	      unRegisterOnChange: function unRegisterOnChange() {}
+	    };
+	  }
+
+	  /*
+	   * variables
+	   */
+
+	  // cache document.documentElement
+	  var docElem = document.documentElement;
+
+	  // currently focused dom element
+	  var currentElement = null;
+
+	  // last used input type
+	  var currentInput = 'initial';
+
+	  // last used input intent
+	  var currentIntent = currentInput;
+
+	  // UNIX timestamp of current event
+	  var currentTimestamp = Date.now();
+
+	  // check for sessionStorage support
+	  // then check for session variables and use if available
+	  try {
+	    if (window.sessionStorage.getItem('what-input')) {
+	      currentInput = window.sessionStorage.getItem('what-input');
+	    }
+
+	    if (window.sessionStorage.getItem('what-intent')) {
+	      currentIntent = window.sessionStorage.getItem('what-intent');
+	    }
+	  } catch (e) {}
+
+	  // form input types
+	  var formInputs = ['button', 'input', 'select', 'textarea'];
+
+	  // empty array for holding callback functions
+	  var functionList = [];
+
+	  // list of modifier keys commonly used with the mouse and
+	  // can be safely ignored to prevent false keyboard detection
+	  var ignoreMap = [16, // shift
+	  17, // control
+	  18, // alt
+	  91, // Windows key / left Apple cmd
+	  93 // Windows menu / right Apple cmd
+	  ];
+
+	  var specificMap = [];
+
+	  // mapping of events to input types
+	  var inputMap = {
+	    keydown: 'keyboard',
+	    keyup: 'keyboard',
+	    mousedown: 'mouse',
+	    mousemove: 'mouse',
+	    MSPointerDown: 'pointer',
+	    MSPointerMove: 'pointer',
+	    pointerdown: 'pointer',
+	    pointermove: 'pointer',
+	    touchstart: 'touch',
+	    touchend: 'touch'
+
+	    // boolean: true if the page is being scrolled
+	  };var isScrolling = false;
+
+	  // store current mouse position
+	  var mousePos = {
+	    x: null,
+	    y: null
+
+	    // map of IE 10 pointer events
+	  };var pointerMap = {
+	    2: 'touch',
+	    3: 'touch', // treat pen like touch
+	    4: 'mouse'
+
+	    // check support for passive event listeners
+	  };var supportsPassive = false;
+
+	  try {
+	    var opts = Object.defineProperty({}, 'passive', {
+	      get: function get() {
+	        supportsPassive = true;
+	      }
+	    });
+
+	    window.addEventListener('test', null, opts);
+	  } catch (e) {}
+
+	  /*
+	   * set up
+	   */
+
+	  var setUp = function setUp() {
+	    // add correct mouse wheel event mapping to `inputMap`
+	    inputMap[detectWheel()] = 'mouse';
+
+	    addListeners();
+	    doUpdate('input');
+	    doUpdate('intent');
+	  };
+
+	  /*
+	   * events
+	   */
+
+	  var addListeners = function addListeners() {
+	    // `pointermove`, `MSPointerMove`, `mousemove` and mouse wheel event binding
+	    // can only demonstrate potential, but not actual, interaction
+	    // and are treated separately
+	    var options = supportsPassive ? { passive: true } : false;
+
+	    // pointer events (mouse, pen, touch)
+	    if (window.PointerEvent) {
+	      window.addEventListener('pointerdown', setInput);
+	      window.addEventListener('pointermove', setIntent);
+	    } else if (window.MSPointerEvent) {
+	      window.addEventListener('MSPointerDown', setInput);
+	      window.addEventListener('MSPointerMove', setIntent);
+	    } else {
+	      // mouse events
+	      window.addEventListener('mousedown', setInput);
+	      window.addEventListener('mousemove', setIntent);
+
+	      // touch events
+	      if ('ontouchstart' in window) {
+	        window.addEventListener('touchstart', setInput, options);
+	        window.addEventListener('touchend', setInput);
+	      }
+	    }
+
+	    // mouse wheel
+	    window.addEventListener(detectWheel(), setIntent, options);
+
+	    // keyboard events
+	    window.addEventListener('keydown', setInput);
+	    window.addEventListener('keyup', setInput);
+
+	    // focus events
+	    window.addEventListener('focusin', setElement);
+	    window.addEventListener('focusout', clearElement);
+	  };
+
+	  // checks conditions before updating new input
+	  var setInput = function setInput(event) {
+	    var eventKey = event.which;
+	    var value = inputMap[event.type];
+
+	    if (value === 'pointer') {
+	      value = pointerType(event);
+	    }
+
+	    var ignoreMatch = !specificMap.length && ignoreMap.indexOf(eventKey) === -1;
+
+	    var specificMatch = specificMap.length && specificMap.indexOf(eventKey) !== -1;
+
+	    var shouldUpdate = value === 'keyboard' && eventKey && (ignoreMatch || specificMatch) || value === 'mouse' || value === 'touch';
+
+	    // prevent touch detection from being overridden by event execution order
+	    if (validateTouch(value)) {
+	      shouldUpdate = false;
+	    }
+
+	    if (shouldUpdate && currentInput !== value) {
+	      currentInput = value;
+
+	      try {
+	        window.sessionStorage.setItem('what-input', currentInput);
+	      } catch (e) {}
+
+	      doUpdate('input');
+	    }
+
+	    if (shouldUpdate && currentIntent !== value) {
+	      // preserve intent for keyboard interaction with form fields
+	      var activeElem = document.activeElement;
+	      var notFormInput = activeElem && activeElem.nodeName && (formInputs.indexOf(activeElem.nodeName.toLowerCase()) === -1 || activeElem.nodeName.toLowerCase() === 'button' && !checkClosest(activeElem, 'form'));
+
+	      if (notFormInput) {
+	        currentIntent = value;
+
+	        try {
+	          window.sessionStorage.setItem('what-intent', currentIntent);
+	        } catch (e) {}
+
+	        doUpdate('intent');
+	      }
+	    }
+	  };
+
+	  // updates the doc and `inputTypes` array with new input
+	  var doUpdate = function doUpdate(which) {
+	    docElem.setAttribute('data-what' + which, which === 'input' ? currentInput : currentIntent);
+
+	    fireFunctions(which);
+	  };
+
+	  // updates input intent for `mousemove` and `pointermove`
+	  var setIntent = function setIntent(event) {
+	    var value = inputMap[event.type];
+
+	    if (value === 'pointer') {
+	      value = pointerType(event);
+	    }
+
+	    // test to see if `mousemove` happened relative to the screen to detect scrolling versus mousemove
+	    detectScrolling(event);
+
+	    // only execute if scrolling isn't happening
+	    if ((!isScrolling && !validateTouch(value) || isScrolling && event.type === 'wheel' || event.type === 'mousewheel' || event.type === 'DOMMouseScroll') && currentIntent !== value) {
+	      currentIntent = value;
+
+	      try {
+	        window.sessionStorage.setItem('what-intent', currentIntent);
+	      } catch (e) {}
+
+	      doUpdate('intent');
+	    }
+	  };
+
+	  var setElement = function setElement(event) {
+	    if (!event.target.nodeName) {
+	      // If nodeName is undefined, clear the element
+	      // This can happen if click inside an <svg> element.
+	      clearElement();
+	      return;
+	    }
+
+	    currentElement = event.target.nodeName.toLowerCase();
+	    docElem.setAttribute('data-whatelement', currentElement);
+
+	    if (event.target.classList && event.target.classList.length) {
+	      docElem.setAttribute('data-whatclasses', event.target.classList.toString().replace(' ', ','));
+	    }
+	  };
+
+	  var clearElement = function clearElement() {
+	    currentElement = null;
+
+	    docElem.removeAttribute('data-whatelement');
+	    docElem.removeAttribute('data-whatclasses');
+	  };
+
+	  /*
+	   * utilities
+	   */
+
+	  var pointerType = function pointerType(event) {
+	    if (typeof event.pointerType === 'number') {
+	      return pointerMap[event.pointerType];
+	    } else {
+	      // treat pen like touch
+	      return event.pointerType === 'pen' ? 'touch' : event.pointerType;
+	    }
+	  };
+
+	  // prevent touch detection from being overridden by event execution order
+	  var validateTouch = function validateTouch(value) {
+	    var timestamp = Date.now();
+
+	    var touchIsValid = value === 'mouse' && currentInput === 'touch' && timestamp - currentTimestamp < 200;
+
+	    currentTimestamp = timestamp;
+
+	    return touchIsValid;
+	  };
+
+	  // detect version of mouse wheel event to use
+	  // via https://developer.mozilla.org/en-US/docs/Web/API/Element/wheel_event
+	  var detectWheel = function detectWheel() {
+	    var wheelType = null;
+
+	    // Modern browsers support "wheel"
+	    if ('onwheel' in document.createElement('div')) {
+	      wheelType = 'wheel';
+	    } else {
+	      // Webkit and IE support at least "mousewheel"
+	      // or assume that remaining browsers are older Firefox
+	      wheelType = document.onmousewheel !== undefined ? 'mousewheel' : 'DOMMouseScroll';
+	    }
+
+	    return wheelType;
+	  };
+
+	  // runs callback functions
+	  var fireFunctions = function fireFunctions(type) {
+	    for (var i = 0, len = functionList.length; i < len; i++) {
+	      if (functionList[i].type === type) {
+	        functionList[i].fn.call(undefined, type === 'input' ? currentInput : currentIntent);
+	      }
+	    }
+	  };
+
+	  // finds matching element in an object
+	  var objPos = function objPos(match) {
+	    for (var i = 0, len = functionList.length; i < len; i++) {
+	      if (functionList[i].fn === match) {
+	        return i;
+	      }
+	    }
+	  };
+
+	  var detectScrolling = function detectScrolling(event) {
+	    if (mousePos['x'] !== event.screenX || mousePos['y'] !== event.screenY) {
+	      isScrolling = false;
+
+	      mousePos['x'] = event.screenX;
+	      mousePos['y'] = event.screenY;
+	    } else {
+	      isScrolling = true;
+	    }
+	  };
+
+	  // manual version of `closest()`
+	  var checkClosest = function checkClosest(elem, tag) {
+	    var ElementPrototype = window.Element.prototype;
+
+	    if (!ElementPrototype.matches) {
+	      ElementPrototype.matches = ElementPrototype.msMatchesSelector || ElementPrototype.webkitMatchesSelector;
+	    }
+
+	    if (!ElementPrototype.closest) {
+	      do {
+	        if (elem.matches(tag)) {
+	          return elem;
+	        }
+
+	        elem = elem.parentElement || elem.parentNode;
+	      } while (elem !== null && elem.nodeType === 1);
+
+	      return null;
+	    } else {
+	      return elem.closest(tag);
+	    }
+	  };
+
+	  /*
+	   * init
+	   */
+
+	  // don't start script unless browser cuts the mustard
+	  // (also passes if polyfills are used)
+	  if ('addEventListener' in window && Array.prototype.indexOf) {
+	    setUp();
+	  }
+
+	  /*
+	   * api
+	   */
+
+	  return {
+	    // returns string: the current input type
+	    // opt: 'intent'|'input'
+	    // 'input' (default): returns the same value as the `data-whatinput` attribute
+	    // 'intent': includes `data-whatintent` value if it's different than `data-whatinput`
+	    ask: function ask(opt) {
+	      return opt === 'intent' ? currentIntent : currentInput;
+	    },
+
+	    // returns string: the currently focused element or null
+	    element: function element() {
+	      return currentElement;
+	    },
+
+	    // overwrites ignored keys with provided array
+	    ignoreKeys: function ignoreKeys(arr) {
+	      ignoreMap = arr;
+	    },
+
+	    // overwrites specific char keys to update on
+	    specificKeys: function specificKeys(arr) {
+	      specificMap = arr;
+	    },
+
+	    // attach functions to input and intent "events"
+	    // funct: function to fire on change
+	    // eventType: 'input'|'intent'
+	    registerOnChange: function registerOnChange(fn, eventType) {
+	      functionList.push({
+	        fn: fn,
+	        type: eventType || 'input'
+	      });
+	    },
+
+	    unRegisterOnChange: function unRegisterOnChange(fn) {
+	      var position = objPos(fn);
+
+	      if (position || position === 0) {
+	        functionList.splice(position, 1);
+	      }
+	    }
+	  };
+	}();
+
+/***/ })
+/******/ ])
+});
+;