first commit
This commit is contained in:
ISA
463
public/js/functions.js
Normal file
463
public/js/functions.js
Normal file
@@ -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);
|
||||
Reference in New Issue
Block a user