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

r1254 - in wit: . js js/components js/pages js/services
by smaisonneuve＠users.nuiton.org 27 Apr '15

27 Apr '15

Author: smaisonneuve Date: 2015-04-27 08:32:41 +0000 (Mon, 27 Apr 2015) New Revision: 1254 Url: http://forge.nuiton.org/projects/sandbox/repository/revisions/1254 Log: [Wit] - Create pages and services packages Added: wit/js/pages/ wit/js/pages/Rapport.js wit/js/pages/Timer.js wit/js/pages/UserActivity.js wit/js/services/ wit/js/services/TimerService.js wit/js/services/UserActivityService.js wit/js/services/database.js Removed: wit/js/Rapport.js wit/js/Timer.js wit/js/TimerService.js wit/js/UserActivity.js wit/js/UserActivityService.js wit/js/database.js Modified: wit/index.html wit/js/components/FilterBar.js wit/js/main.js Modified: wit/index.html =================================================================== --- wit/index.html 2015-04-27 08:05:13 UTC (rev 1253) +++ wit/index.html 2015-04-27 08:32:41 UTC (rev 1254) @@ -14,9 +14,9 @@ <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/Timer.js"></script> - <script type="text/jsx" src="js/Rapport.js"></script> - <script type="text/jsx" src="js/UserActivity.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/main.js"></script>  Deleted: wit/js/Rapport.js =================================================================== --- wit/js/Rapport.js 2015-04-27 08:05:13 UTC (rev 1253) +++ wit/js/Rapport.js 2015-04-27 08:32:41 UTC (rev 1254) @@ -1,21 +0,0 @@ -/** @jsx React.DOM */ - -var Rapport = React.createClass({ - - getInitialState : function() { - return {result: []}; - }, - - handleSearchResult: function(result) { - this.setState({result: result}); - }, - - render: function() { - return ( - <div> - <FilterBar onSearchResult={this.handleSearchResult}/> - <FilterLogs data={this.state.result}/> - </div> - ); - } -}); Deleted: wit/js/Timer.js =================================================================== --- wit/js/Timer.js 2015-04-27 08:05:13 UTC (rev 1253) +++ wit/js/Timer.js 2015-04-27 08:32:41 UTC (rev 1254) @@ -1,13 +0,0 @@ -/** @jsx React.DOM */ - -var Timer = React.createClass({ - render: function() { - return ( - <div> - <Time /> - <Tags /> - <ActionsBar /> - </div> - ); - } -}); Deleted: wit/js/TimerService.js =================================================================== --- wit/js/TimerService.js 2015-04-27 08:05:13 UTC (rev 1253) +++ wit/js/TimerService.js 2015-04-27 08:32:41 UTC (rev 1254) @@ -1,106 +0,0 @@ -var moment = require('moment'); -var db = require("./database.js"); -var x11 = require('x11'); - -var events = require('events'); -var eventEmitter = new events.EventEmitter(); - -var TIME_IDLE = 4 * 1000; - -var tags = ["wit", "js", "dev"]; -var time = null; -var idleTime = null; -var deltaIdle = 0; - -var updateUserIdleTime = function() { - x11.createClient(function(err, display) { - var X = display.client; - X.require('screen-saver', function(err, SS) { - SS.QueryInfo(display.screen[0].root, function(err, info) { - console.log('Idle time ' + info.idle + "ms"); - - if (info.idle >= TIME_IDLE) { - idleTime = idleTime || new Date(); - eventEmitter.emit('onIdle'); - } - }); - }); - X.on('error', console.error); - }); -}; - -exports.start = function() { - time = new Date(); - timeChange(); -}; - -exports.stop = function() { - if (time) { - db.insertLog(tags, time, idleTime || new Date()); - time = null; - idleTime = null; - deltaIdle = 0; - timeChange(); - } -}; - -exports.getTime = function() { - if (time) { - var start = idleTime ? moment(idleTime) : moment(); - var diff = moment(start.diff(time) + deltaIdle).utcOffset(0); - return diff.format("HH:mm:ss"); - } -}; - -exports.getIdle = function() { - if (idleTime) { - var diff = moment(moment().diff(time) + deltaIdle).utcOffset(0); - return diff.format("HH:mm:ss"); - } -}; - -exports.getTags = function() { - return tags; -}; - -exports.addTag = function(tag) { - tags.push(tag); -}; - -exports.removeTag = function(index) { - tags.splice(index, 1); -}; - -var timeChangeTimer = null; - -var timeChange = function() { - clearTimeout(timeChangeTimer); - - eventEmitter.emit('onTimeChanged'); - if (time) { - timeChangeTimer = setTimeout(timeChange.bind(), 1000); - - //updateUserIdleTime(); - } -}; - -exports.subscribeTimeChanged = function(callback) { - eventEmitter.on('onTimeChanged', callback); -}; - -exports.subscribeIdle = function(callback) { - eventEmitter.on('onIdle', callback); -}; - -exports.keepTime = function() { - var old = deltaIdle + moment(idleTime).diff(time); - - exports.stop(); - exports.start(); - - deltaIdle = old; -}; - -exports.keepIdle = function() { - idleTime = null; -}; Deleted: wit/js/UserActivity.js =================================================================== --- wit/js/UserActivity.js 2015-04-27 08:05:13 UTC (rev 1253) +++ wit/js/UserActivity.js 2015-04-27 08:32:41 UTC (rev 1254) @@ -1,13 +0,0 @@ -/** @jsx React.DOM */ - -var UserActivity = React.createClass({ - - render: function() { - return ( - <div className="userActivity"> - <h1> What the hell did i do today ? </h1> - <Timeline /> - </div> - ); - } -}); \ No newline at end of file Deleted: wit/js/UserActivityService.js =================================================================== --- wit/js/UserActivityService.js 2015-04-27 08:05:13 UTC (rev 1253) +++ wit/js/UserActivityService.js 2015-04-27 08:32:41 UTC (rev 1254) @@ -1,128 +0,0 @@ -var x11 = require('x11'); -var xprop = require('xprop'); -var moment = require('moment'); - -var windowSessions = []; - -const _NET_ACTIVE_WINDOW = 334; - -exports.getSessions = function (startDate, endDate) { - var result = windowSessions, m; - - if (startDate) { - m = moment(startDate); - result = result.filter(function(s) { - return m.isBefore(s.endDate); - }); - } - - if (endDate) { - m = moment(endDate); - result = result.filter(function(s) { - return m.isAfter(s.startDate); - }); - } - - return result; -} - -/* Inspired by : -http://stackoverflow.com/questions/19840459/linux-get-notification-on-focused-gui- window-change/19847998#19847998 -*/ -x11.createClient(function(err, display) { - var X = display.client; - - X.ChangeWindowAttributes(display.screen[0].root, { - eventMask:x11.eventMask.PropertyChange - }); - - // Init windows session with the currently active window - - updateWindowSessions(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)); -}); - - -var onActiveWindowChange = function (X, ev) { - if(ev.name == 'PropertyNotify') { - - X.GetAtomName(ev.atom, function(err, name) { - - // if the property change refers to the currently active window, retrieve new active window name - - if (name == '_NET_ACTIVE_WINDOW') { - updateWindowSessions(X, ev.wid) - } - }); - } -}; - -var updateWindowSessions = function (X, wid) { - return getWindowId(X, wid) - .then(getWindowName) - .then(createNewSession); -}; - -var getWindowId = function (X, wid) { - return new Promise(function (resolve, reject) { - - X.GetProperty(0, wid, _NET_ACTIVE_WINDOW, X.atoms.WINDOW, 0, 4, function(err, prop) { - if (err) { - - console.log("Couldn't retrieve active window property"); - reject(); - - } else { - - resolve(prop.data.readUInt32LE(0)); - - } - }); - }); -} - -var getWindowName = function (windowId) { - return new Promise(function (resolve, 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); - - } - }); - }); -}; - -var createNewSession = function (windowName) { - if (windowSessions.length) { - var now = Date.now(); - var last = windowSessions[windowSessions.length - 1]; - last.endDate = moment(); - last.duration = last.endDate.diff(last.startDate); - } - - // Check if a session corresponding to the given name already exists, - // so that we can retrieve some properties - - var prev = getSessionByName(windowName); - - windowSessions.push({ - name: windowName, - color: prev && prev.color || "#" + (Math.floor(Math.random() * (999 - 100 + 1)) + 100), - startDate: moment() - }); -}; - -var getSessionByName = function (name) { - return windowSessions.filter(function (s) { return s.name == name })[0]; -}; \ No newline at end of file Modified: wit/js/components/FilterBar.js =================================================================== --- wit/js/components/FilterBar.js 2015-04-27 08:05:13 UTC (rev 1253) +++ wit/js/components/FilterBar.js 2015-04-27 08:32:41 UTC (rev 1254) @@ -19,7 +19,7 @@ onSearch: function() { var self = this; var moment = require('moment'); - var db = require("./js/database.js"); + var db = require("./js/services/database.js"); var beginDate = moment(React.findDOMNode(this.refs.beginDate).value).toDate(); var endDate = moment(React.findDOMNode(this.refs.endDate).value).toDate(); Deleted: wit/js/database.js =================================================================== --- wit/js/database.js 2015-04-27 08:05:13 UTC (rev 1253) +++ wit/js/database.js 2015-04-27 08:32:41 UTC (rev 1254) @@ -1,36 +0,0 @@ -var Datastore = require('nedb'); -var db = new Datastore(); - -exports.insertLog = function (tags, startDate, endDate) { - return new Promise(function(resolve, reject) { - db.insert({ - tags: tags, - startDate: startDate.getTime(), - endDate: endDate.getTime() - }, function(err, newDocs) { - if (!err) { - resolve(newDocs); - } else { - reject(err); - } - }); - }); -}; - -exports.searchLogs = function (tags, startDate, endDate) { - var query = {}; - - if (tags) { query.tags = { $in: tags }; } - if (startDate) { query.startDate = { $gte: startDate.getTime() } } - if (endDate) { query.endDate = { $lte: endDate.getTime() } } - - return new Promise(function(resolve, reject) { - db.find(query, function(err, docs) { - if (!err) { - resolve(docs); - } else { - reject(err); - } - }); - }); -}; Modified: wit/js/main.js =================================================================== --- wit/js/main.js 2015-04-27 08:05:13 UTC (rev 1253) +++ wit/js/main.js 2015-04-27 08:32:41 UTC (rev 1254) @@ -9,9 +9,9 @@ global.navigator = window.navigator; var React = require('react'); -var timer = require('./js/TimerService.js'); +var timer = require('./js/services/TimerService.js'); var Router = require('react-router'); -var user = require('./js/UserActivityService.js'); +var user = require('./js/services/UserActivityService.js'); var DefaultRoute = Router.DefaultRoute; var Link = Router.Link; Copied: wit/js/pages/Rapport.js (from rev 1253, wit/js/Rapport.js) =================================================================== --- wit/js/pages/Rapport.js (rev 0) +++ wit/js/pages/Rapport.js 2015-04-27 08:32:41 UTC (rev 1254) @@ -0,0 +1,21 @@ +/** @jsx React.DOM */ + +var Rapport = React.createClass({ + + getInitialState : function() { + return {result: []}; + }, + + handleSearchResult: function(result) { + this.setState({result: result}); + }, + + render: function() { + return ( + <div> + <FilterBar onSearchResult={this.handleSearchResult}/> + <FilterLogs data={this.state.result}/> + </div> + ); + } +}); Copied: wit/js/pages/Timer.js (from rev 1253, wit/js/Timer.js) =================================================================== --- wit/js/pages/Timer.js (rev 0) +++ wit/js/pages/Timer.js 2015-04-27 08:32:41 UTC (rev 1254) @@ -0,0 +1,13 @@ +/** @jsx React.DOM */ + +var Timer = React.createClass({ + render: function() { + return ( + <div> + <Time /> + <Tags /> + <ActionsBar /> + </div> + ); + } +}); Copied: wit/js/pages/UserActivity.js (from rev 1253, wit/js/UserActivity.js) =================================================================== --- wit/js/pages/UserActivity.js (rev 0) +++ wit/js/pages/UserActivity.js 2015-04-27 08:32:41 UTC (rev 1254) @@ -0,0 +1,13 @@ +/** @jsx React.DOM */ + +var UserActivity = React.createClass({ + + render: function() { + return ( + <div className="userActivity"> + <h1> What the hell did i do today ? </h1> + <Timeline /> + </div> + ); + } +}); \ No newline at end of file Copied: wit/js/services/TimerService.js (from rev 1253, wit/js/TimerService.js) =================================================================== --- wit/js/services/TimerService.js (rev 0) +++ wit/js/services/TimerService.js 2015-04-27 08:32:41 UTC (rev 1254) @@ -0,0 +1,106 @@ +var moment = require('moment'); +var db = require("./database.js"); +var x11 = require('x11'); + +var events = require('events'); +var eventEmitter = new events.EventEmitter(); + +var TIME_IDLE = 4 * 1000; + +var tags = ["wit", "js", "dev"]; +var time = null; +var idleTime = null; +var deltaIdle = 0; + +var updateUserIdleTime = function() { + x11.createClient(function(err, display) { + var X = display.client; + X.require('screen-saver', function(err, SS) { + SS.QueryInfo(display.screen[0].root, function(err, info) { + console.log('Idle time ' + info.idle + "ms"); + + if (info.idle >= TIME_IDLE) { + idleTime = idleTime || new Date(); + eventEmitter.emit('onIdle'); + } + }); + }); + X.on('error', console.error); + }); +}; + +exports.start = function() { + time = new Date(); + timeChange(); +}; + +exports.stop = function() { + if (time) { + db.insertLog(tags, time, idleTime || new Date()); + time = null; + idleTime = null; + deltaIdle = 0; + timeChange(); + } +}; + +exports.getTime = function() { + if (time) { + var start = idleTime ? moment(idleTime) : moment(); + var diff = moment(start.diff(time) + deltaIdle).utcOffset(0); + return diff.format("HH:mm:ss"); + } +}; + +exports.getIdle = function() { + if (idleTime) { + var diff = moment(moment().diff(time) + deltaIdle).utcOffset(0); + return diff.format("HH:mm:ss"); + } +}; + +exports.getTags = function() { + return tags; +}; + +exports.addTag = function(tag) { + tags.push(tag); +}; + +exports.removeTag = function(index) { + tags.splice(index, 1); +}; + +var timeChangeTimer = null; + +var timeChange = function() { + clearTimeout(timeChangeTimer); + + eventEmitter.emit('onTimeChanged'); + if (time) { + timeChangeTimer = setTimeout(timeChange.bind(), 1000); + + //updateUserIdleTime(); + } +}; + +exports.subscribeTimeChanged = function(callback) { + eventEmitter.on('onTimeChanged', callback); +}; + +exports.subscribeIdle = function(callback) { + eventEmitter.on('onIdle', callback); +}; + +exports.keepTime = function() { + var old = deltaIdle + moment(idleTime).diff(time); + + exports.stop(); + exports.start(); + + deltaIdle = old; +}; + +exports.keepIdle = function() { + idleTime = null; +}; Copied: wit/js/services/UserActivityService.js (from rev 1253, wit/js/UserActivityService.js) =================================================================== --- wit/js/services/UserActivityService.js (rev 0) +++ wit/js/services/UserActivityService.js 2015-04-27 08:32:41 UTC (rev 1254) @@ -0,0 +1,128 @@ +var x11 = require('x11'); +var xprop = require('xprop'); +var moment = require('moment'); + +var windowSessions = []; + +const _NET_ACTIVE_WINDOW = 334; + +exports.getSessions = function (startDate, endDate) { + var result = windowSessions, m; + + if (startDate) { + m = moment(startDate); + result = result.filter(function(s) { + return m.isBefore(s.endDate); + }); + } + + if (endDate) { + m = moment(endDate); + result = result.filter(function(s) { + return m.isAfter(s.startDate); + }); + } + + return result; +} + +/* Inspired by : +http://stackoverflow.com/questions/19840459/linux-get-notification-on-focused-gui- window-change/19847998#19847998 +*/ +x11.createClient(function(err, display) { + var X = display.client; + + X.ChangeWindowAttributes(display.screen[0].root, { + eventMask:x11.eventMask.PropertyChange + }); + + // Init windows session with the currently active window + + updateWindowSessions(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)); +}); + + +var onActiveWindowChange = function (X, ev) { + if(ev.name == 'PropertyNotify') { + + X.GetAtomName(ev.atom, function(err, name) { + + // if the property change refers to the currently active window, retrieve new active window name + + if (name == '_NET_ACTIVE_WINDOW') { + updateWindowSessions(X, ev.wid) + } + }); + } +}; + +var updateWindowSessions = function (X, wid) { + return getWindowId(X, wid) + .then(getWindowName) + .then(createNewSession); +}; + +var getWindowId = function (X, wid) { + return new Promise(function (resolve, reject) { + + X.GetProperty(0, wid, _NET_ACTIVE_WINDOW, X.atoms.WINDOW, 0, 4, function(err, prop) { + if (err) { + + console.log("Couldn't retrieve active window property"); + reject(); + + } else { + + resolve(prop.data.readUInt32LE(0)); + + } + }); + }); +} + +var getWindowName = function (windowId) { + return new Promise(function (resolve, 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); + + } + }); + }); +}; + +var createNewSession = function (windowName) { + if (windowSessions.length) { + var now = Date.now(); + var last = windowSessions[windowSessions.length - 1]; + last.endDate = moment(); + last.duration = last.endDate.diff(last.startDate); + } + + // Check if a session corresponding to the given name already exists, + // so that we can retrieve some properties + + var prev = getSessionByName(windowName); + + windowSessions.push({ + name: windowName, + color: prev && prev.color || "#" + (Math.floor(Math.random() * (999 - 100 + 1)) + 100), + startDate: moment() + }); +}; + +var getSessionByName = function (name) { + return windowSessions.filter(function (s) { return s.name == name })[0]; +}; \ No newline at end of file Copied: wit/js/services/database.js (from rev 1253, wit/js/database.js) =================================================================== --- wit/js/services/database.js (rev 0) +++ wit/js/services/database.js 2015-04-27 08:32:41 UTC (rev 1254) @@ -0,0 +1,36 @@ +var Datastore = require('nedb'); +var db = new Datastore(); + +exports.insertLog = function (tags, startDate, endDate) { + return new Promise(function(resolve, reject) { + db.insert({ + tags: tags, + startDate: startDate.getTime(), + endDate: endDate.getTime() + }, function(err, newDocs) { + if (!err) { + resolve(newDocs); + } else { + reject(err); + } + }); + }); +}; + +exports.searchLogs = function (tags, startDate, endDate) { + var query = {}; + + if (tags) { query.tags = { $in: tags }; } + if (startDate) { query.startDate = { $gte: startDate.getTime() } } + if (endDate) { query.endDate = { $lte: endDate.getTime() } } + + return new Promise(function(resolve, reject) { + db.find(query, function(err, docs) { + if (!err) { + resolve(docs); + } else { + reject(err); + } + }); + }); +};

