Timers are now saved by cookies (limit 1). This should probably get changed to use IndexedDB later.
This commit is contained in:
parent
7ccbec3822
commit
7ff49cbde0
3 changed files with 189 additions and 178 deletions
|
|
@ -9,7 +9,7 @@ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockq
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
font-family: Helvetica;
|
font-family: Helvetica, Arial, sans-serif;
|
||||||
margin: -20px 0 0;
|
margin: -20px 0 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
|
|
|
||||||
10
index.html
10
index.html
|
|
@ -34,16 +34,16 @@
|
||||||
<label>Timer Name:</label>
|
<label>Timer Name:</label>
|
||||||
<input type="text" ng-model="timer.name">
|
<input type="text" ng-model="timer.name">
|
||||||
<label>Warm Up:</label>
|
<label>Warm Up:</label>
|
||||||
<input type="number" ng-model="warmUpTime">
|
<input type="number" ng-model="timer.warmUpTime">
|
||||||
<label>Low Intensity:</label>
|
<label>Low Intensity:</label>
|
||||||
<input type="number" ng-model="lowIntensityTime">
|
<input type="number" ng-model="timer.lowIntensityTime">
|
||||||
<label>High Intensity:</label>
|
<label>High Intensity:</label>
|
||||||
<input type="number" ng-model="highIntensityTime">
|
<input type="number" ng-model="timer.highIntensityTime">
|
||||||
<label>Cool Down:</label>
|
<label>Cool Down:</label>
|
||||||
<input type="number" ng-model="coolDownTime">
|
<input type="number" ng-model="timer.coolDownTime">
|
||||||
<label>Rounds:</label>
|
<label>Rounds:</label>
|
||||||
<input type="number" ng-model="timer.cycles">
|
<input type="number" ng-model="timer.cycles">
|
||||||
<a class="form-button" id="save" ng-click="settingsOpen = false; closeSettings = true; time = warmUpTime; resetTimer()" href="#"> Save Changes</a>
|
<a class="form-button" id="save" ng-click="settingsOpen = false; closeSettings = true; time = warmUpTime; resetTimer(); saveTimer()" href="#"> Save Changes</a>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
|
|
|
||||||
355
js/app.js
355
js/app.js
|
|
@ -3,178 +3,189 @@
|
||||||
// }
|
// }
|
||||||
|
|
||||||
(function() {
|
(function() {
|
||||||
var app = angular.module('interval-timer', []);
|
var app = angular.module('interval-timer', [ 'ngCookies' ]);
|
||||||
|
// var db;
|
||||||
// var db;
|
// var request = window.indexedDB.open("myTimers", 1);
|
||||||
// var request = window.indexedDB.open("myTimers", 1);
|
// request.onerror = function(event) {
|
||||||
// request.onerror = function(event) {
|
// alert("Error: " + event.target.errorCode);
|
||||||
// alert("Error: " + event.target.errorCode);
|
// };
|
||||||
// };
|
// request.onupgradeneeded = function(event) {
|
||||||
// request.onupgradeneeded = function(event) {
|
// db = event.target.result;
|
||||||
// db = event.target.result;
|
// var objectStore = db.createObjectStore("timers", { autoIncrement: true });
|
||||||
// var objectStore = db.createObjectStore("timers", { autoIncrement: true });
|
// objectStore.createIndex("name", "name", { unique: false });
|
||||||
// objectStore.createIndex("name", "name", { unique: false });
|
// objectStore.createIndex("high_intensity", "high_intensity", { unique: false });
|
||||||
// objectStore.createIndex("high_intensity", "high_intensity", { unique: false });
|
// objectStore.createIndex("low_intensity", "low_intensity", { unique: false });
|
||||||
// objectStore.createIndex("low_intensity", "low_intensity", { unique: false });
|
// objectStore.createIndex("cycles", "cycles", { unique: false });
|
||||||
// objectStore.createIndex("cycles", "cycles", { unique: false });
|
// objectStore.transaction.oncomplete = function(event) {};
|
||||||
// objectStore.transaction.oncomplete = function(event) {};
|
// };
|
||||||
// };
|
// request.onsuccess = function(event) {
|
||||||
// request.onsuccess = function(event) {
|
// db = event.target.result;
|
||||||
// db = event.target.result;
|
// };
|
||||||
// };
|
// var transaction = db.transaction(["timers"], "readwrite");
|
||||||
// var transaction = db.transaction(["timers"], "readwrite");
|
var defaultTimer = {
|
||||||
var timer = {
|
"name" : "Tabata",
|
||||||
"name" : "Tabata",
|
"warmUpTime": 300,
|
||||||
"warm_up": 300,
|
"highIntensityTime" : 20,
|
||||||
"high_intensity" : 20,
|
"lowIntensityTime" : 10,
|
||||||
"low_intensity" : 10,
|
"coolDownTime" : 300,
|
||||||
"cool_down" : 300,
|
"cycles" : 8,
|
||||||
"cycles" : 8,
|
"repeat": 6
|
||||||
"repeat": 6
|
|
||||||
};
|
};
|
||||||
var countDown;
|
app.controller('timerCtrl', ['$scope', '$cookies', function($scope, $cookies) {
|
||||||
app.controller('timerCtrl', ['$scope', function($scope){
|
$scope.defaults = defaultTimer;
|
||||||
$scope.lowIntensityBeep = new Audio('audio/beep-09.mp3');
|
function getSavedTimer() {
|
||||||
$scope.highIntensityBeep = new Audio('audio/button-42(1).mp3');
|
var savedTimer = $cookies.getObject("timer");
|
||||||
$scope.coolDownBeep = new Audio('audio/beep-10.mp3');
|
console.log(typeof savedTimer == "object");
|
||||||
$scope.round = 1;
|
if (typeof savedTimer == "object") {
|
||||||
$scope.cycle = 1;
|
return savedTimer;
|
||||||
$scope.timer = timer;
|
} else {
|
||||||
$scope.warmUpTime = timer.warm_up;
|
return $scope.defaults;
|
||||||
$scope.lowIntensityTime = timer.low_intensity;
|
}
|
||||||
$scope.highIntensityTime = timer.high_intensity;
|
};
|
||||||
$scope.coolDownTime = timer.cool_down;
|
$scope.timer = getSavedTimer();
|
||||||
$scope.warmUp = true;
|
console.log($scope.timer);
|
||||||
$scope.time = $scope.warmUpTime;
|
$scope.lowIntensityBeep = new Audio('audio/beep-09.mp3');
|
||||||
$scope.settingsOpen = false;
|
$scope.highIntensityBeep = new Audio('audio/button-42(1).mp3');
|
||||||
$scope.closeSettings = false;
|
$scope.coolDownBeep = new Audio('audio/beep-10.mp3');
|
||||||
$scope.setWarmUp = function() {
|
$scope.warmUp = true;
|
||||||
clearInterval($scope.countdown);
|
$scope.round = 1;
|
||||||
$scope.warmUp = true;
|
$scope.time = $scope.timer.warmUpTime;
|
||||||
$scope.time = $scope.warmUpTime;
|
$scope.settingsOpen = false;
|
||||||
$scope.startTimer();
|
$scope.closeSettings = false;
|
||||||
}
|
$scope.setWarmUp = function() {
|
||||||
$scope.setCoolDown = function() {
|
clearInterval($scope.countdown);
|
||||||
clearInterval($scope.countdown);
|
$scope.warmUp = true;
|
||||||
$scope.coolDown = true;
|
$scope.time = $scope.timer.warmUpTime;
|
||||||
$scope.time = $scope.coolDownTime;
|
$scope.startTimer();
|
||||||
$scope.coolDownBeep.play();
|
}
|
||||||
$scope.startTimer();
|
$scope.setCoolDown = function() {
|
||||||
}
|
clearInterval($scope.countdown);
|
||||||
$scope.setLowIntensity = function() {
|
$scope.coolDown = true;
|
||||||
clearInterval($scope.countdown);
|
$scope.time = $scope.timer.coolDownTime;
|
||||||
$scope.lowIntensity = true;
|
$scope.coolDownBeep.play();
|
||||||
$scope.time = $scope.lowIntensityTime;
|
$scope.startTimer();
|
||||||
$scope.lowIntensityBeep.play();
|
}
|
||||||
$scope.startTimer();
|
$scope.setLowIntensity = function() {
|
||||||
}
|
clearInterval($scope.countdown);
|
||||||
$scope.setHighIntensity = function() {
|
$scope.lowIntensity = true;
|
||||||
clearInterval($scope.countdown);
|
$scope.time = $scope.timer.lowIntensityTime;
|
||||||
$scope.highIntensity = true;
|
$scope.lowIntensityBeep.play();
|
||||||
$scope.time = $scope.highIntensityTime;
|
$scope.startTimer();
|
||||||
$scope.highIntensityBeep.play();
|
}
|
||||||
$scope.startTimer();
|
$scope.setHighIntensity = function() {
|
||||||
}
|
clearInterval($scope.countdown);
|
||||||
$scope.startLowIntensity = function() {
|
$scope.highIntensity = true;
|
||||||
if ($scope.time == 0) {
|
$scope.time = $scope.timer.highIntensityTime;
|
||||||
$scope.lowIntensity = false;
|
$scope.highIntensityBeep.play();
|
||||||
$scope.setHighIntensity();
|
$scope.startTimer();
|
||||||
};
|
}
|
||||||
$scope.$apply(function() {
|
$scope.startLowIntensity = function() {
|
||||||
$scope.time--;
|
if ($scope.time == 0) {
|
||||||
});
|
$scope.lowIntensity = false;
|
||||||
};
|
$scope.setHighIntensity();
|
||||||
$scope.startHighIntensity = function() {
|
};
|
||||||
if ($scope.time == 0) {
|
$scope.$apply(function() {
|
||||||
$scope.round++;
|
$scope.time--;
|
||||||
$scope.highIntensity = false;
|
});
|
||||||
if ($scope.round < $scope.timer.cycles) {
|
};
|
||||||
$scope.setLowIntensity();
|
$scope.startHighIntensity = function() {
|
||||||
} else {
|
if ($scope.time == 0) {
|
||||||
$scope.cycle++;
|
$scope.round++;
|
||||||
if ($scope.cycle < $scope.timer.repeat) {
|
$scope.highIntensity = false;
|
||||||
$scope.warmUp = true;
|
if ($scope.round < $scope.timer.cycles) {
|
||||||
} else {
|
$scope.setLowIntensity();
|
||||||
$scope.coolDown = true;
|
} else {
|
||||||
|
$scope.cycle++;
|
||||||
|
if ($scope.cycle < $scope.timer.repeat) {
|
||||||
|
$scope.warmUp = true;
|
||||||
|
} else {
|
||||||
|
$scope.coolDown = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
$scope.$apply(function() {
|
||||||
|
$scope.time--;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
$scope.startTimer = function() {
|
||||||
|
$scope.timerActive = true;
|
||||||
|
if ($scope.warmUp) {
|
||||||
|
$scope.countdown = setInterval($scope.startHighIntensity, 1000);
|
||||||
}
|
}
|
||||||
}
|
if ($scope.coolDown) {
|
||||||
};
|
$scope.countdown = setInterval($scope.startHighIntensity, 1000);
|
||||||
$scope.$apply(function() {
|
}
|
||||||
$scope.time--;
|
if ($scope.highIntensity) {
|
||||||
});
|
$scope.countdown = setInterval($scope.startHighIntensity, 1000);
|
||||||
};
|
}
|
||||||
$scope.startTimer = function() {
|
if ($scope.lowIntensity) {
|
||||||
$scope.timerActive = true;
|
$scope.countdown = setInterval($scope.startLowIntensity, 1000);
|
||||||
if ($scope.warmUp) {
|
}
|
||||||
$scope.countdown = setInterval($scope.startHighIntensity, 1000);
|
};
|
||||||
}
|
$scope.pauseTimer = function() {
|
||||||
if ($scope.coolDown) {
|
$scope.timerActive = false;
|
||||||
$scope.countdown = setInterval($scope.startHighIntensity, 1000);
|
clearInterval($scope.countdown);
|
||||||
}
|
};
|
||||||
if ($scope.highIntensity) {
|
$scope.stepBack = function() {
|
||||||
$scope.countdown = setInterval($scope.startHighIntensity, 1000);
|
if ($scope.lowIntensity) {
|
||||||
}
|
$scope.lowIntensity = false;
|
||||||
if ($scope.lowIntensity) {
|
if ($scope.round == 1) {
|
||||||
$scope.countdown = setInterval($scope.startLowIntensity, 1000);
|
$scope.setWarmUp();
|
||||||
}
|
return;
|
||||||
};
|
}
|
||||||
$scope.pauseTimer = function() {
|
$scope.setHighIntensity();
|
||||||
$scope.timerActive = false;
|
$scope.round--;
|
||||||
clearInterval($scope.countdown);
|
return;
|
||||||
};
|
};
|
||||||
$scope.stepBack = function() {
|
if ($scope.highIntensity) {
|
||||||
if ($scope.lowIntensity) {
|
$scope.highIntensity = false;
|
||||||
$scope.lowIntensity = false;
|
$scope.setLowIntensity();
|
||||||
if ($scope.round == 1) {
|
return;
|
||||||
$scope.setWarmUp();
|
};
|
||||||
return;
|
if ($scope.coolDown) {
|
||||||
}
|
$scope.coolDown = false;
|
||||||
$scope.setHighIntensity();
|
$scope.setHighIntensity();
|
||||||
$scope.round--;
|
return;
|
||||||
return;
|
}
|
||||||
};
|
};
|
||||||
if ($scope.highIntensity) {
|
$scope.stepForward = function() {
|
||||||
$scope.highIntensity = false;
|
if ($scope.warmUp) {
|
||||||
$scope.setLowIntensity();
|
$scope.warmUp = false;
|
||||||
return;
|
$scope.setLowIntensity();
|
||||||
};
|
return;
|
||||||
if ($scope.coolDown) {
|
}
|
||||||
$scope.coolDown = false;
|
if ($scope.lowIntensity) {
|
||||||
$scope.setHighIntensity();
|
$scope.lowIntensity = false;
|
||||||
return;
|
$scope.setHighIntensity();
|
||||||
}
|
return;
|
||||||
};
|
};
|
||||||
$scope.stepForward = function() {
|
if ($scope.highIntensity) {
|
||||||
if ($scope.warmUp) {
|
$scope.highIntensity = false;
|
||||||
$scope.warmUp = false;
|
if ($scope.round == $scope.timer.cycles) {
|
||||||
$scope.setLowIntensity();
|
$scope.setCoolDown();
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
if ($scope.lowIntensity) {
|
$scope.setLowIntensity();
|
||||||
$scope.lowIntensity = false;
|
$scope.round++;
|
||||||
$scope.setHighIntensity();
|
return;
|
||||||
return;
|
};
|
||||||
};
|
};
|
||||||
if ($scope.highIntensity) {
|
$scope.resetTimer = function() {
|
||||||
$scope.highIntensity = false;
|
clearInterval($scope.countdown);
|
||||||
if ($scope.round == $scope.timer.cycles) {
|
$scope.timerActive = false;
|
||||||
$scope.setCoolDown();
|
$scope.round = 1;
|
||||||
return;
|
$scope.lowIntensity = false;
|
||||||
}
|
$scope.highIntensity = false;
|
||||||
$scope.setLowIntensity();
|
$scope.coolDown = false;
|
||||||
$scope.round++;
|
$scope.warmUp = true;
|
||||||
return;
|
$scope.time = $scope.timer.warmUpTime;
|
||||||
};
|
};
|
||||||
};
|
$scope.saveTimer = function() {
|
||||||
$scope.resetTimer = function() {
|
console.log("Saved timer:");
|
||||||
clearInterval($scope.countdown);
|
console.log($scope.timer);
|
||||||
$scope.timerActive = false;
|
$cookies.putObject("timer", $scope.timer);
|
||||||
$scope.round = 1;
|
console.log("timer saved");
|
||||||
$scope.lowIntensity = false;
|
console.log($cookies.getObject("timer"));
|
||||||
$scope.highIntensity = false;
|
};
|
||||||
$scope.coolDown = false;
|
}]);
|
||||||
$scope.warmUp = true;
|
|
||||||
$scope.time = $scope.warmUpTime;
|
|
||||||
};
|
|
||||||
}]);
|
|
||||||
})();
|
})();
|
||||||
Loading…
Reference in a new issue