<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Time Tracker | leemorgan.io</title>
        <style>
            *{margin:0;padding:0;}
            body{
                display: flex;
                flex-direction: column;
                max-width: 500px;
            }
            body > *{margin: 15px;}
        </style>
    </head>
    <body>
        <input id="name" type="text" placeholder="NAME">

        <input id="project" type="text" placeholder="PROJECT">

        <textarea id="description" placeholder="DESCRIPTION"></textarea>

        <button id="startStop" onclick="startStop()">Start</button>

        <button id="pause" style="display:none" onclick="pause()">Pause</button>

        <script>
            let tracker = null

            let startStop = ()=>{
                if(!tracker){
                    let time = new Date();

                    fetch("/tracker", {
                        method: "post",
                        headers: {
                            "Content-Type": "application/json",
                        },
                        body: JSON.stringify({
                            name: document.getElementById("name").value,
                            project: document.getElementById("project").value,
                            description: document.getElementById("description").value,
                            start: time
                        })
                    })
                        .then(r=>r.json())
                        .then((response)=>{
                            if(typeof(response) === "string"){
                                console.error(response);
                            }else{
                                document.getElementById("startStop").innerText = "Stop";
                                document.getElementById("pause").style.display = "block";
                                tracker = response;
                            }
                        }).catch((err)=>{
                            console.error(err);
                        });
                }else{
                    let time = new Date();

                    fetch("/tracker", {
                        method: "put",
                        headers: {
                            "Content-Type": "application/json"
                        },
                        body: JSON.stringify({
                            id: tracker._id,
                            end: time
                        })
                    })
                        .then(r=>r.json())
                        .then((response)=>{
                            if(typeof(response) === "string"){
                                console.error(response);
                            }else{
                                document.getElementById("startStop").innerText = "Start";
                                document.getElementById("pause").style.display = "none";
                                tracker = null;
                            }
                        })
                        .catch((err)=>{
                            console.error(err);
                        });
                }
            }

            let pause = ()=>{
                let pause = {
                    start: new Date(),
                    end: ""
                };

                tracker.pauses.push(pause);

                let pauseButton = document.getElementById("pause");
                document.getElementById("startStop").style.display = "none";
                pauseButton.innerText = "Resume";
                pauseButton.onclick = ()=>{resume(pause)};
            }

            let resume = (pause)=>{
                pause.end = new Date();

                fetch("/tracker", {
                    method: "put",
                    headers: {
                        "Content-Type": "application/json"
                    },
                    body: JSON.stringify({
                        id: tracker._id,
                        pause: pause
                    })
                })
                    .then(r=>r.json())
                    .then((response)=>{
                        if(typeof(response) === "response"){
                            console.error(response);
                        }else{
                            let pauseButton = document.getElementById("pause");
                            document.getElementById("startStop").style.display = "block";
                            pauseButton.innerText = "Pause";
                            pauseButton.onclick = ()=>{pause()};
                        }
                    })
                    .catch((err)=>{
                        console.error(err);
                    });
            }
        </script>
    </body>
</html>