April 2015 - Sandbox-commits - mailman.cloud.codelutin.com

r1313 - in wit: . js/components
by smaisonneuve＠users.nuiton.org April 30, 2015

April 30, 2015

Author: smaisonneuve Date: 2015-04-30 16:24:30 +0000 (Thu, 30 Apr 2015) New Revision: 1313 Url: http://forge.nuiton.org/projects/sandbox/repository/revisions/1313 Log: [Wit] - Add timeline description on logs Modified: wit/js/components/FilterLogs.js wit/js/components/Timeline.js wit/package.json Modified: wit/js/components/FilterLogs.js =================================================================== --- wit/js/components/FilterLogs.js 2015-04-30 15:59:14 UTC (rev 1312) +++ wit/js/components/FilterLogs.js 2015-04-30 16:24:30 UTC (rev 1313) @@ -1,4 +1,5 @@ /** @jsx React.DOM */ +var nonce = require('nonce')(); var FilterLogs = React.createClass({ @@ -85,6 +86,11 @@ React.findDOMNode(this.refs.summary).classList.toggle("hidden"); }, + onLogDetails: function (e) { + var nodeId = e.target.dataset.id; + React.findDOMNode(this.refs[nodeId]).classList.toggle("hidden"); + }, + mail: function(content) { content = content.replace(/\n/g, "%0A").replace(/;/g, "%3B").replace(/-/g, "%2D"); var link = "mailto:?body=" + content; @@ -147,11 +153,16 @@ } else { current.diff = diff; } - + current.startDate = log.startDate; current.duration = current.diff.format("HH:mm:ss"); + current.endDate = log.endDate; }); - this.setState({data: data, tags: currentState.tags || tags, startDate: currentState.data.startDate, endDate: currentState.data.endDate}); + this.setState({ + data: data, tags: currentState.tags || tags, + startDate: currentState.data.startDate, + endDate: currentState.data.endDate + }); }, renderTd: function(date, tags, tagObject) { @@ -163,14 +174,26 @@ return self.state.tags[tag]; }); + var key = date + nonce(); + if (filterTags.length) { r.push( <tr> <td>{date}</td> <td>{tagObject.duration}</td> <td>{filterTags.join(', ')}</td> + <td> + <button type="button" className="btn btn-default" data-id={key}> + <span data-id={key} className="glyphicon glyphicon-option-horizontal" aria-hidden="false"></span> + </button> + </td> </tr> ); + r.push( + <tr ref={key} className="hidden"> + <td colSpan="4"><Timeline data={tagObject}/></td> + </tr> + ); } } @@ -219,7 +242,9 @@ <button type="button" className="btn btn-primary" onClick={this.onToggleFilterTag}> Filter <span className="glyphicon glyphicon-tag" aria-hidden="true"></span> </button> - + <button type="button" className="btn btn-primary" onClick={this.onShowSummary}> + View <span className="glyphicon glyphicon-triangle-bottom" aria-hidden="true"></span> + </button> <button type="button" className="btn btn-primary" onClick={this.onClipboardCSV}> CSV <span className="glyphicon glyphicon-copy" aria-hidden="true"></span> </button> @@ -233,9 +258,6 @@ <button type="button" className="btn btn-primary" onClick={this.onMailTXT}> TXT <span className="glyphicon glyphicon-envelope" aria-hidden="true"></span> </button> - <button type="button" className="btn btn-primary" onClick={this.onShowSummary}> - View <span className="glyphicon glyphicon-triangle-bottom" aria-hidden="true"></span> - </button> </div> <div ref="filterTags" className="hidden" onChange={this.filterTag}> @@ -258,9 +280,10 @@ <th>Date</th> <th>Duration</th> <th>Tags</th> + <th></th> </tr> </thead> - <tbody> + <tbody onClick={this.onLogDetails}> {items} </tbody> </table> Modified: wit/js/components/Timeline.js =================================================================== --- wit/js/components/Timeline.js 2015-04-30 15:59:14 UTC (rev 1312) +++ wit/js/components/Timeline.js 2015-04-30 16:24:30 UTC (rev 1313) @@ -1,4 +1,5 @@ var moment = require('moment'); +var nonce = require('nonce')(); var Timeline = React.createClass({ @@ -62,7 +63,9 @@ width: (ns.duration / timeRange * 100 || 0) + "%" }; - return <TimelineSession key={ns.startDate.valueOf()} data={data} /> + var key = nonce(); + + return <TimelineSession key={key} data={data} /> }) ); Modified: wit/package.json =================================================================== --- wit/package.json 2015-04-30 15:59:14 UTC (rev 1312) +++ wit/package.json 2015-04-30 16:24:30 UTC (rev 1313) @@ -32,7 +32,8 @@ "react": "^0.13.1", "react-router": "^0.13.2", "x11": "^1.0.3", - "xprop": "^0.0.0" + "xprop": "^0.0.0", + "nonce":"^1.0.3" }, "devDependencies": { "grunt": "^0.4.5",

