Merge pull request #33 from diggyk/master

Start of web UI

.bowerrc

@@ -0,0 +1,5 @@
+{
+    "analytics": false,
+    "directory": "_bc"
+}
+

.gitignore

@@ -46,3 +46,7 @@ nosetests.xml
 
 docs/_build
 .*sw?
+
+# Node
+/npm-debug.log
+/node_modules

bower.json

@@ -0,0 +1,23 @@
+{
+  "name": "hermes",
+  "version": "0.0.0",
+  "private": true,
+  "homepage": "https://github.com/diggyk/hermes",
+  "authors": [
+    "Digant Kasundra <digant@dropbox.com>"
+  ],
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "_bc",
+    "test",
+    "tests"
+  ],
+  "dependencies": {
+    "angular": "~1.4.5",
+    "angular-animate": "~1.4.5",
+    "angular-route": "~1.4.5",
+    "bootstrap": "~3.3.5"
+  }
+}

gulpfile.js

@@ -0,0 +1,158 @@
+/**
+ * Build tasks are broken up as either top-level tasks, for example `build`,
+ * or sub-tasks, namespaced with a top-level task name and a color as a prefix,
+ * for example, `build:js`
+ *
+ * You'll likely want to have gulp installed globally if you're using it regularly
+ * though you'll be able to run it fron `node_modules/.bin/gulp` if you don't
+ * use it often.
+ *
+ * Top Level Tasks
+ * ---------------
+ * gulp clean - Remove built assets
+ * gulp build - Build all static assets for distribution
+ * gulp lint - Lint JavaScript and CSS files
+ * gulp bower - Update local cache for web dependencies
+ */
+
+var gulp = require('gulp');
+
+// Plugin Imports
+var jshint = require('gulp-jshint');
+var concat = require('gulp-concat');
+var ngAnnotate = require('gulp-ng-annotate');
+var uglify = require('gulp-uglify');
+var rename = require('gulp-rename');
+var minifyCss = require('gulp-minify-css');
+var csslint = require('gulp-csslint');
+var mainBowerFiles = require('main-bower-files');
+var bower = require('gulp-bower');
+var sort = require('gulp-sort');
+var del = require('del');
+
+var SRC_ROOT = './hermes/webapp/src/';
+var BUILD_DEST = './hermes/webapp/build/';
+
+var JS_MAIN_SRC = SRC_ROOT + 'js/hermesApp.js';
+var JS_SRC = SRC_ROOT + 'js/**/*.js';
+var STYLE_SRC = SRC_ROOT + 'css/**/*.css';
+var IMAGE_SRC = SRC_ROOT + 'img/**';
+var HTML_SRC = SRC_ROOT + "**/*.html";
+
+
+/**
+ * Task to lint JavaScript files.
+ */
+gulp.task('lint:js', function() {
+    return gulp.src([JS_MAIN_SRC, JS_SRC])
+        .pipe(jshint())
+        .pipe(jshint.reporter('jshint-stylish'));
+});
+
+
+/**
+ * Task to lint CSS files.
+ */
+gulp.task('lint:style', function() {
+    return gulp.src(STYLE_SRC)
+        .pipe(csslint())
+        .pipe(csslint.reporter());
+});
+
+
+/**
+ * Top level Task to run all lint tasks.
+ */
+gulp.task('lint', ['lint:js', 'lint:style']);
+
+
+/**
+ * Updates the local cache of bower dependencies
+ */
+gulp.task('bower', function() {
+    return bower({ cmd: 'update'});
+});
+
+
+/**
+ * Task to build JavaScript files.
+ */
+gulp.task('build:js', function() {
+    return gulp.src([JS_MAIN_SRC, JS_SRC])
+        .pipe(ngAnnotate())
+        //.pipe(sort())
+        .pipe(concat('app.js'))
+        .pipe(gulp.dest((BUILD_DEST + 'js')))
+        .pipe(uglify())
+        .pipe(rename('app.min.js'))
+        .pipe(gulp.dest((BUILD_DEST + 'js')));
+});
+
+/**
+ * Task to build our HTML files
+ */
+gulp.task('build:html', function() {
+    return gulp.src(HTML_SRC)
+        .pipe(gulp.dest((BUILD_DEST)))
+});
+
+
+/**
+ * Task to build CSS files.
+ */
+gulp.task('build:style', function() {
+    return gulp.src(STYLE_SRC)
+        .pipe(sort())
+        .pipe(concat('hermes.css'))
+        .pipe(gulp.dest((BUILD_DEST + 'css')))
+        .pipe(minifyCss())
+        .pipe(rename('hermes.min.css'))
+        .pipe(gulp.dest((BUILD_DEST + 'css')));
+});
+
+
+/**
+ * Task to "build" images. While we're not doing anything interesting
+ * now this opens up the option for building sprites if needed. This
+ * also keeps our src separate from our build where we'll do things like
+ * hash built files eventually.
+ */
+gulp.task('build:images', function() {
+    return gulp.src(IMAGE_SRC)
+        .pipe(gulp.dest((BUILD_DEST + 'img')))
+});
+
+
+/**
+ * Uses bower to install the "main" files into our build. In most cases
+ * the "main" files are manually specified in the `overrides` section
+ * of bower.json
+ */
+gulp.task('build:3rdparty', ['bower'], function() {
+    return gulp.src(mainBowerFiles(), {base: '_bc'})
+        .pipe(gulp.dest(BUILD_DEST + 'vendor'))
+});
+
+
+/**
+ * Create a hashed version of all built files. This is currently
+ * just a placeholder and hasn't been finished yet.
+ */
+gulp.task('build:revisions', ['build:html', 'build:js', 'build:style', 'build:images', 'build:3rdparty'], function() {
+    // TODO(gary): Do.
+    return gulp.src(BUILD_DEST);
+});
+
+
+/**
+ * Super task to build everything.
+ */
+gulp.task('build', ['build:revisions']);
+
+
+/**
+ * Remove the build directory
+ */
+gulp.task('clean', function(cb) {
+    del([BUILD_DEST], cb);
+});