1 0

r1253 - wit
by jruchaud＠users.nuiton.org 27 Apr '15

27 Apr '15

Author: jruchaud Date: 2015-04-27 08:05:13 +0000 (Mon, 27 Apr 2015) New Revision: 1253 Url: http://forge.nuiton.org/projects/sandbox/repository/revisions/1253 Log: Remove useless code Modified: wit/index.html Modified: wit/index.html =================================================================== --- wit/index.html 2015-04-24 21:01:18 UTC (rev 1252) +++ wit/index.html 2015-04-27 08:05:13 UTC (rev 1253) @@ -26,10 +26,6 @@ <link rel="stylesheet/less" type="text/css" href="css/userActivity.less" /> <script type="text/javascript" src="node_modules/less/dist/less.min.js"></script> - - <script type="text/javascript"> - - </script> </head>

1 0

r1252 - in wit: . js js/components
by jruchaud＠users.nuiton.org 24 Apr '15

24 Apr '15

Author: jruchaud Date: 2015-04-24 21:01:18 +0000 (Fri, 24 Apr 2015) New Revision: 1252 Url: http://forge.nuiton.org/projects/sandbox/repository/revisions/1252 Log: Use react-router to manage path (sorry sam for the bother) Added: wit/js/Timer.js Removed: wit/js/App.js Modified: wit/index.html wit/js/components/FilterBar.js wit/js/main.js wit/package.json Modified: wit/index.html =================================================================== --- wit/index.html 2015-04-24 13:01:37 UTC (rev 1251) +++ wit/index.html 2015-04-24 21:01:18 UTC (rev 1252) @@ -14,7 +14,7 @@ <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/App.js"></script> + <script type="text/jsx" src="js/Timer.js"></script> <script type="text/jsx" src="js/Rapport.js"></script> <script type="text/jsx" src="js/UserActivity.js"></script> <script type="text/jsx" src="js/main.js"></script> @@ -28,35 +28,11 @@ <script type="text/javascript" src="node_modules/less/dist/less.min.js"></script> <script type="text/javascript"> - function userActivity () { - var gui = require('nw.gui'); - var new_win = gui.Window.open('index.html#userActivity', { - position: 'center', - toolbar: true - }); - } + </script> </head> - <body> - <div class="container-fluid"> - - <div class="navbar navbar-default"> - <div class="navbar-header pull-left"> - <a class="navbar-brand" href="#">WIT</a> - </div> + + <body></body> - <div class="nav navbar-header pull-right"> - <ul class="nav pull-right"> - <li class="pull-left"><a href="#">Timer</a></li> - <li class="pull-left"><a href="#rapport">Rapport</a></li> - <li class="pull-left"><a href="#">Tags</a></li> - <li class="pull-left"><a href="#">Options</a></li> - <li class="pull-left" onClick="userActivity()"><a href="#">Help !</a></li> - </ul> - </div> - </div> - <div id="content"></div> - </div> - </body> </html> Deleted: wit/js/App.js =================================================================== --- wit/js/App.js 2015-04-24 13:01:37 UTC (rev 1251) +++ wit/js/App.js 2015-04-24 21:01:18 UTC (rev 1252) @@ -1,13 +0,0 @@ -/** @jsx React.DOM */ - -var App = React.createClass({ - render: function() { - return ( - <div> - <Time /> - <Tags /> - <ActionsBar /> - </div> - ); - } -}); Added: wit/js/Timer.js =================================================================== --- wit/js/Timer.js (rev 0) +++ wit/js/Timer.js 2015-04-24 21:01:18 UTC (rev 1252) @@ -0,0 +1,13 @@ +/** @jsx React.DOM */ + +var Timer = React.createClass({ + render: function() { + return ( + <div> + <Time /> + <Tags /> + <ActionsBar /> + </div> + ); + } +}); Modified: wit/js/components/FilterBar.js =================================================================== --- wit/js/components/FilterBar.js 2015-04-24 13:01:37 UTC (rev 1251) +++ wit/js/components/FilterBar.js 2015-04-24 21:01:18 UTC (rev 1252) @@ -34,11 +34,11 @@ render: function() { return ( - <form class="form-inline"> + <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> - </form> + </div> ); } }); Modified: wit/js/main.js =================================================================== --- wit/js/main.js 2015-04-24 13:01:37 UTC (rev 1251) +++ wit/js/main.js 2015-04-24 21:01:18 UTC (rev 1252) @@ -1,24 +1,65 @@ /** @jsx React.DOM */ +// Popup Idle +// Options with idle time + nb tags +// Route +// Dropdown rapport week/day/month + +global.document = window.document; +global.navigator = window.navigator; + +var React = require('react'); var timer = require('./js/TimerService.js'); +var Router = require('react-router'); var user = require('./js/UserActivityService.js'); -(function() { - var app, hash = location.hash; - switch (hash) { - case "#rapport": - app = <Rapport/>; - break; - case "#userActivity": - app = <UserActivity/>; - break; - default: - app = <App/> - break; - } +var DefaultRoute = Router.DefaultRoute; +var Link = Router.Link; +var Route = Router.Route; +var RouteHandler = Router.RouteHandler; - React.render( - app, - document.getElementById('content') +var App = React.createClass({ + userActivity : function() { + var gui = require('nw.gui'); + var new_win = gui.Window.open('index.html#/activity', { + position: 'center', + toolbar: true + }); + }, + + render: function() { + return ( + <div className="container-fluid"> + + <div className="navbar navbar-default"> + <div className="navbar-header pull-left"> + <a className="navbar-brand" href="#">WIT</a> + </div> + + <div className="nav navbar-header pull-right"> + <ul className="nav pull-right"> + <li className="pull-left"><Link to="app">Timer</Link></li> + <li className="pull-left"><Link to="rapport">Rapport</Link></li> + <li className="pull-left"><a href="#">Tags</a></li> + <li className="pull-left"><a href="#">Options</a></li> + <li className="pull-left"><Link to="activity">Help</Link></li> + </ul> + </div> + </div> + <RouteHandler/> + </div> ); -})(); + } +}); + +var routes = ( + <Route name="app" path="/" handler={App}> + <Route name="rapport" handler={Rapport}/> + <Route name="activity" handler={UserActivity}/> + <DefaultRoute handler={Timer}/> + </Route> +); + +Router.run(routes, function (Handler) { + React.render(<Handler/>, document.body); +}); Modified: wit/package.json =================================================================== --- wit/package.json 2015-04-24 13:01:37 UTC (rev 1251) +++ wit/package.json 2015-04-24 21:01:18 UTC (rev 1252) @@ -15,6 +15,7 @@ "moment": "^2.10.2", "nedb": "^1.1.2", "react": "^0.13.1", + "react-router": "^0.13.2", "x11": "^1.0.3", "xprop": "^0.0.0" },

