ExternalVendorCode/ZeroTierOne
1
0
Fork 0
mirror of https://github.com/zerotier/ZeroTierOne.git synced 2025-02-18 17:00:17 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

UI work...

Browse Source
This commit is contained in:
Adam Ierymenko 2015-05-06 19:39:45 -07:00
parent 03dbec960a
commit e58047eaa0
3 changed files with 84 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
ui/ZeroTierNetwork.jsx
View File

@ -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>

20
ui/ZeroTierNode.jsx
View File

@ -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))
}

53
ui/zerotier.css
View File

@ -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;