wbrawner/interval-timer
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages 1 Wiki Activity Actions

Improved the pre-loader, fixed the caching, added rest intervals, other improvements

Browse source
This commit is contained in:
William Brawner 2016-09-18 20:16:18 +00:00
parent f0cd807bbc
commit d7d30b46c0
4 changed files with 176 additions and 52 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

39
css/styles.css
View file

@ -13,6 +13,7 @@ body {
padding: 0;
height: 100vh;
width: 100vw;
position: relative;
overflow: hidden;
}
@ -21,6 +22,7 @@ a:link, a:hover, a:visited, a:active {
}
.no-timers {
display: block;
padding: 20px;
text-align: center;
font-weight: normal;
@ -28,9 +30,8 @@ a:link, a:hover, a:visited, a:active {
}
.timers {
overflow: hidden;
position: relative;
margin-top: 60px;
padding-top: 60px;
}
.timer {
@ -96,6 +97,7 @@ a:link, a:hover, a:visited, a:active {
}
.timer-interface {
display: none;
position: absolute;
top: 0;
left: 0;
@ -183,6 +185,7 @@ a:link, a:hover, a:visited, a:active {
header {
position: absolute;
z-index: 999;
top: 0;
height: 60px;
text-align: center;
@ -322,18 +325,23 @@ button.add-timer {
}
.new-timer {
position: absolute;
position: fixed;
top: 100%;
padding: 0;
width: 100vw;
z-index: 99;
z-index: 999;
background: #fff;
height: 100vh;
min-height: 100vh;
opacity: 0;
}
.new-timer.slideUp .top-menu {
position: fixed;
}
#timer-setup {
margin-top: 70px;
overflow: scroll;
padding-top: 62px;
}
#timer-setup input, #timer-setup textarea, #timer-setup select {
@ -433,16 +441,29 @@ button.add-timer {
opacity: 0;
}
@keyframes loaderSpin {
100% {transform: rotate(360deg);}
100% {transform: translateX(-50%) rotate(360deg);}
}
.loader {
animation: loaderSpin 1s linear infinite;
animation: loaderSpin 0.25s linear infinite;
width: 50px;
position: absolute;
top: 100px;
left: 50%;
transform: translateX(-50%);
transform: translateX(-50%) rotate(0);
display: block;
z-index: 9999
}
.loader-overlay {
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
background: #fff;
width: 100%;
height: 100vh;
z-index: 99;
}
.visible {

3
index.html
View file

@ -56,7 +56,8 @@
</header>
<div class="timers">
<img class="loader" src="img/spinner.png" ng-hide="timersLoaded" />
<div class="no-timers" ng-show="noTimers">
<div class="loader-overlay" ng-hide="timersLoaded"></div>
<div class="no-timers" ng-hide="noTimers">
<h3>It looks like you haven't configured any timers yet. Click on the orange "+" icon below to get started!</h3>
</div>
<div class="timer animate-repeat" ng-repeat="timerInstance in getTimers()" item-swipe="" on-remove="deleteTimer(timerInstance)" ng-class="{'removed': timerInstance.removed}">

81
js/app.js
View file

@ -13,20 +13,36 @@ if (!window.indexedDB) {
})
});
var defaultTimer = {
"name" : "Tabata",
"description" : "A short, yet very intense workout best completed with multiple cycles",
"warmUp.min": 5,
"warmUp.sec": 0,
"highIntensity.min" : 0,
"highIntensity.sec" : 20,
"lowIntensity.min" : 0,
"lowIntensity.sec" : 10,
"rest.min" : 5,
"rest.sec" : 0,
"coolDown.min" : 5,
"coolDown.sec" : 0,
"rounds" : 8,
"cycles": 6
"id": 0,
"name": "",
"description": "",
"warmUp" : {
"min": 0,
"sec": 0,
"time": 0
},
"highIntensity" : {
"min": 0,
"sec": 0,
"time": 0
},
"lowIntensity" : {
"min": 0,
"sec": 0,
"time": 0
},
"coolDown" : {
"min": 0,
"sec": 0,
"time": 0
},
"rest" : {
"min": 0,
"sec": 0,
"time": 0
},
"rounds": 1,
"cycles": 1
};
app.controller('timerCtrl', ['$scope', '$cookies', '$indexedDB', function($scope, $cookies, $indexedDB) {
$scope.defaults = defaultTimer;
@ -61,17 +77,18 @@ if (!window.indexedDB) {
$indexedDB.openStore('timers', function(timers) {
timers.getAll()
.then(function(data) {
$scope.timersLoaded = true;
$scope.timers = data;
if (data.length == 0) {
$scope.noTimers = true;
} else {
$scope.noTimers = false;
} else {
$scope.noTimers = true;
}
$scope.timersLoaded = true;
})
})
}
$scope.setTimers();
console.log("noTimers: " + $scope.noTimers);
$scope.timer = {};
$scope.config = {};
$scope.initObj = new Promise(function(res, rej) {
@ -95,7 +112,10 @@ if (!window.indexedDB) {
$scope.newTimerOpen = false;
$scope.newTimerClosed = false;
$scope.showTimerInterface = false;
$scope.setPeriod = function(period, playBeep = true) {
$scope.setPeriod = function(period, playBeep) {
if (typeof period == "undefined") {
period = true;
}
clearInterval($scope.countdown);
$scope[period].active = true;
$scope.time = $scope.timer[period].time;
@ -188,7 +208,8 @@ if (!window.indexedDB) {
$scope.getTimes = function() {
$scope.periods.forEach(function(period) {
var min = 0;
if (typeof $scope.timer[period].min == "number") {
console.log(period)
if (typeof $scope.timer[period].min == "number" && $scope.timer[period].min > 0) {
min = $scope.timer[period].min * 60;
}
var sec = $scope.timer[period].sec;
@ -362,9 +383,27 @@ if (!window.indexedDB) {
$scope.newTimerClosed = false;
$scope.newTimerOpen = true;
}
$scope.validateNewTimer = function(newTimer) {
timerSkel = $scope.defaults;
angular.merge(timerSkel, newTimer);
if (timerSkel.rounds < 1) {
timerSkel.rounds = 1;
}
if (timerSkel.cycles < 1) {
timerSkel.cycles = 1;
}
console.log(timerSkel)
return new Promise(function(res, rej) {
res(timerSkel);
})
}
$scope.saveNewTimer = function() {
$scope.saveTimer();
$scope.closeNewTimer();
$scope.validateNewTimer($scope.newTimer)
.then(function(newTimer) {
$scope.newTimer = newTimer;
$scope.saveTimer();
$scope.closeNewTimer();
})
}
$scope.closeNewTimer = function() {
$scope.newTimerOpen = false;

105
sw.js
View file

@ -2,27 +2,90 @@ self.addEventListener('install', function(e) {
e.waitUntil(
caches.open('wbrawner-interval-timer').then(function(cache) {
return cache.addAll([
'/',
'/audio/beep-10.mp3',
'/audio/beep-09.mp3',
'/audio/button-42(1).mp3',
'/css/addtohomescreen.css',
'/css/font-awesome.min.css',
'/css/styles.css',
'/fonts/fontawesome-webfont.woff',
'/fonts/FontAwesome.otf',
'/fonts/fontawesome-webfont.svg',
'/fonts/fontawesome-webfont.woff2',
'/fonts/fontawesome-webfont.ttf',
'/fonts/fontawesome-webfont.eot',
'/index.html',
'/js/start.js',
'/js/angular-cookies.min.js',
'/js/addtohomescreen.min.js',
'/js/addtohomescreen.js',
'/js/angular.min.js',
'/js/app.js',
'/sw.js'
'/',
'/audio/beep-09.mp3',
'/audio/beep-10.mp3',
'/audio/button-42(1).mp3',
'/browserconfig.xml',
'/contributors.txt',
'/css/addtohomescreen.css',
'/css/font-awesome.min.css',
'/css/styles.css',
'/favicon.ico',
'/fonts/FontAwesome.otf',
'/fonts/fontawesome-webfont.eot',
'/fonts/fontawesome-webfont.svg',
'/fonts/fontawesome-webfont.ttf',
'/fonts/fontawesome-webfont.woff',
'/fonts/fontawesome-webfont.woff2',
'/img/action-icon-android.png',
'/img/action-icon-ios6.png',
'/img/action-icon-ios7.png',
'/img/android-chrome-144x144.png',
'/img/android-chrome-192x192.png',
'/img/android-chrome-256x256.png',
'/img/android-chrome-36x36.png',
'/img/android-chrome-384x384.png',
'/img/android-chrome-48x48.png',
'/img/android-chrome-512x512.png',
'/img/android-chrome-72x72.png',
'/img/android-chrome-96x96.png',
'/img/apple-touch-icon-114x114.png',
'/img/apple-touch-icon-114x114-precomposed.png',
'/img/apple-touch-icon-120x120.png',
'/img/apple-touch-icon-120x120-precomposed.png',
'/img/apple-touch-icon-144x144.png',
'/img/apple-touch-icon-144x144-precomposed.png',
'/img/apple-touch-icon-152x152.png',
'/img/apple-touch-icon-152x152-precomposed.png',
'/img/apple-touch-icon-180x180.png',
'/img/apple-touch-icon-180x180-precomposed.png',
'/img/apple-touch-icon-57x57.png',
'/img/apple-touch-icon-57x57-precomposed.png',
'/img/apple-touch-icon-60x60.png',
'/img/apple-touch-icon-60x60-precomposed.png',
'/img/apple-touch-icon-72x72.png',
'/img/apple-touch-icon-72x72-precomposed.png',
'/img/apple-touch-icon-76x76.png',
'/img/apple-touch-icon-76x76-precomposed.png',
'/img/apple-touch-icon.png',
'/img/apple-touch-icon-precomposed.png',
'/img/browserconfig.xml',
'/img/favicon-16x16.png',
'/img/favicon-194x194.png',
'/img/favicon-32x32.png',
'/img/favicon.ico',
'/img/favicons.zip',
'/img/icon-152x152.png',
'/img/icon-16x16.png',
'/img/icon-196x196.png',
'/img/icon.svg',
'/img/manifest.json',
'/img/menu-branding.png',
'/img/menu-logo.png',
'/img/mstile-144x144.png',
'/img/mstile-150x150.png',
'/img/mstile-310x310.png',
'/img/mstile-70x70.png',
'/img/safari-pinned-tab.svg',
'/img/spinner.png',
'/index.html',
'/js/addtohomescreen.js',
'/js/addtohomescreen.min.js',
'/js/angular-animate.min.js',
'/js/angular-cookies.min.js',
'/js/angular-indexed-db.min.js',
'/js/angular.min.js',
'/js/angular-touch.js',
'/js/angular-touch.min.js',
'/js/app.js',
'/js/item-swipe.js',
'/js/jquery-3.1.0.js',
'/js/jquery-3.1.0.min.js',
'/js/start.js',
'/manifest.json',
'/manifest.webapp',
'/sw.js'
]);
})
);