bugfixes: *clear graph reload, *blocking infobox, *infobox timing, *invisible edges

README.md

@@ -2,10 +2,12 @@
 
 ## Installationsanleitung
 
-Voraussetzung ist Python in einer Version >=3.3. Normalerweise reicht es einfach folgenden Befehl auszuführen:
+Voraussetzung ist Python in einer Version >=3.3 (bzw. venv). Normalerweise reicht es einfach folgenden Befehl auszuführen:
 
 ```$ ./install.sh```
 
+**INFO:** Manche Debian/Ubuntu basierten Systeme trennen Python3 und venv. Sollte dieser Fehler auftreten installieren Sie bitte venv nach(`apt-get install python3-venv`).
+
 Sollte es Probleme mit der Python-Instanz geben kann diese manuell in der 4. Zeile von `install.sh` geändert werden.
 
 Gestartet wird der Server per:
@@ -18,6 +20,6 @@ Das startet ein Webserver der auf Port 5000 lauscht.
 
 Da mir gesagt wurde overachieving ist u.U. auch nicht gern gesehen (getreu dem Motto: "Zu früh kommen ist auch unpünktlich.") habe ich wirklich nur die Anforderungen implementiert.
 
-Um dennoch zu demonstrieren, dass ich mir Gedanken um die simple Erweiterung von Funktionalitäten gemacht habe, habe ich eine weitere CRUD Funktion auskommentiert hinzugefügt. Diese ist im Branch [delete_edge](https://git.finnendahl.de/Yugon/TU_Assignment/commit/0d5778ada4c85305e4f63ab189c243b299a7ae31) zu begutachten 
+Um dennoch zu demonstrieren, dass ich mir Gedanken um die simple Erweiterung von Funktionalitäten gemacht habe, habe ich eine weitere CRUD Funktion auskommentiert hinzugefügt. Diese ist im Branch [delete_edge](https://git.finnendahl.de/Yugon/TU_Assignment/commit/0d5778ada4c85305e4f63ab189c243b299a7ae31) zu begutachten
 
 Ach ja, und da zu der layout Methode nicht viel gesagt wurde hab ich mich mit force-directed-graphs etwas ausgetobt. Zu sehen per Klick auf Automatic Layout rechts unten.

frontend/assets/css/src/style.scss

@@ -109,6 +109,7 @@ main{
     left: 1em;
     display: flex;
     justify-content: flex-end;
+    overflow: hidden;
     #infobar{
       position: absolute;
       bottom:0;
@@ -120,9 +121,11 @@ main{
       font-size: 1.8em;
       z-index: 1;
       opacity: 0;
-      transition: opacity 1s;
+      transform: translateY(100%);
+      transition: all 1s;
       &.active{
         opacity: 1;
+        transform: translateY(0);
       }
     }
   }

frontend/assets/css/style.min.css

@@ -1 +1 @@
-*{margin:0;padding:0;box-sizing:border-box;font-family:"Roboto-Regular"}main{position:relative;height:100vh}main #errorbar{position:absolute;top:0;width:100%;padding:0.4em;background-color:rgba(232,9,9,0.4);border:4px solid rgba(232,9,9,0.8);text-align:center;font-weight:bold;font-size:1.8em;z-index:1;transform:translateY(-100%);transition:transform 1s}main #errorbar.active{transform:translateY(0%)}main .canvas{background-color:lightgrey;position:relative;height:100%}main .canvas .background{position:absolute;top:0;left:0;background-color:rgba(0,0,0,0.5);width:100%;height:100%}main .canvas input{position:absolute;border:none;padding:0.6em 1em;width:200px;font-size:1.2em;text-align:center;transform:translateX(-50%) translateY(-50%)}main nav,main footer{display:flex;position:absolute;top:1em;left:1em;opacity:0.9}main nav button,main footer button{display:block;background-color:#939292;border:none;border-radius:1em;padding:1em 1em;min-width:8em;margin:0.4em;color:black;border:solid 2px #131313;box-shadow:2px 2px 8px rgba(0,0,0,0.5)}main nav button:focus,main footer button:focus{outline:none}main nav button::-moz-focus-inner,main footer button::-moz-focus-inner{border:0}main nav button:hover,main footer button:hover{background-color:#acacac;border-color:#000;cursor:pointer}main nav button.active,main footer button.active{background-color:#f08d19}main nav button h1,main footer button h1{text-align:center;font-size:1.4em;font-weight:normal;white-space:nowrap}main nav button img,main footer button img{display:block;margin:0 auto 0.5em auto;width:2em}main footer{top:auto;left:auto;bottom:1em;right:1em;left:1em;display:flex;justify-content:flex-end}main footer #infobar{position:absolute;bottom:0;left:0;width:50%;padding:0.4em;color:rgba(0,0,0,0.8);font-weight:bold;font-size:1.8em;z-index:1;opacity:0;transition:opacity 1s}main footer #infobar.active{opacity:1}
+*{margin:0;padding:0;box-sizing:border-box;font-family:"Roboto-Regular"}main{position:relative;height:100vh}main #errorbar{position:absolute;top:0;width:100%;padding:0.4em;background-color:rgba(232,9,9,0.4);border:4px solid rgba(232,9,9,0.8);text-align:center;font-weight:bold;font-size:1.8em;z-index:1;transform:translateY(-100%);transition:transform 1s}main #errorbar.active{transform:translateY(0%)}main .canvas{background-color:lightgrey;position:relative;height:100%}main .canvas .background{position:absolute;top:0;left:0;background-color:rgba(0,0,0,0.5);width:100%;height:100%}main .canvas input{position:absolute;border:none;padding:0.6em 1em;width:200px;font-size:1.2em;text-align:center;transform:translateX(-50%) translateY(-50%)}main nav,main footer{display:flex;position:absolute;top:1em;left:1em;opacity:0.9}main nav button,main footer button{display:block;background-color:#939292;border:none;border-radius:1em;padding:1em 1em;min-width:8em;margin:0.4em;color:black;border:solid 2px #131313;box-shadow:2px 2px 8px rgba(0,0,0,0.5)}main nav button:focus,main footer button:focus{outline:none}main nav button::-moz-focus-inner,main footer button::-moz-focus-inner{border:0}main nav button:hover,main footer button:hover{background-color:#acacac;border-color:#000;cursor:pointer}main nav button.active,main footer button.active{background-color:#f08d19}main nav button h1,main footer button h1{text-align:center;font-size:1.4em;font-weight:normal;white-space:nowrap}main nav button img,main footer button img{display:block;margin:0 auto 0.5em auto;width:2em}main footer{top:auto;left:auto;bottom:1em;right:1em;left:1em;display:flex;justify-content:flex-end;overflow:hidden}main footer #infobar{position:absolute;bottom:0;left:0;width:50%;padding:0.4em;color:rgba(0,0,0,0.8);font-weight:bold;font-size:1.8em;z-index:1;opacity:0;transform:translateY(100%);transition:all 1s}main footer #infobar.active{opacity:1;transform:translateY(0)}

frontend/assets/js/canvas.js

@@ -70,6 +70,8 @@ var graph_copy = {};
 
 var state = "idle";
 
+var info_timer = {};
+
 // selected nodes
 var selected = [];
 var path_elements = [];
@@ -122,7 +124,10 @@ function show_info(msg, elem="#errorbar") {
   let infobar = document.querySelector(elem);
   infobar.innerHTML = msg;
   infobar.classList.add("active");
-  window.setTimeout(function() {
+  if (info_timer[elem]){
+    clearTimeout(info_timer[elem]);
+  }
+  info_timer[elem] = window.setTimeout(function() {
     infobar.classList.remove("active");
   }, 4000);
 }
@@ -260,12 +265,14 @@ function draw_path(path) {
   reset_edge_style();
   for (let id in path_elements) {
     path_elements[id].children[0].strokeWidth(node_layout.strokeWidth + 1);
-    path_elements[id].children[0].stroke("rgb(240, 141, 25)");
+    path_elements[id].children[0].stroke("rgb(240, 44, 25)");
   }
   node_layer.draw();
   edge_layer.draw();
 }
 
+//-----------------------------------------------------------------------------
+
 function on_node_click(e) {
   e.cancelBubble = true;
   // let mousePos = stage.getPointerPosition();
@@ -412,7 +419,6 @@ function save_graph() {
       if (res["error"]) {
         show_info(res["error"]);
       } else {
-        console.log(res);
         show_info(res["info"], "#infobar");
       }
     })
@@ -425,7 +431,7 @@ function clear_graph() {
       if (res["error"]) {
         show_info(res["error"]);
       } else {
-        location.reload();
+        window.location.reload(false);
       }
     })
     .catch(error => console.error('Error:', error));

install.sh

@@ -8,23 +8,30 @@ cd "$(dirname "$0")"
 version=$($PYTHON3_PATH -V 2>&1 | grep -Po '(?<=Python )(.+)')
 if [[ -z "$version" ]]
 then
-    echo "Given PYTHON3_PATH is no Python3! Please edit paths.config" 
+    echo "Given PYTHON3_PATH is no Python3! Please edit paths.config"
     exit 1
 fi
 
 parsedVersion=$(echo "${version//./}")
 if [[ "$parsedVersion" -lt "330" ]]
-then 
-    echo "Python version must be >=3.3" 
+then
+    echo "Python version must be >=3.3"
     exit 1
 fi
 
 echo "Creating virtual enviroment"
 python3 -m venv venv
-echo "Installing created virtual enviroment"
+if [[ $? -eq 0 ]]; then
+  echo "Successfully created virtual enviroment"
+else
+  exit 1
+fi
 
 echo "Installing dependencies"
 venv/bin/pip install flask
-
-echo "Successfully installed webserver"
-echo "Start webserver with \"venv/bin/python main.py\""
+if [[ $? -eq 0 ]]; then
+  echo "Successfully installed webserver"
+  echo "Start webserver with \"venv/bin/python main.py\""
+else
+  exit 1
+fi

main.py

@@ -1,4 +1,6 @@
-import json, os
+import json
+import os
+import math
 from flask import Flask, jsonify, request, render_template, escape
 
 app = Flask(__name__)
@@ -102,6 +104,8 @@ def create_edge():
     weight = request.json['weight']
     try:
         weight = float(weight)
+        if math.isnan(weight) or math.isinf(weight):
+            raise ValueError()
     except ValueError:
         return error("Weight must be a number."), 400
     if weight < 0:
@@ -127,7 +131,7 @@ def save():
     try:
         with open(PATH, 'w') as f:
             json.dump(graph, f)
-            return jsonify({"info":"Saved graph",**graph}), 200
+            return jsonify({"info":"Saved serverside graph",**graph}), 200
     except Exception:
         return error("Internal Server Error"), 500
 
@@ -136,7 +140,7 @@ def save():
 def clear():
     global graph
     graph = {}
-    return "", 204
+    return jsonify({"info":"Graph cleared"}), 200
 
 
 @app.route("/")