Skip to content
This repository has been archived by the owner on Feb 25, 2023. It is now read-only.

Commit

Permalink
Merge pull request #11 from mattkasun/ingress_layout
Browse files Browse the repository at this point in the history 
Ingress layout
  • Loading branch information
@mattkasun
mattkasun authored Sep 27, 2021
2 parents 81edd7a + 6fcb53e commit 656b33a
Show file tree
Hide file tree
Showing 5 changed files with 75 additions and 66 deletions.
18 changes: 18 additions & 0 deletions html/buttonbar.html
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
{{define "buttonbar"}}
<div class="w3-bar w3-blue">
<div class="w3-content w3-blue">
<button class="w3-bar-item w3-button w3-blue" onclick="document.getElementById('NewNetwork').style.display='block'">Create Network</button>
<button class="w3-bar-item w3-button"></button>
<button class="w3-bar-item w3-button tablink w3-teal" onclick="openTab(event, 'Networks')">Network Details</button>
Expand All @@ -9,6 +10,23 @@
<button class="w3-bar-item w3-button tablink" onclick="openTab(event, 'ExtClient')">External Clients</button>

</div>
<div class="w3-dropdown-hover w3-right">
<button class="w3-button w3-blue w3-xlarge ">&#9776 &nbsp&nbsp&nbsp&nbsp &nbsp&nbsp </button>
<div class="w3-dropdown-content w3-bar-block w3-border">
{{ if .Admin }}
<button class="w3-bar-item w3-button" onclick="document.getElementById('AddUser').style.display='block';">Add User</button>
<button class="w3-bar-item w3-button" onclick="document.getElementById('DeleteUser').style.display='block';">Delete User</button>
{{end}}
<button class="w3-bar-item w3-button" onclick="document.location='edit_user';">Update User</button>

<button class="w3-bar-item w3-button" onclick="document.location='https://docs.netmaker.org';">Docs</a>
<button class="w3-bar-item w3-button" onclick="document.location='/logout';">LogOut</a>

<button class="w3-bar-item w3-button" onclick="document.getElementById('About').style.display='block'">About</button>
</div>
</div>

</div>


{{/*NewNetwork*/}}
Expand Down
76 changes: 46 additions & 30 deletions html/extclient.html
View file
Original file line number Diff line number Diff line change
@@ -1,50 +1,66 @@
{{ define "ExtClient" }}
<div id="ExtClient" class="w3-row tab" style="display=none">
<div class="w3-third">
<p> Available Ingress Gateways
<div class="net All">
<p> Available Ingress Gateways</p>
{{range .Nodes}}
<p><button id="node{{.MacAddress}}" class="w3-lightgrey" onclick="expand('ext{{.MacAddress}}');">{{.Name}} @ {{.Network}}</button></p>
</div>

<div class="net {{.Network}}" id='ext{{.MacAddress}}'>
{{range .Nodes}}
<form action="/create_ingress_client/{{.Network}}/{{.MacAddress}}" method="POST" style="display:inline">
<label> Add External Client </label>
<button title="Create Client" onclick="return confirm('Are you sure you want to add an extenal client to the {{.Network}} network?');" class="w3-circle w3-blue"><span class="material-icons"> add_circle_outline</span></button><br>
<p><label>{{.Name}}</label>@<label>{{.Network}}</label>
<button title="Create Client" onclick="return confirm('Are you sure you want to add an extenal client to the {{.Network}} network?');" class="w3-circle"><span class="material-icons">add_circle_outline</span></button></p>
</form>
</div>
{{end}}
{{end}}
</div>
{{range .Nodes}}
<div class="net {{.Network}}">
<form action="/create_ingress_client/{{.Network}}/{{.MacAddress}}" method="POST" style="display:inline">
<label>{{.Name}}</label>
<label>{{.Network}}</label>
<button title="Create Client" onclick="return confirm('Are you sure you want to add an extenal client to the {{.Network}} network?');" class="w3-circle"><span class="material-icons">add_circle_outline</span></button>
</form>
</div>
{{end}}
</div>


<div class="w3-twothird">
<p>External Clients</p>
<div class="net All">
{{range .ExtClients}}
{{template "ExtClientDetails" .}}
{{end}}
</div>
{{range .ExtClients}}
<div class="net {{.Network}}">
{{template "ExtClientDetails" .}}
</div>
{{end}}
</div>
</div>
{{end}}

{{define "ExtClientDetails"}}
<button class="w3-block w3-white w3-left-align" onclick="openClient('{{.ClientID}}');">{{.ClientID}} @ {{.Network}}</button>

<div class="w3-twothird">
<p>External Clients</p>
{{range .ExtClients}}
<button class="w3-block w3-white w3-left-align" onclick="expand('client{{.ClientID}}');">{{.ClientID}} @ {{.Network}}</button>
<div id="client{{.ClientID}}" class="w3-container w3-hide">
<p><label>IP </label><input type=disabled placeholder="{{.Address}}"></p>
<p><label>Public Key </label><input type=disabled placeholder="{{.PublicKey}}"></p>
<div class=btn-group>
<form class="form-inline" action="get_qr/{{.Network}}/{{.ClientID}}" method=POST>
<p><label>IP </label><input type=disabled placeholder="{{.Address}}"></p>
<p><label>Public Key </label><input type=disabled placeholder="{{.PublicKey}}"></p>
<div class=btn-group>
<form class="form-inline" action="get_qr/{{.Network}}/{{.ClientID}}" method=POST>

