과거 프로그래밍 자료들/프로젝트
[javascript] API로 받아온 정보 내 각각의 버튼에 함수 적용
평부
2022. 8. 11. 16:49
* 상황 : 삭제한 단어들 안에 각각 "단어 복구하기" 버튼 존재
-> 버튼을 누르면 삭제되었던 것이 다시 원래 항목으로 돌아감
* 실제로 delete로 데이터가 완전히 삭제된 것이 아닌 status가 D -> A로 이동하는 과정
* 만들어야 하는 것들
- 단어 확인하기 버튼 누르면 staus가 "D"인 항목들 보여주기
- 닫기 버튼 누르면 staus가 "D"인 항목들 삭제하기
- 단어 복구하기 버튼을 누르면 status가 "D"에서 "A"로 이동
* 말보다는 동영상 첨부가 효율적일 것 같아 첨부
* API는 첨부하지 않음
* HTML, JS만 첨부
HTML
<div class="deleted-items">
<div class="deleted-item-list">
<p>삭제한 단어들</p>
<button class="deletedWord-btn" id="D">단어 확인하기</button>
<button class="deletedWord-btn-close">닫기</button>
<div class="deletedWord-result" name="deletedItems">
//JS를 통해 넣을 정보들
</div>
</div>
</div>
JS
function changeStatusWord(event, token) {
if (confirm("삭제한 단어를 복구 시키겠습니까? 아니라면 아니오 누르기")) {
alert("예를 눌렀습니다.");
changeStatus(event, token);
return;
} else {
alert("아니오를 눌렀습니다.");
return false;
}
}
//삭제된 정보(status="D")들 보기
const $deletedWord = document.querySelector(".deleted-item-list");
$deletedWord.addEventListener("click", deleteWordController);
function deleteWordController(event) {
const token = localStorage.getItem("w-access-token");
if (!token) {
return;
}
const target = event.target;
const className = target.className;
const eventType = event.type;
const key = event.key;
// console.log("target", target);
// console.log("className", className);
// console.log("eventType", eventType);
// console.log("key", key);
if (className === "deletedWord-btn" && eventType === "click") {
deletedWordShow(event, token);
return;
}
if (className === "deletedWord-btn-close" && eventType === "click") {
const $deletedSectionUl = document.querySelector(
`div[name="deletedItems"]`
);
$deletedSectionUl.innerHTML = "";
return;
}
}
//sql에서 status가 "D"인 정보들 보여주게 하기
async function deletedWordShow(event, token) {
const status = event.target.closest(".deletedWord-btn").id; //D로 고정
// console.log(status);
const config = {
method: "get",
url: url + `/deletedWords/${status}`,
headers: { "w-access-token": token },
};
try {
const res = await axios(config);
// console.log(res);
const wordDataSet = res.data.result;
for (let deletedSection in wordDataSet) {
console.log("wordDataSet", wordDataSet);
console.log(typeof deletedSection);
const $deletedSectionUl = document.querySelector(
`div[name="deletedItems"]`
);
const arrayForEachSection = wordDataSet[deletedSection];
let deletedResult = "";
for (let deletedWords of arrayForEachSection) {
//작성할 단어들
let element = `<p class="deletedWords-result" id="A">[결과값]
영단어 : <span class="deletedWords-result-eng">${deletedWords.english}</span>
한글 : <span class="deletedWords-result-kor">${deletedWords.korean}</span> 종류 : <span
class="deletedWords-result-type">${deletedWords.type}</span>
<button class="changeStatusdWord-btn" id=${deletedWords.wordIdx} name="A" onClick="changeStatusWord(event)">단어 복구하기</button>
</p>`; //onClick 사용 시 각각의 버튼에 각각 함수가 적용됨
deletedResult += element;
}
$deletedSectionUl.innerHTML = deletedResult;
}
if (res.data.code !== 200) {
alert(res.data.message);
return false;
}
readWords();
return true;
} catch (err) {
console.error(err);
}
}
async function changeStatus(event) {
const token = localStorage.getItem("w-access-token");
if (!token) {
return;
}
const wordIdx = event.target.closest(".changeStatusdWord-btn").id;
// console.log(wordIdx);
const config = {
method: "patch",
url: url + `/changeStatus/${wordIdx}`,
headers: { "w-access-token": token },
data: {
wordIdx: wordIdx, //복구하고자 하는 단어의 Idx값 전달하기
},
};
try {
const res = await axios(config);
if (res.data.code !== 200) {
alert(res.data.message);
return false;
}
readWords();
window.location.reload();
return true;
} catch (err) {
console.error(err);
}
}