Added total time logged today. Changed UI.

README.md

@@ -19,9 +19,11 @@ Installation
 
 ## Screenshots
 
-![SC open](./screenshots/sc_5-logging-green.png)
+![SC open](./screenshots/sc_6-green.png)
 
-![SC open](./screenshots/sc_5-logging-red.png)
+![SC open](./screenshots/sc_6-red.png)
+
+![SC open](./screenshots/sc_6-open.png)
 
 ![Options SC](./screenshots/sc_4-options.png)
 

assets/js/components/MainList.react.js

@@ -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>
+                            <p>
-                                </div>
+                                <a href="#" onClick={this.props.disableLogging} className="btn btn-danger btn-block">Disable logging</a>
-                            </div>
+                            </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>
+                            <p>
-                                </div>
+                                <a href="#" onClick={this.props.enableLogging} className="btn btn-success btn-block">Enable logging</a>
-                            </div>
+                            </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">
+                        <div className="col-xs-12">
-                                    <img className="img-circle" width="48" height="48" src={this.props.user.photo} />
+                            <blockquote>
-                                </div>
+                                <p>{this.props.totalTimeLoggedToday}</p>
-                                <div className="col-xs-10">
+                                <small><cite>TOTAL TIME LOGGED TODAY</cite></small>
-                                    Signed in as&nbsp;
+                            </blockquote>
-                                    <b>{this.props.user.full_name}</b>
-                                    <br />
-                                    {this.props.user.email}
-                                </div>
-                            </div>
-
                         </div>
                     </div>
                 );
@@ -104,7 +84,7 @@ class MainList extends React.Component {
         return (
             <div>
 
-                {signedInAs()}
+                {totalTimeLoggedToday()}
 
                 {loggingStatus()}
 

assets/js/components/Navbar.react.js

@@ -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>

assets/js/components/WakaTime.react.js

@@ -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>

assets/js/core/WakaTime.js

@@ -1,4 +1,5 @@
 var $ = require('jquery');
+var moment = require('moment');
 
 var config = require('./../config');
 
@@ -23,6 +24,30 @@ class WakaTime {
         this.tabsWithDevtoolsOpen = tabs;
     }
 
+    getTotalTimeLoggedToday() {
+        var deferredObject = $.Deferred();
+
+        var today = moment().format('YYYY-MM-DD');
+
+        $.ajax({
+            url: config.summariesApiUrl + '?start=' + today + '&end=' + today,
+            dataType: 'json',
+            success: (data) => {
+
+                deferredObject.resolve(data.data[0]['grand_total']);
+
+            },
+            error: (xhr, status, err) => {
+
+                console.error(config.summariesApiUrl, status, err.toString());
+
+                deferredObject.resolve(false);
+            }
+        });
+
+        return deferredObject.promise();
+    }
+
     /**
      * Checks if the user is logged in.
      *

assets/js/helpers/getTodaysDateInFormat.js

@@ -1,13 +0,0 @@
-function getTodaysDateInFormat()
-{
-    var today = new Date();
-    var month = today.getMonth() + 1;
-    var date = today.getDate();
-
-    if(month < 10) month = '0' + month;
-    if(date < 10) date = '0' + date;
-
-    return today.getFullYear() + '-' + month + '-' + date;
-}
-
-export default getTodaysDateInFormat;

package.json

@@ -30,6 +30,7 @@
   "dependencies": {
     "bootstrap": "^3.3.4",
     "jquery": "^2.1.3",
+    "moment": "^2.10.3",
     "react": "^0.13.3"
   }
 }

tests/helpers/getTodaysDateInFormat.spec.js

@@ -1,14 +0,0 @@
-var chai = require('chai');
-var expect = chai.expect;
-
-import getTodaysDateInFormat from '../../assets/js/helpers/getTodaysDateInFormat';
-
-describe('getTodaysDateInFormat', function() {
-    it('should be a function', function() {
-        expect(getTodaysDateInFormat).to.be.a('function');
-    });
-
-    it('should return todays date in format YYYY-MM-DD', function() {
-        expect(getTodaysDateInFormat()).to.equal('2015-06-14');
-    });
-});