1 0

r1312 - in wit/js: components pages
by jruchaud＠users.nuiton.org April 30, 2015

April 30, 2015

Author: jruchaud Date: 2015-04-30 15:59:14 +0000 (Thu, 30 Apr 2015) New Revision: 1312 Url: http://forge.nuiton.org/projects/sandbox/repository/revisions/1312 Log: Add logs Modified: wit/js/components/FilterLogs.js wit/js/components/LogsTable.js wit/js/pages/EditionLogs.js wit/js/pages/Rapport.js Modified: wit/js/components/FilterLogs.js =================================================================== --- wit/js/components/FilterLogs.js 2015-04-30 15:52:21 UTC (rev 1311) +++ wit/js/components/FilterLogs.js 2015-04-30 15:59:14 UTC (rev 1312) @@ -213,7 +213,7 @@ return ( <div className={classString}> - <h1>Result</h1> + <h2>Result</h2> <div ref="actions" className="btn-group" role="group"> <button type="button" className="btn btn-primary" onClick={this.onToggleFilterTag}> Modified: wit/js/components/LogsTable.js =================================================================== --- wit/js/components/LogsTable.js 2015-04-30 15:52:21 UTC (rev 1311) +++ wit/js/components/LogsTable.js 2015-04-30 15:59:14 UTC (rev 1312) @@ -41,7 +41,7 @@ return ( <div className={classString}> - <h1>Result</h1> + <h2>Result</h2> <table className="table"> <thead> Modified: wit/js/pages/EditionLogs.js =================================================================== --- wit/js/pages/EditionLogs.js 2015-04-30 15:52:21 UTC (rev 1311) +++ wit/js/pages/EditionLogs.js 2015-04-30 15:59:14 UTC (rev 1312) @@ -19,11 +19,31 @@ }); }, + onAdd: function() { + var moment = require('moment'); + var db = require("./js/services/database.js"); + + var tags = React.findDOMNode(this.refs.tags).value.split(","); + var startDate = moment(React.findDOMNode(this.refs.beginDate).value); + var endDate = moment(React.findDOMNode(this.refs.endDate).value); + + return db.insertLog(tags, startDate, endDate); + }, + render: function() { return ( <div> + <h1>Search log</h1> <FilterBar onSearchResult={this.handleSearchResult}/> <LogsTable data={this.state.result}/> + + <div> + <h1>Add log</h1> + <input ref="beginDate" type="datetime-local" className="form-control" required></input> + <input ref="endDate" type="datetime-local" className="form-control" required></input> + <input ref="tags" type="text" className="form-control" required placeholder="Enter tags with comma"></input> + <button onClick={this.onAdd} className="btn btn-primary btn-block">Add</button> + </div> </div> ); } Modified: wit/js/pages/Rapport.js =================================================================== --- wit/js/pages/Rapport.js 2015-04-30 15:52:21 UTC (rev 1311) +++ wit/js/pages/Rapport.js 2015-04-30 15:59:14 UTC (rev 1312) @@ -22,6 +22,7 @@ render: function() { return ( <div> + <h1>Search by date</h1> <FilterBar onSearchResult={this.handleSearchResult}/> <FilterLogs data={this.state}/> </div>

1 0

r1311 - in wit: . js js/components js/pages js/services
by jruchaud＠users.nuiton.org April 30, 2015

April 30, 2015

