r1221 - in wit: . css js js/components - Sandbox-commits

17 Apr 2015

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>

    

r1221 - in wit: . css js js/components

jruchaud＠users.nuiton.org

tags

participants (1)