Add details view

lib/App.jsx

@@ -5,35 +5,40 @@ var ReactMiniRouter = require('react-mini-router');
 var DomainList = require('./ui/DomainList');
 var RecordList = require('./ui/RecordList');
 var Settings = require('./ui/Settings');
+var Details = require('./ui/Details');
 
 var App = React.createClass({
   mixins: [ReactMiniRouter.RouterMixin],
   routes: {
     '/': 'home',
     '/:domain': 'domain',
-    '/:domain/settings': 'settings'
+    '/:domain/:tab': 'tab'
   },
   render: function() {
     return this.renderCurrentRoute();
   },
-  main: function(domain, settings) {
+  main: function(domain, tab) {
     var title;
     var content = [];
     if(domain) {
       title = domain;
       content.push(
         <ul key="nav" className="nav nav-tabs">
-          <li role="presentation" className={!settings ? 'active' : ''}><a href={'/'+domain}>DNS</a></li>
-          <li role="presentation" className={settings ? 'active' : ''}><a href={'/'+domain+'/settings'}>Settings</a></li>
+          <li role="presentation" className={tab == undefined ? 'active' : ''}><a href={'/'+domain}>DNS</a></li>
+          <li role="presentation" className={tab == 'settings' ? 'active' : ''}><a href={'/'+domain+'/settings'}>Settings</a></li>
+          <li role="presentation" className={tab == 'details' ? 'active' : ''}><a href={'/'+domain+'/details'}>Details</a></li>
         </ul>
       );
 
       var store = DomainStore.find(domain);
       if(store) {
-        if(settings) {
+        if(tab == 'settings') {
           DomainStore.loadSettings(domain);
           content.push(<Settings key="settings" domain={domain} settings={store.settings} />);
         }
+        else if (tab == 'details') {
+          content.push(<Details key="details" domain={domain} details={store} />);
+        }
         else {
           DomainStore.loadRecords(domain);
           content.push(<RecordList key="records" domain={domain} records={store.records} />);
@@ -62,10 +67,10 @@ var App = React.createClass({
     return this.main();
   },
   domain: function(domain) {
-    return this.main(domain, false);
+    return this.main(domain);
   },
-  settings: function(domain) {
-    return this.main(domain, true);
+  tab: function(domain, tab) {
+    return this.main(domain, tab);
   }
 });
 

lib/ui/Details.jsx

@@ -0,0 +1,64 @@
+var React = require('react');
+var dateToString = require('../util').dateToString;
+
+var empty = <i>none</i>;
+
+var DetailEntry = React.createClass({
+  render: function() {
+    return (
+      <tr>
+        <td>{this.props.name}</td>
+        <td>{this.props.children || empty}</td>
+      </tr>
+    )
+  }
+});
+
+function join(arr) {
+  if(arr) {
+    return arr.join(', ');
+  }
+}
+
+var Details = React.createClass({
+  render: function() {
+    var details = this.props.details.val();
+    return (
+      <div>
+        <table className="table">
+          <tbody>
+            <DetailEntry name="Plan">
+              {details.plan.name} ({details.plan.price} {details.plan.currency})
+            </DetailEntry>
+            <DetailEntry name="Type">
+              {details.type}
+            </DetailEntry>
+            <DetailEntry name="Status">
+              {details.status}
+            </DetailEntry>
+            <DetailEntry name="Created on">
+              {dateToString(new Date(details.created_on))}
+            </DetailEntry>
+            <DetailEntry name="Modified on">
+              {dateToString(new Date(details.modified_on))}
+            </DetailEntry>
+            <DetailEntry name="Nameservers">
+              {join(details.name_servers)}
+            </DetailEntry>
+            <DetailEntry name="Original Nameservers">
+              {join(details.original_name_servers)}
+            </DetailEntry>
+            <DetailEntry name="Original DNS Host">
+              {details.original_dnshost}
+            </DetailEntry>
+            <DetailEntry name="Original Registrar">
+              {details.original_registrar}
+            </DetailEntry>
+          </tbody>
+        </table>
+      </div>
+    );
+  }
+});
+
+module.exports = Details;