work strikes chart functionality implemented

desktopapp/controllers.js

@@ -1,5 +1,5 @@
 
-angular.module('workApp', [])
+angular.module('workApp', ['chart.js'])
   .controller('workController', function(
         $scope,
         $interval
@@ -16,11 +16,21 @@ angular.module('workApp', [])
     if($scope.projects.length>0)
     {
         $scope.newproject={
-            id: $scope.projects[$scope.projects.length-1].id+1
+            id: $scope.projects[$scope.projects.length-1].id+1,
+            chart: {
+                labels: [],
+                series: ['Working time'],
+                data: []
+            }
         };
     }else{
         $scope.newproject={
-            id: 0
+            id: 0,
+            chart: {
+                labels: [],
+                series: ['Working time'],
+                data: []
+            }
         };
     }
     //$scope.newproject.id=$scope.projects[$scope.projects.length-1].id+1;
@@ -29,7 +39,12 @@ angular.module('workApp', [])
         $scope.projects.push($scope.newproject);
         localStorage.setItem("w_l_projects", angular.toJson($scope.projects));
         $scope.newproject={
-            id: $scope.projects[$scope.projects.length-1].id+1
+            id: $scope.projects[$scope.projects.length-1].id+1,
+            chart: {
+                labels: [],
+                series: ['Working time'],
+                data: []
+            }
         };
     };
     $scope.editingIndex="";
@@ -48,6 +63,7 @@ angular.module('workApp', [])
     $scope.removeProject = function(index){
         $scope.projects.splice(index, 1);
         localStorage.setItem("w_l_projects", angular.toJson($scope.projects));
+        $scope.projectSelect(0);
     };
     $scope.projectSelect = function(index){
         $scope.btnStop();
@@ -66,8 +82,15 @@ angular.module('workApp', [])
     };
     $scope.btnStop = function(){
         $interval.cancel(interval);
+        if($scope.working==true)
+        {
             $scope.working=false;
+            $scope.currentproject.chart.labels.push("work strike " + $scope.currentproject.chart.labels.length);
+            $scope.currentproject.chart.data.push($scope.currentStrike);
+
             localStorage.setItem("w_l_projects", angular.toJson($scope.projects));
+        }
+
 
     }
 
@@ -84,6 +107,16 @@ angular.module('workApp', [])
         }
     };
 