1 0

r1251 - in wit/js: . components
by smaisonneuve＠users.nuiton.org 24 Apr '15

24 Apr '15

Author: smaisonneuve Date: 2015-04-24 13:01:37 +0000 (Fri, 24 Apr 2015) New Revision: 1251 Url: http://forge.nuiton.org/projects/sandbox/repository/revisions/1251 Log: [Wit] - Add user activity monitoring : adjust "empty slice" Modified: wit/js/UserActivityService.js wit/js/components/Timeline.js Modified: wit/js/UserActivityService.js =================================================================== --- wit/js/UserActivityService.js 2015-04-24 09:24:55 UTC (rev 1250) +++ wit/js/UserActivityService.js 2015-04-24 13:01:37 UTC (rev 1251) @@ -12,14 +12,14 @@ if (startDate) { m = moment(startDate); result = result.filter(function(s) { - return m.isBefore(s.startDate); + return m.isBefore(s.endDate); }); } if (endDate) { m = moment(endDate); result = result.filter(function(s) { - return !s.endDate || m.isAfter(s.endDate); // if no endDate, it means that this is the current session + return m.isAfter(s.startDate); }); } @@ -125,4 +125,4 @@ var getSessionByName = function (name) { return windowSessions.filter(function (s) { return s.name == name })[0]; -} \ No newline at end of file +}; \ No newline at end of file Modified: wit/js/components/Timeline.js =================================================================== --- wit/js/components/Timeline.js 2015-04-24 09:24:55 UTC (rev 1250) +++ wit/js/components/Timeline.js 2015-04-24 13:01:37 UTC (rev 1251) @@ -35,15 +35,19 @@ sessions = this.state.sessions; // Build timeline + + var items = [], style; - var style = { - width: (sessions[0].startDate.diff(startDate) / endDate.diff(startDate) * 100 ) +"%", - }; - var items = [( - - <div className="slice" style={style}></div> - - )].concat( + if (sessions[0].startDate.isAfter(startDate)) { + var style = { + width: (sessions[0].startDate.diff(startDate) / endDate.diff(startDate) * 100 ) +"%", + }; + var items = [( + <div className="slice" style={style}></div> + )]; + } + + items = items.concat( sessions.map(function(session) { style = { background: session.color, @@ -52,7 +56,7 @@ }; var title = session.name; return ( - <div className="slice" style={style} title={title}>{title}</div> + <div className="slice" style={style} title={title}>{title}</div> ); }) );

