Add Edge - Alpha
Versió Alpha d'afegir arestes. No toca DB però fa com si l'hagués afegit al graf local.
diff --git a/js/autocomplete.js b/js/autocomplete.js
index 351c786..4c32827 100644
--- a/js/autocomplete.js
+++ b/js/autocomplete.js
@@ -46,20 +46,53 @@
case "search":
// Move camera to desired node
cameraGoto(obj[n].x, obj[n].y);
+ // Close the search box
+ var searchBox = document.getElementById('searchBox');
+ searchBox.style.display = "none";
+
+ // Empty the input bar
+ var searchInput = document.getElementById('searchInput');
+ searchInput.value = "";
break;
- case "addEdge":
+ case "addEdge":
// Add an edge between A and B
- alert(obj[n].name);
+ var sourceID = document.getElementById("node-id").innerText.substr(1);
+ var edgeName = Math.min(sourceID, n) + "_" + Math.max(sourceID, n);
+ if (!graf.edges[edgeName]) {
+ graf.edges[edgeName] = {
+ a: Math.min(sourceID, n),
+ b: Math.max(sourceID, n),
+ votes: 1
+ };
+
+ // Temporary fix, just for testing
+ s.graph.addEdge({
+ id: edgeName,
+ source: sourceID,
+ target: n,
+ size: 0.5
+ });
+
+ clickNode(s, sourceID, s.graph.neighbors(sourceID));
+ dialog.max();
+
+ // Give a message of validation
+ var edgeMSG = document.querySelector("#addedge-msg");
+ addedEdgeMSG(edgeMSG);
+
+ } else {
+ alert("Edge already exists");
+ }
+
+ // Empty the input bar
+ var addEdgeInput = document.getElementById('addedge-input');
+ addEdgeInput.value = "";
+
+ // Return to default view
+ document.querySelector("#addedge-input").style.display = "none";
+ document.querySelector("#edge-list").style.display = "block";
break;
}
-
- // Close the search box
- var searchBox = document.getElementById('searchBox');
- searchBox.style.display = "none";
-
- // Empty the input bar
- var searchInput = document.getElementById('searchInput');
- searchInput.value = "";
/*close the list of autocompleted values,
(or any other open lists of autocompleted values:*/
@@ -145,3 +178,22 @@
closeAllLists(e.target);
});
}
+
+function addedEdgeMSG(edgeMSG) {
+ var opacity = 8;
+ edgeMSG.style.display = "block";
+
+ var opacityChange = window.setInterval(function() {
+ edgeMSG.style.color = "rgba(0,0,0, "+ opacity/10 +")";
+ var edgeList = document.querySelector("#edge-list ul");
+ edgeList.style.backgroundColor = "rgba(0,200,0, "+ opacity/10 +")";
+ --opacity;
+ console.log(opacity);
+ }, 100);
+
+ var backToDef = window.setTimeout(function() {
+ edgeMSG.style.display = "none";
+ edgeMSG.style.color = "black";
+ window.clearInterval(opacityChange);
+ }, 1000);
+}
\ No newline at end of file
diff --git a/js/modal.js b/js/modal.js
index 4138fde..179e936 100644
--- a/js/modal.js
+++ b/js/modal.js
@@ -9,6 +9,7 @@
// When the user clicks the button, open the box
searchButton.onclick = function() {
+ dialog.close();
searchBox.style.display = "block";
// Focus on the search input bar
document.getElementById("searchInput").focus();
diff --git a/js/script.js b/js/script.js
index 5d7a5e4..6fcf868 100644
--- a/js/script.js
+++ b/js/script.js
@@ -63,6 +63,7 @@
s.graph.nodes().forEach(function(n) {
n.color = n.originalColor;
+ n.label = n.originalLabel;
});
s.graph.edges().forEach(function(e) {
@@ -78,6 +79,13 @@
min: function() {
document.querySelector("#dialog").style.display = "none";
document.querySelector("#summary-dialog").style.display = "block";
+ },
+ addEdge: function() {
+ document.querySelector("#addedge-input").style.display = "block";
+ document.querySelector("#edge-list").style.display = "none";
+ autocomplete(document.getElementById("addedge-input"), graf.nodes, "addEdge");
+ // Focus on the addEdge input bar
+ document.getElementById("addedge-input").focus();
}
};
@@ -122,6 +130,7 @@
s.graph.addNode({
id: graf.nodes[i].id,
label: graf.nodes[i].name,
+ originalLabel: graf.nodes[i].name,
x: graf.nodes[i].x,
y: graf.nodes[i].y,
size: 10,
@@ -143,32 +152,14 @@
var nodeId = e.data.node.id,
toKeep = s.graph.neighbors(nodeId);
//toKeep[nodeId] = e.data.node;
-
- s.graph.nodes().forEach(function(n) {
- if (toKeep[n.id] || n.id == nodeId) {
- n.color = n.originalColor;
- } else {
- n.color = '#333';
- }
- });
-
- s.graph.edges().forEach(function(e) {
- if ((e.source == nodeId || e.target == nodeId) && (toKeep[e.source] || toKeep[e.target])) {
- e.color = '#fff';
- } else {
- e.color = '#333';
- }
- });
-
- s.refresh();
-
- dialog.show(nodeId, toKeep);
+ clickNode(s, nodeId, toKeep);
});
document.querySelector("#quit-dialog").addEventListener("click", dialog.close);
document.querySelector("#quit2-dialog").addEventListener("click", dialog.close);
document.querySelector("#max-dialog").addEventListener("click", dialog.max);
document.querySelector("#min-dialog").addEventListener("click", dialog.min);
+ document.querySelector("#addedge-button").addEventListener("click", dialog.addEdge);
document.querySelector("#zoomin").addEventListener("click", function() {
s.camera.goTo({
@@ -194,4 +185,29 @@
);
}
+function clickNode(s, nodeId, toKeep) {
+ s.graph.nodes().forEach(function(n) {
+ if (toKeep[n.id] || n.id == nodeId) {
+ n.color = n.originalColor;
+ n.label = n.originalLabel;
+ console.log("Hola");
+ } else {
+ n.color = '#333';
+ n.label = '';
+ }
+ });
+
+ s.graph.edges().forEach(function(e) {
+ if ((e.source == nodeId || e.target == nodeId) && (toKeep[e.source] || toKeep[e.target])) {
+ e.color = '#fff';
+ } else {
+ e.color = '#333';
+ }
+ });
+
+ s.refresh();
+
+ dialog.show(nodeId, toKeep);
+}
+
window.addEventListener("load", init);