Skip to content

Commit

Permalink
Merge pull request #324 from nayonnii/Fix/#315-chatroom-info-modal-error
Browse files Browse the repository at this point in the history 
Fix/#315 chatroom info modal error
  • Loading branch information
@nayonnii
nayonnii committed Sep 13, 2023
2 parents 5505c0d + ef3e19c commit c2a2ef1
Show file tree
Hide file tree
Showing 2 changed files with 111 additions and 26 deletions.
29 changes: 29 additions & 0 deletions src/main/resources/static/css/basic.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -724,3 +724,32 @@ body {
top: -2px;
}

.hr-sect {
display: flex;
flex-basis: 100%;
align-items: center;
color: rgba(0, 0, 0, 0.65);
font-size: 16px;
margin: 36px 0px 8px 0px;
}

.hr-sect::before,
.hr-sect::after {
content: "";
flex-grow: 1;
background: rgba(0, 0, 0, 0.35);
height: 1px;
font-size: 0px;
line-height: 0px;
margin: 0px 16px;
}

.sns-btn {
border: #ced4da solid 1px;
background-color: #ffffff;
color: #666666;
font-size: 14px;
border-radius: 30px;
width: 84px;
}

108 changes: 82 additions & 26 deletions src/main/resources/templates/chat-room.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,8 @@

<!------------------------------------------- 방 정보 ------------------------------------------->
<a class="nav-link room-setting" onclick="openRoomDetail()"><img class="room-setting-img" src="/images/icon_chatroom_info.png" alt="방정보 아이콘"></a>


<!-- 방 정보 모달 -->
<div class="form-inline my-2 my-lg-0">
<div class="modal fade" id="roomDetailModal" tabindex="-1"
Expand All @@ -28,61 +30,59 @@ <h3 class="modal-title fs-5" id="room-info">방 정보</h3>
<!-- <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>-->
</div>
<div class="modal-body">
<form method="post" action="#" class="">
<form id="form">

<div class="row mt-3">
<p class="room-info-item-title col-3 mb-0">방 제목</p>
<input type="text" class="form-control room-info-item-input col-7"
id="room-name" name="room-name">
id="room-name" name="room-name" value="" disabled>
</div>
<div class="row mt-3">
<p class="room-info-item-title col-3 mb-0">공개 여부</p>

<input type="button" class="form-control" id="room-close" name="room-close"
value="공개방"/>
<input type="button" class="form-control ml-2" id="room-open" name="room-open"
value="비밀방">
<input type="button" class="form-control" id="room-open" name="room-open"
value="공개방" disabled/>
<input type="button" class="form-control ml-2" id="room-close" name="room-close"
value="비밀방" disabled/>
</div>
<div class="row mt-3">
<p class="room-info-item-title col-3 mb-0">비밀번호</p>
<input type="text" class="form-control" id="room-password"
name="room-password">
name="room-password" value="" disabled>
</div>
<div class="row mt-3">
<p class="room-info-item-title col-3 mb-0">인원 수</p>
<input type="text" class="form-control" id="room-capacity"
name="room-capacity">
name="room-capacity" value="" disabled>
</div>
<!-- <div class="row mt-3">-->
<!-- <p class="room-info-item-title col-3 mb-0">초대 코드</p>-->
<!-- <p class="form-control" id="room-invite" name="room-invite"></p>-->
<!-- </div>-->

<!-- 공유하기 -->
<div class="row mb-3 mt-3">
<div class="col mx-auto">
<div class="sns">
<a href="#n" id="btnKakao"
<div class="hr-sect mt-4">친구에게 공유하기</div>
<div class="mb-3 mt-3">
<div class="sns center">
<button id="btnKakao"
onclick="fn_sendFB('kakaotalk');return false;"
class="kakaotalk text-link" target="_self"
title="카카오톡 새창열림"><span class="skip">카카오톡</span></a>
<a href="#n" onclick="handleCopyClipBoard();return false;"
class="clipboard text-link" target="_self"
title="클립보드 복사"><span class="skip">복사하기</span></a>
class="kakaotalk text-link sns-btn" target="_self"
title="카카오톡 새창열림"><span class="skip">카카오톡<br>공유하기</span></button>
<button onclick="handleCopyClipBoard();return false;"
class="clipboard text-link sns-btn ml-2" target="_self"
title="클립보드 복사"><span class="skip">URL<br>복사하기</span></button>
<!--<img id="preview" alt="Preview" class="rounded-circle shadow" width="200px" height="200px">-->
</div>
</div>
</div>

