diff --git a/mapping_provider/api/ui.py b/mapping_provider/api/ui.py
index f9a7345ae02f8b798c852311b1cd0b5bb82864bb..1ff4896b08d5359447aa962b16d58de21501eeea 100644
--- a/mapping_provider/api/ui.py
+++ b/mapping_provider/api/ui.py
@@ -11,12 +11,12 @@ router = APIRouter()
templates = Jinja2Templates(directory="templates")
-@router.get("/test/{id}", response_class=HTMLResponse)
-def svg_test(request: Request, id: str):
+@router.get("/test", response_class=HTMLResponse)
+def svg_test(request: Request):
# app_params = config.load()
with open("./static/map.svg", 'r') as file:
svg = file.read()
return templates.TemplateResponse(
- request=request, name="item.html", context={"id":id, "svg":svg}
+ request=request, name="item.html", context={"svg":svg}
)
\ No newline at end of file
diff --git a/static/map.svg b/static/map.svg
index b4e9cf7b382ae4d8119fb8dfe1bb52f7d9cd5020..a381faeb28d7bbf4a72a4e8692dcd4b5b9487611 100644
--- a/static/map.svg
+++ b/static/map.svg
@@ -46,7 +46,7 @@
</linearGradient>
</defs>
<g
- id="layer1">
+ id="edges">
<g
id="g17"
class="LONDON AMSTERDAM">
@@ -64,22 +64,23 @@
y="112.72857"
rx="2"
ry="2" />
- <text
- xml:space="preserve"
- style="font-size:6.72032px;text-align:start;letter-spacing:0px;writing-mode:lr-tb;direction:ltr;text-anchor:start;fill:#000000;fill-opacity:1;stroke:#3b3b3b;stroke-width:0;stroke-dasharray:none;stroke-opacity:1"
- x="23.19224"
- y="114.17885"
- id="text12-30-3"
- transform="scale(0.95248429,1.0498861)"
- class="max-speed"><tspan
- id="tspan12-0-2"
- style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:6.72032px;font-family:Arial;-inkscape-font-specification:Arial;letter-spacing:0px;fill:#000000;fill-opacity:1;stroke:#3b3b3b;stroke-width:0;stroke-dasharray:none;stroke-opacity:1"
- x="23.19224"
- y="114.17885">speed</tspan><tspan
- style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:6.72032px;font-family:Arial;-inkscape-font-specification:Arial;letter-spacing:0px;fill:#000000;fill-opacity:1;stroke:#3b3b3b;stroke-width:0;stroke-dasharray:none;stroke-opacity:1"
- x="23.19224"
- y="122.65704"
- id="tspan17" /></text>
+ <g
+ id="g27"
+ style="fill:#70ff01;fill-opacity:1;stroke:none"
+ transform="translate(3.2835643,-58.513308)">
+ <path
+ style="fill:#70ff01;fill-opacity:1;stroke:none;stroke-width:1.05833;stroke-dasharray:none;stroke-opacity:1"
+ id="path24"
+ d="m 21.053166,182.85027 c 0.667585,1.79664 1.631237,3.4544 2.676491,5.05309 1.096069,1.61477 2.34297,3.1183 3.781974,4.43656 2.109243,1.72775 4.508633,3.10327 6.992006,4.2225 1.246124,0.58688 2.618981,0.70528 3.970523,0.84157 2.451761,0.20079 4.913228,0.22877 7.371715,0.25345 2.007769,0.0378 4.023886,-0.0808 6.007973,-0.39533 0.894154,-0.19643 1.758963,-0.48702 2.532044,-0.98196 0.479126,-0.36212 0.862142,-0.83372 1.188204,-1.33411 0.282414,-0.46908 0.644702,-0.88191 0.970833,-1.31973 0.234357,-0.36546 0.5143,-0.69525 0.742765,-1.06477 0.166264,-0.19952 0.245898,-0.43557 0.319098,-0.68015 0.11208,-0.35824 0.161049,-0.73201 0.206385,-1.10344 0.03082,-0.30876 0.01611,-0.61662 0.06843,-0.92308 0.03921,-0.17976 0.0749,-0.36024 0.110225,-0.54079 0,0 -3.520813,-1.87234 -3.520813,-1.87234 v 0 c -0.02865,0.18121 -0.05862,0.36238 -0.10074,0.54105 -0.06446,0.31647 -0.09084,0.62766 -0.0883,0.95086 -0.02755,0.34598 -0.06226,0.69544 -0.165417,1.02827 -0.07555,0.21478 -0.119965,0.42581 -0.277591,0.60218 -0.208653,0.36505 -0.479858,0.68546 -0.707387,1.03842 -0.330303,0.44484 -0.700595,0.86124 -0.981675,1.34131 -0.29612,0.45191 -0.647888,0.88059 -1.098151,1.18649 -0.740188,0.44499 -1.557793,0.71441 -2.405062,0.87729 -1.95438,0.30531 -3.933407,0.42913 -5.911459,0.38461 -2.461612,-0.0292 -4.928253,-0.0637 -7.379745,-0.30808 -1.346115,-0.16802 -2.697414,-0.34728 -3.924747,-0.96569 -0.191032,-0.0918 -0.383799,-0.18008 -0.573093,-0.27541 -0.878395,-0.44239 -3.829902,-2.14323 2.202921,1.31503 0.225385,0.1292 -0.447109,-0.26508 -0.663863,-0.40829 -0.225089,-0.14871 -0.443868,-0.30691 -0.660998,-0.46702 -0.20664,-0.15237 -0.406694,-0.31348 -0.610042,-0.47022 -1.472554,-1.27503 -2.741652,-2.75512 -3.849756,-4.35709 -1.044367,-1.54405 -1.985139,-3.15663 -2.645928,-4.90637 z" />
+ <path
+ style="fill:#70ff01;fill-opacity:1;stroke:none;stroke-width:1.05833;stroke-dasharray:none;stroke-opacity:1"
+ id="path26"
+ d="m 37.338468,186.46669 c -0.44,-0.63362 -0.862574,-1.27957 -1.230265,-1.95811 -0.150648,-0.28365 -0.287877,-0.57257 -0.371435,-0.88318 -0.03632,-0.16684 -0.04357,-0.33711 -0.04409,-0.5072 0.0026,-0.1362 0.0029,-0.27242 0.0039,-0.40863 -1.4e-4,-0.14707 0.0011,-0.29412 0.0016,-0.44119 0.01019,-0.1587 0.0108,-0.28991 -0.05385,-0.43683 -0.06411,-0.11298 -0.111691,-0.22852 -0.131366,-0.35794 -0.01585,-0.12783 -0.01595,-0.25681 -0.01598,-0.38542 -7.94e-4,-0.15856 0.0011,-0.31711 1.9e-4,-0.47568 -0.01453,-0.1743 0.03545,-0.35847 -0.02005,-0.52483 -0.08905,-0.1579 -0.124357,-0.33484 -0.156959,-0.51084 -0.05274,-0.34766 -0.0051,-0.69544 0.04602,-1.03992 0.02593,-0.17802 0.05253,-0.35595 0.07924,-0.53386 0,0 -3.524845,-1.85549 -3.524845,-1.85549 v 0 c -0.02095,0.17807 -0.04238,0.35609 -0.06794,0.53357 -0.05505,0.37254 -0.131585,0.74383 -0.106048,1.12213 0.0089,0.21066 0.04643,0.41922 0.102669,0.62219 0.01244,0.0211 0.02484,0.0423 0.03727,0.0634 0.01847,1.4e-4 0.0445,-0.0145 0.05538,5.3e-4 0.04839,0.0663 -0.03303,0.23465 5.29e-4,0.31148 -0.0013,0.15816 -1.85e-4,0.31633 -0.0021,0.47449 -5.29e-4,0.13933 -0.0038,0.27876 -2.12e-4,0.41802 0.0062,0.16035 0.0069,0.33352 0.07382,0.48113 0.02246,0.047 0.02299,0.11445 0.06802,0.14063 0.06266,0.0364 0.06144,-0.0971 0.05886,0.14073 5.29e-4,0.1467 0.0016,0.29341 2.65e-4,0.44012 -2.62e-4,0.13656 -0.0027,0.2731 -0.0033,0.40967 -0.0019,0.19185 -0.01,0.38431 0.01564,0.57513 0.04046,0.35136 0.161287,0.68389 0.335664,0.99154 0.332142,0.71041 0.800965,1.34793 1.221131,2.0071 z" />
+ <path
+ style="fill:#70ff01;fill-opacity:1;stroke:none;stroke-width:1.05833;stroke-dasharray:none;stroke-opacity:1"
+ id="path27"
+ d="m 46.586571,186.27514 c -0.237308,-0.79498 -0.458484,-1.5961 -0.742855,-2.376 -0.102894,-0.27364 -0.256286,-0.52804 -0.333216,-0.81111 -0.03838,-0.14734 -0.0026,-0.3144 -0.123431,-0.42666 -0.10364,-0.16495 -0.102627,-0.37831 -0.110352,-0.56751 -0.0076,-0.39309 -0.01294,-0.78624 -0.01421,-1.17942 1.51e-4,-0.35883 0.0089,-0.71757 0.01008,-1.07638 0.0029,-0.19101 0.0019,-0.38205 7.94e-4,-0.57307 0.0011,-0.15596 0.0026,-0.31189 0.0013,-0.46784 -9.8e-5,-0.1437 0.0016,-0.28742 2.64e-4,-0.43111 2.2e-4,-0.0901 -3.1e-5,-0.0468 7.94e-4,-0.13008 0,0 -3.557791,-1.81278 -3.557791,-1.81278 v 0 c 7.94e-4,0.0839 5.29e-4,0.0403 7.94e-4,0.13077 -0.0011,0.14383 5.29e-4,0.28767 2.64e-4,0.4315 -0.0013,0.1564 2.46e-4,0.31278 0.0013,0.46918 -0.0011,0.1912 -0.0019,0.3824 5.29e-4,0.57358 7.94e-4,0.36188 0.0086,0.72371 0.0082,1.0856 -0.0019,0.39364 -0.01228,0.78714 -0.008,1.18077 0.0035,0.23606 0.0049,0.47169 0.03591,0.70619 0.03391,0.18484 0.186291,0.15038 0.164801,0.34671 0.04511,0.32073 0.158345,0.61026 0.316781,0.89381 0.361624,0.73471 0.535143,1.555 0.770953,2.33503 z" />
+ </g>
<text
xml:space="preserve"
style="font-size:6.72032px;text-align:start;letter-spacing:0px;writing-mode:lr-tb;direction:ltr;text-anchor:start;display:inline;fill:#000000;fill-opacity:1;stroke:#3b3b3b;stroke-width:0;stroke-dasharray:none;stroke-opacity:1"
@@ -92,6 +93,17 @@
x="23.371271"
y="122.86956"
id="tspan18">average speed</tspan></text>
+ <text
+ xml:space="preserve"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:6.72032px;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:start;letter-spacing:0px;writing-mode:lr-tb;direction:ltr;text-anchor:start;display:inline;fill:#000000;fill-opacity:1;stroke:#3b3b3b;stroke-width:0;stroke-dasharray:none;stroke-opacity:1"
+ x="23.030624"
+ y="115.17667"
+ id="text12-30-3-1-64"
+ transform="scale(0.95248428,1.0498861)"
+ class="max-speed"><tspan
+ id="tspan19"
+ x="23.030624"
+ y="115.17667">speed</tspan></text>
</g>
<rect
style="fill:#dcdcdc;fill-opacity:1;stroke:#000000;stroke-width:0.566612;stroke-dasharray:none;stroke-opacity:1"
@@ -119,22 +131,6 @@
y="112.72857"
rx="2"
ry="2" />
- <text
- xml:space="preserve"
- style="font-size:6.72032px;text-align:start;letter-spacing:0px;writing-mode:lr-tb;direction:ltr;text-anchor:start;fill:#000000;fill-opacity:1;stroke:#3b3b3b;stroke-width:0;stroke-dasharray:none;stroke-opacity:1"
- x="23.19224"
- y="114.17885"
- id="text12-30-3-8"
- transform="scale(0.95248429,1.0498861)"
- class="max-speed"><tspan
- id="tspan12-0-2-4"
- style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:6.72032px;font-family:Arial;-inkscape-font-specification:Arial;letter-spacing:0px;fill:#000000;fill-opacity:1;stroke:#3b3b3b;stroke-width:0;stroke-dasharray:none;stroke-opacity:1"
- x="23.19224"
- y="114.17885">speed</tspan><tspan
- style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:6.72032px;font-family:Arial;-inkscape-font-specification:Arial;letter-spacing:0px;fill:#000000;fill-opacity:1;stroke:#3b3b3b;stroke-width:0;stroke-dasharray:none;stroke-opacity:1"
- x="23.19224"
- y="122.65704"
- id="tspan17-0" /></text>
<text
xml:space="preserve"
style="font-size:6.72032px;text-align:start;letter-spacing:0px;writing-mode:lr-tb;direction:ltr;text-anchor:start;display:inline;fill:#000000;fill-opacity:1;stroke:#3b3b3b;stroke-width:0;stroke-dasharray:none;stroke-opacity:1"
@@ -147,6 +143,17 @@
x="23.371271"
y="122.86956"
id="tspan18-3">average speed</tspan></text>
+ <text
+ xml:space="preserve"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:6.72032px;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:start;letter-spacing:0px;writing-mode:lr-tb;direction:ltr;text-anchor:start;display:inline;fill:#000000;fill-opacity:1;stroke:#3b3b3b;stroke-width:0;stroke-dasharray:none;stroke-opacity:1"
+ x="99.371979"
+ y="188.90344"
+ id="text12-30-3-1-64-2"
+ transform="matrix(0.95248428,0,0,1.0498861,-72.912976,-77.777055)"
+ class="max-speed"><tspan
+ id="tspan19-3"
+ x="99.371979"
+ y="188.90344">speed</tspan></text>
</g>
<rect
style="fill:#dcdcdc;fill-opacity:1;stroke:#000000;stroke-width:0.566612;stroke-dasharray:none;stroke-opacity:1"
@@ -161,151 +168,146 @@
</g>
</g>
<g
- id="layer2">
+ id="nodes">
<g
- id="g11">
+ id="LONDON"
+ style="display:inline">
+ <circle
+ style="fill:#dcdcdc;fill-opacity:1;stroke:#ff6969;stroke-width:0.79375;stroke-dasharray:none;stroke-opacity:1"
+ id="rand1"
+ cx="38.769073"
+ cy="92.947372"
+ r="5" />
+ <text
+ xml:space="preserve"
+ style="font-size:7.05556px;text-align:start;letter-spacing:0px;writing-mode:lr-tb;direction:ltr;text-anchor:start;fill:#000000;fill-opacity:1;stroke:#3b3b3b;stroke-width:0;stroke-dasharray:none;stroke-opacity:1"
+ x="45.433159"
+ y="86.757271"
+ id="text12"
+ class=" node-text"><tspan
+ id="tspan12"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:7.05556px;font-family:Arial;-inkscape-font-specification:Arial;letter-spacing:0px;fill:#000000;fill-opacity:1;stroke:#3b3b3b;stroke-width:0;stroke-dasharray:none;stroke-opacity:1"
+ x="45.433159"
+ y="86.757271">name</tspan></text>
<g
- id="g14"
- style="display:inline">
- <g
- id="LONDON">
- <circle
- style="fill:#dcdcdc;fill-opacity:1;stroke:#ff6969;stroke-width:0.79375;stroke-dasharray:none;stroke-opacity:1"
- id="rand1"
- cx="38.769073"
- cy="92.947372"
- r="5" />
- <text
- xml:space="preserve"
- style="font-size:7.05556px;text-align:start;letter-spacing:0px;writing-mode:lr-tb;direction:ltr;text-anchor:start;fill:#000000;fill-opacity:1;stroke:#3b3b3b;stroke-width:0;stroke-dasharray:none;stroke-opacity:1"
- x="45.433159"
- y="86.757271"
- id="text12"
- class=" node-text"><tspan
- id="tspan12"
- style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:7.05556px;font-family:Arial;-inkscape-font-specification:Arial;letter-spacing:0px;fill:#000000;fill-opacity:1;stroke:#3b3b3b;stroke-width:0;stroke-dasharray:none;stroke-opacity:1"
- x="45.433159"
- y="86.757271">name</tspan></text>
- <g
- id="g13"
- transform="translate(-4.9380474,-10.158269)"
- class="show_on_hover">
- <rect
- style="fill:#ffffff;fill-opacity:1;stroke:#3b3b3b;stroke-width:0.79375;stroke-dasharray:none;stroke-opacity:1"
- id="rect12"
- width="52.061001"
- height="34.848507"
- x="19.046753"
- y="112.72857"
- rx="2"
- ry="2" />
- <text
- xml:space="preserve"
- style="font-size:6.72032px;text-align:start;letter-spacing:0px;writing-mode:lr-tb;direction:ltr;text-anchor:start;fill:#000000;fill-opacity:1;stroke:#3b3b3b;stroke-width:0;stroke-dasharray:none;stroke-opacity:1"
- x="23.19224"
- y="114.17885"
- id="text12-30"
- class="node-info"
- transform="scale(0.95248429,1.0498861)"><tspan
- id="tspan12-0"
- style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:6.72032px;font-family:Arial;-inkscape-font-specification:Arial;letter-spacing:0px;fill:#000000;fill-opacity:1;stroke:#3b3b3b;stroke-width:0;stroke-dasharray:none;stroke-opacity:1"
- x="23.19224"
- y="114.17885">info</tspan></text>
- </g>
- </g>
- <g
- id="AMSTERDAM">
- <circle
- style="fill:#dcdcdc;fill-opacity:1;stroke:#ff6969;stroke-width:0.79375;stroke-dasharray:none;stroke-opacity:1"
- id="rand2"
- cx="138.4001"
- cy="92.947372"
- r="5"
- transform="translate(-9.2040427)" />
- <text
- xml:space="preserve"
- style="font-size:7.05556px;text-align:start;letter-spacing:0px;writing-mode:lr-tb;direction:ltr;text-anchor:start;fill:#000000;fill-opacity:1;stroke:#3b3b3b;stroke-width:0;stroke-dasharray:none;stroke-opacity:1"
- x="133.78204"
- y="87.050667"
- id="text12-0"
- class=" node-text"><tspan
- id="tspan12-1"
- style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:7.05556px;font-family:Arial;-inkscape-font-specification:Arial;letter-spacing:0px;fill:#000000;fill-opacity:1;stroke:#3b3b3b;stroke-width:0;stroke-dasharray:none;stroke-opacity:1"
- x="133.78204"
- y="87.050667">name</tspan></text>
- <g
- id="g13-3"
- transform="translate(118.24697,-21.786738)"
- class="show_on_hover">
- <rect
- style="fill:#ffffff;fill-opacity:1;stroke:#3b3b3b;stroke-width:0.79375;stroke-dasharray:none;stroke-opacity:1"
- id="rect12-2"
- width="52.061001"
- height="34.848507"
- x="19.046753"
- y="112.72857"
- rx="2"
- ry="2" />
- <text
- xml:space="preserve"
- style="font-size:6.72032px;text-align:start;letter-spacing:0px;writing-mode:lr-tb;direction:ltr;text-anchor:start;fill:#000000;fill-opacity:1;stroke:#3b3b3b;stroke-width:0;stroke-dasharray:none;stroke-opacity:1"
- x="23.19224"
- y="114.17885"
- id="text12-30-7"
- class="node-info"
- transform="scale(0.95248429,1.0498861)"><tspan
- id="tspan12-0-1"
- style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:6.72032px;font-family:Arial;-inkscape-font-specification:Arial;letter-spacing:0px;fill:#000000;fill-opacity:1;stroke:#3b3b3b;stroke-width:0;stroke-dasharray:none;stroke-opacity:1"
- x="23.19224"
- y="114.17885">info</tspan></text>
- </g>
- </g>
- <g
- id="FRANKFURT">
- <circle
- style="fill:#dcdcdc;fill-opacity:1;stroke:#ff6969;stroke-width:0.79375;stroke-dasharray:none;stroke-opacity:1"
- id="rand3"
- cx="129.19606"
- cy="185.36166"
- r="5" />
- <text
- xml:space="preserve"
- style="font-size:7.05556px;text-align:start;letter-spacing:0px;writing-mode:lr-tb;direction:ltr;text-anchor:start;fill:#000000;fill-opacity:1;stroke:#3b3b3b;stroke-width:0;stroke-dasharray:none;stroke-opacity:1"
- x="136.65907"
- y="179.83073"
- id="text12-3"
- class=" node-text"><tspan
- id="tspan12-8"
- style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:7.05556px;font-family:Arial;-inkscape-font-specification:Arial;letter-spacing:0px;fill:#000000;fill-opacity:1;stroke:#3b3b3b;stroke-width:0;stroke-dasharray:none;stroke-opacity:1"
- x="136.65907"
- y="179.83073">name</tspan></text>
- <g
- id="g13-1"
- transform="translate(85.832571,81.404649)"
- class="show_on_hover">
- <rect
- style="fill:#ffffff;fill-opacity:1;stroke:#3b3b3b;stroke-width:0.79375;stroke-dasharray:none;stroke-opacity:1"
- id="rect12-7"
- width="52.061001"
- height="34.848507"
- x="19.046753"
- y="112.72857"
- rx="2"
- ry="2" />
- <text
- xml:space="preserve"
- style="font-size:6.72032px;text-align:start;letter-spacing:0px;writing-mode:lr-tb;direction:ltr;text-anchor:start;fill:#000000;fill-opacity:1;stroke:#3b3b3b;stroke-width:0;stroke-dasharray:none;stroke-opacity:1"
- x="23.19224"
- y="114.17885"
- id="text12-30-4"
- class="node-info"
- transform="scale(0.95248429,1.0498861)"><tspan
- id="tspan12-0-5"
- style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:6.72032px;font-family:Arial;-inkscape-font-specification:Arial;letter-spacing:0px;fill:#000000;fill-opacity:1;stroke:#3b3b3b;stroke-width:0;stroke-dasharray:none;stroke-opacity:1"
- x="23.19224"
- y="114.17885">info</tspan></text>
- </g>
- </g>
+ id="g13"
+ transform="translate(-4.9380474,-10.158269)"
+ class="show_on_hover">
+ <rect
+ style="fill:#ffffff;fill-opacity:1;stroke:#3b3b3b;stroke-width:0.79375;stroke-dasharray:none;stroke-opacity:1"
+ id="rect12"
+ width="52.061001"
+ height="34.848507"
+ x="19.046753"
+ y="112.72857"
+ rx="2"
+ ry="2" />
+ <text
+ xml:space="preserve"
+ style="font-size:6.72032px;text-align:start;letter-spacing:0px;writing-mode:lr-tb;direction:ltr;text-anchor:start;fill:#000000;fill-opacity:1;stroke:#3b3b3b;stroke-width:0;stroke-dasharray:none;stroke-opacity:1"
+ x="23.19224"
+ y="114.17885"
+ id="text12-30"
+ class="node-info"
+ transform="scale(0.95248429,1.0498861)"><tspan
+ id="tspan12-0"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:6.72032px;font-family:Arial;-inkscape-font-specification:Arial;letter-spacing:0px;fill:#000000;fill-opacity:1;stroke:#3b3b3b;stroke-width:0;stroke-dasharray:none;stroke-opacity:1"
+ x="23.19224"
+ y="114.17885">info</tspan></text>
+ </g>
+ </g>
+ <g
+ id="AMSTERDAM"
+ style="display:inline">
+ <circle
+ style="fill:#dcdcdc;fill-opacity:1;stroke:#ff6969;stroke-width:0.79375;stroke-dasharray:none;stroke-opacity:1"
+ id="rand2"
+ cx="138.4001"
+ cy="92.947372"
+ r="5"
+ transform="translate(-9.2040427)" />
+ <text
+ xml:space="preserve"
+ style="font-size:7.05556px;text-align:start;letter-spacing:0px;writing-mode:lr-tb;direction:ltr;text-anchor:start;fill:#000000;fill-opacity:1;stroke:#3b3b3b;stroke-width:0;stroke-dasharray:none;stroke-opacity:1"
+ x="133.78204"
+ y="87.050667"
+ id="text12-0"
+ class=" node-text"><tspan
+ id="tspan12-1"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:7.05556px;font-family:Arial;-inkscape-font-specification:Arial;letter-spacing:0px;fill:#000000;fill-opacity:1;stroke:#3b3b3b;stroke-width:0;stroke-dasharray:none;stroke-opacity:1"
+ x="133.78204"
+ y="87.050667">placeholder doesnt matter</tspan></text>
+ <g
+ id="g13-3"
+ transform="translate(118.24697,-21.786738)"
+ class="show_on_hover">
+ <rect
+ style="fill:#ffffff;fill-opacity:1;stroke:#3b3b3b;stroke-width:0.79375;stroke-dasharray:none;stroke-opacity:1"
+ id="rect12-2"
+ width="52.061001"
+ height="34.848507"
+ x="19.046753"
+ y="112.72857"
+ rx="2"
+ ry="2" />
+ <text
+ xml:space="preserve"
+ style="font-size:6.72032px;text-align:start;letter-spacing:0px;writing-mode:lr-tb;direction:ltr;text-anchor:start;fill:#000000;fill-opacity:1;stroke:#3b3b3b;stroke-width:0;stroke-dasharray:none;stroke-opacity:1"
+ x="23.19224"
+ y="114.17885"
+ id="text12-30-7"
+ class="node-info"
+ transform="scale(0.95248429,1.0498861)"><tspan
+ id="tspan12-0-1"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:6.72032px;font-family:Arial;-inkscape-font-specification:Arial;letter-spacing:0px;fill:#000000;fill-opacity:1;stroke:#3b3b3b;stroke-width:0;stroke-dasharray:none;stroke-opacity:1"
+ x="23.19224"
+ y="114.17885">info</tspan></text>
+ </g>
+ </g>
+ <g
+ id="FRANKFURT"
+ style="display:inline">
+ <circle
+ style="fill:#dcdcdc;fill-opacity:1;stroke:#ff6969;stroke-width:0.79375;stroke-dasharray:none;stroke-opacity:1"
+ id="rand3"
+ cx="129.19606"
+ cy="185.36166"
+ r="5" />
+ <text
+ xml:space="preserve"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:7.05556px;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:start;letter-spacing:0px;writing-mode:lr-tb;direction:ltr;text-anchor:start;fill:#000000;fill-opacity:1;stroke:#3b3b3b;stroke-width:0;stroke-dasharray:none;stroke-opacity:1"
+ x="136.65907"
+ y="179.83073"
+ id="text12-3"
+ class=" node-text"><tspan
+ id="tspan21"
+ x="136.65907"
+ y="179.83073"></tspan></text>
+ <g
+ id="g13-1"
+ transform="translate(85.832571,81.404649)"
+ class="show_on_hover">
+ <rect
+ style="fill:#ffffff;fill-opacity:1;stroke:#3b3b3b;stroke-width:0.79375;stroke-dasharray:none;stroke-opacity:1"
+ id="rect12-7"
+ width="52.061001"
+ height="34.848507"
+ x="19.046753"
+ y="112.72857"
+ rx="2"
+ ry="2" />
+ <text
+ xml:space="preserve"
+ style="font-size:6.72032px;text-align:start;letter-spacing:0px;writing-mode:lr-tb;direction:ltr;text-anchor:start;fill:#000000;fill-opacity:1;stroke:#3b3b3b;stroke-width:0;stroke-dasharray:none;stroke-opacity:1"
+ x="23.19224"
+ y="114.17885"
+ id="text12-30-4"
+ class="node-info"
+ transform="scale(0.95248429,1.0498861)"><tspan
+ id="tspan12-0-5"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:6.72032px;font-family:Arial;-inkscape-font-specification:Arial;letter-spacing:0px;fill:#000000;fill-opacity:1;stroke:#3b3b3b;stroke-width:0;stroke-dasharray:none;stroke-opacity:1"
+ x="23.19224"
+ y="114.17885">info</tspan></text>
</g>
</g>
</g>
diff --git a/static/styles.css b/static/styles.css
index b70bb771e21938a9ac471280b4ecba091b30b0a4..ac0f42630ae827d93dc572a85cfde5d1d3e66a8f 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -3,7 +3,7 @@
}
.node-text {
- fill: none;
+ fill: green;
}
.node-text tspan:hover {
@@ -11,17 +11,22 @@
}
.show_on_hover {
- display: none !important;
+ /*display: none !important;*/
+ opacity: 0;
+ visibility: hidden;
+ transition: opacity 0s, visibility 0s;
+ transition-delay: 0.5s ;
}
circle:hover ~.show_on_hover,
.show_on_hover:has(~ circle:hover),
rect:hover ~.show_on_hover,
-.show_on_hover:has(~ rect:hover) {
- display: block !important;
+.show_on_hover:has(~ rect:hover),
+.show_on_hover:hover {
+ /*display: block !important;*/
+ visibility: visible;
+ opacity: 1;
+ transition-delay: 0s;
}
-.AMSTERDAM.FRANKFURT {
- fill: orange;
-}
diff --git a/static/svg_replace.js b/static/svg_replace.js
index 6df1532b70d70a3414b75b4dd6e916565cf4a41f..ab29455bd3ec320834becc52a1476412f5af09e4 100644
--- a/static/svg_replace.js
+++ b/static/svg_replace.js
@@ -1,8 +1,8 @@
function set_text(replacement_list) {
for (const [selector, text] of replacement_list) {
- console.log(`replacing: ${selector} with: ${text}`);
+ // console.log(`replacing: ${selector} with: ${text}`);
const elements = document.querySelectorAll(selector);
- console.log(`found ${elements.length} elements`);
+ // console.log(`found ${elements.length} elements`);
for (const element of elements) {
element.innerHTML = text;
}
@@ -13,9 +13,9 @@ function set_text(replacement_list) {
function set_style(style_list) {
for (const [selector, style, style_value] of style_list) {
- console.log(`replacing: ${selector} with: ${style}: ${style_value}`);
+ // console.log(`replacing: ${selector} with: ${style}: ${style_value}`);
const elements = document.querySelectorAll(selector);
- console.log(`found ${elements.length} elements`);
+ // console.log(`found ${elements.length} elements`);
for (const element of elements) {
element.style[style] = style_value;
}
@@ -26,7 +26,7 @@ function set_style(style_list) {
function clean(string) {
// removes spaces and special characters to make a string a valid CSS class or id name
- // also leading numbers or underscore + number
+ // also if there is a number or underscore + number append an 'n' to the front
let result = string.replace(/ /g,"_");
if (/^_*[0-9]/.test(result)) {
result = "n" + result;
@@ -34,33 +34,30 @@ function clean(string) {
return result.replace(/[^a-zA-Z0-9_]/g, "");
}
-function pretty_speed(speed) {
-// Converts a link speed in bps to a rounded string with units
-}
function update_pops(pops) {
// for every item in the json return appropriate pairs of css selectors and text to replace
-// returns the list, this function will have no side effects
- console.log(pops)
- let pop_country = pops.pops.map((pop) => {
- return [`#${clean(pop['name'])} .node-info tspan`, `Country: ${pop['country']}`];
- })
+ let changes = []
+ for (const pop of pops.pops) {
+ let base_selector = `#${clean(pop['name'])}`
- return pop_country;
+ changes.push([`${base_selector} .node-info tspan`, `Country: ${pop['country']}`])
+ changes.push([`${base_selector} .node-text tspan`, `${pop['name']}`])
+ }
+ return changes;
}
function update_trunks(services) {
// for every item in the json return appropriate pairs of css selectors and text to replace
-// returns the list, this function will have no side effects
-
- // filter to include only items with two pops, no idea what it means if there is just one
+// filter to include only items with two pops, no idea what it means if there is just one
let filtered_services = services.services.filter((service) => service['pops'].length === 2)
console.log(filtered_services)
let changes = []
for (const service of filtered_services) {
let base_selector = `.${clean(service['pops'][0])}.${clean(service['pops'][1])}`
- changes.push([`${base_selector} .max-speed tspan`, `${service['overlays']['speed']}`])
+ changes.push([`${base_selector} .max-speed tspan`, `Speed: ${service['overlays']['speed']}`])
+ changes.push([`${base_selector} .avg-speed tspan`, `Mean egress: ${service['overlays']['mean']['egress']}`])
}
return changes;
}
@@ -104,11 +101,16 @@ function set_text_from_api() {
update_trunks_from_api();
}
-let css_list = [
- ['.AMSTERDAM.FRANKFURT', 'fill', 'blue'],
- ['.AMSTERDAM.LONDON', 'fill', 'green'],
-]
-let text_list = [
+function set_css_from_api() {
+ // dont exactly get where did data should come from right now, probably would be boring anyways
+ let fake_data = [
+ ['.AMSTERDAM.FRANKFURT > rect', 'fill', 'red'],
+ ['.AMSTERDAM.LONDON > rect', 'fill', 'green'],
+ ];
+ set_style(fake_data);
+}
+
+let text_list_test = [
['tspan', 'REPLACED ALL 1'],
['#LONDON .node-text tspan', 'LONDON'],
['#LONDON .node-info tspan', 'LONDON INFO'],
diff --git a/templates/item.html b/templates/item.html
index 366cced2fb40918358228b5ced7460ad50bca445..99fd5b3ac2b95b29d3ef81b87b8a743bf8105517 100644
--- a/templates/item.html
+++ b/templates/item.html
@@ -7,16 +7,13 @@
<script src="{{ url_for('static', path='/svg_replace.js') }}" defer></script>
</head>
<body>
-HELLO?
-ITEM ID: {{id}}
-<div class="test">
- hiiii
- <h1>hiiiiii</h1>
- does this work? {{2+2 *3}}
-</div>
+<h1>
+ SVG data replacement test
+</h1>
+
<div>
- <button type="button" onclick="set_text_from_api()">Set Text With API Data</button>
- <button type="button">Set CSS With API Data</button>
+ <button type="button" onclick="set_text_from_api()">Set Text With (real) API Data</button>
+ <button type="button" onclick="set_css_from_api()">Set CSS With (fake) API Data</button>
</div>
<div>
{{svg|safe}}