1 0

r1250 - wit/css
by smaisonneuve＠users.nuiton.org 24 Apr '15

24 Apr '15

Author: smaisonneuve Date: 2015-04-24 09:24:55 +0000 (Fri, 24 Apr 2015) New Revision: 1250 Url: http://forge.nuiton.org/projects/sandbox/repository/revisions/1250 Log: [Wit] - Add user activity monitoring : put a shadow on hover Modified: wit/css/timeline.less Modified: wit/css/timeline.less =================================================================== --- wit/css/timeline.less 2015-04-24 09:05:45 UTC (rev 1249) +++ wit/css/timeline.less 2015-04-24 09:24:55 UTC (rev 1250) @@ -24,6 +24,10 @@ cursor: pointer; color:white; + + &:hover{ + box-shadow: 0px 0px 5px 2px #656565; + } } }

1 0

r1249 - in wit: css js/components
by smaisonneuve＠users.nuiton.org 24 Apr '15

24 Apr '15

Author: smaisonneuve Date: 2015-04-24 09:05:45 +0000 (Fri, 24 Apr 2015) New Revision: 1249 Url: http://forge.nuiton.org/projects/sandbox/repository/revisions/1249 Log: [Wit] - Add user activity monitoring : set an hour bound Modified: wit/css/userActivity.less wit/js/components/Timeline.js Modified: wit/css/userActivity.less =================================================================== --- wit/css/userActivity.less 2015-04-23 16:01:40 UTC (rev 1248) +++ wit/css/userActivity.less 2015-04-24 09:05:45 UTC (rev 1249) @@ -3,7 +3,7 @@ flex-direction: column; justify-content: center; - height: 100%; + height: 350px; width: 100%; h1 { Modified: wit/js/components/Timeline.js =================================================================== --- wit/js/components/Timeline.js 2015-04-23 16:01:40 UTC (rev 1248) +++ wit/js/components/Timeline.js 2015-04-24 09:05:45 UTC (rev 1249) @@ -17,7 +17,7 @@ _refreshSessions: function () { // Retrieve window focus activity - var startDate = moment().subtract(1, "m"), + var startDate = moment().subtract(1, "h"), endDate = moment(); var sessions = user.getSessions(startDate, endDate); @@ -30,22 +30,32 @@ }, render: function() { - var startDate = this.state.startDate; - var endDate = this.state.endDate; + var startDate = this.state.startDate, + endDate = this.state.endDate, + sessions = this.state.sessions; // Build timeline - var items = this.state.sessions.map(function(session) { - var style = { - background: session.color, - width: session.duration ? (session.duration / endDate.diff(startDate) * 100 ) +"%":"initial", - flexGrow: !session.duration ? "1":"0" - }; - var title = session.name; - return ( - <div className="slice" style={style} title={title}>{title}</div> - ); - }); + var style = { + width: (sessions[0].startDate.diff(startDate) / endDate.diff(startDate) * 100 ) +"%", + }; + var items = [( + + <div className="slice" style={style}></div> + + )].concat( + sessions.map(function(session) { + style = { + background: session.color, + width: (session.duration / endDate.diff(startDate) * 100 || 0) +"%", + flexGrow: !session.duration ? "1":"0" + }; + var title = session.name; + return ( + <div className="slice" style={style} title={title}>{title}</div> + ); + }) + ); return ( <div className="timeline">

