lare/autopeering
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

"small changes"

Browse source 
- remove http only in login.html
- extract PeeringManager into separate file
- add "progress meter" for "used" to "available" peerings
This commit is contained in:
lare 2022-12-12 19:40:30 +01:00
parent d6509ef6fe
commit 2bf2174763
8 changed files with 271 additions and 166 deletions
Download patch file Download diff file Expand all files Collapse all files

2
web/frontend/index.html
View file

@ -16,7 +16,7 @@
<td>{{node}}</td>
<td>{{config["nodes"][node]["country"]}}</td>
<td>{{config["nodes"][node]["city"]}}</td>
<td></td>
<td><progress value="{{peerings.amount_by_node(node)}}" max="{{config['nodes'][node]['capacity']}}"></progress></td>
<td><a href="peerings/new?node={{node}}">peer</a></td>
</tr>
{% endfor %}

2
web/frontend/login.html
View file

@ -11,7 +11,7 @@
type="hidden"
id="return"
name="return"
value='{{"http://"+config["domain"]+"/api/auth/kverify"}}'
value='{{config["domain"]+"/api/auth/kverify"}}'
/>
<button
type="submit"

16
web/frontend/peerings-edit.html
View file

@ -214,13 +214,13 @@
</tr>
<tr>
<td><label for="peer-v4">your ipv4</label></td>
<td><input type="checkbox" name="peer-v4-enabled" id="peer-v4-enabled"onchange="return update_from_v4()" {% if selected_peering["ipv4"] %} checked {% endif %}></td>
<td><input type="text" name="peer-v4" id="peer-v4"onchange="return update_from_v4()" {% if selected_peering["ipv4"] %}value="{{selected_peering['ipv4']}}" {% endif %}></td>
<td><input type="checkbox" name="peer-v4-enabled" id="peer-v4-enabled" onchange="return update_from_v4()" {% if selected_peering["ipv4"] %} checked {% endif %}></td>
<td><input type="text" name="peer-v4" id="peer-v4" onchange="return update_from_v4()" {% if selected_peering["ipv4"] %}value="{{selected_peering['ipv4']}}" {% endif %}></td>
</tr>
<tr>
<td><label for="peer-v6">your ipv6</label></td>
<td><input type="checkbox" name="peer-v6-enabled" id="peer-v6-enabled"onchange="return update_from_v6()"{% if selected_peering["ipv6"] %} checked {% endif %}></td>
<td><input type="text" name="peer-v6" id="peer-v6"onchange="return update_from_v6()" {% if selected_peering["ipv6"] %}value="{{selected_peering['ipv6']}}" {% endif %}></td>
<td><input type="checkbox" name="peer-v6-enabled" id="peer-v6-enabled" onchange="return update_from_v6()"{% if selected_peering["ipv6"] %} checked {% endif %}></td>
<td><input type="text" name="peer-v6" id="peer-v6" onchange="return update_from_v6()" {% if selected_peering["ipv6"] %}value="{{selected_peering['ipv6']}}" {% endif %}></td>
</tr>
<tr>
<td><h4>BGP</h4></td>
@ -228,13 +228,13 @@
<td></td>
</tr>
<tr>
<td>MultiProtocol</td>
<td><input type="checkbox" name="bgp-multi-protocol" id="bgp-multi-protocol" onchange="return update_from_mpbgp()" {% if selected_peering["bgp-mp"] %} checked {% endif %}></td>
<td><label for="bgp-multi-protocol">MultiProtocol</label></td>
<td><input type="checkbox" name="bgp-multi-protocol" id="bgp-multi-protocol" onchange="return update_from_mpbgp()" {% if selected_peering["bgp_mp"] == True %} checked {% endif %}></td>
<td></td>
</tr>
<tr>
<td>extended next hop</td>
<td><input type="checkbox" name="bgp-extended-next-hop" id="bgp-extended-next-hop" onchange="return update_from_enh()" {% if selected_peering["bgp-enh"] %} checked {% endif %}></td>
<td><label for="bgp-extended-next-hop">extended next hop</label></td>
<td><input type="checkbox" name="bgp-extended-next-hop" id="bgp-extended-next-hop" onchange="return update_from_enh()" {% if selected_peering["bgp_enh"] == True%} checked {% endif %}></td>
<td></td>
</tr>
</table>

50
web/frontend/static/style.css
View file

@ -62,6 +62,46 @@ footer.flex {
flex-direction: row;
}
/* # index.html */
/* based on https://codepen.io/t_afif/pen/RwQZLYb */
progress[value] {
--w: 100px; /* the width*/
--color: /* the progress color */
/* linear-gradient(#fff8,#fff0), */
/* repeating-linear-gradient(135deg,#0003 0 10px,#0000 0 20px), */
/* if < 30% "red" */
linear-gradient(green 0 0) 0 /calc(var(--w)*.8 - 100%) 1px,
/* if < 60% "orange" */
linear-gradient(orange 0 0) 0 /calc(var(--w)*.9 - 100%) 1px,
/* else "green" */
red;
--background: lightgrey; /* the background color */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: none;
width: var(--w);
margin: 0 10px;
border-radius: 10em;
background: var(--background);
}
progress[value]::-webkit-progress-bar {
border-radius: 10em;
background: var(--background);
}
progress[value]::-webkit-progress-value {
border-radius: 10em;
background: var(--color);
}
progress[value]::-moz-progress-bar {
border-radius: 10em;
background: var(--color);
}
/* for peerings-{edit,new}.html */
.example-config {
background-color: white;
padding: 1%;
@ -78,6 +118,7 @@ form>div>* {
margin: 10px;
}
/* for peerings.html */
.peering {
border-color: var(--other-background);
border-radius: 10px;
@ -99,6 +140,11 @@ form>div>* {
padding: 10px;
}
.peering>* {
width: auto;
align-items: center;
}
/* button def */
button,
input[type=button] {
background-color: #00000020;
@ -113,10 +159,6 @@ input[type=button].button-selected {
color: var(--text-color-dark);
}
.peering>* {
width: auto;
align-items: center;
}
.button-blue {
border-color: lightblue;