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",