Anonymous

Changes

From KIproBatt Wiki

MediaWiki:VisNetwork.js (view source)

Revision as of 17:47, 14 March 2022

52,326 bytes added ,  17:47, 14 March 2022
apply updates
Line 1: Line 1:  
$(document).ready(function() {
 
$(document).ready(function() {
 +
 
     $.getScript('https://unpkg.com/vis-network/standalone/umd/vis-network.min.js').done(function() {
 
     $.getScript('https://unpkg.com/vis-network/standalone/umd/vis-network.min.js').done(function() {
−
      if( $('#visNetworkGraph').length ) {//check if div element(s) exist
+
    var pathId = 0;
−
      var input = JSON.parse($("#visNetworkGraph").text());
+
    var newNodes = {};
−
      wikiUrl = "";
+
    var editNodes = {};
−
     
+
    var editDeletedEdges = {};
−
      // create an array with nodes
+
    var editDeletedNodes = {};
−
      var nodes = new vis.DataSet([]);
+
   
−
      // create an array with edges
+
    $(".visNetworkGraph").each(function(index) {
−
      var edges = new vis.DataSet([]);
+
        if ($('.visNetworkGraph').length) { //check if div element(s) exist
−
     
+
            var input = JSON.parse(this.innerHTML);
−
      var colors = ['#ff7878', '#73ff77', '#e878ff', '#ffae57', '#80f8ff', '#ffff75', '#adadad', '#b482ff'];
+
 +
            // create an array with nodes
 +
            var nodes = new vis.DataSet([]);
 +
            // create an array with edges
 +
            var edges = new vis.DataSet([]);
 +
            //colors for the graph
 +
            var colors = [];
 +
            var oldGroups = {};
 +
var givenDiv = this;
 +
givenDiv.style.position = "relative";
 +
givenDiv.style.display = "inline-block";
 +
 +
 
 +
 +
            function getColor() {
 +
                return "hsl(" + 360 * Math.random() + ',' +
 +
                    (25 + 70 * Math.random()) + '%,' +
 +
                    (85 + 10 * Math.random()) + '%)';
 +
            }
 +
 
 +
            var h = Math.random();
 +
            var golden = 0.618033988749895;
 +
            function randomHSL() {
 +
            h += golden;
 +
            h %= 1;
 +
            //~~(360 * Math.random())
 +
                return "hsla(" + (360 * h) + "," +
 +
                    "70%," +
 +
                    "80%,1)";
 +
            }
 +
 
 +
            for (var i = 0; i < input.properties.length; i++) {
 +
                colors.push(randomHSL());
 +
            }
 +
 
 +
            function isLabelSet(id) {
 +
                node = nodes.get(id);
 +
                if (node === null) return false;
 +
                else return id;
 +
            }
 +
 
 +
            //var colors = ['#ff7878', '#73ff77', '#e878ff', '#ffae57', '#80f8ff', '#ffff75', '#adadad', '#b482ff'];
 +
 
 +
            nodes.add({
 +
                id: input.root,
 +
                label: input.root, //todo: query display title
 +
                color: '#6dbfa9'
 +
            });
 +
 
 +
            //Creates API query Url with the given root and properties
 +
            function createUrl(root, properties) {
 +
                var url = `/w/api.php?action=ask&query=[[${encodeURIComponent(root)}]]`;
 +
                var propertiesVar = '';
 +
                for (var i = 0; i < properties.length; i++) {
 +
                    propertiesVar += '|?' + encodeURIComponent(properties[i]);
 +
 
 +
                }
 +
 
 +
                url = url + propertiesVar + '&format=json';
 +
                return url;
 +
            }
 +
 
 +
            //Makes an API call with the given parameters and adds the results to the nodes and edges datasets.
 +
            //With a given nodeID the edges are set to the nodeID, else they are set to the root node.
 +
            function fetchData(root, properties, nodeID, setGroup, setColor) {
 +
                fetch(createUrl(root, properties))
 +
                    .then(response => response.json())
 +
                    .then(data => {
 +
                   
 +
                        for (var i = 0; i < properties.length; i++) {
 +
                            for (var j = 0; j < data.query.results[root].printouts[properties[i]].length; j++) {
 +
                           
 +
                           
 +
                            //define colors
 +
                                if(!(properties[i] in legendColors) && setColor) {legendColors[properties[i]] = colors[i]; }
 +
                                else {setColor = legendColors[properties[i]]; colors[i] = legendColors[properties[i]]; colors[i] = legendColors[properties[i]];}
 +
                                //define id and label. use displaytitle if available. Use string representation of non-page properties
 +
                                var id = "";
 +
                                var label = "";
 +
                                if (data.query.results[root].printouts[properties[i]][j].fulltext) id = data.query.results[root].printouts[properties[i]][j].fulltext;
 +
                                else if(data.query.results[root].printouts[properties[i]][j].value) id = '' + data.query.results[root].printouts[properties[i]][j].value + ' ' + data.query.results[root].printouts[properties[i]][j].unit; 
 +
                                else id = data.query.results[root].printouts[properties[i]][j].toString();
 +
                                if (data.query.results[root].printouts[properties[i]][j].displaytitle) label = data.query.results[root].printouts[properties[i]][j].displaytitle;
 +
                                if (label === "") label = id;
 +
 +
                                if (isLabelSet(id) === false) {
 +
 
 +
                                    if (setGroup && setColor) {
 +
                                        nodes.add({
 +
                                            id: id,
 +
                                            label: label,
 +
                                            color: setColor,
 +
                                            group: setGroup[0],
 +
                                            hidden: false,
 +
                                            url: data.query.results[root].printouts[properties[i]][j].fullurl,
 +
                                            oncontext: true,
 +
                                        });
 +
                                        oldGroups["" + id] = setGroup[0];
 +
                                    } else {
 +
                                        nodes.add({
 +
                                            id: id,
 +
                                            label: label,
 +
                                            color: colors[i],
 +
                                            group: properties[i],
 +
                                            hidden: false,
 +
                                            url: data.query.results[root].printouts[properties[i]][j].fullurl
 +
                                        });
 +
                                        oldGroups["" + id] = properties[i];
 +
                                    }
 +
                                    if (nodeID) {
 +
                                        edges.add({
 +
                                            from: nodeID,
 +
                                            to: id,
 +
                                            label: properties[i],
 +
                                            color: colors[i],
 +
                                            group: properties[i]
 +
                                        });
 +
                                    } else {
 +
                                        edges.add({
 +
                                            from: input.root,
 +
                                            to: id,
 +
                                            label: properties[i],
 +
                                            color: colors[i],
 +
                                            group: properties[i]
 +
                                        });
 +
                                    }
 +
                                   
 +
                                } else {
 +
                                    edges.add({
 +
                                        from: nodeID,
 +
                                        to: isLabelSet(id),
 +
                                        label: properties[i],
 +
                                        color: setColor,
 +
                                        group: properties[i]
 +
                                    });
 +
                                }
 +
                            }
 +
                        }
 +
                        network.setOptions(options);
 +
                        network.body.emitter.emit('_dataChanged');
 +
                        network.redraw();
 +
                       
 +
                    });
 +
            }
 +
            fetchData(input.root, input.properties);
 +
            // create a network
 +
            var container = this; //document.getElementById("visNetworkGraph");
 +
            var data = {
 +
                nodes: nodes,
 +
                edges: edges,
 +
            };
 +
            var options = {
 +
                width: "100%",
 +
                height: "100%",
 +
                interaction: {
 +
                    hover: true
 +
                },
 +
                manipulation: {
 +
                    enabled: true,
 +
                    editEdge: false,
 +
                    deleteNode: function (data, callback) {deleteSelectedNode(data, callback)}.bind(this),
 +
                    deleteEdge: function (data, callback) {deleteSelectedEdge(data, callback)}.bind(this),
 +
                    addNode: function (data, callback) {
 +
                   
 +
        // filling in the popup DOM elements
 +
        document.getElementById("node-operation").innerText = "Add Node";
 +
        dragElement(document.getElementById("node-popUp"));
 +
        editNode(data, clearNodePopUp, callback);
 +
      },
 +
      addEdge: function (data, callback) {
 +
        if (data.from == data.to) {
 +
          var r = confirm("Do you want to connect the node to itself?");
 +
          if (r != true) {
 +
            callback(null);
 +
            return;
 +
          }
 +
        }
 +
        document.getElementById("edge-operation").innerText = "Add Edge";
 +
        dragElement(document.getElementById("edge-popUp"));
 +
        editEdgeWithoutDrag(data, callback);
 +
      },
 +
          },
 +
                edges: {
 +
                    arrows: {
 +
                        to: {
 +
                            enabled: true
 +
                        },
 +
                        //from:{enabled: true}
 +
                    }
 +
                },
 +
                groups: {
 +
                    useDefaultGroups: false
 +
                },
 +
                physics: {
 +
                    stabilization: {
 +
                        enabled: true,
 +
                    },
 +
                    barnesHut: {
 +
                        gravitationalConstant: -40000,
 +
                        centralGravity: 0,
 +
                        springLength: 0,
 +
                        springConstant: 0.5,
 +
                        damping: 1,
 +
                        avoidOverlap: 0
 +
                    },
 +
                    maxVelocity: 5
 +
                },
 +
 
 +
            };
 +
            //Creates groups in the options and sets them all to hidden:false.
 +
            for (var i = 0; i < input.properties.length; i++) {
 +
                options.groups[input.properties[i]] = {
 +
                    hidden: false
 +
                };
 +
            }
 +
            var network = new vis.Network(container, data, options);
 +
           
 +
 
 +
 
 +
 
 +
function getAllEdgesBetween(node1,node2) {
 +
    return edges.get().filter(function (edge) {
 +
        return (edge.from === node1 && edge.to === node2 )|| (edge.from === node2 && edge.to === node1);
 +
    });
 +
}
 +
 
 +
function getAllCombs(arrays){
 +
    var numberOfCombs = 1;
 +
    for(var i=0; i<arrays.length; i++){
 +
        numberOfCombs = numberOfCombs * arrays[i].length;
 +
    }
 +
    var allCombs = new Array(numberOfCombs);
 +
    for(var i=0; i<allCombs.length; i++){
 +
        allCombs[i] = new Array(arrays.length);
 +
    }
 +
   
 +
    for(var i=0; i<arrays.length; i++){
 +
        var current = arrays[i];
 +
        for(var c=0; c<numberOfCombs; c++){
 +
 +
            for(var j=0; j<current.length; j++){
 +
                allCombs[c][i] = current[c%current.length];
 +
               
 +
            }
 +
        }
 +
    }
 
 
−
      var id = 1;
+
    return allCombs;
−
      nodes.add({id: id, label: input.root});
+
}
−
      id++;
+
 +
function getEdgePathsForPath(path){
 +
  var arraysOfEdgesForNodeInPath = [];
 +
  for(var i=1; i<path.length; i++){
 +
    var edgesBetween = getAllEdgesBetween(path[i-1], path[i]);
 +
    var localedgesBetween = edgesBetween.slice();
 +
    arraysOfEdgesForNodeInPath.push(localedgesBetween);
 +
  }
 +
  var allEdgePaths = getAllCombs(arraysOfEdgesForNodeInPath);
 +
return allEdgePaths;
 +
}
 +
 
 +
function reverseLabel(label){
 +
  if(label[0] == "-"){
 +
    return label.substring(1);
 +
  }
 +
  else{
 +
    return "-" + label;
 +
  }
 +
}
   −
      function createUrl(root, properties){
+
function getEdgeLabelStringsForPath(path){
−
      var url = `${wikiUrl}/w/api.php?action=ask&query=[[${root}]]`;
+
  var allEdgePaths = getEdgePathsForPath(path);
−
      var propertiesVar ='';
+
  var allStrings = new Array(allEdgePaths.length);
−
      for (var i = 0; i < properties.length; i++) {
+
  for(var i=0; i<allEdgePaths.length; i++){
−
      propertiesVar += '|?'+ properties[i];
+
    var s = "";
−
     
+
    for(var j=0; j<allEdgePaths[i].length;j++){
 +
     
 +
      var edge = allEdgePaths[i][j];
 +
      var label = edge.label;
 +
      var nodeId1 = path[j];
 +
      var nodeId2 = path[j+1];
 +
      if(edge.to == nodeId1 && edge.from == nodeId2){
 +
        label = reverseLabel(label);
 
       }
 
       }
−
+
      if(j == (allEdgePaths[i].length - 1)){
−
      url = url + propertiesVar + '&format=json';
+
        s = s + label;
−
       return url;
+
       }
 +
      else{
 +
        s = s + label + ".";
 
       }
 
       }
 +
   
 +
     
 +
    }
 +
    allStrings[i] = s;
 +
  }
 +
  return allStrings;
 +
}
 +
 +
function getAllStringsForAllPaths(paths){
 +
  var arrayOfAllStrings = [];
 +
  for(var i=0; i<paths.length;i++){
 +
    var path = paths[i];
 +
    var allStrings = getEdgeLabelStringsForPath(path);
 +
    arrayOfAllStrings.push(allStrings);
 +
  }
 +
return arrayOfAllStrings;
 +
}
 +
 +
 +
 +
function removeItem(arr, value) {
 +
  var index = arr.indexOf(value);
 +
  if (index > -1) {
 +
    arr.splice(index, 1);
 +
  }
 +
  return arr;
 +
}
 +
 +
       +
function findAllPaths(startNode, endNode){
 +
    var visitedNodes = [];
 +
    var currentPath = [];
 +
    var allPaths =  [];
 +
    dfs(startNode, endNode, currentPath, allPaths, visitedNodes);
 +
    return allPaths;
 +
}
   −
      function fetchData(root, properties, nodeID){
+
function dfs(start, end, currentPath, allPaths, visitedNodes){
−
      fetch(createUrl(root, properties))
+
    if(visitedNodes.includes(start)) return;
−
        .then(response => response.json())
+
    visitedNodes.push(start);
−
        .then(data => {
+
    currentPath.push(start);
−
       
+
    if(start == end){
−
       
+
    var localCurrentPath = currentPath.slice();
−
       
+
        allPaths.push(localCurrentPath);
−
        for (var i = 0; i < properties.length; i++) {
+
        removeItem(visitedNodes, start);
−
        for (var j = 0; j < data.query.results[root].printouts[properties[i]].length; j++) {
+
        currentPath.pop();
−
        if(data.query.results[root].printouts[properties[i]].length == 1){
+
         return;
−
        if(data.query.results[root].printouts[properties[i]][j].fulltext){
+
    }
−
        nodes.add({id: id, label: data.query.results[root].printouts[properties[i]][j].fulltext, color: colors[i], group: properties[i], hidden:false});
+
   
−
        if(nodeID){edges.add({from: nodeID, to: id, label: properties[i], color: colors[i], group: properties[i]});}
+
    var neighbours = network.getConnectedNodes(start);
−
        else{
+
     for(var i = 0; i < neighbours.length; i++){  
−
        edges.add({from: 1, to: id, label: properties[i], color: colors[i], group: properties[i]});}
+
        var current = neighbours[i];
−
        id++;
+
        dfs(current, end, currentPath, allPaths, visitedNodes);
−
       
  −
        }else{
  −
       
  −
        nodes.add({id: id, label: data.query.results[root].printouts[properties[i]][0].toString(), color: colors[i], group: properties[i], hidden:false});
  −
        if(nodeID){edges.add({from: nodeID, to: id, label: properties[i], color: colors[i], group: properties[i]});}else{
  −
        edges.add({from: 1, to: id, label: properties[i], color: colors[i], group: properties[i]});}
  −
        id++;}
  −
        }else if(!data.query.results[root].printouts[properties[i]][j].fulltext){
  −
        nodes.add({id: id, label: data.query.results[root].printouts[properties[i]][j], color: colors[i], group: properties[i], hidden:false});
  −
        if(nodeID){edges.add({from: nodeID, to: id, label: properties[i], color: colors[i], group: properties[i]});}else{
  −
        edges.add({from: 1, to: id, label: properties[i], color: colors[i], group: properties[i]});}
  −
        id++;
  −
       
  −
       
  −
        }else{
  −
        nodes.add({id: id, label: data.query.results[root].printouts[properties[i]][j].fulltext, color: colors[i], group: properties[i], hidden:false});
  −
        if(nodeID){edges.add({from: nodeID, to: id, label: properties[i], color: colors[i], group: properties[i]});}else{
  −
        edges.add({from: 1, to: id, label: properties[i], color: colors[i], group: properties[i]});}
  −
        id++;
  −
       
  −
       
  −
        }
  −
       
  −
       
  −
        }
  −
        }
  −
       
  −
         });
  −
      }  
  −
      fetchData(input.root, input.properties);
  −
      // create a network
  −
      var container = document.getElementById("visNetworkGraph");
  −
      var data = {
  −
        nodes: nodes,
  −
        edges: edges,
  −
      };
  −
     
  −
     
  −
      var options = {width: "100%", height: "100%", interaction: { hover: true },
  −
  manipulation: {
  −
    enabled: true,
  −
  }, /*layout:{improvedLayout:false},*/
  −
  groups: {
  −
  useDefaultGroups: false
  −
  },
  −
  physics:{
  −
  stabilization: {
  −
      enabled: true,
  −
      /*iterations: 1,
  −
      updateInterval: 25,
  −
      onlyDynamicEdges: false,
  −
      fit: true*/
  −
    },
  −
  barnesHut: {
  −
      gravitationalConstant: -40000,
  −
      centralGravity: 0,
  −
      springLength: 0,
  −
      springConstant: 0.5,
  −
      damping: 1,
  −
      avoidOverlap: 0
  −
    },
  −
    maxVelocity: 5
  −
  },
  −
     
  −
      };
  −
     
  −
     for(var i=0;i<input.properties.length;i++){
  −
    options.groups[input.properties[i]] = {hidden: false};
   
     }
 
     }
−
      console.log(options);
  −
   
  −
      var network = new vis.Network(container, data, options);
  −
      var x = -visNetworkGraph.clientWidth / 2 + 50;
  −
var y = -visNetworkGraph.clientHeight / 2 + 50;
  −
var step = 70;
  −
var legendID = 1000;
  −
for (var i = 0; i < input.properties.length; i++) {
  −
        if(i<1){
  −
       
  −
        nodes.add({
  −
    id: legendID,
  −
    x: x,
  −
    y: y,
  −
    label: input.properties[i],
  −
    /*group: input.properties[i],*/
  −
    value: 1,
  −
    fixed: true,
  −
    physics: false,
  −
    color: colors[i],
  −
});legendID++;
  −
       
  −
        }else{
  −
  −
    nodes.add({
  −
    id: legendID,
  −
    x: x,
  −
    y: y + i * step,
  −
    label: input.properties[i],
  −
    /*group: input.properties[i],*/
  −
    value: 1,
  −
    fixed: true,
  −
    physics: false,
  −
    color: colors[i],
  −
    });
  −
    legendID++;
  −
  −
}
  −
}
  −
      function deleteNodes(node){
  −
     
  −
      var deleteNode = network.getConnectedNodes(node);
  −
      for(var i = 1; i < deleteNode.length;i++){
  −
      if(network.getConnectedNodes(deleteNode[i]).length > 1){
  −
      deleteNodes(deleteNode[i]);
  −
     
  −
     
  −
     
  −
      }else{
  −
     
  −
      nodes.remove([deleteNode[i]]);
  −
      if(node === 1){
  −
     
  −
      deleteNodes(deleteNode[0]);
  −
      nodes.remove([deleteNode[0]]);
  −
      }
  −
     
  −
      }
  −
     
  −
      }
  −
      for( i = 1; i < deleteNode.length;i++){
  −
      nodes.remove([deleteNode[i]]);
  −
      }
  −
     
  −
      }
  −
     
  −
     
  −
      var nodesArray = [];
  −
      //var isInArray = false;
  −
      var legendClicked = false;
     −
+
    currentPath.pop();
 +
    removeItem(visitedNodes, start);
 +
 
 +
}
 +
 
 +
 
 +
 
 +
 
 +
 
 +
           
 +
           
 +
 
 +
            //This function deletes all children of a given node.
 +
            function getAllReachableNodesTo(nodeId, excludeIds, reachableNodes) {
 +
 
 +
                if (reachableNodes.includes(nodeId) || excludeIds.includes(nodeId)) { return;}
 +
                var children = network.getConnectedNodes(nodeId);
 +
                reachableNodes.push(nodeId);
 +
                for (var i = 0; i < children.length; i++) {
 +
                    getAllReachableNodesTo(children[i], excludeIds, reachableNodes);
 +
                    //if(excludeIds.includes(children[i]))continue;
 +
                    //reachableNodes.push(children[i]);
 +
                }
 +
            }
 +
           
 +
            function deleteNodesChildren(nodeId, deleteEdge) {
 +
                var excludedIds = [];
 +
                if(deleteEdge === true){
 +
                console.log("deleteEdge true")
 +
                }else{
 +
                excludedIds.push(nodeId);
 +
                }
 +
                var reachableNodesTo = [];
 +
                getAllReachableNodesTo(input.root, excludedIds, reachableNodesTo);
 +
                var nodesToDelete = [];
 +
                var allIds = nodes.getIds();
 +
 
 +
                for (var i = 0; i < allIds.length; i++) {
 +
                    if (reachableNodesTo.includes(allIds[i])) continue;
 +
                    if (allIds[i] == nodeId) {
 +
                    deleteEdges(nodeId);
 +
                    continue;
 +
                    }
 +
                    nodesToDelete.push(allIds[i]);
 +
                    deleteEdges(allIds[i]);
 +
                    nodes.remove(allIds[i]);
 +
                    delete oldGroups["" + allIds[i]];
 +
                    delete objClickedProps["" + allIds[i]];
 +
                }
   −
var oldGroups = [];
+
                return nodesToDelete;
−
     
+
            }
−
      network.on("click", function (params) {
+
           
−
      if(params.nodes[0]){
+
function deleteEdges(nodeID){
−
//////////////////////////////////////////////////////////
+
var fromEdges = edges.get({
−
var legendGroup;
+
                    filter: function (item) {
−
var group;
+
                        return item.from == nodeID;
−
var nodeChildren;
+
                    }
−
+
                });
−
if(params.nodes[0] > 999){
+
               
−
legendGroup = nodes.get(params.nodes[0]).label;
+
        for(var j = 0; j < fromEdges.length; j++){
−
if(options.groups[legendGroup].hidden === false){
+
        edges.remove(fromEdges[j]);
 +
        }
 +
}
 +
var nodesClicked = [];
 +
var tip = '<p><strong>Hinweis:</strong> Um sich einen Pfad zwischen zwei Knoten ausgeben zu lassen, <em>Strg</em> gedrückt halten und die gewünschten zwei Knoten mit der <em>linken Maustaste</em> anklicken. </p>'
 +
this.insertAdjacentHTML('afterbegin', tip);
 +
 +
network.on("click", function(params) {
 
 
−
group = nodes.get({
+
                if (params.nodes[0] && params.event.srcEvent.ctrlKey) {
−
filter: function (item) {
+
               
−
    return item.group == legendGroup;
+
                if(nodesClicked.length < 2){
−
}
+
                nodesClicked.push(params.nodes[0]);
 +
                }
 +
                if(nodesClicked.length == 2 && nodesClicked[0] != nodesClicked[1]){
 +
                var foundPaths = findAllPaths(nodesClicked[0],nodesClicked[1]);
 +
                //.querySelector('[id^="poll-"]').id;
 +
                if(document.querySelectorAll('[id^="fullPath"]')){
 +
                for(var i=0; i < document.querySelectorAll('[id^="fullPath"]').length; i++){
 +
                document.querySelectorAll('[id^="fullPath"]')[i].remove();
 +
                }
 +
                }
 +
                var element = '<div id="fullPath'+ pathId +'"></div>'
 +
givenDiv.children[0].insertAdjacentHTML('afterend', element);
 +
 
 +
                var allStringsArray = getAllStringsForAllPaths(foundPaths);
 +
               
 +
                var stringDiv = givenDiv.querySelector('#fullPath' + pathId);
 +
               
 +
                if(foundPaths.length == 1){stringDiv.innerHTML = "<strong>Gefundener Pfad:</strong><br>"}else{stringDiv.innerHTML = "<strong>Gefundene Pfade:</strong><br>"}
 +
               
 +
                for(var s=0; s<foundPaths.length; s++){
 +
                if(foundPaths.length == 1){var pathNumb = ""}else{var pathNumb = "<strong>" + (s+1) + ". Pfad:</strong> <br>"}
 +
               
 +
                stringDiv.innerHTML += pathNumb + "<strong>Knoten: </strong>";
 +
  for(var t=0; t<foundPaths[s].length; t++){
 +
    var currentFoundPath = foundPaths[s][t];
 +
   
 +
    if(t == (foundPaths[s].length - 1)){
 +
        stringDiv.innerHTML = stringDiv.innerHTML + currentFoundPath + " ";
 +
    }
 +
    else{
 +
        stringDiv.innerHTML = stringDiv.innerHTML + currentFoundPath + " - ";
 +
    }
 +
  }
 +
  stringDiv.innerHTML += "<br>"
 +
  stringDiv.innerHTML += "<strong>Kanten:</strong> "
 +
  for(var t=0; t<allStringsArray[s].length; t++){
 +
    var currentString = allStringsArray[s][t];
 +
    var currentFoundPath = foundPaths[s][t];
 +
    var stringDiv = givenDiv.querySelector('#fullPath' + pathId);
 +
    stringDiv.innerHTML = stringDiv.innerHTML + currentString;
 +
  }
 +
  stringDiv.innerHTML += "<br>"
 +
}
 +
 
 +
                nodesClicked = [];
 +
 +
                }
 +
                if(nodesClicked[0] === nodesClicked[1] || nodesClicked.length > 2){
 +
                nodesClicked = [];
 +
                }
 +
               
 +
               
 +
                }
 +
pathId++;
 +
});
 +
 
 +
$(document).keyup(function(event) {
 +
  if(!event.ctrlKey){
 +
  nodesClicked = [];
 +
  }
 
});
 
});
−
console.log(options.groups);
+
−
for(var i = 0; i<group.length;i++){
+
 +
 +
 +
 +
 
 +
            var contextCreatedProps = [];
 +
 
 +
            network.on("doubleClick", function(params) {
 
 
−
+
                if (params.nodes[0]) {
−
//nodes.update({id:group[i].id, hidden:true});
+
               
−
nodeChildren = network.getConnectedNodes(group[i].id, 'to');
+
                var conManNodes = network.getConnectedNodes(params.nodes[0], 'to');
−
options.groups[legendGroup].hidden = true;
+
               
−
      //console.log(options.groups[legendGroup]);
+
                var onlyConManNodes = true;
−
      network.body.emitter.emit('_dataChanged');
+
                for(var i = 0; i < conManNodes.length;i++){
−
      network.redraw();
+
               
−
+
               
 +
                if(!(nodes.get(conManNodes[i]).oncontext || nodes.get(conManNodes[i]).manually)){
 +
                onlyConManNodes = false;
 +
                }
 +
                }
 +
               
 +
                //Node is expanded -> delete it and all nodes related to its expansion
 +
                    if (network.getConnectedNodes(params.nodes[0]).length > 1 && onlyConManNodes == false) {
 +
                        deleteNodesChildren(params.nodes[0]);
 +
                        for (var i = 0; i < contextCreatedProps.length; i++) {
 +
                            var noNodesInNetwork = true;
 +
                            for (var j = 0; j < nodes.getIds().length; j++) {
 +
                                if (contextCreatedProps[i] == nodes.get(nodes.getIds()[j]).group) {
 +
                                    noNodesInNetwork = false;
 +
                                }
 +
                            }
 +
                            if (noNodesInNetwork === true) {
 +
                                givenDiv.querySelector('#' + contextCreatedProps[i]).remove();
 +
                                contextCreatedProps.splice(contextCreatedProps.indexOf(contextCreatedProps[i]), 1);
 +
                                i--;
 +
                            }
 +
                        }
 +
                        delete objClickedProps["" + params.nodes[0]];
 +
                       
 +
                        //nodesArray.splice(nodesArray.indexOf(params.nodes[0]), 1);
 +
                    } else {
 +
                    //Node is unexpanded -> expand it
 +
                        var nodeById = nodes.get(params.nodes[0]);
 +
                        fetchData(nodeById.id, input.properties, params.nodes[0]);
 +
                        //nodesArray.push(params.nodes[0]);
 +
                    }
 +
 
 +
                }
 +
            });
 +
           
 +
            function newGroup(node, legendGroup) {
 +
               
 +
                nodes.update({
 +
                    id: node,
 +
                    group: legendGroup
 +
                });
 +
 
 +
 
 +
                var connectedNodes = network.getConnectedNodes(node, 'to');
 +
 
 +
                for (var i = 0; i < connectedNodes.length; i++) {
 +
                    newGroup(connectedNodes[i], legendGroup);
 +
                }
 +
            }
 +
 
 +
//Checks, if a node has a path over visible edges to the root node.
 +
//If not, the nodes gets hidden
 +
function setNodeVisibilityByVisiblePath(nodeId, rootNodeId){
 +
if (nodeId == rootNodeId) return true; //root is always visible
 +
var node = nodes.get(nodeId);
 +
if (node.visited) return !node.hidden //prevent circles. ToDo: Reuse results between runs
 +
node.visited = true;
 +
node.hidden = true;
 +
var connectedEdgesIds = network.getConnectedEdges(nodeId);
 +
var connectedEdges = edges.get(connectedEdgesIds);
 +
connectedEdges.forEach(function(edge) {
 +
if (edge.hidden) return; //don't follow hidden edges
 +
                    var connectedNodesIds = network.getConnectedNodes(edge.id);
 +
                    var connectedNodes = nodes.get(connectedNodesIds);
 +
                    connectedNodes.forEach(function(connectedNode) {
 +
                    if (connectedNode.id == nodeId) return; //prevent self evaluation
 +
                    if (setNodeVisibilityByVisiblePath(connectedNode.id, rootNodeId)) {
 +
                    node.hidden = false; //set node visible, if at least one connected node is visible
 +
                    }
 +
                    });
 +
                });
 +
                node.physics = !node.hidden;//disable physics for hidden nodes
 +
                return !node.hidden;
 +
}
 +
 
 +
            function legendFunctionality() {
 +
 
 +
                var legendGroup;
 +
                var group;
 +
                var nodeChildren;
 +
                legendGroup = this.parentNode.childNodes[1].innerHTML;
 +
               
 +
               
 +
                var strategy = "strategy2"
 +
               
 +
                if (strategy == "strategy2"){
 +
                //A node is visible if at least one path over visible edges to the root node exists.
 +
                options.groups[legendGroup].hidden = !options.groups[legendGroup].hidden; //toggle state
 +
                if(options.groups[legendGroup].hidden) this.parentNode.childNodes[1].style.background = '#FFFFFF';
 +
                else this.parentNode.childNodes[1].style.background = '#DEF';
 +
                //update all edges
 +
                edges.forEach(function(edge) {
 +
                    edge.hidden = options.groups[edge.label].hidden;
 +
                    edge.physics = !edge.hidden;
 +
                });
 +
                //reset nodes
 +
                    nodes.forEach(function(node) {
 +
                    node.hidden = false;
 +
                    node.physics = !node.hidden;
 +
                    node.visited = false;
 +
                    });
 +
                    //check each node
 +
                    nodes.forEach(function(node) {
 +
                    setNodeVisibilityByVisiblePath(node.id, input.root)
 +
                    //reset visited state. Todo: Reuse visited nodes between runs
 +
                    nodes.forEach(function(node) {
 +
                    node.visited = false;
 +
                    });
 +
                    });
 +
                }
 +
               
 +
                network.setOptions(options);
 +
                network.body.emitter.emit('_dataChanged');
 +
                network.redraw();
 +
 
 +
                var allFalse = Object.keys(options.groups).every(function(k) {
 +
                    if (k === 'useDefaultGroups') {
 +
                        return true
 +
                    }
 +
                    return options.groups[k].hidden === false
 +
                });
 +
                if (allFalse === true) {
 +
                    /*oldGroups = {};*/
 +
                }
 +
            };
 +
 
 +
            var legendDiv = document.createElement("div");
 +
            this.append(legendDiv);
 +
            legendDiv.style.width = '100%';
 +
            legendDiv.style.position = 'relative';
 +
            legendDiv.style.display = 'inline-block';
 +
           
 +
            legendDiv.id = "legendContainer";
 +
            var legendColors = {};
 +
            for (var i = 0; i < input.properties.length; i++) {
 +
                legendColors[input.properties[i]] = colors[i];
 +
                var propertyContainer = document.createElement("div");
 +
                var propertyColor = document.createElement("div");
 +
                var propertyName = document.createElement("div");
 +
 
 +
                propertyContainer.className = "legend-element-container";
 +
                propertyContainer.id = input.properties[i];
 +
 
 +
                propertyColor.className = "color-container";
 +
 
 +
                propertyName.className = "name-container";
 +
 
 +
                propertyColor.style.float = "left";
 +
                propertyName.style.float = "left";
 +
                propertyColor.style.border = "1px solid black";
 +
                propertyName.style.border = "1px solid black";
 +
 
 +
                propertyColor.style.background = colors[i];
 +
                propertyColor.innerHTML = "";
 +
                propertyName.innerHTML = input.properties[i];
 +
 
 +
                propertyColor.style.width = "30px";
 +
                propertyColor.style.height = "30px";
 +
                propertyName.style.height = "30px";
 +
                propertyName.style.background = '#DEF';
 +
 
 +
                //propertyName.text-align = 'center';
 +
                propertyContainer.paddinng = '5px 5px 5px 5px';
 +
 
 +
                propertyName.addEventListener("click", legendFunctionality);
 +
                propertyColor.addEventListener("click", legendFunctionality);
 +
 
 +
                legendDiv.append(propertyContainer);
 +
                propertyContainer.append(propertyColor);
 +
                propertyContainer.append(propertyName);
 +
 
 +
            }
 +
 
 +
            var ul = document.createElement("ul");
 +
            ul.className = 'custom-menu';
 +
            document.body.append(ul);
 +
            objClickedProps = {};
 +
            objColors = {};
 +
            var start = 0;
 +
           
 +
 
 +
            network.on("oncontext", function(params) {
 +
            params.event.preventDefault();
 +
            var timeNow = Date.now();
 +
            var timeDiff = timeNow - start
 +
            if(timeDiff > 300){
 +
            start = Date.now();
 +
                console.log(nodes.get(network.getNodeAt({ x: params.pointer.DOM.x, y: params.pointer.DOM.y })));
 +
               
 +
//console.log(edges.get(network.getEdgeAt({ x: params.pointer.DOM.x, y: params.pointer.DOM.y })));
 +
               
 +
                $('.custom-menu').each( function(index) {
 +
                while (this.lastElementChild) {
 +
                    this.removeChild(this.lastElementChild);
 +
                }});
 +
                if(!(network.getEdgeAt({ x: params.pointer.DOM.x, y: params.pointer.DOM.y }) && network.getNodeAt({ x: params.pointer.DOM.x, y: params.pointer.DOM.y }))){
 +
                if(edges.get(network.getEdgeAt({ x: params.pointer.DOM.x, y: params.pointer.DOM.y })).from){
 +
                params.event.preventDefault();
 +
     
 +
                if(edges.get(network.getEdgeAt({ x: params.pointer.DOM.x, y: params.pointer.DOM.y })).label == 'Category'){
 +
               
 +
                var li = document.createElement("li");
 +
                        li.innerHTML = '' + '\uD83D\uDD17' + ' ' + edges.get(network.getEdgeAt({ x: params.pointer.DOM.x, y: params.pointer.DOM.y })).to;
 +
 
 +
                                li.addEventListener("click", function NewTab() {
 +
                                window.open('/wiki/' + edges.get(network.getEdgeAt({ x: params.pointer.DOM.x, y: params.pointer.DOM.y })).to);
 +
                                });
 +
                                ul.prepend(li);}else{
 +
                                var li = document.createElement("li");
 +
                        li.innerHTML = '' + '\uD83D\uDD17' + ' ' + edges.get(network.getEdgeAt({ x: params.pointer.DOM.x, y: params.pointer.DOM.y })).label;
 +
 
 +
                                li.addEventListener("click", function NewTab() {
 +
                                window.open('/wiki/' + 'Property:' + edges.get(network.getEdgeAt({ x: params.pointer.DOM.x, y: params.pointer.DOM.y })).label);
 +
                                });
 +
                                ul.prepend(li);
 +
                                }
 +
                        $(".custom-menu").finish().toggle(100).css({
 +
                        top: params.event.pageY + "px",
 +
                        left: params.event.pageX + "px",
 +
                        display: "block"
 +
                    });
 +
                }
 +
                }
 +
                if (network.getNodeAt({
 +
                        x: params.pointer.DOM.x,
 +
                        y: params.pointer.DOM.y
 +
                    })) {
 +
                    params.event.preventDefault();
 +
 
 +
                    fetch('/w/api.php?action=smwbrowse&browse=subject&params={"subject":"' + encodeURIComponent(nodes.get(network.getNodeAt({
 +
                            x: params.pointer.DOM.x,
 +
                            y: params.pointer.DOM.y
 +
                        })).id) + '","ns":0}&format=json')
 +
                        .then(response => response.json())
 +
                        .then(data => {
 +
                        var selected_node =  nodes.get(network.getNodeAt({
 +
                            x: params.pointer.DOM.x,
 +
                            y: params.pointer.DOM.y
 +
                        }));
 +
                        if (selected_node.url){
 +
                       
 +
                        var li = document.createElement("li");
 +
                        li.innerHTML = '' + '\uD83D\uDD17' + ' ' + selected_node.label;
 +
 
 +
                                li.addEventListener("click", function NewTab() {
 +
                                window.open(selected_node.url);
 +
                                });
 +
                               
 +
                                ul.prepend(li);
 +
                       
 +
                        }
 +
                        var page_properties = data.query.data; //normal page
 +
                        if (selected_node.id.includes('#')) { //subobject
 +
                        for (var i = 0; i < data.query.sobj.length; i++) {
 +
                        if (data.query.sobj[i].subject.endsWith(selected_node.id.split('#').pop().replace(' ',''))){
 +
                        page_properties = data.query.sobj[i].data
 +
                        break;
 +
                        }
 +
                        }
 +
                        }
 +
                        for (var i = 0; i < page_properties.length; i++) {
 +
                            if (!page_properties[i].property.startsWith("_")) {
 +
                                var li = document.createElement("li");
 +
                                li.dataset.action = page_properties[i].property;
 +
                                li.innerHTML = page_properties[i].property;
 +
                                ul.append(li);
 +
                            }
 +
                        }
 +
 
 +
                            $(".custom-menu li").click(function() {
 +
 
 +
                                var clickedProperty = [$(this).attr("data-action")]
 +
                               
 +
                                var clickedPropertyColor = randomHSL();
 +
                               
 +
                                if(!(clickedProperty in legendColors)){legendColors[clickedProperty] = clickedPropertyColor; }else{clickedPropertyColor = legendColors[clickedProperty]; }
 +
 
 +
                               
 +
 
 +
                                if (objColors[clickedProperty]) {
 +
                                    clickedPropertyColor = objColors[clickedProperty]
 +
                                } else {
 +
                                    objColors[clickedProperty] = clickedPropertyColor;
 +
                                }
 +
 
 +
 
 +
                                if (!objClickedProps[nodes.get(network.getNodeAt({
 +
                                        x: params.pointer.DOM.x,
 +
                                        y: params.pointer.DOM.y
 +
                                    })).id]) {
 +
                                    objClickedProps[nodes.get(network.getNodeAt({
 +
                                        x: params.pointer.DOM.x,
 +
                                        y: params.pointer.DOM.y
 +
                                    })).id] = new Array();
 +
                                }
 +
 
 +
 
 +
 
 +
                                if (!objClickedProps["" + nodes.get(network.getNodeAt({
 +
                                        x: params.pointer.DOM.x,
 +
                                        y: params.pointer.DOM.y
 +
                                    })).id].includes(clickedProperty[0])) {
 +
                                    fetchData(nodes.get(network.getNodeAt({
 +
                                        x: params.pointer.DOM.x,
 +
                                        y: params.pointer.DOM.y
 +
                                    })).id, clickedProperty, nodes.get(network.getNodeAt({
 +
                                        x: params.pointer.DOM.x,
 +
                                        y: params.pointer.DOM.y
 +
                                    })).id, clickedProperty, clickedPropertyColor)
 +
                                    objClickedProps["" + nodes.get(network.getNodeAt({
 +
                                        x: params.pointer.DOM.x,
 +
                                        y: params.pointer.DOM.y
 +
                                    })).id].push(clickedProperty[0]);
 +
                                }
 +
 
 +
                                if (!(contextCreatedProps.includes(clickedProperty[0]) || input.properties.includes(clickedProperty[0]) /*|| legendColors[clickedProperty[0]]*/ )) {
 +
 
 +
                                    contextCreatedProps.push(clickedProperty[0]);
 +
 
 +
                                    options.groups[clickedProperty] = {
 +
                                        hidden: false
 +
                                    };
 +
 
 +
                                    var propertyContainer = document.createElement("div");
 +
                                    var propertyColor = document.createElement("div");
 +
                                    var propertyName = document.createElement("div");
 +
                                   
 +
 
 +
                                    propertyContainer.className = "legend-element-container";
 +
                                    propertyContainer.id = clickedProperty;
 +
 
 +
                                    propertyColor.className = "color-container";
 +
 
 +
                                    propertyName.className = "name-container";
 +
 
 +
                                    propertyColor.style.float = "left";
 +
                                    propertyName.style.float = "left";
 +
                                    propertyColor.style.border = "1px solid black";
 +
                                    propertyName.style.border = "1px solid black";
 +
                                    propertyContainer.style = "margin-right: 5px";
 +
 
 +
 
 +
                                    propertyColor.style.background = clickedPropertyColor;
 +
                                    propertyColor.innerHTML = "";
 +
                                    propertyName.innerHTML = clickedProperty;
 +
 
 +
                                    propertyColor.style.width = "30px";
 +
                                    propertyColor.style.height = "30px";
 +
                                    propertyName.style.height = "30px";
 +
                                    propertyName.style.background = '#DEF';
 +
 
 +
                                    //propertyName.text-align = 'center';
 +
                                    propertyName.margin = 'auto 5px auto 5px';
 +
 
 +
                                    propertyName.addEventListener("click", legendFunctionality);
 +
                                    propertyColor.addEventListener("click", legendFunctionality);
 +
 
 +
 
 +
                                    legendDiv.append(propertyContainer);
 +
                                    propertyContainer.append(propertyColor);
 +
                                    propertyContainer.append(propertyName);
 +
 
 +
                                }
 +
 
 +
                                $(".custom-menu").hide(100);
 +
                            });
 +
                        });
 +
 
 +
                    $(".custom-menu").finish().toggle(100).css({
 +
                        top: params.event.pageY + "px",
 +
                        left: params.event.pageX + "px",
 +
                        display: "block"
 +
                    });
 +
                }
 +
            }
 +
            });
 +
            // If the document is clicked somewhere
 +
            $(document).bind("mousedown", function(e) {
 +
 
 +
                // If the clicked element is not the menu
 +
                if (!$(e.target).parents(".custom-menu").length > 0) {
 +
 
 +
                    // Hide it
 +
                    $(".custom-menu").hide(100);
 +
                }
 +
            });
 +
         
 +
function editNode(data, cancelAction, callback) {
 +
var newNodeActive = true;
 +
  document.getElementById("node-label").value = data.label;
 +
  document.getElementById("node-saveButton").onclick = saveNodeData.bind(
 +
    this,
 +
    data,
 +
    callback
 +
  );
 +
  document.getElementById("node-cancelButton").onclick = cancelAction.bind(
 +
    this,
 +
    callback
 +
  );
 +
  //document.getElementById("node-popUp")
 +
 
 +
 
 +
  $('canvas').on('click', function(e) {
 +
  if(newNodeActive === true){
 +
    $("#node-popUp").css({
 +
                        top: e.pageY + "px",
 +
                        left: e.pageX + "px",
 +
                        display: "block"
 +
                        });}
 +
                        newNodeActive = false;
 +
                       
 +
});
 +
 
 +
}
 +
 
 +
// Callback passed as parameter is ignored
 +
function clearNodePopUp() {
 +
  document.getElementById("node-saveButton").onclick = null;
 +
  document.getElementById("node-cancelButton").onclick = null;
 +
  document.getElementById("node-popUp").style.display = "none";
 +
}
 +
 
 +
function cancelNodeEdit(callback) {
 +
  clearNodePopUp();
 +
  callback(null);
 +
}
 +
 
 +
function saveNodeData(data, callback) {
 +
  data.label = document.getElementById("node-label").value;
 +
  data.id = document.getElementById("node-label").value;
 +
  data.hidden = false;
 +
  data.physics = false;
 +
  document.getElementById("node-label").value = "";
 +
  clearNodePopUp();
 +
  callback(data);
 +
}
 +
 
 +
function editEdgeWithoutDrag(data, callback) {
 +
var newEdgeActive = true;
 +
  // filling in the popup DOM elements
 +
  document.getElementById("edge-label").value = data.label;
 +
    /*if(data.from === "H.1"){
 +
  console.log("here");
 +
  return;}*/
 +
  document.getElementById("edge-saveButton").onclick = saveEdgeData.bind(
 +
    this,
 +
    data,
 +
    callback
 +
  );
 +
  document.getElementById("edge-cancelButton").onclick = cancelEdgeEdit.bind(
 +
    this,
 +
    callback
 +
  );
 +
 
 +
  $('canvas').on('click', function(e) {
 +
  if(newEdgeActive === true){
 +
    $("#edge-popUp").css({
 +
                        top: e.pageY + "px",
 +
                        left: e.pageX + "px",
 +
                        display: "block"
 +
                        });}
 +
                        newEdgeActive = false;
 +
});
 +
  //document.getElementById("edge-popUp").style.display = "block";
 +
}
 +
 
 +
function clearEdgePopUp() {
 +
  document.getElementById("edge-saveButton").onclick = null;
 +
  document.getElementById("edge-cancelButton").onclick = null;
 +
  document.getElementById("edge-popUp").style.display = "none";
 +
}
 +
 
 +
function cancelEdgeEdit(callback) {
 +
  clearEdgePopUp();
 +
  callback(null);
 +
}
 +
 
 +
function isLabelReversed(label){
 +
  if(label[0] == "-"){
 +
    return true;
 +
  }
 +
  else{
 +
    return false;
 +
  }
 +
}
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
var pageBool;
 +
async function pageExists(id){
 +
 +
await fetch('/w/api.php?action=parse&page='+ id +'&prop=wikitext&format=json')
 +
                        .then(response => response.json())
 +
                        .then(data => {
 +
                       
 +
                        if(data.error){
 +
                        pageBool = false;
 +
                        }else{
 +
                        pageBool = true;
 +
                        }
 +
                       
 +
                        })
 +
return pageBool;
 +
}
   −
if(nodeChildren.length === 0){
+
var wikiText = "";
−
+
var semantic = "";
−
continue;
+
async function editWikiText(node){
−
}else{
+
await fetch('/w/api.php?action=parse&page='+ node +'&prop=wikitext&format=json')
−
+
                        .then(response => response.json())
−
for(var j = 0; j<nodeChildren.length;j++){
+
                        .then(data => {
−
console.log(nodes.get(nodeChildren[j]).group);
+
                        wikiText = data.parse.wikitext['*'];
−
oldGroups.push({id: nodes.get(nodeChildren[j]).id, group:nodes.get(nodeChildren[j]).group});
+
                        semantic = "";
 +
if(wikiText.search(/(\{\{Semantic\/[^}]*[\r\n]*\}[\r\n]*\})/g) >= 0){
 +
//var edgeStringFound = wikiText.search(re) >= 0;
 +
const found = wikiText.match(/(\{\{Semantic\/[^}]*[\r\n]*\}[\r\n]*\})/g);
 +
 +
var newWikiText = wikiText;
 +
for(var i=0; i<found.length;i++){
 +
if(i == found.length-1){
 +
semantic += found[i];
 +
newWikiText = newWikiText.replace(/(\{\{Semantic\/[^}]*[\r\n]*\}[\r\n]*\}[\r\n]*\}[\r\n]*\})/g, "");
 +
}else{
 +
semantic += found[i];
 +
newWikiText = newWikiText.replace(found[i], "");
 +
}
 +
}
 +
wikiText = newWikiText;
 +
 
 
−
nodes.update({id: nodeChildren[j], group:legendGroup});
+
 
−
console.log(nodes.get(nodeChildren[j]));
+
 
−
network.body.emitter.emit('_dataChanged');
+
}
−
      network.redraw();
+
});
−
+
return [semantic, wikiText];
 +
}
 +
 
 +
 
 +
 
 +
async function saveEdgeData(data, callback) {
 +
  if (typeof data.to === "object") data.to = data.to.id;
 +
  if (typeof data.from === "object") data.from = data.from.id;
 +
 
 +
  data.label = document.getElementById("edge-label").value;
 +
  options.groups[data.label] = {hidden: false};
 +
  var toNode = nodes.get(data.to);
 +
  var fromNode = nodes.get(data.from);
 +
  fromNode.physics = true;
 +
  toNode.physics = true;
 +
  delete fromNode.x;
 +
  delete fromNode.y;
 +
  delete toNode.x;
 +
  delete toNode.y;
 +
  if(!toNode.group){toNode.group = data.label}
 +
  if(!fromNode.group){fromNode.group = data.label}
 +
  if(legendColors[data.label]){data.color = legendColors[data.label];}else{data.color = randomHSL(); }
 +
  if(!toNode.color){toNode.color = data.color; toNode.manually = true;}
 +
  if(!fromNode.color){fromNode.color = data.color; fromNode.manually = true;}
 +
 
 +
  if(!(contextCreatedProps.includes(data.label) || input.properties.includes(data.label))){
 +
  contextCreatedProps.push(data.label);
 +
var propertyContainer = document.createElement("div");
 +
    var propertyColor = document.createElement("div");
 +
    var propertyName = document.createElement("div");
 +
   
 +
 
 +
    propertyContainer.className = "legend-element-container";
 +
    propertyContainer.id = data.label;
 +
 
 +
    propertyColor.className = "color-container";
 +
 
 +
    propertyName.className = "name-container";
 +
 
 +
    propertyColor.style.float = "left";
 +
    propertyName.style.float = "left";
 +
    propertyColor.style.border = "1px solid black";
 +
    propertyName.style.border = "1px solid black";
 +
    propertyContainer.style = "margin-right: 5px";
 +
 
 +
 
 +
    propertyColor.style.background = data.color;
 +
    propertyColor.innerHTML = "";
 +
    propertyName.innerHTML = data.label;
 +
 
 +
    propertyColor.style.width = "30px";
 +
    propertyColor.style.height = "30px";
 +
    propertyName.style.height = "30px";
 +
    propertyName.style.background = '#DEF';
 +
 
 +
    //propertyName.text-align = 'center';
 +
    propertyName.margin = 'auto 5px auto 5px';
 +
 
 +
    propertyName.addEventListener("click", legendFunctionality);
 +
    propertyColor.addEventListener("click", legendFunctionality);
 +
 
 +
 
 +
    legendDiv.append(propertyContainer);
 +
    propertyContainer.append(propertyColor);
 +
    propertyContainer.append(propertyName);
 +
  legendColors[data.label] = data.color;
 +
  }
 +
  if(isLabelReversed(data.label)){
 +
  if(await pageExists(fromNode.id) === false){
 +
  if(!(newNodes[fromNode.id])){
 +
  newNodes[fromNode.id] = '' + '{{Semantic/Element' +
 +
'|label=' + fromNode.label +
 +
'|description=test' +
 +
'|relations=';
 +
  }
 +
 
 +
  }
 +
 
 +
  if(await pageExists(toNode.id) === true){
 +
  var splitWikiText = await editWikiText(toNode.id);
 +
  if(editNodes[toNode.id]){
 +
  editNodes[toNode.id] += '' + '{{Semantic/Link'+
 +
'|property=' + reverseLabel(data.label) +
 +
'|value=' + fromNode.id +
 +
'}}' + '';
 +
 
 +
  }else{
 +
  if(splitWikiText[0]){
 +
  editNodes[toNode.id] = splitWikiText[1] + splitWikiText[0] + '{{Semantic/Link'+
 +
'|property=' + reverseLabel(data.label) +
 +
'|value=' + fromNode.id +
 +
'}}' + '';
 +
  }else{
 +
  editNodes[toNode.id] = splitWikiText[1] + '{{Semantic/Element' +
 +
'|label=' + toNode.label +
 +
'|description=test' +
 +
'|relations='+
 +
  '{{Semantic/Link'+
 +
'|property=' + reverseLabel(data.label) +
 +
'|value=' + fromNode.id +
 +
'}}' + '';
 +
  }
 +
  }
 +
  }else{
 +
  if(newNodes[toNode.id]){
 +
  newNodes[toNode.id] += '' + '{{Semantic/Link'+
 +
'|property=' + reverseLabel(data.label) +
 +
'|value=' + fromNode.id +
 +
'}}' + '';
 +
  }else{
 +
  newNodes[toNode.id] = '' + '{{Semantic/Element' +
 +
'|label=' + toNode.label +
 +
'|description=test' +
 +
'|relations={{Semantic/Link'+
 +
'|property=' + reverseLabel(data.label) +
 +
'|value=' + fromNode.id +
 +
'}}'+
 +
'';
 +
  }
 +
  }
 +
 
 +
  }else{
 +
 
 +
  if(await pageExists(toNode.id) === false){
 +
  if(!(newNodes[toNode.id])){
 +
  newNodes[toNode.id] = '' + '{{Semantic/Element' +
 +
'|label=' + toNode.label +
 +
'|description=test' +
 +
'|relations=';
 +
  }
 +
  }
 +
  if(await pageExists(fromNode.id) === true){
 +
  var splitWikiText = await editWikiText(fromNode.id);
 +
  if(editNodes[fromNode.id]){
 +
  editNodes[fromNode.id] += '' + '{{Semantic/Link'+
 +
'|property=' + data.label +
 +
'|value=' + toNode.id +
 +
'}}' + '';
 +
  }else{
 +
  if(splitWikiText[0]){
 +
  editNodes[fromNode.id] = splitWikiText[1] +  splitWikiText[0] + '{{Semantic/Link'+
 +
'|property=' + data.label +
 +
'|value=' + toNode.id +
 +
'}}' + '';
 +
  }else{
 +
  editNodes[fromNode.id] = splitWikiText[1] + '{{Semantic/Element' +
 +
'|label=' + fromNode.label +
 +
'|description=test' +
 +
'|relations='+
 +
  '{{Semantic/Link'+
 +
'|property=' + data.label +
 +
'|value=' + toNode.id +
 +
'}}' + '';
 +
  }
 +
  }
 +
  }else{
 +
  if(newNodes[fromNode.id]){
 +
  newNodes[fromNode.id] += '' + '{{Semantic/Link'+
 +
'|property=' + data.label +
 +
'|value=' + toNode.id +
 +
'}}' + '';
 +
 
 +
  }else{
 +
  newNodes[fromNode.id] = '' + '{{Semantic/Element' +
 +
'|label=' + fromNode.label +
 +
'|description=test' +
 +
'|relations={{Semantic/Link'+
 +
'|property=' + data.label +
 +
'|value=' + toNode.id +
 +
'}}'+
 +
'';
 +
 +
  }
 +
  }
 +
 
 +
  }
 +
 
 +
  //console.log(toNode);
 +
  //console.log(fromNode);
 +
 
 +
console.log(editNodes);
 +
console.log(newNodes);
 +
 
 +
  clearEdgePopUp();
 +
  callback(data);
 +
  network.setOptions(options);
 +
  network.body.emitter.emit('_dataChanged');
 +
  network.redraw();
 +
}
 +
    var saveBtn= document.createElement("button");
 +
            saveBtn.addEventListener("click", saveGraphChanges);
 +
            saveBtn.innerHTML = "Speichern";
 +
            saveBtn.style.width = "auto";
 +
            saveBtn.style.height = "auto";
 +
 
 +
givenDiv.appendChild(saveBtn);
 +
function saveGraphChanges() {
 +
var alertString = "";
 +
OO.ui.confirm( 'Änderungen übernehmen?' ).done( async function ( confirmed ) {
 +
    if ( confirmed ) {
 +
for (const [key, value] of Object.entries(newNodes)) {
 +
  var params = {
 +
action: 'edit',
 +
title: '' + key,
 +
appendtext: '' + value + '}}',
 +
format: 'json'
 +
},
 +
api = new mw.Api();
 
 
 +
await api.postWithToken( 'csrf', params ).done( function ( data ) {
 +
console.log( data );
 +
alertString += "Seite " + key + " erstellt!\r\n"
 +
} );
 +
}
 +
 +
for (const [key, value] of Object.entries(editNodes)) {
 +
  var params = {
 +
action: 'edit',
 +
title: '' + key,
 +
text: '' + value + '}}',
 +
format: 'json'
 +
},
 +
api = new mw.Api();
 
 
 +
await api.postWithToken( 'csrf', params ).done( function ( data ) {
 +
console.log( data );
 +
alertString += "Seite " + key + " bearbeitet!\r\n"
 +
} );
 +
}
 +
 +
for (const [key, value] of Object.entries(editDeletedEdges)) {
 +
  var params = {
 +
action: 'edit',
 +
title: '' + key,
 +
text: '' + value,
 +
format: 'json'
 +
},
 +
api = new mw.Api();
 
 
−
}console.log(oldGroups);
+
await api.postWithToken( 'csrf', params ).done( function ( data ) {
 +
console.log( data );
 +
alertString += "Auf der Seite " + key + " wurde ein Attribut gelöscht!\r\n"
 +
} );
 
}
 
}
 
 
 +
for (const [key, value] of Object.entries(editDeletedNodes)) {
 +
  var params = {
 +
action: 'delete',
 +
title: '' + key,
 +
format: 'json'
 +
},
 +
api = new mw.Api();
 +
await api.postWithToken( 'csrf', params ).done( function ( data ) {
 +
console.log( data );
 +
alertString += "Seite " + key + " wurde gelöscht!\r\n"
 +
} );
 +
}
 +
console.log( alertString );
 +
// Example: Customize the displayed actions at the time the window is opened.
 +
var messageDialog = new OO.ui.MessageDialog();
 
 
 +
// Create and append a window manager.
 +
var windowManager = new OO.ui.WindowManager();
 +
$( 'body' ).append( windowManager.$element );
 
 
−
}
+
// Add the dialog to the window manager.
−
network.body.emitter.emit('_dataChanged');
+
windowManager.addWindows( [ messageDialog ] );
−
      network.redraw();
  −
 
  −
     
  −
     
  −
     
  −
     
  −
     
  −
      }else{
  −
     
  −
group = nodes.get({
  −
filter: function (item) {
  −
    return item.group == legendGroup;
  −
}
  −
});
  −
console.log(options.groups);
  −
      for( i = 0; i<group.length;i++){
  −
     
   
 
−
nodeChildren = network.getConnectedNodes(group[i].id, 'to');
+
// Configure the message dialog when it is opened with the window manager's openWindow() method.
−
options.groups[legendGroup].hidden = false;
  −
      //options.groups[legendGroup].hidden = false;
  −
      network.body.emitter.emit('_dataChanged');
  −
      network.redraw();
  −
console.log(nodeChildren.length);
  −
if(nodeChildren.length === 0){
  −
continue;
  −
}else{
  −
for( j = 0; j<oldGroups.length;j++){
  −
console.log(oldGroups[j],id);
  −
nodes.update({id: oldGroups[j].id, group:oldGroups[j].group});
  −
network.body.emitter.emit('_dataChanged');
  −
      network.redraw();
  −
  −
  −
}
  −
}
   
 
 +
windowManager.openWindow( messageDialog, {
 +
  title: 'Folgende Änderugnen wurden übernommen:',
 +
  message: '' + alertString,
 +
  verbose: true,
 +
  actions: [
 +
    {
 +
      action: 'accept',
 +
      label: 'Okay',
 +
      flags: 'primary'
 +
    }
 +
  ]
 +
});
 +
/*OO.ui.alert( "" + alertString ).done( function () {
 +
    console.log( alertString );
 +
} );*/
 
 
 +
    } else {
 +
       
 +
    }
 +
   
 +
} );
 
 
 +
 
}
 
}
−
network.body.emitter.emit('_dataChanged');
+
−
      network.redraw();
+
 
−
      oldGroups = [];
+
 
−
     
+
 
−
     
+
function deleteSelectedNode(data, callback){
−
      }}
+
console.log(contextCreatedProps);
−
/////////////////////////////////////////////////////////////////////////////////////     
+
deleteNodesChildren(data.nodes[0]);
−
     
+
nodes.remove(data.nodes[0]);
−
      /*for( i = 0; i < nodesArray.length; i++){
+
                        for (var i = 0; i < contextCreatedProps.length; i++) {
−
      if(params.nodes[0] == nodesArray[i]){
+
                            var noNodesInNetwork = true;
−
      isInArray = true;
+
                            for (var j = 0; j < nodes.getIds().length; j++) {
−
      }}*/
+
                                if (contextCreatedProps[i] == nodes.get(nodes.getIds()[j]).group) {
−
      if(network.getConnectedNodes(params.nodes[0]).length >1 ){
+
                               
−
      deleteNodes(params.nodes[0]);
+
                                    noNodesInNetwork = false;
−
      nodesArray.splice(nodesArray.indexOf(params.nodes[0]),1);
+
                                }
−
      //|| (params.nodes[0]===1)
+
                            }
−
     
+
                            if (noNodesInNetwork === true) {
−
      //isInArray = false;
+
                           
−
      }else{
+
                                givenDiv.querySelector('#' + contextCreatedProps[i]).remove();
−
      var nodeById = nodes.get(params.nodes[0]);
+
                                contextCreatedProps.splice(contextCreatedProps.indexOf(contextCreatedProps[i]), 1);
−
      fetchData(nodeById.label, input.properties, params.nodes[0]);
+
                                i--;
−
      nodesArray.push(params.nodes[0]);
+
                            }
−
     
+
                        }
−
      }
+
 
 +
                       
 +
    delete oldGroups["" + data.nodes[0]];
 +
                       
 +
                        delete objClickedProps["" + data.nodes[0]];
 +
                        callback();
 +
                        document.querySelector('.vis-delete').remove();
 +
editDeletedNodes[""+data.nodes[0]] = "";
 +
delete newNodes[""+data.nodes[0]];
 +
delete editNodes[""+data.nodes[0]];
 +
console.log(editDeletedNodes);
 +
 
 +
}
 +
 
 +
async function deleteSelectedEdge(data, callback){
 +
var edgeToNode = edges.get(data.edges[0]).to;
 +
var edgeFromNode = edges.get(data.edges[0]).from;
 +
var edgeLabel = edges.get(data.edges[0]).label;
 +
console.log(edgeLabel);
 +
edges.remove(data.edges[0]);
 +
deleteNodesChildren(edgeToNode, true);
 +
deleteNodesChildren(edgeFromNode, true);
 +
 +
for (var i = 0; i < contextCreatedProps.length; i++) {
 +
                            var noNodesInNetwork = true;
 +
                            for (var j = 0; j < nodes.getIds().length; j++) {
 +
                                if (contextCreatedProps[i] == nodes.get(nodes.getIds()[j]).group) {
 +
                               
 +
                                    noNodesInNetwork = false;
 +
                                }
 +
                            }
 +
                            if (noNodesInNetwork === true) {
 +
                           
 +
                                givenDiv.querySelector('#' + contextCreatedProps[i]).remove();
 +
                                contextCreatedProps.splice(contextCreatedProps.indexOf(contextCreatedProps[i]), 1);
 +
                                i--;
 +
                            }
 +
                        }
 +
 +
if(edgeLabel[0] == "-"){
 +
if(await pageExists(edgeToNode) === true){
 +
await fetch('/w/api.php?action=parse&page='+ edgeToNode +'&prop=wikitext&format=json')
 +
                        .then(response => response.json())
 +
                        .then(data => {
 +
                        var wikiText = data.parse.wikitext['*'];
 +
console.log(wikiText);
 +
 +
                        var edgeString = `(\{\{Semantic\/Link[\\r\\n]*\\|[\\r\\n]*property=`+reverseLabel(edgeLabel)+`[\\r\\n]*\\|[\\r\\n]*value=`+edgeFromNode+`[\\r\\n]*\\}[\\r\\n]*\\}[\\r\\n]*)`
 +
//var edgeString = '(\\{\\{Semantic\/Element[^}]*[\\r\\n]*\\}[\\r\\n]*\\}[\\r\\n]*[\\r\\n]*\\}[\\r\\n]*\\})'
 +
var re = new RegExp(edgeString,"g");
 +
                       
 +
                        var edgeStringFound = wikiText.search(re) >= 0;
 +
                       
 +
                        if(edgeStringFound){
 +
                        if(editDeletedEdges[""+ edgeToNode]){
 +
                        var newWikiText = editDeletedEdges[""+ edgeToNode].replace(re, "");
 +
                        editDeletedEdges[""+ edgeToNode] = newWikiText;
 +
                        }else{
 +
                        var newWikiText = wikiText.replace(re, "");
 +
                        console.log(newWikiText)
 +
                        editDeletedEdges[""+ edgeToNode] = newWikiText;
 +
                        }
 +
   
 +
                        }
 +
                       
 +
                        if(newNodes[""+edgeToNode]){
 +
                       
 +
                        var newWikiText = newNodes[""+edgeToNode].replace(re, "");
 +
                        newNodes[""+edgeToNode] = newWikiText;
 +
 
 +
                        }
 +
                       
 +
                        if(editNodes[""+edgeToNode]){
 +
                       
 +
                        var newWikiText = editNodes[""+edgeToNode].replace(re, "");
 +
                        editNodes[""+edgeToNode] = newWikiText;
 +
                       
 +
                        }
 +
 
 +
                        });}else{
 +
                        if(network.getConnectedNodes(edgeToNode).length == 0){
 +
                        delete newNodes[""+edgeToNode];
 +
                        }else{
 +
                        var edgeString = `(\{\{Semantic\/Link[\\r\\n]*\\|[\\r\\n]*property=`+reverseLabel(edgeLabel)+`[\\r\\n]*\\|[\\r\\n]*value=`+edgeFromNode+`[\\r\\n]*\\}[\\r\\n]*\\}[\\r\\n]*)`;
 +
 
 +
                        var re = new RegExp(edgeString,"g");
 +
                        var wikiText = newNodes[""+edgeToNode];
 +
                        var newWikiText = wikiText.replace(re,"");
 +
                        newNodes[""+edgeToNode] = newWikiText;
 +
                        }
 +
                        }
 +
}else{
 +
if(await pageExists(edgeFromNode) === true){
 +
await fetch('/w/api.php?action=parse&page='+ edgeFromNode +'&prop=wikitext&format=json')
 +
                        .then(response => response.json())
 +
                        .then(data => {
 +
                        var wikiText = data.parse.wikitext['*'];
 +
console.log(wikiText);
 +
 +
                        var edgeString = `(\{\{Semantic\/Link[\\r\\n]*\\|[\\r\\n]*property=`+edgeLabel+`[\\r\\n]*\\|[\\r\\n]*value=`+edgeToNode+`[\\r\\n]*\\}[\\r\\n]*\\}[\\r\\n]*)`;
 +
//var edgeString = '(\\{\\{Semantic\/Element[^}]*[\\r\\n]*\\}[\\r\\n]*\\}[\\r\\n]*[\\r\\n]*\\}[\\r\\n]*\\})'
 +
var re = new RegExp(edgeString,"g");
 +
                       
 +
                        var edgeStringFound = wikiText.search(re) >= 0;
 +
                       
 +
                        if(edgeStringFound){
 +
                        if(editDeletedEdges[""+ edgeFromNode]){
 +
                        var newWikiText = editDeletedEdges[""+ edgeFromNode].replace(re, "");
 +
                        editDeletedEdges[""+ edgeFromNode] = newWikiText;
 +
                        }else{
 +
                        var newWikiText = wikiText.replace(re, "");
 +
                        console.log(newWikiText)
 +
                        editDeletedEdges[""+ edgeFromNode] = newWikiText;
 +
                        }
 +
   
 +
                        }
 +
                       
 +
                        if(newNodes[""+edgeFromNode]){
 +
                       
 +
                        var newWikiText = newNodes[""+edgeFromNode].replace(re, "");
 +
                        newNodes[""+edgeFromNode] = newWikiText;
 +
 
 +
                        }
 +
                       
 +
                        if(editNodes[""+edgeFromNode]){
 +
                       
 +
                        var newWikiText = editNodes[""+edgeFromNode].replace(re, "");
 +
                        editNodes[""+edgeFromNode] = newWikiText;
 +
                       
 +
                        }
 +
 
 +
                       
 +
                        });}else{
 +
                        if(network.getConnectedNodes(edgeFromNode).length == 0){
 +
                        delete newNodes[""+edgeFromNode];
 +
                        }else{
 +
                        var edgeString = `(\{\{Semantic\/Link[\\r\\n]*\\|[\\r\\n]*property=`+edgeLabel+`[\\r\\n]*\\|[\\r\\n]*value=`+edgeToNode+`[\\r\\n]*\\}[\\r\\n]*\\}[\\r\\n]*)`;
 +
 
 +
                        var re = new RegExp(edgeString,"g");
 +
                        var wikiText = newNodes[""+edgeFromNode];
 +
                        var newWikiText = wikiText.replace(re,"");
 +
                        newNodes[""+edgeFromNode] = newWikiText;
 +
                        }
 +
                        console.log(newNodes);
 +
                        }
 +
                       
 +
}
 +
 +
 +
 +
 +
console.log(editDeletedEdges);
 +
//nodes.remove(edges.get(data.edges[0]).to);
 +
 +
callback(data);
 +
document.querySelector('.vis-delete').remove();
 +
console.log(objClickedProps);
 +
    console.log(oldGroups);
 +
}
 +
 
 +
var editHtml = '' +
   −
      }
+
'<div id="node-popUp">' +
 +
'  <span id="node-operation" style="cursor: move;">node</span> <br />' +
 +
'  <table style="margin: auto">' +
 +
'    <tbody>' +
 +
'      <tr>' +
 +
'        <td>label</td>' +
 +
'        <td><input id="node-label" value="" /></td>' +
 +
'      </tr>' +
 +
'    </tbody>' +
 +
'  </table>' +
 +
'  <input type="button" value="save" id="node-saveButton" />' +
 +
'  <input type="button" value="cancel" id="node-cancelButton" />' +
 +
'</div>' +
 +
'' +
 +
'<div id="edge-popUp">' +
 +
'  <span id="edge-operation" style="cursor: move;">edge</span> <br />' +
 +
'  <table style="margin: auto">' +
 +
'    <tbody>' +
 +
'      <tr>' +
 +
'        <td>label</td>' +
 +
'        <td><input id="edge-label" value="" /></td>' +
 +
'      </tr>' +
 +
'    </tbody>' +
 +
'  </table>' +
 +
'  <input type="button" value="save" id="edge-saveButton" />' +
 +
'  <input type="button" value="cancel" id="edge-cancelButton" />' +
 +
'</div>' +
 +
'';
 +
 
 +
 
 +
 
 +
 
 +
var editHtmlDiv = document.createElement("div");
 +
editHtmlDiv.innerHTML = editHtml;
 +
document.body.appendChild(editHtmlDiv);
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
//dragElement(document.getElementById("node-popUp"));
 +
//dragElement(document.getElementById("edge-popUp"));
 +
 
 +
function dragElement(elmnt) {
 +
  var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
 +
  if (document.getElementById(elmnt.id)) {
 +
 
 +
    // if present, the header is where you move the DIV from:
 +
    document.getElementById("node-operation").onmousedown = dragMouseDown;
 +
    document.getElementById("edge-operation").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";
 +
  }
   −
      });
+
  function closeDragElement() {
−
     
+
    // stop moving when mouse button is released:
−
     
+
     document.onmouseup = null;
−
      
+
     document.onmousemove = null;
−
     } 
+
  }
−
    });
+
}
−
});
     −
/*groups: {
  −
  useDefaultGroups: false,
  −
'Kategorie': {},
  −
  '-IsLocatedIn': {}
  −
  }*/
      +
        }
 +
    });
 +
    });
   −
/*for (var key in data.query.results[input.root].printouts) {
+
});
−
    if (data.query.results[input.root].printouts.hasOwnProperty(key)) {
  −
    for(var key2 in data.query.results[input.root].printouts[key]){
  −
        console.log(data.query.results[input.root].printouts[key][key2].fulltext);
  −
    }
  −
    }
  −
}*/
 
Simon Stier
Bots, bulkpusher, Bureaucrats, checkuser, filepusher, Interface administrators, oversight, pusher, rdfioadministrator, rdfiocurator, Administrators (Semantic MediaWiki), Curators (Semantic MediaWiki), Editors (Semantic MediaWiki), Administrators
5,444

edits

Retrieved from "https://kiprobatt.de/wiki/Special:MobileDiff/5719"
Cookies help us deliver our services. By using our services, you agree to our use of cookies.
More information