Thunder Client

The Thunder client is a single page application written entirely in javascript. The source files are located in the /client folder of the repository.

Editing

The application is packaged with Browserify using gulp. In order to make changes to the client, gulp needs to be running. Gulp will automatically re-bundle the application when changes are made.

npm i

from the root directory to install necessary dependencies, and then

npx gulp

will keep gulp running and watching the files for changes.

Flow

Index

The entry point of the application is /client/js/index.js. It creates and appends Main

Main

Bit of a mess. Main is in charge of:

• kicking off the initial business logic
• showing the login dialog
• handling logout
• Appending various UI divs (Console, Bar, Notification, Alert),
• managing opening and closing cards and their layout

Router

A much bigger mess. Router is a singleton who's main function .route() receives a string and passes a card to Main for display.

• establishes all of the routes, automatically adding /client/js/cards
• passes the active inmate id to cards when appropriate, or parameters. e.g. edit user zeus passes "zeus" to the editUser.js card
• provides routes for the directory card

Cards

Almost all functionality in thunder is presented to the user in a card.

Unfortunately there is a lot of boilerplate for cards. An example card looks like this:

var Diver = require('diver');
var ViewHelper = require('viewHelper');
var Events = require('events');
var Remote = require('remote');
var Main = require('main');

module.exports = function(id){

    var _this = this;
    Events.help(this);
    
    Diver
     .a('new-card')
        .b('body')
            .c('header')
                .d('title').html('New Card')
                .d('close')
            .c('content')
                .d('hello').html('Hello World')
            .c('bottom')
                .d('enter').html('Submit');
                
    var d = _this.div = Diver.pop();
    
    d.enter.on('click', function(){
        Remote.post('/not/a/real/api/call', {}, function(){
            Notification.success('Everything worked.');
            Main.closeView(_this);
        })
    })
    
    _this.layout = function(){
    
        var s = ViewHelper.style(_this);
        
        d.hello.style({
            text_align: 'center'
        })
        
        d.enter.style(s.button, {
            margin_left: s.secondLeft,
            margin_top: s.margin
        })
    }
    
    ViewHelper.help(_this);

}

• It's important that .div is set, otherwise nothing will be added to the screen
• Remote is used to communicate with the API
• ViewHelper.help will automatically add functionality to the X close button
• ViewHelper.style gives everything the default style, and exposes values in the s style variable
• Notification is a singleton for showing notifications at the top of the screen
• Diver is for DOM expression.

Automatically required and registered

Any js file in the /client/js/cards folder will be automatically included in the application bundle and can be accessed by require('cards/cardName'). It's important that a card is named in camelCase so that the in-application router registers it correctly. newCard.js will be available at the new card address when using the ~ console.

Forms

Forms exist as json objects served by the backend. They can be accessed and displayed with:

var Form = require('form');
var Remote = require('remote');

function(){

    var _formInstance;

    Remote.getForm('form_title', function (form) {
        _formInstance = new Form.instance(form);
        _this.div.append(formInstance.div);
        _this.layout();
    }
    
    //some time later
    setTimeout(function(){
        var formValues = _formInstance.report();
        // probably send the form data to the server
    }, 10000)
    
    _this.layout = function(){
        _formInstance.layout();
    }
}

• The server first looks for a form as a .json file in /forms
• If it doesn't find a file of that name, it looks in /forms/forms.json

A simple form might look like this:

{
    "title": 'example_form',
    "columns": "1"
    "labels": "beside",
    "labelRatio": 0.4, //how wide the label column is
    "components": [
        {
            "type": "input",
            "key": "key_in_database_eventually",
            "label": "Simple input"
        }
    ]
}

Forms get complicated when they become nested (a form can exist as a component of another form).