+    //chart
+    /*$scope.chart={
+        labels: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
+        series: ['Working time', 'Series B'],
+        data: [
+            [65, 59, 80, 81, 56, 55, 40],
+            [28, 48, 40, 19, 86, 27, 90]
+        ]
+    };*/
+
   })
 
   .filter('secondsToDateTime', [function() {

desktopapp/index.html

@@ -23,7 +23,7 @@
 
         <nav>
           <div class="nav-wrapper blue-grey darken-1">
-              <a href="#" class="brand-logo">Open Work Time - local version</a>
+              <a href="#" class="brand-logo">Open Work Time <small>- offline version</small></a>
               <ul id="nav-mobile" class="right">
                 <li>
                     <a ng-click="openCode()" target="_blank">
@@ -110,6 +110,14 @@
 
                         <!--<a class="waves-effect waves-light btn deep-orange lighten-2">Stop working!</a>-->
                     </div>
+                    <div class="divider"></div>
+                    <div class="card-content">
+                        <!-- here the charts -->
+                        <canvas id="bar" class="chart chart-bar"
+  chart-data="currentproject.chart.data" chart-labels="currentproject.chart.labels" chart-series="currentproject.chart.series">
+</canvas>
+
+                    </div>
                 </div>
                 <div ng-show="!currentproject.title" class="card blue-grey lighten-4 col s12 m7 l7" style="height: 200px;">
                     <span class="card-title">
@@ -130,6 +138,14 @@ Works for both browser and electron with the same code -->
     <!-- ANGULAR -->
     <script src="libraries/angular.min.js"></script>
 
+    <!-- ANGULAR CHART JS -->
+    <script src="node_modules/chart.js/dist/Chart.min.js"></script>
+    <script src="node_modules/angular-chart.js/dist/angular-chart.min.js"></script>
+
+    <!-- FILESAVER JS -->
+
+    <script src="node_modules/file-saver/FileSaver.min.js"></script>
+
       <!--Import jQuery before materialize.js-->
       <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
       <script type="text/javascript" src="js/materialize.min.js"></script>

desktopapp/main.js

@@ -10,7 +10,7 @@ let mainWindow
 
 function createWindow () {
   // Create the browser window.
-  mainWindow = new BrowserWindow({width: 1100, height: 650})
+  mainWindow = new BrowserWindow({width: 1100, height: 800})
 
   mainWindow.setMenu(null);
 

desktopapp/package.json

@@ -24,5 +24,8 @@
   "homepage": "https://github.com/idoctnef/openworktime",
   "devDependencies": {
     "electron-prebuilt": "^1.2.0"
+  },
+  "dependencies": {
+    "angular-chart.js": "^1.0.2"
   }
 }

webapp/controllers.js

@@ -1,17 +1,98 @@
 
-angular.module('workApp', [])
+angular.module('workApp', ['chart.js'])
   .controller('workController', function(
-        $scope, $http
+        $scope,
+        $interval
     ) {
-    $scope.username="";
+        $scope.username="user";
+        //localStorage.clear();
+        $scope.working=false;
+    $scope.projects=[];
+    $scope.currentproject={};
+    if(localStorage.getItem("w_l_projects"))
+    {
+        $scope.projects=JSON.parse(localStorage.getItem("w_l_projects")); //w_local_
+    }
+    if($scope.projects.length>0)
+    {
+        $scope.newproject={
+            id: $scope.projects[$scope.projects.length-1].id+1,
+            chart: {
+                labels: [],
+                series: ['Working time'],
+                data: []
+            }
+        };
+    }else{
+        $scope.newproject={
+            id: 0,
+            chart: {
+                labels: [],
+                series: ['Working time'],
+                data: []
+            }
+        };
+    }
+    //$scope.newproject.id=$scope.projects[$scope.projects.length-1].id+1;
+    $scope.addNewProject = function(){
+        $scope.newproject.totaltime="0";
+        $scope.projects.push($scope.newproject);
+        localStorage.setItem("w_l_projects", angular.toJson($scope.projects));
+        $scope.newproject={
+            id: $scope.projects[$scope.projects.length-1].id+1,
+            chart: {
+                labels: [],
+                series: ['Working time'],
+                data: []
+            }
+        };
+    };
+    $scope.editingIndex="";
+    $scope.editProject = function(index){
+        $scope.editingIndex=index;
+        $scope.editingProject=angular.copy($scope.projects[index]);
+    };
+    $scope.cancelEditProject = function(){
+        $scope.editingProject=false;
+    };
+    $scope.updateProject = function(){
+        $scope.projects[$scope.editingIndex]=angular.copy($scope.editingProject);
+        $scope.currentproject=angular.copy($scope.editingProject);
+        $scope.editingProject=false;
+    };
+    $scope.removeProject = function(index){
+        $scope.projects.splice(index, 1);
+        localStorage.setItem("w_l_projects", angular.toJson($scope.projects));
+        $scope.projectSelect(0);
+    };
+    $scope.projectSelect = function(index){
+        $scope.btnStop();
+        $scope.currentproject=$scope.projects[index];
+    };
+    var interval;
+    $scope.currentStrike=0;
+    $scope.btnWork = function(){
+        $scope.editingProject=false;
+        $scope.working=true;
+        $scope.currentStrike=0;
+        interval = $interval(function(){
+            $scope.currentStrike++;
+            $scope.currentproject.totaltime++;
+        }, 1000);
+    };
+    $scope.btnStop = function(){
+        $interval.cancel(interval);
+        if($scope.working==true)
+        {
+            $scope.working=false;
+            $scope.currentproject.chart.labels.push("work strike " + $scope.currentproject.chart.labels.length);
+            $scope.currentproject.chart.data.push($scope.currentStrike);
 
-    if(localStorage.getItem('w_username')){
+            localStorage.setItem("w_l_projects", angular.toJson($scope.projects));
-        $scope.username=localStorage.getItem('w_username');
         }
 
-    $scope.onNew = function(){
 
-    };
+    }
 
     $scope.openCode = function(){
         toastr.info("Visiting code");
@@ -26,4 +107,20 @@ angular.module('workApp', [])
         }
     };
 
-  });
+    //chart
+    /*$scope.chart={
+        labels: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
+        series: ['Working time', 'Series B'],
+        data: [
+            [65, 59, 80, 81, 56, 55, 40],
+            [28, 48, 40, 19, 86, 27, 90]
+        ]
+    };*/
+
+  })
+
+  .filter('secondsToDateTime', [function() {
+    return function(seconds) {
+        return new Date(2016, 0, 1).setSeconds(seconds);
+    };
+}]);

webapp/index.html

@@ -12,10 +12,9 @@
 
       <!--Let browser know website is optimized for mobile-->
       <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-      <title>Open Work Time</title>
+      <title>Open Work Time - local version</title>
+
 
-      <!-- ANGULAR -->
-      <script src="libraries/angular.min.js"></script>
 
     </head>
 
@@ -24,7 +23,7 @@
 
         <nav>
           <div class="nav-wrapper blue-grey darken-1">
-              <a href="#" class="brand-logo">Open Work Time</a>
+              <a href="#" class="brand-logo">Open Work Time <small>- online version</small></a>
               <ul id="nav-mobile" class="right">
                 <li>
                     <a ng-click="openCode()" target="_blank">
@@ -50,95 +49,99 @@
                 <div class="card blue-grey lighten-4 col s12 m5 l5">
                     <div class="card-content">
                         <span class="card-title">Projects</span>
-                        <ul class="collection">
+                        <div class="collection">
-                          <li class="collection-item avatar blue-grey lighten-4">
+                          <a href="#!" ng-click="projectSelect($index)" ng-repeat="project in projects" class="collection-item avatar blue-grey lighten-4">
-                              <img src="img/webicons/modeling.png" class="circle"/>
+                                <div class="right">
-                              <span class="title">Piratel</span>
+                                    <div class="waves-effect waves-light btn-floating blue-grey lighten-2" ng-click="editProject($index)">
-                              <span class="badge">14h</span>
+                                        <i class="material-icons"><img src="img/edit.png" class="o_trash_icon" /></i>
-                              <p class="grey-text">User1, User2</p>
-                          </li>
-                          <li class="collection-item avatar blue-grey lighten-3">
-                              <img src="img/webicons/smartphone.png" class="circle"/>
-                              <span class="title">CarsharingApp Frontend</span>
-                              <span class="badge">10h 34min</span>
-                              <p class="grey-text">User4, User3</p>
-                          </li>
-                          <li class="collection-item avatar blue-grey lighten-4">
-                              <img src="img/webicons/browser-4.png" class="circle"/>
-                              <span class="title">CarsharingApp Backend</span>
-                              <span class="badge">11h 20min</span>
-                              <p class="grey-text">User1, User2</p>
-                          </li>
-                          <li class="collection-item avatar blue-grey lighten-4">
-                              <img src="img/webicons/coding.png" class="circle"/>
-                              <span class="title">OpenWorkTime</span>
-                              <span class="badge">2h 15min</span>
-                              <p class="grey-text">User1, User2, User3, User4</p>
-                          </li>
-                          <li class="collection-item avatar blue-grey lighten-4">
-                              <img src="img/webicons/devices-1.png" class="circle"/>
-                              <span class="title">WebPrimusTech</span>
-                              <span class="badge">0h</span>
-                              <p class="grey-text">no workers</p>
-                          </li>
-                        </ul>
                                     </div>
-                    <div class="card-action">
+                                    <div class="waves-effect waves-light btn-floating blue-grey lighten-2" ng-click="removeProject($index)">
-                        <a class="waves-effect waves-light btn blue-grey lighten-1">Add new project</a>
+                                        <i class="material-icons"><img src="img/trash.png" class="o_trash_icon" /></i>
+                                    </div>
+                                </div>
+                              <img ng-src="img/{{project.icon}}.png" class="circle"/>
+                              <span class="title">{{project.title}}</span>
+                              <p class="grey-text">{{project.totaltime | secondsToDateTime | date:'HH:mm:ss'}}</p>
+                          </a>
+                      </div>
+                    </div>
+                    <div class="card-action" ng-show="!editingProject">
+                        <div class="input-field col s6">
+                          <input ng-model="newproject.title" id="newprojectname" type="text" class="validate">
+                          <label for="newprojectname">New project name</label>
+                        </div>
+                        <div class="input-field col s6">
+                          <input ng-model="newproject.icon" id="icon" type="text" class="validate">
+                          <label for="icon">icon</label>
+                        </div>
+                        <a ng-click="addNewProject()" class="waves-effect waves-light btn blue-grey lighten-1 right">Add new project</a>
+                    </div>
+                    <div class="card-action" ng-show="editingProject">
+                        <div class="input-field col s6">
+                          <input ng-model="editingProject.title" id="newprojectname" value=" " type="text" class="validate">
+                          <label for="newprojectname">New project name</label>
+                        </div>
+                        <div class="input-field col s6">
+                          <input ng-model="editingProject.icon" id="icon" value=" " type="text" class="validate">
+                          <label for="icon">icon</label>
+                        </div>
+                        <a ng-click="cancelEditProject()" class="waves-effect waves-light btn red lighten-2">Cancel</a>
+                        <a ng-click="updateProject()" class="waves-effect waves-light btn blue lighten-2 right">Update project</a>
                     </div>
                 </div>
 
-                <div class="card blue-grey lighten-4 col s12 m7 l7">
+                <div ng-show="currentproject.title" class="card blue-grey lighten-4 col s12 m7 l7">
                     <div class="card-content">
-                        <span class="card-title"> <img src="img/webicons/smartphone.png" class="o_project_title_img"/>CarsharingApp Frontend</span>
+                        <span class="card-title">
+                            <img ng-src="img/{{currentproject.icon}}.png" class="o_project_title_img"/>
+                            {{currentproject.title}}
+                        </span>
                         <p>
-                            project github: <a href="#">https://github.com/idoctnef/collectivecarApp</a>
+                            Total time: {{currentproject.totaltime | secondsToDateTime | date:'HH:mm:ss'}}
                         </p>
                         <p>
-                            project Taigan: <a href="#">https://github.com/idoctnef/collectivecarApp</a>
+                            Current strike time: <b>{{currentStrike | secondsToDateTime | date:'HH:mm:ss'}}</b>
-                        </p>
-                        <p>
-                            Total time: 10h 34min
-                        </p>
-                        <p>
-                            Current strike time: <b>10h 34min</b>
                         </p>
 
                     </div>
                     <div class="card-action">
-                        <a class="waves-effect waves-light btn blue-grey lighten-1">Work!</a>
+                        <a ng-click="btnWork()" ng-show="!working" class="waves-effect waves-light btn green lighten-2">Work!</a>
+                        <a ng-click="btnStop()" ng-show="working" class="waves-effect waves-light btn red lighten-2">Stop!</a>
 
                         <!--<a class="waves-effect waves-light btn deep-orange lighten-2">Stop working!</a>-->
                     </div>
-                </div>
+                    <div class="divider"></div>
-
-                <div class="card blue-grey  lighten-4 col s12 m7 l7">
                     <div class="card-content">
-                        <span class="card-title">Workers</span>
+                        <!-- here the charts -->
-                        <p>
+                        <canvas id="bar" class="chart chart-bar"
-                            <div class="o_worker_avatar_card">
+  chart-data="currentproject.chart.data" chart-labels="currentproject.chart.labels" chart-series="currentproject.chart.series">
-                                <img src="img/avatars/duck.png" class="o_worker_avatar_img"/>
+</canvas>
-                                <p class="grey-text text-darken-1">User1</p>
+
-                            </div>
-                            <div class="o_worker_avatar_card">
-                                <img src="img/avatars/racoon.png" class="o_worker_avatar_img"/>
-                                <p class="grey-text text-darken-1">User2</p>
-                            </div>
-                            <div class="o_worker_avatar_card">
-                                <img src="img/avatars/tiger.png" class="o_worker_avatar_img"/>
-                                <p class="grey-text text-darken-1">User3</p>
-                            </div>
-                            <div class="o_worker_avatar_card">
-                                <img src="img/avatars/crab.png" class="o_worker_avatar_img"/>
-                                <p class="grey-text text-darken-1">User4</p>
-                            </div>
-                        </p>
                     </div>
                 </div>
+                <div ng-show="!currentproject.title" class="card blue-grey lighten-4 col s12 m7 l7" style="height: 200px;">
+                    <span class="card-title">
+                        Select a project
+                    </span>
+                </div>
+
+
             </div>
         </div>
 
 
+<!-- ELECTRON
+Insert this line above script imports
+Works for both browser and electron with the same code -->
+<script>if (typeof module === 'object') {window.module = module; module = undefined;}</script>
+
+    <!-- ANGULAR -->
+    <script src="libraries/angular.min.js"></script>
+
+    <!-- ANGULAR CHART JS -->
+    <script src="node_modules/chart.js/dist/Chart.min.js"></script>
+    <script src="node_modules/angular-chart.js/dist/angular-chart.min.js"></script>
+
 
       <!--Import jQuery before materialize.js-->
       <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
@@ -149,7 +152,9 @@
       <script src="libraries/toastr.js"></script>
       <link type="text/css" rel="stylesheet" href="libraries/toastr.css"/>
 
-
+<!-- ELECTRON
+Insert this line after script imports -->
+<script>if (window.module) module = window.module;</script>
 
 
     </body>

webapp/own.css

@@ -12,3 +12,9 @@
     display: inline-block;
     text-align: center;
 }
+.o_trash_icon{
+    width: 20px;
+}
+.o_float_right{
+    float: right;
+}

webapp/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "OpenWorkTime",
+  "version": "1.0.0",
+  "description": "Open Work Time, online version. Time tracking app",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/idoctnef/openworktime"
+  },
+  "keywords": [
+    "work",
+    "time",
+    "traking",
+    "app"
+  ],
+  "author": "idoctnef",
+  "license": "GNU-1.0",
+  "bugs": {
+    "url": "https://github.com/idoctnef/openworktime/issues"
+  },
+  "homepage": "https://github.com/idoctnef/openworktime",
+  "dependencies": {
+    "angular-chart.js": "^1.0.2"
+  }
+}