Browse Source

work strikes chart functionality implemented

master
nau 8 years ago
parent
commit
a572462e82
48 changed files with 273 additions and 89 deletions
  1. +39
    -6
      desktopapp/controllers.js
  2. +17
    -1
      desktopapp/index.html
  3. +1
    -1
      desktopapp/main.js
  4. +3
    -0
      desktopapp/package.json
  5. +106
    -9
      webapp/controllers.js
  6. BIN
      webapp/img/apibrowser.png
  7. BIN
      webapp/img/browser.png
  8. BIN
      webapp/img/codetags.png
  9. BIN
      webapp/img/coding/adaptive-layout.png
  10. BIN
      webapp/img/coding/api.png
  11. BIN
      webapp/img/coding/binary-code.png
  12. BIN
      webapp/img/coding/bugs-search-1.png
  13. BIN
      webapp/img/coding/bugs-search.png
  14. BIN
      webapp/img/coding/c-document.png
  15. BIN
      webapp/img/coding/cloud-coding.png
  16. BIN
      webapp/img/coding/code-rate.png
  17. BIN
      webapp/img/coding/command-line.png
  18. BIN
      webapp/img/coding/css-code.png
  19. BIN
      webapp/img/coding/css-document.png
  20. BIN
      webapp/img/coding/document-settings.png
  21. BIN
      webapp/img/coding/editing-code.png
  22. BIN
      webapp/img/coding/error-404.png
  23. BIN
      webapp/img/coding/hacker.png
  24. BIN
      webapp/img/coding/html-document.png
  25. BIN
      webapp/img/coding/html.png
  26. BIN
      webapp/img/coding/list.png
  27. BIN
      webapp/img/coding/mobile-programming.png
  28. BIN
      webapp/img/coding/password.png
  29. BIN
      webapp/img/coding/php-code.png
  30. BIN
      webapp/img/coding/php-document.png
  31. BIN
      webapp/img/coding/program-interface.png
  32. BIN
      webapp/img/coding/programming-1.png
  33. BIN
      webapp/img/coding/programming.png
  34. BIN
      webapp/img/coding/table.png
  35. BIN
      webapp/img/coding/ui-design.png
  36. BIN
      webapp/img/coding/ux-design.png
  37. BIN
      webapp/img/coding/virus.png
  38. BIN
      webapp/img/coding/web-interface.png
  39. BIN
      webapp/img/diagram.png
  40. BIN
      webapp/img/edit.png
  41. BIN
      webapp/img/monitor.png
  42. BIN
      webapp/img/smartphone.png
  43. BIN
      webapp/img/statistics.png
  44. BIN
      webapp/img/tablet.png
  45. BIN
      webapp/img/trash.png
  46. +77
    -72
      webapp/index.html
  47. +6
    -0
      webapp/own.css
  48. +24
    -0
      webapp/package.json

+ 39
- 6
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);
$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));
}
}
@ -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() {

+ 17
- 1
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>

+ 1
- 1
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);

+ 3
- 0
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"
}
}

+ 106
- 9
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_
}
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.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);
};
}]);

BIN
webapp/img/apibrowser.png

Before After
Width: 512  |  Height: 512  |  Size: 17 KiB

BIN
webapp/img/browser.png

Before After
Width: 512  |  Height: 512  |  Size: 12 KiB

BIN
webapp/img/codetags.png

Before After
Width: 512  |  Height: 512  |  Size: 12 KiB

BIN
webapp/img/coding/adaptive-layout.png

Before After
Width: 512  |  Height: 512  |  Size: 8.2 KiB

BIN
webapp/img/coding/api.png

Before After
Width: 512  |  Height: 512  |  Size: 16 KiB

BIN
webapp/img/coding/binary-code.png

Before After
Width: 512  |  Height: 512  |  Size: 9.5 KiB

BIN
webapp/img/coding/bugs-search-1.png

Before After
Width: 512  |  Height: 512  |  Size: 14 KiB

BIN
webapp/img/coding/bugs-search.png

Before After
Width: 512  |  Height: 512  |  Size: 11 KiB

BIN
webapp/img/coding/c-document.png

Before After
Width: 512  |  Height: 512  |  Size: 7.7 KiB

BIN
webapp/img/coding/cloud-coding.png

Before After
Width: 512  |  Height: 512  |  Size: 11 KiB

