firebase 63070054

✨ elzaphaN TV

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <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>
    
    <script>
        const firebaseConfig = {
            apiKey: "AIzaSyBhbQzLn5aN3XPX9P8Q-JpcTa-2zYA0mxw",
            authDomain: "checknamereal.firebaseapp.com",
            projectId: "checknamereal",
            storageBucket: "checknamereal.appspot.com",
            messagingSenderId: "49052450284",
            appId: "1:49052450284:web:2a6e10fb14070539f314c9"
        };
        firebase.initializeApp(firebaseConfig);
        const name = firebase.firestore()
    </script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300&family=Syne+Mono&display=swap');
        body{
            background: black;
        }
        h1{
            font-family: 'Source Sans Pro', sans-serif;
            color: black;
        }
        .box_single_insert{
            position: relative;
            margin: auto;
            border-radius: 20px;
            height: 130px;
            width: 400px;
            background: grey;
            text-align: center;
            margin-bottom: 20px;
        }
        .box_single_insert button{
            margin-top: 20px;
        }
        .box_many_insert{
            position: relative;
            margin: auto;
            border-radius: 20px;
            height: 130px;
            width: 400px;
            background: grey;
            text-align: center;
        }
        .box_many_insert button{
            margin-top: 20px;
        }
        .show_college_id{
            border-radius: 20px;
            left: 50%;
            transform: translate(-50%);
            position:absolute;
            padding: 20px;
            background:grey;
        }
        .show_college_id #text_show{
            text-align: center;
        }
        .show_college_id #delete_all_btn{
            position: relative;
            transform: translate(-50%);
            left: 50%;
            margin-bottom: 30px;
        }
        #btn_edit_del, #btn_edit_come, #btn_edit_not_come{
            margin-left: 5px;
            margin-right: 5px;
        }
        #btn_edit_del{
            background: red;
            color: white;
        }
    </style>
</head>
<body>
    <div class="box_single_insert">
        <h1>Insert Single College ID</h1>
        <input id="college_id" placeholder="Input College ID">
        <br>
        <button onclick="add()" id="add_single">add</button>
    </div>
    <div class="box_many_insert">
        <h1>Insert Many College ID</h1>
        <input id="start" placeholder="First College ID">
        <input id="end" placeholder="End College ID">
        <button onclick="add_start_to_end()" id="add_many">add</button>
    </div>
    <br>
    <br>
    <div class="show_college_id">
        <h1 id="text_show">Show</h1>
        <button onclick="delete_all()" id="delete_all_btn">delete all</button>
        <div id="show"></div>
    </div>
</body>
    <script>
        document.body.onkeyup = function(e){
            if(e.key == "Enter"){
                add()
                add_start_to_end()
            }
        }
        var html = "";
        function add_start_to_end(){
            let start_id = start.value;
            let end_id = end.value;
            start_id = parseInt(start_id);
            end_id = parseInt(end_id);
            for(let i=start_id; i<=end_id; i++){
                name.collection("collection")
                .doc(i.toString())
                .set({
                    id: i.toString(),
                    status: "not come"
                })
            }
            start.value = "";
            end.value = "";
        }
        function add(){
            name.collection("collection")
            .doc(college_id.value)
            .set({
                id: college_id.value,
                status: "not come"
            })
            college_id.value = "";
        }
        function delete_id(q){
            let check = q.getAttribute("check")
            name.collection("collection")
            .doc(check)
            .delete()
        }
        function check_id(q){
            let check = q.getAttribute("check")
            name.collection("collection")
            .doc(check)
            .update({
                status: "come"
            })
        }
        function check_id_not_come(q){
            let check = q.getAttribute("check")
            name.collection("collection")
            .doc(check)
            .update({
                status: "not come"
            })
        }
        function delete_all(){
            name.collection("collection")
            .get()
            .then(function(snapshot){
                snapshot.forEach(function(docs){
                    name.collection("collection")
                    .doc(docs.data().id)
                    .delete()
                })
            })
        }
        name.collection("collection")
        .orderBy("id")
        .onSnapshot(function(snapshot) {
            snapshot.forEach(function(docs) {
                html += docs.id + " " + docs.data().status;
                html += `<button onclick="delete_id(this)" check="${docs.id}" id="btn_edit_del">del</button>`;
                html += `<button onclick="check_id(this)" check="${docs.id}" id="btn_edit_come">come</button>`;
                html += `<button onclick="check_id_not_come(this)" check="${docs.id}" id="btn_edit_not_come">not come</button>`;
                html += "<br></br>";
            })
            show.innerHTML = html;
            html = "";
        })
      console.log(name.collection("collection").doc("10").status)

</script>
</html>