You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

164 lines
7.5 KiB

  1. <!DOCTYPE html>
  2. <html ng-app="workApp">
  3. <head>
  4. <!--Import Google Icon Font-->
  5. <link href="fonts/icons.css" rel="stylesheet">
  6. <!--Import materialize.css-->
  7. <link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
  8. <link type="text/css" rel="stylesheet" href="own.css"/>
  9. <!--Let browser know website is optimized for mobile-->
  10. <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  11. <title>Open Work Time - local version</title>
  12. </head>
  13. <body ng-controller="workController as work">
  14. <nav>
  15. <div class="nav-wrapper blue-grey darken-1">
  16. <a href="#" class="brand-logo">Open Work Time <small>- offline version</small></a>
  17. <ul id="nav-mobile" class="right">
  18. <li>
  19. <a ng-click="openCode()" target="_blank">
  20. <i class="large material-icons" title="Visit code">code</i>
  21. </a>
  22. </li>
  23. <li>
  24. <a ng-click="deleteStorage()">
  25. <i class="large material-icons" title="Delete storage">info_outline</i>
  26. </a>
  27. </li>
  28. <li>
  29. <a ng-click="saveStorage()" title="Save all to storage">
  30. <i class="large material-icons">perm_identity</i>
  31. </a>
  32. </li>
  33. </ul>
  34. </div>
  35. </nav>
  36. <div class="">
  37. <div class="row">
  38. <div class="card blue-grey lighten-4 col s12 m5 l5">
  39. <div class="card-content">
  40. <span class="card-title">Projects</span>
  41. <div class="collection">
  42. <a href="#!" ng-click="projectSelect($index)" ng-repeat="project in projects" class="collection-item avatar blue-grey lighten-4">
  43. <div class="right">
  44. <div class="waves-effect waves-light btn-floating blue-grey lighten-2" ng-click="editProject($index)">
  45. <i class="material-icons"><img src="img/edit.png" class="o_trash_icon" /></i>
  46. </div>
  47. <div class="waves-effect waves-light btn-floating blue-grey lighten-2" ng-click="removeProject($index)">
  48. <i class="material-icons"><img src="img/trash.png" class="o_trash_icon" /></i>
  49. </div>
  50. </div>
  51. <img ng-src="img/{{project.icon}}.png" class="circle"/>
  52. <span class="title">{{project.title}}</span>
  53. <p class="grey-text">{{project.totaltime | secondsToDateTime | date:'HH:mm:ss'}}</p>
  54. </a>
  55. </div>
  56. </div>
  57. <div class="card-action" ng-show="!editingProject">
  58. <div class="input-field col s6">
  59. <input ng-model="newproject.title" id="newprojectname" type="text" class="validate">
  60. <label for="newprojectname">New project name</label>
  61. </div>
  62. <div class="input-field col s6">
  63. <input ng-model="newproject.icon" id="icon" type="text" class="validate">
  64. <label for="icon">icon</label>
  65. </div>
  66. <a ng-click="addNewProject()" class="waves-effect waves-light btn blue-grey lighten-1 right">Add new project</a>
  67. </div>
  68. <div class="card-action" ng-show="editingProject">
  69. <div class="input-field col s6">
  70. <input ng-model="editingProject.title" id="newprojectname" value=" " type="text" class="validate">
  71. <label for="newprojectname">New project name</label>
  72. </div>
  73. <div class="input-field col s6">
  74. <input ng-model="editingProject.icon" id="icon" value=" " type="text" class="validate">
  75. <label for="icon">icon</label>
  76. </div>
  77. <a ng-click="cancelEditProject()" class="waves-effect waves-light btn red lighten-2">Cancel</a>
  78. <a ng-click="updateProject()" class="waves-effect waves-light btn blue lighten-2 right">Update project</a>
  79. </div>
  80. </div>
  81. <div ng-show="currentproject.title" class="card blue-grey lighten-4 col s12 m7 l7">
  82. <div class="card-content">
  83. <span class="card-title">
  84. <img ng-src="img/{{currentproject.icon}}.png" class="o_project_title_img"/>
  85. {{currentproject.title}}
  86. </span>
  87. <p>
  88. Total time: {{currentproject.totaltime | secondsToDateTime | date:'HH:mm:ss'}}
  89. </p>
  90. <p>
  91. Current strike time: <b>{{currentStrike | secondsToDateTime | date:'HH:mm:ss'}}</b>
  92. </p>
  93. </div>
  94. <div class="card-action">
  95. <a ng-click="btnWork()" ng-show="!working" class="waves-effect waves-light btn green lighten-2">Work!</a>
  96. <a ng-click="btnStop()" ng-show="working" class="waves-effect waves-light btn red lighten-2">Stop!</a>
  97. <!--<a class="waves-effect waves-light btn deep-orange lighten-2">Stop working!</a>-->
  98. </div>
  99. <div class="divider"></div>
  100. <div class="card-content">
  101. <!-- here the charts -->
  102. <canvas id="bar" class="chart chart-bar"
  103. chart-data="currentproject.chart.data" chart-labels="currentproject.chart.labels" chart-series="currentproject.chart.series">
  104. </canvas>
  105. </div>
  106. </div>
  107. <div ng-show="!currentproject.title" class="card blue-grey lighten-4 col s12 m7 l7" style="height: 200px;">
  108. <span class="card-title">
  109. Select a project
  110. </span>
  111. </div>
  112. </div>
  113. </div>
  114. <!-- ELECTRON
  115. Insert this line above script imports
  116. Works for both browser and electron with the same code -->
  117. <script>if (typeof module === 'object') {window.module = module; module = undefined;}</script>
  118. <!-- ANGULAR -->
  119. <script src="libraries/angular.min.js"></script>
  120. <!-- ANGULAR CHART JS -->
  121. <script src="node_modules/chart.js/dist/Chart.min.js"></script>
  122. <script src="node_modules/angular-chart.js/dist/angular-chart.min.js"></script>
  123. <!-- FILESAVER JS -->
  124. <script src="node_modules/file-saver/FileSaver.min.js"></script>
  125. <!--Import jQuery before materialize.js-->
  126. <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
  127. <script type="text/javascript" src="js/materialize.min.js"></script>
  128. <script src="controllers.js"></script>
  129. <script src="libraries/toastr.js"></script>
  130. <link type="text/css" rel="stylesheet" href="libraries/toastr.css"/>
  131. <!-- ELECTRON
  132. Insert this line after script imports -->
  133. <script>if (window.module) module = window.module;</script>
  134. </body>
  135. </html>