Windows generator

frontend-test-mockup

by codemeasandwich

HTML

<script src="http://fb.me/react-with-addons-0.12.1.js"></script>
<script src="http://fb.me/JSXTransformer-0.12.2.js"></script>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/black-tie/jquery-ui.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.5.1/moment.min.js"></script>
<link rel="stylesheet" href="https://rawgithub.com/daneden/animate.css/master/animate.css">
<div class="container">
<div class="panel panel-default">
  <div class="panel-heading">JSON DATA</div>
  <div class="panel-body" id="json-data">
    {
  "window_data" : [
   {
     "id" : 1,
     "name" : "Foo", 
     "start" : "2015-04-01T00:00:00.000Z", 
     "end" : "2015-04-10T00:00:00.000Z"
   },
   {
     "id" : 2,
     "name" : "Bar", 
     "start" : "2015-04-03T00:00:00.000Z", 
     "end" : "2015-04-11T00:00:00.000Z"
   },
   {
     "id" : 3,
     "name" : "Baz", 
     "start" : "2015-04-10T00:00:00.000Z", 
     "end" : "2015-04-12T00:00:00.000Z"
   }
  ],
  "window_keys" : {
     "id" : "id",
     "name" : "Window name", 
     "start" : "Start date", 
     "end" : "End date"
  },
  "data_formats" : {
     "id" : "int",
     "name" : "string", 
     "start" : "date", 
     "end" : "date"
  }
}
  </div>
</div>

    <div id="container"></div>
</div>
<script src="http://fb.me/react-js-fiddle-integration.js"></script>

CSS

body{margin:40px;}


.btn-circle {
  width: 30px;
  height: 30px;
  text-align: center;
  padding: 6px 0;
  font-size: 12px;
  line-height: 1.428571429;
  border-radius: 15px;
}
.btn-circle.btn-lg {
  width: 50px;
  height: 50px;
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.33;
  border-radius: 25px;
}
.btn-circle.btn-xl {
  width: 70px;
  height: 70px;
  padding: 10px 16px;
  font-size: 24px;
  line-height: 1.33;
  border-radius: 35px;
}

JavaScript 1.7

/** @jsx React.DOM */

//=====================================================
//====================================== JSON Utilities
//=====================================================

var getJson = function(elemID){
	elemID = elemID || "json-data"
	var json = JSON.parse(document.getElementById(elemID).innerHTML);
  
  json.window_data = json.window_data.map(function(entry){
  	
    for(var name in entry){
    	if("date" === json.data_formats[name]){
      	entry[name] = new Date(entry[name])
      }
    }
    return entry;
    
  })
  return json;
}

var setJson = function(elemID,jsonString){
	elemID = elemID || "json-data"
	document.getElementById(elemID).innerHTML = JSON.stringify(jsonString);
}

//=====================================================
//========================================== DatePicker
//=====================================================

var DatePicker = React.createClass({
    _destroyDatePicker: function() {
        var element = this.getDOMNode();
        $(element).datepicker('destroy');
    },

    _initDatePicker: function() {
        var element = this.getDOMNode();
        // or in >= 0.13 
        // var element = React.findDOMNode(this);
        var onChange = this.props.onChange
        this.props.onSelect = function(){
        	onChange($(this).val());
        }
        //this.props.dateFormat = "dd/mm/yyyy"
        $(element).datepicker(this.props);    
    },

    componentDidMount: function() {
        this._initDatePicker();
    },
    
    componentWillReceiveProps: function(props) {
        // could be optimized better to invoke functions on
        // active plugin based on property values
        this._destroyDatePicker();
    },

    componentDidUpdate: function() {
        this._initDatePicker();
    },

    componentWillUnmount: function() {
        this._destroyDatePicker();
    },

    render: function() {
        return <input className="form-control" type="text" {...this.props}/>
   ...