hermes/handlers/frontends.py

@@ -1,8 +1,16 @@
-import tornado.web
+import os
+import logging
 
-from hermes.handlers.util import FeHandler
+from tornado import web
 
+# Logging object
+log = logging.getLogger(__name__)
 
-class AppHandler(FeHandler):
-    def get(self):
-        return self.render("app.html")
+
+class AppHandler(web.RequestHandler):
+    """Our generic handler to serve out the root of our AngularJS app."""
+    def get(self, filename):
+        logging.info("REQ: {}".format(filename))
+        self.render(
+            os.path.join(os.path.dirname(__file__), "../webapp/build/{}".format(filename))
+        )

hermes/handlers/util.py

@@ -84,11 +84,18 @@ def prepare(self):
         # Need to access token to set Cookie.
         # self.xsrf_token
 
+    def render_template(self, template_name, **kwargs):
+        template = self.application.my_settings["template_env"].get_template(
+            template_name
+        )
+        content = template.render(kwargs)
+        return content
+
     def render(self, template_name, **kwargs):
         context = {}
         context.update(self.get_template_namespace())
         context.update(kwargs)
-        self.write("Nothing to see here.")
+        self.write(self.render_template(template_name, **context))
 
     def write_error(self, status_code, **kwargs):
         message = "An unknown problem has occured :("

hermes/routes.py

@@ -1,4 +1,6 @@
 from .handlers import frontends, api
+from tornado import web
+import os
 
 HANDLERS = [
     # Hosts
@@ -29,5 +31,8 @@
     (r"/api/v1/extquery\/?", api.ExtQueryHandler),
 
     # Frontend Handlers
-    (r"/.*", frontends.AppHandler),
+    (r"/(.*)",
+        web.StaticFileHandler,
+        dict(path=os.path.join(os.path.dirname(__file__), "webapp/build/"),
+         default_filename="index.html"))
 ]

