[Sandbox-commits] r1489 - wit/js/components

26 May 2015

Author: jruchaud
Date: 2015-05-26 14:18:17 +0000 (Tue, 26 May 2015)
New Revision: 1489

Url: http://forge.nuiton.org/projects/sandbox/repository/revisions/1489

Log:
Use class

Added:
   wit/js/components/TimelineSession.js
Modified:
   wit/js/components/ActionsBar.js
   wit/js/components/FilterBar.js
   wit/js/components/FilterLogs.js
   wit/js/components/InputTag.js
   wit/js/components/LogsTable.js
   wit/js/components/Tags.js
   wit/js/components/Time.js
   wit/js/components/Timeline.js

Modified: wit/js/components/ActionsBar.js
===================================================================

--- wit/js/components/ActionsBar.js	2015-05-26 13:58:47 UTC (rev 1488)
+++ wit/js/components/ActionsBar.js	2015-05-26 14:18:17 UTC (rev 1489)
@@ -1,26 +1,29 @@
 "use strict";
 
-var ActionsBar = React.createClass({
+var React = require("react");
+var timer = require("../services/TimerService.js");
 
-    onPlay: function() {
-        scope.timer.start();
-    },
+class ActionsBar extends React.Component {
 
-    onStop: function() {
-        scope.timer.stop(true);
-    },
+    onPlay() {
+        timer.start();
+    }
 
-    prevHistory: function() {
-        scope.timer.stop();
-        scope.timer.prevHistory();
-    },
+    onStop() {
+        timer.stop(true);
+    }
 
-    nextHistory: function() {
-        scope.timer.stop();
-        scope.timer.nextHistory();
-    },
+    prevHistory() {
+        timer.stop();
+        timer.prevHistory();
+    }
 
-    render: function() {
+    nextHistory() {
+        timer.stop();
+        timer.nextHistory();
+    }
+
+    render() {
         return <div className="text-center">
                 <div ref="actions" className="btn-group" role="group">
                     <button type="button" className="btn btn-primary btn-lg" onClick={this.prevHistory}>
@@ -38,4 +41,6 @@
                 </div>
            </div>;
     }
-});
+}
+
+module.exports = ActionsBar;

Modified: wit/js/components/FilterBar.js
===================================================================
--- wit/js/components/FilterBar.js	2015-05-26 13:58:47 UTC (rev 1488)
+++ wit/js/components/FilterBar.js	2015-05-26 14:18:17 UTC (rev 1489)
@@ -1,8 +1,10 @@
 "use strict";
 
-var FilterBar = React.createClass({
+var React = require("react");
 
-    componentDidMount: function() {
+class FilterBar extends React.Component {
+
+    componentDidMount() {
         var moment = require("moment");
 
         var now = moment();
@@ -14,9 +16,9 @@
 
         this.refs.beginDate.getDOMNode().value = startDefaultDate;
         this.refs.endDate.getDOMNode().value = endDefaultDate;
-    },
+    }
 
-    search: function() {
+    search() {
         var moment = require("moment");
         var db = require("./js/services/database.js");
 
@@ -24,18 +26,20 @@
             endDate = moment(this.refs.endDate.getDOMNode().value);
 
         return db.searchLogs(null, startDate, endDate, true);
-    },
+    }
 
-    onSearch: function() {
+    onSearch() {
         var onSearchResult = this.props.onSearchResult;
         this.search().then(onSearchResult);
-    },
+    }
 
-    render: function() {
+    render() {
         return <div>
                 <input ref="beginDate" type="datetime-local" className="form-control" required></input>
                 <input ref="endDate" type="datetime-local" className="form-control" required></input>
                 <button onClick={this.onSearch} className="btn btn-primary btn-block">Search</button>
             </div>;
     }
-});
+}
+
+module.exports = FilterBar;

Modified: wit/js/components/FilterLogs.js
===================================================================
--- wit/js/components/FilterLogs.js	2015-05-26 13:58:47 UTC (rev 1488)
+++ wit/js/components/FilterLogs.js	2015-05-26 14:18:17 UTC (rev 1489)
@@ -1,50 +1,54 @@
 "use strict";
 
-var FilterLogs = React.createClass({
+var React = require("react");
+var nonce = require("nonce")();
 
-    nonce: require("nonce")(),
-    printer: new Printer(),
+class FilterLogs extends React.Component {
 
-    onClipboardCSV: function() {
+    contructor() {
+        this.printer = new Printer();
+    }
+
+    onClipboardCSV() {
         this.printer.clipboard(Printer.CSV);
-    },
+    }
 
-    onClipboardTXT: function() {
+    onClipboardTXT() {
         this.printer.clipboard(Printer.TXT, this.state);
-    },
+    }
 
-    onMailCSV: function() {
+    onMailCSV() {
         this.printer.mail(Printer.CSV);
-    },
+    }
 
-    onMailTXT: function() {
+    onMailTXT() {
         this.printer.mail(Printer.TXT, this.state);
-    },
+    }
 
-    onShowSummary: function() {
+    onShowSummary() {
         this.refs.summary.getDOMNode().classList.toggle("hidden");
-    },
+    }
 
-    onLogDetails: function(e) {
+    onLogDetails(e) {
         var nodeId = e.target.dataset.id;
         if (nodeId) {
             this.refs[nodeId].getDOMNode().classList.toggle("hidden");
         }
-    },
+    }
 
-    onToggleFilterTag: function() {
+    onToggleFilterTag() {
         this.refs.filterTags.getDOMNode().classList.toggle("hidden");
-    },
+    }
 
-    getInitialState: function() {
+    getInitialState() {
         return {data: null, tags: {}};
-    },
+    }
 
-    componentWillReceiveProps: function(nextProps) {
+    componentWillReceiveProps(nextProps) {
         this.createTree(nextProps);
-    },
+    }
 
-    toggleTagChecked: function(e) {
+    toggleTagChecked(e) {
         Object.keys(this.state.tags).forEach(function(tag) {
             this.state.tags[tag] = e.target.checked;
         }, this);
@@ -54,17 +58,17 @@
             tags: this.state.tags
         });
         e.stopPropagation();
-    },
+    }
 
-    filterTag: function(e) {
+    filterTag(e) {
         this.state.tags[e.target.name] = e.target.checked;
         this.createTree({
             data: this.props.data,
             tags: this.state.tags
         });
-    },
+    }
 
-    createTree: function(currentState) {
+    createTree(currentState) {
         var data = {},
             tags = {};
 
@@ -98,9 +102,9 @@
             startDate: currentState.data.result.startDate,
             endDate: currentState.data.result.endDate
         });
-    },
+    }
 
-    renderTd: function(date, tags, tagObject) {
+    renderTd(date, tags, tagObject) {
         var r = [];
 
         if (tagObject.duration) {
@@ -109,7 +113,7 @@
                 return state.tags[tag];
             });
 
-            var key = this.nonce();
+            var key = nonce();
 
             if (filterTags.length) {
                 r.push(
@@ -140,9 +144,9 @@
         }
 
         return r;
-    },
+    }
 
-    render: function() {
+    render() {
         var items = [];
 
         var classString = "";
@@ -205,7 +209,7 @@
                 </div>
 
                 <div ref="summary" className="hidden">
-                    <Timeline key={this.nonce()} data={this.state}/>
+                    <Timeline key={nonce()} data={this.state}/>
                 </div>
 
                 <table className="table">
@@ -227,4 +231,6 @@
                 </h3>
             </div>;
     }
-});
+}
+
+module.exports = FilterLogs;

