Commit 0153d886 authored by Eirik Alvær's avatar Eirik Alvær
Browse files

Initial commit.

parent 6331e072
components
.idea
.settings
.classpath
.project
tags
*.swp
*.iml
*.sublime-project
*.sublime-workspace
config/config.js
Nesstar Touch
=============
This is the front end part of a mobile web app for accessing Nesstar
repositories. It depends on the NesstarDrop project as the backend.
To get it up and running
------------------------
$ Install bower (With NPM: `npm install -g bower`)
$ Install dependencies: `bower install`
$ rename `config/config.js.example` to `config.js` and edit to suit your setup
$ open index.html in you favourite broser (preferrably Chrome ;)
If your REST server expects a namespace on the URL path (such as
`/api/study/list` instead of `/study/list`), add it to the
`config/config.js`file. You can specify either a namespace (`/api`) or a URL
(`http://my-host:8080/api`).
{
"name": "NesstarTouch",
"version": "0.0.1",
"ignore": [
"**/.*",
"node_modules",
"components"
],
"dependencies": {
"dojo": "1.9.0rc2",
"dojox": "1.9.0rc2",
"dijit": "1.9.0rc2"
}
}
window.config = {
baseUrl: 'http://129.177.92.208/api/',
useAlternativeConsole: false
}
@charset 'UTF-8';
.pageOverlay {
position: absolute;
width: 100%;
z-index: 1001;
display: block;
top: 0; left: 0; right: 0; bottom: 0;
}
#splash {
background: #fff url('../components/dijit/themes/claro/images/loadingAnimation.gif') no-repeat 50% 50%;
}
#splash p {
position: absolute;
bottom: 40%;
font-family: Helvetica, Arial, verdana, sans-serif;
width: 100%;
text-align: center;
color: #999;
}
@charset 'UTF-8';
.scrollable-view {
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.search-enabled-list {
display: block;
float: none;
margin-top: 2.5em;
}
.text-view {
padding: 0 0.25em;
}
#table {
margin: 18px;
}
#table table, #table td {
border: 1px solid #333;
border-collapse: collapse;
}
#table .stub {
text-align: left;
}
#table .header {
text-align: center;
}
#table .cell {
text-align: right;
}
#table td {
padding: 4px;
}
.dragging-avatar {
position: fixed;
height: 43px;
line-height: 43px;
font-weight: bold;
padding-left: 1em;
background-color: #fff;
border: 1px solid #adaaad;
border-radius: 8px;
box-shadow: 4px 4px 4px #888;
}
.droppable {
border-color: blue;
}
.hovered {
border-color: #51cbee;
}
.disabled {
color: #ddd;
}
.positionIndicator {
height: 1px;
background-color: #51cbee;
list-style-type: none;
@include box-shadow(0 0 2px #51cbee);
@include transition(all, 0.30s, ease-in-out);
}
.search-box {
font-size: 1.2em;
width: 100%;
}
.search-box-pane {
position: relative;
padding: 0.6em;
display: block;
}
.moreButton {
display: block;
width: 12em;
margin: 1em auto;
}
.variableMetadataText {
width: 100%;
table-layout: fixed;
}
.variableMetadataText th {
font-weight: normal;
text-align: left;
}
.variableMetadataText, .variableMetadataText td {
border: none;
}
.variableMetadataText td {
text-overflow: ellipsis;
overflow: hidden;
}
.variableMetadataText th, .variableMetadataText td {
padding: .1em .5em .1em 0;
}
.variableMetadataText td {
white-space: nowrap;
}
.variableMetadataText .catValu {
width: 15%;
}
.variableMetadataText .catStat {
width: 15%;
text-align: right;
}
.variableMetadataText .labl {
max-width: 60%;
}
.variableMetadataText .bars {
width: 40%;
}
.variableMetadataText .bar-wrapper {
font-size: 80%;
}
.variableMetadataText .bar {
display: block;
float: left;
margin-right: .1em;
background-color: rgb(40,130,190);
border-bottom: 1px solid #555;
border-right: 1px solid #555;
border-top: 1px solid #eee;
border-left: 1px solid #eee;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
height: 1em;
}
table.metadataText, table.metadataText th{
border: 1px solid grey;
border-collapse: collapse;
text-align: center;
}
table.metadataText td {
border: 1px solid grey;
border-collapse: collapse;
text-align: left;
padding: .1em;
}
table.metadataText th {
background-color: #dedede;
padding: .1em;
}
img.mblListItemRightIcon {
border-left: 1px solid grey;
margin: 0;
}
.mblRoundRectCategory {
white-space : normal;
margin-left: 2px;
}
.text-view .mblRoundRectCategory {
margin-left: 0;
}
.mblAccordionTitle {
height: 2.7em;
line-height: 2.7em;
}
#studyListData .mblVariableHeight {
padding: 0 0 0 8px;
}
#variables .mblListItem {
padding: 0 0 0 8px;
}
#gototop {
visibility: hidden;
z-index: 1;
position: fixed;
left: 10px;
bottom: 10px;
text-decoration: none;
color: #bbb;
/* transition */
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
padding: 10px;
}
/* arrow icon (span tag) */
#gototop span {
width: 70px;
height: 70px;
display: block;
margin-bottom: 7px;
background: #ddd url(../images/up-arrow.png) no-repeat center center;
/* rounded corners */
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
/* transition */
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
}
\ No newline at end of file
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/> <title>Nesstar Touch Testing</title>
<meta name="apple-mobile-web-app-capable" content="yes" /> <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
<meta charset="utf-8"> <style type="text/css">
.listString:after {
<title>Nesstar Touch:</title> content: ',';
<link rel="shortcut icon" href="images/smalln1.ico" type="image/x-icon"/> }
<link rel="apple-touch-icon" href="images/apple-touch-icon.png"/> .listString:last-child:after {
<link rel="apple-touch-icon-precomposed" href="images/apple-touch-icon.png"/> content: '';
<link rel="stylesheet" type="text/css" href="css/overlay.css"/> }
<link rel="stylesheet" type="text/css" href="css/style.css"/> .horizontalBar {
</head> background-color: blue;
<body> height: 0.5em;
<div id="splash" class="loadingOverlay pageOverlay"><p>Loading...</p></div> }
<div id="gototop"><span></span></div> </style>
<script type="text/javascript"> </head>
var dojoConfig = (function() { <body>
var base = location.href.split('/');
base.pop(); <div class="container">
base = base.join('/');
<div id="nesstarTouchContent"></div>
return {
async: true, </div>
//cacheBust: new Date(),
packages: [ <script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
{ <script src="http://cdnjs.cloudflare.com/ajax/libs/json2/20121008/json2.js"></script>
name: 'nesstartouch', <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
location: base + '/js/' <script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js"></script>
}, <script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0/handlebars.min.js"></script>
{ <script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
name: 'nesstarconfig',
location: base + '/config/' <script src="js/common.js"></script>
} <script src="js/model.js"></script>
] <script src="js/templates-loader.js"></script>
}; <script src="js/metadata-maker.js"></script>
})(); <script src="js/controller.js"></script>
</script>
</body>
<script src="components/dojo/dojo.js" data-dojo-config="async: true"></script> </html>
\ No newline at end of file
<script>
var splash;
require(['dojo/_base/declare',
'dojo/dom',
'dojo/dom-style',
'dojo/_base/fx'],
function(declare, dom, domStyle, fx) {
var SplashScreen = declare(null, {
overlayNode: 'splash',
startLoading: function() {
fx.fadeIn({
node: this.overlayNode,
onEnd: function(node) {
setTimeout(function() {
domStyle.set(node, 'display', 'block');
}, 200);
}
}).play();
},
endLoading: function() {
fx.fadeOut({
node: this.overlayNode,
onEnd: function(node) {
setTimeout(function() {
domStyle.set(node, 'display', 'none');
}, 200);
}
}).play();
},
});
splash = new SplashScreen();
});
require(['dojox/mobile/parser',
'dojox/mobile/deviceTheme',
'dojox/mobile',
'dojox/mobile/bookmarkable',
'dojox/mobile/ScrollableView',
'dojox/mobile/Accordion',
'dojox/mobile/Button',
'dojox/mobile/TextBox',
'dojox/mobile/SearchBox',
'dojox/mobile/SimpleDialog',
'nesstartouch/StudyList',
'dojox/mobile/ContentPane',
'nesstartouch/VariableList',
'nesstartouch/SettingsView',
'nesstartouch/AnalysisTypeList',
'nesstartouch/TabulationDataType',
'nesstartouch/Tabulation',
'nesstartouch/MeasureTypeList',
'nesstartouch/CorrelationDisplayOptions',
'nesstartouch/StudyMetadata',
'nesstartouch/VariableMetadata',
'nesstartouch/SearchField',
'dojo/domReady!'],
function(parser) {
if (window.config.useAlternativeConsole) {
require(['nesstartouch/_Console'], function(Console) {
new Console();
});
}
parser.parse();
}
);
</script>
<!-- select study view -->
<div id="studyList" data-dojo-id="studylist" data-dojo-type="dojox.mobile.ScrollableView" data-dojo-props="selected: true, scrollBar: true">
<h1 data-dojo-type="dojox.mobile.Heading" data-dojo-props="fixed : 'top'">
<span id="cancelStudyPickerButton" data-dojo-type="dojox.mobile.ToolBarButton" data-dojo-props="transition: 'slide', transitionDir: '-1', arrow: 'left', moveTo: '#settings'" style="visibility: hidden">Cancel</span>
Select Study
</h1>
<div data-dojo-type="dojox.mobile.ContentPane" data-dojo-props="fixed:'top'" class="search-box-pane mblBackground">
<input data-dojo-type="nesstartouch.SearchField" class="search-box" type="search" placeHolder="Filter studies" data-dojo-id="studySearchBox" data-dojo-props='moreignoreCase:true, queryExpr:"*${0}*", searchAttr:"label", listId: "studyListData"'>
</div>
<ul id="studyListData" class="search-enabled-list" data-dojo-type="nesstartouch.StudyList" data-dojo-props="variableHeight:true"> </ul>
</div>
<!-- study metadata view -->
<div id="studyMetadata" data-dojo-type="dojox.mobile.ScrollableView">
<h1 data-dojo-type="dojox.mobile.Heading" data-dojo-props="fixed : 'top'">
<span data-dojo-type="dojox.mobile.ToolBarButton" data-dojo-props="arrow : 'left', label : 'Select Study', moveTo: '#studyList'"></span>
Study Metadata
</h1>
<div data-dojo-type="nesstartouch.StudyMetadata" class="text-view"></div>
</div>
<!-- tabulation view -->
<div id="tabulation" data-dojo-type="nesstartouch.Tabulation">
<h1 data-dojo-id='tabulation.heading' data-dojo-type="dojox.mobile.Heading" data-dojo-props="fixed : 'top', label: 'Tabulation'">
<span data-dojo-type="dojox.mobile.ToolBarButton" data-dojo-props="moveTo: '#settings'">Settings</span>
</h1>
<h2 data-dojo-type="dojox.mobile.RoundRectCategory" id="tabulation.studyTitle"></h2>
<div id="table" class="scrollable-view text-view"></div>
<div data-dojo-id='tabulation.variablesMetadata' class="text-view" data-dojo-type='dojox.mobile.Accordion'></div>
</div>
<!-- variable metadata view -->
<div id="variableMetadata" data-dojo-type="dojox.mobile.ScrollableView">
<h1 data-dojo-type="dojox.mobile.Heading" data-dojo-props="fixed : 'top'">
<span data-dojo-type="dojox.mobile.ToolBarButton" data-dojo-props="arrow : 'left', label : 'Back', back : true"></span>
Variable Metadata
</h1>
<div data-dojo-type="nesstartouch.VariableMetadata" class="text-view"></div>
</div>
<!-- side bar -->
<div id="settings" data-dojo-type="nesstartouch.SettingsView">
<h1 data-dojo-type="dojox.mobile.Heading" data-dojo-props="fixed: 'top'">
<span data-dojo-type="dojox.mobile.ToolBarButton" data-dojo-props="transition: 'slide', transitionDir: '-1', moveTo: '#tabulation'" data-dojo-id="settings.doButton">Tabulation</span>
</h1>
<div data-dojo-id="settings.studyItemsContainer" data-dojo-type="dojox.mobile.Container">
<ul data-dojo-type="dojox.mobile.RoundRectList" data-dojo-props="variableHeight: true">
<li data-dojo-id="settings.currentStudyLabel" data-dojo-type="dojox.mobile.ListItem" data-dojo-props="moveTo: '#studyList', rightText: 'Some study label'">Study</li>
<li data-dojo-id="settings.currentAnalysisType" data-dojo-type="dojox.mobile.ListItem" data-dojo-props="rightText: 'Tabulation', moveTo: '#analysisTypeList'">Analysis type</li>
</ul>
<!-- tabulation variables setting part -->
<div data-dojo-id="settings.tabulationVariablesList" data-dojo-type="dojox.mobile.Container">
<div data-dojo-id="settings.tabulationDataContainer" data-dojo-type="dojox.mobile.Container">
<h2 data-dojo-type="dojox.mobile.RoundRectCategory">Tabulation Data Type</h2>
<ul data-dojo-type="dojox.mobile.RoundRectList">
<li data-dojo-id="settings.tabulationDataType" data-dojo-type="dojox.mobile.ListItem" data-dojo-props="moveTo: '#tabulationDataType'">Tabulation Data type</li>
</ul>
</div>
<h2 data-dojo-type="dojox.mobile.RoundRectCategory">Row Variables</h2>
<ul data-dojo-id="settings.rowVariables" data-dojo-type="dojox.mobile.RoundRectStoreList"></ul>
<h2 data-dojo-type="dojox.mobile.RoundRectCategory">Column Variables</h2>
<ul data-dojo-id="settings.columnVariables" data-dojo-type="dojox.mobile.RoundRectStoreList"></ul>
<h2 data-dojo-type="dojox.mobile.RoundRectCategory">Measure Variable</h2>
<ul data-dojo-id="settings.measureVariable" data-dojo-type="dojox.mobile.RoundRectStoreList"></ul>
</div>
<!-- correlation variables setting part -->
<div data-dojo-id="settings.correlationVariablesList" data-dojo-type="dojox.mobile.Container">
<h2 data-dojo-type="dojox.mobile.RoundRectCategory">Correlation Variables</h2>
<ul data-dojo-id="settings.correlationVariables" data-dojo-type="dojox.mobile.RoundRectStoreList"></ul>
</div>
<!-- regression variables setting part -->
<div data-dojo-id="settings.regressionVariablesList" data-dojo-type="dojox.mobile.Container">
<h2 data-dojo-type="dojox.mobile.RoundRectCategory">Dependent Variable</h2>
<ul data-dojo-id="settings.dependentVariable" data-dojo-type="dojox.mobile.RoundRectStoreList"></ul>
<h2 data-dojo-type="dojox.mobile.RoundRectCategory">Independent Variables</h2>
<ul data-dojo-id="settings.independentVariables" data-dojo-type="dojox.mobile.RoundRectStoreList"></ul>
</div>
</div>
</div>
<!-- analysis type list -->
<div id="analysisTypeList" data-dojo-id="analysisTypeList" data-dojo-type="dojox.mobile.ScrollableView">
<h1 data-dojo-type="dojox.mobile.Heading" data-dojo-props="fixed: top">
Select Analysis Type
</h1>
<ul data-dojo-id="analysisTypeList.types" data-dojo-type="nesstartouch.AnalysisTypeList" data-dojo-props="select: 'single'"></ul>
</div>
<!-- Tabulation data type -->
<div id="tabulationDataType" data-dojo-id="tabulationDataType" data-dojo-type="dojox.mobile.ScrollableView">
<h1 data-dojo-type="dojox.mobile.Heading" data-dojo-props="fixed: top">
Select Tabulation Data Type
</h1>
<ul data-dojo-id="tabulationDataType.types" data-dojo-type="nesstartouch.TabulationDataType" data-dojo-props="select: 'single'"></ul>
</div>
<!-- correlation display options -->
<div id="correlationDisplayOptions" data-dojo-type="dojox.mobile.ScrollableView">
<h1 data-dojo-type="dojox.mobile.Heading" data-dojo-props="fixed: top">
<span data-dojo-type="dojox.mobile.ToolBarButton" data-dojo-props="transition: 'slide', transitionDir: '-1', moveTo: '#settings', arrow : 'left'">Back</span>
Select Display Options
</h1>
<ul data-dojo-type="nesstartouch.correlationDisplayOptions" data-dojo-props="select: 'multiple'"></ul>
</div>
<!-- measure type list -->
<div id="measureTypeList" data-dojo-id="measureTypeList" data-dojo-type="dojox.mobile.ScrollableView">
<h1 data-dojo-type="dojox.mobile.Heading" data-dojo-props="fixed: top">
Select Measure Type
</h1>
<ul data-dojo-id="measureTypeList.types" data-dojo-type="nesstartouch.MeasureTypeList" data-dojo-props="select: 'single'"></ul>
</div>
<!-- variable list -->
<div id="variables" data-dojo-type="dojox.mobile.ScrollableView" data-dojo-id="variableView">
<h1 data-dojo-type="dojox.mobile.Heading" id="variables.title" data-dojo-props="fixed: 'top', label: 'Add Variable'">
<span data-dojo-type="dojox.mobile.ToolBarButton" data-dojo-props="transition: 'slide', transitionDir: '-1', arrow: 'left', moveTo: '#settings'">Cancel</span>
</h1>
<div data-dojo-type="dojox.mobile.ContentPane" data-dojo-props="fixed:'top'" class="search-box-pane mblBackground">
<input data-dojo-type="nesstartouch.SearchField" class="search-box" type="search" placeHolder="Filter variables" data-dojo-id="variableSearchBox" data-dojo-props='moreignoreCase:true, queryExpr:"*${0}*", searchAttr:"label", listId: "addVariableList"'>
</div>
<div class="search-enabled-list">
<ul data-dojo-type="nesstartouch/VariableList" data-dojo-id="addVariableList" id="addVariableList"></ul>
</div>
<button data-dojo-type="dojox.mobile.Button" class="moreButton" style="visibility: hidden" data-dojo-id="moreVariablesButton">
Load more variables
</button>
</div>
<div data-dojo-id="alert.message" data-dojo-type="dojox.mobile.SimpleDialog">
<div class="mblSimpleDialogTitle">Alert</div>
<div class="mblSimpleDialogText" id="alertMessageContent"></div>
<button data-dojo-type="dojox.mobile.Button" class="mblSimpleDialogButton mblBlueButton" data-dojo-id="alertDialogButton" style="width:100px;">OK</button>
</div>
</body>
</html>
/*global define */
define(['dojo/_base/declare',
'dojo/_base/array',
'dojo/topic',
'dojox/mobile/ListItem',
'dojox/mobile/RoundRectList'], function (declare, arrayUtils, topic, ListItem, RoundRectList) {
return declare('nesstartouch.AnalysisTypeList', [RoundRectList], {
startup: function () {
this.inherited(arguments);
arrayUtils.forEach(this._types, function (someType, index) {
var checked = index === this._defaultType,
item = {
'label': someType,
'moveTo': '#settings',
'transitionDir': -1,
'noArrow': true,
'checked': checked,