Hello World! (Copy 7328) (Branch 7343) (Copy 7350) (Branch 7354)

Hello World! (Copy 7328) (Branch 7343) (Copy 7350)..

✨ นายชัยรวิชญ์ เอี่ยมขจรชัย

<!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>
        <script>
            // Firebase Setup
            const firebaseConfig = {
                apiKey: "AIzaSyCQcgx7TlYFYjN3xEO748BKdz9jptpB-dM",
                authDomain: "kmitl-1ebdd.firebaseapp.com",
                projectId: "kmitl-1ebdd",
                storageBucket: "kmitl-1ebdd.appspot.com",
                messagingSenderId: "320305488330",
                appId: "1:320305488330:web:c28750e5468a92f4c8ef33",
                measurementId: "G-0QHP29QTDP"
            }
            firebase.initializeApp(firebaseConfig)
            const firestore = firebase.firestore()
        </script>
      <style>
        body{
			background: url(https://webcomicms.net/sites/default/files/clipart/128526/animated-paper-128526-697302.gif);
        	background-repeat: no-repeat;
        	background-size: cover;
        	background-position: center;
        	font-family:sans-serif;
          margin: 0;
        }
        h1{
			color: #000;
        	text-shadow: 2px 3px #DD2C00;
        }
        .box{
            position: relative;
            margin: auto;
          	top: 20px;
          	padding: 10px;
            border-radius: 20px;
            height: 150px;
            width: 400px;
            background: grey;
            text-align: center;
            margin-bottom: 20px;
        }
        button{
            margin: 10px;
          	background: #FFD600;
          	width: 50px;
          	height: 30px;
        }
        #btn_edit_del, #btn_edit_pay, #btn_edit_not_pay{
            margin-left: 5px;
            margin-right: 5px;
        }
        #btn_edit_del{
            background: red;
            color: white;
        }
      </style>
    </head>
    <body>
      <div class="box">
        	<h1>ผู้ยืมเงิน</h1>
        	<input id="name_input" placeholder="Name">
        	<br>
        	<button onclick="add()" id="add_name">Add</button>
    	</div>
    <div class="box">
        <h1 id="text_show">รายชื่อผู้ยืมเงิน</h1>
        <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(){
          console.log(name_input.value)
            firestore.collection("collection")
            .doc(name.value)
            .set({
                id: name_input.value,
                status: "not pay"
            })
            name_input.value = "";
        }
        function delete_id(q){
            let check = q.getAttribute("check")
            firestore.collection("collection")
            .doc(check)
            .delete()
        }
        function check_id(q){
            let check = q.getAttribute("check")
            firestore.collection("collection")
            .doc(check)
            .update({
                status: "pay"
            })
        }
        function check_id_not_pay(q){
            let check = q.getAttribute("check")
            firestore.collection("collection")
            .doc(check)
            .update({
                status: "not pay"
            })
        }
        function delete_all(){
            firestore.collection("collection")
            .get()
            .then(function(snapshot){
                snapshot.forEach(function(docs){
                    firestore.collection("collection")
                    .doc(docs.data().id)
                    .delete()
                })
            })
        }
        firestore.collection("collection")
        .orderBy("id")
        .onSnapshot(function(snapshot) {
            snapshot.forEach(function(docs) {
                html += docs.data().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_pay">pay</button>`;
                html += `<button onclick="check_id_not_pay(this)" check="${docs.id}" id="btn_edit_not_pay">not pay</button>`;
                html += "<br></br>";
            })
            show.innerHTML = html;
            html = "";
        })

</script>
</html>