hermes/webapp/src/css/main.css

@@ -0,0 +1,105 @@
+@font-face {
+    font-family: "Open Sans";
+    font-style: normal;
+    font-weight: 400;
+    src: local("Open Sans"), local("OpenSans"), url("//fonts.gstatic.com/s/opensans/v10/cJZKeOuBrn4kERxqtaUH3aCWcynf_cDxXwCLxiixG1c.ttf") format("truetype");
+}
+
+.container-fluid {
+    padding: 0px;
+}
+
+body {
+    font-family: "Open Sans";
+    margin: 0;
+    padding: 0;
+    font-size: 2em;
+}
+
+h1 {
+    margin: 0px;
+    padding: 0px;
+}
+
+#header {
+    background-color: #007EE5;
+    color: #f7f9fa;
+    font-size: 2em;
+    padding: 10px;
+}
+
+#headerTitle {
+    /*position: absolute;*/
+    /*bottom: 5px;*/
+    /*color: #B2D6F4;*/
+    color: #f7f9fa;
+    font-size: 2em;
+}
+
+#headerTitle a {
+    color: #f7f9fa;
+    text-decoration: none;
+}
+#headerTitle a:hover {
+    text-decoration: underline;
+}
+
+.barGraphDiv {
+    max-height: 300px;
+    overflow: hidden;
+    opacity: 1;
+}
+.barGraphDiv.ng-hide-add.ng-hide-add-active,
+.barGraphDiv.ng-hide-remove.ng-hide-remove-active {
+    -webkit-transition: all linear 0.1s;
+    -webkit-animation-timing-function: ease-in-out;
+    transition: all linear 0.1s;
+    animation-timing-function: ease-in-out;
+
+}
+
+.barGraphDiv.ng-hide {
+    max-height: 0;
+    opacity: 0;
+}
+
+/* D3 styles */
+
+.label {
+    font-family: "Open Sans";
+    fill: #47525d;
+}
+
+.value {
+    font-weight: normal;
+    lengthAdjust: spacing;
+    text-anchor: middle;
+}
+
+.axis path {
+    display: none;
+}
+
+.axis line {
+    shape-rendering: crispEdges;
+    stroke: #d0d4d9;
+}
+
+.axis .minor line {
+    stroke: #d0d4d9;
+    stroke-dasharray: 2, 2;
+}
+
+.axis text, .axis .minor text {
+    font-family: "Open Sans";
+    fill: #d0d4d9;
+    text-anchor: end !important;
+}
+
+.thresholdLine path {
+    stroke: #fcbdbd;
+    stroke-width: 4px;
+    /*stroke-dasharray: 2,2;*/
+    opacity: 0.5;
+    fill: none
+}

hermes/webapp/src/index.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html ng-app="hermesApp">
+<head>
+    <title>Hermes Fate Viewer</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
+    <link href="/css/hermes.css" rel="stylesheet" type="text/css"/>
+</head>
+<body>
+    <div class="container-fluid">
+        <div id="header">Hermes</div>
+        <div style="padding: 10px" ng-view></div>
+    </div>
+
+    <script src="/vendor/angular/angular.js"></script>
+    <script src="/vendor/angular-route/angular-route.js"></script>
+    <script src="/vendor/angular-animate/angular-animate.js"></script>
+    <script src="/js/app.js"></script>
+</body>
+</html>

hermes/webapp/src/js/controllers/fateCtrl.js

@@ -0,0 +1,14 @@
+(function() {
+    'use strict';
+
+    function FateCtrl(hermesService) {
+        var vm = this;
+
+        hermesService.getFates().then(function(fates) {
+            vm.fates = fates;
+        });
+    }
+
+    angular.module('hermesApp').controller('FateCtrl', ['HermesService', FateCtrl]);
+
+})();