<div class="row mt-4" style="margin-left: 150px;">
<div class="mt-4 center">
<div>
<button class="btn modal-btn-secondary" id="close_btn" type="submit">닫기
</button>
</div>
<div class="ml-2">
<button class="btn modal-btn-primary" id="submit_btn" type="submit">저장
<button class="btn modal-btn-secondary" onclick="roomInfoClose()">닫기
</button>
</div>
<!-- <div class="ml-2">-->
<!-- <button class="btn modal-btn-primary" id="submit_btn" type="submit">저장-->
<!-- </button>-->
<!-- </div>-->
</div>
</form>
</div>
Expand Down Expand Up @@ -791,6 +791,7 @@ <h3 class="modal-title fs-5" id="gameRuleDetailModalLabel">게임 룰</h3>
}
}


//
// $.get(`/v1/chatrooms/${roomId}/${nickname}`,
// function (result) {
Expand Down Expand Up @@ -823,10 +824,62 @@ <h3 class="modal-title fs-5" id="gameRuleDetailModalLabel">게임 룰</h3>
//
// });

// 방 정보 모달 열기
function openRoomDetail() {
$('#roomDetailModal').modal('show'); // 모달 열기
$('#roomDetailModal').modal('show');

$.get(`/v1/chatroom/${roomId}`,
function (response) {

const rawRoomInfo = response.data
$('#room-name').attr('value', rawRoomInfo.title)
$('#room-capacity').attr('value', rawRoomInfo.capacity)
$('#room-password').attr('value', rawRoomInfo.password)
if (rawRoomInfo.close === true) {
$("#room-close").attr('style', "font-weight: bold; border: 2px solid #495057;")
} else {
$("#room-open").attr('style', "font-weight: bold; border: 2px solid #495057;")
}
})
}


/* 방 정보 모달 닫기 */
function roomInfoClose() {
$('#roomDetailModal').modal('hide');
event.preventDefault();
}

/* 방 정보 모달 > 비밀방 클릭 시 */
function roomCloseBtnPressed() {
$("#room-close").attr('style', "font-weight: bold; border: 2px solid #495057;")
$("#room-open").attr('style', "font-weight: normal;")
$("#room-password").attr('disabled', false)

}

/* 방 정보 모달 > 공개방 클릭 시 */
function roomOpenBtnPressed() {
$("#room-close").attr('style', "font-weight: normal;")
$("#room-open").attr('style', "font-weight: bold; border: 2px solid #495057;")
$("#room-password").attr('disabled', true)
}


// 채팅방 타이틀 가져오기
$.get(`/v1/chatroom/${roomId}`,
function (result) {
// 채팅방 타이틀
$("#chatroomTitle").text(result.data.title);

// // +채팅방 정보 로그
// console.log("title" + result.data.title)
// console.log("capacity" + result.data.capacity)
// console.log("roomPassword" + result.data.password)
// console.log("isClose" + result.data.close) // boolean
});


// 나가기 버튼
function leave() {
const leave = document.getElementById('leave-btn');
Expand All @@ -849,6 +902,8 @@ <h3 class="modal-title fs-5" id="gameRuleDetailModalLabel">게임 룰</h3>
$('#gameRuleDetailModal').modal('hide');
}



/* 내 직업 설명 모달 열기 */
function myRoleOpen() {
$('#myRoleDetailModal').modal('show');
Expand Down Expand Up @@ -879,6 +934,7 @@ <h3 class="modal-title fs-5" id="gameRuleDetailModalLabel">게임 룰</h3>
$('#myRoleDetailModal').modal('hide');
}


</script>
<script src="/js/stomp.js"></script>
</div>
Expand Down

0 comments on commit c2a2ef1

Please sign in to comment.