Skip to content

Instantly share code, notes, and snippets.

@DovOps

DovOps/index.html

Created December 9, 2020 20:20
Show Gist options
  • Save DovOps/6f10301ac275989d22cf65040df33a12 to your computer and use it in GitHub Desktop.
Save DovOps/6f10301ac275989d22cf65040df33a12 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html ng-app="pelotonApp">
<head>
<style>
</style>
<base target="_top">
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script>
String.prototype.toMS=function(){
var sec=parseInt(this,10);
var min=0;
if(sec>60){
min=Math.floor(sec/60);
sec%=60;
}
return ((min>0)?min+"m":"")+sec+"s";
}
String.prototype.toMMSS = function () {
var sec_num = parseInt(this, 10); // don't forget the second param
var minutes = Math.floor((sec_num ) / 60);
var seconds = sec_num - (minutes * 60);
if (minutes < 10) {minutes = minutes;}
if (seconds < 10) {seconds = "0"+seconds;}
return minutes+':'+seconds;
}
angular.module('pelotonApp', [])
.controller('PelotonUserController', function($scope) {
var pelotonController = this;
pelotonController.started=false;
pelotonController.now=0;
pelotonController.toggleStart=function(){
pelotonController.started=!pelotonController.started;
}
pelotonController.reset=function(){
pelotonController.now=0;
}
pelotonController.forward=function(n){
pelotonController.now+=n
;
}
pelotonController.backward=function(n){
pelotonController.now-=n;
}
setInterval(function(){
if(pelotonController.started){
pelotonController.now++;
$scope.$digest();
}
},1000);
pelotonController.sections=[
{ name: 'Flat Road', start: 0, end: 119, intervals:[
{start: 0, end: 119, zone:1}
]},
{ name: 'Spin-ups', start: 120, end: 284, intervals:[
{start: 120, end: 149, zone:2},
{start: 150, end: 164, zone:1},
{start: 165, end: 194, zone:3},
{start: 195, end: 209, zone:1},
{start: 210, end: 239, zone:3},
{start: 240, end: 254, zone:1},
{start: 255, end: 284, zone:4}
]},
{ name: 'Build', start: 285, end: 689, intervals:[
{start: 285, end: 389, zone:1},
{start: 390, end: 449, zone:2},
{start: 450, end: 509, zone:3},
{start: 510, end: 569, zone:4},
{start: 570, end: 599, zone:5},
{start: 600, end: 689, zone:1}
]},
{ name: 'Christmas', start: 690, end: 1049, intervals:[
{start: 690, end: 719, zone:2},
{start: 720, end: 749, zone:3},
{start: 750, end: 779, zone:4},
{start: 780, end: 809, zone:5},
{start: 810, end: 839, zone:6},
{start: 840, end: 869, zone:5},
{start: 870, end: 899, zone:4},
{start: 900, end: 929, zone:3},
{start: 930, end: 959, zone:2},
{start: 960, end: 1049, zone:1}
]},
{ name: 'Hannukah', start: 1050, end: 1679, intervals:[
{start: 1050, end: 1079, zone:3},
{start: 1080, end: 1124, zone:1},
{start: 1125, end: 1154, zone:3},
{start: 1155, end: 1199, zone:1},
{start: 1200, end: 1229, zone:3},
{start: 1230, end: 1274, zone:1},
{start: 1275, end: 1304, zone:3},
{start: 1305, end: 1349, zone:1},
{start: 1350, end: 1379, zone:6},
{start: 1380, end: 1424, zone:1},
{start: 1425, end: 1454, zone:3},
{start: 1455, end: 1499, zone:1},
{start: 1500, end: 1529, zone:3},
{start: 1530, end: 1574, zone:1},
{start: 1575, end: 1604, zone:3},
{start: 1605, end: 1649, zone:1},
{start: 1650, end: 1679, zone:3}
]},
{ name: 'Flat Road', start: 1680, end: 1799, intervals:[
{start: 1680, end: 1799, zone:1}
]}
];
pelotonController.incrementalPull=function(){
};
});
</script>
</head>
<body ng-controller="PelotonUserController as peloton" >
<div class="card">
<div class="card-header">Peloton</div>
<div class="card-body">
<h3><i class="fa fa-bicycle"></i> DIY Power Zone Ride</h3>
<button ng-click="peloton.toggleStart()"
class="badge badge-pill badge-secondary">
<span ng-if="peloton.started"><i class="fa fa-pause"></i> Pause</span>
<span ng-if="!peloton.started"><i class="fa fa-play"></i> Start</span></button>
<button ng-click="peloton.reset()"
class="badge badge-pill badge-secondary"><i class="fa fa-refresh"></i> Reset Timer</span></button>
<button ng-click="peloton.forward(15)"
class="badge badge-pill badge-secondary"><i class="fa fa-forward"></i> +15s</span></button>
<button ng-click="peloton.backward(15)"
class="badge badge-pill badge-secondary"><i class="fa fa-backward"></i> -15s</span></button>
<h1 class="danger">{{(""+peloton.now).toMMSS()}}</h1>
<div ng-repeat="section in peloton.sections">
<h5> {{section.name}} </h5>
<small><i class="fa fa-clock-o" ></i>
{{(""+section.start).toMMSS()}} - {{(""+section.end).toMMSS()}}</small>
<ul>
<li ng-repeat="i in section.intervals">
<div ng-class="{'bg-warning':(peloton.now>=i.start&&peloton.now<=i.end)}">{{(""+i.start).toMMSS() }} Z{{i.zone}}- {{(""+(i.end-i.start +1)).toMS()}} </div>
</li>
</ul>
</div>
</div>
<div class="card-footer">
</div>
</div>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html ng-app="pelotonApp">
<head>
<style>
</style>
<base target="_top">
<script src="https://code.jquery.com/jquery-2.2.4.min.js"><\/script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"><\/script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"><\/script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script>
String.prototype.toMS=function(){
var sec=parseInt(this,10);
var min=0;
if(sec>60){
min=Math.floor(sec/60);
sec%=60;
}
return ((min>0)?min+"m":"")+sec+"s";
}
String.prototype.toMMSS = function () {
var sec_num = parseInt(this, 10); // don't forget the second param
var minutes = Math.floor((sec_num ) / 60);
var seconds = sec_num - (minutes * 60);
if (minutes < 10) {minutes = minutes;}
if (seconds < 10) {seconds = "0"+seconds;}
return minutes+':'+seconds;
}
angular.module('pelotonApp', [])
.controller('PelotonUserController', function($scope) {
var pelotonController = this;
pelotonController.started=false;
pelotonController.now=0;
pelotonController.toggleStart=function(){
pelotonController.started=!pelotonController.started;
}
pelotonController.reset=function(){
pelotonController.now=0;
}
pelotonController.forward=function(n){
pelotonController.now+=n
;
}
pelotonController.backward=function(n){
pelotonController.now-=n;
}
setInterval(function(){
if(pelotonController.started){
pelotonController.now++;
$scope.$digest();
}
},1000);
pelotonController.sections=[
{ name: 'Flat Road', start: 0, end: 119, intervals:[
{start: 0, end: 119, zone:1}
]},
{ name: 'Spin-ups', start: 120, end: 284, intervals:[
{start: 120, end: 149, zone:2},
{start: 150, end: 164, zone:1},
{start: 165, end: 194, zone:3},
{start: 195, end: 209, zone:1},
{start: 210, end: 239, zone:3},
{start: 240, end: 254, zone:1},
{start: 255, end: 284, zone:4}
]},
{ name: 'Build', start: 285, end: 689, intervals:[
{start: 285, end: 389, zone:1},
{start: 390, end: 449, zone:2},
{start: 450, end: 509, zone:3},
{start: 510, end: 569, zone:4},
{start: 570, end: 599, zone:5},
{start: 600, end: 689, zone:1}
]},
{ name: 'Christmas', start: 690, end: 1049, intervals:[
{start: 690, end: 719, zone:2},
{start: 720, end: 749, zone:3},
{start: 750, end: 779, zone:4},
{start: 780, end: 809, zone:5},
{start: 810, end: 839, zone:6},
{start: 840, end: 869, zone:5},
{start: 870, end: 899, zone:4},
{start: 900, end: 929, zone:3},
{start: 930, end: 959, zone:2},
{start: 960, end: 1049, zone:1}
]},
{ name: 'Hannukah', start: 1050, end: 1679, intervals:[
{start: 1050, end: 1079, zone:3},
{start: 1080, end: 1124, zone:1},
{start: 1125, end: 1154, zone:3},
{start: 1155, end: 1199, zone:1},
{start: 1200, end: 1229, zone:3},
{start: 1230, end: 1274, zone:1},
{start: 1275, end: 1304, zone:3},
{start: 1305, end: 1349, zone:1},
{start: 1350, end: 1379, zone:6},
{start: 1380, end: 1424, zone:1},
{start: 1425, end: 1454, zone:3},
{start: 1455, end: 1499, zone:1},
{start: 1500, end: 1529, zone:3},
{start: 1530, end: 1574, zone:1},
{start: 1575, end: 1604, zone:3},
{start: 1605, end: 1649, zone:1},
{start: 1650, end: 1679, zone:3}
]},
{ name: 'Flat Road', start: 1680, end: 1799, intervals:[
{start: 1680, end: 1799, zone:1}
]}
];
pelotonController.incrementalPull=function(){
};
});
<\/script>
</head>
<body ng-controller="PelotonUserController as peloton" >
<div class="card">
<div class="card-header">Peloton</div>
<div class="card-body">
<h3><i class="fa fa-bicycle"></i> DIY Power Zone Ride</h3>
<button ng-click="peloton.toggleStart()"
class="badge badge-pill badge-secondary">
<span ng-if="peloton.started"><i class="fa fa-pause"></i> Pause</span>
<span ng-if="!peloton.started"><i class="fa fa-play"></i> Start</span></button>
<button ng-click="peloton.reset()"
class="badge badge-pill badge-secondary"><i class="fa fa-refresh"></i> Reset Timer</span></button>
<button ng-click="peloton.forward(15)"
class="badge badge-pill badge-secondary"><i class="fa fa-forward"></i> +15s</span></button>
<button ng-click="peloton.backward(15)"
class="badge badge-pill badge-secondary"><i class="fa fa-backward"></i> -15s</span></button>
<h1 class="danger">{{(""+peloton.now).toMMSS()}}</h1>
<div ng-repeat="section in peloton.sections">
<h5> {{section.name}} </h5>
<small><i class="fa fa-clock-o" ></i>
{{(""+section.start).toMMSS()}} - {{(""+section.end).toMMSS()}}</small>
<ul>
<li ng-repeat="i in section.intervals">
<div ng-class="{'bg-warning':(peloton.now>=i.start&&peloton.now<=i.end)}">{{(""+i.start).toMMSS() }} Z{{i.zone}}- {{(""+(i.end-i.start +1)).toMS()}} </div>
</li>
</ul>
</div>
</div>
<div class="card-footer">
</div>
</div>
</body>
</html> </script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment