4 글 보임 - 1 에서 4 까지 (총 4 중에서)
-
관리자 모드로 로그인해서 챗 페이지로 넘어갔는데 제대로 적용되지 않고 이상하게 깨지는거 같아요 그리고 관리자 계정 말고, 다른 일반 계정으로 로그인하면 전송버튼 눌러도 적용되지 않아요
<!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>TextBookHub</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <!-- Bootstrap core CSS --> <link href="bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template --> <link href="shop-homepage.css" rel="stylesheet"> </head>
<body>
<!-- <script defer src="/__/firebase/8.6.5/firebase-app-compat.js"></script> --> <!-- include only the Firebase features as you need --> <script src="https://www.gstatic.com/firebasejs/8.6.5/firebase-app.js"></script> <script src="https://www.gstatic.com/firebasejs/8.6.5/firebase-auth.js"></script> <script src="https://www.gstatic.com/firebasejs/8.6.5/firebase-firestore.js"></script> <script src="https://www.gstatic.com/firebasejs/8.6.5/firebase-storage.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>
<script> const firebaseConfig = { apiKey: "AIzaSyBeFhSAptsMOcDoZvvknf82nZJ7q6N08bQ", authDomain: "digitcom-baf18.firebaseapp.com", projectId: "digitcom-baf18", storageBucket: "digitcom-baf18.appspot.com", messagingSenderId: "928440144391", appId: "1:928440144391:web:7f523a408f0b8295fa90a2" };firebase.initializeApp(firebaseConfig); </script>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top"> <div class="container"> TextBookHub <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarResponsive"> <ul class="navbar-nav ml-auto"> <li class="nav-item"> ABOUT US
<li class="nav-item"> 로그인/로그아웃 <span class="sr-only">(current)</span>
<li class="nav-item"> 책 등록
<li class="nav-item"> 장바구니
</div> </div> </nav>
<div class="container mt-3"> </div>
<div class="container p-4 detail"> <div class="row"> <div class="col-3 p-0"> <ul class="list-group chat-list"> <li class="list-group-item"> <h6></h6> <h6 class="text-large">채팅목록</h6>
</div> <div class="col-9 p-0"> <div class="chat-room"> <ul class="list-group chat-content">
- <span class="chat-box"></span>
- <span class="chat-box"></span>
- <span class="chat-box mine"></span>
- <span class="text-small"></span>
<div class="input-group"> <input class="form-control" id="chat-input"> <button class="btn btn-secondary" id="send">전송</button> </div> </div> </div> </div> </div>
<script> const db = firebase.firestore(); const storage = firebase.storage(); var userid = JSON.parse( localStorage.getItem('user') ).uid; var username = JSON.parse( localStorage.getItem('user') ).displayName;$('#send').click(function(){ var 데이터 = { content : $('#chat-input').val(), date : new Date(), uid : userid, uname : username } db.collection('chatroom').doc(채팅방id).collection('messages').add(데이터) })var 채팅방id;
db.collection('chatroom').where('who','array-contains', userid).get().then((result)=>{ result.forEach((a)=>{ console.log(a.data()); var template = `<li class="list-group-item"> <h6>${ a.data().product }</h6> <h6 class="text-small">${ a.data().uname }</h6> </li>` $('.chat-list').append(template)$('.list-group-item').click(function(e){ //<h6 class="text-trans">${ a.id }</h6> //채팅방id = $(this).children('.text-trans').text(); 채팅방id = a.id;e.stopImmediatePropagation();
db.collection('chatroom').doc(a.id).collection('messages').orderBy('date').onSnapshot((result)=>{ $('.chat-content').html(''); result.forEach((a)=>{ messageUid = a.data().uid; if(userid == messageUid){ var mine = `<li><span class="chat-box mine"> <h6 class="text-small">${ a.data().uname }</h6> ${a.data().content}</span> </li>`; var date = `<li><span class ="text-small mine"> ${a.data().date.toDate()}</span></li>`; $('.chat-content').append(mine) $('.chat-content').append(date) } else{ var yours = `<li><span class="chat-box"> <h6 class="text-small">${ a.data().uname }</h6> ${a.data().content}</span></li>`; var date = `<li><span class ="text-small"> ${a.data().date.toDate()}</span></li>`; $('.chat-content').append(yours) $('.chat-content').append(date) } }) })}) }) })
</script>
</body>
</html>
4 글 보임 - 1 에서 4 까지 (총 4 중에서)
- 답변은 로그인 후 가능합니다.