Author: jruchaud Date: 2015-04-30 15:52:21 +0000 (Thu, 30 Apr 2015) New Revision: 1311 Url: http://forge.nuiton.org/projects/sandbox/repository/revisions/1311 Log: Begin log edition Added: wit/js/components/LogsTable.js wit/js/pages/EditionLogs.js Modified: wit/index.html wit/js/main.js wit/js/pages/Rapport.js wit/js/services/TimerService.js wit/js/services/database.js Modified: wit/index.html =================================================================== --- wit/index.html 2015-04-30 15:22:38 UTC (rev 1310) +++ wit/index.html 2015-04-30 15:52:21 UTC (rev 1311) @@ -13,10 +13,12 @@ <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/components/Timeline.js"></script> + <script type="text/jsx" src="js/components/LogsTable.js"></script> <script type="text/jsx" src="js/pages/Timer.js"></script> <script type="text/jsx" src="js/pages/Rapport.js"></script> <script type="text/jsx" src="js/pages/UserActivity.js"></script> <script type="text/jsx" src="js/pages/Options.js"></script> + <script type="text/jsx" src="js/pages/EditionLogs.js"></script> <script type="text/jsx" src="js/main.js"></script> <script type="application/javascript" src="js/gui.js"></script> Copied: wit/js/components/LogsTable.js (from rev 1306, wit/js/components/FilterLogs.js) =================================================================== --- wit/js/components/LogsTable.js (rev 0) +++ wit/js/components/LogsTable.js 2015-04-30 15:52:21 UTC (rev 1311) @@ -0,0 +1,66 @@ +/** @jsx React.DOM */ + +var LogsTable = React.createClass({ + + onDelete: function(e) { + var logId = e.target.dataset.id; + if (logId) { + timer.deleteLog(logId); + + var index = parseInt(e.target.dataset.index); + this.props.data.splice(index, 1); + this.forceUpdate(); + } + }, + + render: function() { + var items = []; + + var classString = ""; + if (!this.props.data) { + classString = "hidden"; + + } else { + this.props.data.forEach(function(log, index) { + items.push( + <tr> + <td>{moment(log.startDate).format()}</td> + <td>{moment(log.endDate).format()}</td> + <td>{log.tags.join(', ')}</td> + <td> + <div ref="actions" className="btn-group" role="group"> + <button type="button" className="btn btn-primary btn-lg" data-index={index} data-id={log._id}> + <span className="glyphicon glyphicon-trash" data-index={index} data-id={log._id} aria-hidden="true"></span> + </button> + </div> + </td> + </tr> + ); + }, this); + } + + return ( + <div className={classString}> + <h1>Result</h1> + + <table className="table"> + <thead> + <tr> + <th>Date start</th> + <th>Date end</th> + <th>Tags</th> + <th></th> + </tr> + </thead> + <tbody onClick={this.onDelete}> + {items} + </tbody> + </table> + + <h3 className={items.length ? "hidden" : "text-center"}> + No result ! + </h3> + </div> + ); + } +}); Modified: wit/js/main.js =================================================================== --- wit/js/main.js 2015-04-30 15:22:38 UTC (rev 1310) +++ wit/js/main.js 2015-04-30 15:52:21 UTC (rev 1311) @@ -74,7 +74,7 @@ Edition <span className="caret"></span> </a> <ul className="dropdown-menu"> - <li><a href="#">Logs</a></li> + <li><Link onClick={this.closeAll} to="editionLogs">Logs</Link></li> <li><a href="#">Tags</a></li> <li><a href="#">Activities</a></li> </ul> @@ -95,6 +95,7 @@ <Route name="rapport" handler={Rapport}/> <Route name="activity" handler={UserActivity}/> <Route name="options" handler={Options}/> + <Route name="editionLogs" handler={EditionLogs}/> <DefaultRoute handler={Timer}/> </Route> ); Copied: wit/js/pages/EditionLogs.js (from rev 1303, wit/js/pages/Rapport.js) =================================================================== --- wit/js/pages/EditionLogs.js (rev 0) +++ wit/js/pages/EditionLogs.js 2015-04-30 15:52:21 UTC (rev 1311) @@ -0,0 +1,30 @@ +/** @jsx React.DOM */ + +var EditionLogs = React.createClass({ + + getInitialState : function() { + var moment = require("moment"); + return { + startDate: moment().subtract(1, "h"), + endDate: moment(), + result: null + }; + }, + + handleSearchResult: function(result, startDate, endDate) { + this.setState({ + startDate: startDate, + endDate: endDate, + result: result + }); + }, + + render: function() { + return ( + <div> + <FilterBar onSearchResult={this.handleSearchResult}/> + <LogsTable data={this.state.result}/> + </div> + ); + } +}); Modified: wit/js/pages/Rapport.js =================================================================== --- wit/js/pages/Rapport.js 2015-04-30 15:22:38 UTC (rev 1310) +++ wit/js/pages/Rapport.js 2015-04-30 15:52:21 UTC (rev 1311) @@ -1,9 +1,9 @@ /** @jsx React.DOM */ -var moment = require("moment"); var Rapport = React.createClass({ getInitialState : function() { + var moment = require("moment"); return { startDate: moment().subtract(1, "h"), endDate: moment(), Modified: wit/js/services/TimerService.js =================================================================== --- wit/js/services/TimerService.js 2015-04-30 15:22:38 UTC (rev 1310) +++ wit/js/services/TimerService.js 2015-04-30 15:52:21 UTC (rev 1311) @@ -206,3 +206,7 @@ var value = moment(diff).utcOffset(0); return value.format("HH:mm:ss"); }; + +exports.deleteLog = function(id) { + db.deleteLog(id); +}; Modified: wit/js/services/database.js =================================================================== --- wit/js/services/database.js 2015-04-30 15:22:38 UTC (rev 1310) +++ wit/js/services/database.js 2015-04-30 15:52:21 UTC (rev 1311) @@ -98,6 +98,19 @@ }); }; + +exports.deleteLog = function(id) { + return new Promise(function(resolve, reject) { + db.logs.remove({_id: id}, {}, function (err, numRemoved) { + if (!err) { + resolve(); + } else { + reject(); + } + }); + }); +}; + /******************************** * Window sessions db management ********************************/

