Week 10 : Firedase

✨ นางสาวจุฑามาศ ชนาฐิติกุล

<!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;
        		font-family:sans-serif;
            margin: 0;
        }
        h1{
				color: #ffcdd2;
        		text-shadow: 2px 3px #DD2C00;
        }
        .box{
            position: relative;
            margin: auto;
          	top: 2em;
          	padding: 10px;
            height: 160px;
            width: 400px;
            background: #795548;
            text-align: center;
            margin-bottom: 20px;
          	border: 10px solid transparent;
          	border-image: url(https://e1.pngegg.com/pngimages/146/913/png-clipart-wishful-borders-black-border.png) 5% round;
        }
        button{
            margin: 10px;
          	background: #FFD600;
          	width: 50px;
          	height: 30px;
        }
        .text_show{
				color: #d50000;
        		text-shadow: 2px 2px #FFCC80;
        }
        .box_show{
				position: relative;
            margin: auto;
          	top: 4em;
          	padding: 10px;
            width: 550px;
            background: #FFCCBC;
            text-align: center;
            margin-bottom: 20px;
          	border: 10px solid transparent;
          	border-image: url(https://e1.pngegg.com/pngimages/146/913/png-clipart-wishful-borders-black-border.png) 5% round;
        }
        #btn_del, #btn_pay, #btn_not_pay{
            width: 5em;
        }
        #btn_del{
          	position: relative;
            background: red;
          	border-radius: 50%;
            color: white;
          	left: 20px;
        }
        #btn_pay{
				background: #388E3C;
          	color: white;
        }
        #btn_not_pay{
				background: #00838F;
          	color: white;
        }
        b{
				color: #3F51B5;
        }
      </style>
    </head>
    <body>
      <div class="box">
        	<h1>ผู้ยืมเงิน</h1>
        	<input id="name_input" placeholder="Name">
        	<br>
        	<button id="add_name" onclick="add()">AdD</button>
    	</div>
    <div class="box_show">
        <h1 class="text_show">รายชื่อผู้ยืมเงิน</h1>
        <div id="show"></div>
    </div>
    </body>
  	    <script>
            var html = "";
	        document.body.onkeyup = function(e){
            if(e.key == "Enter"){
                add()
            }
        }
        function add(){
            firestore
                .collection("collection")
                .doc(name.value)
                .set({
                  id: name_input.value,
                  status: "<b>\"not pay\"</b>"
              })
            name_input.value = "";
        }
        function delete_name(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: "<b>\"pay\"</b>"
              })
        }
        function check_id_not_pay(q){
            let check = q.getAttribute("check")
            firestore
                .collection("collection")
                .doc(check)
                .update({
                    status: "<b>\"not pay\"</b>"
              })
        }
        firestore
            .collection("collection")
            .orderBy("id")
            .onSnapshot(function(snapshot) {
              snapshot.forEach(function(docs) {
                  html += docs.data().id + " " + docs.data().status;
                  html += `<button onclick="check_id(this)" check="${docs.id}" id="btn_pay">Pay</button>` + `<button onclick="check_id_not_pay(this)" check="${docs.id}" id="btn_not_pay">Not Pay</button>` + `<button onclick="delete_name(this)" check="${docs.id}" id="btn_del">DEL</button>` + "<br>";
              })
              show.innerHTML = html;
              html = "";
          })
    </script>
</html>