From e58047eaa020e2810dd20ce6cc2eac32de071481 Mon Sep 17 00:00:00 2001
From: Adam Ierymenko <adam.ierymenko@gmail.com>
Date: Wed, 6 May 2015 19:39:45 -0700
Subject: [PATCH] UI work...

---
 ui/ZeroTierNetwork.jsx | 26 ++++++++++++++++++++-
 ui/ZeroTierNode.jsx    | 20 +++++++++++++---
 ui/zerotier.css        | 53 +++++++++++++++++++++++++++++++++---------
 3 files changed, 84 insertions(+), 15 deletions(-)

diff --git a/ui/ZeroTierNetwork.jsx b/ui/ZeroTierNetwork.jsx
index 177dd9401..f44adbc34 100644
--- a/ui/ZeroTierNetwork.jsx
+++ b/ui/ZeroTierNetwork.jsx
@@ -1,12 +1,36 @@
 var ZeroTierNetwork = React.createClass({
+	getInitialState: function() {
+		return {
+			deleted: false
+		};
+	},
+
 	leaveNetwork: function(event) {
+		Ajax.call({
+			url: 'network/'+this.props.nwid+'?auth='+this.props.authToken,
+			cache: false,
+			type: 'DELETE',
+			success: function(data) {
+				this.setState({deleted: true});
+			}.bind(this),
+			error: function(error) {
+			}.bind(this)
+		});
 		event.preventDefault();
 	},
 
 	render: function() {
 		return (
 			<div className="zeroTierNetwork">
-				<div className="networkInfo"><span className="zeroTierAddress">{this.props.nwid}</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>[</b>&nbsp;<span>{this.props.name}</span>&nbsp;<b>]</b></div>
+				{
+					(this.state.deleted) ? (
+						<div className="deletedOverlay">&nbsp;</div>
+					) : (null)
+				}
+				<div className="networkInfo">
+					<span className="networkId">{this.props.nwid}</span>
+					<span className="networkName">{this.props.name}</span>
+				</div>
 				<div className="networkProps">
 					<div className="row">
 						<div className="name">Status</div>
diff --git a/ui/ZeroTierNode.jsx b/ui/ZeroTierNode.jsx
index 1edab4087..361abb1f8 100644
--- a/ui/ZeroTierNode.jsx
+++ b/ui/ZeroTierNode.jsx
@@ -56,8 +56,11 @@ var ZeroTierNode = React.createClass({
 			cache: false,
 			type: 'GET',
 			success: function(data) {
-				if (data)
-					this.setState(JSON.parse(data));
+				if (data) {
+					var status = JSON.parse(data);
+					this.setState(status);
+					document.title = 'ZeroTier One [' + status.address + ']';
+				}
 				this.updateNetworks();
 				this.updatePeers();
 			}.bind(this),
@@ -68,7 +71,17 @@ var ZeroTierNode = React.createClass({
 	},
 	joinNetwork: function(event) {
 		event.preventDefault();
-		alert('foo');
+		if ((this.networkToJoin)&&(this.networkToJoin.length === 16)) {
+			Ajax.call({
+				url: 'network/'+this.networkToJoin+'?auth='+this.props.authToken,
+				cache: false,
+				type: 'POST',
+				success: function(data) {
+				}.bind(this),
+				error: function() {
+				}.bind(this)
+			});
+		}
 	},
 	handleNetworkIdEntry: function(event) {
 		var nid = event.target.value;
@@ -154,6 +167,7 @@ var ZeroTierNode = React.createClass({
 								<div className="networks">
 									{
 										this.state._networks.map(function(network) {
+											network['authToken'] = this.props.authToken;
 											return React.createElement('div',{className: 'network'},React.createElement(ZeroTierNetwork,network));
 										}.bind(this))
 									}
diff --git a/ui/zerotier.css b/ui/zerotier.css
index 5dd7b8924..52f167189 100644
--- a/ui/zerotier.css
+++ b/ui/zerotier.css
@@ -73,19 +73,19 @@ html,body {
 	background: #eeeeee;
 }
 .zeroTierNode > .middle > .middleScroll > .networks {
-	display: table;
-	width: 100%;
+	display: block;
+	width: auto;
 	padding: 0;
 	margin: 0;
 	border: 0;
 	border-collapse: collapse;
 }
 .zeroTierNode > .middle > .middleScroll > .networks > .network {
-	width: 100%;
-	padding: 0;
-	margin: 0;
-	display: table-row;
-	border-bottom: 1px solid #234447;
+	padding: 0.5rem;
+	margin: 0.25rem;
+	float: left;
+	display: inline-block;
+	border: 1px solid #234447;
 	background: #ffffff;
 }
 .zeroTierNode > .middle > .middleScroll > .peers {
@@ -180,25 +180,56 @@ html,body {
 }
 
 .zeroTierNetwork {
-	width: 100%;
-	padding: 0.5rem 0.5rem 0.5rem 0.5rem;
+	padding: 0;
 	margin: 0;
+	display: inline-block;
+	text-align: right;
+	width: 100%;
+	position: relative;
+}
+.zeroTierNetwork .deletedOverlay {
+	width: 100%;
+	height: 100%;
+	position: absolute;
+	background: rgba(255,255,255,0.8);
+	display: block;
+	top: 0;
+	left: 0;
+	z-index: 2;
 }
 .zeroTierNetwork .networkInfo {
 	padding: 0 0 0.5rem 0;
+	text-align: left;
+	font-size: 12pt;
+}
+.zeroTierNetwork .networkInfo .networkId {
+	font-size: 10pt;
+	font-family: monospace;
+	color: #91a2a3;
+}
+.zeroTierNetwork .networkInfo .networkName {
+	padding: 0 0 0 1rem;
+	float: right;
+	font-size: 12pt;
 }
 .zeroTierNetwork .networkProps {
-	padding: 0 0 0.5rem 0;
+	width: 100%;
 	display: table;
+	padding: 0;
+	margin: 0 auto 0 auto;
+	border-top: 1px solid #999999;
+	border-bottom: 1px solid #999999;
 }
 .zeroTierNetwork .networkProps > .row {
 	display: table-row;
 }
 .zeroTierNetwork .networkProps > .row > .name {
 	display: table-cell;
+	font-size: 10pt;
 	padding: 0.1rem 0.5rem 0.1rem 0.5rem;
 }
 .zeroTierNetwork .networkProps > .row > .value {
+	font-size: 10pt;
 	display: table-cell;
 	padding: 0.1rem 0.5rem 0.1rem 0.5rem;
 	background: #eeeeee;
@@ -207,7 +238,7 @@ html,body {
 }
 .zeroTierNetwork .ipAddress {
 	font-family: monospace;
-	font-size: 12pt;
+	font-size: 10pt;
 }
 .zeroTierNetwork .leaveNetworkButton {
 	padding: 0.25rem 0.5rem 0.25rem 0.5rem;