1 0

r1310 - in wit: css js/components js/pages
by smaisonneuve＠users.nuiton.org April 30, 2015

April 30, 2015

Author: smaisonneuve Date: 2015-04-30 15:22:38 +0000 (Thu, 30 Apr 2015) New Revision: 1310 Url: http://forge.nuiton.org/projects/sandbox/repository/revisions/1310 Log: [Wit] - Filter logs : add global activity summary Modified: wit/css/timeline.less wit/js/components/FilterLogs.js wit/js/components/Timeline.js wit/js/pages/Rapport.js Modified: wit/css/timeline.less =================================================================== --- wit/css/timeline.less 2015-04-30 14:17:16 UTC (rev 1309) +++ wit/css/timeline.less 2015-04-30 15:22:38 UTC (rev 1310) @@ -3,6 +3,8 @@ .timeline { + margin: 10px 0; + .sessions { display: flex; Modified: wit/js/components/FilterLogs.js =================================================================== --- wit/js/components/FilterLogs.js 2015-04-30 14:17:16 UTC (rev 1309) +++ wit/js/components/FilterLogs.js 2015-04-30 15:22:38 UTC (rev 1310) @@ -81,6 +81,10 @@ this.mail(content); }, + onShowSummary: function () { + React.findDOMNode(this.refs.summary).classList.toggle("hidden"); + }, + mail: function(content) { content = content.replace(/\n/g, "%0A").replace(/;/g, "%3B").replace(/-/g, "%2D"); var link = "mailto:?body=" + content; @@ -123,7 +127,7 @@ var data = {}, tags = {}; - currentState.data.forEach(function(log) { + currentState.data.result.forEach(function(log) { var date = moment(log.startDate).format("MM/DD/YY"); var diff = moment(moment(log.endDate).diff(log.startDate)).utcOffset(0); @@ -147,7 +151,7 @@ current.duration = current.diff.format("HH:mm:ss"); }); - this.setState({data: data, tags: currentState.tags || tags}); + this.setState({data: data, tags: currentState.tags || tags, startDate: currentState.data.startDate, endDate: currentState.data.endDate}); }, renderTd: function(date, tags, tagObject) { @@ -229,6 +233,9 @@ <button type="button" className="btn btn-primary" onClick={this.onMailTXT}> TXT <span className="glyphicon glyphicon-envelope" aria-hidden="true"></span> </button> + <button type="button" className="btn btn-primary" onClick={this.onShowSummary}> + View <span className="glyphicon glyphicon-triangle-bottom" aria-hidden="true"></span> + </button> </div> <div ref="filterTags" className="hidden" onChange={this.filterTag}> @@ -240,6 +247,10 @@ </div> {tags} </div> + + <div ref="summary" className="hidden"> + <Timeline data={this.state}/> + </div> <table className="table"> <thead> Modified: wit/js/components/Timeline.js =================================================================== --- wit/js/components/Timeline.js 2015-04-30 14:17:16 UTC (rev 1309) +++ wit/js/components/Timeline.js 2015-04-30 15:22:38 UTC (rev 1310) @@ -25,17 +25,19 @@ }, refresh: function (startDate, endDate) { - this.startDate = startDate; - this.endDate = endDate; + if (startDate && endDate) { + this.startDate = startDate; + this.endDate = endDate; - var self = this; - - user.getSessions(startDate, endDate, true) - .then(function (sessions) { - self.setState({ - sessions: sessions + var self = this; + + user.getSessions(startDate, endDate, true) + .then(function (sessions) { + self.setState({ + sessions: sessions + }); }); - }); + } }, render: function() { Modified: wit/js/pages/Rapport.js =================================================================== --- wit/js/pages/Rapport.js 2015-04-30 14:17:16 UTC (rev 1309) +++ wit/js/pages/Rapport.js 2015-04-30 15:22:38 UTC (rev 1310) @@ -23,8 +23,7 @@ return ( <div> <FilterBar onSearchResult={this.handleSearchResult}/> - <FilterLogs data={this.state.result}/> - <Timeline data={this.state}/> + <FilterLogs data={this.state}/> </div> ); }

