Added total time logged today. Changed UI.

wakatime · Jun 14, 2015 · 3501107 · 3501107
1 parent fda7480
commit 3501107
Show file tree

Hide file tree

Showing 13 changed files with 6,802 additions and 459 deletions.
diff --git a/README.md b/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)
 

diff --git a/assets/js/components/MainList.react.js b/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,50 +43,38 @@ 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>
                 );
             }
             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()}
 

diff --git a/assets/js/components/Navbar.react.js b/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>

diff --git a/assets/js/components/WakaTime.react.js b/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>

diff --git a/assets/js/core/WakaTime.js b/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.
      *

diff --git a/assets/js/helpers/getTodaysDateInFormat.js b/assets/js/helpers/getTodaysDateInFormat.js
diff --git a/package.json b/package.json
@@ -30,6 +30,7 @@
   "dependencies": {
     "bootstrap": "^3.3.4",
     "jquery": "^2.1.3",
+    "moment": "^2.10.3",
     "react": "^0.13.3"
   }
 }