work strikes chart functionality implemented

webapp/controllers.js

@@ -1,17 +1,98 @@
 
-angular.module('workApp', [])
+angular.module('workApp', ['chart.js'])
   .controller('workController', function(
-        $scope, $http
+        $scope,
+        $interval
     ) {
-    $scope.username="";
-
-    if(localStorage.getItem('w_username')){
-        $scope.username=localStorage.getItem('w_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_
     }
-
-    $scope.onNew = function(){
-
+    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);
+
+            localStorage.setItem("w_l_projects", angular.toJson($scope.projects));
+        }
+
+
+    }
 
     $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">
-                          <li class="collection-item avatar blue-grey lighten-4">
-                              <img src="img/webicons/modeling.png" class="circle"/>
-                              <span class="title">Piratel</span>
-                              <span class="badge">14h</span>
-                              <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 class="collection">
+                          <a href="#!" ng-click="projectSelect($index)" ng-repeat="project in projects" class="collection-item avatar blue-grey lighten-4">
+                                <div class="right">
+                                    <div class="waves-effect waves-light btn-floating blue-grey lighten-2" ng-click="editProject($index)">
+                                        <i class="material-icons"><img src="img/edit.png" class="o_trash_icon" /></i>
+                                    </div>
+                                    <div class="waves-effect waves-light btn-floating blue-grey lighten-2" ng-click="removeProject($index)">
+                                        <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">
-                        <a class="waves-effect waves-light btn blue-grey lighten-1">Add new project</a>
+                    <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>
-                        </p>
-                        <p>
-                            Total time: 10h 34min
-                        </p>
-                        <p>
-                            Current strike time: <b>10h 34min</b>
+                            Current strike time: <b>{{currentStrike | secondsToDateTime | date:'HH:mm:ss'}}</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="card blue-grey  lighten-4 col s12 m7 l7">
+                    <div class="divider"></div>
                     <div class="card-content">
-                        <span class="card-title">Workers</span>
-                        <p>
-                            <div class="o_worker_avatar_card">
-                                <img src="img/avatars/duck.png" class="o_worker_avatar_img"/>
-                                <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>
+                        <!-- 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">
+                        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"
+  }
+}