Web Timer/Clock Using Firebase

Helios

Question

I've got sample clock already working and I'm planning to make a Firebase real-time clock so whatever I do - close browser or refresh browser, the time value is always stored in database.

I can save and retrieve values from my Firebase Database using Firebase REST API
https://firebase.google.com/docs/reference/rest/database/ and the POST/GET methods of Outsystems.

How would I go about using the Firebase Component:
https://www.outsystems.com/forge/component-overview/1406/firebase

to achieve this?

Do I drag a JS Interface block and put all my Firebase Javascript code there, or is there a better Outsystems way?

Source Code for Timer (https://codingwithsara.com/stopwatch-with-javascript/#Sample_Code):

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>Stopwatch</title>
    <link href='https://fonts.googleapis.com/css?family=Inconsolata:400,700' rel='stylesheet' type='text/css'>
    <style>
        * {
            font-family: 'Inconsolata', monospace;
            font-weight: 400;
        }
        .container {
            width: 600px;
            margin: 100px auto;
        }
        h1 {
            text-align: center;
        }
        table {
            width: 100%;
            text-align: center;
        }
        th {
            font-weight: 700;
        }
        td {
            padding: 30px;
        }      
        #table01 input[type="button"] {
            width: 120px;
            height: 40px;
            background-color: mediumaquamarine;
            margin-top: 30px;
            font-size: 18px;
            font-weight: 700;
        }
        #table02 input[type="button"] , #resetAllBtn {
            width: 120px;
            height: 40px;
            background-color: lightgrey;
            font-size: 18px;
            font-weight: 700;
        }
    </style>
</head>
<body>
<div class="container">
    <h1>STOPWATCH</h1>
    <br><br>
    <table border="1" cellspacing="0" id="table01">
        <tr>
            <th>1</th>
            <th>2</th>
            <th>3</th>
        </tr>
        <tr>
            <td>
                <h2 id="timerLabel1">00:00.00</h2>
                <br>
                <input type="button" value="START" id="start1">
                <input type="button" value="RESET" id="reset1">
            </td>
            <td>
                <h2 id="timerLabel2">00:00.00</h2>
                <br>
                <input type="button" value="START" id="start2">
                <input type="button" value="RESET" id="reset2">
            </td>
            <td>
                <h2 id="timerLabel3">00:00.00</h2>
                <br>
                <input type="button" value="START" id="start3">
                <input type="button" value="RESET" id="reset3">
            </td>
        </tr>
    </table>
    <br><br>
    <table id="table02">
        <tr>
            <td><button onclick="location.href='index.html'" id="resetAllBtn">RESET</button></td>
            <td><input type="button" value="START" id="moveAllBtn"></td>
        </tr>
    </table>
     
    <script>
         
        function init() {
             
            var stopwatch1 = new Timer("timerLabel1", "start1");
            document.getElementById("start1").onclick = function(){
                stopwatch1.start();
            }
            document.getElementById("reset1").onclick = function(){
                stopwatch1.reset();
            }
             
            var stopwatch2 = new Timer("timerLabel2", "start2");
            document.getElementById("start2").onclick = function(){
                stopwatch2.start();
            }
            document.getElementById("reset2").onclick = function(){
                stopwatch2.reset();
            }
             
            var stopwatch3 = new Timer("timerLabel3", "start3");
            document.getElementById("start3").onclick = function(){
                stopwatch3.start();
            }
            document.getElementById("reset3").onclick = function(){
                stopwatch3.reset();
            }
             
             
            document.getElementById("moveAllBtn").onclick = function(){
                 
                if (document.getElementById("moveAllBtn").value == 'START') {
                    stopwatch1.status = 0;
                    stopwatch2.status = 0;
                    stopwatch3.status = 0;
                     
                } else {
                    stopwatch1.status = 1;
                    stopwatch2.status = 1;
                    stopwatch3.status = 1;
                }
                 
                stopwatch1.start();
                stopwatch2.start();
                stopwatch3.start();
                 
            }       
             
        }
         
         
        function Timer(timerLabelId, startBtnId) {
            this.status = 0;
            this.time = 0;
            this.timerLabel = document.getElementById(timerLabelId);
            this.startBtn = document.getElementById(startBtnId);
        }
         
        Timer.prototype.start = function() {
             
            if (this.status == 0) {
                this.status = 1;
                this.startBtn.value = "STOP";
                this.count();
                 
            } else {
                this.status = 0;
                this.startBtn.value = "START";
  
            }           
        }
         
        Timer.prototype.count = function() {
             
            if (this.status == 1) {
                var that = this;
                setTimeout(function(){
                    that.time++;
                    that.timerLabel.innerHTML = getTime(that.time);
                    that.count();
                }, 10);
                document.getElementById("moveAllBtn").value = 'STOP';
                 
            } else {
                document.getElementById("moveAllBtn").value = 'START';
            }
        }
         
        Timer.prototype.reset = function() {
            this.status = 0;
            this.time = 0;
            this.startBtn.value = "START";
            this.timerLabel.innerHTML = "00:00.00";
        }
         
         
        function getTime(time) {
             
            var min = Math.floor(time/100/60);
            var sec = Math.floor(time/100);
            var mSec = time%100;
             
            if (min < 10) {
                min = "0" + min;
            }
            if (sec >= 60) {
                sec = sec % 60;
            }
            if (sec < 10) {
                sec = "0" + sec;
            }
             
            return min + ":" + sec + "." + mSec;
             
        }
         
        init();
  
    </script>
</div>
</body>
</html>

09 Jan 2019

G Andrew Duthie

MVP

Did you ever figure this out? Would love to hear the solution, if so.

04 Mar 2019

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.

See the full guidelines