work strikes chart functionality implemented
nau idoctnef@openmailbox.org
Mon, 05 Sep 2016 11:23:39 +0200
48 files changed,
273 insertions(+),
89 deletions(-)
jump to
M
desktopapp/controllers.js
→
desktopapp/controllers.js
@@ -1,5 +1,5 @@
-angular.module('workApp', []) +angular.module('workApp', ['chart.js']) .controller('workController', function( $scope, $interval@@ -16,11 +16,21 @@ }
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 @@ $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 + id: $scope.projects[$scope.projects.length-1].id+1, + chart: { + labels: [], + series: ['Working time'], + data: [] + } }; }; $scope.editingIndex="";@@ -48,6 +63,7 @@ };
$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 @@ }, 1000);
}; $scope.btnStop = function(){ $interval.cancel(interval); - $scope.working=false; - localStorage.setItem("w_l_projects", angular.toJson($scope.projects)); + 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)); + } + }@@ -83,6 +106,16 @@ }else{
window.open(urlCode); } }; + + //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] + ] + };*/ })
M
desktopapp/index.html
→
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 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 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">@@ -129,6 +137,14 @@ <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> + + <!-- 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>
M
desktopapp/main.js
→
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);
M
desktopapp/package.json
→
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" } }
M
webapp/controllers.js
→
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')){ - $scope.username=localStorage.getItem('w_username'); - } + localStorage.setItem("w_l_projects", angular.toJson($scope.projects)); + } - $scope.onNew = function(){ - }; + } $scope.openCode = function(){ toastr.info("Visiting code");@@ -26,4 +107,20 @@ window.open(urlCode);
} }; - }); + //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); + }; +}]);
M
webapp/index.html
→
webapp/index.html
@@ -12,10 +12,9 @@ <link type="text/css" rel="stylesheet" href="own.css"/>
<!--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="row">
<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" 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"> - <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="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>
M
webapp/own.css
→
webapp/own.css
@@ -12,3 +12,9 @@ width: 100px;
display: inline-block; text-align: center; } +.o_trash_icon{ + width: 20px; +} +.o_float_right{ + float: right; +}
A
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" + } +}