Modified: wit/js/components/InputTag.js
===================================================================
--- wit/js/components/InputTag.js	2015-05-26 13:58:47 UTC (rev 1488)
+++ wit/js/components/InputTag.js	2015-05-26 14:18:17 UTC (rev 1489)
@@ -1,35 +1,38 @@
 "use strict";
 
-var InputTag = React.createClass({
+var React = require("react");
+var timer = require("../services/TimerService.js");
 
-    getInitialState: function() {
+class InputTag extends React.Component {
+
+    getInitialState() {
         return {options: [], value: ""};
-    },
+    }
 
-    getTags: function() {
+    getTags() {
         var setState = self.setState;
-        scope.timer.getLastTags().then(function(tags) {
+        timer.getLastTags().then(function(tags) {
             setState({options: tags, value: ""});
         });
-    },
+    }
 
-    onKey: function(e) {
+    onKey(e) {
         var target = e.target;
         var value = target.value;
 
         if (e.keyCode === 13 && value !== "") { // On enter
             this.setState({options: this.state.options, value: ""});
 
-            scope.timer.stop();
-            scope.timer.addTag(value);
+            timer.stop();
+            timer.addTag(value);
         }
-    },
+    }
 
-    onChange: function(e) {
+    onChange(e) {
         this.setState({options: this.state.options, value: e.target.value});
-    },
+    }
 
-    render: function() {
+    render() {
         var options = [];
 
         if (this.state.value) {
@@ -58,4 +61,6 @@
             </div>;
     }
 
-});
+}
+
+module.exports = InputTag;

Modified: wit/js/components/LogsTable.js
===================================================================
--- wit/js/components/LogsTable.js	2015-05-26 13:58:47 UTC (rev 1488)
+++ wit/js/components/LogsTable.js	2015-05-26 14:18:17 UTC (rev 1489)
@@ -1,19 +1,22 @@
 "use strict";
 
-var LogsTable = React.createClass({
+var React = require("react");
+var timer = require("../services/TimerService.js");
 
-    onDelete: function(e) {
+class LogsTable extends React.Component {
+
+    onDelete(e) {
         var logId = e.target.dataset.id;
         if (logId) {
-            scope.timer.deleteLog(logId);
+            timer.deleteLog(logId);
 
             var index = parseInt(e.target.dataset.index, 10);
             this.props.data.splice(index, 1);
             this.forceUpdate();
         }
-    },
+    }
 
-    render: function() {
+    render() {
         var moment = require("moment");
         var items = [];
 
@@ -62,4 +65,6 @@
                 </h3>
             </div>;
     }
-});
+}
+
+module.exports = LogsTable;

Modified: wit/js/components/Tags.js
===================================================================
--- wit/js/components/Tags.js	2015-05-26 13:58:47 UTC (rev 1488)
+++ wit/js/components/Tags.js	2015-05-26 14:18:17 UTC (rev 1489)
@@ -1,32 +1,35 @@
 "use strict";
 
-var Tags = React.createClass({
+var React = require("react");
+var timer = require("../services/TimerService.js");
 
-    getInitialState: function() {
-        return scope.timer;
-    },
+class Tags extends React.Component {
 
-    componentDidMount: function() {
+    getInitialState() {
+        return timer;
+    }
+
+    componentDidMount() {
         this.forceUpdateBound = this.forceUpdate.bind(this);
-        scope.timer.subscribeTagsChanged(this.forceUpdateBound);
-    },
+        timer.subscribeTagsChanged(this.forceUpdateBound);
+    }
 
-    componentWillUnmount: function() {
-        scope.timer.unsubscribeTagsChanged(this.forceUpdateBound);
-    },
+    componentWillUnmount() {
+        timer.unsubscribeTagsChanged(this.forceUpdateBound);
+    }
 
-    onRemove: function(e) {
+    onRemove(e) {
         var target = e.target;
         var index = target.dataset.index;
 
-        scope.timer.stop();
-        scope.timer.removeTag(index);
-    },
+        timer.stop();
+        timer.removeTag(index);
+    }
 
-    render: function() {
+    render() {
         var onRemove = this.onRemove;
 
-        var tags = scope.timer.getTags();
+        var tags = timer.getTags();
 
         var rows = [];
         for (var i = 0; i < 5; i++) {
@@ -50,4 +53,6 @@
                 </li>
             </ul>;
     }
-});
+}
+
+module.exports = Tags;

Modified: wit/js/components/Time.js
===================================================================
--- wit/js/components/Time.js	2015-05-26 13:58:47 UTC (rev 1488)
+++ wit/js/components/Time.js	2015-05-26 14:18:17 UTC (rev 1489)
@@ -1,41 +1,44 @@
 "use strict";
 
-var Time = React.createClass({
+var React = require("react");
+var timer = require("../services/TimerService.js");
 
-    getInitialState: function() {
-        return scope.timer;
-    },
+class Time extends React.Component {
 
-    componentDidMount: function() {
+    getInitialState() {
+        return timer;
+    }
+
+    componentDidMount() {
         this.forceUpdateBound = this.forceUpdate.bind(this);
-        scope.timer.subscribeTimeChanged(this.forceUpdateBound);
-    },
+        timer.subscribeTimeChanged(this.forceUpdateBound);
+    }
 
-    componentWillUnmount: function() {
-        scope.timer.unsubscribeTimeChanged(this.forceUpdateBound);
-    },
+    componentWillUnmount() {
+        timer.unsubscribeTimeChanged(this.forceUpdateBound);
+    }
 
-    onEdit: function() {
+    onEdit() {
         this.refs.editButton.getDOMNode().classList.toggle("hidden");
         this.refs.editInput.getDOMNode().classList.toggle("hidden");
         this.refs.timeValue.getDOMNode().classList.toggle("hidden");
 
-        var time = scope.timer.getTime() || "00:00:00";
+        var time = timer.getTime() || "00:00:00";
         var editInputTime = this.refs.editInputTime.getDOMNode();
         editInputTime.value = time;
         editInputTime.max = time;
-    },
+    }
 
-    onSaveTime: function() {
+    onSaveTime() {
         this.refs.editButton.getDOMNode().classList.toggle("hidden");
         this.refs.editInput.getDOMNode().classList.toggle("hidden");
         this.refs.timeValue.getDOMNode().classList.toggle("hidden");
 
         var editInputTime = this.refs.editInputTime.getDOMNode();
-        scope.timer.editTime(editInputTime.value);
-    },
+        timer.editTime(editInputTime.value);
+    }
 
-    render: function() {
+    render() {
         return <div>
                 <button ref="editButton" type="button" className="btn btn-primary btn-small editButton" onClick={this.onEdit}>
                   <span className="glyphicon glyphicon-pencil" aria-hidden="true"></span>
@@ -60,4 +63,6 @@
                 </h5>
             </div>;
     }
-});
+}
+
+module.exports = Time;

Modified: wit/js/components/Timeline.js
===================================================================
--- wit/js/components/Timeline.js	2015-05-26 13:58:47 UTC (rev 1488)
+++ wit/js/components/Timeline.js	2015-05-26 14:18:17 UTC (rev 1489)
@@ -1,14 +1,19 @@
 "use strict";
 
-var Timeline = React.createClass({
+var React = require("react");
+var sess = require("../services/SessionsService.js");
 
-    getInitialState: function() {
+var TimelineSession = require("./TimelineSession.js");
+
+class Timeline extends React.Component {
+
+    getInitialState() {
         return {
             sessions: []
         };
-    },
+    }
 
-    componentDidMount: function() {
+    componentDidMount() {
         var moment = require("moment");
 
         var startDate;
@@ -24,16 +29,16 @@
         if (startDate && endDate) {
             var setState = this.setState.bind(this);
 
-            scope.sessions.getSessions(startDate, endDate, true)
+            sess.getSessions(startDate, endDate, true)
             .then(function(sessions) {
                 setState({
                     sessions: sessions
                 });
             });
         }
-    },
+    }
 
-    render: function() {
+    render() {
         var sessions = this.state.sessions;
 
         var items = [];
@@ -77,14 +82,14 @@
                     {items}
                 </div>
             </div>;
-    },
+    }
 
     /*
      * Normalize session dates and duration according to the given dates
      * If the given session starts before the given startDate or end after the given endDate,
      * this function will remove the session part outside the scope
      */
-    _normalize: function(session, startDate, endDate) {
+    _normalize(session, startDate, endDate) {
         var moment = require("moment");
 
         session.startDate = moment(session.startDate);
@@ -101,17 +106,6 @@
 
         return session;
     }
-});
+}
 
-var TimelineSession = React.createClass({
-    render: function() {
-        var data = this.props.data;
-
-        var title = data.title || "";
-        var style = {
-            background: data.color,
-            width: data.width
-        };
-        return <div className="slice" style={style} title={title}>{title}</div>;
-    }
-});
+module.exports = Timeline;

Added: wit/js/components/TimelineSession.js
===================================================================
--- wit/js/components/TimelineSession.js	                        (rev 0)
+++ wit/js/components/TimelineSession.js	2015-05-26 14:18:17 UTC (rev 1489)
@@ -0,0 +1,18 @@
+"use strict";
+
+var React = require("react");
+
+class TimelineSession extends React.Component {
+    render() {
+        var data = this.props.data;
+
+        var title = data.title || "";
+        var style = {
+            background: data.color,
+            width: data.width
+        };
+        return <div className="slice" style={style} title={title}>{title}</div>;
+    }
+}
+
+module.exports = TimelineSession;

    

[Sandbox-commits] r1489 - wit/js/components

jruchaud＠users.nuiton.org