1 0

r1248 - in wit: . css js js/components
by smaisonneuve＠users.nuiton.org 23 Apr '15

23 Apr '15

Author: smaisonneuve Date: 2015-04-23 16:01:40 +0000 (Thu, 23 Apr 2015) New Revision: 1248 Url: http://forge.nuiton.org/projects/sandbox/repository/revisions/1248 Log: [Wit] - Add user activity monitoring Added: wit/css/timeline.less wit/css/userActivity.less wit/js/UserActivity.js wit/js/UserActivityService.js wit/js/components/Timeline.js Modified: wit/index.html wit/js/main.js wit/package.json Added: wit/css/timeline.less =================================================================== --- wit/css/timeline.less (rev 0) +++ wit/css/timeline.less 2015-04-23 16:01:40 UTC (rev 1248) @@ -0,0 +1,45 @@ +@timeLabelsDefaultHeight: 40px; + +@timelineDefaultWidth: 100%; +@timelineDefaultHeight: 100px; + +.timeline { + + .sessions { + display: flex; + + width: @timelineDefaultWidth; + height: @timelineDefaultHeight; + + background: red; + + .slice { + height: @timelineDefaultHeight; + line-height: @timelineDefaultHeight; + + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + + cursor: pointer; + + color:white; + } + } + + .timeLabels { + + height: @timeLabelsDefaultHeight; + line-height: @timeLabelsDefaultHeight; + + color: black; + padding: 0 5px; + + .start { + float:left; + } + .end { + float:right; + } + } +} Added: wit/css/userActivity.less =================================================================== --- wit/css/userActivity.less (rev 0) +++ wit/css/userActivity.less 2015-04-23 16:01:40 UTC (rev 1248) @@ -0,0 +1,14 @@ +.userActivity { + display: flex; + flex-direction: column; + justify-content: center; + + height: 100%; + width: 100%; + + h1 { + position: absolute; + top: 50px; + color: black; + } +} \ No newline at end of file Modified: wit/index.html =================================================================== --- wit/index.html 2015-04-22 19:39:12 UTC (rev 1247) +++ wit/index.html 2015-04-23 16:01:40 UTC (rev 1248) @@ -13,16 +13,30 @@ <script type="text/jsx" src="js/components/ActionsBar.js"></script> <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/App.js"></script> <script type="text/jsx" src="js/Rapport.js"></script> + <script type="text/jsx" src="js/UserActivity.js"></script> <script type="text/jsx" src="js/main.js"></script>  <link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.min.css"> <link rel="stylesheet/less" type="text/css" href="css/style.less" /> + <link rel="stylesheet/less" type="text/css" href="css/timeline.less" /> + <link rel="stylesheet/less" type="text/css" href="css/userActivity.less" /> <script type="text/javascript" src="node_modules/less/dist/less.min.js"></script> + <script type="text/javascript"> + function userActivity () { + var gui = require('nw.gui'); + var new_win = gui.Window.open('index.html#userActivity', { + position: 'center', + toolbar: true + }); + } + </script> + </head> <body> <div class="container-fluid"> @@ -38,6 +52,7 @@ <li class="pull-left"><a href="#rapport">Rapport</a></li> <li class="pull-left"><a href="#">Tags</a></li> <li class="pull-left"><a href="#">Options</a></li> + <li class="pull-left" onClick="userActivity()"><a href="#">Help !</a></li> </ul> </div> </div> Added: wit/js/UserActivity.js =================================================================== --- wit/js/UserActivity.js (rev 0) +++ wit/js/UserActivity.js 2015-04-23 16:01:40 UTC (rev 1248) @@ -0,0 +1,13 @@ +/** @jsx React.DOM */ + +var UserActivity = React.createClass({ + + render: function() { + return ( + <div className="userActivity"> + <h1> What the hell did i do today ? </h1> + <Timeline /> + </div> + ); + } +}); \ No newline at end of file Added: wit/js/UserActivityService.js =================================================================== --- wit/js/UserActivityService.js (rev 0) +++ wit/js/UserActivityService.js 2015-04-23 16:01:40 UTC (rev 1248) @@ -0,0 +1,128 @@ +var x11 = require('x11'); +var xprop = require('xprop'); +var moment = require('moment'); + +var windowSessions = []; + +const _NET_ACTIVE_WINDOW = 334; + +exports.getSessions = function (startDate, endDate) { + var result = windowSessions, m; + + if (startDate) { + m = moment(startDate); + result = result.filter(function(s) { + return m.isBefore(s.startDate); + }); + } + + if (endDate) { + m = moment(endDate); + result = result.filter(function(s) { + return !s.endDate || m.isAfter(s.endDate); // if no endDate, it means that this is the current session + }); + } + + return result; +} + +/* Inspired by : +http://stackoverflow.com/questions/19840459/linux-get-notification-on-focused-gui- window-change/19847998#19847998 +*/ +x11.createClient(function(err, display) { + var X = display.client; + + X.ChangeWindowAttributes(display.screen[0].root, { + eventMask:x11.eventMask.PropertyChange + }); + + // Init windows session with the currently active window + + updateWindowSessions(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)); +}); + + +var onActiveWindowChange = function (X, ev) { + if(ev.name == 'PropertyNotify') { + + X.GetAtomName(ev.atom, function(err, name) { + + // if the property change refers to the currently active window, retrieve new active window name + + if (name == '_NET_ACTIVE_WINDOW') { + updateWindowSessions(X, ev.wid) + } + }); + } +}; + +var updateWindowSessions = function (X, wid) { + return getWindowId(X, wid) + .then(getWindowName) + .then(createNewSession); +}; + +var getWindowId = function (X, wid) { + return new Promise(function (resolve, reject) { + + X.GetProperty(0, wid, _NET_ACTIVE_WINDOW, X.atoms.WINDOW, 0, 4, function(err, prop) { + if (err) { + + console.log("Couldn't retrieve active window property"); + reject(); + + } else { + + resolve(prop.data.readUInt32LE(0)); + + } + }); + }); +} + +var getWindowName = function (windowId) { + return new Promise(function (resolve, 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); + + } + }); + }); +}; + +var createNewSession = function (windowName) { + if (windowSessions.length) { + var now = Date.now(); + var last = windowSessions[windowSessions.length - 1]; + last.endDate = moment(); + last.duration = last.endDate.diff(last.startDate); + } + + // Check if a session corresponding to the given name already exists, + // so that we can retrieve some properties + + var prev = getSessionByName(windowName); + + windowSessions.push({ + name: windowName, + color: prev && prev.color || "#" + (Math.floor(Math.random() * (999 - 100 + 1)) + 100), + startDate: moment() + }); +}; + +var getSessionByName = function (name) { + return windowSessions.filter(function (s) { return s.name == name })[0]; +} \ No newline at end of file Added: wit/js/components/Timeline.js =================================================================== --- wit/js/components/Timeline.js (rev 0) +++ wit/js/components/Timeline.js 2015-04-23 16:01:40 UTC (rev 1248) @@ -0,0 +1,62 @@ +var moment = require('moment'); + +var Timeline = React.createClass({ + poolingInterval: 5 * 1000, + + getInitialState: function() { + return this._refreshSessions(); + }, + + componentDidMount: function () { + var self = this; + setInterval(function () { + self.setState(self._refreshSessions()); + }, this.poolingInterval); + }, + + _refreshSessions: function () { + // Retrieve window focus activity + + var startDate = moment().subtract(1, "m"), + endDate = moment(); + + var sessions = user.getSessions(startDate, endDate); + + return { + sessions: sessions, + startDate: startDate, + endDate: endDate + }; + }, + + render: function() { + var startDate = this.state.startDate; + var endDate = this.state.endDate; + + // Build timeline + + var items = this.state.sessions.map(function(session) { + var style = { + background: session.color, + width: session.duration ? (session.duration / endDate.diff(startDate) * 100 ) +"%":"initial", + flexGrow: !session.duration ? "1":"0" + }; + var title = session.name; + return ( + <div className="slice" style={style} title={title}>{title}</div> + ); + }); + + return ( + <div className="timeline"> + <div className="timeLabels"> + <div className="start"> | An hour ago...</div> + <div className="end">Now |</div> + </div> + <div className="sessions"> + {items} + </div> + </div> + ); + } +}); \ No newline at end of file Modified: wit/js/main.js =================================================================== --- wit/js/main.js 2015-04-22 19:39:12 UTC (rev 1247) +++ wit/js/main.js 2015-04-23 16:01:40 UTC (rev 1248) @@ -1,9 +1,21 @@ /** @jsx React.DOM */ var timer = require('./js/TimerService.js'); +var user = require('./js/UserActivityService.js'); (function() { - var app = location.hash == "#rapport" ? <Rapport/> : <App/>; + var app, hash = location.hash; + switch (hash) { + case "#rapport": + app = <Rapport/>; + break; + case "#userActivity": + app = <UserActivity/>; + break; + default: + app = <App/> + break; + } React.render( app, Modified: wit/package.json =================================================================== --- wit/package.json 2015-04-22 19:39:12 UTC (rev 1247) +++ wit/package.json 2015-04-23 16:01:40 UTC (rev 1248) @@ -15,10 +15,12 @@ "moment": "^2.10.2", "nedb": "^1.1.2", "react": "^0.13.1", - "x11": "^1.0.3" + "x11": "^1.0.3", + "xprop": "^0.0.0" }, "devDependencies": { "grunt": "^0.4.5", "grunt-node-webkit-builder": "^1.0.2" - } + }, + "chromium-args":"--javascript-harmony" }

