Firestore

✨ นางสาวรจนา หอมประสิทธิ์

<!DOCTYPE html>
<html lang=en>
    <head>
        <script src=https://www.gstatic.com/firebasejs/8.3.1/firebase-app.js></script>
        <script src=https://www.gstatic.com/firebasejs/8.3.1/firebase-firestore.js></script>

/**
             * * Main Runtime
             * 
             * ? Anything which related to DOM should be run in this callback.
             */
            const main = (callback) => {
                document.addEventListener("DOMContentLoaded", callback, {
                    once: true
                })
            },
                /**
                 * ? Shorten syntax for querying for element id
                 */
                id = (id) => {
                    const reference = document.getElementById(id)

return Object.assign(reference, {
                        on: (event, callback) => {
                            reference.addEventListener(event, callback)

return () => reference.removeEventListener(event, callback)
                        }
                    })
                }
        </script>
        <script defer>
            // Firebase Setup
            const firebaseConfig = {
                apiKey: "AIzaSyB2YJIxj82klqTjqYeoKRZCaF4aTic5AvQ",
                authDomain: "itkmitl-sec2.firebaseapp.com",
                projectId: "itkmitl-sec2",
                storageBucket: "itkmitl-sec2.appspot.com",
                messagingSenderId: "805131087658",
                appId: "1:805131087658:web:b30369afdd16ac92aa7853",
                measurementId: "G-KSH3Z3XBK6"
            }

firebase.initializeApp(firebaseConfig)

const firestore = firebase.firestore()
            firestore.collection("name").doc("document").set({
                         value:1_500_000,
                         text:"Hi",
                         time:new Date(),
                     })
            firestore.collection("name").doc("document").get().then(doc =>{
                        console.log(doc.data())
                    })
            /**
             * * Main Runtime
             * 
             * ? Anything which related to DOM should be run here.
             */
            main(() => {
                /**
                 * ? When element with id "read" is clicked.
                 * ? The function will run.
                 * */
                 
                id("read").on("click", () => {
                    id("title").textContent = "Pass"
                    /**
                     * * Do something with Firestore here
                     */
                     firestore.collection("name").doc("document").update({
                         value:1_000_000,
                         text:"Hello world",
                         time:new Date(),
                     })
                     firestore.collection("name").doc("document").get().then(docs =>{
                        console.log(docs.data())
                    })
                    firestore
                    .collection("name").doc("document")
                    .get()
                    .then(function(doc) {
                        const date = new Date()
                        const time = `${date.getHours()}:${date.getMinutes()}`
                        id("value").textContent = doc.data().value
                        id("text").textContent = doc.data().text
                        id("time").textContent = time
                    
                    })
                     
                })
                id("back").on("click", () => {
                    id("title").textContent = "Now"
                    /**
                     * * Do something with Firestore here
                     */
                     firestore.collection("name").doc("document").update({
                         value:2_000_000,
                         text:"Bye Bye",
                         time:new Date(),
                     })
                    firestore.collection("name").doc("document").get().then(doc =>{
                        console.log(doc.data())
                    })
                    firestore
                    .collection("name").doc("document")
                    .get()
                    .then(function(doc) {
                        const date = new Date()
                        const time = `${date.getHours()}:${date.getMinutes()}`
                        id("value").textContent = doc.data().value
                        id("text").textContent = doc.data().text
                        id("time").textContent = time
                    
                    })
                     
                })
            })
        </script>
    </head>
    <body>
        <h1 id=title>---</h1>
        <button id=read>Past</button>
        <button id=back>Now</button>
        <div class="all">
            <center><p id="value"></p>
            <p id="text"></p>
            <p id="time"></p></center>
        </div>
    </body>
</html>