Added button for enabling disabling logging.

This commit is contained in:
Mario Basic
2015-06-07 23:42:14 +02:00
parent 8c300f6e4e
commit 2d3d888125
9 changed files with 639 additions and 257 deletions

View File

@@ -2,6 +2,7 @@ import UrlHelper from './UrlHelper.js';
import $ from 'jquery';
import currentTimestamp from './helpers/currentTimestamp.js';
import changeExtensionIcon from './helpers/changeExtensionIcon.js';
import devtools from './libs/devtools-detect.js';
class WakaTime {
@@ -49,20 +50,26 @@ class WakaTime {
if (data !== false) {
// User is logged in.
// Change extension icon to default color.
changeExtensionIcon();
chrome.storage.sync.get({
loggingEnabled: false
}, (items) => {
if (items.loggingEnabled === true) {
changeExtensionIcon();
chrome.idle.queryState(this.detectionIntervalInSeconds, (newState) => {
chrome.idle.queryState(this.detectionIntervalInSeconds, (newState) => {
if (newState === 'active') {
// Get current tab URL.
chrome.tabs.query({active: true}, (tabs) => {
this.sendHeartbeat(tabs[0].url);
if (newState === 'active') {
// Get current tab URL.
chrome.tabs.query({active: true}, (tabs) => {
this.sendHeartbeat(tabs[0].url);
});
}
});
}
else {
changeExtensionIcon('red');
}
});
}
else {
@@ -120,6 +127,9 @@ class WakaTime {
var payload = null;
// TODO: Detect if devTools are open
console.log(devtools.open);
this._getLoggingType().done((loggingType) => {
// Get only the domain from the entity.

View File

@@ -44,6 +44,38 @@ class MainList extends React.Component {
);
};
// If logging is enabled, display that info to user
var loggingStatus = () => {
if(this.props.loggingEnabled === true && this.props.loggedIn === true)
{
return (
<div className="panel panel-default">
<div className="panel-body">
<div className="row">
<div className="col-xs-12">
<a href="#" onClick={this.props.disableLogging} className="btn btn-danger btn-lg btn-block">Disable logging</a>
</div>
</div>
</div>
</div>
);
}
else
{
return (
<div className="panel panel-default">
<div className="panel-body">
<div className="row">
<div className="col-xs-12">
<a href="#" onClick={this.props.enableLogging} className="btn btn-success btn-lg btn-block">Enable logging</a>
</div>
</div>
</div>
</div>
);
}
};
var signedInAs = () => {
if (this.props.loggedIn === true) {
return (
@@ -54,12 +86,13 @@ class MainList extends React.Component {
<img className="img-circle" width="48" height="48" src={this.props.user.photo} />
</div>
<div className="col-xs-10">
Signed in as
Signed in as&nbsp;
<b>{this.props.user.full_name}</b>
<br />
{this.props.user.email}
</div>
</div>
</div>
</div>
);
@@ -71,6 +104,8 @@ class MainList extends React.Component {
{signedInAs()}
{loggingStatus()}
<div className="list-group">
<a href="#" className="list-group-item" onClick={this._openOptionsPage}>
<i className="fa fa-fw fa-cogs"></i>

View File

@@ -14,20 +14,11 @@ class WakaTime extends React.Component {
email: null,
photo: null
},
loggedIn: false
loggedIn: false,
loggingEnabled: false
};
componentDidMount() {
chrome.storage.sync.get({
theme: 'light'
}, function (items) {
if (items.theme == 'light') {
changeExtensionIcon();
}
else {
changeExtensionIcon('white');
}
});
var wakatime = new WakaTimeOriginal;
@@ -35,6 +26,18 @@ class WakaTime extends React.Component {
if (data !== false) {
chrome.storage.sync.get({
loggingEnabled: false
}, (items) => {
this.setState({loggingEnabled: items.loggingEnabled});
if (items.loggingEnabled === true) {
changeExtensionIcon();
}
else {
changeExtensionIcon('red');
}
});
this.setState({
user: {
full_name: data.full_name,
@@ -43,8 +46,6 @@ class WakaTime extends React.Component {
},
loggedIn: true
});
changeExtensionIcon();
}
else {
changeExtensionIcon('red');
@@ -84,7 +85,8 @@ class WakaTime extends React.Component {
email: null,
photo: null
},
loggedIn: false
loggedIn: false,
loggingEnabled: false
});
changeExtensionIcon('red');
@@ -92,6 +94,30 @@ class WakaTime extends React.Component {
});
}
_disableLogging() {
this.setState({
loggingEnabled: false
});
changeExtensionIcon('red');
chrome.storage.sync.set({
loggingEnabled: false
});
}
_enableLogging() {
this.setState({
loggingEnabled: true
});
changeExtensionIcon();
chrome.storage.sync.set({
loggingEnabled: true
});
}
render() {
return (
<div>
@@ -99,7 +125,13 @@ class WakaTime extends React.Component {
<div className="container">
<div className="row">
<div className="col-md-12">
<MainList user={this.state.user} logoutUser={this._logoutUser.bind(this)} loggedIn={this.state.loggedIn} />
<MainList
disableLogging={this._disableLogging.bind(this)}
enableLogging={this._enableLogging.bind(this)}
loggingEnabled={this.state.loggingEnabled}
user={this.state.user}
logoutUser={this._logoutUser.bind(this)}
loggedIn={this.state.loggedIn} />
</div>
</div>
</div>

View File

@@ -4,13 +4,37 @@
*/
export default function changeExtensionIcon(color = '') {
var path = null;
if (color !== '') {
color = '-' + color;
path = './graphics/wakatime-logo-48' + color + '.png';
chrome.browserAction.setIcon({
path: path
});
}
var path = './graphics/wakatime-logo-48' + color + '.png';
if (color === '') {
chrome.storage.sync.get({
theme: 'light'
}, function (items) {
if (items.theme == 'light') {
path = './graphics/wakatime-logo-48.png';
chrome.browserAction.setIcon({
path: path
});
}
else {
path = './graphics/wakatime-logo-48-white.png';
chrome.browserAction.setIcon({
path: path
});
}
});
}
chrome.browserAction.setIcon({
path: path
});
}

View File

@@ -0,0 +1,40 @@
/*!
devtools-detect
Detect if DevTools is open
https://github.com/sindresorhus/devtools-detect
by Sindre Sorhus
MIT License
*/
(function () {
'use strict';
var devtools = {open: false};
var threshold = 160;
var emitEvent = function (state) {
window.dispatchEvent(new CustomEvent('devtoolschange', {
detail: {
open: state
}
}));
};
setInterval(function () {
if ((window.Firebug && window.Firebug.chrome && window.Firebug.chrome.isInitialized) || window.outerWidth - window.innerWidth > threshold ||
window.outerHeight - window.innerHeight > threshold) {
if (!devtools.open) {
emitEvent(true);
}
devtools.open = true;
} else {
if (devtools.open) {
emitEvent(false);
}
devtools.open = false;
}
}, 500);
if (typeof module !== 'undefined' && module.exports) {
module.exports = devtools;
} else {
window.devtools = devtools;
}
})();

View File

@@ -1,14 +1,15 @@
{
"name": "WakaTime",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
],
"dependencies": {
"font-awesome": "~4.3.0",
"bootstrap": "~3.3.4"
}
"name": "WakaTime",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
],
"dependencies": {
"font-awesome": "~4.3.0",
"bootstrap": "~3.3.4",
"devtools-detect": "~1.0.0"
}
}

View File

@@ -18,6 +18,7 @@ elixir(function (mix) {
mix.copy('vendor/bower_components/bootstrap/fonts', 'public/fonts');
mix.copy('vendor/bower_components/font-awesome/less', 'assets/less/font-awesome');
mix.copy('vendor/bower_components/font-awesome/fonts', 'public/fonts');
mix.copy('vendor/bower_components/devtools-detect/devtools-detect.js', 'assets/js/libs/devtools-detect.js');
mix.less('app.less');
//mix.browserify('app.js', null, 'assets/js');
mix.browserify('events.js', 'public/js/events.js', 'assets/js');

File diff suppressed because it is too large Load Diff

View File

@@ -129,6 +129,10 @@ var _helpersChangeExtensionIconJs = require('./helpers/changeExtensionIcon.js');
var _helpersChangeExtensionIconJs2 = _interopRequireDefault(_helpersChangeExtensionIconJs);
var _libsDevtoolsDetectJs = require('./libs/devtools-detect.js');
var _libsDevtoolsDetectJs2 = _interopRequireDefault(_libsDevtoolsDetectJs);
var WakaTime = (function () {
function WakaTime() {
_classCallCheck(this, WakaTime);
@@ -183,17 +187,23 @@ var WakaTime = (function () {
if (data !== false) {
// User is logged in.
// Change extension icon to default color.
(0, _helpersChangeExtensionIconJs2['default'])();
chrome.storage.sync.get({
loggingEnabled: false
}, function (items) {
if (items.loggingEnabled === true) {
(0, _helpersChangeExtensionIconJs2['default'])();
chrome.idle.queryState(_this2.detectionIntervalInSeconds, function (newState) {
chrome.idle.queryState(_this2.detectionIntervalInSeconds, function (newState) {
if (newState === 'active') {
// Get current tab URL.
chrome.tabs.query({ active: true }, function (tabs) {
_this2.sendHeartbeat(tabs[0].url);
if (newState === 'active') {
// Get current tab URL.
chrome.tabs.query({ active: true }, function (tabs) {
_this2.sendHeartbeat(tabs[0].url);
});
}
});
} else {
(0, _helpersChangeExtensionIconJs2['default'])('red');
}
});
} else {
@@ -260,6 +270,9 @@ var WakaTime = (function () {
var payload = null;
// TODO: Detect if devTools are open
console.log(_libsDevtoolsDetectJs2['default'].open);
this._getLoggingType().done(function (loggingType) {
// Get only the domain from the entity.
@@ -332,7 +345,7 @@ module.exports = exports['default'];
//default
},{"./UrlHelper.js":2,"./helpers/changeExtensionIcon.js":4,"./helpers/currentTimestamp.js":5,"jquery":6}],4:[function(require,module,exports){
},{"./UrlHelper.js":2,"./helpers/changeExtensionIcon.js":4,"./helpers/currentTimestamp.js":5,"./libs/devtools-detect.js":6,"jquery":7}],4:[function(require,module,exports){
/**
* It changes the extension icon color.
* Supported values are: 'red', 'white' and ''.
@@ -347,15 +360,37 @@ exports['default'] = changeExtensionIcon;
function changeExtensionIcon() {
var color = arguments[0] === undefined ? '' : arguments[0];
var path = null;
if (color !== '') {
color = '-' + color;
path = './graphics/wakatime-logo-48' + color + '.png';
chrome.browserAction.setIcon({
path: path
});
}
var path = './graphics/wakatime-logo-48' + color + '.png';
if (color === '') {
chrome.storage.sync.get({
theme: 'light'
}, function (items) {
if (items.theme == 'light') {
path = './graphics/wakatime-logo-48.png';
chrome.browserAction.setIcon({
path: path
});
chrome.browserAction.setIcon({
path: path
});
} else {
path = './graphics/wakatime-logo-48-white.png';
chrome.browserAction.setIcon({
path: path
});
}
});
}
}
module.exports = exports['default'];
@@ -377,6 +412,49 @@ exports["default"] = function () {
module.exports = exports["default"];
},{}],6:[function(require,module,exports){
/*!
devtools-detect
Detect if DevTools is open
https://github.com/sindresorhus/devtools-detect
by Sindre Sorhus
MIT License
*/
'use strict';
(function () {
'use strict';
var devtools = { open: false };
var threshold = 160;
var emitEvent = function emitEvent(state) {
window.dispatchEvent(new CustomEvent('devtoolschange', {
detail: {
open: state
}
}));
};
setInterval(function () {
if (window.Firebug && window.Firebug.chrome && window.Firebug.chrome.isInitialized || window.outerWidth - window.innerWidth > threshold || window.outerHeight - window.innerHeight > threshold) {
if (!devtools.open) {
emitEvent(true);
}
devtools.open = true;
} else {
if (devtools.open) {
emitEvent(false);
}
devtools.open = false;
}
}, 500);
if (typeof module !== 'undefined' && module.exports) {
module.exports = devtools;
} else {
window.devtools = devtools;
}
})();
},{}],7:[function(require,module,exports){
/*!
* jQuery JavaScript Library v2.1.4
* http://jquery.com/