1 0

r1309 - wit/js/services
by jruchaud＠users.nuiton.org April 30, 2015

April 30, 2015

Author: jruchaud Date: 2015-04-30 14:17:16 +0000 (Thu, 30 Apr 2015) New Revision: 1309 Url: http://forge.nuiton.org/projects/sandbox/repository/revisions/1309 Log: Keep the key in same order to be able to create a tree Modified: wit/js/services/database.js Modified: wit/js/services/database.js =================================================================== --- wit/js/services/database.js 2015-04-30 14:13:07 UTC (rev 1308) +++ wit/js/services/database.js 2015-04-30 14:17:16 UTC (rev 1309) @@ -20,7 +20,7 @@ return new Promise(function(resolve, reject) { db.logs.insert({ - tags: tags, + tags: tags.sort(), // keep the key in same order to be able to create a tree startDate: m1.valueOf(), endDate: m2.valueOf() }, function(err, newDocs) {

1 0

r1308 - wit/css
by smaisonneuve＠users.nuiton.org April 30, 2015

April 30, 2015

Author: smaisonneuve Date: 2015-04-30 14:13:07 +0000 (Thu, 30 Apr 2015) New Revision: 1308 Url: http://forge.nuiton.org/projects/sandbox/repository/revisions/1308 Log: [Wit] - timeline : change style Modified: wit/css/timeline.less Modified: wit/css/timeline.less =================================================================== --- wit/css/timeline.less 2015-04-30 13:45:21 UTC (rev 1307) +++ wit/css/timeline.less 2015-04-30 14:13:07 UTC (rev 1308) @@ -1,7 +1,5 @@ -@timeLabelsDefaultHeight: 40px; - @timelineDefaultWidth: 100%; -@timelineDefaultHeight: 100px; +@timelineDefaultHeight: 50px; .timeline {

1 0

r1307 - wit/js/services
by jruchaud＠users.nuiton.org April 30, 2015

April 30, 2015

