Skip to content

Commit

Permalink
Update chat
Browse files Browse the repository at this point in the history
  • Loading branch information
@Hot-dong
Hot-dong committed Jul 3, 2023
1 parent 89f4f3a commit c6d7daf
Showing 1 changed file with 322 additions and 5 deletions.
327 changes: 322 additions & 5 deletions src/main/resources/templates/chat.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@

<div class="row-span-1 relative h-24">
<div class="absolute bottom-0 w-full">
<button class="top-0 w-full p-4 border rounded-lg shadow-lg text-stone-500">사전 정보 수정</button>
<button id="modalOpenButton" data-modal-target="informationModal" data-modal-toggle="informationModal" class="top-0 w-full p-4 border rounded-lg shadow-lg text-stone-500">사전 정보 수정</button>
<div class="h-7"></div>
</div>
</div>
Expand All @@ -87,9 +87,9 @@
<!-- Modal header -->
<div class="flex items-center justify-between px-4 py-1 border-b rounded-t dark:border-gray-300 bg-stone-100">
<div class="flex space-x-2">
<div class="w-2 h-2 bg-red-500 rounded-3xl"></div>
<div class="w-2 h-2 bg-amber-500 rounded-3xl"></div>
<div class="w-2 h-2 bg-green-500 rounded-3xl"></div>
<div class="w-3.5 h-3.5 bg-red-500 rounded-3xl cursor-pointer hover:border hover:border-red-600" data-modal-hide="defaultModal"></div>
<div class="w-3.5 h-3.5 bg-amber-500 rounded-3xl"></div>
<div class="w-3.5 h-3.5 bg-green-500 rounded-3xl"></div>
</div>
<button type="button" class="text-gray-400 bg-transparent hover:text-gray-600 rounded-lg text-xs p-1.5 ml-auto inline-flex items-center" data-modal-hide="defaultModal">
<svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
Expand All @@ -102,7 +102,7 @@
<p id="modal-company" class=" font-bold"></p>
<p id="modal-title" class="dark:text-gray-400 font-extrabold"></p>
</div>
<a id="modal-url" target="_blank" class="block bg-violet-200 text-violet-500 p-2 rounded-lg text-xs">
<a id="modal-url" target="_blank" class="cursor-pointer block bg-violet-200 text-violet-500 p-2 rounded-lg text-xs">
보러가기
</a>
</div>
Expand Down Expand Up @@ -154,12 +154,329 @@
</div>
</div>
</div>
<!-- Main modal -->
<div
id="informationModal"
tabindex="-1"
aria-hidden="true"
class="font-noto fixed top-0 left-0 right-0 z-50 hidden w-full p-4 overflow-x-hidden overflow-y-auto md:inset-0 h-[calc(100%-1rem)] max-h-full"
>
<div class="relative w-full max-w-5xl shadow-lg">
<!-- Modal content -->
<div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
<!-- Modal header -->
<div class="flex items-center justify-between px-4 py-1 border-b rounded-t dark:border-gray-300 bg-stone-100">
<div class="flex space-x-2">
<div class="w-3.5 h-3.5 bg-red-500 rounded-3xl cursor-pointer hover:border hover:border-red-600" data-modal-hide="informationModal"></div>
<div class="w-3.5 h-3.5 bg-amber-500 rounded-3xl"></div>
<div class="w-3.5 h-3.5 bg-green-500 rounded-3xl"></div>
</div>
<button
type="button"
class="text-gray-400 bg-transparent hover:text-gray-600 rounded-lg text-xs p-1.5 ml-auto inline-flex items-center"
data-modal-hide="informationModal"
>
<svg
aria-hidden="true"
class="w-5 h-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
clip-rule="evenodd"
></path>
</svg>
<span class="sr-only">Close modal</span>
</button>
</div>
<!-- Modal body -->
<div class="p-6 space-x-2 flex items-center justify-between">
<p class="font-bold">사전 정보 수집</p>
</div>
<!-- Modal footer -->
<div
class="w-full px-6 pb-6 border-gray-200 rounded-b dark:border-gray-600"
>
<div class="modal space-y-3 mb-5">
<div class="mb-3">
<label for="workTypeSelect" class="block mb-1">근무 형태</label>
<div>
<div id="workType" class="flex space-x-2">
<select
name="workType"
id="workTypeSelect"
class="block w-full border-stone-500 rounded"
>
<option value="2">계약직</option>
<option value="4">인턴직</option>
<option value="6">파견직</option>
<option value="3">병역특례</option>
<option value="9">프리랜서</option>
<option value="5">아르바이트</option>
</select>
</div>
<div id="workTypePlus">
<div class="plusField flex"></div>
</div>
</div>
</div>
<div class="mb-3">
<label for="educationSelect" class="block mb-1">학력</label>
<div>
<div id="education" class="flex space-x-2">
<select
name="education"
id="educationSelect"
class="block w-full border-stone-500 rounded"
>
<option value="1">고등학교졸업</option>
<option value="2">전문대학졸업</option>
<option value="3">대학교 졸업</option>
<option value="4">석사 졸업</option>
<option value="5">박사 졸업</option>
</select>
</div>
<div id="educationPlus">
<div class="plusField flex"></div>
</div>
</div>
</div>
<div class="mb-3">
<label for="categorySelect" class="block mb-1">직무</label>
<div>
<div id="category" class="flex space-x-2">
<select name="category" id="categorySelect" class="category block w-full border-stone-500 rounded">
<option value="16">기획·전략</option>
<option value="14">마케팅·홍보</option>
<option value="3">회계·재무</option>
<option value="2">IT개발·데이터</option>
<option value="12">상품기획·MD</option>
<option value="15">디자인</option>
<option value="6">의료</option>
<option value="10">서비스</option>
<option value="11">생산</option>
<option value="19">교육</option>
</select>
</div>
<div id="categoryPlus">
<div class="plusField flex"></div>
</div>
</div>
</div>
<div class="mb-3">
<label for="regionSelect" class="block mb-1">지역</label>
<div>
<div id="region" class="flex space-x-2">
<select
name="region"
id="regionSelect"
class="block w-full border-stone-500 rounded"
>
<option value="101000">서울</option>
<option value="102000">경기</option>
<option value="103000">광주</option>
<option value="104000">대구</option>
<option value="105000">대전</option>
<option value="106000">부산</option>
<option value="107000">울산</option>
<option value="108000">인천</option>
<option value="109000">강원</option>
<option value="110000">경남</option>
<option value="111000">경북</option>
<option value="112000">전남</option>
<option value="113000">전북</option>
<option value="114000">충북</option>
<option value="115000">충남</option>
<option value="116000">제주</option>
</select>
</div>
<div id="regionPlus">
<div class="plusField flex"></div>
</div>
</div>
</div>
<div class="flex justify-end">
<a id="sendInfoButton" data-modal-hide="informationModal" class="block bg-violet-200 text-violet-500 p-2 rounded-lg text-sm">
계속하기
</a>
</div>
</div>
<div class="flex justify-end">
</div>
</div>
</div>
</div>
</div>
</body>
<script th:inline="javascript">
function getUserImage() {
return [[${image}]]
}
</script>
<script>
document.addEventListener("DOMContentLoaded", function () {
const selectTags = document.querySelectorAll("select");
const sendButton = document.getElementById("sendInfoButton");

// 배열 선언
let selectValues = {
workType: [],
education: [],
category: [],
region: []
};

fetch("/user/prev")
.then(async (response) => {
const res = await response.json()

const category = res.category.split(",");
const region = res.region.split(",");
const education = res.education.split(",");
const workType = res.type.split(",");

const modalButton = document.getElementById('modalOpenButton');
modalButton.addEventListener('click', function () {
if(category.length === 0) {
addList('category', document.getElementById('categorySelect').value);
} else {
for(let i=0; i<category.length; i++) {
addList('category',category[i]);
}
}
if(region.length === 0) {
addList('region', document.getElementById('regionSelect').value);
} else {
for(let i=0; i<region.length; i++) {
addList('region',region[i]);
}
}
if(education.length === 0) {
addList('education', document.getElementById('educationSelect').value);
} else {
for(let i=0; i<education.length; i++) {
addList('education',education[i]);
}
}
if(workType.length === 0) {
addList('workType', document.getElementById('workTypeSelect').value);
} else {
for(let i=0; i<workType.length; i++) {
addList('workType',workType[i]);
}
}
});
})

// 배열 Id, 배열에 넣을 값
const addList = (selectId, selectValue) => {
const selectTag = document.getElementById(selectId + "Select");
if (selectValue === '') {
selectValue = selectTag.value;
}
// 숫자가 없다면 -1 반환
if (selectValues[selectId].findIndex(v => v === selectValue) === -1) {
selectValues[selectId].push(selectValue);
console.log(selectValues)

let selectText = selectTag.querySelector(`[value="${selectValue}"]`).innerText;
let plusField = document.getElementById(selectId + "Plus").children[0];

// 새 div 생성
let newDiv = document.createElement("div");
newDiv.className =
"info-div font-noto w-40 h-10 bg-stone-200 mt-2 mb-4 mr-2 px-3 py-5 flex items-center justify-between rounded-lg space-x-2 text-gray-600";

// 선택된 정보를 div의 innerText로 추가
newDiv.innerText = selectText;

// 엑스 버튼 생성
let deleteButton = document.createElement("button");
deleteButton.className =
"text-gray-400 bg-transparent hover:text-red-500 rounded-lg text-xs ml-auto inline-flex items-center";

// SVG 태그 생성
const svg = document.createElementNS(
"http://www.w3.org/2000/svg",
"svg"
);

// SVG 속성 추가
svg.setAttribute("class", "w-5 h-5");
svg.setAttribute("fill", "currentColor");
svg.setAttribute("viewBox", "0 0 20 20");
svg.setAttribute("xmlns", "http://www.w3.org/2000/svg");

// Path 태그 생성
const path = document.createElementNS(
"http://www.w3.org/2000/svg",
"path"
);

// Path 속성 추가
path.setAttribute("fill-rule", "evenodd");
path.setAttribute(
"d",
"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
);
path.setAttribute("clip-rule", "evenodd");

// Path 태그를 SVG 태그에 추가
svg.appendChild(path);

// SVG 태그를 버튼에 삽입
deleteButton.appendChild(svg);

// 엑스 버튼을 누르면 해당 div 삭제
deleteButton.addEventListener("click", function (e) {
e.stopPropagation(); // 클릭 이벤트가 부모 요소로 전파되는 것을 막음
// selectValues.splice(newDiv.id, 1);
selectValues[selectId].splice(selectValues[selectId].findIndex(v => v === newDiv.id), 1);
newDiv.remove();
});

// div에 엑스 버튼 추가
newDiv.appendChild(deleteButton);

// 생성된 div를 plusField에 추가
plusField.appendChild(newDiv);
}
}

selectTags.forEach(function(select) {
select.addEventListener("change", function(event) {
addList(event.target.parentElement.id, event.target.value);
});
});
sendButton.addEventListener('click', function() {
let workTypeArr = selectValues.workType.join();
let categoryArr = selectValues.category.join();
let regionArr = selectValues.region.join();
let educationArr = selectValues.education.join();

let object = `{"type":"${workTypeArr}","category":"${categoryArr}","region":"${regionArr}","education":"${educationArr}"}`
let result = JSON.parse(object);
console.log(result);
fetch('/user/prev', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(result)
})
.then(async (res) => {
if (res.status === 200) {
console.log('success')
} else {
console.log('error')
}
})
});
});
</script>
<script src="/js/chatInput.js"></script>
<script src="/js/chatResult.js"></script>
<script src="/js/flowbite.min.js"></script>
Expand Down

0 comments on commit c6d7daf

Please sign in to comment.