BIN
webapp/img/coding/code-rate.png

Before After
Width: 512  |  Height: 512  |  Size: 14 KiB

BIN
webapp/img/coding/command-line.png

Before After
Width: 512  |  Height: 512  |  Size: 4.6 KiB

BIN
webapp/img/coding/css-code.png

Before After
Width: 512  |  Height: 512  |  Size: 5.9 KiB

BIN
webapp/img/coding/css-document.png

Before After
Width: 512  |  Height: 512  |  Size: 8.3 KiB

BIN
webapp/img/coding/document-settings.png

Before After
Width: 512  |  Height: 512  |  Size: 10 KiB

BIN
webapp/img/coding/editing-code.png

Before After
Width: 512  |  Height: 512  |  Size: 6.0 KiB

BIN
webapp/img/coding/error-404.png

Before After
Width: 512  |  Height: 512  |  Size: 5.7 KiB

BIN
webapp/img/coding/hacker.png

Before After
Width: 512  |  Height: 512  |  Size: 8.3 KiB

BIN
webapp/img/coding/html-document.png

Before After
Width: 512  |  Height: 512  |  Size: 7.3 KiB

BIN
webapp/img/coding/html.png

Before After
Width: 512  |  Height: 512  |  Size: 6.0 KiB

BIN
webapp/img/coding/list.png

Before After
Width: 512  |  Height: 512  |  Size: 6.0 KiB

BIN
webapp/img/coding/mobile-programming.png

Before After
Width: 512  |  Height: 512  |  Size: 5.7 KiB

BIN
webapp/img/coding/password.png

Before After
Width: 512  |  Height: 512  |  Size: 7.0 KiB

BIN
webapp/img/coding/php-code.png

Before After
Width: 512  |  Height: 512  |  Size: 5.6 KiB

BIN
webapp/img/coding/php-document.png

Before After
Width: 512  |  Height: 512  |  Size: 7.5 KiB

BIN
webapp/img/coding/program-interface.png

Before After
Width: 512  |  Height: 512  |  Size: 6.4 KiB

BIN
webapp/img/coding/programming-1.png

Before After
Width: 512  |  Height: 512  |  Size: 5.7 KiB

BIN
webapp/img/coding/programming.png

Before After
Width: 512  |  Height: 512  |  Size: 9.4 KiB

BIN
webapp/img/coding/table.png

Before After
Width: 512  |  Height: 512  |  Size: 6.4 KiB

BIN
webapp/img/coding/ui-design.png

Before After
Width: 512  |  Height: 512  |  Size: 8.7 KiB

BIN
webapp/img/coding/ux-design.png

Before After
Width: 512  |  Height: 512  |  Size: 6.4 KiB

BIN
webapp/img/coding/virus.png

Before After
Width: 512  |  Height: 512  |  Size: 11 KiB

BIN
webapp/img/coding/web-interface.png

Before After
Width: 512  |  Height: 512  |  Size: 6.6 KiB

BIN
webapp/img/diagram.png

Before After
Width: 512  |  Height: 512  |  Size: 12 KiB

BIN
webapp/img/edit.png

Before After
Width: 32  |  Height: 32  |  Size: 710 B

BIN
webapp/img/monitor.png

Before After
Width: 512  |  Height: 512  |  Size: 8.9 KiB

BIN
webapp/img/smartphone.png

Before After
Width: 512  |  Height: 512  |  Size: 11 KiB

BIN
webapp/img/statistics.png

Before After
Width: 512  |  Height: 512  |  Size: 14 KiB

BIN
webapp/img/tablet.png

Before After
Width: 512  |  Height: 512  |  Size: 13 KiB

BIN
webapp/img/trash.png

Before After
Width: 32  |  Height: 32  |  Size: 731 B

+ 77
- 72
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>
<p>
project github: <a href="#">https://github.com/idoctnef/collectivecarApp</a>
</p>
<span class="card-title">
<img ng-src="img/{{currentproject.icon}}.png" class="o_project_title_img"/>
{{currentproject.title}}
</span>
<p>
project Taigan: <a href="#">https://github.com/idoctnef/collectivecarApp</a>
Total time: {{currentproject.totaltime | secondsToDateTime | date:'HH:mm:ss'}}
</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>

+ 6
- 0
webapp/own.css

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

+ 24
- 0
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"
}
}

Loading…
Cancel
Save