Author: jruchaud Date: 2015-04-30 13:45:21 +0000 (Thu, 30 Apr 2015) New Revision: 1307 Url: http://forge.nuiton.org/projects/sandbox/repository/revisions/1307 Log: Fix atom :-) Modified: wit/js/services/UserActivityService.js Modified: wit/js/services/UserActivityService.js =================================================================== --- wit/js/services/UserActivityService.js 2015-04-30 09:50:31 UTC (rev 1306) +++ wit/js/services/UserActivityService.js 2015-04-30 13:45:21 UTC (rev 1307) @@ -67,7 +67,7 @@ } return rst; -} +}; /** * Offers an api for services interesting in activity change detection @@ -99,15 +99,13 @@ var X = display.client; X.ChangeWindowAttributes(display.screen[0].root, { - eventMask:x11.eventMask.PropertyChange + eventMask: x11.eventMask.PropertyChange }); // Init windows session with the currently active window +// addWindowSession(X, display.screen[0].root); - addWindowSession(X, display.screen[0].root); - // Listen to client display events to identify when the currently active window has change - X.on('event', onActiveWindowChange.bind(null, X)); }); @@ -134,19 +132,19 @@ if (name == '_NET_ACTIVE_WINDOW') { - registerWindowEvents(X, ev.wid); - addWindowSession(X, ev.wid); + registerWindowEvents(X, ev); + addWindowSession(X, ev); } else if (name == '_NET_WM_NAME') { - updateWindowSession(ev.wid); + updateWindowSession(X, ev); } }); } }; -var registerWindowEvents = function (X, parentId) { - getActiveWindowId(X, parentId) +var registerWindowEvents = function (X, ev) { + getActiveWindowId(X, ev) .then(function (wid) { X.ChangeWindowAttributes(wid, { eventMask:x11.eventMask.PropertyChange @@ -157,10 +155,10 @@ /** * Create a new window session */ -var addWindowSession = function (X, parentId) { +var addWindowSession = function (X, ev) { var crt = crtSession; - return getActiveWindowId(X, parentId) + return getActiveWindowId(X, ev) .then(getWindowName) .then(createNewSession) .then(setupActivityDetection.bind(null, crt)); @@ -171,8 +169,8 @@ * but it's title has changed. * Trace it by creating a new session with the same shape attributes than the previous one */ -var updateWindowSession = function (wid) { - return getWindowName(wid) +var updateWindowSession = function (X, ev) { + return getWindowName(ev.wid) .then(function (windowName) { // Let's create a new seesion but with same color attributes than the last one, @@ -185,36 +183,44 @@ }); }; -var getActiveWindowId = function (X, parentId) { +var getActiveWindowId = function (X, ev) { return new Promise(function (resolve, reject) { - X.GetProperty(0, parentId, _NET_ACTIVE_WINDOW, X.atoms.WINDOW, 0, 4, function(err, prop) { + if (!ev.wid) return reject(); + + X.GetProperty(0, ev.wid, ev.atom, X.atoms.WINDOW, 0, 4, function(err, prop) { if (err || !prop.data.length) { - console.log("Couldn't retrieve active window property"); reject(); } else { - resolve(prop.data.readUInt32LE(0)); + var wid = prop.data.readUInt32LE(0); + + if (wid) { + resolve(wid); + + } else { + console.log("Couldn't retrieve active window property"); + reject(); + } } }); }); -} +}; var getWindowName = function (windowId) { return new Promise(function (resolve, reject) { - + + if (!windowId) return reject(); + xprop({prop:'_NET_WM_NAME', id:windowId}, function(err, properties) { if (err) { - console.log("Couldn't retrieve window name for id :", windowId); reject(); } else { - resolve(properties.length && properties[0].value); - } }); });

1 0

r1306 - wit/js/components
by jruchaud＠users.nuiton.org April 30, 2015

April 30, 2015

