krzysiej/countdown-timer
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

initial countdown commit

Browse Source
This commit is contained in:
kplaczek
2019-07-01 23:26:52 +02:00
parent fc9a3b5f44
commit e249b7d5b3
2 changed files with 116 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored Normal file
View File

@@ -0,0 +1 @@
.idea

115
index.html Normal file
View File

@@ -0,0 +1,115 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Countdown timer</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/dark.min.css">
<script src="https://vuejs.org/js/vue.js"></script>
<style>
table tbody tr:nth-child(2n) {
background-color: transparent;
}
</style>
</head>
<body>
<div id="app">
<h1>Countdown</h1>
<button @click="newTimer=!newTimer">Add new timer</button>
<div v-if="newTimer">
<div>
<input type="time" id="newTimerValue">
<button @click="addTimer">Add timer</button>
</div>
</div>
<table>
<tr v-for="(timer, key) of timers">
<td><h3>{{ formatTime(timer.currentTime) }}</h3></td>
<td>
<button @click="start(timer)" v-if="timer.state == 'stop'">Start</button>
<button @click="remove(key)" v-if="timer.state == 'stop'">Remove</button>
<button @click="cont(timer)" v-if="timer.state == 'pause'">Continue</button>
<button @click="reset(key)" v-if="timer.state == 'pause'">Reset</button>
<button @click="pause(timer)" v-if="timer.state == 'start'">Pause</button>
<button @click="stop(key)" v-if="timer.state == 'start'">Stop</button>
</td>
</tr>
</table>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
timers: [
{name: '', hours: 0, originalTime: 60, currentTime: 60, state: 'stop'},
{name: '', hours: 0, originalTime: 120, currentTime: 120, state: 'stop'},
{name: '', hours: 0, originalTime: 180, currentTime: 180, state: 'stop'},
],
newTimer: false
},
created: function () {
setInterval(function () {
for (let timer of this.timers) {
if (timer.state == 'start') {
if (timer.currentTime > 0) {
timer.currentTime--;
} else {
timer.state = "stop";
timer.currentTime = timer.originalTime;
window.navigator.vibrate([200, 200, 200, 200, 600]);
}
}
}
}.bind(this), 1000);
},
methods: {
formatTime: function (currentTime) {
let hours = parseInt(currentTime / 3600, 10);
currentTime -= hours * 3600;
let minutes = parseInt(currentTime / 60, 10);
let seconds = parseInt(currentTime % 60, 10);
hours = hours < 10 ? "0" + hours : hours;
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
return hours + ":" + minutes + ":" + seconds;
},
start: function (timer) {
console.info(timer);
timer.state = "start";
},
remove: function (timerId) {
console.info(timerId);
this.timers.splice(timerId, 1);
},
reset: function (timerId) {
this.timers[timerId].state = 'stop';
this.timers[timerId].currentTime = this.timers[timerId].originalTime;
console.info(this.timers[timerId]);
},
pause: function (timer) {
timer.state = 'pause';
},
stop: function (timerId) {
this.timers[timerId].state = 'stop';
this.timers[timerId].currentTime = this.timers[timerId].originalTime;
},
cont: function (timer) {
timer.state = 'start';
},
addTimer: function () {
console.info(document.querySelector('#newTimerValue').value.split(':'));
if (document.querySelector('#newTimerValue').value) {
let time = document.querySelector('#newTimerValue').value.split(':');
let seconds = parseInt(time[0], 10) * 3600 + parseInt(time[1], 10) * 60;
this.timers.push({name: 'timer', state: 'stop', originalTime: seconds, currentTime: seconds});
}
}
}
})
</script>
</body>
</html>