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

completely new layout #13

Merged
merged 1 commit into from
Sep 28, 2021
Merged

completely new layout #13

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
78 changes: 30 additions & 48 deletions html/buttonbar.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,62 +1,44 @@
{{define "buttonbar"}}
<div class="w3-bar w3-blue">
<div class="w3-content w3-blue">
<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>
<button class="w3-bar-item w3-button tablink" onclick="openTab(event, 'Nodes')">Node</button>
<button class="w3-bar-item w3-button tablink" onclick="openTab(event, 'Keys')">Access Keys</button>
<button class="w3-bar-item w3-button tablink" onclick="alert('Not Implemented Yet')">DNS</button>
<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">
<button class="w3-bar-item w3-button w3-blue" onclick="document.getElementById('NewNetwork').style.display='block'">Create Network</button>
{{ 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</button>
<button class="w3-bar-item w3-button" onclick="document.location='/logout';">LogOut</button>

<button class="w3-bar-item w3-button" onclick="document.getElementById('About').style.display='block'">About</button>
</div>
<div class="w3-content w3-blue">
<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>
<button class="w3-bar-item w3-button tablink" onclick="openTab(event, 'Nodes')">Node</button>
<button class="w3-bar-item w3-button tablink" onclick="openTab(event, 'Keys')">Access Keys</button>
<button class="w3-bar-item w3-button tablink" onclick="alert('Not Implemented Yet')">DNS</button>
<button class="w3-bar-item w3-button tablink" onclick="openTab(event, 'ExtClient')">External Clients</button>
</div>

</div>


{{/*NewNetwork*/}}
<div id="NewNetwork" class="w3-modal">
<div class="w3-modal-content w3-card-4 animate-zoom w3-padding" style="width:50%">
<div class="w3-center"><br>
<span onclick="document.getElementById('NewNetwork').style.display='none'" class="w3-button w3-xlarge w3-hover-red w3-display-topright" title="Close Modal">&times;</span>
<div class="w3-modal-content w3-card-4 animate-zoom w3-padding" style="width:50%">
<div class="w3-center"><br>
<span onclick="document.getElementById('NewNetwork').style.display='none'" class="w3-button w3-xlarge w3-hover-red w3-display-topright" title="Close Modal">&times;</span>

<form class="w3-container" method=POST action="/create_network">
<div class="w3-section">
<label><b>Network Name</b></label>
<input class="w3-input w3-border w3-margin-bottom" type="text" placeholder="newnetwork" name="name" required>
<label><b>Address Range</b></label>
<input class="w3-input w3-border" type="text" placeholder="10.100.100.0/24" name="address" required>
<div class="w3-container w3-left-align">
<input class="w3-check" type="checkbox" name="dual" value="yes"> Use Dual Stack<br>
<input class="w3-check" type="checkbox" name="local" value="yes"> Is Local<br>
<input class="w3-check" type="checkbox" name="udp" value="yes"> Use UDP Hole Punching<br><br>
</div>
<button class="w3-button w3-block w3-green w3-section w3-padding" type="submit">Create Network</button>
</div>
</form>

<div class="w3-container w3-border-top w3-padding-16 w3-light-grey">
<button onclick="document.getElementById('NewNetwork').style.display='none'" type="button" class="w3-button w3-red">Cancel</button>

</div>

<form class="w3-container" method=POST action="/create_network">
<div class="w3-section">
<label><b>Network Name</b></label>
<input class="w3-input w3-border w3-margin-bottom" type="text" placeholder="newnetwork" name="name" required>
<label><b>Address Range</b></label>
<input class="w3-input w3-border" type="text" placeholder="10.100.100.0/24" name="address" required>
<div class="w3-container w3-left-align">
<input class="w3-check" type="checkbox" name="dual" value="yes"> Use Dual Stack<br>
<input class="w3-check" type="checkbox" name="local" value="yes"> Is Local<br>
<input class="w3-check" type="checkbox" name="udp" value="yes"> Use UDP Hole Punching<br><br>
</div>
<button class="w3-button w3-block w3-green w3-section w3-padding" type="submit">Create Network</button>
</div>
</form>

<div class="w3-container w3-border-top w3-padding-16 w3-light-grey">
<button onclick="document.getElementById('NewNetwork').style.display='none'" type="button" class="w3-button w3-red">Cancel</button>

</div>

</div>
</div>
</div>

{{end}}
28 changes: 28 additions & 0 deletions html/buttonbar2.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
{{define "buttonbar2"}}
<div class="w3-sidebar w3-bar-block w3-card w3-animate-left" style="display:none" id="leftMenu">
<button onclick="document.getElementById('leftMenu').style.display='none';" class="w3-bar-item w3-button w3-large">Close &times;</button>
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>

<div class="w3-sidebar w3-bar-block w3-card w3-animate-right" style="display:none;right:0;" id="rightMenu">
<button onclick="document.getElementById('rightMenu').style.display='none';" class="w3-bar-item w3-button w3-large">Close &times;</button>
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>

<div class="w3-teal">
<button class="w3-button w3-teal w3-xlarge w3-left" onclick="document.getElementById('leftMenu').style.display='block';">&#9776;</button>
<button class="w3-button w3-teal w3-xlarge w3-right" onclick="document.getElementById('rightMenu').style.display='block';">&#9776;</button>
<div class="w3-container">
<h1>My Page</h1>
</div>
</div>

<div class="w3-container">
<p>In this example, we demonstrate how to use two side navigations.</p>
<p>We have created two "menu" buttons: one to open the side navigation from the left and one to open it from the right.</p>
</div>
{{end}}
2 changes: 1 addition & 1 deletion html/extclient.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{{ define "ExtClient" }}
<div id="ExtClient" class="w3-row tab" style="display=none">
<div id="ExtClient" class="w3-content w3-row tab" style="display=none">
<div class="w3-third">
<p> Available Ingress Gateways
<div class="net All">
Expand Down
6 changes: 5 additions & 1 deletion html/header.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,9 @@
{{define "Header"}}
<div class="w3-cell-row w3-blue">
{{template "Sidebar" .}}
{{template "Rightsidebar" .}}
<div class="w3-blue">
<button class="w3-button w3-blue w3-small w3-left" onclick="document.getElementById('sidebar').style.display='block';">&#9776; Select Network</button>
<button class="w3-button w3-blue w3-small w3-right" onclick="document.getElementById('rightsidebar').style.display='block';">Menu &#9776;</button>
<div class="w3-hide-small w3-hide-medium">
<center><img src="/images/netmaker2.png" alt="Netmaker Makes Networks"></center>
</div>
Expand Down
2 changes: 1 addition & 1 deletion html/keys.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{{ define "Keys" }}
<div id="Keys" class="w3-container tab" style="display=none">
<div id="Keys" class="w3-content tab" style="display=none">
<div class="net All">
<p> Please select a specific network to view its access keys. </p>
</div>
Expand Down
39 changes: 16 additions & 23 deletions html/layout.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,28 +1,21 @@
{{define "layout"}}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<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">

<!-- <link rel="stylesheet" href="stylesheet/main.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> -->

</head>
<body onLoad="setUp('{{.Page}}', '{{.Message}}')">
{{template "Header" . }}
{{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>
{{template "Networks" .}}
{{template "Nodes" .}}
{{template "Keys" .}}
{{template "ExtClient" .}}
</div>
{{ template "script" }}
</body>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<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">
</head>
<body onLoad="setUp('{{.Page}}', '{{.Message}}')">
{{template "Header" . }}
{{template "buttonbar" . }}
{{template "Networks" .}}
{{template "Nodes" .}}
{{template "Keys" .}}
{{template "ExtClient" .}}
</div>
{{ template "script" }}
</body>
</html>
{{end}}
2 changes: 1 addition & 1 deletion html/networks.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{{ define "Networks" }}
<div id="Networks" class="w3-white tab" style="display=none">
<div id="Networks" class="w3-content w3-white tab" style="display=none">
{{range .Networks}}
<p><button class="w3-btn w3-light-grey net {{.NetID}} All" onclick="expand('net{{.NetID}}');"> {{.DisplayName}} {{.AddressRange}}</button></p>
{{template "NetDetails" .}}
Expand Down
2 changes: 1 addition & 1 deletion html/nodes.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{{ define "Nodes" }}
<div id="Nodes" class="w3-white tab" style="display=none">
<div id="Nodes" class="w3-content w3-white tab" style="display=none">
{{range .Nodes}}
<p><button id="button{{.MacAddress}}" class="net {{.Network}} All w3-lightgrey" onclick="expand('node{{.MacAddress}}');">{{.Name}}@{{.Network}} {{.Endpoint}} {{.Address}}</button></p>
{{template "NodeDetails" .}}
Expand Down
15 changes: 15 additions & 0 deletions html/rightsidebar.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
{{define "Rightsidebar"}}
<div class="w3-sidebar w3-bar-block w3-card w3-animate-right" style="display:none;right:0;" id=rightsidebar>
<button onclick="document.getElementById('rightsidebar').style.display='none';" class="w3-bar-item w3-button w3-large">Close &times;</button>

<button class="w3-bar-item w3-button" onclick="document.getElementById('NewNetwork').style.display='block'">Create Network</button>
{{ 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</button>
<button class="w3-bar-item w3-button" onclick="document.location='/logout';">LogOut</button>
</div>
{{end}}
3 changes: 1 addition & 2 deletions html/sidebar.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
{{define "Sidebar"}}
<div id="sidebar" class="w3-sidebar w3-bar-block w3-collapse w-3-animate-left" style="width:200px">
<br>
<div id="sidebar" class="w3-sidebar w3-bar-block w3-card w-3-animate-left" style="display:none">
<button class="w3-bar-item w3-button w3-large w3-hide-large" onclick="document.getElementById('sidebar').style.display='none';">Close &times</button>
<button id="sidebarbuttonAll" class="w3-bar-item w3-button netselection w3-teal" onclick="setNetwork('All');document.getElementById('sidebar').style.display='none';">All Networks</button>
{{ range .Networks }}
Expand Down