Author: smaisonneuve Date: 2015-04-28 14:46:32 +0000 (Tue, 28 Apr 2015) New Revision: 1284 Url: http://forge.nuiton.org/projects/sandbox/repository/revisions/1284 Log: [Wit] - Fix Timeline : add sessions hole support Modified: wit/js/components/Timeline.js wit/js/services/UserActivityService.js Modified: wit/js/components/Timeline.js =================================================================== --- wit/js/components/Timeline.js 2015-04-28 13:35:43 UTC (rev 1283) +++ wit/js/components/Timeline.js 2015-04-28 14:46:32 UTC (rev 1284) @@ -18,7 +18,7 @@ // Retrieve window focus activity - user.getSessions(this.startDate, this.endDate) + user.getSessions(this.startDate, this.endDate, true) .then(function (sessions) { self.setState({ sessions: sessions @@ -31,29 +31,24 @@ var items = []; - // Create an empty wrapper to occupy space if the first window session - // doesn't start at the begginning of the timeline - - 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); + var self = this, + timeRange = this.endDate.diff(this.startDate); + items = items.concat( sessions.map(function(session) { + var rst = ""; + 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" + width: (ns.duration / timeRange * 100 || 0) + "%" }; - - return <TimelineSession key={ns.startDate.unix()} data={data} /> + + return <TimelineSession key={ns.startDate.valueOf()} data={data} /> }) ); @@ -66,47 +61,25 @@ ); }, - /** - * 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 + session.startDate = moment(session.startDate); + session.endDate = moment(session.endDate); - rst.startDate = moment(rst.startDate); - rst.endDate = rst.endDate && moment(rst.endDate); - - if (rst.startDate.isBefore(startDate)) { - rst.startDate = startDate; + if (session.startDate.isBefore(startDate)) { + session.startDate = startDate; } - if (rst.endDate && rst.endDate.isAfter(endDate)) { - rst.endDate = endDate; + if (session.endDate.isAfter(endDate)) { + session.endDate = endDate; } - rst.duration = rst.endDate && rst.endDate.diff(rst.startDate); - return rst; + session.duration = session.endDate.diff(session.startDate); + + return session; } }); @@ -117,8 +90,7 @@ var title = data.title || ""; var style = { background: data.color, - width: data.width, - flexGrow: data.grow + width: data.width }; return ( <div className="slice" style={style} title={title}>{title}</div> Modified: wit/js/services/UserActivityService.js =================================================================== --- wit/js/services/UserActivityService.js 2015-04-28 13:35:43 UTC (rev 1283) +++ wit/js/services/UserActivityService.js 2015-04-28 14:46:32 UTC (rev 1284) @@ -7,7 +7,7 @@ const _NET_ACTIVE_WINDOW = 334; -exports.getSessions = function (startDate, endDate) { +exports.getSessions = function (startDate, endDate, withEmptySession) { var rst; if (!startDate || !endDate) { @@ -18,10 +18,40 @@ 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 + }) + .then(function (sessions) { + var result = JSON.parse(JSON.stringify(sessions)); + + // Convert results + + var lastSessionEnd = d1, s; + for (var i = 0; i < result.length; i++) { + + s = result[i]; + + // Convert timestamp to moment + + s.startDate = moment(s.startDate); + s.endDate = s.endDate ? moment(s.endDate) : d2; + + // Create an empty session when there is a hole between 2 sessions + + if (withEmptySession && lastSessionEnd.isBefore(s.startDate)) { + result.splice(i, 0, createFakeSession(lastSessionEnd, s.startDate)); + i++; + } + lastSessionEnd = s.endDate; + } + + if (withEmptySession && lastSessionEnd.isBefore(d2)) { + result.push(createFakeSession(lastSessionEnd, d2)); + } + + return result; }); } @@ -133,10 +163,10 @@ }; var createNewSession = function (windowName, color, startDate) { + var now = moment(); + if (crtSession) { - var now = moment(); crtSession.endDate = now.valueOf(); - crtSession.duration = now.diff(crtSession.startDate); db.insertSession(crtSession); } @@ -148,7 +178,17 @@ crtSession = { name: windowName, color: color || prev && prev.color || "#" + (Math.floor(Math.random() * (999 - 100 + 1)) + 100), - startDate: startDate || moment().valueOf() + startDate: startDate || now.valueOf() }; - console.log('creating new session', crtSession); -}; \ No newline at end of file +}; + +var createFakeSession = function (startDate, endDate) { + var d1 = moment(startDate), d2 = moment(endDate); + + return { + name: "", + color: "transparent", + startDate: d1, + endDate: d2 + } +} \ No newline at end of file