1 0

r1247 - in wit: . js/components
by jruchaud＠users.nuiton.org 22 Apr '15

22 Apr '15

Author: jruchaud Date: 2015-04-22 19:39:12 +0000 (Wed, 22 Apr 2015) New Revision: 1247 Url: http://forge.nuiton.org/projects/sandbox/repository/revisions/1247 Log: Continue to do the style on bootstrap for the moment Modified: wit/index.html wit/js/components/ActionsBar.js wit/js/components/FilterBar.js wit/js/components/FilterLogs.js wit/js/components/Tags.js wit/package.json Modified: wit/index.html =================================================================== --- wit/index.html 2015-04-22 16:59:20 UTC (rev 1246) +++ wit/index.html 2015-04-22 19:39:12 UTC (rev 1247) @@ -35,7 +35,7 @@ <div class="nav navbar-header pull-right"> <ul class="nav pull-right"> <li class="pull-left"><a href="#">Timer</a></li> - <li class="pull-left"><a href="#">Rapport</a></li> + <li class="pull-left"><a href="#rapport">Rapport</a></li> <li class="pull-left"><a href="#">Tags</a></li> <li class="pull-left"><a href="#">Options</a></li> </ul> Modified: wit/js/components/ActionsBar.js =================================================================== --- wit/js/components/ActionsBar.js 2015-04-22 16:59:20 UTC (rev 1246) +++ wit/js/components/ActionsBar.js 2015-04-22 19:39:12 UTC (rev 1247) @@ -10,15 +10,6 @@ timer.stop(); }, - onRapport: function(e) { - var gui = require('nw.gui'); - var new_win = gui.Window.open('index.html#rapport', { - position: 'center', - toolbar: true - }); - //new_win.maximize(); - }, - render: function() { return ( <div className="text-center"> Modified: wit/js/components/FilterBar.js =================================================================== --- wit/js/components/FilterBar.js 2015-04-22 16:59:20 UTC (rev 1246) +++ wit/js/components/FilterBar.js 2015-04-22 19:39:12 UTC (rev 1247) @@ -2,15 +2,18 @@ var FilterBar = React.createClass({ - componentWillMount: function() { + componentDidMount: function() { var moment = require('moment'); var now = moment(); now.add(1, 'hours'); - this.endDefaultDate = now.format("YYYY-MM-DDThh:mm"); + var endDefaultDate = now.format("YYYY-MM-DDThh:mm"); now.subtract(7, 'days'); - this.startDefaultDate = now.format("YYYY-MM-DDThh:mm"); + var startDefaultDate = now.format("YYYY-MM-DDThh:mm"); + + React.findDOMNode(this.refs.beginDate).value = startDefaultDate; + React.findDOMNode(this.refs.endDate).value = endDefaultDate; }, onSearch: function() { @@ -31,11 +34,11 @@ render: function() { return ( - <div className="filter"> - <input ref="beginDate" type="datetime-local" required value={this.startDefaultDate}></input> - <input ref="endDate" type="datetime-local" required value={this.endDefaultDate}></input> - <button onClick={this.onSearch}>Search</button> - </div> + <form class="form-inline"> + <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> + </form> ); } }); Modified: wit/js/components/FilterLogs.js =================================================================== --- wit/js/components/FilterLogs.js 2015-04-22 16:59:20 UTC (rev 1246) +++ wit/js/components/FilterLogs.js 2015-04-22 19:39:12 UTC (rev 1247) @@ -6,18 +6,30 @@ var moment = require('moment'); var items = this.props.data.map(function(log) { + + var diff = moment(moment(log.endDate).diff(log.startDate)).utcOffset(0); + return ( <tr> - <td>{moment(log.startDate).format("MM/DD/YY, h:mm:ss")}</td> - <td>{moment(log.endDate).format("MM/DD/YY, h:mm:ss")}</td> + <td>{moment(log.startDate).format("MM/DD/YY")}</td> + <td>{diff.format("HH:mm:ss")}</td> <td>{log.tags.join(",")}</td> </tr> ); }); return ( - <table> - {items} + <table className="table"> + <thead> + <tr> + <th>Date</th> + <th>Duration</th> + <th>Tags</th> + </tr> + </thead> + <tbody> + {items} + </tbody> </table> ); } Modified: wit/js/components/Tags.js =================================================================== --- wit/js/components/Tags.js 2015-04-22 16:59:20 UTC (rev 1246) +++ wit/js/components/Tags.js 2015-04-22 19:39:12 UTC (rev 1247) @@ -31,23 +31,30 @@ render: function() { var self = this; - var items = this.state.getTags().map(function(item, index) { - return ( - <li className="list-group-item"> - <button type="button" className="close" aria-label="Close" onClick={self.onRemove} data-index={index}> - <span aria-hidden="true">×</span> + var tags = timer.getTags(); + + var rows = []; + for (var i=0; i < 5; i++) { + var tag = tags[i]; + + rows.push(<li className="list-group-item"> + <button type="button" className="close" aria-label="Close"> + <span aria-hidden="true" onClick={self.onRemove} data-index={i}>×</span> </button> - {item} + + {tag ? tag : "empty"} </li> - ); - }); - + ); + } + return ( <ul className="list-group"> - {items} + {rows} + + <li className="list-group-item"> + <input className="form-control" onKeyDown={this.onKey} placeholder="enter tag" tabIndex="-1" autoComplete="off" autoCorrect="off" autoCapitalize="off" spellCheck="false" role="textbox" type="text"></input> + </li> </ul> ); } }); - -// <li className="input"><input id="inputTag" onKeyDown={this.onKey} tabIndex="-1" autoComplete="off" autoCorrect="off" autoCapitalize="off" spellCheck="false" role="textbox" type="text"></input></li> Modified: wit/package.json =================================================================== --- wit/package.json 2015-04-22 16:59:20 UTC (rev 1246) +++ wit/package.json 2015-04-22 19:39:12 UTC (rev 1247) @@ -4,7 +4,7 @@ "version": "1.0.0", "window": { "width": 480, - "height": 400, + "height": 450, "toolbar": true, "frame": true, "transparent": false

