simple angular material time tracker
- Angularjs
- Angular Material
- Angular Material icon
- jquery ui
install the tracker-module
using bower
bower install time-tracker
Add the scripts to your application. Make sure the tracker-module.js
file is inserted after the angular.js
library:
<link rel="stylesheet" href="bower_components/angular-material/angular-material.min.css">
<script type="text/javascript" src="bower_components/angular/angular.js"></script>
<script type="text/javascript" src="bower_components/angular-aria/angular-aria.js"></script>
<script type="text/javascript" src="bower_components/angular-animate/angular-animate.min.js"></script>
<script type="text/javascript" src="bower_components/angular-material/angular-material.js"></script>
<script type="text/javascript" src="bower_components/angular-material-icons/angular-material-icons.min.js"></script>
<script type="text/javascript" src="bower_components/material-time-tracker/tracker-module/tracker-module.js"></script>
Add the time tracker module as a dependancy to your application module. since angular material beign used inject the ngAnimate
and ngAria
modules along with the ngMaterial
module:
angular.module("app",['ngMaterial','ngAnimate', 'ngAria','rasm-tracker'])
in the html add tracker as element like this
<div ng-app="app" ng-controller="ctrl as vm">
<time-tracker></time-tracker>
</div>
There are couple of events available in time tracker
- start event
add start-func
as attribute to the element and call controller function
<time-tracker start-func="vm.startF(time)"></time-tracker>
current time pass as argument to the function.
.controller("ctrl",function($scope){
var vm = this;
vm.startF = function(time){
console.log("start time " + time)
}
})
- stop event
same as start event. just add stop-func
to the element
<time-tracker stop-func="vm.stopF(time)"></time-tracker>
- reset event
same as start event. just add reset-func
to the element
<time-tracker reset-func="vm.resetF(time)"></time-tracker>
- pause event
same as start event. just add pause-func
to the element
<time-tracker pause-func="vm.pauseF(time)"></time-tracker>
in ordert to drag the time tracker, First of all we need to add jquery libraries. Add these scripts to your application.
<script type="text/javascript" src="bower_components/jquery/dist/jquery.js"></script>
<script type="text/javascript" src="bower_components/jquery-ui/jquery-ui.min.js"></script>
Then add the drag-tracker
attribute to the tracker
<time-tracker drag-tracker stop-func="vm.stopF(time)" start-func="vm.startF(time)" reset-func="vm.resetF(time)" pause-func="vm.pauseF(time)"></time-tracker>
See the LICENSE file.