Skip to content

Instantly share code, notes, and snippets.

@DovOps

DovOps/index.html

Created December 9, 2020 20:37
Show Gist options
  • Save DovOps/c4cb3e4448396c65487650c6ecaa6ece to your computer and use it in GitHub Desktop.
Save DovOps/c4cb3e4448396c65487650c6ecaa6ece 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">
<style>
.zone1{
background-color:#EAEAEA;
color: #000;
}
.zone2{
background-color:#82BA6A;
color: #000;
}
.zone3{
background-color:#FEE087;
color: #000;
}
.zone4{
background-color:#F8B00B;
}
.zone5{
background-color:#FD8668;
}
.zone6{
background-color:#F15236;
}
.zone7{
background-color:#E00006;
}
</style>
<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 (leadingzero) {
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 && leadingzero) {minutes = "0"+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 style='padding: 10px 10px 10px 10px' ng-controller="PelotonUserController as peloton" >
<div class="sticky-top bg-white">
<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.backward(15)"
class="badge badge-pill badge-secondary"><i class="fa fa-backward"></i> -15s</span></button>
<button ng-click="peloton.forward(15)"
class="badge badge-pill badge-secondary"><i class="fa fa-forward"></i> +15s</span></button>
<h1 style="font-size:80px" class="text-danger">{{(""+peloton.now).toMMSS(true)}}</h1>
</div>
<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-class="{'bg-success':(peloton.now>=i.start&&peloton.now<=i.end)}" ng-repeat="i in section.intervals">
<div style="padding: 2px 2px 2px 2px">{{(""+i.start).toMMSS() }} <span class="zone{{i.zone}} badge badge-pill badge-danger">Zone {{i.zone}}</span>- {{(""+(i.end-i.start +1)).toMS()}} </div>
</li>
</ul>
</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">
<style>
.zone1{
background-color:#EAEAEA;
color: #000;
}
.zone2{
background-color:#82BA6A;
color: #000;
}
.zone3{
background-color:#FEE087;
color: #000;
}
.zone4{
background-color:#F8B00B;
}
.zone5{
background-color:#FD8668;
}
.zone6{
background-color:#F15236;
}
.zone7{
background-color:#E00006;
}
</style>
<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 (leadingzero) {
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 && leadingzero) {minutes = "0"+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 style='padding: 10px 10px 10px 10px' ng-controller="PelotonUserController as peloton" >
<div class="sticky-top bg-white">
<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.backward(15)"
class="badge badge-pill badge-secondary"><i class="fa fa-backward"></i> -15s</span></button>
<button ng-click="peloton.forward(15)"
class="badge badge-pill badge-secondary"><i class="fa fa-forward"></i> +15s</span></button>
<h1 style="font-size:80px" class="text-danger">{{(""+peloton.now).toMMSS(true)}}</h1>
</div>
<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-class="{'bg-success':(peloton.now>=i.start&&peloton.now<=i.end)}" ng-repeat="i in section.intervals">
<div style="padding: 2px 2px 2px 2px">{{(""+i.start).toMMSS() }} <span class="zone{{i.zone}} badge badge-pill badge-danger">Zone {{i.zone}}</span>- {{(""+(i.end-i.start +1)).toMS()}} </div>
</li>
</ul>
</div>
</body>
</html> </script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment