From e249b7d5b33b4e2682cd228aef585c4329bb100b Mon Sep 17 00:00:00 2001
From: kplaczek <kplaczek@wi.ps.pl>
Date: Mon, 1 Jul 2019 23:26:52 +0200
Subject: [PATCH] initial countdown commit

---
 .gitignore |   1 +
 index.html | 115 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 116 insertions(+)
 create mode 100644 .gitignore
 create mode 100644 index.html
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..1ef8759
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1 @@
+.idea 
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..4e0d745
--- /dev/null
+++ b/index.html
@@ -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>
\ No newline at end of file
