Author: smaisonneuve Date: 2015-04-28 13:05:06 +0000 (Tue, 28 Apr 2015) New Revision: 1280 Url: http://forge.nuiton.org/projects/sandbox/repository/revisions/1280 Log: [Wit] - Timeline : parameterize component Modified: wit/js/components/Timeline.js wit/js/pages/UserActivity.js wit/js/services/UserActivityService.js Modified: wit/js/components/Timeline.js =================================================================== --- wit/js/components/Timeline.js 2015-04-28 12:58:00 UTC (rev 1279) +++ wit/js/components/Timeline.js 2015-04-28 13:05:06 UTC (rev 1280) @@ -1,71 +1,62 @@ var moment = require('moment'); var Timeline = React.createClass({ - poolingInterval: 5 * 1000, getInitialState: function() { + var data = this.props.data; + + this.startDate = data && data.startDate && moment(data.startDate), + this.endDate = data && data.endDate && moment(data.endDate); + return { sessions: [], - startDate: moment().subtract(1, "m"), - endDate: moment() }; }, componentDidMount: function () { - this.pollingTimer = setInterval(this._refreshSessions.bind(this), this.poolingInterval); - }, - - componentWillUnmount: function () { - clearTimeout(this.pollingTimer); - }, - - _refreshSessions: function () { var self = this; - - var startDate = moment().subtract(1, "m"), - endDate = moment(); // Retrieve window focus activity - user.getSessions(startDate, endDate) + user.getSessions(this.startDate, this.endDate) .then(function (sessions) { self.setState({ - sessions: sessions, - startDate: startDate, - endDate: endDate + sessions: sessions }); - }); + }); }, render: function() { - var startDate = this.state.startDate, - endDate = this.state.endDate, - sessions = this.state.sessions; + var sessions = this.state.sessions; - // Build timeline + var items = []; + + // Create an empty wrapper to occupy space if the first window session + // doesn't start at the begginning of the timeline - var items = [], data; - - if (sessions.length && startDate.isBefore(sessions[0].startDate)) { - - data = { width: Math.abs(startDate.diff(sessions[0].startDate) / endDate.diff(startDate) * 100 ) +"%" } - items = [<TimelineSession key={startDate.unix()} data={data}/>]; - + var balancingSlice = this._buildBalancingSlice(sessions, this.startDate, this.endDate); + if (balancingSlice) { + items.push(balancingSlice); } + // Create a wrapper for each window session + + var self = this, timeRange = this.endDate.diff(this.startDate); items = items.concat( sessions.map(function(session) { - data = { - title: session.name, - color: session.color, - width: (session.duration / endDate.diff(startDate) * 100 || 0) +"%", - grow: !session.duration ? "1":"0" + var ns = self._normalize(session, self.startDate, self.endDate); // normalize session according to timeline boundaries + + var data = { + title: ns.name, + color: ns.color, + width: (ns.duration / timeRange * 100 || 0) +"%", + grow: !ns.duration ? "1":"0" }; - return <TimelineSession key={session.startDate} data={data} /> + return <TimelineSession key={ns.startDate.unix()} data={data} /> }) ); - + return ( <div className="timeline"> <div className="sessions"> @@ -73,6 +64,49 @@ </div> </div> ); + }, + + /** + * Create an empty slice that will occupy the empty space between the timeline startDate and the first window session startDate + */ + _buildBalancingSlice: function(sessions, startDate, endDate) { + var data = {}; + + if (!sessions.length) { + data.width = "100%"; + } else { + data.width = Math.min(startDate.diff(sessions[0].startDate) / endDate.diff(startDate) * 100, 0); + + // The balancing slice is only needed if there is an offset between the timeline startDate and the first window sessions startDate + + if (data.width < 0) { + data.width = Math.abs(data.width) + "%"; + } + } + + return data.width && <TimelineSession key={startDate.unix()} data={data}/> + }, + + /* + * 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) { + var rst = JSON.parse(JSON.stringify(session)); // Clone session, not to alter initial object + + rst.startDate = moment(rst.startDate); + rst.endDate = rst.endDate && moment(rst.endDate); + + if (rst.startDate.isBefore(startDate)) { + rst.startDate = startDate; + } + if (rst.endDate && rst.endDate.isAfter(endDate)) { + rst.endDate = endDate; + } + rst.duration = rst.endDate && rst.endDate.diff(rst.startDate); + + return rst; } }); Modified: wit/js/pages/UserActivity.js =================================================================== --- wit/js/pages/UserActivity.js 2015-04-28 12:58:00 UTC (rev 1279) +++ wit/js/pages/UserActivity.js 2015-04-28 13:05:06 UTC (rev 1280) @@ -1,12 +1,17 @@ /** @jsx React.DOM */ +var moment = require("moment"); var UserActivity = React.createClass({ render: function() { + var data = { + startDate : moment().subtract(1, "m").valueOf(), + endDate : moment().valueOf() + } return ( <div className="userActivity"> <h1> What the hell did i do today ? </h1> - <Timeline /> + <Timeline data={data}/> </div> ); } Modified: wit/js/services/UserActivityService.js =================================================================== --- wit/js/services/UserActivityService.js 2015-04-28 12:58:00 UTC (rev 1279) +++ wit/js/services/UserActivityService.js 2015-04-28 13:05:06 UTC (rev 1280) @@ -8,15 +8,24 @@ const _NET_ACTIVE_WINDOW = 334; exports.getSessions = function (startDate, endDate) { - var d1 = moment(startDate), d2 = moment(endDate); + var rst; + if (!startDate || !endDate) { - return db.getSessions(d1.toDate(), d2.toDate()) - .then(function (sessions) { + console.error("[UserActivityService] getSessions : parameter missing !"); + + } else { + var d1 = moment(startDate), d2 = moment(endDate); - // Append the current active session to the sessions list + rst = db.getSessions(d1.toDate(), d2.toDate()) + .then(function (sessions) { +console.log(crtSession); + // Append the current active session to the sessions list - return crtSession ? sessions.concat([crtSession]) : sessions - }); + return crtSession ? sessions.concat([crtSession]) : sessions + }); + } + + return rst; } /* Inspired by : @@ -31,7 +40,7 @@ // 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 @@ -143,4 +152,5 @@ color: color || prev && prev.color || "#" + (Math.floor(Math.random() * (999 - 100 + 1)) + 100), startDate: startDate || moment().valueOf() }; + console.log('creating new session', crtSession); }; \ No newline at end of file