Lots of UI and some server fixes

Fixed Content-Type parsing to work with options
Added some directives to make things a bit cleaners
    - Bootstrap Panels
    - Loading Panel
Navigation Controller for active nav

UI is still completely unusable at this point.

TODO.md

@@ -1,8 +1,23 @@
-* Bulk Insert/Update
-* Documentation
-* Hostnames and reverse
+* API
+    - Bulk Insert/Update
+    - Hostnames and reverse
+    - API Tokens for role accounts
+    - Setup support for migrations before first preview release
+    - Pagination
+    - PATCH support
+    - Default Site for User
+
 * Web UI
+    - Form Validation
+    - Subnav Bar
+    - Pages
+        * Sites (Update/Delete)
+        * Networks (Create/List/Show/Update/Delete)
+        * Network Attributes (Create/List/Show/Update/Delete)
+        * Permissions (Update)
+        * Changelog
+
 * Python Client Library
-* API Tokens for role accounts
-* Setup support for migrations before first preview release
-* Pagination
+    - Everything
+
+* Documentation (Ongoing)

nsot/handlers/util.py

@@ -2,6 +2,7 @@
 import json
 from tornado.web import RequestHandler, urlparse
 from tornado.escape import utf8
+from werkzeug.http import parse_options_header
 
 from .. import exc
 from .. import models
@@ -105,7 +106,10 @@ def prepare(self):
             return rv
 
         if self.request.method.lower() in ("put", "post"):
-            if self.request.headers.get("Content-Type").lower() != "application/json":
+            content_type = parse_options_header(
+                self.request.headers.get("Content-Type")
+            )[0]
+            if content_type.lower() != "application/json":
                 return self.badrequest("Invalid Content-Type for POST/PUT request.")
 
     def head(self, *args, **kwargs):

nsot/static/css/nsot.css

@@ -17,12 +17,12 @@ body {
     margin-top: 100px;
 }
 
