Added total time logged today. Changed UI.

This commit is contained in:
Mario Basic
2015-06-14 12:33:21 +02:00
parent fda748019c
commit 350110742e
13 changed files with 6626 additions and 283 deletions

View File

@@ -22,14 +22,6 @@ class MainList extends React.Component {
if (this.props.loggedIn === true) {
return (
<div>
<a target="_blank" href="https://wakatime.com/settings/rules" className="list-group-item">
<i className="fa fa-fw fa-filter"></i>
Custom Rules
</a>
<a target="_blank" href="https://wakatime.com/dashboard" className="list-group-item">
<i className="fa fa-fw fa-tachometer"></i>
Dashboard
</a>
<a href="#" className="list-group-item" onClick={this.props.logoutUser}>
<i className="fa fa-fw fa-sign-out"></i>
Logout
@@ -51,13 +43,11 @@ class MainList extends React.Component {
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 className="row">
<div className="col-xs-12">
<p>
<a href="#" onClick={this.props.disableLogging} className="btn btn-danger btn-block">Disable logging</a>
</p>
</div>
</div>
);
@@ -65,36 +55,26 @@ class MainList extends React.Component {
else if(this.props.loggingEnabled === false && 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.enableLogging} className="btn btn-success btn-lg btn-block">Enable logging</a>
</div>
</div>
<div className="row">
<div className="col-xs-12">
<p>
<a href="#" onClick={this.props.enableLogging} className="btn btn-success btn-block">Enable logging</a>
</p>
</div>
</div>
);
}
};
var signedInAs = () => {
var totalTimeLoggedToday = () => {
if (this.props.loggedIn === true) {
return (
<div className="panel panel-default">
<div className="panel-body">
<div className="row">
<div className="col-xs-2">
<img className="img-circle" width="48" height="48" src={this.props.user.photo} />
</div>
<div className="col-xs-10">
Signed in as&nbsp;
<b>{this.props.user.full_name}</b>
<br />
{this.props.user.email}
</div>
</div>
<div className="row">
<div className="col-xs-12">
<blockquote>
<p>{this.props.totalTimeLoggedToday}</p>
<small><cite>TOTAL TIME LOGGED TODAY</cite></small>
</blockquote>
</div>
</div>
);
@@ -104,7 +84,7 @@ class MainList extends React.Component {
return (
<div>
{signedInAs()}
{totalTimeLoggedToday()}
{loggingStatus()}

View File

@@ -5,6 +5,41 @@ var React = require('react');
class Navbar extends React.Component {
render() {
var signedInAs = () => {
if (this.props.loggedIn === true) {
return (
<p class="navbar-text">Signed in as <b>{this.props.user.full_name}</b></p>
);
}
};
var dashboard = () => {
if (this.props.loggedIn === true) {
return (
<li>
<a target="_blank" href="https://wakatime.com/dashboard">
<i className="fa fa-fw fa-tachometer"></i>
Dashboard
</a>
</li>
);
}
};
var customRules = () => {
if (this.props.loggedIn === true) {
return (
<li>
<a target="_blank" href="https://wakatime.com/settings/rules">
<i className="fa fa-fw fa-filter"></i>
Custom Rules
</a>
</li>
);
}
};
return (
<nav className="navbar navbar-default" role="navigation">
<div className="container-fluid">
@@ -19,7 +54,10 @@ class Navbar extends React.Component {
</a>
</div>
<div className="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
{signedInAs()}
<ul className="nav navbar-nav">
{customRules()}
{dashboard()}
<li className="dropdown">
<a href="#" className="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
<i className="fa fa-fw fa-info"></i>

View File

@@ -28,7 +28,8 @@ class WakaTime extends React.Component {
photo: null
},
loggedIn: false,
loggingEnabled: config.loggingEnabled
loggingEnabled: config.loggingEnabled,
totalTimeLoggedToday: 0
};
}
@@ -61,6 +62,13 @@ class WakaTime extends React.Component {
},
loggedIn: true
});
wakatime.getTotalTimeLoggedToday().done((grand_total) => {
console.log(grand_total['text']);
this.setState({
totalTimeLoggedToday: grand_total['text']
})
});
}
else {
changeExtensionState('notSignedIn');
@@ -133,10 +141,13 @@ class WakaTime extends React.Component {
});
}
render() {
return (
<div>
<NavBar />
<NavBar
user={this.state.user}
loggedIn={this.state.loggedIn} />
<div className="container">
<div className="row">
<div className="col-md-12">
@@ -145,6 +156,7 @@ class WakaTime extends React.Component {
enableLogging={this._enableLogging.bind(this)}
loggingEnabled={this.state.loggingEnabled}
user={this.state.user}
totalTimeLoggedToday={this.state.totalTimeLoggedToday}
logoutUser={this._logoutUser.bind(this)}
loggedIn={this.state.loggedIn} />
</div>