Author: jruchaud Date: 2015-04-30 09:50:31 +0000 (Thu, 30 Apr 2015) New Revision: 1306 Url: http://forge.nuiton.org/projects/sandbox/repository/revisions/1306 Log: Implement un/select all Modified: wit/js/components/FilterLogs.js Modified: wit/js/components/FilterLogs.js =================================================================== --- wit/js/components/FilterLogs.js 2015-04-29 20:18:03 UTC (rev 1305) +++ wit/js/components/FilterLogs.js 2015-04-30 09:50:31 UTC (rev 1306) @@ -99,6 +99,18 @@ this.createTree(nextProps); }, + toggleTagChecked: function(e) { + Object.keys(this.state.tags).forEach(function(tag) { + this.state.tags[tag] = e.target.checked; + }, this); + + this.createTree({ + data: this.props.data, + tags: this.state.tags + }); + e.stopPropagation(); + }, + filterTag: function(e) { this.state.tags[e.target.name] = e.target.checked; this.createTree({ @@ -197,46 +209,54 @@ return ( <div className={classString}> - <h1>{items.length ? "Result" : "No result"}</h1> + <h1>Result</h1> - <div className={items.length ? "" : "hidden"}> - <div ref="actions" className="btn-group" role="group"> - <button type="button" className="btn btn-primary" onClick={this.onToggleFilterTag}> - Filter <span className="glyphicon glyphicon-tag" aria-hidden="true"></span> - </button> - - <button type="button" className="btn btn-primary" onClick={this.onClipboardCSV}> - CSV <span className="glyphicon glyphicon-copy" aria-hidden="true"></span> - </button> - <button type="button" className="btn btn-primary" onClick={this.onClipboardTXT}> - TXT <span className="glyphicon glyphicon-copy" aria-hidden="true"></span> - </button> + <div ref="actions" className="btn-group" role="group"> + <button type="button" className="btn btn-primary" onClick={this.onToggleFilterTag}> + Filter <span className="glyphicon glyphicon-tag" aria-hidden="true"></span> + </button> - <button type="button" className="btn btn-primary" onClick={this.onMailCSV}> - CSV <span className="glyphicon glyphicon-envelope" aria-hidden="true"></span> - </button> - <button type="button" className="btn btn-primary" onClick={this.onMailTXT}> - TXT <span className="glyphicon glyphicon-envelope" aria-hidden="true"></span> - </button> + <button type="button" className="btn btn-primary" onClick={this.onClipboardCSV}> + CSV <span className="glyphicon glyphicon-copy" aria-hidden="true"></span> + </button> + <button type="button" className="btn btn-primary" onClick={this.onClipboardTXT}> + TXT <span className="glyphicon glyphicon-copy" aria-hidden="true"></span> + </button> + + <button type="button" className="btn btn-primary" onClick={this.onMailCSV}> + CSV <span className="glyphicon glyphicon-envelope" aria-hidden="true"></span> + </button> + <button type="button" className="btn btn-primary" onClick={this.onMailTXT}> + TXT <span className="glyphicon glyphicon-envelope" aria-hidden="true"></span> + </button> + </div> + + <div ref="filterTags" className="hidden" onChange={this.filterTag}> + <div className="pull-left"> + <label className="checkbox-label"> + <input type="checkbox" defaultChecked onChange={this.toggleTagChecked} /> + select/unselect all + </label> </div> + {tags} + </div> - <div ref="filterTags" className="hidden" onChange={this.filterTag}> - {tags} - </div> + <table className="table"> + <thead> + <tr> + <th>Date</th> + <th>Duration</th> + <th>Tags</th> + </tr> + </thead> + <tbody> + {items} + </tbody> + </table> - <table className="table"> - <thead> - <tr> - <th>Date</th> - <th>Duration</th> - <th>Tags</th> - </tr> - </thead> - <tbody> - {items} - </tbody> - </table> - </div> + <h3 className={items.length ? "hidden" : "text-center"}> + No result ! + </h3> </div> ); }

1 0

r1305 - wit/js/components
by jruchaud＠users.nuiton.org April 29, 2015

April 29, 2015

Author: jruchaud Date: 2015-04-29 20:18:03 +0000 (Wed, 29 Apr 2015) New Revision: 1305 Url: http://forge.nuiton.org/projects/sandbox/repository/revisions/1305 Log: Create filter on tags Modified: wit/js/components/FilterLogs.js Modified: wit/js/components/FilterLogs.js =================================================================== --- wit/js/components/FilterLogs.js 2015-04-29 20:13:27 UTC (rev 1304) +++ wit/js/components/FilterLogs.js 2015-04-29 20:18:03 UTC (rev 1305) @@ -87,6 +87,10 @@ window.location.href = link; }, + onToggleFilterTag: function() { + React.findDOMNode(this.refs.filterTags).classList.toggle("hidden"); + }, + getInitialState: function() { return {data: null, tags: {}}; }, @@ -197,7 +201,7 @@ <div className={items.length ? "" : "hidden"}> <div ref="actions" className="btn-group" role="group"> - <button type="button" className="btn btn-primary" onClick={this.onClipboardCSV}> + <button type="button" className="btn btn-primary" onClick={this.onToggleFilterTag}> Filter <span className="glyphicon glyphicon-tag" aria-hidden="true"></span> </button> @@ -216,7 +220,7 @@ </button> </div> - <div onChange={this.filterTag}> + <div ref="filterTags" className="hidden" onChange={this.filterTag}> {tags} </div>

1 0

r1304 - in wit: css js/components
by jruchaud＠users.nuiton.org April 29, 2015

April 29, 2015