-.panel-nsot {
+.panel-default {
     box-shadow: 3px 3px 6px 0px rgba(155, 155, 155, 1);
     border: 0px;
 }
 
-.panel-default>.panel-heading {
+.panel-default .panel-heading {
     color: #ecf0f1;
     background-color: #333;
     border-color: #a3114f;

nsot/static/js/app.js

@@ -1,6 +1,6 @@
 (function() {
 
-    app = angular.module("nsot", ["ngRoute"]);
+    var app = angular.module("nsotApp", ["ngRoute"]);
 
     app.config(function($interpolateProvider){
         $interpolateProvider.startSymbol("[[");
@@ -18,31 +18,64 @@
     .config(function($httpProvider) {
         _.assign($httpProvider.defaults, {
             "xsrfCookieName": "_xsrf",
-            "xsrfHeaderName": "X-XSRFToken",
-            "headers": {
-                "post": { "Content-Type": "application/json"},
-                "put": { "Content-Type": "application/json"},
-                "delete": { "Content-Type": "application/json"}
-            }
-        })
-
+            "xsrfHeaderName": "X-XSRFToken"
+        });
     })
     .config(function($routeProvider) {
         $routeProvider
         .when("/", {
             templateUrl: "/static/templates/index.html",
             controller: "IndexController"
         })
+        .when("/sites", {
+            templateUrl: "/static/templates/sites.html",
+            controller: "SitesController"
+        })
+        .when("/sites/:siteId", {
+            templateUrl: "/static/templates/site.html",
+            controller: "SiteController"
+        })
         .otherwise({redirectTo: "/"});
     });
 
+    app.controller("navigationController", [
+            "$scope", "$location",
+            function($scope, $location) {
+
+        $scope.isActive = function(str){
+            var path = $location.path();
+            if (path.indexOf(str) === 0){
+                return true;
+            }
+            return false;
+        };
+
+    }]);
+
     app.controller("IndexController", [
+            "$http", "$location",
+            function($http, $location) {
+
+        $http.get("/api/sites").success(function(data){
+            var sites = data.data.sites;
+            if (!sites.length || sites.length > 1) {
+                $location.path("/sites");
+            } else {
+                // If there's a single site, just go there.
+                $location.path("/sites/" + sites[0].id);
+            }
+            $location.replace();
+        });
+    }]);
+
+    app.controller("SitesController", [
             "$scope", "$http", "$q", "$location",
             function($scope, $http, $q, $location) {
 
         $scope.loading = true;
         $scope.user = {};
         $scope.sites = [];
+        $scope.site = {};
 
         $q.all([
             $http.get("/api/users/0"),
@@ -54,12 +87,30 @@
         });
 
         $scope.createSite = function(site){
-            $http.post("/api/sites").success(function(r){
-                console.log(r);
-            }).error(function(r){
-                console.log(r);
+            $http.post("/api/sites", site).success(function(data){
+                var site = data.data.site;
+                $location.path("/sites/" + site.id);
             });
         };
     }]);
 
+    app.controller("SiteController", [
+            "$scope", "$http", "$q", "$routeParams",
+            function($scope, $http, $q, $routeParams) {
+
+        $scope.loading = true;
+        $scope.user = {};
+        $scope.site = {};
+
+        $q.all([
+            $http.get("/api/users/0"),
+            $http.get("/api/sites/" + $routeParams.siteId)
+        ]).then(function(results){
+            $scope.user = results[0].data.data.user;
+            $scope.site = results[1].data.data.site;
+            $scope.loading = false;
+        });
+
+    }]);
+
 })();

nsot/static/js/directives.js

@@ -0,0 +1,57 @@
+(function() {
+
+    var app = angular.module("nsotApp");
+
+    app.directive("panel", function(){
+        return {
+            restrict: "E",
+            transclude: true,
+            replace: true,
+            template: "<div class='panel panel-default'>" +
+                      "<ng-transclude></ng-transclude>" +
+                      "</div>"
+        };
+    });
+
+    app.directive("panelHeading", function(){
+        return {
+            restrict: "E",
+            transclude: true,
+            replace: true,
+            template: "<div class='panel-heading'><strong>" +
+                      "<ng-transclude></ng-transclude>" +
+                      "</strong></div>"
+        };
+    });
+
+    app.directive("panelBody", function(){
+        return {
+            restrict: "E",
+            transclude: true,
+            replace: true,
+            template: "<div class='panel-body'>" +
+                      "<ng-transclude></ng-transclude>" +
+                      "</div>"
+        };
+    });
+
+    app.directive("panelFooter", function(){
+        return {
+            restrict: "E",
+            transclude: true,
+            replace: true,
+            template: "<div class='panel-footer'>" +
+                      "<ng-transclude></ng-transclude>" +
+                      "</div>"
+        };
+    });
+
+
+    app.directive("loadingPanel", function(){
+        return {
+            restrict: "E",
+            templateUrl: "/static/templates/directives/loading-panel.html"
+        };
+    });
+
+})();

nsot/static/templates/directives/loading-panel.html

@@ -0,0 +1,8 @@
+<div class="col-sm-6 col-sm-offset-3">
+    <panel class="notification-box">
+        <panel-heading>Loading...</panel-heading>
+        <panel-body class="text-center">
+            <i class="fa fa-spinner fa-spin fa-2x"></i>
+        </panel-body>
+    </panel>
+</div>

nsot/static/templates/index.html

@@ -1,54 +1 @@
-<div ng-if="loading">
-    <div class="col-sm-6 col-sm-offset-3">
-        <div class="panel panel-default panel-nsot notification-box">
-            <div class="panel-heading"><strong>
-                Loading...
-            </strong></div>
-            <div class="panel-body text-center">
-                <i class="fa fa-spinner fa-spin fa-2x"></i>
-            </div>
-        </div>
-    </div>
-</div>
-<div ng-if="!loading">
-    <div ng-if="!sites.length" class="col-sm-6 col-sm-offset-3">
-        <div class="panel panel-default panel-nsot notification-box">
-            <div class="panel-heading"><strong>
-                Welcome
-            </strong></div>
-            <div class="panel-body">
-                Welcome to the Network Source of Truth. It looks like you're new
-                here. Lets start by creating a <em>site</em> which will be a namespace
-                for all of your data.
-                <hr>
-                <form novalidate class="nsot-form">
-                    <div class="form-group">
-                        <input type="text"
-                               class="form-control"i
-                               placeholder="Name"
-                               ng-model="site.name"
-                               required
-                        >
-                    </div>
-                    <div class="form-group">
-                        <textarea style="resize: vertical;"
-                                  class="form-control"
-                                  rows="5"
-                                  placeholder="Description"
-                                  ng-model="site.description"
-                        >
-                        </textarea>
-                    </div>
-                </form>
-            </div>
-            <div class="panel-footer text-right">
-                <button type="submit"
-                        ng-click="createSite(site)"
-                        class="btn btn-primary"
-                >Create</button>
-            </div>
-        </div>
-    </div>
-    <div ng-if="sites.length" ng-repeat="site in sites" class="col-sm-6 col-sm-offset-3">[[site.name]]
-    </div>
-</div>
+<loading-panel></loading-panel>

nsot/static/templates/site.html

@@ -0,0 +1,4 @@
+<loading-panel ng-if="loading"></loading-panel>
+<div ng-if="!loading">
+    [[site.id]] - [[site.name]] - [[site.description]]
+</div>

nsot/static/templates/sites.html

@@ -0,0 +1,44 @@
+<loading-panel ng-if="loading"></loading-panel>
+<div ng-if="!loading">
+    <div ng-if="!sites.length" class="col-sm-6 col-sm-offset-3">
+        <panel class="notification-box">
+            <panel-heading>Welcome</panel-heading>
+            <panel-body>
+                Welcome to the Network Source of Truth. It looks like you're new
+                here. Lets start by creating a <em>site</em> which will be a namespace
+                for all of your data.
+                <hr>
+                <form novalidate class="nsot-form">
+                    <div class="form-group">
+                        <input type="text"
+                               class="form-control"i
+                               placeholder="Name"
+                               ng-model="site.name"
+                               required
+                        >
+                    </div>
+                    <div class="form-group">
+                        <textarea style="resize: vertical;"
+                                  class="form-control"
+                                  rows="5"
+                                  placeholder="Description"
+                                  ng-model="site.description"
+                        >
+                        </textarea>
+                    </div>
+                </form>
+            </panel-body>
+            <panel-footer class="text-right">
+                <button type="submit"
+                        ng-click="createSite(site)"
+                        class="btn btn-primary"
+                >Create</button>
+            </panel-footer>
+        </panel>
+    </div>
+    <div ng-if="sites.length"
+         ng-repeat="site in sites"
+         class="col-sm-6 col-sm-offset-3">
+         <a ng-href="/sites/[[site.id]]">[[site.name]]</a>
+    </div>
+</div>