1 0

r1246 - wit/css
by jruchaud＠users.nuiton.org 22 Apr '15

22 Apr '15

Author: jruchaud Date: 2015-04-22 16:59:20 +0000 (Wed, 22 Apr 2015) New Revision: 1246 Url: http://forge.nuiton.org/projects/sandbox/repository/revisions/1246 Log: Begin to do the style on bootstrap for the moment Removed: wit/css/actions.less wit/css/select.less wit/css/time.less Deleted: wit/css/actions.less =================================================================== --- wit/css/actions.less 2015-04-22 16:58:01 UTC (rev 1245) +++ wit/css/actions.less 2015-04-22 16:59:20 UTC (rev 1246) @@ -1,53 +0,0 @@ -.actions { - display: flex; - justify-content: center; - - background-color: #47484b; - position: absolute; - bottom: 0; - width: 100%; - - >div { - height: 50px; - width: 50px; - background-color: #2d2e30; - margin: 5px; - - display: flex; - justify-content: center; - align-items: center; - - border-radius: 25px; - } - - #play { - .icon { - border-top: transparent 15px solid; - /* border-right: transparent 20px solid; */ - border-bottom: transparent 15px solid; - border-left: #699bb1 15px solid; - - height: 0px; - width: 0px; - background-color: transparent; - } - } - - #stop { - .icon { - height: 20px; - width: 20px; - background-color: #699bb1; - } - } -} - -#time { - text-align: center; - position: absolute; - width: 100%; - bottom: 60px; - - border-top: 2px #ccc solid; - background-color: #47484b; -} Deleted: wit/css/select.less =================================================================== --- wit/css/select.less 2015-04-22 16:58:01 UTC (rev 1245) +++ wit/css/select.less 2015-04-22 16:59:20 UTC (rev 1246) @@ -1,57 +0,0 @@ -.selection { - background-color: #f8f8f8; - border-radius: 4px; - cursor: text; - - overflow-x: scroll; - overflow-y: hidden; - height: 50px; - - -webkit-user-select: none; - - ul { - list-style: outside none none; - margin: 0px; - padding: 0px 5px; - - display: inline-block; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - - li { - &.tag { - background-color: #47484b; - border: 1px solid #AAA; - border-radius: 4px; - cursor: default; - display: inline-block; - margin-right: 5px; - margin-top: 5px; - padding: 0px 5px; - - .remove { - color: #699bb1; - cursor: pointer; - display: inline-block; - font-weight: bold; - margin-right: 2px; - } - } - - &.input { - display: inline-block; - - input { - width: 6em; - background: none repeat scroll 0% 0% transparent; - border: medium none; - outline: 0px none; - - font-size: 100%; - margin-top: 5px; - } - } - } - } -} Deleted: wit/css/time.less =================================================================== --- wit/css/time.less 2015-04-22 16:58:01 UTC (rev 1245) +++ wit/css/time.less 2015-04-22 16:59:20 UTC (rev 1246) @@ -1,15 +0,0 @@ - -@font-face { - font-family: Digital; - src: url(../font/DIGITALDREAM.ttf); -} - -#time { - font-family: Digital; - font-size: 48px; - padding: 15px; - text-align: center; - - color: #00aad8; - border-bottom: 2px #00aad8 solid; -}

1 0

r1245 - in wit: . css font js js/components
by jruchaud＠users.nuiton.org 22 Apr '15

22 Apr '15