<button class="w3-bar-item", type=submit>Show QR Code <span class="material-icons">qr_code</span></Button>
</form>
<form class="form-inline" action="get_client_config/{{.Network}}/{{.ClientID}}" method=POST>
</form>
<form class="form-inline" action="get_client_config/{{.Network}}/{{.ClientID}}" method=POST>
<button class="w3-bar-item">DownLoad Config <span class="material-icons">cloud_download</span></button>
</form>
<form class="form-inline" action="/edit_ingress_client/{{.Network}}/{{.ClientID}}" method=POST>
</form>
<form class="form-inline" action="/edit_ingress_client/{{.Network}}/{{.ClientID}}" method=POST>
<button class="w3-bar-item w3-circle w3-white" onclick="document.getElementById('EditExtClient');"><span class="material-icons">edit</span></button>
</form>
<form class="form-inline" action="/delete_ingress_client/{{.Network}}/{{.ClientID}}" method=POST>
</form>
<form class="form-inline" action="/delete_ingress_client/{{.Network}}/{{.ClientID}}" method=POST>
<button class="w3-bar-item w3-circle w3-red"><span class="material-icons">delete</span></button>
</form>

</div>
</form>
</div>
</div>
{{end}}
</div>
</div>
{{end}}

{{ define "EditExtClient" }}
<html>
Expand Down
28 changes: 4 additions & 24 deletions html/header.html
View file
Original file line number Diff line number Diff line change
@@ -1,34 +1,14 @@
{{define "Header"}}
<div class="w3-cell-row w3-blue">
<div class="w3-cell ">&nbsp&nbsp&nbsp&nbsp</div>
<div class="w3-cell w3-cell-middle w3-blue w3-hide-small w3-hide-medium">
<img src="/images/netmaker2.png" alt="Netmaker Makes Networks">
</div>
<div class="w3-cell w3-cell-middle w3-blue w3-hide-large">
<div class="w3-hide-small w3-hide-medium">
<center><img src="/images/netmaker2.png" alt="Netmaker Makes Networks"></center>
</div>
<div class="w3-hide-large">
<center><img src="/images/netmaker-small.png" alt="Netmaker Makes Networks"></center>
</div>
<div class="w3-cell w3-blue" >
<div class="w3-dropdown-hover w3-right">
<button class="w3-button w3-blue w3-xlarge ">&#9776 &nbsp&nbsp&nbsp&nbsp &nbsp&nbsp </button>
<div class="w3-dropdown-content w3-bar-block w3-border">
{{ if .Admin }}
<button class="w3-bar-item w3-button" onclick="document.getElementById('AddUser').style.display='block';">Add User</button>
<button class="w3-bar-item w3-button" onclick="document.getElementById('DeleteUser').style.display='block';">Delete User</button>
{{end}}
<button class="w3-bar-item w3-button" onclick="document.location='edit_user';">Update User</button>

<button class="w3-bar-item w3-button" onclick="document.location='https://docs.netmaker.org';">Docs</a>
<button class="w3-bar-item w3-button" onclick="document.location='/logout';">LogOut</a>

<button class="w3-bar-item w3-button" onclick="document.getElementById('About').style.display='block'">About</button>
</div>
</div>
</div>
</div>


</div>

<div id="About" class=w3-modal>
<div class="w3-modal-content w3-card-4 w3-animate-zoom w3-padding" style="width:50%">
<div class="w3-container w3-center">
Expand Down
10 changes: 1 addition & 9 deletions html/layout.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,6 @@
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.tab{
max-width:1024px;
margin: auto;
padding: 10px;
}
</style>
<!-- <link rel="stylesheet" href="stylesheet/bar.css" type="text/css">-->
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3.css" type="text/css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined">
Expand All @@ -21,7 +13,7 @@
</head>
<body onLoad="setUp('{{.Page}}', '{{.Message}}')">
{{template "Header" . }}
{{template "buttonbar"}}
{{template "buttonbar" . }}
{{template "Sidebar" .}}
<div class="w3-main" style="margin-left:200px">
<button class="w3-button w3-grey w3-small w3-hide-large" onclick="document.getElementById('sidebar').style.display='block';">&#9776;</button>
Expand Down
9 changes: 6 additions & 3 deletions html/script.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
x[i].style.display="none";
}
document.getElementById(tabName).style.display = "block";

{{/*
var x = document.getElementsByClassName("net");
for (i=0; i<x.length; i++) {
Expand All @@ -30,6 +30,7 @@
x[i].style.display="none"
}
}
*/}}

}

Expand Down Expand Up @@ -76,6 +77,7 @@
}
}


function grantAdmin(id, div) {
var checked = document.getElementById(id).checked;
if (checked) {
Expand Down Expand Up @@ -187,9 +189,10 @@
function expand(div) {
var x = document.getElementById(div);
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
x.className = x.className.replace(" w3-hide", " w3-show");
{{/*x.className += " w3-show";*/}}
} else {
x.className = x.className.replace(" w3-show", "");
x.className = x.className.replace(" w3-show", " w3-hide");
}
}

Expand Down

0 comments on commit 656b33a

Please sign in to comment.