summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorPatrick O'Doherty <p@trickod.com>2017-12-27 21:56:37 +0000
committerPatrick O'Doherty <p@trickod.com>2017-12-27 21:57:03 +0000
commit601bd5dfb09f3f870896e205e33a3755c4508a9b (patch)
treed93133fb16a185f0be7abe4e8e2baa45fdd11280
parent94160fdafd68a5cfc9c13b1a519b11f03ce455ae (diff)
Add bootstrap, refactor donation links, add total exit % to table
-rw-r--r--package.json1
-rw-r--r--src/App.css1
-rw-r--r--src/App.js4
-rw-r--r--src/components/Donate.js16
-rw-r--r--src/components/DonationLinks.js18
-rw-r--r--src/components/Introduction.js6
-rw-r--r--src/components/RelayInformationTable.js49
-rw-r--r--src/components/Uptime.js6
-rw-r--r--yarn.lock4
9 files changed, 74 insertions, 31 deletions
diff --git a/package.json b/package.json
index b2b5d68..305e69e 100644
--- a/package.json
+++ b/package.json
@@ -3,6 +3,7 @@
"version": "0.1.0",
"private": true,
"dependencies": {
+ "bootstrap": "^3.3.7",
"moment": "^2.20.1",
"react": "^16.2.0",
"react-dom": "^16.2.0",
diff --git a/src/App.css b/src/App.css
index 1f546d0..3966731 100644
--- a/src/App.css
+++ b/src/App.css
@@ -6,6 +6,7 @@
.header {
border-bottom: 1px solid black;
+ margin-bottom: 15px;
}
.introduction {
diff --git a/src/App.js b/src/App.js
index 0ea33f6..82416b4 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,9 +1,11 @@
import React, { Component } from 'react';
import Header from './components/Header';
-import './App.css';
import RelayInformationTable from './components/RelayInformationTable';
import Introduction from './components/Introduction';
+import './App.css';
+import 'bootstrap/dist/css/bootstrap.min.css';
+
class App extends Component {
render() {
return (
diff --git a/src/components/Donate.js b/src/components/Donate.js
new file mode 100644
index 0000000..bd2712c
--- /dev/null
+++ b/src/components/Donate.js
@@ -0,0 +1,16 @@
+import React, { Component } from 'react';
+import PayPalButton from './PayPalButton';
+import DonationLinks from './DonationLinks';
+
+class Donate extends Component {
+ render() {
+ return (
+ <div>
+ <PayPalButton />
+ <DonationLinks />
+ </div>
+ )
+ };
+}
+
+export default Donate;
diff --git a/src/components/DonationLinks.js b/src/components/DonationLinks.js
index 55e183a..6dcc4d1 100644
--- a/src/components/DonationLinks.js
+++ b/src/components/DonationLinks.js
@@ -2,14 +2,18 @@ import React, { Component } from 'react';
class DonationLinks extends Component {
render() {
+ const amounts = [5, 10, 20, 50, 100];
return (
- <div id="paypal-recurring">Pledge a recurring donation:
- <a href="https://www.paypal.com/subscriptions/business=treasurer%40noisebridge.net&amp;item_name=Noisebridge%20Tor%20Node%20Project&amp;cy_code=USD&amp;no_note=1&amp;no_shipping=1&amp;a3=5&amp;p3=1&amp;t3=M&amp;src=1">$5/month</a> |
- <a href="https://www.paypal.com/subscriptions/business=treasurer%40noisebridge.net&amp;item_name=Noisebridge%20Tor%20Node%20Project&amp;cy_code=USD&amp;no_note=1&amp;no_shipping=1&amp;a3=10&amp;p3=1&amp;t3=M&amp;src=1">$10/month</a> |
- <a href="https://www.paypal.com/subscriptions/business=treasurer%40noisebridge.net&amp;item_name=Noisebridge%20Tor%20Node%20Project&amp;cy_code=USD&amp;no_note=1&amp;no_shipping=1&amp;a3=20&amp;p3=1&amp;t3=M&amp;src=1">$20/month</a> |
- <a href="https://www.paypal.com/subscriptions/business=treasurer%40noisebridge.net&amp;item_name=Noisebridge%20Tor%20Node%20Project&amp;cy_code=USD&amp;no_note=1&amp;no_shipping=1&amp;a3=50&amp;p3=1&amp;t3=M&amp;src=1">$50/month</a> |
- <a href="https://www.paypal.com/subscriptions/business=treasurer%40noisebridge.net&amp;item_name=Noisebridge%20Tor%20Node%20Project&amp;cy_code=USD&amp;no_note=1&amp;no_shipping=1&amp;a3=100&amp;p3=1&amp;t3=M&amp;src=1">$100/month</a>
- </div>
+ <div>
+ <h4>Pledge a recurring donation:</h4>
+ <ul id="paypal-recurring">
+ {amounts.map(amount => {
+ return <li>
+ <a href="https://www.paypal.com/subscriptions/business=treasurer%40noisebridge.net&amp;item_name=Noisebridge%20Tor%20Node%20Project&amp;cy_code=USD&amp;no_note=1&amp;no_shipping=1&amp;a3={amount}&amp;p3=1&amp;t3=M&amp;src=1">${amount}/month</a>
+ </li>
+ })}
+ </ul>
+ </div>
);
}
}
diff --git a/src/components/Introduction.js b/src/components/Introduction.js
index 50fc3ff..8a68308 100644
--- a/src/components/Introduction.js
+++ b/src/components/Introduction.js
@@ -1,7 +1,6 @@
import React, { Component } from 'react';
import Logo from './Logo';
-import PayPalButton from './PayPalButton';
-import DonationLinks from './DonationLinks';
+import Donate from './Donate';
class Introduction extends Component {
render() {
@@ -20,8 +19,7 @@ class Introduction extends Component {
</ol>
</div>
</div>
- <PayPalButton />
- <DonationLinks />
+ <Donate />
</div>
<Logo />
</div>
diff --git a/src/components/RelayInformationTable.js b/src/components/RelayInformationTable.js
index fda4aca..713378c 100644
--- a/src/components/RelayInformationTable.js
+++ b/src/components/RelayInformationTable.js
@@ -18,24 +18,39 @@ class RelayInformationTable extends Component {
} else if (!isLoaded) {
return <div>Loading relay information...</div>;
} else {
+ const totalExitProbabilty = relays.reduce((m, relay) => {
+ return m + relay.exit_probability;
+ }, 0);
+
return (
- <table class="relay-information">
- <thead>
- <tr>
- <th>Name</th>
- <th>Fingerprint</th>
- <th>Exit IP</th>
- <th>Bandwidth</th>
- <th>Uptime</th>
- <th>Exit %</th>
- </tr>
- </thead>
- <tbody>
- {relays.map(relay => (
- <RelayInformationRow relay={relay} />
- ))}
- </tbody>
- </table>
+ <div>
+ <h2>Noisetor Relay Stats</h2>
+ <table class="relay-information table">
+ <thead>
+ <tr>
+ <th>Name</th>
+ <th>Fingerprint</th>
+ <th>Exit IP</th>
+ <th>Bandwidth</th>
+ <th>Uptime</th>
+ <th>Exit %</th>
+ </tr>
+ </thead>
+ <tbody>
+ {relays.map(relay => (
+ <RelayInformationRow relay={relay} />
+ ))}
+ <tr>
+ <td></td>
+ <td></td>
+ <td></td>
+ <td></td>
+ <td><b>Total</b></td>
+ <td><b>{(totalExitProbabilty * 100).toFixed(2)}%</b></td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
);
}
}
diff --git a/src/components/Uptime.js b/src/components/Uptime.js
index 6e5c253..5a295e7 100644
--- a/src/components/Uptime.js
+++ b/src/components/Uptime.js
@@ -3,10 +3,12 @@ import moment from 'moment';
class Uptime extends Component {
render() {
- const { lastRestarted } = this.props;
+ let { lastRestarted } = this.props;
+ lastRestarted = moment(lastRestarted, "YYYY-MM-DD HH:mm:ss");
+
return (
<span title={lastRestarted}>
- {moment(lastRestarted, "YYYY-MM-DD HH:mm:ss").fromNow()}
+ {moment.duration(moment().diff(lastRestarted)).humanize()}
</span>
)
}
diff --git a/yarn.lock b/yarn.lock
index 623e642..eb5bc38 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1024,6 +1024,10 @@ boom@2.x.x:
dependencies:
hoek "2.x.x"
+bootstrap@^3.3.7:
+ version "3.3.7"
+ resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-3.3.7.tgz#5a389394549f23330875a3b150656574f8a9eb71"
+
boxen@^0.6.0:
version "0.6.0"
resolved "https://registry.yarnpkg.com/boxen/-/boxen-0.6.0.tgz#8364d4248ac34ff0ef1b2f2bf49a6c60ce0d81b6"