Author: jruchaud Date: 2015-04-22 16:58:01 +0000 (Wed, 22 Apr 2015) New Revision: 1245 Url: http://forge.nuiton.org/projects/sandbox/repository/revisions/1245 Log: Begin to do the style on bootstrap for the moment Added: wit/css/time.less wit/font/ wit/font/DIGITALDREAM.ttf wit/font/DIGITALDREAMFAT.ttf wit/font/DIGITALDREAMFATNARROW.ttf wit/font/DIGITALDREAMFATSKEW.ttf wit/font/DIGITALDREAMFATSKEWNARROW.ttf wit/font/DIGITALDREAMNARROW.ttf wit/font/DIGITALDREAMSKEW.ttf wit/font/DIGITALDREAMSKEWNARROW.ttf wit/test.html Modified: wit/css/style.less wit/index.html wit/js/App.js wit/js/TimerService.js wit/js/components/ActionsBar.js wit/js/components/Tags.js wit/js/components/Time.js wit/package.json Modified: wit/css/style.less =================================================================== --- wit/css/style.less 2015-04-22 11:39:30 UTC (rev 1244) +++ wit/css/style.less 2015-04-22 16:58:01 UTC (rev 1245) @@ -1,16 +1,13 @@ -* { - box-sizing: border-box; - margin: 0; - padding: 0; +@font-face { + font-family: Digital; + src: url(../font/DIGITALDREAM.ttf); } -body { - width: 100%; - height: 100%; - background-color: #f8f8f8; - color: #f3f3f3; +.digit { + font-family: Digital; + text-align: center; } -table { - color: black; +.nav > li > a { + padding: 15px; } Added: wit/css/time.less =================================================================== --- wit/css/time.less (rev 0) +++ wit/css/time.less 2015-04-22 16:58:01 UTC (rev 1245) @@ -0,0 +1,15 @@ + +@font-face { + font-family: Digital; + src: url(../font/DIGITALDREAM.ttf); +} + +#time { + font-family: Digital; + font-size: 48px; + padding: 15px; + text-align: center; + + color: #00aad8; + border-bottom: 2px #00aad8 solid; +} Added: wit/font/DIGITALDREAM.ttf =================================================================== (Binary files differ) Property changes on: wit/font/DIGITALDREAM.ttf ___________________________________________________________________ Added: svn:executable + * Added: svn:mime-type + application/octet-stream Added: wit/font/DIGITALDREAMFAT.ttf =================================================================== (Binary files differ) Property changes on: wit/font/DIGITALDREAMFAT.ttf ___________________________________________________________________ Added: svn:executable + * Added: svn:mime-type + application/octet-stream Added: wit/font/DIGITALDREAMFATNARROW.ttf =================================================================== (Binary files differ) Property changes on: wit/font/DIGITALDREAMFATNARROW.ttf ___________________________________________________________________ Added: svn:mime-type + application/octet-stream Added: svn:executable + * Added: wit/font/DIGITALDREAMFATSKEW.ttf =================================================================== (Binary files differ) Property changes on: wit/font/DIGITALDREAMFATSKEW.ttf ___________________________________________________________________ Added: svn:mime-type + application/octet-stream Added: svn:executable + * Added: wit/font/DIGITALDREAMFATSKEWNARROW.ttf =================================================================== (Binary files differ) Property changes on: wit/font/DIGITALDREAMFATSKEWNARROW.ttf ___________________________________________________________________ Added: svn:executable + * Added: svn:mime-type + application/octet-stream Added: wit/font/DIGITALDREAMNARROW.ttf =================================================================== (Binary files differ) Property changes on: wit/font/DIGITALDREAMNARROW.ttf ___________________________________________________________________ Added: svn:executable + * Added: svn:mime-type + application/octet-stream Added: wit/font/DIGITALDREAMSKEW.ttf =================================================================== (Binary files differ) Property changes on: wit/font/DIGITALDREAMSKEW.ttf ___________________________________________________________________ Added: svn:mime-type + application/octet-stream Added: svn:executable + * Added: wit/font/DIGITALDREAMSKEWNARROW.ttf =================================================================== (Binary files differ) Property changes on: wit/font/DIGITALDREAMSKEWNARROW.ttf ___________________________________________________________________ Added: svn:executable + * Added: svn:mime-type + application/octet-stream Modified: wit/index.html =================================================================== --- wit/index.html 2015-04-22 11:39:30 UTC (rev 1244) +++ wit/index.html 2015-04-22 16:58:01 UTC (rev 1245) @@ -18,14 +18,30 @@ <script type="text/jsx" src="js/main.js"></script>  + <link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.min.css"> <link rel="stylesheet/less" type="text/css" href="css/style.less" /> - <link rel="stylesheet/less" type="text/css" href="css/select.less" /> - <link rel="stylesheet/less" type="text/css" href="css/actions.less" /> <script type="text/javascript" src="node_modules/less/dist/less.min.js"></script> </head> <body> - <div id="content"></div> + <div class="container-fluid"> + + <div class="navbar navbar-default"> + <div class="navbar-header pull-left"> + <a class="navbar-brand" href="#">WIT</a> + </div> + + <div class="nav navbar-header pull-right"> + <ul class="nav pull-right"> + <li class="pull-left"><a href="#">Timer</a></li> + <li class="pull-left"><a href="#">Rapport</a></li> + <li class="pull-left"><a href="#">Tags</a></li> + <li class="pull-left"><a href="#">Options</a></li> + </ul> + </div> + </div> + <div id="content"></div> + </div> </body> </html> Modified: wit/js/App.js =================================================================== --- wit/js/App.js 2015-04-22 11:39:30 UTC (rev 1244) +++ wit/js/App.js 2015-04-22 16:58:01 UTC (rev 1245) @@ -4,11 +4,10 @@ render: function() { return ( <div> - <Tags /> <Time /> + <Tags /> <ActionsBar /> </div> ); } }); - Modified: wit/js/TimerService.js =================================================================== --- wit/js/TimerService.js 2015-04-22 11:39:30 UTC (rev 1244) +++ wit/js/TimerService.js 2015-04-22 16:58:01 UTC (rev 1245) @@ -80,7 +80,7 @@ if (time) { timeChangeTimer = setTimeout(timeChange.bind(), 1000); - updateUserIdleTime(); + //updateUserIdleTime(); } }; Modified: wit/js/components/ActionsBar.js =================================================================== --- wit/js/components/ActionsBar.js 2015-04-22 11:39:30 UTC (rev 1244) +++ wit/js/components/ActionsBar.js 2015-04-22 16:58:01 UTC (rev 1245) @@ -21,17 +21,22 @@ render: function() { return ( - <div className="actions"> - <div id="play" onClick={this.onPlay}> - <div className="icon"></div> + <div className="text-center"> + <div className="btn-group" role="group"> + <button type="button" className="btn btn-primary btn-lg"> + <span className="glyphicon glyphicon-backward" aria-hidden="true"></span> + </button> + <button type="button" className="btn btn-primary btn-lg" onClick={this.onPlay}> + <span className="glyphicon glyphicon-play" aria-hidden="true"></span> + </button> + <button type="button" className="btn btn-primary btn-lg" onClick={this.onStop}> + <span className="glyphicon glyphicon-stop" aria-hidden="true"></span> + </button> + <button type="button" className="btn btn-primary btn-lg"> + <span className="glyphicon glyphicon-forward" aria-hidden="true"></span> + </button> </div> - <div id="stop" onClick={this.onStop}> - <div className="icon"></div> - </div> - <div id="rapport" onClick={this.onRapport}> - <div className="icon">R</div> - </div> - </div> + </div> ); } }); Modified: wit/js/components/Tags.js =================================================================== --- wit/js/components/Tags.js 2015-04-22 11:39:30 UTC (rev 1244) +++ wit/js/components/Tags.js 2015-04-22 16:58:01 UTC (rev 1245) @@ -33,17 +33,21 @@ var items = this.state.getTags().map(function(item, index) { return ( - <li className="tag"><span className="remove" onClick={self.onRemove} data-index={index}>x</span>{item}</li> + <li className="list-group-item"> + <button type="button" className="close" aria-label="Close" onClick={self.onRemove} data-index={index}> + <span aria-hidden="true">×</span> + </button> + {item} + </li> ); }); return ( - <div className="selection"> - <ul id="tags"> - {items} - <li className="input"><input id="inputTag" onKeyDown={this.onKey} tabIndex="-1" autoComplete="off" autoCorrect="off" autoCapitalize="off" spellCheck="false" role="textbox" type="text"></input></li> - </ul> - </div> + <ul className="list-group"> + {items} + </ul> ); } }); + +// <li className="input"><input id="inputTag" onKeyDown={this.onKey} tabIndex="-1" autoComplete="off" autoCorrect="off" autoCapitalize="off" spellCheck="false" role="textbox" type="text"></input></li> Modified: wit/js/components/Time.js =================================================================== --- wit/js/components/Time.js 2015-04-22 11:39:30 UTC (rev 1244) +++ wit/js/components/Time.js 2015-04-22 16:58:01 UTC (rev 1245) @@ -11,23 +11,11 @@ timer.subscribeIdle(this.forceUpdate.bind(this)); }, - keepTime: function() { - timer.keepTime(); - this.forceUpdate(); - }, - - keepIdle: function() { - timer.keepIdle(); - this.forceUpdate(); - }, - render: function() { return ( - <div id="time"> - <span onClick={this.keepTime}>{this.state.getTime() ? "time: " + this.state.getTime() : "Not started"}</span> -   - <span onClick={this.keepIdle}>{this.state.getIdle() ? "idle: " + this.state.getIdle() : ""}</span> - </div> + <h1 className="digit"> + {this.state.getTime() ? this.state.getTime() : "00:00:00"} + </h1> ); } }); Modified: wit/package.json =================================================================== --- wit/package.json 2015-04-22 11:39:30 UTC (rev 1244) +++ wit/package.json 2015-04-22 16:58:01 UTC (rev 1245) @@ -4,12 +4,13 @@ "version": "1.0.0", "window": { "width": 480, - "height": 180, + "height": 400, "toolbar": true, "frame": true, "transparent": false }, "dependencies": { + "bootstrap": "^3.3.4", "less": "^2.5.0", "moment": "^2.10.2", "nedb": "^1.1.2", Added: wit/test.html =================================================================== --- wit/test.html (rev 0) +++ wit/test.html 2015-04-22 16:58:01 UTC (rev 1245) @@ -0,0 +1,69 @@ +<html> + <head> + <link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.min.css"> + <style> + @font-face { + font-family: Digital; + src: url(../font/DIGITALDREAM.ttf); + } + + .digit { + font-family: Digital; + text-align: center; + } + + .nav > li > a { + padding: 15px; + } + + </style> + </head> + <body> + <div class="container-fluid"> + + <div class="navbar navbar-default"> + <div class="navbar-header pull-left"> + <a class="navbar-brand" href="#">WIT</a> + </div> + + <div class="nav navbar-header pull-right"> + <ul class="nav pull-right"> + <li class="pull-left"><a href="#">Timer</a></li> + <li class="pull-left"><a href="#">Rapport</a></li> + <li class="pull-left"><a href="#">Tags</a></li> + <li class="pull-left"><a href="#">Options</a></li> + </ul> + </div> + </div> + + <h1 class="digit">00:00:00</h1> + + <ul class="list-group"> + <li class="list-group-item">Cras justo odio</li> + <li class="list-group-item">Dapibus ac facilisis in</li> + <li class="list-group-item">Morbi leo risus</li> + <li class="list-group-item">Porta ac consectetur ac</li> + <li class="list-group-item">Vestibulum at eros</li> + </ul> + + <div class="text-center"> + <div class="btn-group" role="group"> + <button type="button" class="btn btn-primary btn-lg"> + <span class="glyphicon glyphicon-backward" aria-hidden="true"></span> + </button> + <button type="button" class="btn btn-primary btn-lg"> + <span class="glyphicon glyphicon-play" aria-hidden="true"></span> + </button> + <button type="button" class="btn btn-primary btn-lg"> + <span class="glyphicon glyphicon-stop" aria-hidden="true"></span> + </button> + <button type="button" class="btn btn-primary btn-lg"> + <span class="glyphicon glyphicon-forward" aria-hidden="true"></span> + </button> + </div> + </div> + + </div> + + </body> +</html> \ No newline at end of file

1 0