Skip to content

Commit

Permalink
[update] chatting
Browse files Browse the repository at this point in the history
  • Loading branch information
@Nuung
Nuung committed Jun 25, 2022
1 parent 0fa1fa6 commit dc266f5
Show file tree
Hide file tree
Showing 4 changed files with 103 additions and 62 deletions.
41 changes: 33 additions & 8 deletions fpm-fe-html/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,27 @@
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0"
/>
<meta name="og:type" content="website" />
<meta name="twitter:card" content="photo" />
<link rel="stylesheet" type="text/css" href="public/stylesheets/index.css" />
<link rel="stylesheet" type="text/css" href="public/stylesheets/styleguide.css" />
<link rel="stylesheet" type="text/css" href="public/stylesheets/global.css" />
<link
rel="stylesheet"
type="text/css"
href="public/stylesheets/index.css"
/>
<link
rel="stylesheet"
type="text/css"
href="public/stylesheets/styleguide.css"
/>
<link
rel="stylesheet"
type="text/css"
href="public/stylesheets/global.css"
/>
</head>
<body style="margin: 0; background: #f4f6f9">
<input type="hidden" id="anPageName" name="page" value="0" />
Expand All @@ -25,16 +40,24 @@
<div class="ellipse-989-1"></div>
</div>
<div class="status-bar-i-phone-x-or-newer">
<div class="time"><div class="x941 sfprotext-normal-black-15px">9:40</div></div>
<div class="time">
<div class="x941 sfprotext-normal-black-15px">9:40</div>
</div>
<img class="right-side" src="public/images/right-side-6@2x.svg" />
</div>
<a href="pages/signUp.html">
<div class="frame-395">
<div class="text-1 valign-text-middle pretendard-semi-bold-white-16px">회원가입</div>
<div
class="text-1 valign-text-middle pretendard-semi-bold-white-16px"
>
회원가입
</div>
</div>
</a>
<a href="pages/signIn.html">
<div class="frame-396"><div class="text-2 valign-text-middle">로그인</div></div>
<div class="frame-396">
<div class="text-2 valign-text-middle">로그인</div>
</div>
</a>
<div class="group-1815">
<div class="ellipse-container">
Expand All @@ -44,7 +67,9 @@
</div>
<div class="overlap-group2">
<h1 class="title">FPM</h1>
<div class="text-3 pretendard-regular-normal-nevada-16px">금융 페이스 메이커</div>
<div class="text-3 pretendard-regular-normal-nevada-16px">
금융 페이스 메이커
</div>
</div>
</div>
</div>
Expand Down
36 changes: 15 additions & 21 deletions fpm-fe-html/pages/chatting.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,11 +39,6 @@
<div class="container-center-horizontal">
<div class="screen screen">
<div class="overlap-group1">
<div class="overlap-group">
<img class="vector-14" src="../public/images/vector-14-1@1x.svg" />
</div>
<div class="rectangle-3391"></div>
<div class="rectangle-3367"></div>
<div class="status-bar-i-phone-x-or-newer">
<div class="time">
<div class="x941 sfprotext-normal-black-15px">9:40</div>
Expand All @@ -53,28 +48,14 @@
src="../public/images/right-side-1@2x.svg"
/>
</div>
<a href="-3.html"
<a href="./"
><img
class="arrow-back-ios"
src="../public/images/arrow-back-ios@2x.svg"
/>
</a>
<div class="text-223 fonth1">떡상간다</div>

<!-- format-->
<div class="chat format">
<ul>
<li>
<div class="sender">
<span>sender</span>
</div>
<div class="message">
<span>msㅁㄴㅇㄹㅁㄴㅇㄹㅁㄴㄹㅇㅁㄴㅇㄹg</span>
</div>
</li>
</ul>
</div>

<!-- chatting 전송 DIV set -->
<div class="rectangle-3390">
<input
Expand All @@ -84,12 +65,25 @@
placeholder="채팅을 입력해주세요"
/>
</div>
<button class="sendBtnCss" id="sendBtn">
<button class="sendBtnCss hvr-push" id="sendBtn">
<p class="text-236 fontbody0semibold">전송</p>
</button>
</div>

