1173 lines
43 KiB
JavaScript
1173 lines
43 KiB
JavaScript
var jdo = [];
|
|
var jco = [];
|
|
var jso = [];
|
|
var jko = [];
|
|
var jks = [];
|
|
var cables;
|
|
var stationID = 0;
|
|
var stationInv = 0;
|
|
var anzahlStationen = 0;
|
|
var anzahlCable = 0;
|
|
var stageXofData = 0;
|
|
var stageYofData = 0;
|
|
var stageXofX = 0;
|
|
var stageYofY = 0;
|
|
|
|
var mueStation;
|
|
var uStation;
|
|
|
|
//Konva.hitOnDragEnabled = true;
|
|
Konva.pixelRatio = 1;
|
|
|
|
var stage = new Konva.Stage({
|
|
container: 'container',
|
|
width: stageWidth,
|
|
height: stageHeight,
|
|
draggable: true,
|
|
x: stageXofX,
|
|
y: stageYofY,
|
|
offsetY: stageYofData,
|
|
offsetX: stageXofData
|
|
});
|
|
|
|
if (localStorage.getItem('Position')) {
|
|
var pos = localStorage.getItem('Position');
|
|
pos = pos.replace('"x"','');
|
|
pos = pos.replace('"y"','');
|
|
pos = pos.replace('{','');
|
|
pos = pos.replace('}','');
|
|
pos = pos.replace(':','');
|
|
pos = pos.replace(':','');
|
|
pos = pos.split(',');
|
|
//console.log(pos[0]+' - '+pos[1]);
|
|
/*var sca = localStorage.getItem('Scale');
|
|
sca = sca.replace('"x"','');
|
|
sca = sca.replace('"y"','');
|
|
sca = sca.replace('{','');
|
|
sca = sca.replace('}','');
|
|
sca = sca.replace(':','');
|
|
sca = sca.replace(':','');
|
|
sca = sca.split(',');
|
|
console.log(sca[0]+' - '+sca[1]);*/
|
|
stage.position({
|
|
x: parseInt(pos[0]),
|
|
y: parseInt(pos[1])
|
|
});
|
|
stage.scale({
|
|
//x: parseInt(sca[0]),
|
|
//y: parseInt(sca[1])
|
|
x: zoomStage,
|
|
y: zoomStage
|
|
});
|
|
}
|
|
else {
|
|
stageYofData = stageHeight/mapStartOffsetTemp;
|
|
stageXofData = -(displayWidth/2);
|
|
var stageXofX = 0;
|
|
var stageYofY = 0;
|
|
stage.position({
|
|
x: 0,
|
|
y: 0
|
|
});
|
|
stage.offset({
|
|
x: stageXofData,
|
|
y: stageYofData
|
|
});
|
|
}
|
|
|
|
var layer = new Konva.Layer();
|
|
|
|
stage.container().style.backgroundColor = '#e3f9fc';
|
|
// Stationen
|
|
function getStationStatic(){
|
|
var req = new XMLHttpRequest();
|
|
req.open("GET", jsonStationURL, 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 -StationStatic- erfolgreich');
|
|
jdo = JSON.parse(returnData);
|
|
getServiceStatic();
|
|
|
|
} else {
|
|
console.log("Fehler; request.status = " + req.status);
|
|
|
|
}
|
|
req = null;
|
|
};
|
|
}
|
|
req.send();
|
|
}
|
|
|
|
function getServiceStatic(){
|
|
var req = new XMLHttpRequest();
|
|
req.open("GET", jsonServiceStaticURL, 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 -ServiceStatic- erfolgreich');
|
|
jso = JSON.parse(returnData);
|
|
drawStaticMap();
|
|
|
|
} else {
|
|
console.log("Fehler; request.status = " + req.status);
|
|
|
|
}
|
|
req = null;
|
|
};
|
|
}
|
|
req.send();
|
|
}
|
|
// KABEL
|
|
function getCableStatic(){
|
|
var req = new XMLHttpRequest();
|
|
req.open("GET", jsonCableURL, 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 -CableStatic- erfolgreich');
|
|
jco = JSON.parse(returnData);
|
|
getKueStatic();
|
|
|
|
} else {
|
|
console.log("Fehler; request.status = " + req.status);
|
|
|
|
}
|
|
req = null;
|
|
};
|
|
}
|
|
req.timeout = 60000;
|
|
req.send();
|
|
}
|
|
|
|
function getKueStatic(){
|
|
var req = new XMLHttpRequest();
|
|
req.open("GET", jsonKueURL, 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 -KUE Static- erfolgreich');
|
|
jko = JSON.parse(returnData);
|
|
getKueStatis();
|
|
|
|
} else {
|
|
console.log("Fehler; request.status = " + req.status);
|
|
|
|
}
|
|
req = null;
|
|
};
|
|
}
|
|
req.send();
|
|
}
|
|
|
|
function getKueStatis(){
|
|
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('Datentransfer -KUE Statis- erfolgreich');
|
|
jks = JSON.parse(returnData);
|
|
drawCableMap();
|
|
|
|
} else {
|
|
console.log("Fehler; request.status = " + req.status);
|
|
|
|
}
|
|
req = null;
|
|
};
|
|
}
|
|
req.send();
|
|
}
|
|
|
|
function drawStaticMap() {
|
|
anzahlStationen = jdo.Points.length;
|
|
// Namen schreiben
|
|
|
|
// Stationen zeichnen
|
|
for(i=0;i<anzahlStationen;i++) {
|
|
|
|
if (jdo.Points[i].X) {
|
|
var xTemp = Math.round(parseInt(((jdo.Points[i].X)/skalierung)-minX)/displayFactor)-1;
|
|
var yTemp = Math.round(parseInt((maxY-(jdo.Points[i].Y)/skalierung))/displayFactor)-1;
|
|
var nameTemp = jdo.Points[i].Name;
|
|
stationID = jdo.Points[i].IdL;
|
|
stationInv = jdo.Points[i].Inv;
|
|
|
|
// console.log(stationInv)
|
|
// MS,ULAF,ECI
|
|
if ((stationInv) === 7) {
|
|
mueStation = new Konva.Group({
|
|
x: xTemp,
|
|
y: yTemp,
|
|
id: "station"+stationID,
|
|
//draggable: true,
|
|
});
|
|
|
|
mueStation.add(
|
|
new Konva.Text({
|
|
text: nameTemp,
|
|
x: -(0.10*standardFontSize),
|
|
y: (0.5/standardFontSize)-(standardMeldestationen/5),
|
|
fontSize: standardFontSize/10,
|
|
fill: 'black',
|
|
align: 'center',
|
|
})
|
|
);
|
|
|
|
mueStation.add(
|
|
new Konva.Rect({
|
|
width: standardMeldestationen/5,
|
|
height: standardMeldestationen/5,
|
|
x: -(standardMeldestationen/5)+1,
|
|
y: -(standardMeldestationen/5)+1,
|
|
fill: 'green',
|
|
stroke: 'black',
|
|
strokeWidth: standardMeldestationen/100,
|
|
id: "station1f"+stationID
|
|
})
|
|
);
|
|
mueStation.add(
|
|
new Konva.Rect({
|
|
width: standardMeldestationen/5,
|
|
height: standardMeldestationen/5,
|
|
x: 1,
|
|
y: -(standardMeldestationen/5)+1,
|
|
fill: 'green',
|
|
stroke: 'black',
|
|
strokeWidth: standardMeldestationen/100,
|
|
id: "station2f"+stationID
|
|
})
|
|
);
|
|
mueStation.add(
|
|
new Konva.Rect({
|
|
width: standardMeldestationen/5,
|
|
height: standardMeldestationen/5,
|
|
x: -(standardMeldestationen/5)+1,
|
|
y: 1,
|
|
fill: 'green',
|
|
stroke: 'black',
|
|
strokeWidth: standardMeldestationen/100,
|
|
id: "station3f"+stationID
|
|
})
|
|
);
|
|
mueStation.add(
|
|
new Konva.Rect({
|
|
width: standardMeldestationen/5,
|
|
height: standardMeldestationen/5,
|
|
x: 1,
|
|
y: 1,
|
|
fill: 'lightgray',
|
|
stroke: 'black',
|
|
strokeWidth: standardMeldestationen/100,
|
|
id: "station4f"+stationID
|
|
})
|
|
);
|
|
mueStation.add(
|
|
new Konva.Circle({
|
|
x: 1,
|
|
y: 1,
|
|
radius: standardMeldestationen/10,
|
|
fill: 'green',
|
|
stroke: 'black',
|
|
strokeWidth: standardMeldestationen/100,
|
|
id: "stationCircle"+stationID
|
|
})
|
|
);
|
|
|
|
layer.add(mueStation);
|
|
|
|
if (document.getElementById("buttonStation").style.opacity > 0.6) {
|
|
mueStation.show();
|
|
} else {
|
|
mueStation.hide();
|
|
}
|
|
|
|
// MUE Station Mouseover
|
|
mueStation.on('mouseenter', function () {
|
|
swapMouseOver = 1;
|
|
var name = this.id();
|
|
name = name.replace("station","");
|
|
var DataPlus = "";
|
|
//console.log("GROUP ID"+name);
|
|
var anzahlStatis = statusData.Statis.length;
|
|
//console.log("Stati Anzahl: "+anzahlStatis);
|
|
for (var n = 0; n < anzahlStatis; n++) {
|
|
|
|
if (statusData.Statis[n].IdL > 0) {
|
|
//console.log("Station: "+statusData.Statis[n].IdL+" Name: "+name);
|
|
if(statusData.Statis[n].IdL == name) {
|
|
var DataTemp = statusData.Statis[n].Me;
|
|
var ColorTemp = statusData.Statis[n].Co;
|
|
DataPlus += "<li style='color:"+ColorTemp+"'><p style='color:#000000;margin-block-end: 0em;'>"+DataTemp+"</p></li>";
|
|
|
|
}
|
|
//console.log("Data: "+DataPlus);
|
|
}
|
|
|
|
}
|
|
|
|
stage.container().style.cursor = 'pointer';
|
|
//console.log("Group Enter");
|
|
var NameTemp = "";
|
|
for (var i = 0; i < jdo.Points.length; i++){
|
|
// look for the entry with a matching `code` value
|
|
if (jdo.Points[i].IdL == name){
|
|
//console.log(jdo.Points[i].Name+" gefunden");
|
|
NameTemp = jdo.Points[i].Name;
|
|
}
|
|
}
|
|
|
|
var scaleStageRatio = stage.scaleX();
|
|
scaleStageRatio = parseFloat(scaleStageRatio).toFixed(2);
|
|
scaleStageRatio = scaleStageRatio;
|
|
localStorage.setItem('zoomStage', scaleStageRatio);
|
|
|
|
for (var m = 0; m < jdo.Points.length; m++){
|
|
// look for the entry with a matching `code` value
|
|
if (jdo.Points[m].IdL == name){
|
|
//console.log(jdo.Points[i].Name+" gefunden");
|
|
localStorage.setItem('xStage', jdo.Points[m].X);
|
|
localStorage.setItem('yStage', jdo.Points[m].Y);
|
|
}
|
|
}
|
|
|
|
document.getElementById("tooltipTest").innerHTML = "<h4 style='text-transform: uppercase;font-weight:700;font-size:1rem;'>"+NameTemp+"</h4>";
|
|
document.getElementById("tooltipTest2").innerHTML = "<ul>"+DataPlus+"</ul>";
|
|
});
|
|
|
|
mueStation.on('mouseleave', function () {
|
|
swapMouseOver = 0;
|
|
stage.container().style.cursor = 'default';
|
|
});
|
|
|
|
mueStation.on('click', function () {
|
|
var scaleStageRatio = stage.scaleX();
|
|
scaleStageRatio = parseFloat(scaleStageRatio).toFixed(2);
|
|
scaleStageRatio = scaleStageRatio;
|
|
localStorage.setItem('zoomStage', scaleStageRatio);
|
|
var name = this.id();
|
|
//console.log("CLICK"+name);
|
|
//document.getElementById("mousovertext").innerHTML = "Click auf den Bereich - "+name;
|
|
name = name.replace("station","");
|
|
console.log("Click auf den Bereich mit der ID "+name);
|
|
|
|
for (var m = 0; m < jdo.Points.length; m++){
|
|
// look for the entry with a matching `code` value
|
|
if (jdo.Points[m].IdL == name){
|
|
//console.log(jdo.Points[i].Name+" gefunden");
|
|
localStorage.setItem('xStage', jdo.Points[m].X);
|
|
localStorage.setItem('yStage', jdo.Points[m].Y);
|
|
}
|
|
}
|
|
document.getElementById("mousovertext").innerHTML = "Daten werden geladen...";
|
|
var Ziel = quellURL+"/talas5/Stations/Location.aspx?id="+name+"&b=1";
|
|
window.location.href = Ziel;
|
|
});
|
|
|
|
}
|
|
|
|
// MS,ECI
|
|
if ((stationInv) === 5) {
|
|
var meStation = new Konva.Group({
|
|
x: xTemp,
|
|
y: yTemp,
|
|
// id: nameTemp,
|
|
//draggable: true,
|
|
});
|
|
|
|
meStation.add(
|
|
new Konva.Text({
|
|
x: -(0.10*standardFontSize),
|
|
y: (0.5/standardFontSize)-(standardMeldestationen/5),
|
|
align: 'center',
|
|
text: nameTemp,
|
|
fontSize: standardFontSize/10,
|
|
//fontFamily: 'Calibri',
|
|
fill: 'black'
|
|
})
|
|
);
|
|
meStation.add(
|
|
new Konva.Rect({
|
|
width: standardMeldestationen/5,
|
|
height: standardMeldestationen/5,
|
|
x: -(standardMeldestationen/5)+1,
|
|
y: -(standardMeldestationen/5)+1,
|
|
fill: 'green',
|
|
stroke: 'black',
|
|
strokeWidth: standardMeldestationen/100,
|
|
id: "station1f"+stationID
|
|
})
|
|
);
|
|
meStation.add(
|
|
new Konva.Rect({
|
|
width: standardMeldestationen/5,
|
|
height: standardMeldestationen/5,
|
|
x: 1,
|
|
y: -(standardMeldestationen/5)+1,
|
|
fill: 'lightgray',
|
|
stroke: 'black',
|
|
strokeWidth: standardMeldestationen/100,
|
|
id: "station2f"+stationID
|
|
})
|
|
);
|
|
meStation.add(
|
|
new Konva.Rect({
|
|
width: standardMeldestationen/5,
|
|
height: standardMeldestationen/5,
|
|
x: -(standardMeldestationen/5)+1,
|
|
y: 1,
|
|
fill: 'green',
|
|
stroke: 'black',
|
|
strokeWidth: standardMeldestationen/100,
|
|
id: "station3f"+stationID
|
|
})
|
|
);
|
|
meStation.add(
|
|
new Konva.Rect({
|
|
width: standardMeldestationen/5,
|
|
height: standardMeldestationen/5,
|
|
x: 1,
|
|
y: 1,
|
|
fill: 'lightgray',
|
|
stroke: 'black',
|
|
strokeWidth: standardMeldestationen/100,
|
|
id: "station4f"+stationID
|
|
})
|
|
);
|
|
meStation.add(
|
|
new Konva.Circle({
|
|
x: 1,
|
|
y: 1,
|
|
radius: standardMeldestationen/10,
|
|
fill: 'green',
|
|
stroke: 'black',
|
|
strokeWidth: standardMeldestationen/100,
|
|
id: "stationCircle"+stationID
|
|
})
|
|
);
|
|
|
|
layer.add(meStation);
|
|
|
|
if (document.getElementById("buttonStation").style.opacity > 0.6) {
|
|
meStation.show();
|
|
} else {
|
|
meStation.hide();
|
|
}
|
|
|
|
// ME Station Mouseover
|
|
meStation.on('mouseenter', function () {
|
|
swapMouseOver = 1;
|
|
var name = this.id();
|
|
name = name.replace("station","");
|
|
var DataPlus = "";
|
|
//console.log("GROUP ID"+name);
|
|
var anzahlStatis = statusData.Statis.length;
|
|
//console.log("Stati Anzahl: "+anzahlStatis);
|
|
for (var n = 0; n < anzahlStatis; n++) {
|
|
|
|
if (statusData.Statis[n].IdL > 0) {
|
|
//console.log("Station: "+statusData.Statis[n].IdL+" Name: "+name);
|
|
if(statusData.Statis[n].IdL == name) {
|
|
var DataTemp = statusData.Statis[n].Me;
|
|
var ColorTemp = statusData.Statis[n].Co;
|
|
DataPlus += "<li style='color:"+ColorTemp+"'><p style='color:#000000;margin-block-end: 0em;'>"+DataTemp+"</p></li>";
|
|
|
|
}
|
|
//console.log("Data: "+DataPlus);
|
|
}
|
|
|
|
}
|
|
|
|
stage.container().style.cursor = 'pointer';
|
|
//console.log("Group Enter");
|
|
var NameTemp = "";
|
|
for (var i = 0; i < jdo.Points.length; i++){
|
|
// look for the entry with a matching `code` value
|
|
if (jdo.Points[i].IdL == name){
|
|
//console.log(jdo.Points[i].Name+" gefunden");
|
|
NameTemp = jdo.Points[i].Name;
|
|
}
|
|
}
|
|
|
|
var scaleStageRatio = stage.scaleX();
|
|
scaleStageRatio = parseFloat(scaleStageRatio).toFixed(2);
|
|
scaleStageRatio = scaleStageRatio;
|
|
localStorage.setItem('zoomStage', scaleStageRatio);
|
|
|
|
for (var m = 0; m < jdo.Points.length; m++){
|
|
// look for the entry with a matching `code` value
|
|
if (jdo.Points[m].IdL == name){
|
|
//console.log(jdo.Points[i].Name+" gefunden");
|
|
localStorage.setItem('xStage', jdo.Points[m].X);
|
|
localStorage.setItem('yStage', jdo.Points[m].Y);
|
|
}
|
|
}
|
|
|
|
document.getElementById("tooltipTest").innerHTML = "<h4 style='text-transform: uppercase;font-weight:700;font-size:1rem;'>"+NameTemp+"</h4>";
|
|
document.getElementById("tooltipTest2").innerHTML = "<ul>"+DataPlus+"</ul>";
|
|
});
|
|
|
|
meStation.on('mouseleave', function () {
|
|
swapMouseOver = 0;
|
|
stage.container().style.cursor = 'default';
|
|
});
|
|
|
|
meStation.on('click', function () {
|
|
var scaleStageRatio = stage.scaleX();
|
|
scaleStageRatio = parseFloat(scaleStageRatio).toFixed(2);
|
|
scaleStageRatio = scaleStageRatio;
|
|
localStorage.setItem('zoomStage', scaleStageRatio);
|
|
var name = this.id();
|
|
//console.log("CLICK"+name);
|
|
//document.getElementById("mousovertext").innerHTML = "Click auf den Bereich - "+name;
|
|
name = name.replace("station","");
|
|
console.log("Click auf den Bereich mit der ID "+name);
|
|
|
|
for (var m = 0; m < jdo.Points.length; m++){
|
|
// look for the entry with a matching `code` value
|
|
if (jdo.Points[m].IdL == name){
|
|
//console.log(jdo.Points[i].Name+" gefunden");
|
|
localStorage.setItem('xStage', jdo.Points[m].X);
|
|
localStorage.setItem('yStage', jdo.Points[m].Y);
|
|
}
|
|
}
|
|
document.getElementById("mousovertext").innerHTML = "Daten werden geladen...";
|
|
var Ziel = quellURL+"/talas5/Stations/Location.aspx?id="+name+"&b=1";
|
|
window.location.href = Ziel;
|
|
});
|
|
|
|
}
|
|
|
|
// MS,ECI Stationen
|
|
if ((stationInv) === 3) {
|
|
var mecStation = new Konva.Group({
|
|
x: xTemp,
|
|
y: yTemp,
|
|
id: "station"+stationID
|
|
//draggable: true,
|
|
});
|
|
|
|
mecStation.add(
|
|
new Konva.Text({
|
|
x: -(0.10*standardFontSize),
|
|
y: (0.5/standardFontSize)-(standardMeldestationen/5),
|
|
align: 'center',
|
|
text: nameTemp,
|
|
fontSize: standardFontSize/10,
|
|
//fontFamily: 'Calibri',
|
|
fill: 'black'
|
|
})
|
|
);
|
|
|
|
mecStation.add(
|
|
new Konva.Rect({
|
|
width: standardMeldestationen/5,
|
|
height: standardMeldestationen/5,
|
|
x: -(standardMeldestationen/5)+1,
|
|
y: -(standardMeldestationen/5)+1,
|
|
fill: 'green',
|
|
stroke: 'black',
|
|
strokeWidth: standardMeldestationen/100,
|
|
id: "station1f"+stationID
|
|
})
|
|
);
|
|
mecStation.add(
|
|
new Konva.Rect({
|
|
width: standardMeldestationen/5,
|
|
height: standardMeldestationen/5,
|
|
x: 1,
|
|
y: -(standardMeldestationen/5)+1,
|
|
fill: 'green',
|
|
stroke: 'black',
|
|
strokeWidth: standardMeldestationen/100,
|
|
id: "station2f"+stationID
|
|
})
|
|
);
|
|
mecStation.add(
|
|
new Konva.Rect({
|
|
width: standardMeldestationen/5,
|
|
height: standardMeldestationen/5,
|
|
x: -(standardMeldestationen/5)+1,
|
|
y: 1,
|
|
fill: 'green',
|
|
stroke: 'black',
|
|
strokeWidth: standardMeldestationen/100,
|
|
id: "station3f"+stationID
|
|
})
|
|
);
|
|
mecStation.add(
|
|
new Konva.Rect({
|
|
width: standardMeldestationen/5,
|
|
height: standardMeldestationen/5,
|
|
x: 1,
|
|
y: 1,
|
|
fill: 'lightgray',
|
|
stroke: 'black',
|
|
strokeWidth: standardMeldestationen/100,
|
|
id: "station4f"+stationID
|
|
})
|
|
);
|
|
mecStation.add(
|
|
new Konva.Circle({
|
|
x: 1,
|
|
y: 1,
|
|
radius: standardMeldestationen/10,
|
|
fill: 'lightgray',
|
|
stroke: 'black',
|
|
strokeWidth: standardMeldestationen/100,
|
|
id: "stationCircle"+stationID
|
|
})
|
|
);
|
|
|
|
layer.add(mecStation);
|
|
|
|
if (document.getElementById("buttonStation").style.opacity > 0.6) {
|
|
mecStation.show();
|
|
} else {
|
|
mecStation.hide();
|
|
}
|
|
|
|
// MEC Station Mouseover
|
|
mecStation.on('mouseenter', function () {
|
|
swapMouseOver = 1;
|
|
var name = this.id();
|
|
name = name.replace("station","");
|
|
var DataPlus = "";
|
|
//console.log("GROUP ID"+name);
|
|
var anzahlStatis = statusData.Statis.length;
|
|
//console.log("Stati Anzahl: "+anzahlStatis);
|
|
for (var n = 0; n < anzahlStatis; n++) {
|
|
|
|
if (statusData.Statis[n].IdL > 0) {
|
|
//console.log("Station: "+statusData.Statis[n].IdL+" Name: "+name);
|
|
if(statusData.Statis[n].IdL == name) {
|
|
var DataTemp = statusData.Statis[n].Me;
|
|
var ColorTemp = statusData.Statis[n].Co;
|
|
DataPlus += "<li style='color:"+ColorTemp+"'><p style='color:#000000;margin-block-end: 0em;'>"+DataTemp+"</p></li>";
|
|
|
|
}
|
|
//console.log("Data: "+DataPlus);
|
|
}
|
|
|
|
}
|
|
|
|
stage.container().style.cursor = 'pointer';
|
|
//console.log("Group Enter");
|
|
var NameTemp = "";
|
|
for (var i = 0; i < jdo.Points.length; i++){
|
|
// look for the entry with a matching `code` value
|
|
if (jdo.Points[i].IdL == name){
|
|
//console.log(jdo.Points[i].Name+" gefunden");
|
|
NameTemp = jdo.Points[i].Name;
|
|
}
|
|
}
|
|
|
|
var scaleStageRatio = stage.scaleX();
|
|
scaleStageRatio = parseFloat(scaleStageRatio).toFixed(2);
|
|
scaleStageRatio = scaleStageRatio;
|
|
localStorage.setItem('zoomStage', scaleStageRatio);
|
|
|
|
for (var m = 0; m < jdo.Points.length; m++){
|
|
// look for the entry with a matching `code` value
|
|
if (jdo.Points[m].IdL == name){
|
|
//console.log(jdo.Points[i].Name+" gefunden");
|
|
localStorage.setItem('xStage', jdo.Points[m].X);
|
|
localStorage.setItem('yStage', jdo.Points[m].Y);
|
|
}
|
|
}
|
|
|
|
document.getElementById("tooltipTest").innerHTML = "<h4 style='text-transform: uppercase;font-weight:700;font-size:1rem;'>"+NameTemp+"</h4>";
|
|
document.getElementById("tooltipTest2").innerHTML = "<ul>"+DataPlus+"</ul>";
|
|
});
|
|
|
|
mecStation.on('mouseleave', function () {
|
|
swapMouseOver = 0;
|
|
stage.container().style.cursor = 'default';
|
|
});
|
|
|
|
mecStation.on('click', function () {
|
|
var scaleStageRatio = stage.scaleX();
|
|
scaleStageRatio = parseFloat(scaleStageRatio).toFixed(2);
|
|
scaleStageRatio = scaleStageRatio;
|
|
localStorage.setItem('zoomStage', scaleStageRatio);
|
|
var name = this.id();
|
|
//console.log("CLICK"+name);
|
|
//document.getElementById("mousovertext").innerHTML = "Click auf den Bereich - "+name;
|
|
name = name.replace("station","");
|
|
console.log("Click auf den Bereich mit der ID "+name);
|
|
|
|
for (var m = 0; m < jdo.Points.length; m++){
|
|
// look for the entry with a matching `code` value
|
|
if (jdo.Points[m].IdL == name){
|
|
//console.log(jdo.Points[i].Name+" gefunden");
|
|
localStorage.setItem('xStage', jdo.Points[m].X);
|
|
localStorage.setItem('yStage', jdo.Points[m].Y);
|
|
}
|
|
}
|
|
document.getElementById("mousovertext").innerHTML = "Daten werden geladen...";
|
|
var Ziel = quellURL+"/talas5/Stations/Location.aspx?id="+name+"&b=1";
|
|
window.location.href = Ziel;
|
|
});
|
|
|
|
}
|
|
|
|
// ULAF Stationen
|
|
if ((stationInv) === 2) {
|
|
uStation = new Konva.Group({
|
|
x: xTemp,
|
|
y: yTemp,
|
|
id: "station"+stationID
|
|
//draggable: true,
|
|
});
|
|
|
|
uStation.add(
|
|
new Konva.Text({
|
|
x: -(0.10*standardFontSize),
|
|
y: (0.5/standardFontSize)-(standardUlafStationen/10),
|
|
align: 'center',
|
|
text: nameTemp,
|
|
fontSize: standardFontSize/10,
|
|
//fontFamily: 'Calibri',
|
|
fill: 'black'
|
|
})
|
|
);
|
|
|
|
uStation.add(
|
|
new Konva.Rect({
|
|
width: standardUlafStationen/5,
|
|
height: standardUlafStationen/5,
|
|
x: 1,
|
|
y: -(standardUlafStationen/5)+1,
|
|
fill: 'green',
|
|
stroke: 'black',
|
|
strokeWidth: standardUlafStationen/100,
|
|
id: "station2f"+stationID
|
|
})
|
|
);
|
|
|
|
uStation.add(
|
|
new Konva.Circle({
|
|
x: 1,
|
|
y: 1,
|
|
radius: standardUlafStationen/10,
|
|
fill: 'green',
|
|
stroke: 'black',
|
|
strokeWidth: standardUlafStationen/100,
|
|
id: "stationCircle"+stationID
|
|
})
|
|
);
|
|
|
|
layer.add(uStation);
|
|
|
|
if (document.getElementById("buttonUStation").style.opacity > 0.6) {
|
|
uStation.show();
|
|
} else {
|
|
uStation.hide();
|
|
}
|
|
|
|
// ULAF Station Mouseover
|
|
uStation.on('mouseenter', function () {
|
|
swapMouseOver = 1;
|
|
var name = this.id();
|
|
name = name.replace("station","");
|
|
var DataPlus = "";
|
|
//console.log("GROUP ID"+name);
|
|
var anzahlStatis = statusData.Statis.length;
|
|
//console.log("Stati Anzahl: "+anzahlStatis);
|
|
for (var n = 0; n < anzahlStatis; n++) {
|
|
|
|
if (statusData.Statis[n].IdL > 0) {
|
|
//console.log("Station: "+statusData.Statis[n].IdL+" Name: "+name);
|
|
if(statusData.Statis[n].IdL == name) {
|
|
var DataTemp = statusData.Statis[n].Me;
|
|
var ColorTemp = statusData.Statis[n].Co;
|
|
DataPlus += "<li style='color:"+ColorTemp+"'><p style='color:#000000;margin-block-end: 0em;'>"+DataTemp+"</p></li>";
|
|
|
|
}
|
|
//console.log("Data: "+DataPlus);
|
|
}
|
|
|
|
}
|
|
|
|
stage.container().style.cursor = 'pointer';
|
|
//console.log("Group Enter");
|
|
var NameTemp = "";
|
|
for (var i = 0; i < jdo.Points.length; i++){
|
|
// look for the entry with a matching `code` value
|
|
if (jdo.Points[i].IdL == name){
|
|
//console.log(jdo.Points[i].Name+" gefunden");
|
|
NameTemp = jdo.Points[i].Name;
|
|
}
|
|
}
|
|
|
|
var scaleStageRatio = stage.scaleX();
|
|
scaleStageRatio = parseFloat(scaleStageRatio).toFixed(2);
|
|
scaleStageRatio = scaleStageRatio;
|
|
localStorage.setItem('zoomStage', scaleStageRatio);
|
|
|
|
for (var m = 0; m < jdo.Points.length; m++){
|
|
// look for the entry with a matching `code` value
|
|
if (jdo.Points[m].IdL == name){
|
|
//console.log(jdo.Points[i].Name+" gefunden");
|
|
localStorage.setItem('xStage', jdo.Points[m].X);
|
|
localStorage.setItem('yStage', jdo.Points[m].Y);
|
|
}
|
|
}
|
|
|
|
document.getElementById("tooltipTest").innerHTML = "<h4 style='text-transform: uppercase;font-weight:700;font-size:1rem;'>"+NameTemp+"</h4>";
|
|
document.getElementById("tooltipTest2").innerHTML = "<ul>"+DataPlus+"</ul>";
|
|
});
|
|
|
|
uStation.on('mouseleave', function () {
|
|
swapMouseOver = 0;
|
|
stage.container().style.cursor = 'default';
|
|
});
|
|
|
|
uStation.on('click', function () {
|
|
var scaleStageRatio = stage.scaleX();
|
|
scaleStageRatio = parseFloat(scaleStageRatio).toFixed(2);
|
|
scaleStageRatio = scaleStageRatio;
|
|
localStorage.setItem('zoomStage', scaleStageRatio);
|
|
var name = this.id();
|
|
//console.log("CLICK"+name);
|
|
//document.getElementById("mousovertext").innerHTML = "Click auf den Bereich - "+name;
|
|
name = name.replace("station","");
|
|
console.log("Click auf den Bereich mit der ID "+name);
|
|
|
|
for (var m = 0; m < jdo.Points.length; m++){
|
|
// look for the entry with a matching `code` value
|
|
if (jdo.Points[m].IdL == name){
|
|
//console.log(jdo.Points[i].Name+" gefunden");
|
|
localStorage.setItem('xStage', jdo.Points[m].X);
|
|
localStorage.setItem('yStage', jdo.Points[m].Y);
|
|
}
|
|
}
|
|
document.getElementById("mousovertext").innerHTML = "Daten werden geladen...";
|
|
var Ziel = quellURL+"/talas5/Stations/Location.aspx?id="+name+"&b=1";
|
|
window.location.href = Ziel;
|
|
});
|
|
|
|
}
|
|
|
|
// Passive Stationen
|
|
if ((stationInv) < 1) {
|
|
var pStation = new Konva.Group({
|
|
x: xTemp,
|
|
y: yTemp,
|
|
id: "station"+stationID,
|
|
draggable: true,
|
|
});
|
|
|
|
/*group1.add(
|
|
new Konva.Text({
|
|
x: 0/100,
|
|
y: -60/100,
|
|
align: 'center',
|
|
text: nameTemp,
|
|
fontSize: 0.25,
|
|
//fontFamily: 'Calibri',
|
|
fill: 'black'
|
|
})
|
|
);*/
|
|
pStation.add(
|
|
new Konva.Circle({
|
|
x: 1,
|
|
y: 1,
|
|
radius: standardPassiveStationen/10,
|
|
fill: 'lightgray',
|
|
stroke: 'black',
|
|
strokeWidth: standardPassiveStationen/100,
|
|
id: "stationCircle"+stationID
|
|
})
|
|
);
|
|
|
|
layer.add(pStation);
|
|
|
|
if (document.getElementById("buttonPStation").style.opacity > 0.6) {
|
|
pStation.show();
|
|
} else {
|
|
pStation.hide();
|
|
}
|
|
|
|
// Passive Station
|
|
pStation.on('mouseenter', function () {
|
|
swapMouseOver = 1;
|
|
var name = this.id();
|
|
name = name.replace("station","");
|
|
var DataPlus = "";
|
|
//console.log("GROUP ID"+name);
|
|
var anzahlStatis = statusData.Statis.length;
|
|
//console.log("Stati Anzahl: "+anzahlStatis);
|
|
for (var n = 0; n < anzahlStatis; n++) {
|
|
|
|
if (statusData.Statis[n].IdL > 0) {
|
|
//console.log("Station: "+statusData.Statis[n].IdL+" Name: "+name);
|
|
if(statusData.Statis[n].IdL == name) {
|
|
var DataTemp = statusData.Statis[n].Me;
|
|
var ColorTemp = statusData.Statis[n].Co;
|
|
DataPlus += "<li style='color:"+ColorTemp+"'><p style='color:#000000;margin-block-end: 0em;'>"+DataTemp+"</p></li>";
|
|
|
|
}
|
|
//console.log("Data: "+DataPlus);
|
|
}
|
|
|
|
}
|
|
|
|
stage.container().style.cursor = 'pointer';
|
|
//console.log("Group Enter");
|
|
var NameTemp = "";
|
|
for (var i = 0; i < jdo.Points.length; i++){
|
|
// look for the entry with a matching `code` value
|
|
if (jdo.Points[i].IdL == name){
|
|
//console.log(jdo.Points[i].Name+" gefunden");
|
|
NameTemp = jdo.Points[i].Name;
|
|
}
|
|
}
|
|
|
|
var scaleStageRatio = stage.scaleX();
|
|
scaleStageRatio = parseFloat(scaleStageRatio).toFixed(2);
|
|
scaleStageRatio = scaleStageRatio;
|
|
localStorage.setItem('zoomStage', scaleStageRatio);
|
|
|
|
for (var m = 0; m < jdo.Points.length; m++){
|
|
// look for the entry with a matching `code` value
|
|
if (jdo.Points[m].IdL == name){
|
|
//console.log(jdo.Points[i].Name+" gefunden");
|
|
localStorage.setItem('xStage', jdo.Points[m].X);
|
|
localStorage.setItem('yStage', jdo.Points[m].Y);
|
|
}
|
|
}
|
|
|
|
document.getElementById("tooltipTest").innerHTML = "<h4 style='text-transform: uppercase;font-weight:700;font-size:1rem;'>"+NameTemp+"</h4>";
|
|
document.getElementById("tooltipTest2").innerHTML = "<ul>"+DataPlus+"</ul>";
|
|
});
|
|
|
|
pStation.on('mouseleave', function () {
|
|
swapMouseOver = 0;
|
|
stage.container().style.cursor = 'default';
|
|
});
|
|
|
|
pStation.on('click', function () {
|
|
var scaleStageRatio = stage.scaleX();
|
|
scaleStageRatio = parseFloat(scaleStageRatio).toFixed(2);
|
|
scaleStageRatio = scaleStageRatio;
|
|
localStorage.setItem('zoomStage', scaleStageRatio);
|
|
var name = this.id();
|
|
//console.log("CLICK"+name);
|
|
//document.getElementById("mousovertext").innerHTML = "Click auf den Bereich - "+name;
|
|
name = name.replace("station","");
|
|
console.log("Click auf den Bereich mit der ID "+name);
|
|
|
|
for (var m = 0; m < jdo.Points.length; m++){
|
|
// look for the entry with a matching `code` value
|
|
if (jdo.Points[m].IdL == name){
|
|
//console.log(jdo.Points[i].Name+" gefunden");
|
|
localStorage.setItem('xStage', jdo.Points[m].X);
|
|
localStorage.setItem('yStage', jdo.Points[m].Y);
|
|
}
|
|
}
|
|
document.getElementById("mousovertext").innerHTML = "Daten werden geladen...";
|
|
var Ziel = quellURL+"/talas5/Stations/Location.aspx?id="+name+"&b=1";
|
|
window.location.href = Ziel;
|
|
});
|
|
}
|
|
|
|
}
|
|
}
|
|
stage.add(layer);
|
|
setTimeout(getConditions,1500);
|
|
}
|
|
|
|
function drawCableMap() {
|
|
anzahlCable = jco.Lines.length;
|
|
var kennung = "";
|
|
|
|
// Kabel zeichnen
|
|
for(i=0;i<anzahlCable;i++) {
|
|
|
|
if (jco.Lines[i].IdS > 0) {
|
|
|
|
var pointsTemp = [];
|
|
var cableID = jco.Lines[i].IdS;
|
|
|
|
var stringX = jco.Lines[i].PX;
|
|
var partsX = stringX.split(",");
|
|
partsXlength = partsX.length;
|
|
|
|
var x1Temp = Math.round(parseInt(((partsX[0])/skalierung)-minX)/displayFactor);
|
|
pointsTemp.push(x1Temp);
|
|
|
|
var stringY = jco.Lines[i].PY;
|
|
var partsY = stringY.split(",");
|
|
partsYlength = partsY.length;
|
|
|
|
var y1Temp = Math.round(parseInt((maxY-(partsY[0])/skalierung))/displayFactor);
|
|
pointsTemp.push(y1Temp);
|
|
|
|
for (x=1;x<partsYlength;x++){
|
|
// console.log("PointsX " +x+ " - "+partsX[x]);
|
|
pointsTemp.push(Math.round(parseInt(((partsX[x])/skalierung)-minX)/displayFactor));
|
|
// console.log("PointsY " +x+ " - "+partsY[x]);
|
|
pointsTemp.push(Math.round(parseInt((maxY-(partsY[x])/skalierung))/displayFactor));
|
|
}
|
|
|
|
//console.log("Points "+pointsTemp);
|
|
|
|
cables = new Konva.Line({
|
|
points: pointsTemp,
|
|
stroke: 'green',
|
|
strokeWidth: (standardCableThickness/25),
|
|
lineJoin: 'square',
|
|
id: 'line'+cableID,
|
|
tension: 0,
|
|
lineCap: 'square'
|
|
});
|
|
layer.add(cables);
|
|
|
|
cables.on('mouseenter', function () {
|
|
swapMouseOver = 1;
|
|
var name = this.id(); // LINE muss noch gesplittet werden
|
|
name = name.replace("line","");
|
|
var DataPlus = "";
|
|
var DataPlus2 = "";
|
|
|
|
var anzahlStatis = jso.Services.length;
|
|
for (var n = 0; n < anzahlStatis; n++) {
|
|
|
|
if (jso.Services[n].IdS > 0) {
|
|
//console.log("Linie: "+jso.Services[n].IdS);
|
|
if(jso.Services[n].IdS == name) {
|
|
var DataTemp = jso.Services[n].Na;
|
|
var ColorTemp = "green";
|
|
for ( var b = 0; b < statusDataCable.Statis.length; b++) {
|
|
if (statusDataCable.Statis[b].IdLD == jso.Services[n].IdLD) {
|
|
ColorTemp = statusDataCable.Statis[b].Co;
|
|
}
|
|
}
|
|
DataPlus += "<li style='color:"+ColorTemp+"'><p style='color:#000000;margin-block-end: 0em;'>"+DataTemp+"</p></li>";
|
|
|
|
}
|
|
//console.log("Data: "+DataPlus);
|
|
}
|
|
|
|
}
|
|
|
|
var anzahlStaticJko = jko.Services.length;
|
|
for (var n = 0; n < anzahlStaticJko; n++) {
|
|
|
|
if (jko.Services[n].IdS > 0) {
|
|
//console.log("Linie: "+statusDataCable.Statis[n].IdLD);
|
|
if(jko.Services[n].IdS == name) {
|
|
var DataTemp = jko.Services[n].Na //+" <br /><small>Strang ID: "+jko.Services[n].IdS+", Service ID: "+jko.Services[n].IdLD+"</small>";
|
|
var ColorTemp = "green";
|
|
for ( var b = 0; b < statusDataKue.Statis.length; b++) {
|
|
if (statusDataKue.Statis[b].IdLD == jko.Services[n].IdLD) {
|
|
if (statusDataKue.Statis[b].Sl == jko.Services[n].Sl) {
|
|
ColorTemp = statusDataKue.Statis[b].Co;
|
|
console.log(statusDataKue.Statis[b].IdLD+" "+jko.Services[n].IdLD+" - "+statusDataKue.Statis[b].Sl+" "+jko.Services[n].Sl);
|
|
}
|
|
}
|
|
}
|
|
DataPlus += "<li style='color:"+ColorTemp+"'><p style='color:#000000;margin-block-end: 0em;'> Kü Richtung "+DataTemp+"</p></li>";
|
|
}
|
|
//console.log("Data: "+DataPlus);
|
|
}
|
|
|
|
}
|
|
|
|
for (var m = 0; m < anzahlCable; m++) {
|
|
if (jco.Lines[m].IdS == name) {
|
|
kennung = jco.Lines[m].In;
|
|
}
|
|
}
|
|
|
|
//console.log("STRANG ID"+name);
|
|
stage.container().style.cursor = 'pointer';
|
|
|
|
var scaleStageRatio = stage.scaleX();
|
|
scaleStageRatio = parseFloat(scaleStageRatio).toFixed(2);
|
|
scaleStageRatio = scaleStageRatio;
|
|
localStorage.setItem('zoomStage', scaleStageRatio);
|
|
for (var m = 0; m < jco.Lines.length; m++){
|
|
// look for the entry with a matching `code` value
|
|
if (jco.Lines[m].IdS == name){
|
|
//console.log(jdo.Points[i].Name+" gefunden");
|
|
var stringX = jco.Lines[m].PX;
|
|
var stringY = jco.Lines[m].PY;
|
|
stringX = stringX.split(",");
|
|
stringY = stringY.split(",");
|
|
stringX = parseFloat(stringX[0]);
|
|
stringY = parseFloat(stringY[0]);
|
|
localStorage.setItem('xStage', stringX);
|
|
localStorage.setItem('yStage', stringY);
|
|
}
|
|
}
|
|
//console.log("Line Enter");
|
|
document.getElementById("tooltipTest").innerHTML = "<h4 style='text-transform: uppercase;font-weight:700;font-size:1rem;'>"+kennung+"</h4>";
|
|
document.getElementById("tooltipTest2").innerHTML = "<ul>"+DataPlus+"</ul>";
|
|
});
|
|
|
|
cables.on('mouseleave', function () {
|
|
swapMouseOver = 0;
|
|
stage.container().style.cursor = 'default';
|
|
});
|
|
|
|
cables.on('click', function () {
|
|
var scaleStageRatio = stage.scaleX();
|
|
scaleStageRatio = parseFloat(scaleStageRatio).toFixed(2);
|
|
scaleStageRatio = scaleStageRatio;
|
|
localStorage.setItem('zoomStage', scaleStageRatio);
|
|
var name = this.id();
|
|
name = name.replace("line","");
|
|
//console.log("CLICK"+name);
|
|
for (var m = 0; m < jco.Lines.length; m++){
|
|
// look for the entry with a matching `code` value
|
|
if (jco.Lines[m].IdS == name){
|
|
//console.log(jdo.Points[i].Name+" gefunden");
|
|
var stringX = jco.Lines[m].PX;
|
|
var stringY = jco.Lines[m].PY;
|
|
stringX = stringX.split(",");
|
|
stringY = stringY.split(",");
|
|
stringX = parseFloat(stringX[0]);
|
|
stringY = parseFloat(stringY[0]);
|
|
localStorage.setItem('xStage', stringX);
|
|
localStorage.setItem('yStage', stringY);
|
|
}
|
|
}
|
|
console.log("Click auf den Strang mit der ID "+name);
|
|
document.getElementById("mousovertext").innerHTML = "Daten werden geladen...";
|
|
var Ziel = quellURL+"/talas5/Stations/CableDetail.aspx?id="+name+"&b=1";
|
|
window.location.href = Ziel;
|
|
});
|
|
|
|
}
|
|
}
|
|
stage.add(layer);
|
|
getStationStatic();
|
|
setTimeout(getConditionsCable,3000);
|
|
}
|
|
|
|
function cableReset() {
|
|
document.getElementById("loadingMap").innerHTML = "<div class='spinner-wrapper'><span class='spinner-text'>Update der Daten...</span><span class='spinner'></span></div>";
|
|
ebenenZuruecksetzen();
|
|
layer.destroy();
|
|
//drawStaticMap();
|
|
drawMapBorder2();
|
|
drawMapBorder();
|
|
drawCableMap();
|
|
}
|
|
|
|
getCableStatic();
|
|
|
|
|
|
|