Author: jruchaud Date: 2015-04-29 20:13:27 +0000 (Wed, 29 Apr 2015) New Revision: 1304 Url: http://forge.nuiton.org/projects/sandbox/repository/revisions/1304 Log: Create filter on tags Modified: wit/css/style.less wit/js/components/FilterLogs.js Modified: wit/css/style.less =================================================================== --- wit/css/style.less 2015-04-29 16:48:57 UTC (rev 1303) +++ wit/css/style.less 2015-04-29 20:13:27 UTC (rev 1304) @@ -33,3 +33,7 @@ font-family: Digital; } } + +.checkbox-label { + margin-right: 10px; +} Modified: wit/js/components/FilterLogs.js =================================================================== --- wit/js/components/FilterLogs.js 2015-04-29 16:48:57 UTC (rev 1303) +++ wit/js/components/FilterLogs.js 2015-04-29 20:13:27 UTC (rev 1304) @@ -35,7 +35,14 @@ var r = ""; if (tagObject.duration) { - r += tagObject.duration + " - " + tags.join(', ') + "\n"; + var self = this; + var filterTags = tags.filter(function(tag) { + return self.state.tags[tag]; + }); + + if (filterTags.length) { + r += tagObject.duration + " - " + filterTags.join(', ') + "\n"; + } } var keys = Object.keys(tagObject); @@ -81,20 +88,38 @@ }, getInitialState: function() { - return {data: null}; + return {data: null, tags: {}}; }, componentWillReceiveProps: function(nextProps) { - var state = {}; + this.createTree(nextProps); + }, + + filterTag: function(e) { + this.state.tags[e.target.name] = e.target.checked; + this.createTree({ + data: this.props.data, + tags: this.state.tags + }); + }, + + createTree: function(currentState) { + var data = {}, + tags = {}; - nextProps.data.forEach(function(log) { + currentState.data.forEach(function(log) { var date = moment(log.startDate).format("MM/DD/YY"); var diff = moment(moment(log.endDate).diff(log.startDate)).utcOffset(0); - var current = state[date] = state[date] || {}; + var current = data[date] = data[date] || {}; log.tags.forEach(function(tag) { - current = current[tag] = current[tag] || {}; + + if (!currentState.tags || currentState.tags[tag]) { + current = current[tag] = current[tag] || {}; + } + + tags[tag] = true; }); if (current.diff) { @@ -106,20 +131,27 @@ current.duration = current.diff.format("HH:mm:ss"); }); - this.setState({data: state}); + this.setState({data: data, tags: currentState.tags || tags}); }, renderTd: function(date, tags, tagObject) { var r = []; if (tagObject.duration) { - r.push( - <tr> - <td>{date}</td> - <td>{tagObject.duration}</td> - <td>{tags.join(', ')}</td> - </tr> - ); + var self = this; + var filterTags = tags.filter(function(tag) { + return self.state.tags[tag]; + }); + + if (filterTags.length) { + r.push( + <tr> + <td>{date}</td> + <td>{tagObject.duration}</td> + <td>{filterTags.join(', ')}</td> + </tr> + ); + } } var keys = Object.keys(tagObject); @@ -146,7 +178,19 @@ items = items.concat(r); } } - + + var tags = []; + for (var tag of Object.keys(this.state.tags)) { + tags.push( + <div className="pull-left"> + <label className="checkbox-label"> + <input type="checkbox" name={tag} checked={this.state.tags[tag] ? "checked" : ""} /> + {tag} + </label> + </div> + ); + } + return ( <div className={classString}> <h1>{items.length ? "Result" : "No result"}</h1> @@ -154,6 +198,10 @@ <div className={items.length ? "" : "hidden"}> <div ref="actions" className="btn-group" role="group"> <button type="button" className="btn btn-primary" onClick={this.onClipboardCSV}> + Filter <span className="glyphicon glyphicon-tag" aria-hidden="true"></span> + </button> + + <button type="button" className="btn btn-primary" onClick={this.onClipboardCSV}> CSV <span className="glyphicon glyphicon-copy" aria-hidden="true"></span> </button> <button type="button" className="btn btn-primary" onClick={this.onClipboardTXT}> @@ -168,6 +216,10 @@ </button> </div> + <div onChange={this.filterTag}> + {tags} + </div> + <table className="table"> <thead> <tr>

1 0