<!-- format-->
<div class="chat">
<ul id="chat--append">
<!-- <li>
<div class="message">
<span>msㅁㄴㅇㄹㅁㄴㅇㄹㅁㄴㄹㅇㅁㄴㅇㄹg</span>
</div>
</li> -->
</ul>
</div>
</div>
</div>

<script src="../public/asset/bootstrap/js/jquery.min.js"></script>
<!-- chatting.js -->
<script src="../public/javascript/chatting.js"></script>
</body>
Expand Down
50 changes: 40 additions & 10 deletions fpm-fe-html/public/javascript/chatting.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,20 @@
'use strict';

let toUserId = '';
// get value from cookie
const getCookie = (cName) => {
cName = cName + '=';
let cookieData = document.cookie;
let start = cookieData.indexOf(cName);
let cValue = '';
if (start != -1) {
start += cName.length;
let end = cookieData.indexOf(';', start);
if (end == -1) end = cookieData.length;
cValue = cookieData.substring(start, end);
}
return cValue;
}


// 보낸이의 메시지 불러오기
// 딱 채팅방 클릭하면 해탕 함수가 불러와 지는 것
Expand Down Expand Up @@ -28,16 +42,15 @@ const getTargetUser = async (userId) => {
});
};


// 지금 들어온 채팅 상대방에게 채팅 보내기
const sendMsg = async (toUserId) => {
const requestBody = {
"toUserId": toUserId,
"msg": document.getElementById('chatt').value
}
const sendMsg = async (toUserId, msg) => {
const requestBody = { toUserId, msg };
await fetch("http://fpm.local/api/message", {
method: 'POST',
credentials: 'include',
headers: {
'authorization': getCookie("jwt_token"),
'Content-Type': 'application/json',
},
body: JSON.stringify(requestBody)
Expand All @@ -48,22 +61,39 @@ const sendMsg = async (toUserId) => {
}
})
.then((res) => {

renderSendingMsg(msg);
})
.catch(err => {
console.warn(err);
});

};

//
const renderSendingMsg = (msg) => {
// const chatDiv = document.getElementsByClassName('chat');
$('#chat--append').append(
`
<li>
<span class="msg--time">
오전 11:01
</span>
<div class="message">
<span>${msg}</span>
</div>
</li>
`
);
};

// dom ready init function
const init = async () => {
// getUnreadMsg();

const sendBtn = document.getElementById("sendBtn");
sendBtn.addEventListener("click", (event) => {
sendMsg();
// sendMsg();
const chattMsgInput = document.getElementById('chatt');
sendMsg(getCookie("toUserId"), chattMsgInput.value);
chattMsgInput.value = "";
});
};

Expand Down
38 changes: 15 additions & 23 deletions fpm-fe-html/public/stylesheets/chatting.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -312,7 +312,7 @@
}

.screen .inputBox {
text-align: center;
padding-left: 16px;
border: 0px;
width: 280px;
height: 60px;
Expand All @@ -321,44 +321,36 @@
/* =============================================== */

.screen .chat {
margin-top: 100px;
padding-bottom: 80px;
}

.screen .chat ul {
width: 100%;
/* max-width: 500px; */
list-style: none;
}

.screen .chat ul li {
width: 100%;
}

.screen .chat ul li.left {
text-align: left;
}

.screen .chat ul li.right {
text-align: right;
margin-bottom: 7px;
display: flex;
align-items: flex-end;
}

.screen .chat ul li>div.sender {
margin: 10px 20px 0 20px;
font-weight: bold;
.msg--time {
font-size: smaller;
color: #9296A5;
}

.screen .chat ul li>div.message {
display: inline-block;
word-break: break-all;
margin: 5px 20px;
max-width: 75%;
border: 1px solid #888;
/* max-width: 90%; */
/* min-width: 100px; */
padding: 10px;
border-radius: 5px;
background-color: aliceblue;
color: #555;
text-align: left;
border-radius: 8px;
background-color: #fff;
}

/* =============================================== */

.screen .sendBtnCss {
border: 0px;
display: flex;
Expand Down

0 comments on commit dc266f5

Please sign in to comment.