Skip to content

Instantly share code, notes, and snippets.

@ypetya

ypetya/index.html

Last active November 25, 2020 12:12
Show Gist options
  • Save ypetya/d85a34787d8f26944269 to your computer and use it in GitHub Desktop.
Save ypetya/d85a34787d8f26944269 to your computer and use it in GitHub Desktop.
Download ZIP
Pulse zone calculator
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="main.js"></script>
<title>Pulse zone calculator</title>
<style>
.float {
float: left;
margin: 20px;
padding: 10px;
border: dotted 1px;
}
.container {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 0;
text-align: center;
}
.container div {
display: inline-block;
text-align: left;
}
</style>
</head>
<body ng-app="pulseZoneApp">
<div class="container">
<div ng-controller="PulseZoneController">
<dl class="float">
<dt>Field test</dt>
<dd>
<input ng-model="fieldTestHRM" placeholder="Field test HRM">
</dd>
<hrm-zone name="Endurance miles (50-91%)" min="50" max="91" hrm="fieldTestHRM"></hrm-zone>
<hrm-zone name="TEMPO (88-90%)" min="88" max="90" hrm="fieldTestHRM"></hrm-zone>
<hrm-zone name="Steady State (92-94%)" min="92" max="94" hrm="fieldTestHRM"></hrm-zone>
<hrm-zone name="Climbing Repeats (95-97%)" min="95" max="97" hrm="fieldTestHRM"></hrm-zone>
<hrm-zone name="Power Interval (100%-max)" min="100" max="" hrm="fieldTestHRM"></hrm-zone>
</dl>
<dl class="float">
<dt>Training Zones</dt>
<dd>
<input ng-model="maxPulseHRM" placeholder="Max HRM">
</dd>
<hrm-zone name="z1 (50-60%)" min="50" max="60" hrm="maxPulseHRM"></hrm-zone>
<hrm-zone name="z2 (60-70%)" min="60" max="70" hrm="maxPulseHRM"></hrm-zone>
<hrm-zone name="z3 (70-80%)" min="70" max="80" hrm="maxPulseHRM"></hrm-zone>
<hrm-zone name="z4 (80-90%)" min="80" max="90" hrm="maxPulseHRM"></hrm-zone>
<hrm-zone name="z5 (90-100%)" min="90" max="100" hrm="maxPulseHRM"></hrm-zone>
</dl>
<dl class="float">
<dt>Karvonen method</dt>
<dd>
<input ng-model="minPulseHRM" placeholder="Rest HRM">
</dd>
<karvonen-zone name="warmup (50-60%)" min="50" max="60" hrm="maxPulseHRM" rest="minPulseHRM"></karvonen-zone>
<karvonen-zone name="fat burn (60-70%)" min="60" max="70" hrm="maxPulseHRM" rest="minPulseHRM"></karvonen-zone>
<karvonen-zone name="cardio (70-80%)" min="70" max="80" hrm="maxPulseHRM" rest="minPulseHRM"></karvonen-zone>
<karvonen-zone name="extreme (80-90%)" min="80" max="90" hrm="maxPulseHRM" rest="minPulseHRM"></karvonen-zone>
<karvonen-zone name="max (90-100%)" min="90" max="100" hrm="maxPulseHRM" rest="minPulseHRM"></karvonen-zone>
</dl>
</div>
</div>
</body>
</html>
Raw
main.js
var myApp = angular.module('pulseZoneApp', ['ng']);
myApp.controller('PulseZoneController', [ '$scope', function (scope) {
scope.percent = function (whole, percent) {
return whole * percent / 100;
};
scope.karvonen = function (max, min, percent) {
return Number((max - min) * percent / 100) + Number( min );
}
}])
.directive('hrmZone', function () {
return {
require: '^PulseZoneController',
controller : 'PulseZoneController',
restrict: 'E',
scope: {
name: '@', min: '@', max: '@', hrm: '='
},
template: '<dt>{{name}}</dt><dd>{{ percent(hrm,min) }} - {{ percent(hrm,max) }}</dd>'
};
})
.directive('karvonenZone', function () {
return {
require: '^PulseZoneController',
controller : 'PulseZoneController',
restrict: 'E',
scope: {
name: '@', min: '@', max: '@', rest: '=', hrm: '='
},
template: '<dt>{{name}}</dt><dd>{{ karvonen(hrm,rest,min) }} - {{ karvonen(hrm,rest,max) }}</dd>'
};
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment