Created
December 9, 2020 20:20
-
-
Save DovOps/6f10301ac275989d22cf65040df33a12 to your computer and use it in GitHub Desktop.
// source https://jsbin.com/xabucot
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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