FEATURE displaying data tree
diff --git a/backend/connections.py b/backend/connections.py
index 6c32a7d..596d1a5 100644
--- a/backend/connections.py
+++ b/backend/connections.py
@@ -15,6 +15,7 @@
from .inventory import INVENTORY
from .devices import devices_get
from .error import NetopeerException
+from .data import *
sessions = {}
@@ -85,6 +86,8 @@
if not 'key' in req:
return(json.dumps({'success': False, 'error-msg': 'Missing session key.'}))
+ if not 'recursive' in req:
+ return(json.dumps({'success': False, 'error-msg': 'Missing recursive flag.'}))
if not user.username in sessions:
sessions[user.username] = {}
@@ -102,7 +105,10 @@
reply['error'].append(json.loads(str(err)))
return(json.dumps(reply))
- return(json.dumps({'success': True, 'data': json.loads(data.print_mem(ly.LYD_JSON, ly.LYP_WITHSIBLINGS))}))
+ if not 'path' in req:
+ return(dataInfoRoots(data, True if req['recursive'] == 'true' else False))
+ else:
+ return(dataInfoSubtree(data, req['path'], True if req['recursive'] == 'true' else False))
@auth.required()
diff --git a/backend/data.py b/backend/data.py
new file mode 100644
index 0000000..ba866ca
--- /dev/null
+++ b/backend/data.py
@@ -0,0 +1,78 @@
+"""
+NETCONF data helper functions
+File: data.py
+Author: Radek Krejci <rkrejci@cesnet.cz>
+"""
+
+import json
+import os
+
+import libyang as ly
+import netconf2 as nc
+
+def dataInfoNode(node, recursion=False):
+ schema = node.schema()
+ casted = node.subtype()
+
+ if node.dflt():
+ return None
+
+ info = {}
+ info["type"] = schema.nodetype()
+ info["module"] = schema.module().name()
+ info["name"] = schema.name()
+ info["dsc"] = schema.dsc()
+ info["config"] = True if schema.flags() & ly.LYS_CONFIG_W else False
+
+ result = {}
+ if info["type"] == ly.LYS_LEAF or info["type"] == ly.LYS_LEAFLIST:
+ result["value"] = casted.value_str()
+ elif recursion:
+ result["children"] = []
+ if node.child():
+ for child in node.child().tree_for():
+ childNode = dataInfoNode(child, True)
+ if not childNode:
+ continue
+ if not child.next():
+ childNode["last"] = True
+ result["children"].append(childNode)
+ result["info"] = info
+ result["path"] = node.path()
+
+ return result
+
+def dataInfoSubtree(data, path, recursion=False):
+ try:
+ node = data.find_path(path).data()[0]
+ except:
+ return(json.dumps({'success': False, 'error-msg': 'Invalid data path.'}))
+
+ result = dataInfoNode(node)
+ if not result:
+ return(json.dumps({'success': False, 'error-msg': 'Path refers to a default node.'}))
+
+ result["children"] = []
+ if node.child():
+ for child in node.child().tree_for():
+ childNode = dataInfoNode(child, recursion)
+ if not childNode:
+ continue
+ if not child.next():
+ childNode["last"] = True
+ result["children"].append(childNode)
+
+ return(json.dumps({'success': True, 'data': result}))
+
+
+def dataInfoRoots(data, recursion=False):
+ result = []
+ for root in data.tree_for():
+ rootNode = dataInfoNode(root, recursion)
+ if not rootNode:
+ continue
+ if not root.next():
+ rootNode["last"] = True
+ result.append(rootNode)
+
+ return(json.dumps({'success': True, 'data': result}))
\ No newline at end of file
diff --git a/config.json b/config.json
index 3737762..56f7407 100644
--- a/config.json
+++ b/config.json
@@ -1,8 +1,10 @@
{
"module": {
- "file": "netopeer.module.ts",
+ "name" : "netopeer",
+ "file" : "netopeer.module.ts",
"class" : "NetopeerModule",
"frontend" : "frontend",
- "backend" : "backend"
+ "backend" : "backend",
+ "assets" : "frontend-assets"
}
}
diff --git a/frontend-assets/icons/add.svg b/frontend-assets/icons/add.svg
new file mode 100644
index 0000000..1675388
--- /dev/null
+++ b/frontend-assets/icons/add.svg
@@ -0,0 +1,69 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ version="1.1"
+ id="svg2"
+ inkscape:version="0.91+devel r14491"
+ width="32"
+ height="32"
+ viewBox="0 0 32 32"
+ sodipodi:docname="add.svg">
+ <metadata
+ id="metadata8">
+ <rdf:RDF>
+ <cc:Work
+ rdf:about="">
+ <dc:format>image/svg+xml</dc:format>
+ <dc:type
+ rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+ <dc:title></dc:title>
+ </cc:Work>
+ </rdf:RDF>
+ </metadata>
+ <defs
+ id="defs6" />
+ <sodipodi:namedview
+ pagecolor="#ffffff"
+ bordercolor="#666666"
+ borderopacity="1"
+ objecttolerance="10"
+ gridtolerance="10"
+ guidetolerance="10"
+ inkscape:pageopacity="0"
+ inkscape:pageshadow="2"
+ inkscape:window-width="1764"
+ inkscape:window-height="1171"
+ inkscape:document-units="px"
+ id="namedview4"
+ showgrid="false"
+ width="32"
+ inkscape:zoom="10.429825"
+ inkscape:cx="0.096465403"
+ inkscape:cy="2.0739103"
+ inkscape:window-x="1920"
+ inkscape:window-y="0"
+ inkscape:window-maximized="1"
+ inkscape:current-layer="svg2">
+ <inkscape:grid
+ type="xygrid"
+ id="grid29" />
+ </sodipodi:namedview>
+ <path
+ style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:4.57085705;stroke-linecap:round;stroke-opacity:1"
+ d="m 7.3319965,15.973932 17.1964165,1e-6"
+ id="path2991"
+ inkscape:connector-curvature="0" />
+ <path
+ style="fill:#a65400;fill-opacity:1;stroke:#000000;stroke-width:4.57085705;stroke-linecap:round;stroke-opacity:1"
+ d="m 15.930205,7.3757241 0,17.1964169"
+ id="path2993"
+ inkscape:connector-curvature="0" />
+</svg>
diff --git a/frontend-assets/icons/add_active.svg b/frontend-assets/icons/add_active.svg
new file mode 100644
index 0000000..a2f485f
--- /dev/null
+++ b/frontend-assets/icons/add_active.svg
@@ -0,0 +1,69 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ version="1.1"
+ id="svg2"
+ inkscape:version="0.91+devel r14491"
+ width="32"
+ height="32"
+ viewBox="0 0 32 32"
+ sodipodi:docname="add_active.svg">
+ <metadata
+ id="metadata8">
+ <rdf:RDF>
+ <cc:Work
+ rdf:about="">
+ <dc:format>image/svg+xml</dc:format>
+ <dc:type
+ rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+ <dc:title></dc:title>
+ </cc:Work>
+ </rdf:RDF>
+ </metadata>
+ <defs
+ id="defs6" />
+ <sodipodi:namedview
+ pagecolor="#ffffff"
+ bordercolor="#666666"
+ borderopacity="1"
+ objecttolerance="10"
+ gridtolerance="10"
+ guidetolerance="10"
+ inkscape:pageopacity="0"
+ inkscape:pageshadow="2"
+ inkscape:window-width="1764"
+ inkscape:window-height="1171"
+ inkscape:document-units="px"
+ id="namedview4"
+ showgrid="false"
+ width="32"
+ inkscape:zoom="10.429825"
+ inkscape:cx="0.096465403"
+ inkscape:cy="2.0739103"
+ inkscape:window-x="1920"
+ inkscape:window-y="0"
+ inkscape:window-maximized="1"
+ inkscape:current-layer="svg2">
+ <inkscape:grid
+ type="xygrid"
+ id="grid29" />
+ </sodipodi:namedview>
+ <path
+ style="fill:none;fill-opacity:1;stroke:#00a654;stroke-width:4.57085705;stroke-linecap:round;stroke-opacity:1"
+ d="m 7.3319965,15.973932 17.1964165,1e-6"
+ id="path2991"
+ inkscape:connector-curvature="0" />
+ <path
+ style="fill:#a65400;fill-opacity:1;stroke:#00a654;stroke-width:4.57085705;stroke-linecap:round;stroke-opacity:1"
+ d="m 15.930205,7.3757241 0,17.1964169"
+ id="path2993"
+ inkscape:connector-curvature="0" />
+</svg>
diff --git a/frontend-assets/icons/close.svg b/frontend-assets/icons/close.svg
new file mode 100644
index 0000000..74514c3
--- /dev/null
+++ b/frontend-assets/icons/close.svg
@@ -0,0 +1,69 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ version="1.1"
+ id="svg2"
+ inkscape:version="0.91+devel r14491"
+ width="32"
+ height="32"
+ viewBox="0 0 32 32"
+ sodipodi:docname="close.svg">
+ <metadata
+ id="metadata8">
+ <rdf:RDF>
+ <cc:Work
+ rdf:about="">
+ <dc:format>image/svg+xml</dc:format>
+ <dc:type
+ rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+ <dc:title></dc:title>
+ </cc:Work>
+ </rdf:RDF>
+ </metadata>
+ <defs
+ id="defs6" />
+ <sodipodi:namedview
+ pagecolor="#ffffff"
+ bordercolor="#666666"
+ borderopacity="1"
+ objecttolerance="10"
+ gridtolerance="10"
+ guidetolerance="10"
+ inkscape:pageopacity="0"
+ inkscape:pageshadow="2"
+ inkscape:window-width="1764"
+ inkscape:window-height="1171"
+ inkscape:document-units="px"
+ id="namedview4"
+ showgrid="false"
+ width="32"
+ inkscape:zoom="10.429825"
+ inkscape:cx="0.096465403"
+ inkscape:cy="2.0739103"
+ inkscape:window-x="1920"
+ inkscape:window-y="0"
+ inkscape:window-maximized="1"
+ inkscape:current-layer="svg2">
+ <inkscape:grid
+ type="xygrid"
+ id="grid29" />
+ </sodipodi:namedview>
+ <path
+ style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:4.57085705;stroke-linecap:round;stroke-opacity:1"
+ d="M 9.8503536,9.8940808 22.010056,22.053784"
+ id="path2991"
+ inkscape:connector-curvature="0" />
+ <path
+ style="fill:#a65400;fill-opacity:1;stroke:#000000;stroke-width:4.57085705;stroke-linecap:round;stroke-opacity:1"
+ d="M 22.010056,9.8940808 9.8503536,22.053784"
+ id="path2993"
+ inkscape:connector-curvature="0" />
+</svg>
diff --git a/frontend-assets/icons/close_active.svg b/frontend-assets/icons/close_active.svg
new file mode 100644
index 0000000..ffe8618
--- /dev/null
+++ b/frontend-assets/icons/close_active.svg
@@ -0,0 +1,69 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ version="1.1"
+ id="svg2"
+ inkscape:version="0.91+devel r14491"
+ width="32"
+ height="32"
+ viewBox="0 0 32 32"
+ sodipodi:docname="close_active.svg">
+ <metadata
+ id="metadata8">
+ <rdf:RDF>
+ <cc:Work
+ rdf:about="">
+ <dc:format>image/svg+xml</dc:format>
+ <dc:type
+ rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+ <dc:title></dc:title>
+ </cc:Work>
+ </rdf:RDF>
+ </metadata>
+ <defs
+ id="defs6" />
+ <sodipodi:namedview
+ pagecolor="#ffffff"
+ bordercolor="#666666"
+ borderopacity="1"
+ objecttolerance="10"
+ gridtolerance="10"
+ guidetolerance="10"
+ inkscape:pageopacity="0"
+ inkscape:pageshadow="2"
+ inkscape:window-width="1764"
+ inkscape:window-height="1171"
+ inkscape:document-units="px"
+ id="namedview4"
+ showgrid="false"
+ width="32"
+ inkscape:zoom="10.429825"
+ inkscape:cx="0.096465403"
+ inkscape:cy="2.0739103"
+ inkscape:window-x="1920"
+ inkscape:window-y="0"
+ inkscape:window-maximized="1"
+ inkscape:current-layer="svg2">
+ <inkscape:grid
+ type="xygrid"
+ id="grid29" />
+ </sodipodi:namedview>
+ <path
+ style="fill:none;fill-opacity:1;stroke:#c80000;stroke-width:4.57085705;stroke-linecap:round;stroke-opacity:1"
+ d="M 9.8503536,9.8940808 22.010056,22.053784"
+ id="path2991"
+ inkscape:connector-curvature="0" />
+ <path
+ style="fill:#a65400;fill-opacity:1;stroke:#c80000;stroke-width:4.57085705;stroke-linecap:round;stroke-opacity:1"
+ d="M 22.010056,9.8940808 9.8503536,22.053784"
+ id="path2993"
+ inkscape:connector-curvature="0" />
+</svg>
diff --git a/frontend-assets/icons/collapse.svg b/frontend-assets/icons/collapse.svg
new file mode 100644
index 0000000..9a0066f
--- /dev/null
+++ b/frontend-assets/icons/collapse.svg
@@ -0,0 +1,92 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ version="1.1"
+ id="svg2"
+ inkscape:version="0.91+devel r14491"
+ width="32"
+ height="32"
+ viewBox="0 0 32 32"
+ sodipodi:docname="collapse.svg">
+ <metadata
+ id="metadata8">
+ <rdf:RDF>
+ <cc:Work
+ rdf:about="">
+ <dc:format>image/svg+xml</dc:format>
+ <dc:type
+ rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+ <dc:title></dc:title>
+ </cc:Work>
+ </rdf:RDF>
+ </metadata>
+ <defs
+ id="defs6" />
+ <sodipodi:namedview
+ pagecolor="#ffffff"
+ bordercolor="#666666"
+ borderopacity="1"
+ objecttolerance="10"
+ gridtolerance="10"
+ guidetolerance="10"
+ inkscape:pageopacity="0"
+ inkscape:pageshadow="2"
+ inkscape:window-width="1764"
+ inkscape:window-height="1171"
+ inkscape:document-units="px"
+ id="namedview4"
+ showgrid="true"
+ width="32"
+ inkscape:zoom="14.75"
+ inkscape:cx="15.701475"
+ inkscape:cy="26.322461"
+ inkscape:window-x="1920"
+ inkscape:window-y="0"
+ inkscape:window-maximized="1"
+ inkscape:current-layer="svg2">
+ <inkscape:grid
+ type="xygrid"
+ id="grid29" />
+ </sodipodi:namedview>
+ <path
+ style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+ d="M 4.5,8.7265625 V 27 l 1,-0.5 V 8.7265625 Z"
+ id="path31"
+ inkscape:connector-curvature="0"
+ sodipodi:nodetypes="ccccc" />
+ <path
+ style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1"
+ d="M 5,12 V 27"
+ id="path33"
+ inkscape:connector-curvature="0"
+ sodipodi:nodetypes="cc" />
+ <g
+ id="g110-6"
+ transform="matrix(0.55555556,0,0,0.55555556,-5.2441368,-0.56587432)">
+ <path
+ sodipodi:nodetypes="ccccc"
+ inkscape:connector-curvature="0"
+ id="path99-7"
+ d="m 19,14 4,-2 V 7 l -4,2 z"
+ style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:0.01;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+ <path
+ sodipodi:nodetypes="ccccc"
+ inkscape:connector-curvature="0"
+ id="path103-5"
+ d="M 18,14 V 9 L 14,7 v 5 z"
+ style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:0.01;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+ <path
+ inkscape:connector-curvature="0"
+ id="path105-3"
+ d="m 14.514613,6 4,2 4,-2 -4,-2 z"
+ style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:0.01;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+ </g>
+</svg>
diff --git a/frontend-assets/icons/collapse_active.svg b/frontend-assets/icons/collapse_active.svg
new file mode 100644
index 0000000..01c1c9c
--- /dev/null
+++ b/frontend-assets/icons/collapse_active.svg
@@ -0,0 +1,92 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ version="1.1"
+ id="svg2"
+ inkscape:version="0.91+devel r14491"
+ width="32"
+ height="32"
+ viewBox="0 0 32 32"
+ sodipodi:docname="collapse_active.svg">
+ <metadata
+ id="metadata8">
+ <rdf:RDF>
+ <cc:Work
+ rdf:about="">
+ <dc:format>image/svg+xml</dc:format>
+ <dc:type
+ rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+ <dc:title></dc:title>
+ </cc:Work>
+ </rdf:RDF>
+ </metadata>
+ <defs
+ id="defs6" />
+ <sodipodi:namedview
+ pagecolor="#ffffff"
+ bordercolor="#666666"
+ borderopacity="1"
+ objecttolerance="10"
+ gridtolerance="10"
+ guidetolerance="10"
+ inkscape:pageopacity="0"
+ inkscape:pageshadow="2"
+ inkscape:window-width="1920"
+ inkscape:window-height="1131"
+ inkscape:document-units="px"
+ id="namedview4"
+ showgrid="true"
+ width="32"
+ inkscape:zoom="10.429825"
+ inkscape:cx="-19.888321"
+ inkscape:cy="11.767916"
+ inkscape:window-x="0"
+ inkscape:window-y="0"
+ inkscape:window-maximized="1"
+ inkscape:current-layer="svg2">
+ <inkscape:grid
+ type="xygrid"
+ id="grid29" />
+ </sodipodi:namedview>
+ <path
+ style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+ d="M 4.5,8.7265625 V 27 l 1,-0.5 V 8.7265625 Z"
+ id="path31"
+ inkscape:connector-curvature="0"
+ sodipodi:nodetypes="ccccc" />
+ <path
+ style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1"
+ d="M 5,12 V 27"
+ id="path33"
+ inkscape:connector-curvature="0"
+ sodipodi:nodetypes="cc" />
+ <g
+ id="g124"
+ transform="matrix(1.2,0,0,1.2,-1.0064532,-0.88696403)">
+ <path
+ sodipodi:nodetypes="ccccc"
+ inkscape:connector-curvature="0"
+ id="path99-7"
+ d="M 5.3114188,7.2119035 7.5336411,6.1007924 V 3.3230146 L 5.3114188,4.4341257 Z"
+ style="fill:#ffb400;fill-opacity:1;fill-rule:evenodd;stroke:#ffb400;stroke-width:0.00005556;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+ <path
+ sodipodi:nodetypes="ccccc"
+ inkscape:connector-curvature="0"
+ id="path103-5"
+ d="M 4.7558633,7.2119035 V 4.4341257 L 2.533641,3.3230146 v 2.7777778 z"
+ style="fill:#ffb400;fill-opacity:1;fill-rule:evenodd;stroke:#ffb400;stroke-width:0.00555556;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+ <path
+ inkscape:connector-curvature="0"
+ id="path105-3"
+ d="M 2.8195372,2.767459 5.0417594,3.8785702 7.2639816,2.767459 5.0417594,1.6563479 Z"
+ style="fill:#ffb400;fill-opacity:1;fill-rule:evenodd;stroke:#ffb400;stroke-width:0.00555556;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+ </g>
+</svg>
diff --git a/frontend-assets/icons/container.svg b/frontend-assets/icons/container.svg
new file mode 100644
index 0000000..07d678c
--- /dev/null
+++ b/frontend-assets/icons/container.svg
@@ -0,0 +1,80 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ version="1.1"
+ id="svg2"
+ inkscape:version="0.91+devel r14491"
+ width="32"
+ height="32"
+ viewBox="0 0 32 32"
+ sodipodi:docname="container.svg">
+ <metadata
+ id="metadata8">
+ <rdf:RDF>
+ <cc:Work
+ rdf:about="">
+ <dc:format>image/svg+xml</dc:format>
+ <dc:type
+ rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+ <dc:title></dc:title>
+ </cc:Work>
+ </rdf:RDF>
+ </metadata>
+ <defs
+ id="defs6" />
+ <sodipodi:namedview
+ pagecolor="#ffffff"
+ bordercolor="#666666"
+ borderopacity="1"
+ objecttolerance="10"
+ gridtolerance="10"
+ guidetolerance="10"
+ inkscape:pageopacity="0"
+ inkscape:pageshadow="2"
+ inkscape:window-width="1764"
+ inkscape:window-height="1171"
+ inkscape:document-units="px"
+ id="namedview4"
+ showgrid="false"
+ width="32"
+ inkscape:zoom="10.429825"
+ inkscape:cx="21.291731"
+ inkscape:cy="8.4274412"
+ inkscape:window-x="1920"
+ inkscape:window-y="0"
+ inkscape:window-maximized="1"
+ inkscape:current-layer="svg2">
+ <inkscape:grid
+ type="xygrid"
+ id="grid29" />
+ </sodipodi:namedview>
+ <g
+ id="g110-6"
+ transform="matrix(2.5279623,0,0,2.5279623,-30.450997,-6.7186552)">
+ <path
+ sodipodi:nodetypes="ccccc"
+ inkscape:connector-curvature="0"
+ id="path99-7"
+ d="m 19,14 4,-2 V 7 l -4,2 z"
+ style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:0.01;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+ <path
+ sodipodi:nodetypes="ccccc"
+ inkscape:connector-curvature="0"
+ id="path103-5"
+ d="M 18,14 V 9 L 14,7 v 5 z"
+ style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:0.01;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+ <path
+ inkscape:connector-curvature="0"
+ id="path105-3"
+ d="m 14.514613,6 4,2 4,-2 -4,-2 z"
+ style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:0.01;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+ </g>
+</svg>
diff --git a/frontend-assets/icons/info.svg b/frontend-assets/icons/info.svg
new file mode 100644
index 0000000..055c329
--- /dev/null
+++ b/frontend-assets/icons/info.svg
@@ -0,0 +1,77 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ version="1.1"
+ id="svg2"
+ inkscape:version="0.91+devel r14491"
+ width="32"
+ height="32"
+ viewBox="0 0 32 32"
+ sodipodi:docname="info.svg">
+ <metadata
+ id="metadata8">
+ <rdf:RDF>
+ <cc:Work
+ rdf:about="">
+ <dc:format>image/svg+xml</dc:format>
+ <dc:type
+ rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+ <dc:title></dc:title>
+ </cc:Work>
+ </rdf:RDF>
+ </metadata>
+ <defs
+ id="defs6" />
+ <sodipodi:namedview
+ pagecolor="#ffffff"
+ bordercolor="#666666"
+ borderopacity="1"
+ objecttolerance="10"
+ gridtolerance="10"
+ guidetolerance="10"
+ inkscape:pageopacity="0"
+ inkscape:pageshadow="2"
+ inkscape:window-width="1764"
+ inkscape:window-height="1171"
+ inkscape:document-units="px"
+ id="namedview4"
+ showgrid="true"
+ width="32"
+ inkscape:zoom="14.75"
+ inkscape:cx="14.722117"
+ inkscape:cy="13.579493"
+ inkscape:window-x="1920"
+ inkscape:window-y="0"
+ inkscape:window-maximized="1"
+ inkscape:current-layer="svg2">
+ <inkscape:grid
+ type="xygrid"
+ id="grid29" />
+ </sodipodi:namedview>
+ <ellipse
+ style="fill:#000000;fill-opacity:1;stroke-width:0.01;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none"
+ id="path197"
+ cy="16.042376"
+ cx="16.059322"
+ rx="13.059322"
+ ry="13.025427" />
+ <text
+ xml:space="preserve"
+ style="font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;font-size:20px;line-height:125%;font-family:'Latin Modern Roman Demi';-inkscape-font-specification:'Latin Modern Roman Demi Semi-Bold';letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ x="13.149323"
+ y="22.912376"
+ id="text201"
+ sodipodi:linespacing="125%"><tspan
+ sodipodi:role="line"
+ id="tspan199"
+ x="13.149323"
+ y="22.912376">i</tspan></text>
+</svg>
diff --git a/frontend-assets/icons/info_active.svg b/frontend-assets/icons/info_active.svg
new file mode 100644
index 0000000..73992c5
--- /dev/null
+++ b/frontend-assets/icons/info_active.svg
@@ -0,0 +1,77 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ version="1.1"
+ id="svg2"
+ inkscape:version="0.91+devel r14491"
+ width="32"
+ height="32"
+ viewBox="0 0 32 32"
+ sodipodi:docname="info_active.svg">
+ <metadata
+ id="metadata8">
+ <rdf:RDF>
+ <cc:Work
+ rdf:about="">
+ <dc:format>image/svg+xml</dc:format>
+ <dc:type
+ rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+ <dc:title></dc:title>
+ </cc:Work>
+ </rdf:RDF>
+ </metadata>
+ <defs
+ id="defs6" />
+ <sodipodi:namedview
+ pagecolor="#ffffff"
+ bordercolor="#666666"
+ borderopacity="1"
+ objecttolerance="10"
+ gridtolerance="10"
+ guidetolerance="10"
+ inkscape:pageopacity="0"
+ inkscape:pageshadow="2"
+ inkscape:window-width="1764"
+ inkscape:window-height="1171"
+ inkscape:document-units="px"
+ id="namedview4"
+ showgrid="true"
+ width="32"
+ inkscape:zoom="14.75"
+ inkscape:cx="14.722117"
+ inkscape:cy="13.579493"
+ inkscape:window-x="1920"
+ inkscape:window-y="0"
+ inkscape:window-maximized="1"
+ inkscape:current-layer="svg2">
+ <inkscape:grid
+ type="xygrid"
+ id="grid29" />
+ </sodipodi:namedview>
+ <ellipse
+ style="fill:#0054a6;fill-opacity:1;stroke-width:0.01;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none"
+ id="path197"
+ cy="16.042376"
+ cx="16.059322"
+ rx="13.059322"
+ ry="13.025427" />
+ <text
+ xml:space="preserve"
+ style="font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;font-size:20px;line-height:125%;font-family:'Latin Modern Roman Demi';-inkscape-font-specification:'Latin Modern Roman Demi Semi-Bold';letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ x="13.149323"
+ y="22.912376"
+ id="text201"
+ sodipodi:linespacing="125%"><tspan
+ sodipodi:role="line"
+ id="tspan199"
+ x="13.149323"
+ y="22.912376">i</tspan></text>
+</svg>
diff --git a/frontend-assets/icons/leaf.svg b/frontend-assets/icons/leaf.svg
new file mode 100644
index 0000000..4077cae
--- /dev/null
+++ b/frontend-assets/icons/leaf.svg
@@ -0,0 +1,65 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ version="1.1"
+ id="svg2"
+ inkscape:version="0.91+devel r14491"
+ width="32"
+ height="32"
+ viewBox="0 0 32 32"
+ sodipodi:docname="leaf.svg">
+ <metadata
+ id="metadata8">
+ <rdf:RDF>
+ <cc:Work
+ rdf:about="">
+ <dc:format>image/svg+xml</dc:format>
+ <dc:type
+ rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+ <dc:title></dc:title>
+ </cc:Work>
+ </rdf:RDF>
+ </metadata>
+ <defs
+ id="defs6" />
+ <sodipodi:namedview
+ pagecolor="#ffffff"
+ bordercolor="#666666"
+ borderopacity="1"
+ objecttolerance="10"
+ gridtolerance="10"
+ guidetolerance="10"
+ inkscape:pageopacity="0"
+ inkscape:pageshadow="2"
+ inkscape:window-width="1764"
+ inkscape:window-height="1171"
+ inkscape:document-units="px"
+ id="namedview4"
+ showgrid="false"
+ width="32"
+ inkscape:zoom="10.429825"
+ inkscape:cx="21.291731"
+ inkscape:cy="8.4274412"
+ inkscape:window-x="1920"
+ inkscape:window-y="0"
+ inkscape:window-maximized="1"
+ inkscape:current-layer="svg2">
+ <inkscape:grid
+ type="xygrid"
+ id="grid29" />
+ </sodipodi:namedview>
+ <path
+ style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:0.01697966;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+ d="M 7.1364998,26.743276 C 8.6016888,20.963913 10.729376,15.949998 17.882651,10.903229 10.540343,13.233635 8.2760938,17.642961 8.2760938,17.642961 2.7240748,8.0318159 17.692006,3.2566891 26.48314,7.5301562 26.605246,15.547998 20.114443,28.612861 12.463166,21.707935 c -1.530934,2.18212 -1.798413,3.476478 -2.345216,5.663685 z"
+ id="path82-3"
+ inkscape:connector-curvature="0"
+ sodipodi:nodetypes="ccccccc" />
+</svg>
diff --git a/frontend-assets/icons/leaflist.svg b/frontend-assets/icons/leaflist.svg
new file mode 100644
index 0000000..469c795
--- /dev/null
+++ b/frontend-assets/icons/leaflist.svg
@@ -0,0 +1,75 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ version="1.1"
+ id="svg2"
+ inkscape:version="0.91+devel r14491"
+ width="32"
+ height="32"
+ viewBox="0 0 32 32"
+ sodipodi:docname="leaflist.svg">
+ <metadata
+ id="metadata8">
+ <rdf:RDF>
+ <cc:Work
+ rdf:about="">
+ <dc:format>image/svg+xml</dc:format>
+ <dc:type
+ rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+ <dc:title></dc:title>
+ </cc:Work>
+ </rdf:RDF>
+ </metadata>
+ <defs
+ id="defs6" />
+ <sodipodi:namedview
+ pagecolor="#ffffff"
+ bordercolor="#666666"
+ borderopacity="1"
+ objecttolerance="10"
+ gridtolerance="10"
+ guidetolerance="10"
+ inkscape:pageopacity="0"
+ inkscape:pageshadow="2"
+ inkscape:window-width="1764"
+ inkscape:window-height="1171"
+ inkscape:document-units="px"
+ id="namedview4"
+ showgrid="false"
+ width="32"
+ inkscape:zoom="10.429825"
+ inkscape:cx="3.5852856"
+ inkscape:cy="18.397605"
+ inkscape:window-x="1920"
+ inkscape:window-y="0"
+ inkscape:window-maximized="1"
+ inkscape:current-layer="svg2">
+ <inkscape:grid
+ type="xygrid"
+ id="grid29" />
+ </sodipodi:namedview>
+ <g
+ id="g321"
+ transform="matrix(0.87723565,0,0,0.87723565,3.6055513,3.6675193)">
+ <path
+ sodipodi:nodetypes="ccccccc"
+ inkscape:connector-curvature="0"
+ id="path82-3-5"
+ d="M 13.824203,9.8131899 C 12.396744,8.1135289 10.574231,6.4395596 8.1964063,4.76196 11.868403,5.9274305 14.270302,7.6128695 15.754072,9.0066876 16.995426,8.4971039 18.04143,8.2948117 18.973034,8.153974 19.733964,0.84443103 7.2957293,-2.3540764 -0.40408302,1.388887 -0.50356084,7.9208958 3.7860165,17.802663 9.5164397,17.507246 9.0636018,14.416943 9.7412253,11.915797 13.824203,9.8131899 Z"
+ style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:0.01697966;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+ <path
+ sodipodi:nodetypes="ccccccc"
+ inkscape:connector-curvature="0"
+ id="path82-3"
+ d="M 10.012866,29.236127 C 11.478055,23.456764 13.605743,18.442849 20.759018,13.39608 13.41671,15.726486 11.15246,20.135812 11.15246,20.135812 5.6004414,10.524667 20.568373,5.7495401 29.359507,10.023007 c 0.122106,8.017842 -6.368697,21.082705 -14.019974,14.177779 -1.530934,2.18212 -1.798413,3.476478 -2.345216,5.663685 z"
+ style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:0.01697966;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+ </g>
+</svg>
diff --git a/frontend-assets/icons/reload.svg b/frontend-assets/icons/reload.svg
new file mode 100644
index 0000000..c571248
--- /dev/null
+++ b/frontend-assets/icons/reload.svg
@@ -0,0 +1,420 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ version="1.1"
+ id="svg2"
+ inkscape:version="0.91+devel r14491"
+ width="32"
+ height="32"
+ viewBox="0 0 32 32"
+ sodipodi:docname="reload.svg">
+ <metadata
+ id="metadata8">
+ <rdf:RDF>
+ <cc:Work
+ rdf:about="">
+ <dc:format>image/svg+xml</dc:format>
+ <dc:type
+ rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+ <dc:title></dc:title>
+ </cc:Work>
+ </rdf:RDF>
+ </metadata>
+ <defs
+ id="defs6">
+ <linearGradient
+ id="linearGradient4225"
+ inkscape:collect="always">
+ <stop
+ id="stop4227"
+ offset="0"
+ style="stop-color:#00ff00;stop-opacity:1;" />
+ <stop
+ id="stop4229"
+ offset="1"
+ style="stop-color:#00ff00;stop-opacity:0;" />
+ </linearGradient>
+ <linearGradient
+ id="imagebot_37">
+ <stop
+ id="imagebot_44"
+ offset="0"
+ stop-color="#ffffff" />
+ <stop
+ id="imagebot_43"
+ offset="1"
+ stop-opacity="0"
+ stop-color="#ffffff" />
+ </linearGradient>
+ <linearGradient
+ id="imagebot_21"
+ y2="21.876775"
+ x2="13.814828"
+ y1="10.965213"
+ x1="12.042996"
+ gradientTransform="scale(1.1419004,0.87573313)"
+ gradientUnits="userSpaceOnUse">
+ <stop
+ id="imagebot_42"
+ offset="0"
+ stop-color="#707070" />
+ <stop
+ style="stop-color:#4d4d4d;stop-opacity:1"
+ id="imagebot_41"
+ offset="0.33333"
+ stop-color="#5b86be" />
+ <stop
+ id="imagebot_40"
+ offset="1"
+ stop-opacity="0"
+ stop-color="#83a8d8" />
+ </linearGradient>
+ <linearGradient
+ id="imagebot_22"
+ y2="22.923376"
+ x2="8.8634028"
+ y1="18.385699"
+ x1="8.8058708"
+ gradientTransform="scale(1.1419004,0.87573313)"
+ gradientUnits="userSpaceOnUse">
+ <stop
+ style="stop-color:#4d4d4d;stop-opacity:1"
+ id="imagebot_39"
+ offset="0"
+ stop-color="#707070" />
+ <stop
+ id="imagebot_38"
+ offset="1"
+ stop-opacity="0"
+ stop-color="#707070" />
+ </linearGradient>
+ <linearGradient
+ id="imagebot_6"
+ y2="26.499712"
+ xlink:href="#imagebot_37"
+ x2="51.063529"
+ y1="26.499712"
+ x1="4.6650344"
+ gradientTransform="scale(1.0486647,0.95359363)"
+ gradientUnits="userSpaceOnUse" />
+ <linearGradient
+ id="imagebot_12"
+ y2="1.01508"
+ x2="0.83337"
+ y1="0.89452"
+ x1="0.86549">
+ <stop
+ id="imagebot_36"
+ offset="0"
+ stop-color="#707070" />
+ <stop
+ id="imagebot_35"
+ offset="1"
+ stop-color="#707070" />
+ </linearGradient>
+ <radialGradient
+ id="imagebot_24"
+ gradientUnits="userSpaceOnUse"
+ cy="36.421"
+ cx="24.837"
+ gradientTransform="matrix(1,0,0,0.53672,0,16.873)"
+ r="15.645">
+ <stop
+ id="imagebot_34"
+ offset="0"
+ stop-color="#707070" />
+ <stop
+ id="imagebot_33"
+ offset="1"
+ stop-opacity="0"
+ stop-color="#707070" />
+ </radialGradient>
+ <linearGradient
+ id="imagebot_18"
+ y2="0.37082"
+ x2="0.15148"
+ y1="0.69903"
+ x1="0.99444">
+ <stop
+ id="imagebot_32"
+ offset="0"
+ stop-color="#b9cfe7" />
+ <stop
+ id="imagebot_31"
+ offset="1"
+ stop-color="#729fcf" />
+ </linearGradient>
+ <linearGradient
+ id="imagebot_11"
+ y2="0.49999"
+ x2="0.83223"
+ y1="0.43678"
+ x1="0.20248">
+ <stop
+ id="imagebot_30"
+ offset="0"
+ stop-color="#729fcf" />
+ <stop
+ id="imagebot_29"
+ offset="1"
+ stop-color="#528ac5" />
+ </linearGradient>
+ <linearGradient
+ id="imagebot_16"
+ y2="27.96628"
+ x2="32.728516"
+ y1="36.263326"
+ x1="32.355118"
+ gradientTransform="scale(1.1430281,0.87486911)"
+ gradientUnits="userSpaceOnUse">
+ <stop
+ style="stop-color:#1a1a1a;stop-opacity:1"
+ id="imagebot_28"
+ offset="0"
+ stop-color="#3977c3" />
+ <stop
+ id="imagebot_27"
+ offset="1"
+ stop-opacity="0"
+ stop-color="#89aedc" />
+ </linearGradient>
+ <linearGradient
+ id="imagebot_15"
+ y2="27.96628"
+ x2="32.728516"
+ y1="35.376378"
+ x1="28.651658"
+ gradientTransform="scale(1.1430281,0.87486911)"
+ gradientUnits="userSpaceOnUse">
+ <stop
+ style="stop-color:#333333;stop-opacity:1"
+ id="imagebot_26"
+ offset="0"
+ stop-color="#c4d7eb" />
+ <stop
+ id="imagebot_25"
+ offset="1"
+ stop-opacity="0"
+ stop-color="#c4d7eb" />
+ </linearGradient>
+ <linearGradient
+ gradientUnits="userSpaceOnUse"
+ y2="30.563"
+ x2="20.062"
+ y1="30.563"
+ x1="7.0625"
+ id="linearGradient4231"
+ xlink:href="#linearGradient4225"
+ inkscape:collect="always" />
+ <linearGradient
+ inkscape:collect="always"
+ xlink:href="#imagebot_12"
+ id="linearGradient220"
+ x1="48.895984"
+ y1="44.737763"
+ x2="47.338499"
+ y2="50.583657"
+ gradientTransform="scale(0.96652103,1.0346386)"
+ gradientUnits="userSpaceOnUse" />
+ <linearGradient
+ inkscape:collect="always"
+ xlink:href="#imagebot_12"
+ id="linearGradient222"
+ x1="48.669812"
+ y1="44.233604"
+ x2="47.125967"
+ y2="50.028298"
+ gradientTransform="scale(0.97148753,1.0293493)"
+ gradientUnits="userSpaceOnUse" />
+ <linearGradient
+ inkscape:collect="always"
+ xlink:href="#imagebot_12"
+ id="linearGradient224"
+ x1="48.669812"
+ y1="44.233604"
+ x2="47.125967"
+ y2="50.028298"
+ gradientTransform="scale(0.97148753,1.0293493)"
+ gradientUnits="userSpaceOnUse" />
+ <linearGradient
+ inkscape:collect="always"
+ xlink:href="#imagebot_37"
+ id="linearGradient226"
+ x1="4.5632353"
+ y1="27.739821"
+ x2="52.450109"
+ y2="27.739821"
+ gradientTransform="scale(1.0266686,0.97402418)"
+ gradientUnits="userSpaceOnUse" />
+ </defs>
+ <sodipodi:namedview
+ pagecolor="#ffffff"
+ bordercolor="#666666"
+ borderopacity="1"
+ objecttolerance="10"
+ gridtolerance="10"
+ guidetolerance="10"
+ inkscape:pageopacity="0"
+ inkscape:pageshadow="2"
+ inkscape:window-width="1764"
+ inkscape:window-height="1171"
+ inkscape:document-units="px"
+ id="namedview4"
+ showgrid="false"
+ width="32"
+ inkscape:zoom="10.429825"
+ inkscape:cx="18.070421"
+ inkscape:cy="3.8319753"
+ inkscape:window-x="1920"
+ inkscape:window-y="0"
+ inkscape:window-maximized="1"
+ inkscape:current-layer="layer2">
+ <inkscape:grid
+ type="xygrid"
+ id="grid29" />
+ </sodipodi:namedview>
+ <g
+ inkscape:groupmode="layer"
+ id="layer1"
+ inkscape:label="Layer 1"
+ style="display:none"
+ sodipodi:insensitive="true">
+ <g
+ style="display:inline"
+ id="imagebot_2"
+ label="Layer 1"
+ transform="matrix(0.53168626,-0.21005051,0.21005051,0.53168626,-37.875177,1.6574228)">
+ <g
+ inkscape:export-ydpi="772.32001"
+ inkscape:export-xdpi="772.32001"
+ style="fill:#ff0000;stroke:#707070"
+ id="imagebot_17"
+ transform="matrix(-0.57905,-0.48923,-0.48923,0.57905,60.95052,28.909)"
+ label="Layer 1">
+ <path
+ inkscape:connector-curvature="0"
+ style="fill:#ff0000;stroke:url(#linearGradient220);stroke-width:1.31916833;stroke-miterlimit:4;stroke-dasharray:none"
+ id="imagebot_19"
+ d="M 44.307,50.23 C 62.821,35.819 49.665,13.412 22.462,12.498 l -0.348,-9.3465 -14.49,17.346 15.09,12.721 c 0,0 -0.252,-9.881 -0.252,-9.881 18.83,0.999 32.982,14.072 21.845,26.892 z" />
+ </g>
+ <path
+ inkscape:export-ydpi="772.32001"
+ inkscape:export-xdpi="772.32001"
+ transform="translate(4.03452,15.538)"
+ style="fill:url(#imagebot_15);stroke:url(#imagebot_16)"
+ inkscape:connector-curvature="0"
+ id="imagebot_14"
+ d="m 28.375,33.438 c 0,0 8.937,0.624 6.187,-9.876 h 7.776 c 0,1.503 -0.588,11.876 -13.963,9.876 z"
+ label="Layer 1" />
+ <g
+ inkscape:export-ydpi="772.32001"
+ inkscape:export-xdpi="772.32001"
+ style="display:block;fill:#00ff00;stroke:url(#linearGradient224);stroke-width:1.31920004"
+ id="imagebot_10"
+ transform="matrix(0.57905,0.48923,0.48923,-0.57905,-3.88648,46.074)"
+ display="block"
+ label="Layer 1">
+ <path
+ inkscape:connector-curvature="0"
+ style="fill:#00ff00;stroke:url(#linearGradient222);stroke-width:1.31920004"
+ id="imagebot_13"
+ d="M 44.307,50.23 C 62.821,35.819 49.665,13.412 22.462,12.498 L 22.399,3.069 7.794,20.424 22.462,33.006 v -9.668 c 18.83,0.999 32.982,14.072 21.845,26.892 z" />
+ </g>
+ <path
+ inkscape:export-ydpi="772.32001"
+ inkscape:export-xdpi="772.32001"
+ transform="translate(4.03452,15.538)"
+ inkscape:connector-curvature="0"
+ style="opacity:0.27221997;fill:url(#linearGradient4231)"
+ id="imagebot_9"
+ d="m 7.0625,38.188 0.0625,-14.876 12.937,-0.374 -4.388,5.178 3.867,2.374 c -3,2.25 -4.55,2.422 -5.55,4.984 l -2.817,-2.11 z"
+ label="Layer 1" />
+ <g
+ inkscape:export-ydpi="772.32001"
+ inkscape:export-xdpi="772.32001"
+ style="opacity:0.5;fill:#ff0000;stroke:#ffffff"
+ id="imagebot_4"
+ transform="matrix(-0.50854,-0.42965,-0.42965,0.50854,57.08352,28.903)"
+ label="Layer 1">
+ <path
+ inkscape:connector-curvature="0"
+ style="fill:#ff0000;stroke:url(#linearGradient226);stroke-width:1.50209999"
+ id="imagebot_5"
+ d="M 51.39,46.506 C 60.51,31.286 47.051,12.432 19.628,12.07 l -0.285,-8.0193 -13.002,15.328 13.468,11.386 -0.182,-9.454 c 18.245,0.382 34.784,10.926 31.763,25.195 z" />
+ </g>
+ <path
+ inkscape:export-ydpi="772.32001"
+ inkscape:export-xdpi="772.32001"
+ transform="matrix(-1.4897,0,0,-1.0013,61.209,75.282)"
+ style="opacity:0.38332998;fill:url(#imagebot_24);fill-rule:evenodd"
+ inkscape:connector-curvature="0"
+ id="imagebot_23"
+ d="m 40.482,36.421 a 15.645,8.3969 0 1 1 -31.29,0 15.645,8.3969 0 1 1 31.29,0 z"
+ label="Layer 1" />
+ <path
+ inkscape:export-ydpi="772.32001"
+ inkscape:export-xdpi="772.32001"
+ transform="translate(4.03452,15.538)"
+ style="fill:url(#imagebot_21);stroke:url(#imagebot_22)"
+ inkscape:connector-curvature="0"
+ id="imagebot_20"
+ d="m 20.153,10.41 c 0,0 -8.938,-0.6251 -6.188,9.875 H 6.2779 c 0,0 0.5,-11.875 13.875,-9.875 z"
+ label="Layer 1" />
+ <g
+ inkscape:export-ydpi="772.32001"
+ inkscape:export-xdpi="772.32001"
+ style="opacity:0.5;fill:#008000;stroke:#ffffff"
+ id="imagebot_7"
+ transform="matrix(0.50854,0.42965,0.42965,-0.50854,0.06132,46.079)"
+ label="Layer 1">
+ <path
+ inkscape:connector-curvature="0"
+ style="fill:#4d4d4d;fill-opacity:0;stroke:url(#imagebot_6);stroke-width:1.50209999"
+ id="imagebot_8"
+ d="M 51.09,45.944 C 60.21,30.724 46.632,12.201 19.485,11.949 l 0.028,-8.2457 -12.979,15.594 12.834,10.972 c 0,0 0.055,-9.007 0.055,-9.007 17.528,-0.224 35.195,10.103 31.667,24.682 z" />
+ </g>
+ <path
+ inkscape:export-ydpi="772.32001"
+ inkscape:export-xdpi="772.32001"
+ transform="translate(4.03452,15.538)"
+ style="opacity:0.27221997;fill:#ffffff"
+ inkscape:connector-curvature="0"
+ id="imagebot_3"
+ d="m 6.8125,16.5 c 3.5935,-10.441 16.444,-6.145 20.188,-4.5 4.175,0.211 5.675,-2.835 9,-3 -14.05,-9.79 -28.812,-6.5 -29.188,7.5 z"
+ label="Layer 1" />
+ <title
+ id="title3383">Layer 1</title>
+ </g>
+ </g>
+ <g
+ inkscape:groupmode="layer"
+ id="layer2"
+ inkscape:label="Layer 2">
+ <g
+ id="g264"
+ transform="translate(29.818333,1.5340622)"
+ style="fill:#000000;fill-opacity:1">
+ <path
+ sodipodi:nodetypes="ccccccccccc"
+ inkscape:connector-curvature="0"
+ id="path245"
+ d="M -9.1043636,5.4317128 C -20.071956,1.5799989 -28.140748,8.4097214 -23.851037,16.911708 c 0.165977,0.316076 0.262711,0.276139 0.176752,-0.06412 -1.589079,-5.636891 4.80164,-9.6564127 13.06879,-6.9647826 L -11.7666,13.05608 c -0.17051,0.448594 -0.0062,0.76274 0.459668,0.545923 l 6.7320004,-2.651057 c 0.318792,-0.139897 0.347196,-0.38647 0.224026,-0.779766 l -3.034243,-7.8041187 c -0.157643,-0.4035438 -0.386428,-0.4137624 -0.550099,-0.018088 z"
+ style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:0.01;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+ <path
+ sodipodi:nodetypes="ccccccccccc"
+ inkscape:connector-curvature="0"
+ id="path245-3"
+ d="m -17.77505,23.27118 c 10.9675944,3.851714 19.0363864,-2.978008 14.7466754,-11.479995 -0.165977,-0.316076 -0.262711,-0.276139 -0.176752,0.06412 1.589079,5.636891 -4.801641,9.656413 -13.0687924,6.964783 l 1.161105,-3.173275 c 0.17051,-0.448594 0.0062,-0.76274 -0.459668,-0.545923 l -6.732,2.651057 c -0.318791,0.139897 -0.347195,0.38647 -0.224026,0.779766 l 3.034244,7.804119 c 0.157643,0.403544 0.386428,0.413762 0.550099,0.01809 z"
+ style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:0.01;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+ </g>
+ </g>
+</svg>
diff --git a/frontend-assets/icons/reload_active.svg b/frontend-assets/icons/reload_active.svg
new file mode 100644
index 0000000..14e20be
--- /dev/null
+++ b/frontend-assets/icons/reload_active.svg
@@ -0,0 +1,419 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ version="1.1"
+ id="svg2"
+ inkscape:version="0.91+devel r14491"
+ width="32"
+ height="32"
+ viewBox="0 0 32 32"
+ sodipodi:docname="reload_active.svg">
+ <metadata
+ id="metadata8">
+ <rdf:RDF>
+ <cc:Work
+ rdf:about="">
+ <dc:format>image/svg+xml</dc:format>
+ <dc:type
+ rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+ <dc:title></dc:title>
+ </cc:Work>
+ </rdf:RDF>
+ </metadata>
+ <defs
+ id="defs6">
+ <linearGradient
+ id="linearGradient4225"
+ inkscape:collect="always">
+ <stop
+ id="stop4227"
+ offset="0"
+ style="stop-color:#00ff00;stop-opacity:1;" />
+ <stop
+ id="stop4229"
+ offset="1"
+ style="stop-color:#00ff00;stop-opacity:0;" />
+ </linearGradient>
+ <linearGradient
+ id="imagebot_37">
+ <stop
+ id="imagebot_44"
+ offset="0"
+ stop-color="#ffffff" />
+ <stop
+ id="imagebot_43"
+ offset="1"
+ stop-opacity="0"
+ stop-color="#ffffff" />
+ </linearGradient>
+ <linearGradient
+ id="imagebot_21"
+ y2="21.876775"
+ x2="13.814828"
+ y1="10.965213"
+ x1="12.042996"
+ gradientTransform="scale(1.1419004,0.87573313)"
+ gradientUnits="userSpaceOnUse">
+ <stop
+ id="imagebot_42"
+ offset="0"
+ stop-color="#707070" />
+ <stop
+ style="stop-color:#4d4d4d;stop-opacity:1"
+ id="imagebot_41"
+ offset="0.33333"
+ stop-color="#5b86be" />
+ <stop
+ id="imagebot_40"
+ offset="1"
+ stop-opacity="0"
+ stop-color="#83a8d8" />
+ </linearGradient>
+ <linearGradient
+ id="imagebot_22"
+ y2="22.923376"
+ x2="8.8634028"
+ y1="18.385699"
+ x1="8.8058708"
+ gradientTransform="scale(1.1419004,0.87573313)"
+ gradientUnits="userSpaceOnUse">
+ <stop
+ style="stop-color:#4d4d4d;stop-opacity:1"
+ id="imagebot_39"
+ offset="0"
+ stop-color="#707070" />
+ <stop
+ id="imagebot_38"
+ offset="1"
+ stop-opacity="0"
+ stop-color="#707070" />
+ </linearGradient>
+ <linearGradient
+ id="imagebot_6"
+ y2="26.499712"
+ xlink:href="#imagebot_37"
+ x2="51.063529"
+ y1="26.499712"
+ x1="4.6650344"
+ gradientTransform="scale(1.0486647,0.95359363)"
+ gradientUnits="userSpaceOnUse" />
+ <linearGradient
+ id="imagebot_12"
+ y2="1.01508"
+ x2="0.83337"
+ y1="0.89452"
+ x1="0.86549">
+ <stop
+ id="imagebot_36"
+ offset="0"
+ stop-color="#707070" />
+ <stop
+ id="imagebot_35"
+ offset="1"
+ stop-color="#707070" />
+ </linearGradient>
+ <radialGradient
+ id="imagebot_24"
+ gradientUnits="userSpaceOnUse"
+ cy="36.421"
+ cx="24.837"
+ gradientTransform="matrix(1,0,0,0.53672,0,16.873)"
+ r="15.645">
+ <stop
+ id="imagebot_34"
+ offset="0"
+ stop-color="#707070" />
+ <stop
+ id="imagebot_33"
+ offset="1"
+ stop-opacity="0"
+ stop-color="#707070" />
+ </radialGradient>
+ <linearGradient
+ id="imagebot_18"
+ y2="0.37082"
+ x2="0.15148"
+ y1="0.69903"
+ x1="0.99444">
+ <stop
+ id="imagebot_32"
+ offset="0"
+ stop-color="#b9cfe7" />
+ <stop
+ id="imagebot_31"
+ offset="1"
+ stop-color="#729fcf" />
+ </linearGradient>
+ <linearGradient
+ id="imagebot_11"
+ y2="0.49999"
+ x2="0.83223"
+ y1="0.43678"
+ x1="0.20248">
+ <stop
+ id="imagebot_30"
+ offset="0"
+ stop-color="#729fcf" />
+ <stop
+ id="imagebot_29"
+ offset="1"
+ stop-color="#528ac5" />
+ </linearGradient>
+ <linearGradient
+ id="imagebot_16"
+ y2="27.96628"
+ x2="32.728516"
+ y1="36.263326"
+ x1="32.355118"
+ gradientTransform="scale(1.1430281,0.87486911)"
+ gradientUnits="userSpaceOnUse">
+ <stop
+ style="stop-color:#1a1a1a;stop-opacity:1"
+ id="imagebot_28"
+ offset="0"
+ stop-color="#3977c3" />
+ <stop
+ id="imagebot_27"
+ offset="1"
+ stop-opacity="0"
+ stop-color="#89aedc" />
+ </linearGradient>
+ <linearGradient
+ id="imagebot_15"
+ y2="27.96628"
+ x2="32.728516"
+ y1="35.376378"
+ x1="28.651658"
+ gradientTransform="scale(1.1430281,0.87486911)"
+ gradientUnits="userSpaceOnUse">
+ <stop
+ style="stop-color:#333333;stop-opacity:1"
+ id="imagebot_26"
+ offset="0"
+ stop-color="#c4d7eb" />
+ <stop
+ id="imagebot_25"
+ offset="1"
+ stop-opacity="0"
+ stop-color="#c4d7eb" />
+ </linearGradient>
+ <linearGradient
+ gradientUnits="userSpaceOnUse"
+ y2="30.563"
+ x2="20.062"
+ y1="30.563"
+ x1="7.0625"
+ id="linearGradient4231"
+ xlink:href="#linearGradient4225"
+ inkscape:collect="always" />
+ <linearGradient
+ inkscape:collect="always"
+ xlink:href="#imagebot_12"
+ id="linearGradient220"
+ x1="48.895984"
+ y1="44.737763"
+ x2="47.338499"
+ y2="50.583657"
+ gradientTransform="scale(0.96652103,1.0346386)"
+ gradientUnits="userSpaceOnUse" />
+ <linearGradient
+ inkscape:collect="always"
+ xlink:href="#imagebot_12"
+ id="linearGradient222"
+ x1="48.669812"
+ y1="44.233604"
+ x2="47.125967"
+ y2="50.028298"
+ gradientTransform="scale(0.97148753,1.0293493)"
+ gradientUnits="userSpaceOnUse" />
+ <linearGradient
+ inkscape:collect="always"
+ xlink:href="#imagebot_12"
+ id="linearGradient224"
+ x1="48.669812"
+ y1="44.233604"
+ x2="47.125967"
+ y2="50.028298"
+ gradientTransform="scale(0.97148753,1.0293493)"
+ gradientUnits="userSpaceOnUse" />
+ <linearGradient
+ inkscape:collect="always"
+ xlink:href="#imagebot_37"
+ id="linearGradient226"
+ x1="4.5632353"
+ y1="27.739821"
+ x2="52.450109"
+ y2="27.739821"
+ gradientTransform="scale(1.0266686,0.97402418)"
+ gradientUnits="userSpaceOnUse" />
+ </defs>
+ <sodipodi:namedview
+ pagecolor="#ffffff"
+ bordercolor="#666666"
+ borderopacity="1"
+ objecttolerance="10"
+ gridtolerance="10"
+ guidetolerance="10"
+ inkscape:pageopacity="0"
+ inkscape:pageshadow="2"
+ inkscape:window-width="1764"
+ inkscape:window-height="1171"
+ inkscape:document-units="px"
+ id="namedview4"
+ showgrid="false"
+ width="32"
+ inkscape:zoom="10.429825"
+ inkscape:cx="18.070421"
+ inkscape:cy="3.8319753"
+ inkscape:window-x="1920"
+ inkscape:window-y="0"
+ inkscape:window-maximized="1"
+ inkscape:current-layer="svg2">
+ <inkscape:grid
+ type="xygrid"
+ id="grid29" />
+ </sodipodi:namedview>
+ <g
+ inkscape:groupmode="layer"
+ id="layer1"
+ inkscape:label="Layer 1"
+ style="display:none"
+ sodipodi:insensitive="true">
+ <g
+ style="display:inline"
+ id="imagebot_2"
+ label="Layer 1"
+ transform="matrix(0.53168626,-0.21005051,0.21005051,0.53168626,-37.875177,1.6574228)">
+ <g
+ inkscape:export-ydpi="772.32001"
+ inkscape:export-xdpi="772.32001"
+ style="fill:#ff0000;stroke:#707070"
+ id="imagebot_17"
+ transform="matrix(-0.57905,-0.48923,-0.48923,0.57905,60.95052,28.909)"
+ label="Layer 1">
+ <path
+ inkscape:connector-curvature="0"
+ style="fill:#ff0000;stroke:url(#linearGradient220);stroke-width:1.31916833;stroke-miterlimit:4;stroke-dasharray:none"
+ id="imagebot_19"
+ d="M 44.307,50.23 C 62.821,35.819 49.665,13.412 22.462,12.498 l -0.348,-9.3465 -14.49,17.346 15.09,12.721 c 0,0 -0.252,-9.881 -0.252,-9.881 18.83,0.999 32.982,14.072 21.845,26.892 z" />
+ </g>
+ <path
+ inkscape:export-ydpi="772.32001"
+ inkscape:export-xdpi="772.32001"
+ transform="translate(4.03452,15.538)"
+ style="fill:url(#imagebot_15);stroke:url(#imagebot_16)"
+ inkscape:connector-curvature="0"
+ id="imagebot_14"
+ d="m 28.375,33.438 c 0,0 8.937,0.624 6.187,-9.876 h 7.776 c 0,1.503 -0.588,11.876 -13.963,9.876 z"
+ label="Layer 1" />
+ <g
+ inkscape:export-ydpi="772.32001"
+ inkscape:export-xdpi="772.32001"
+ style="display:block;fill:#00ff00;stroke:url(#linearGradient224);stroke-width:1.31920004"
+ id="imagebot_10"
+ transform="matrix(0.57905,0.48923,0.48923,-0.57905,-3.88648,46.074)"
+ display="block"
+ label="Layer 1">
+ <path
+ inkscape:connector-curvature="0"
+ style="fill:#00ff00;stroke:url(#linearGradient222);stroke-width:1.31920004"
+ id="imagebot_13"
+ d="M 44.307,50.23 C 62.821,35.819 49.665,13.412 22.462,12.498 L 22.399,3.069 7.794,20.424 22.462,33.006 v -9.668 c 18.83,0.999 32.982,14.072 21.845,26.892 z" />
+ </g>
+ <path
+ inkscape:export-ydpi="772.32001"
+ inkscape:export-xdpi="772.32001"
+ transform="translate(4.03452,15.538)"
+ inkscape:connector-curvature="0"
+ style="opacity:0.27221997;fill:url(#linearGradient4231)"
+ id="imagebot_9"
+ d="m 7.0625,38.188 0.0625,-14.876 12.937,-0.374 -4.388,5.178 3.867,2.374 c -3,2.25 -4.55,2.422 -5.55,4.984 l -2.817,-2.11 z"
+ label="Layer 1" />
+ <g
+ inkscape:export-ydpi="772.32001"
+ inkscape:export-xdpi="772.32001"
+ style="opacity:0.5;fill:#ff0000;stroke:#ffffff"
+ id="imagebot_4"
+ transform="matrix(-0.50854,-0.42965,-0.42965,0.50854,57.08352,28.903)"
+ label="Layer 1">
+ <path
+ inkscape:connector-curvature="0"
+ style="fill:#ff0000;stroke:url(#linearGradient226);stroke-width:1.50209999"
+ id="imagebot_5"
+ d="M 51.39,46.506 C 60.51,31.286 47.051,12.432 19.628,12.07 l -0.285,-8.0193 -13.002,15.328 13.468,11.386 -0.182,-9.454 c 18.245,0.382 34.784,10.926 31.763,25.195 z" />
+ </g>
+ <path
+ inkscape:export-ydpi="772.32001"
+ inkscape:export-xdpi="772.32001"
+ transform="matrix(-1.4897,0,0,-1.0013,61.209,75.282)"
+ style="opacity:0.38332998;fill:url(#imagebot_24);fill-rule:evenodd"
+ inkscape:connector-curvature="0"
+ id="imagebot_23"
+ d="m 40.482,36.421 a 15.645,8.3969 0 1 1 -31.29,0 15.645,8.3969 0 1 1 31.29,0 z"
+ label="Layer 1" />
+ <path
+ inkscape:export-ydpi="772.32001"
+ inkscape:export-xdpi="772.32001"
+ transform="translate(4.03452,15.538)"
+ style="fill:url(#imagebot_21);stroke:url(#imagebot_22)"
+ inkscape:connector-curvature="0"
+ id="imagebot_20"
+ d="m 20.153,10.41 c 0,0 -8.938,-0.6251 -6.188,9.875 H 6.2779 c 0,0 0.5,-11.875 13.875,-9.875 z"
+ label="Layer 1" />
+ <g
+ inkscape:export-ydpi="772.32001"
+ inkscape:export-xdpi="772.32001"
+ style="opacity:0.5;fill:#008000;stroke:#ffffff"
+ id="imagebot_7"
+ transform="matrix(0.50854,0.42965,0.42965,-0.50854,0.06132,46.079)"
+ label="Layer 1">
+ <path
+ inkscape:connector-curvature="0"
+ style="fill:#4d4d4d;fill-opacity:0;stroke:url(#imagebot_6);stroke-width:1.50209999"
+ id="imagebot_8"
+ d="M 51.09,45.944 C 60.21,30.724 46.632,12.201 19.485,11.949 l 0.028,-8.2457 -12.979,15.594 12.834,10.972 c 0,0 0.055,-9.007 0.055,-9.007 17.528,-0.224 35.195,10.103 31.667,24.682 z" />
+ </g>
+ <path
+ inkscape:export-ydpi="772.32001"
+ inkscape:export-xdpi="772.32001"
+ transform="translate(4.03452,15.538)"
+ style="opacity:0.27221997;fill:#ffffff"
+ inkscape:connector-curvature="0"
+ id="imagebot_3"
+ d="m 6.8125,16.5 c 3.5935,-10.441 16.444,-6.145 20.188,-4.5 4.175,0.211 5.675,-2.835 9,-3 -14.05,-9.79 -28.812,-6.5 -29.188,7.5 z"
+ label="Layer 1" />
+ <title
+ id="title3383">Layer 1</title>
+ </g>
+ </g>
+ <g
+ inkscape:groupmode="layer"
+ id="layer2"
+ inkscape:label="Layer 2">
+ <g
+ id="g264"
+ transform="translate(29.818333,1.5340622)">
+ <path
+ sodipodi:nodetypes="ccccccccccc"
+ inkscape:connector-curvature="0"
+ id="path245"
+ d="M -9.1043636,5.4317128 C -20.071956,1.5799989 -28.140748,8.4097214 -23.851037,16.911708 c 0.165977,0.316076 0.262711,0.276139 0.176752,-0.06412 -1.589079,-5.636891 4.80164,-9.6564127 13.06879,-6.9647826 L -11.7666,13.05608 c -0.17051,0.448594 -0.0062,0.76274 0.459668,0.545923 l 6.7320004,-2.651057 c 0.318792,-0.139897 0.347196,-0.38647 0.224026,-0.779766 l -3.034243,-7.8041187 c -0.157643,-0.4035438 -0.386428,-0.4137624 -0.550099,-0.018088 z"
+ style="fill:#0054a6;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:0.01;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+ <path
+ sodipodi:nodetypes="ccccccccccc"
+ inkscape:connector-curvature="0"
+ id="path245-3"
+ d="m -17.77505,23.27118 c 10.9675944,3.851714 19.0363864,-2.978008 14.7466754,-11.479995 -0.165977,-0.316076 -0.262711,-0.276139 -0.176752,0.06412 1.589079,5.636891 -4.801641,9.656413 -13.0687924,6.964783 l 1.161105,-3.173275 c 0.17051,-0.448594 0.0062,-0.76274 -0.459668,-0.545923 l -6.732,2.651057 c -0.318791,0.139897 -0.347195,0.38647 -0.224026,0.779766 l 3.034244,7.804119 c 0.157643,0.403544 0.386428,0.413762 0.550099,0.01809 z"
+ style="fill:#0054a6;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:0.01;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+ </g>
+ </g>
+</svg>
diff --git a/frontend-assets/icons/show.svg b/frontend-assets/icons/show.svg
new file mode 100644
index 0000000..367bc94
--- /dev/null
+++ b/frontend-assets/icons/show.svg
@@ -0,0 +1,83 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ version="1.1"
+ id="svg2"
+ inkscape:version="0.91+devel r14491"
+ width="32"
+ height="32"
+ viewBox="0 0 32 32"
+ sodipodi:docname="show.svg">
+ <metadata
+ id="metadata8">
+ <rdf:RDF>
+ <cc:Work
+ rdf:about="">
+ <dc:format>image/svg+xml</dc:format>
+ <dc:type
+ rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+ <dc:title />
+ </cc:Work>
+ </rdf:RDF>
+ </metadata>
+ <defs
+ id="defs6" />
+ <sodipodi:namedview
+ pagecolor="#ffffff"
+ bordercolor="#666666"
+ borderopacity="1"
+ objecttolerance="10"
+ gridtolerance="10"
+ guidetolerance="10"
+ inkscape:pageopacity="0"
+ inkscape:pageshadow="2"
+ inkscape:window-width="1764"
+ inkscape:window-height="1171"
+ inkscape:document-units="px"
+ id="namedview4"
+ showgrid="false"
+ width="32"
+ inkscape:zoom="22.627417"
+ inkscape:cx="13.117851"
+ inkscape:cy="13.743637"
+ inkscape:window-x="1920"
+ inkscape:window-y="0"
+ inkscape:window-maximized="1"
+ inkscape:current-layer="svg2">
+ <inkscape:grid
+ type="xygrid"
+ id="grid29" />
+ </sodipodi:namedview>
+ <path
+ inkscape:connector-curvature="0"
+ d="m 0.39229996,15.370659 c 0,0 7.01437074,9.874507 15.66702204,9.874507 8.652652,0 15.667023,-9.874507 15.667023,-9.874507 0,0 -6.54505,-9.8138114 -15.822111,-9.8138114 -9.2770602,0 -15.51193404,9.8138114 -15.51193404,9.8138114 z"
+ id="path184-3"
+ style="fill:#000000;fill-opacity:1;stroke-width:0.01452594"
+ sodipodi:nodetypes="csczc" />
+ <path
+ inkscape:connector-curvature="0"
+ d="m 3.135374,15.375972 c 0,0 5.7862538,8.145621 12.923948,8.145621 7.137695,0 12.923949,-8.145621 12.923949,-8.145621 0,0 -5.399104,-8.0955511 -13.051883,-8.0955511 -7.652778,0 -12.796014,8.0955511 -12.796014,8.0955511 z"
+ id="path184-3-6"
+ style="fill:#ffffff;fill-opacity:1;stroke-width:0.01198266"
+ sodipodi:nodetypes="csczc" />
+ <path
+ style="fill:#000000;fill-opacity:1;stroke:#ffff00;stroke-width:0.00005556;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+ id="path377"
+ sodipodi:type="arc"
+ sodipodi:cx="16.05957"
+ sodipodi:cy="15.075125"
+ sodipodi:rx="6.1650872"
+ sodipodi:ry="6.1650872"
+ sodipodi:start="0"
+ sodipodi:end="6.0503933"
+ sodipodi:open="true"
+ d="M 22.224658,15.075125 A 6.1650872,6.1650872 0 0 1 16.418164,21.229774 6.1650872,6.1650872 0 0 1 9.9361984,15.791097 6.1650872,6.1650872 0 0 1 14.988643,9.0037644 6.1650872,6.1650872 0 0 1 22.058361,13.652869" />
+</svg>
diff --git a/frontend-assets/icons/show_active.svg b/frontend-assets/icons/show_active.svg
new file mode 100644
index 0000000..36d5eaa
--- /dev/null
+++ b/frontend-assets/icons/show_active.svg
@@ -0,0 +1,83 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ version="1.1"
+ id="svg2"
+ inkscape:version="0.91+devel r14491"
+ width="32"
+ height="32"
+ viewBox="0 0 32 32"
+ sodipodi:docname="show_active.svg">
+ <metadata
+ id="metadata8">
+ <rdf:RDF>
+ <cc:Work
+ rdf:about="">
+ <dc:format>image/svg+xml</dc:format>
+ <dc:type
+ rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+ <dc:title></dc:title>
+ </cc:Work>
+ </rdf:RDF>
+ </metadata>
+ <defs
+ id="defs6" />
+ <sodipodi:namedview
+ pagecolor="#ffffff"
+ bordercolor="#666666"
+ borderopacity="1"
+ objecttolerance="10"
+ gridtolerance="10"
+ guidetolerance="10"
+ inkscape:pageopacity="0"
+ inkscape:pageshadow="2"
+ inkscape:window-width="1764"
+ inkscape:window-height="1171"
+ inkscape:document-units="px"
+ id="namedview4"
+ showgrid="false"
+ width="32"
+ inkscape:zoom="22.627417"
+ inkscape:cx="13.117851"
+ inkscape:cy="13.743637"
+ inkscape:window-x="1920"
+ inkscape:window-y="0"
+ inkscape:window-maximized="1"
+ inkscape:current-layer="svg2">
+ <inkscape:grid
+ type="xygrid"
+ id="grid29" />
+ </sodipodi:namedview>
+ <path
+ inkscape:connector-curvature="0"
+ d="m 0.39229996,15.370659 c 0,0 7.01437074,9.874507 15.66702204,9.874507 8.652652,0 15.667023,-9.874507 15.667023,-9.874507 0,0 -6.54505,-9.8138114 -15.822111,-9.8138114 -9.2770602,0 -15.51193404,9.8138114 -15.51193404,9.8138114 z"
+ id="path184-3"
+ style="fill:#000000;fill-opacity:1;stroke-width:0.01452594"
+ sodipodi:nodetypes="csczc" />
+ <path
+ inkscape:connector-curvature="0"
+ d="m 3.135374,15.375972 c 0,0 5.7862538,8.145621 12.923948,8.145621 7.137695,0 12.923949,-8.145621 12.923949,-8.145621 0,0 -5.399104,-8.0955511 -13.051883,-8.0955511 -7.652778,0 -12.796014,8.0955511 -12.796014,8.0955511 z"
+ id="path184-3-6"
+ style="fill:#ffffff;fill-opacity:1;stroke-width:0.01198266"
+ sodipodi:nodetypes="csczc" />
+ <path
+ style="fill:#0054a6;fill-opacity:1;stroke:#ffff00;stroke-width:0.00005556;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+ id="path377"
+ sodipodi:type="arc"
+ sodipodi:cx="16.05957"
+ sodipodi:cy="15.075125"
+ sodipodi:rx="6.1650872"
+ sodipodi:ry="6.1650872"
+ sodipodi:start="0"
+ sodipodi:end="6.0503933"
+ sodipodi:open="true"
+ d="M 22.224658,15.075125 A 6.1650872,6.1650872 0 0 1 16.418164,21.229774 6.1650872,6.1650872 0 0 1 9.9361984,15.791097 6.1650872,6.1650872 0 0 1 14.988643,9.0037644 6.1650872,6.1650872 0 0 1 22.058361,13.652869" />
+</svg>
diff --git a/frontend-assets/icons/show_all.svg b/frontend-assets/icons/show_all.svg
new file mode 100644
index 0000000..f63d86b
--- /dev/null
+++ b/frontend-assets/icons/show_all.svg
@@ -0,0 +1,130 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ version="1.1"
+ id="svg2"
+ inkscape:version="0.91+devel r14491"
+ width="32"
+ height="32"
+ viewBox="0 0 32 32"
+ sodipodi:docname="show_all.svg">
+ <metadata
+ id="metadata8">
+ <rdf:RDF>
+ <cc:Work
+ rdf:about="">
+ <dc:format>image/svg+xml</dc:format>
+ <dc:type
+ rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+ <dc:title></dc:title>
+ </cc:Work>
+ </rdf:RDF>
+ </metadata>
+ <defs
+ id="defs6" />
+ <sodipodi:namedview
+ pagecolor="#ffffff"
+ bordercolor="#666666"
+ borderopacity="1"
+ objecttolerance="10"
+ gridtolerance="10"
+ guidetolerance="10"
+ inkscape:pageopacity="0"
+ inkscape:pageshadow="2"
+ inkscape:window-width="1764"
+ inkscape:window-height="1171"
+ inkscape:document-units="px"
+ id="namedview4"
+ showgrid="false"
+ width="32"
+ inkscape:zoom="10.429825"
+ inkscape:cx="21.291731"
+ inkscape:cy="8.4274412"
+ inkscape:window-x="1920"
+ inkscape:window-y="0"
+ inkscape:window-maximized="1"
+ inkscape:current-layer="svg2">
+ <inkscape:grid
+ type="xygrid"
+ id="grid29" />
+ </sodipodi:namedview>
+ <path
+ style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+ d="M 4.5,8.7265625 V 27 c 2.76e-5,0.276131 0.2238691,0.499972 0.5,0.5 h 5 c 0.676161,0.0096 0.676161,-1.009563 0,-1 H 5.5 V 8.7265625 Z"
+ id="path31"
+ inkscape:connector-curvature="0"
+ sodipodi:nodetypes="cccccccc" />
+ <path
+ style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1"
+ d="M 5.5130359,12 H 10"
+ id="path33"
+ inkscape:connector-curvature="0" />
+ <path
+ style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+ d="m 14.5,17 v 5 c 2.8e-5,0.276131 0.223869,0.499972 0.5,0.5 h 5 c 0.676161,0.0096 0.676161,-1.009563 0,-1 H 15.5 V 17 Z"
+ id="path35"
+ inkscape:connector-curvature="0"
+ sodipodi:nodetypes="cccccccc" />
+ <path
+ style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:0.00407575;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+ d="m 11.820891,30.003208 c 0.3517,-1.387262 0.862424,-2.590788 2.579476,-3.8022 -1.762427,0.559384 -2.305931,1.617786 -2.305931,1.617786 -1.332691,-2.307032 2.260169,-3.45324 4.370368,-2.427449 0.02931,1.92458 -1.528724,5.060633 -3.365315,3.403194 -0.367481,0.52379 -0.431686,0.834484 -0.562939,1.359495 z"
+ id="path82"
+ inkscape:connector-curvature="0"
+ sodipodi:nodetypes="ccccccc" />
+ <path
+ style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:0.00407575;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+ d="m 22.038725,25.214932 c 0.3517,-1.387262 0.862424,-2.590788 2.579476,-3.8022 -1.762427,0.559384 -2.305931,1.617786 -2.305931,1.617786 -1.332691,-2.307032 2.260169,-3.45324 4.370368,-2.427449 0.02931,1.92458 -1.528724,5.060633 -3.365315,3.403194 -0.367481,0.52379 -0.431686,0.834484 -0.562939,1.359495 z"
+ id="path82-3"
+ inkscape:connector-curvature="0"
+ sodipodi:nodetypes="ccccccc" />
+ <g
+ id="g110"
+ transform="matrix(0.55555556,0,0,0.55555556,4.749556,7.0456966)">
+ <path
+ sodipodi:nodetypes="ccccc"
+ inkscape:connector-curvature="0"
+ id="path99"
+ d="m 19,14 4,-2 V 7 l -4,2 z"
+ style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:0.01;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+ <path
+ sodipodi:nodetypes="ccccc"
+ inkscape:connector-curvature="0"
+ id="path103"
+ d="M 18,14 V 9 L 14,7 v 5 z"
+ style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:0.01;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+ <path
+ inkscape:connector-curvature="0"
+ id="path105"
+ d="m 14.514613,6 4,2 4,-2 -4,-2 z"
+ style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:0.01;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+ </g>
+ <g
+ id="g110-6"
+ transform="matrix(0.55555556,0,0,0.55555556,-5.2441368,-0.56587432)">
+ <path
+ sodipodi:nodetypes="ccccc"
+ inkscape:connector-curvature="0"
+ id="path99-7"
+ d="m 19,14 4,-2 V 7 l -4,2 z"
+ style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:0.01;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+ <path
+ sodipodi:nodetypes="ccccc"
+ inkscape:connector-curvature="0"
+ id="path103-5"
+ d="M 18,14 V 9 L 14,7 v 5 z"
+ style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:0.01;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+ <path
+ inkscape:connector-curvature="0"
+ id="path105-3"
+ d="m 14.514613,6 4,2 4,-2 -4,-2 z"
+ style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:0.01;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+ </g>
+</svg>
diff --git a/frontend-assets/icons/show_all_active.svg b/frontend-assets/icons/show_all_active.svg
new file mode 100644
index 0000000..71041a8
--- /dev/null
+++ b/frontend-assets/icons/show_all_active.svg
@@ -0,0 +1,132 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ version="1.1"
+ id="svg2"
+ inkscape:version="0.91+devel r14491"
+ width="32"
+ height="32"
+ viewBox="0 0 32 32"
+ sodipodi:docname="show_all_active.svg">
+ <metadata
+ id="metadata8">
+ <rdf:RDF>
+ <cc:Work
+ rdf:about="">
+ <dc:format>image/svg+xml</dc:format>
+ <dc:type
+ rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+ <dc:title></dc:title>
+ </cc:Work>
+ </rdf:RDF>
+ </metadata>
+ <defs
+ id="defs6" />
+ <sodipodi:namedview
+ pagecolor="#ffffff"
+ bordercolor="#666666"
+ borderopacity="1"
+ objecttolerance="10"
+ gridtolerance="10"
+ guidetolerance="10"
+ inkscape:pageopacity="0"
+ inkscape:pageshadow="2"
+ inkscape:window-width="1920"
+ inkscape:window-height="1131"
+ inkscape:document-units="px"
+ id="namedview4"
+ showgrid="false"
+ width="32"
+ inkscape:zoom="10.429825"
+ inkscape:cx="4.081471"
+ inkscape:cy="8.4274412"
+ inkscape:window-x="0"
+ inkscape:window-y="0"
+ inkscape:window-maximized="1"
+ inkscape:current-layer="svg2">
+ <inkscape:grid
+ type="xygrid"
+ id="grid29" />
+ </sodipodi:namedview>
+ <path
+ style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+ d="M 4.5,8.7265625 V 27 c 2.76e-5,0.276131 0.2238691,0.499972 0.5,0.5 h 5 c 0.676161,0.0096 0.676161,-1.009563 0,-1 H 5.5 V 8.7265625 Z"
+ id="path31"
+ inkscape:connector-curvature="0"
+ sodipodi:nodetypes="cccccccc" />
+ <path
+ style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1"
+ d="M 5.5130359,12 H 10"
+ id="path33"
+ inkscape:connector-curvature="0" />
+ <path
+ style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+ d="m 14.5,17 v 5 c 2.8e-5,0.276131 0.223869,0.499972 0.5,0.5 h 5 c 0.676161,0.0096 0.676161,-1.009563 0,-1 H 15.5 V 17 Z"
+ id="path35"
+ inkscape:connector-curvature="0"
+ sodipodi:nodetypes="cccccccc" />
+ <path
+ style="fill:#00b400;fill-opacity:1;fill-rule:evenodd;stroke:#00b400;stroke-width:0.0048909;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+ d="m 11.357989,30.487069 c 0.42204,-1.664714 1.034908,-3.108946 3.095371,-4.56264 -2.114913,0.671261 -2.767117,1.941343 -2.767117,1.941343 -1.59923,-2.768438 2.712202,-4.143888 5.244441,-2.912939 0.03517,2.309496 -1.834469,6.07276 -4.038378,4.083833 -0.440977,0.628548 -0.518023,1.001381 -0.675527,1.631394 z"
+ id="path82"
+ inkscape:connector-curvature="0"
+ sodipodi:nodetypes="ccccccc" />
+ <path
+ style="fill:#00b400;fill-opacity:1;fill-rule:evenodd;stroke:#00b400;stroke-width:0.0048909;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+ d="m 21.575823,25.698793 c 0.42204,-1.664714 1.034908,-3.108946 3.095371,-4.56264 -2.114913,0.671261 -2.767117,1.941343 -2.767117,1.941343 -1.59923,-2.768438 2.712202,-4.143888 5.244441,-2.912939 0.03517,2.309496 -1.834469,6.07276 -4.038378,4.083833 -0.440977,0.628548 -0.518023,1.001381 -0.675527,1.631394 z"
+ id="path82-3"
+ inkscape:connector-curvature="0"
+ sodipodi:nodetypes="ccccccc" />
+ <g
+ id="g110"
+ transform="matrix(0.66666667,0,0,0.66666667,2.6940004,6.0455577)"
+ style="fill:#ffb400;fill-opacity:1;stroke:#ffb400;stroke-opacity:1">
+ <path
+ sodipodi:nodetypes="ccccc"
+ inkscape:connector-curvature="0"
+ id="path99"
+ d="m 19,14 4,-2 V 7 l -4,2 z"
+ style="fill:#ffb400;fill-opacity:1;fill-rule:evenodd;stroke:#ffb400;stroke-width:0.01;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+ <path
+ sodipodi:nodetypes="ccccc"
+ inkscape:connector-curvature="0"
+ id="path103"
+ d="M 18,14 V 9 L 14,7 v 5 z"
+ style="fill:#ffb400;fill-opacity:1;fill-rule:evenodd;stroke:#ffb400;stroke-width:0.01;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+ <path
+ inkscape:connector-curvature="0"
+ id="path105"
+ d="m 14.514613,6 4,2 4,-2 -4,-2 z"
+ style="fill:#ffb400;fill-opacity:1;fill-rule:evenodd;stroke:#ffb400;stroke-width:0.01;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+ </g>
+ <g
+ id="g110-6"
+ transform="matrix(0.66666667,0,0,0.66666667,-7.2996924,-1.5660132)"
+ style="fill:#ffb400;fill-opacity:1;stroke:#ffb400;stroke-opacity:1">
+ <path
+ sodipodi:nodetypes="ccccc"
+ inkscape:connector-curvature="0"
+ id="path99-7"
+ d="m 19,14 4,-2 V 7 l -4,2 z"
+ style="fill:#ffb400;fill-opacity:1;fill-rule:evenodd;stroke:#ffb400;stroke-width:0.01;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+ <path
+ sodipodi:nodetypes="ccccc"
+ inkscape:connector-curvature="0"
+ id="path103-5"
+ d="M 18,14 V 9 L 14,7 v 5 z"
+ style="fill:#ffb400;fill-opacity:1;fill-rule:evenodd;stroke:#ffb400;stroke-width:0.01;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+ <path
+ inkscape:connector-curvature="0"
+ id="path105-3"
+ d="m 14.514613,6 4,2 4,-2 -4,-2 z"
+ style="fill:#ffb400;fill-opacity:1;fill-rule:evenodd;stroke:#ffb400;stroke-width:0.01;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+ </g>
+</svg>
diff --git a/frontend-assets/icons/show_children.svg b/frontend-assets/icons/show_children.svg
new file mode 100644
index 0000000..8f9a754
--- /dev/null
+++ b/frontend-assets/icons/show_children.svg
@@ -0,0 +1,118 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ version="1.1"
+ id="svg2"
+ inkscape:version="0.91+devel r14491"
+ width="32"
+ height="32"
+ viewBox="0 0 32 32"
+ sodipodi:docname="show_children.svg">
+ <metadata
+ id="metadata8">
+ <rdf:RDF>
+ <cc:Work
+ rdf:about="">
+ <dc:format>image/svg+xml</dc:format>
+ <dc:type
+ rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+ <dc:title></dc:title>
+ </cc:Work>
+ </rdf:RDF>
+ </metadata>
+ <defs
+ id="defs6" />
+ <sodipodi:namedview
+ pagecolor="#ffffff"
+ bordercolor="#666666"
+ borderopacity="1"
+ objecttolerance="10"
+ gridtolerance="10"
+ guidetolerance="10"
+ inkscape:pageopacity="0"
+ inkscape:pageshadow="2"
+ inkscape:window-width="1764"
+ inkscape:window-height="1171"
+ inkscape:document-units="px"
+ id="namedview4"
+ showgrid="false"
+ width="32"
+ inkscape:zoom="10.429825"
+ inkscape:cx="21.291731"
+ inkscape:cy="8.4274412"
+ inkscape:window-x="1920"
+ inkscape:window-y="0"
+ inkscape:window-maximized="1"
+ inkscape:current-layer="svg2">
+ <inkscape:grid
+ type="xygrid"
+ id="grid29" />
+ </sodipodi:namedview>
+ <path
+ style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+ d="M 4.5,8.7265625 V 27 c 2.76e-5,0.276131 0.2238691,0.499972 0.5,0.5 h 5 c 0.676161,0.0096 0.676161,-1.009563 0,-1 H 5.5 V 8.7265625 Z"
+ id="path31"
+ inkscape:connector-curvature="0"
+ sodipodi:nodetypes="cccccccc" />
+ <path
+ style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1"
+ d="M 5.5130359,12 H 10"
+ id="path33"
+ inkscape:connector-curvature="0" />
+ <path
+ style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:0.00407575;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+ d="m 11.820891,30.003208 c 0.3517,-1.387262 0.862424,-2.590788 2.579476,-3.8022 -1.762427,0.559384 -2.305931,1.617786 -2.305931,1.617786 -1.332691,-2.307032 2.260169,-3.45324 4.370368,-2.427449 0.02931,1.92458 -1.528724,5.060633 -3.365315,3.403194 -0.367481,0.52379 -0.431686,0.834484 -0.562939,1.359495 z"
+ id="path82"
+ inkscape:connector-curvature="0"
+ sodipodi:nodetypes="ccccccc" />
+ <g
+ id="g110"
+ transform="matrix(0.55555556,0,0,0.55555556,4.749556,7.0456966)">
+ <path
+ sodipodi:nodetypes="ccccc"
+ inkscape:connector-curvature="0"
+ id="path99"
+ d="m 19,14 4,-2 V 7 l -4,2 z"
+ style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:0.01;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+ <path
+ sodipodi:nodetypes="ccccc"
+ inkscape:connector-curvature="0"
+ id="path103"
+ d="M 18,14 V 9 L 14,7 v 5 z"
+ style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:0.01;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+ <path
+ inkscape:connector-curvature="0"
+ id="path105"
+ d="m 14.514613,6 4,2 4,-2 -4,-2 z"
+ style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:0.01;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+ </g>
+ <g
+ id="g110-6"
+ transform="matrix(0.55555556,0,0,0.55555556,-5.2441368,-0.56587432)">
+ <path
+ sodipodi:nodetypes="ccccc"
+ inkscape:connector-curvature="0"
+ id="path99-7"
+ d="m 19,14 4,-2 V 7 l -4,2 z"
+ style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:0.01;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+ <path
+ sodipodi:nodetypes="ccccc"
+ inkscape:connector-curvature="0"
+ id="path103-5"
+ d="M 18,14 V 9 L 14,7 v 5 z"
+ style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:0.01;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+ <path
+ inkscape:connector-curvature="0"
+ id="path105-3"
+ d="m 14.514613,6 4,2 4,-2 -4,-2 z"
+ style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:0.01;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+ </g>
+</svg>
diff --git a/frontend-assets/icons/show_children_active.svg b/frontend-assets/icons/show_children_active.svg
new file mode 100644
index 0000000..c8a27df
--- /dev/null
+++ b/frontend-assets/icons/show_children_active.svg
@@ -0,0 +1,120 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ version="1.1"
+ id="svg2"
+ inkscape:version="0.91+devel r14491"
+ width="32"
+ height="32"
+ viewBox="0 0 32 32"
+ sodipodi:docname="show_children_active.svg">
+ <metadata
+ id="metadata8">
+ <rdf:RDF>
+ <cc:Work
+ rdf:about="">
+ <dc:format>image/svg+xml</dc:format>
+ <dc:type
+ rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+ <dc:title></dc:title>
+ </cc:Work>
+ </rdf:RDF>
+ </metadata>
+ <defs
+ id="defs6" />
+ <sodipodi:namedview
+ pagecolor="#ffffff"
+ bordercolor="#666666"
+ borderopacity="1"
+ objecttolerance="10"
+ gridtolerance="10"
+ guidetolerance="10"
+ inkscape:pageopacity="0"
+ inkscape:pageshadow="2"
+ inkscape:window-width="1920"
+ inkscape:window-height="1131"
+ inkscape:document-units="px"
+ id="namedview4"
+ showgrid="false"
+ width="32"
+ inkscape:zoom="10.429825"
+ inkscape:cx="4.081471"
+ inkscape:cy="8.4274412"
+ inkscape:window-x="0"
+ inkscape:window-y="0"
+ inkscape:window-maximized="1"
+ inkscape:current-layer="svg2">
+ <inkscape:grid
+ type="xygrid"
+ id="grid29" />
+ </sodipodi:namedview>
+ <path
+ style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+ d="M 4.5,8.7265625 V 27 c 2.76e-5,0.276131 0.2238691,0.499972 0.5,0.5 h 5 c 0.676161,0.0096 0.676161,-1.009563 0,-1 H 5.5 V 8.7265625 Z"
+ id="path31"
+ inkscape:connector-curvature="0"
+ sodipodi:nodetypes="cccccccc" />
+ <path
+ style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1"
+ d="M 5.5130359,12 H 10"
+ id="path33"
+ inkscape:connector-curvature="0" />
+ <path
+ style="fill:#00b400;fill-opacity:1;fill-rule:evenodd;stroke:#00b400;stroke-width:0.0048909;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+ d="m 11.357989,30.487069 c 0.42204,-1.664714 1.034908,-3.108946 3.095371,-4.56264 -2.114913,0.671261 -2.767117,1.941343 -2.767117,1.941343 -1.59923,-2.768438 2.712202,-4.143888 5.244441,-2.912939 0.03517,2.309496 -1.834469,6.07276 -4.038378,4.083833 -0.440977,0.628548 -0.518023,1.001381 -0.675527,1.631394 z"
+ id="path82"
+ inkscape:connector-curvature="0"
+ sodipodi:nodetypes="ccccccc" />
+ <g
+ id="g110"
+ transform="matrix(0.66666667,0,0,0.66666667,2.6940004,6.0455577)"
+ style="fill:#ffb400;fill-opacity:1;stroke:#ffb400;stroke-opacity:1">
+ <path
+ sodipodi:nodetypes="ccccc"
+ inkscape:connector-curvature="0"
+ id="path99"
+ d="m 19,14 4,-2 V 7 l -4,2 z"
+ style="fill:#ffb400;fill-opacity:1;fill-rule:evenodd;stroke:#ffb400;stroke-width:0.01;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+ <path
+ sodipodi:nodetypes="ccccc"
+ inkscape:connector-curvature="0"
+ id="path103"
+ d="M 18,14 V 9 L 14,7 v 5 z"
+ style="fill:#ffb400;fill-opacity:1;fill-rule:evenodd;stroke:#ffb400;stroke-width:0.01;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+ <path
+ inkscape:connector-curvature="0"
+ id="path105"
+ d="m 14.514613,6 4,2 4,-2 -4,-2 z"
+ style="fill:#ffb400;fill-opacity:1;fill-rule:evenodd;stroke:#ffb400;stroke-width:0.01;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+ </g>
+ <g
+ id="g110-6"
+ transform="matrix(0.66666667,0,0,0.66666667,-7.2996924,-1.5660132)"
+ style="fill:#ffb400;fill-opacity:1;stroke:#ffb400;stroke-opacity:1">
+ <path
+ sodipodi:nodetypes="ccccc"
+ inkscape:connector-curvature="0"
+ id="path99-7"
+ d="m 19,14 4,-2 V 7 l -4,2 z"
+ style="fill:#ffb400;fill-opacity:1;fill-rule:evenodd;stroke:#ffb400;stroke-width:0.01;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+ <path
+ sodipodi:nodetypes="ccccc"
+ inkscape:connector-curvature="0"
+ id="path103-5"
+ d="M 18,14 V 9 L 14,7 v 5 z"
+ style="fill:#ffb400;fill-opacity:1;fill-rule:evenodd;stroke:#ffb400;stroke-width:0.01;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+ <path
+ inkscape:connector-curvature="0"
+ id="path105-3"
+ d="m 14.514613,6 4,2 4,-2 -4,-2 z"
+ style="fill:#ffb400;fill-opacity:1;fill-rule:evenodd;stroke:#ffb400;stroke-width:0.01;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+ </g>
+</svg>
diff --git a/frontend-assets/icons/tree_branch.svg b/frontend-assets/icons/tree_branch.svg
new file mode 100644
index 0000000..f45dea6
--- /dev/null
+++ b/frontend-assets/icons/tree_branch.svg
@@ -0,0 +1,78 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ version="1.1"
+ id="svg2"
+ inkscape:version="0.91+devel r14491"
+ width="32"
+ height="32"
+ viewBox="0 0 32 32"
+ sodipodi:docname="tree_branch.svg">
+ <metadata
+ id="metadata8">
+ <rdf:RDF>
+ <cc:Work
+ rdf:about="">
+ <dc:format>image/svg+xml</dc:format>
+ <dc:type
+ rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+ <dc:title />
+ </cc:Work>
+ </rdf:RDF>
+ </metadata>
+ <defs
+ id="defs6" />
+ <sodipodi:namedview
+ pagecolor="#ffffff"
+ bordercolor="#666666"
+ borderopacity="1"
+ objecttolerance="10"
+ gridtolerance="10"
+ guidetolerance="10"
+ inkscape:pageopacity="0"
+ inkscape:pageshadow="2"
+ inkscape:window-width="1764"
+ inkscape:window-height="1171"
+ inkscape:document-units="px"
+ id="namedview4"
+ showgrid="true"
+ width="32"
+ inkscape:zoom="20.85965"
+ inkscape:cx="4.734334"
+ inkscape:cy="10.548157"
+ inkscape:window-x="1920"
+ inkscape:window-y="0"
+ inkscape:window-maximized="1"
+ inkscape:current-layer="svg2">
+ <inkscape:grid
+ type="xygrid"
+ id="grid29" />
+ </sodipodi:namedview>
+ <rect
+ style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:0.02;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+ id="rect221"
+ width="32"
+ height="32"
+ x="0"
+ y="0" />
+ <path
+ style="fill:none;fill-rule:evenodd;stroke:#d2d2d2;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+ d="M 13,0 V 32.071488"
+ id="path219"
+ inkscape:connector-curvature="0"
+ sodipodi:nodetypes="cc" />
+ <path
+ style="fill:none;fill-rule:evenodd;stroke:#d2d2d2;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+ d="M 13,16 H 32.035744"
+ id="path219-3"
+ inkscape:connector-curvature="0"
+ sodipodi:nodetypes="cc" />
+</svg>
diff --git a/frontend-assets/icons/tree_cont.svg b/frontend-assets/icons/tree_cont.svg
new file mode 100644
index 0000000..ebd1237
--- /dev/null
+++ b/frontend-assets/icons/tree_cont.svg
@@ -0,0 +1,72 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ version="1.1"
+ id="svg2"
+ inkscape:version="0.91+devel r14491"
+ width="32"
+ height="32"
+ viewBox="0 0 32 32"
+ sodipodi:docname="tree_cont.svg">
+ <metadata
+ id="metadata8">
+ <rdf:RDF>
+ <cc:Work
+ rdf:about="">
+ <dc:format>image/svg+xml</dc:format>
+ <dc:type
+ rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+ <dc:title />
+ </cc:Work>
+ </rdf:RDF>
+ </metadata>
+ <defs
+ id="defs6" />
+ <sodipodi:namedview
+ pagecolor="#ffffff"
+ bordercolor="#666666"
+ borderopacity="1"
+ objecttolerance="10"
+ gridtolerance="10"
+ guidetolerance="10"
+ inkscape:pageopacity="0"
+ inkscape:pageshadow="2"
+ inkscape:window-width="1764"
+ inkscape:window-height="1171"
+ inkscape:document-units="px"
+ id="namedview4"
+ showgrid="true"
+ width="32"
+ inkscape:zoom="20.85965"
+ inkscape:cx="4.734334"
+ inkscape:cy="10.548157"
+ inkscape:window-x="1920"
+ inkscape:window-y="0"
+ inkscape:window-maximized="1"
+ inkscape:current-layer="svg2">
+ <inkscape:grid
+ type="xygrid"
+ id="grid29" />
+ </sodipodi:namedview>
+ <rect
+ style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:0.02;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+ id="rect221"
+ width="32"
+ height="32"
+ x="0"
+ y="0" />
+ <path
+ style="fill:none;fill-rule:evenodd;stroke:#d2d2d2;stroke-width:2;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+ d="m 13,0 v 16.035744 16"
+ id="path219"
+ inkscape:connector-curvature="0"
+ sodipodi:nodetypes="ccc" />
+</svg>
diff --git a/frontend-assets/icons/tree_empty.svg b/frontend-assets/icons/tree_empty.svg
new file mode 100644
index 0000000..a7808d1
--- /dev/null
+++ b/frontend-assets/icons/tree_empty.svg
@@ -0,0 +1,66 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ version="1.1"
+ id="svg2"
+ inkscape:version="0.91+devel r14491"
+ width="32"
+ height="32"
+ viewBox="0 0 32 32"
+ sodipodi:docname="tree_empty.svg">
+ <metadata
+ id="metadata8">
+ <rdf:RDF>
+ <cc:Work
+ rdf:about="">
+ <dc:format>image/svg+xml</dc:format>
+ <dc:type
+ rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+ <dc:title></dc:title>
+ </cc:Work>
+ </rdf:RDF>
+ </metadata>
+ <defs
+ id="defs6" />
+ <sodipodi:namedview
+ pagecolor="#ffffff"
+ bordercolor="#666666"
+ borderopacity="1"
+ objecttolerance="10"
+ gridtolerance="10"
+ guidetolerance="10"
+ inkscape:pageopacity="0"
+ inkscape:pageshadow="2"
+ inkscape:window-width="1920"
+ inkscape:window-height="1131"
+ inkscape:document-units="px"
+ id="namedview4"
+ showgrid="true"
+ width="32"
+ inkscape:zoom="20.85965"
+ inkscape:cx="13.339464"
+ inkscape:cy="10.068763"
+ inkscape:window-x="0"
+ inkscape:window-y="0"
+ inkscape:window-maximized="1"
+ inkscape:current-layer="svg2">
+ <inkscape:grid
+ type="xygrid"
+ id="grid29" />
+ </sodipodi:namedview>
+ <rect
+ style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:0.02;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+ id="rect221"
+ width="32"
+ height="32"
+ x="0"
+ y="0" />
+</svg>
diff --git a/frontend-assets/icons/tree_last_branch.svg b/frontend-assets/icons/tree_last_branch.svg
new file mode 100644
index 0000000..efb8e20
--- /dev/null
+++ b/frontend-assets/icons/tree_last_branch.svg
@@ -0,0 +1,72 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ version="1.1"
+ id="svg2"
+ inkscape:version="0.91+devel r14491"
+ width="32"
+ height="32"
+ viewBox="0 0 32 32"
+ sodipodi:docname="tree_last_branch.svg">
+ <metadata
+ id="metadata8">
+ <rdf:RDF>
+ <cc:Work
+ rdf:about="">
+ <dc:format>image/svg+xml</dc:format>
+ <dc:type
+ rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+ <dc:title />
+ </cc:Work>
+ </rdf:RDF>
+ </metadata>
+ <defs
+ id="defs6" />
+ <sodipodi:namedview
+ pagecolor="#ffffff"
+ bordercolor="#666666"
+ borderopacity="1"
+ objecttolerance="10"
+ gridtolerance="10"
+ guidetolerance="10"
+ inkscape:pageopacity="0"
+ inkscape:pageshadow="2"
+ inkscape:window-width="1764"
+ inkscape:window-height="1171"
+ inkscape:document-units="px"
+ id="namedview4"
+ showgrid="true"
+ width="32"
+ inkscape:zoom="20.85965"
+ inkscape:cx="13.339464"
+ inkscape:cy="10.548157"
+ inkscape:window-x="1920"
+ inkscape:window-y="0"
+ inkscape:window-maximized="1"
+ inkscape:current-layer="svg2">
+ <inkscape:grid
+ type="xygrid"
+ id="grid29" />
+ </sodipodi:namedview>
+ <rect
+ style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:0.02;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+ id="rect221"
+ width="32"
+ height="32"
+ x="0"
+ y="0" />
+ <path
+ style="fill:none;fill-rule:evenodd;stroke:#d2d2d2;stroke-width:2;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+ d="M 13,0 V 16.035744 L 32,16"
+ id="path219"
+ inkscape:connector-curvature="0"
+ sodipodi:nodetypes="ccc" />
+</svg>
diff --git a/frontend/config/config.component.css b/frontend/config/config.component.css
index 30ccea5..c2336b0 100644
--- a/frontend/config/config.component.css
+++ b/frontend/config/config.component.css
@@ -13,6 +13,15 @@
padding-right: 0.5em;
}
+.tab-icon {
+ vertical-align: middle;
+ height: 1em;
+}
+
+.tab-add {
+ filter: invert(100%);
+}
+
.tab-add:hover {
color: green;
}
@@ -23,14 +32,14 @@
color: blue;
}
-nav {
+#confignav {
position: fixed;
width: 100%;
background-color: #3B4257;
padding-left: 1em;
}
-nav a {
+#confignav a {
cursor: pointer;
text-decoration: none;
display: inline-block;
@@ -38,16 +47,18 @@
color: #FAFAFA;
}
-nav a:visited, a:link {
+#confignav a:visited,
+#confignav a:link {
color: inherited;
}
-nav a:hover, nav a.active {
+#confignav a:hover,
+#confignav a.active {
background-color: #FAFAFA;
- color: #000
+ color: #000;
}
-nav a.active:hover {
+#confignav a.active:hover {
cursor: default;
}
@@ -67,11 +78,14 @@
}
#config-data {
- padding-left: 11em;
- display: inline-block;
width: 100%;
}
+.item_action_expand,
+.item_action_collapse {
+ height: 1em;
+}
+
.item_action_collapse:hover {
color:red;
}
diff --git a/frontend/config/config.component.html b/frontend/config/config.component.html
index 654b94c..8b398e5 100644
--- a/frontend/config/config.component.html
+++ b/frontend/config/config.component.html
@@ -1,20 +1,34 @@
-<nav #navbar>
- <a *ngFor="let session of sessionsService.sessions" [class.active]="session.key==activeSession.key"
- (click)="changeActiveSession(session.key)">{{session.device.hostname}}:{{session.device.port}}
- <span *ngIf="session.key==activeSession.key" class="tab-reload tab-action-first" (click)="reloadData(session.key)">o</span>
- <span class="tab-close tab-action-last" (click)="disconnect(session.key)">x</span>
- </a><a (click)="addSession()"><span class="tab-add tab-action-first tab-action-last">+</span></a>
+<nav #confignav id="confignav">
+ <a *ngFor="let session of sessionsService.sessions" [class.active]="session.key==activeSession.key"
+ (click)="changeActiveSession(session.key)">{{session.device.hostname}}:{{session.device.port}}
+ <!--<span *ngIf="session.key==activeSession.key" class="tab-reload tab-action-first" (click)="reloadData(session.key)">o</span>-->
+ <img *ngIf="session.key==activeSession.key" class="tab-icon tab-reload tab-action-first" src="assets/netopeer/icons/reload.svg" alt="o" title="reload"
+ onmouseover="this.src='assets/netopeer/icons/reload_active.svg'"
+ onmouseout="this.src='assets/netopeer/icons/reload.svg'" (click)="reloadData()"/>
+ <img class="tab-icon tab-close tab-action-last" src="assets/netopeer/icons/close.svg" alt="x" title="disconnect"
+ onmouseover="this.src='assets/netopeer/icons/close_active.svg'"
+ onmouseout="this.src='assets/netopeer/icons/close.svg'" (click)="disconnect(session.key)"/>
+ </a><a (click)="addSession()" onmouseout="getElementById('tabadd').style.filter='invert(100%)'" onmouseover="getElementById('tabadd').style.filter='invert(0%)'">
+ <img id="tabadd" class="tab-icon tab-add tab-action-last" src="assets/netopeer/icons/add.svg" alt="+" title="add connection"
+ onmouseover="this.src='assets/netopeer/icons/add_active.svg'"
+ onmouseout="this.src='assets/netopeer/icons/add.svg'"/>
+ </a>
</nav>
-<div class="netopeer-content" [style.padding-top]="'calc(' + navbar.offsetHeight + 'px - -0.7em)'">
+<div class="netopeer-content" [style.padding-top]="'calc(' + confignav.offsetHeight + 'px - -0.7em)'">
<div *ngIf="sessionsService.activeSession">
- <p class="msg-failure msg-rounded" *ngIf="err_msg"><span class="msg-close" (click)="err_msg=''">x</span>{{err_msg}}</p>
-
+ <p class="msg-failure msg-rounded" *ngIf="err_msg"><img class="msg-close" (click)="err_msg=''" src="assets/netopeer/icons/close_active.svg" alt="x" title="close"/>{{err_msg}}</p>
<table class="items">
<tr class="item_header">
<th class="item_left item_actions" [ngSwitch]="activeSession.cpbltsVisibility">
- <span *ngSwitchCase="false" class="item_action_expand" (click)="getCapabilities(activeSession.key);activeSession.cpbltsVisibility=true">v</span>
- <span *ngSwitchCase="true" class="item_action_collapse" (click)="activeSession.cpbltsVisibility=false">x</span>
+ <img *ngSwitchCase="false" class="item_action_expand" (click)="getCapabilities(activeSession.key);activeSession.cpbltsVisibility=true"
+ src="assets/netopeer/icons/show.svg" alt="v" title="show"
+ onmouseover="this.src='assets/netopeer/icons/show_active.svg'"
+ onmouseout="this.src='assets/netopeer/icons/show.svg'"/>
+ <img *ngSwitchCase="true" class="item_action_collapse" (click)="activeSession.cpbltsVisibility=false"
+ src="assets/netopeer/icons/close.svg" alt="x" title="close"
+ onmouseover="this.src='assets/netopeer/icons/close_active.svg'"
+ onmouseout="this.src='assets/netopeer/icons/close.svg'"/>
</th>
<th>Capability / Module</th>
<th class="item_right">Version</th>
@@ -30,24 +44,29 @@
<table class="items">
<tr class="item_header">
- <th class="item_left item_actions" [ngSwitch]="activeSession.dataVisibility">
- <span *ngSwitchCase="false" class="item_action_expand" (click)="rpcGet(activeSession.key);activeSession.dataVisibility=true">v</span>
- <span *ngSwitchCase="true" class="item_action_collapse" (click)="activeSession.dataVisibility=false">x</span>
- </th>
- <th class="item_right">Data</th>
+ <th class="item_left item_actions" style="cursor: default;"> </th>
+ <th class="item_right" >Data</th>
</tr>
</table>
- <ng-container *ngIf="activeSession.dataVisibility==true && activeSession.data">
-<!--
- <div id="config-toc">
- <div class="config-toc-item" [ngSwitch]="activeSession.dataVisibility">
- <a *ngSwitchCase="false" (click)="rpcGet(activeSession.key);activeSession.dataVisibility=true">show data</a>
- <a *ngSwitchCase="true" (click)="activeSession.dataVisibility=false">hide data</a>
- </div>
- </div>
--->
+ <div>
+ <img *ngIf="activeSession.dataVisibility!='root'" class="icon_action" (click)="rpcGet(false);activeSession.dataVisibility='root'"
+ src="assets/netopeer/icons/show_children.svg" alt="v" title="expand roots"
+ onmouseover="this.src='assets/netopeer/icons/show_children_active.svg'"
+ onmouseout="this.src='assets/netopeer/icons/show_children.svg'"/>
+ <img *ngIf="activeSession.dataVisibility!='all'" class="icon_action" (click)="rpcGet(true);activeSession.dataVisibility='all'"
+ src="assets/netopeer/icons/show_all.svg" alt="w" title="expand all"
+ onmouseover="this.src='assets/netopeer/icons/show_all_active.svg'"
+ onmouseout="this.src='assets/netopeer/icons/show_all.svg'"/>
+ <img *ngIf="activeSession.dataVisibility!='none'" class="icon_action" (click)="activeSession.dataVisibility='none'"
+ src="assets/netopeer/icons/close.svg" alt="x" title="close"
+ onmouseover="this.src='assets/netopeer/icons/close_active.svg'"
+ onmouseout="this.src='assets/netopeer/icons/close.svg'"/>
+ <span><input type="checkbox" name="statusVisibility" [checked]="activeSession.statusVisibility" (change)="activeSession.statusVisibility = !activeSession.statusVisibility"/> include status data</span>
+ </div><br/>
+ <ng-container *ngIf="activeSession.dataVisibility!='none' && activeSession.data">
<div id="config-data">
- <pre >{{activeSession.data | json}}</pre>
+ <tree-view [treeData]="activeSession.data"></tree-view>
+ <!--<pre>{{activeSession.data | json}}</pre>-->
</div>
</ng-container>
</div>
diff --git a/frontend/config/config.component.ts b/frontend/config/config.component.ts
index 0618771..7adf96d 100644
--- a/frontend/config/config.component.ts
+++ b/frontend/config/config.component.ts
@@ -3,12 +3,11 @@
import {SessionsService} from './sessions.service';
import {Session} from './session';
-import {Device} from '../inventory/device';
@Component({
selector: 'netopeer-config',
templateUrl: './config.component.html',
- styleUrls: ['../netopeer.css', './config.component.css', '../inventory/inventory.component.css']
+ styleUrls: ['../netopeer.css', './config.component.css', './tree.component.css', '../inventory/inventory.component.css']
})
export class ConfigComponent implements OnInit, OnDestroy {
@@ -16,15 +15,20 @@
activeSession: Session;
err_msg = "";
+ objectKeys = Object.keys;
constructor(private sessionsService: SessionsService, private router: Router) {}
addSession() {
this.router.navigateByUrl('/netopeer/inventory/devices');
}
- reloadData(key: string) {
+ reloadData() {
this.activeSession.data = null;
- this.rpcGet(key);
+ if (this.activeSession.dataVisibility == 'all') {
+ this.rpcGet(true);
+ } else if(this.activeSession.dataVisibility == 'root') {
+ this.rpcGet(false);
+ }
}
disconnect(key: string) {
@@ -45,9 +49,10 @@
}
this.sessionsService.getCpblts(key).subscribe(result => {
if (result['success']) {
- this.activeSession.cpblts = result['capabilities']
+ this.activeSession.cpblts = result['capabilities'];
} else {
- this.err_msg = result['error-msg']
+ this.activeSession.cpbltsVisibility = false;
+ this.err_msg = result['error-msg'];
}
});
}
@@ -105,17 +110,23 @@
return version;
}
- rpcGet(key: string) {
+ rpcGet(all: boolean) {
if (this.activeSession.data) {
- return;
+ if ((all && this.activeSession.dataVisibility == 'all') ||
+ (!all && this.activeSession.dataVisibility == 'root')) {
+ return;
+ }
}
- this.sessionsService.rpcGet(key).subscribe(result => {
+ this.sessionsService.rpcGetSubtree(this.activeSession.key, all).subscribe(result => {
if (result['success']) {
- this.activeSession.data = result['data']
- } else if ('error-msg' in result) {
- this.err_msg = result['error-msg']
+ this.activeSession.data = result['data'];
} else {
- this.err_msg = result['error'][0]['message']
+ this.activeSession.dataVisibility = 'none';
+ if ('error-msg' in result) {
+ this.err_msg = result['error-msg'];
+ } else {
+ this.err_msg = result['error'][0]['message'];
+ }
}
});
}
diff --git a/frontend/config/session.ts b/frontend/config/session.ts
index 1ca2c3c..9f56289 100644
--- a/frontend/config/session.ts
+++ b/frontend/config/session.ts
@@ -4,9 +4,10 @@
constructor (
public key: string,
public device: Device,
- public data: string = "",
+ public data = null,
public cpblts: string = "",
- public dataVisibility: boolean = false,
- public cpbltsVisibility: boolean = false
+ public dataVisibility: string = 'none',
+ public statusVisibility: boolean = true,
+ public cpbltsVisibility: boolean = false,
) {}
}
diff --git a/frontend/config/sessions.service.ts b/frontend/config/sessions.service.ts
index a947a4f..83d99f9 100644
--- a/frontend/config/sessions.service.ts
+++ b/frontend/config/sessions.service.ts
@@ -84,9 +84,13 @@
.catch((err: Response | any) => Observable.throw(err));
}
- rpcGet(key: string): Observable<string[]> {
+ rpcGetSubtree(key: string, all: boolean, path: string = ""): Observable<string[]> {
let params = new URLSearchParams();
params.set('key', key);
+ params.set('recursive', String(all));
+ if (path.length) {
+ params.set('path', path);
+ }
let options = new RequestOptions({ search: params });
return this.http.get('/netopeer/session/rpcGet', options)
.map((resp: Response) => resp.json())
@@ -127,7 +131,7 @@
.map((resp: Response) => resp.json())
.do(resp => {
if (resp['success']) {
- this.sessions.push(new Session(resp['session-key'], dev, "", "", false, false));
+ this.sessions.push(new Session(resp['session-key'], dev));
this.activeSession = resp['session-key'];
localStorage.setItem('sessions', JSON.stringify(this.sessions));
localStorage.setItem('activeSession', this.activeSession);
diff --git a/frontend/config/tree.component.css b/frontend/config/tree.component.css
new file mode 100644
index 0000000..9534da8
--- /dev/null
+++ b/frontend/config/tree.component.css
@@ -0,0 +1,46 @@
+.subtree {
+ cursor: default;
+ display: block;
+ width: 100%;
+}
+
+.node {
+ width: 100%;
+}
+.node:hover {
+ background-color: #e1e1e1
+}
+.node div {
+ display: inline-block;
+}
+
+.status {
+ color: grey;
+}
+
+.icon,
+.icon_action {
+ font-size: xx-small;
+ height: 2em;
+}
+
+.icon_action {
+ cursor: pointer;
+}
+
+.module_name {
+ float: right;
+}
+
+.children {
+ padding-left: 0em;
+}
+
+.value {
+ display: inline-block;
+ padding-left: 1.5em;
+}
+
+.indentation {
+ height: 1.7em;
+}
\ No newline at end of file
diff --git a/frontend/config/tree.component.html b/frontend/config/tree.component.html
new file mode 100644
index 0000000..22e7b75
--- /dev/null
+++ b/frontend/config/tree.component.html
@@ -0,0 +1,44 @@
+<ng-container *ngFor="let node of treeData">
+<div class="subtree" *ngIf="node['info']['config'] || activeSession.statusVisibility" [class.status]="!node['info']['config']">
+ <div class="node">
+ <ng-container *ngFor="let indent of indentation">
+ <img *ngIf="!indent" class="indentation" src="assets/netopeer/icons/tree_cont.svg"/>
+ <img *ngIf="indent" class="indentation" src="assets/netopeer/icons/tree_empty.svg"/>
+ </ng-container>
+ <img *ngIf="node['last']" class="indentation" src="assets/netopeer/icons/tree_last_branch.svg"/>
+ <img *ngIf="!node['last']" class="indentation" src="assets/netopeer/icons/tree_branch.svg"/>
+ <ng-container [ngSwitch]="node['info']['type']">
+ <img *ngSwitchCase="1" class="icon" src="assets/netopeer/icons/container.svg" alt="container" title="container"/>
+ <img *ngSwitchCase="4" class="icon" src="assets/netopeer/icons/leaf.svg" alt="leaf" title="leaf"/>
+ <img *ngSwitchCase="8" class="icon" src="assets/netopeer/icons/leaflist.svg" alt="leaf-list" title="leaf-list"/>
+ <img *ngSwitchCase="16" class="icon" src="assets/netopeer/icons/container.svg" alt="list" title="list"/>
+ <img *ngSwitchCase="32800" class="icon" src="assets/netopeer/icons/anydata.svg" alt="anydata" title="anydata"/>
+ </ng-container>
+ <img class="icon" src="assets/netopeer/icons/info.svg"
+ onmouseover="this.src='assets/netopeer/icons/info_active.svg'"
+ onmouseout="this.src='assets/netopeer/icons/info.svg'" alt="info" title="{{node['info']['dsc']}}"/>
+ <ng-container *ngIf="expandable(node)">
+ <img *ngIf="hasHiddenChild(node)" (click)="getSubtree(node, true)"
+ class="icon_action" src="assets/netopeer/icons/show_all.svg"
+ onmouseover="this.src='assets/netopeer/icons/show_all_active.svg'"
+ onmouseout="this.src='assets/netopeer/icons/show_all.svg'" alt="show-all" title="expand subtree"/>
+ <img *ngIf="!node['children']" (click)="getSubtree(node, false)"
+ class="icon_action" src="assets/netopeer/icons/show_children.svg"
+ onmouseover="this.src='assets/netopeer/icons/show_children_active.svg'"
+ onmouseout="this.src='assets/netopeer/icons/show_children.svg'" alt="show-children" title="expand children"/>
+ <img *ngIf="node['children']" (click)="collapse(node)"
+ class="icon_action" src="assets/netopeer/icons/collapse.svg" alt="collapse" title="collapse"
+ onmouseover="this.src='assets/netopeer/icons/collapse_active.svg'"
+ onmouseout="this.src='assets/netopeer/icons/collapse.svg'"/>
+ </ng-container>
+ <div>{{node['info']['name']}}</div>
+ <ng-container *ngIf="node['value']">
+ :<div class="value" >{{node['value']}}</div>
+ </ng-container>
+ <div class="module_name">{{node['info']['module']}}</div>
+ </div>
+ <div class="children" *ngIf="node['children']">
+ <tree-view [treeData]="node['children']" [indentation]="inheritIndentation(node)"></tree-view>
+ </div>
+</div>
+</ng-container>
\ No newline at end of file
diff --git a/frontend/config/tree.component.ts b/frontend/config/tree.component.ts
new file mode 100644
index 0000000..99b6cec
--- /dev/null
+++ b/frontend/config/tree.component.ts
@@ -0,0 +1,92 @@
+import {Component, Input, OnInit} from '@angular/core';
+
+import {Session} from './session';
+import {SessionsService} from './sessions.service';
+
+@Component({
+ selector: 'tree-view',
+ templateUrl: './tree.component.html',
+ styleUrls: ['../netopeer.css', './tree.component.css']
+})
+
+export class TreeView implements OnInit {
+ @Input() treeData;
+ @Input() indentation;
+ c = 1; i = 1;
+ activeSession: Session;
+ objectKeys = Object.keys;
+ constructor(private sessionsService: SessionsService) {}
+
+ ngOnInit(): void {
+ this.activeSession = this.sessionsService.getActiveSession(this.sessionsService.activeSession);
+ }
+
+ getSubtree(node, all: boolean) {
+ this.sessionsService.rpcGetSubtree(this.activeSession.key, all, node['path']).subscribe(result => {
+ if (result['success']) {
+ node['children'] = result['data']['children'];
+ }
+ });
+ }
+
+ getType(object) {
+ let result = 'data';
+ if (typeof object == 'object') {
+ if (object instanceof Array) {
+ result = 'array';
+ } else {
+ result = 'object';
+ }
+ }
+ return result;
+ }
+
+ expandable(node): boolean {
+ if (node['info']['type'] == 1 || /* container */
+ node['info']['type'] == 16) { /* list */
+ return true;
+ }
+ return false;
+ }
+
+ hasHiddenChild(node, clean=false): boolean {
+ if (!clean && 'hasHiddenChild' in node) {
+ return node['hasHiddenChild'];
+ }
+ node['hasHiddenChild'] = false;
+ if (!node['children']) {
+ node['hasHiddenChild'] = true;
+ } else {
+ for (let child of node['children']) {
+ if (!('children' in child) || this.hasHiddenChild(child, clean)) {
+ node['hasHiddenChild'] = true;
+ break;
+ }
+ }
+ }
+ return node['hasHiddenChild'];
+ }
+
+ inheritIndentation(node) {
+ let newIndent;
+ if (node['last']) {
+ newIndent = [true];
+ } else {
+ newIndent = [false];
+ }
+
+ if (!this.indentation) {
+ return newIndent;
+ } else {
+ return this.indentation.concat(newIndent);
+ }
+ }
+
+ collapse(node) {
+ node['children'] = null;
+ this.activeSession.dataVisibility = 'mixed';
+ for (let iter of this.activeSession.data) {
+ this.hasHiddenChild(iter, true);
+ }
+ }
+}
diff --git a/frontend/netopeer.component.html b/frontend/netopeer.component.html
index 1e4000e..97c3072 100644
--- a/frontend/netopeer.component.html
+++ b/frontend/netopeer.component.html
@@ -1,7 +1,7 @@
<div id="netopeer-header" #header>
<h1><span routerLink="/netopeer">Netopeer</span> {{componentTitle}}</h1>
- <nav>
+ <nav id="mainnav">
<a *ngFor="let component of netopeerComponents"
routerLink="{{component.route}}" routerLinkActive="active">{{component.name}}</a>
</nav>
diff --git a/frontend/netopeer.css b/frontend/netopeer.css
index 32b950b..0b6b864 100644
--- a/frontend/netopeer.css
+++ b/frontend/netopeer.css
@@ -23,28 +23,35 @@
color: #000;
}
-nav {
+#mainnav {
with: 100%;
padding-left: 1em;
}
-nav a {
+#mainnav a:visited,
+#mainnav a:link {
+ color: inherit;
+}
+
+#mainnav a:hover {
+ border-top-color: #3B4257;
+ background-color: #3B4257;
+}
+
+#mainnav a.active {
+ border-top-color: #BAE4F0;
+ background-color: #3B4257;
+}
+#mainnav a.active:hover {
+ cursor: default;
+}
+
+#mainnav a {
text-decoration: none;
display: inline-block;
padding: 0.5em 1em 0.5em 0.5em;
color: #FAFAFA;
-}
-
-nav a:visited, a:link {
- color: inherited;
-}
-
-nav a:hover, a.active {
- background-color: #3B4257;
-}
-
-nav a.active:hover {
- cursor: default;
+ border-top: 0.2em solid #313747;
}
.msg-rounded {
@@ -58,6 +65,7 @@
font-family: monospace;
font-size: large;
cursor: pointer;
+ height: 1em;
}
.msg-success {
@@ -76,6 +84,6 @@
padding: 5px 1em 5px 0em;
}
-.msg-failure.msg-close {
+.msg-failure .msg-close {
color: red;
}
\ No newline at end of file
diff --git a/frontend/netopeer.module.ts b/frontend/netopeer.module.ts
index b97e9b6..24e0685 100644
--- a/frontend/netopeer.module.ts
+++ b/frontend/netopeer.module.ts
@@ -15,6 +15,7 @@
import { InventorySchemasComponent } from './inventory/schemas.component';
import { InventoryDevicesComponent } from './inventory/devices.component';
import { ConfigComponent } from './config/config.component';
+import { TreeView } from './config/tree.component';
import { YANGComponent } from './yang/yang.component';
import { MonitoringComponent } from './monitoring/monitoring.component';
import { PluginsComponent } from './plugins/plugins.component';
@@ -57,6 +58,7 @@
InventorySchemasComponent,
InventoryDevicesComponent,
ConfigComponent,
+ TreeView,
YANGComponent,
MonitoringComponent,
PluginsComponent
