Author: jruchaud Date: 2015-04-17 14:37:50 +0000 (Fri, 17 Apr 2015) New Revision: 1221 Url: http://forge.nuiton.org/projects/sandbox/repository/revisions/1221 Log: Migrate rapport.html to react Added: wit/js/Rapport.js wit/js/components/FilterBar.js wit/js/components/FilterLogs.js wit/js/main.js Removed: wit/rapport.html Modified: wit/css/style.less wit/index.html wit/js/App.js wit/js/components/ActionsBar.js Modified: wit/css/style.less =================================================================== --- wit/css/style.less 2015-04-17 13:17:26 UTC (rev 1220) +++ wit/css/style.less 2015-04-17 14:37:50 UTC (rev 1221) @@ -10,3 +10,7 @@ background-color: #f8f8f8; color: #f3f3f3; } + +table { + color: black; +} Modified: wit/index.html =================================================================== --- wit/index.html 2015-04-17 13:17:26 UTC (rev 1220) +++ wit/index.html 2015-04-17 14:37:50 UTC (rev 1221) @@ -11,7 +11,11 @@ <script type="text/jsx" src="js/components/Tags.js"></script> <script type="text/jsx" src="js/components/Time.js"></script> <script type="text/jsx" src="js/components/ActionsBar.js"></script> + <script type="text/jsx" src="js/components/FilterBar.js"></script> + <script type="text/jsx" src="js/components/FilterLogs.js"></script> <script type="text/jsx" src="js/App.js"></script> + <script type="text/jsx" src="js/Rapport.js"></script> + <script type="text/jsx" src="js/main.js"></script> <!-- For Less --> <link rel="stylesheet/less" type="text/css" href="css/style.less" /> Modified: wit/js/App.js =================================================================== --- wit/js/App.js 2015-04-17 13:17:26 UTC (rev 1220) +++ wit/js/App.js 2015-04-17 14:37:50 UTC (rev 1221) @@ -1,9 +1,6 @@ /** @jsx React.DOM */ -var timer = require('./js/TimerService.js'); - var App = React.createClass({ - render: function() { return ( <div> @@ -15,7 +12,3 @@ } }); -React.render( - <App/>, - document.getElementById('content') -); Added: wit/js/Rapport.js =================================================================== --- wit/js/Rapport.js (rev 0) +++ wit/js/Rapport.js 2015-04-17 14:37:50 UTC (rev 1221) @@ -0,0 +1,21 @@ +/** @jsx React.DOM */ + +var Rapport = React.createClass({ + + getInitialState : function() { + return {result: []}; + }, + + handleSearchResult: function(result) { + this.setState({result: result}); + }, + + render: function() { + return ( + <div> + <FilterBar onSearchResult={this.handleSearchResult}/> + <FilterLogs data={this.state.result}/> + </div> + ); + } +}); Modified: wit/js/components/ActionsBar.js =================================================================== --- wit/js/components/ActionsBar.js 2015-04-17 13:17:26 UTC (rev 1220) +++ wit/js/components/ActionsBar.js 2015-04-17 14:37:50 UTC (rev 1221) @@ -12,7 +12,7 @@ onRapport: function(e) { var gui = require('nw.gui'); - var new_win = gui.Window.open('rapport.html', { + var new_win = gui.Window.open('index.html#rapport', { position: 'center', toolbar: true }); Added: wit/js/components/FilterBar.js =================================================================== --- wit/js/components/FilterBar.js (rev 0) +++ wit/js/components/FilterBar.js 2015-04-17 14:37:50 UTC (rev 1221) @@ -0,0 +1,41 @@ +/** @jsx React.DOM */ + +var FilterBar = React.createClass({ + + componentWillMount: function() { + var moment = require('moment'); + + var now = moment(); + now.add(1, 'hours'); + this.endDefaultDate = now.format("YYYY-MM-DDThh:mm"); + + now.subtract(7, 'days'); + this.startDefaultDate = now.format("YYYY-MM-DDThh:mm"); + }, + + onSearch: function() { + var self = this; + var moment = require('moment'); + var db = require("./js/database.js"); + + var beginDate = moment(React.findDOMNode(this.refs.beginDate).value).toDate(); + var endDate = moment(React.findDOMNode(this.refs.endDate).value).toDate(); + + db.searchLogs(null, beginDate) + .then(function(result) { + self.props.onSearchResult(result); + console.log(result); + }); + }, + + render: function() { + + return ( + <div className="filter"> + <input ref="beginDate" type="datetime-local" required value={this.startDefaultDate}></input> + <input ref="endDate" type="datetime-local" required value={this.endDefaultDate}></input> + <button onClick={this.onSearch}>Search</button> + </div> + ); + } +}); Added: wit/js/components/FilterLogs.js =================================================================== --- wit/js/components/FilterLogs.js (rev 0) +++ wit/js/components/FilterLogs.js 2015-04-17 14:37:50 UTC (rev 1221) @@ -0,0 +1,24 @@ +/** @jsx React.DOM */ + +var FilterLogs = React.createClass({ + + render: function() { + var moment = require('moment'); + + var items = this.props.data.map(function(log) { + return ( + <tr> + <td>{moment(log.startDate).format("MM/DD/YY, h:mm:ss")}</td> + <td>{moment(log.endDate).format("MM/DD/YY, h:mm:ss")}</td> + <td>{log.tags.join(",")}</td> + </tr> + ); + }); + + return ( + <table> + {items} + </table> + ); + } +}); Added: wit/js/main.js =================================================================== --- wit/js/main.js (rev 0) +++ wit/js/main.js 2015-04-17 14:37:50 UTC (rev 1221) @@ -0,0 +1,12 @@ +/** @jsx React.DOM */ + +var timer = require('./js/TimerService.js'); + +(function() { + var app = location.hash == "#rapport" ? <Rapport/> : <App/>; + + React.render( + app, + document.getElementById('content') + ); +})(); Deleted: wit/rapport.html =================================================================== --- wit/rapport.html 2015-04-17 13:17:26 UTC (rev 1220) +++ wit/rapport.html 2015-04-17 14:37:50 UTC (rev 1221) @@ -1,51 +0,0 @@ -<!DOCTYPE html> -<html> - <head> - <title>WIT</title> - - </head> - <body> - <h1>Rapport</h1> - <input id="begin" type="datetime-local" required></input> - <input id="end" type="datetime-local" required></input> - <div id="search">Search</div> - <table><tbody id="result"></tbody></table> - - - <script type="application/javascript"> - var moment = require('moment'); - var db = require("./js/database.js"); - - var beginNode = document.getElementById("begin"); - var endNode = document.getElementById("end"); - var searchNode = document.getElementById("search"); - var resultNode = document.getElementById("result"); - - var now = moment(); - now.add(1, 'hours'); - endNode.value = now.format("YYYY-MM-DDThh:mm"); - - now.subtract(7, 'days'); - beginNode.value = now.format("YYYY-MM-DDThh:mm"); - - searchNode.onclick = function() { - var beginDate = moment(beginNode.value).toDate(); - var endDate = moment(beginNode.value).toDate(); - - resultNode.innerHTML = ""; - - db.searchLogs(null, beginDate) - .then(function(result) { - for (var i = 0, l = result.length; i < l; i ++) { - var log = result[i]; - resultNode.insertAdjacentHTML("beforeend", "<tr>" - + "<td>" + moment(log.startDate).format("MM/DD/YY, h:mm:ss") + "</td>" - + "<td>" + moment(log.endDate).format("MM/DD/YY, h:mm:ss") + "</td>" - + "<td>" + log.tags + "</td>" - + "</tr>"); - } - }); - } - </script> - </body> -</html>