desktop version can add new projects, and start and stop working, and saves it to localstorage

desktopapp/controllers.js

@@ -1,29 +1,60 @@
 
 angular.module('workApp', [])
   .controller('workController', function(
-        $scope
+        $scope,
+        $interval
     ) {
         $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.newproject={};
-    $scope.newproject.id=$scope.projects[$scope.projects.length-1].id+1;
+    if($scope.projects.length>0)
+    {
+        $scope.newproject={
+            id: $scope.projects[$scope.projects.length-1].id+1
+        };
+    }else{
+        $scope.newproject={
+            id: 0
+        };
+    }
+    //$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={};
-        $scope.newproject.id=$scope.projects.length+1;
+        $scope.newproject={
+            id: $scope.projects[$scope.projects.length-1].id+1
+        };
     };
     $scope.removeProject = function(index){
         $scope.projects.splice(index, 1);
         localStorage.setItem("w_l_projects", angular.toJson($scope.projects));
     };
+    $scope.projectSelect = function(index){
+        $scope.currentproject=$scope.projects[index];
+    };
+    var interval;
+    $scope.currentStrike=0;
+    $scope.btnWork = function(){
+        $scope.working=true;
+        $scope.currentStrike=0;
+        interval = $interval(function(){
+            $scope.currentStrike++;
+            $scope.currentproject.totaltime++;
+        }, 1000);
+    };
+    $scope.btnStop = function(){
+        $interval.cancel(interval);
+        $scope.working=false;
+        localStorage.setItem("w_l_projects", angular.toJson($scope.projects));
+
+    }
 
     $scope.openCode = function(){
         toastr.info("Visiting code");
@@ -38,4 +69,10 @@ angular.module('workApp', [])
         }
     };
 
-  });
+  })
+
+  .filter('secondsToDateTime', [function() {
+    return function(seconds) {
+        return new Date(2016, 0, 1).setSeconds(seconds);
+    };
+}]);

desktopapp/index.html

@@ -14,8 +14,7 @@
       <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
       <title>Open Work Time - local version</title>
 
-      <!-- ANGULAR -->
-      <script src="libraries/angular.min.js"></script>
+
 
     </head>
 
@@ -50,48 +49,16 @@
                 <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>-->
-
-                          <li ng-repeat="project in projects" class="collection-item avatar blue-grey lighten-4">
-                              <a class="waves-effect waves-light btn-floating blue-grey lighten-2 right" ng-click="removeProject($index)">
+                        <div class="collection">
+                          <a href="#!" ng-click="projectSelect($index)" ng-repeat="project in projects" class="collection-item avatar blue-grey lighten-4">
+                              <div class="waves-effect waves-light btn-floating blue-grey lighten-2 right" ng-click="removeProject($index)">
                                   <i class="material-icons"><img src="img/trash.png" class="o_trash_icon" /></i>
-                              </a>
-                              <img ng-src="img/webicons/{{project.icon}}.png" class="circle"/>
+                              </div>
+                              <img ng-src="img/coding/{{project.icon}}.png" class="circle"/>
                               <span class="title">{{project.title}}</span>
-                              <span class="badge">0h</span>
-                              <p class="grey-text">{{username}}</p>
-                          </li>
-                        </ul>
+                              <p class="grey-text">{{project.totaltime | secondsToDateTime | date:'HH:mm:ss'}}</p>
+                          </a>
+                      </div>
                     </div>
                     <div class="card-action">
                         <div class="input-field col s6">
@@ -102,29 +69,27 @@
                           <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">Add new project</a>
+                        <a ng-click="addNewProject()" class="waves-effect waves-light btn blue-grey lighten-1 right">Add new 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/coding/{{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>
@@ -140,7 +105,8 @@ 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>
 
       <!--Import jQuery before materialize.js-->
       <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>

desktopapp/main.js

@@ -0,0 +1,55 @@
+const electron = require('electron')
+// Module to control application life.
+const app = electron.app
+// Module to create native browser window.
+const BrowserWindow = electron.BrowserWindow
+
+// Keep a global reference of the window object, if you don't, the window will
+// be closed automatically when the JavaScript object is garbage collected.
+let mainWindow
+
+function createWindow () {
+  // Create the browser window.
+  mainWindow = new BrowserWindow({width: 1100, height: 650})
+
+  mainWindow.setMenu(null);
+
+  // and load the index.html of the app.
+  mainWindow.loadURL(`file://${__dirname}/index.html`)
+
+  // Open the DevTools.
+  //mainWindow.webContents.openDevTools()
+
+  // Emitted when the window is closed.
+  mainWindow.on('closed', function () {
+    // Dereference the window object, usually you would store windows
+    // in an array if your app supports multi windows, this is the time
+    // when you should delete the corresponding element.
+    mainWindow = null
+  })
+}
+
+// This method will be called when Electron has finished
+// initialization and is ready to create browser windows.
+// Some APIs can only be used after this event occurs.
+app.on('ready', createWindow)
+
+// Quit when all windows are closed.
+app.on('window-all-closed', function () {
+  // On OS X it is common for applications and their menu bar
+  // to stay active until the user quits explicitly with Cmd + Q
+  if (process.platform !== 'darwin') {
+    app.quit()
+  }
+})
+
+app.on('activate', function () {
+  // On OS X it's common to re-create a window in the app when the
+  // dock icon is clicked and there are no other windows open.
+  if (mainWindow === null) {
+    createWindow()
+  }
+})
+
+// In this file you can include the rest of your app's specific main process
+// code. You can also put them in separate files and require them here.

desktopapp/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "OpenWorkTime-offline",
+  "version": "1.0.0",
+  "description": "Open Work Time, offline version. Time tracking app",
+  "main": "main.js",
+  "scripts": {
+    "start": "electron ."
+  },
+  "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",
+  "devDependencies": {
+    "electron-prebuilt": "^1.2.0"
+  }
+}