Author: jruchaud Date: 2015-04-17 13:13:38 +0000 (Fri, 17 Apr 2015) New Revision: 1219 Url: http://forge.nuiton.org/projects/sandbox/repository/revisions/1219 Log: Plug reactjs and less Added: wit/bower.json wit/css/actions.less wit/css/select.less wit/css/style.less wit/js/App.js wit/js/TimerService.js wit/js/components/ wit/js/components/ActionsBar.js wit/js/components/Tags.js wit/js/components/Time.js Removed: wit/css/actions.css wit/css/select.css wit/css/style.css wit/js/main.js Modified: wit/ wit/index.html wit/js/database.js wit/js/gui.js Property changes on: wit ___________________________________________________________________ Modified: svn:ignore - cache webkitbuilds node_modules nbproject + bower_components cache node_modules webkitbuilds nbproject Added: wit/bower.json =================================================================== --- wit/bower.json (rev 0) +++ wit/bower.json 2015-04-17 13:13:38 UTC (rev 1219) @@ -0,0 +1,7 @@ +{ + "name": "wit", + "dependencies": { + "less": "~2.5.0", + "react": "~0.13.1" + } +} Deleted: wit/css/actions.css =================================================================== --- wit/css/actions.css 2015-04-17 08:37:03 UTC (rev 1218) +++ wit/css/actions.css 2015-04-17 13:13:38 UTC (rev 1219) @@ -1,50 +0,0 @@ -.actions { - display: flex; - justify-content: center; - - background-color: #47484b; - position: absolute; - bottom: 0; - width: 100%; - border-top: 2px #ccc solid; -} - -.actions>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; -} \ No newline at end of file Copied: wit/css/actions.less (from rev 1218, wit/css/actions.css) =================================================================== --- wit/css/actions.less (rev 0) +++ wit/css/actions.less 2015-04-17 13:13:38 UTC (rev 1219) @@ -0,0 +1,53 @@ +.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.css =================================================================== --- wit/css/select.css 2015-04-17 08:37:03 UTC (rev 1218) +++ wit/css/select.css 2015-04-17 13:13:38 UTC (rev 1219) @@ -1,55 +0,0 @@ -.selection { - background-color: #f8f8f8; - border-radius: 4px; - cursor: text; - - overflow-x: scroll; - overflow-y: hidden; - height: 50px; - - -webkit-user-select: none; -} - -.selection ul { - list-style: outside none none; - margin: 0px; - padding: 0px 5px; - - display: inline-block; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.selection 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; -} - -.selection .remove { - color: #699bb1; - cursor: pointer; - display: inline-block; - font-weight: bold; - margin-right: 2px; -} - -.selection li.input { - display: inline-block; -} - -.selection li input { - width: 6em; - background: none repeat scroll 0% 0% transparent; - border: medium none; - outline: 0px none; - - font-size: 100%; - margin-top: 5px; -} \ No newline at end of file Copied: wit/css/select.less (from rev 1218, wit/css/select.css) =================================================================== --- wit/css/select.less (rev 0) +++ wit/css/select.less 2015-04-17 13:13:38 UTC (rev 1219) @@ -0,0 +1,57 @@ +.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/style.css =================================================================== --- wit/css/style.css 2015-04-17 08:37:03 UTC (rev 1218) +++ wit/css/style.css 2015-04-17 13:13:38 UTC (rev 1219) @@ -1,12 +0,0 @@ -* { - box-sizing: border-box; - margin: 0; - padding: 0; -} - -body { - width: 100%; - height: 100%; - background-color: #f8f8f8; - color: #f3f3f3; -} Added: wit/css/style.less =================================================================== --- wit/css/style.less (rev 0) +++ wit/css/style.less 2015-04-17 13:13:38 UTC (rev 1219) @@ -0,0 +1,12 @@ +* { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +body { + width: 100%; + height: 100%; + background-color: #f8f8f8; + color: #f3f3f3; +} Modified: wit/index.html =================================================================== --- wit/index.html 2015-04-17 08:37:03 UTC (rev 1218) +++ wit/index.html 2015-04-17 13:13:38 UTC (rev 1219) @@ -1,36 +1,27 @@ -<!DOCTYPE html> <html> <head> <title>WIT</title> - <link type="text/css" href="css/style.css" rel="stylesheet"/> - <link type="text/css" href="css/select.css" rel="stylesheet"/> - <link type="text/css" href="css/actions.css" rel="stylesheet"/> - </head> - <body> - <div class="selection"> - <ul id="tags"> - <li class="tag"><span class="remove">x</span>wit</li> - <li class="tag"><span class="remove">x</span>js</li> - <li class="tag"><span class="remove">x</span>dev</li> - <li class="input"><input id="inputTag" tabindex="-1" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" role="textbox" type="text"></input></li> - </ul> - </div> - <div class="actions"> - <div id="play"> - <div class="icon"></div> - </div> - <div id="stop"> - <div class="icon"></div> - </div> - <div id="rapport"> - <div class="icon">R</div> - </div> - </div> - - <div id="time"></div> - - <script type="application/javascript" src="js/main.js"></script> <script type="application/javascript" src="js/gui.js"></script> + + <!-- For React --> + <script type="text/javascript" src="bower_components/react/react-with-addons.js"></script> + <script type="text/javascript" src="bower_components/react/JSXTransformer.js"></script> + + <script type="text/jsx" src="js/components/Tags.js"></script> + <script type="text/jsx" src="js/components/Time.js"></script> + <script type="text/jsx" src="js/components/ActionsBar.js"></script> + <script type="text/jsx" src="js/App.js"></script> + + <!-- For Less --> + <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="bower_components/less/dist/less.min.js"></script> + + </head> + <body> + <div id="content"></div> </body> </html> Added: wit/js/App.js =================================================================== --- wit/js/App.js (rev 0) +++ wit/js/App.js 2015-04-17 13:13:38 UTC (rev 1219) @@ -0,0 +1,21 @@ +/** @jsx React.DOM */ + +var timer = require('./js/TimerService.js'); + +var App = React.createClass({ + + render: function() { + return ( + <div> + <Tags /> + <Time /> + <ActionsBar /> + </div> + ); + } +}); + +React.render( + <App/>, + document.getElementById('content') +); Added: wit/js/TimerService.js =================================================================== --- wit/js/TimerService.js (rev 0) +++ wit/js/TimerService.js 2015-04-17 13:13:38 UTC (rev 1219) @@ -0,0 +1,55 @@ +var moment = require('moment'); +var db = require("./database.js"); + +var events = require('events'); +var eventEmitter = new events.EventEmitter(); + +var tags = ["wit", "js", "dev"]; +var time = null; + +exports.start = function() { + time = new Date(); + timeChange(); +}; + +exports.stop = function() { + if (time) { + db.insertLog(tags, time, new Date()); + time = null; + timeChange(); + } +}; + +exports.getTime = function() { + if (time) { + var diff = moment(moment().diff(time)).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); + } +}; + +exports.subscribeTimeChanged = function(callback) { + eventEmitter.on('onTimeChanged', callback); +}; Added: wit/js/components/ActionsBar.js =================================================================== --- wit/js/components/ActionsBar.js (rev 0) +++ wit/js/components/ActionsBar.js 2015-04-17 13:13:38 UTC (rev 1219) @@ -0,0 +1,37 @@ +/** @jsx React.DOM */ + +var ActionsBar = React.createClass({ + + onPlay: function() { + timer.start(); + }, + + onStop: function() { + timer.stop(); + }, + + onRapport: function(e) { + var gui = require('nw.gui'); + var new_win = gui.Window.open('rapport.html', { + position: 'center', + toolbar: true + }); + //new_win.maximize(); + }, + + render: function() { + return ( + <div className="actions"> + <div id="play" onClick={this.onPlay}> + <div className="icon"></div> + </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> + ); + } +}); Added: wit/js/components/Tags.js =================================================================== --- wit/js/components/Tags.js (rev 0) +++ wit/js/components/Tags.js 2015-04-17 13:13:38 UTC (rev 1219) @@ -0,0 +1,49 @@ +/** @jsx React.DOM */ + +var Tags = React.createClass({ + + getInitialState : function() { + return timer; + }, + + onKey: function(e) { + var target = e.target; + var value = target.value; + + if (e.keyCode == 13 && value != "") { // On enter + target.value = ""; + + timer.addTag(value); + timer.stop(); + this.forceUpdate(); + } + }, + + onRemove: function(e) { + var target = e.target; + var index = target.dataset.index; + + timer.removeTag(index); + timer.stop(); + this.forceUpdate(); + }, + + render: function() { + var self = this; + + 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> + ); + }); + + 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> + ); + } +}); Added: wit/js/components/Time.js =================================================================== --- wit/js/components/Time.js (rev 0) +++ wit/js/components/Time.js 2015-04-17 13:13:38 UTC (rev 1219) @@ -0,0 +1,18 @@ +/** @jsx React.DOM */ + +var Time = React.createClass({ + + getInitialState: function() { + return timer; + }, + + componentDidMount: function() { + timer.subscribeTimeChanged(this.forceUpdate.bind(this)); + }, + + render: function() { + return ( + <div id="time">{this.state.getTime() || "Not started"}</div> + ); + } +}); Modified: wit/js/database.js =================================================================== --- wit/js/database.js 2015-04-17 08:37:03 UTC (rev 1218) +++ wit/js/database.js 2015-04-17 13:13:38 UTC (rev 1219) @@ -15,7 +15,7 @@ } }); }); -}, +}; exports.searchLogs = function (tags, startDate, endDate) { var query = {}; @@ -33,4 +33,4 @@ } }); }); -} +}; Modified: wit/js/gui.js =================================================================== --- wit/js/gui.js 2015-04-17 08:37:03 UTC (rev 1218) +++ wit/js/gui.js 2015-04-17 13:13:38 UTC (rev 1219) @@ -28,3 +28,16 @@ }); }); +var x11 = require('x11'); + +var getUserIdleTime = 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"); + }); + }); + X.on('error', console.error); + }); +}; Deleted: wit/js/main.js =================================================================== --- wit/js/main.js 2015-04-17 08:37:03 UTC (rev 1218) +++ wit/js/main.js 2015-04-17 13:13:38 UTC (rev 1219) @@ -1,91 +0,0 @@ -var moment = require('moment'); -var db = require("./js/database.js"); -var gui = require('nw.gui'); -var x11 = require('x11'); - -var tagsNode = document.getElementById("tags"); -var inputTagNode = document.getElementById("inputTag"); -var playNode = document.getElementById("play"); -var stopNode = document.getElementById("stop"); -var timeNode = document.getElementById("time"); -var rapportNode = document.getElementById("rapport"); - -var templateTag = "<li class=\"tag\"><span class=\"remove\">x</span>{{value}}</li>"; - -inputTagNode.onkeydown = function(e) { - if (e.keyCode == 13 && this.value != "") { // On enter - inputTagNode.parentNode.insertAdjacentHTML("beforebegin", templateTag.replace("{{value}}", this.value)); - this.value = ""; - - stopTime(); - } -} - -tagsNode.onclick = function(e) { - if (e.target.classList.contains("remove")) { - tagsNode.removeChild(e.target.parentNode); - stopTime(); - - } else { - inputTagNode.focus(); - } -} - -var time = null; - -playNode.onclick = function(e) { - time = new Date(); -} - -stopNode.onclick = function(e) { - stopTime(); -} - -var stopTime = function() { - if (!time) { - return; - } - - var tags = []; - - var children = tagsNode.children; - for (var i = 0, l = children.length - 1; i < l; i ++) { // -1 without input - var tag = children[i].childNodes[1].nodeValue; - tags.push(tag); - } - - db.insertLog(tags, time, new Date()); - - time = null; -} - -var getUserIdleTime = 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"); - }); - }); - X.on('error', console.error); - }); -}; - -var updateTime = function() { - if (time) { - var diff = moment(moment().diff(time)).utcOffset(0); - timeNode.textContent = diff.format("HH:mm:ss"); - } else { - timeNode.textContent = "Not started"; - } - setTimeout(updateTime.bind(), 1000); -} -updateTime(); - -rapportNode.onclick = function(e) { - var new_win = gui.Window.open('rapport.html', { - position: 'center', - toolbar: true - }); - //new_win.maximize(); -}