From 3c4d8e998da8d4d970d0079cd09149731cc99626 Mon Sep 17 00:00:00 2001 From: wonsunil Date: Thu, 25 Mar 2021 17:20:37 +0900 Subject: [PATCH 1/4] Add: history --- js/sub3.js | 290 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 290 insertions(+) create mode 100644 js/sub3.js diff --git a/js/sub3.js b/js/sub3.js new file mode 100644 index 0000000..eb908e0 --- /dev/null +++ b/js/sub3.js @@ -0,0 +1,290 @@ +const $historyTabs = document.querySelector("#history-tabs"); + +const historySelect = year => { + // 년도를 받아서 선택후 리턴 / 해당하는 탭이 없을경우 생성 후 리턴 + const length = document.querySelectorAll(".history-box").length; + const $history = document.querySelector(`.history-box[data-year='${year}']`); + + if(!$history) { + if(!localStorage.getItem("year")) localStorage.setItem("year", year); + + $historyTabs.insertAdjacentHTML("beforeend", ` +
  • ${year}
    • + `); + + document.querySelector("#history-box").insertAdjacentHTML("beforeend", ` +
    +

    ${year}

    +
    +
    +
    + `); + + const $historyTab = [...document.querySelectorAll(".history-tab")] + .filter(({ textContent }) => textContent === localStorage.getItem("year"))[0]; + + $historyTab?.classList.add("active-history-tab"); + + return document.querySelector(`.history-box[data-year='${year}']`); + }; + + return $history; +}; + +const historyItem = (date, content) => { // 연혁 아이템 + return `
    +
  • ${date}
    • +
  • ${content}
    • +
    + + +
    +
    `; +}; + +const historyRender = index => { // 클릭한 년도별 연혁 박스 디스플레이 + const year = localStorage.getItem("year") ?? index; + const items = JSON.parse(localStorage.getItem(index ?? year)) ?? []; + + const $histories = document.querySelectorAll(".history-box"); + $histories.forEach(history => history.style.display = "none"); + + const $history = document.querySelector(`.history-box[data-year='${year}']`) ?? $histories[0]; + if($history) $history.style.display = "flex"; +}; +historyRender(); + +const historyGenerator = year => { // 연혁 생성 + historySelect(year).children[1].innerHTML = ""; + + const items = JSON.parse(localStorage.getItem(year)); + + items.forEach(item => { + historySelect(year) + .children[1] + .insertAdjacentHTML("beforeend", historyItem(item["date"], item["content"])); + }); +}; + +const historyTabGenerator = () => { // 탭 생성 + const years = Object.keys(localStorage).filter(name => name !== "year"); + years.forEach(year => historySelect(year)); +}; + +const removeHistoryTab = year => { // 탭 삭제 + const $historyTab = [...document.querySelectorAll(".history-tab")] + .filter(({ textContent }) => textContent === year)[0]; + + $historyTabs.removeChild($historyTab); + + if(localStorage.getItem("year") === year) + localStorage.setItem("year", $historyTabs.children[0].textContent); + + localStorageRender(); + tabRender(); +}; + +// 탭 정렬 +const tabAlign = nodeList => [...nodeList].sort((a, b) => a.innerHTML > b.innerHTML ? -1 : 1); +const tabRender = () => { // 정렬한 탭 렌더 + historyTabGenerator(); + + const alignedTabs = tabAlign(document.querySelectorAll(".history-tab")); + + for(let i = 0, limit = alignedTabs.length; i < limit; i++) { + const tab = alignedTabs[i]; + const year = tab.textContent; + + $historyTabs.insertAdjacentElement("beforeend", tab); + + if(JSON.parse(localStorage.getItem(year)).length === 0) { + localStorage.removeItem(year); + removeHistoryTab(year); + + localStorage.setItem("year", $historyTabs.children[0].textContent); + }; + } + + const $historyTab = [...document.querySelectorAll(".history-tab")] + .filter(({ textContent }) => textContent === localStorage.getItem("year"))[0]; + + $historyTab?.classList.add("active-history-tab"); +}; + +const localStorageRender = () => { // 년도별로 연혁 렌더 + tabRender(); + + const year = localStorage.getItem("year"); + const $historyTab = [...document.querySelectorAll(".history-box > h1")] + .filter(({ textContent }) => textContent === year)[0]; + + const years = Object.keys(localStorage).filter(name => name !== "year"); + + years.forEach(year => { + historySelect(year).children[1].innerHTML = ""; + }); + + years.forEach(year => { + const $history = historySelect(year); + + const items = JSON.parse(localStorage.getItem(year)) ?? []; + items.forEach(item => { + $history.children[1].insertAdjacentHTML("beforeend", historyItem(item["date"], item["content"])); + }); + }); + + historyRender(); +}; +localStorageRender(); + +[...$historyTabs.children].forEach(tab => { // 로컬스토리지에 저장된 년도를 액티브 + tab.classList.remove("active-history-tab"); + + const year = localStorage.getItem("year") ?? $historyTabs.children[0].textContent; + + if(tab.textContent === year) + tab.classList.add("active-history-tab"); +}); + +$historyTabs.addEventListener("mouseup", ({ target }) => { + [...$historyTabs.children].forEach(tab => { + tab.classList.remove("active-history-tab"); + }); + + target.classList.add("active-history-tab"); + + localStorage.setItem("year", target.textContent); + + historyRender(target.textContent); +}); + +const $popupBox = document.querySelector("#popup-box"); +const $addHistory = document.querySelector("#add-history"); +$addHistory.addEventListener("click", () => { + $popupBox.style.display = "block"; +}); + +const popupReset = () => { // 팝업 초기화 + [...document.querySelectorAll(".popup-group")] + .forEach(({ children }) => children[1].value = ""); + + $popupBox.style.display = "none"; +}; + +const openPopup = (...arguments) => { // 수정 팝업 생성 + const [ content, date, index ] = arguments; + const oldYear = date.substring(0, 4); + + document.body.insertAdjacentHTML("beforeend", ` +
    +
    +
    +
    + + +
    +
    + + +
    +
    +
    + + +
    +
    +
    +
    + `); + + const $clonePopup = document.querySelector("#clone-popup-box"); + + const $close = document.querySelector("#clone-close"); + $close.addEventListener("click", ({ target }) => document.body.removeChild($clonePopup)); + + const $save = document.querySelector("#clone-save"); + $save.addEventListener("click", ({ target }) => { + const $historyContent = document.querySelector("#clone-history-content"); + const $date = document.querySelector("#clone-date"); + + if($historyContent.value === "") { + alert("연혁 내용칸이 비었습니다"); + + return $historyContent.focus(); + }; + + if($date.value === "") { + alert("연혁 날짜칸이 비었습니다"); + + return $date.focus(); + }; + + const year = $date.value.substring(0, 4); + const items = JSON.parse(localStorage.getItem(year)) ?? []; + + document.body.removeChild($clonePopup); + + if(oldYear !== year) { + const parent = target?.parentNode?.parentNode; + + parent.parentNode.removeChild(parent); + + const oldItems = JSON.parse(localStorage.getItem(oldYear)).filter((item, idx) => idx !== index); + localStorage.setItem(oldYear, JSON.stringify([...oldItems])); + }; + + localStorage.setItem(year, JSON.stringify([...items, {date: $date.value, content: $historyContent.value}])); + + historySelect(year).children[1].innerHTML = ""; + + tabRender(); + return historyGenerator(year); + }); +}; + +const $save = document.querySelector("#save"); +$save.addEventListener("click", () => { + const $historyContent = document.querySelector("#history-content"); + const $date = document.querySelector("#date"); + + if($historyContent.value === "") { + alert("연혁 내용칸이 비었습니다"); + + return $historyContent.focus(); + }; + + if($date.value === "") { + alert("연혁 날짜칸이 비었습니다"); + + return $date.focus(); + }; + + const year = $date.value.substring(0, 4); + const items = JSON.parse(localStorage.getItem(year)) ?? []; + + localStorage.setItem(year, JSON.stringify([...items, {date: $date.value, content: $historyContent.value}])); + + historySelect(year) + .children[1] + .insertAdjacentHTML("beforeend", historyItem($date.value, $historyContent.value)); + + popupReset(); + historyRender(); + tabRender(); +}); + +const $close = document.querySelector("#close"); +$close.addEventListener("click", ({ target }) => popupReset()); + +const $historyBox = document.querySelector("#history-box"); +$historyBox.addEventListener("click", ({ target }) => { + if(!target.classList.contains("edit")) return false; + + const parent = target?.parentNode?.parentNode; + + const content = parent.children[1].innerHTML; + const date = parent.children[0].innerHTML; + const index = [...parent.parentNode.children].findIndex(element => element === parent); + + openPopup(content, date, index); +}); \ No newline at end of file From a60cdec5ddeba4b487e3e9ae05a2517d0bce29fb Mon Sep 17 00:00:00 2001 From: wonsunil Date: Thu, 25 Mar 2021 17:54:57 +0900 Subject: [PATCH 2/4] Feat: history delete method --- js/sub3.js | 37 +++++++++++++++++++++++++++---------- 1 file changed, 27 insertions(+), 10 deletions(-) diff --git a/js/sub3.js b/js/sub3.js index eb908e0..e2479c1 100644 --- a/js/sub3.js +++ b/js/sub3.js @@ -75,10 +75,10 @@ const removeHistoryTab = year => { // 탭 삭제 const $historyTab = [...document.querySelectorAll(".history-tab")] .filter(({ textContent }) => textContent === year)[0]; - $historyTabs.removeChild($historyTab); + if($historyTab) $historyTabs.removeChild($historyTab); if(localStorage.getItem("year") === year) - localStorage.setItem("year", $historyTabs.children[0].textContent); + localStorage.setItem("year", $historyTabs.children[0] !== undefined ? $historyTabs.children[0].textContent : ""); localStorageRender(); tabRender(); @@ -101,7 +101,7 @@ const tabRender = () => { // 정렬한 탭 렌더 localStorage.removeItem(year); removeHistoryTab(year); - localStorage.setItem("year", $historyTabs.children[0].textContent); + localStorage.setItem("year", $historyTabs.children[0] !== undefined ? $historyTabs.children[0].textContent : ""); }; } @@ -238,7 +238,9 @@ const openPopup = (...arguments) => { // 수정 팝업 생성 historySelect(year).children[1].innerHTML = ""; tabRender(); - return historyGenerator(year); + historyGenerator(year); + localStorageRender(); + return historySelect(year); }); }; @@ -278,13 +280,28 @@ $close.addEventListener("click", ({ target }) => popupReset()); const $historyBox = document.querySelector("#history-box"); $historyBox.addEventListener("click", ({ target }) => { - if(!target.classList.contains("edit")) return false; + if(target.classList.contains("edit")) { + const parent = target?.parentNode?.parentNode; + const content = parent.children[1].innerHTML; + const date = parent.children[0].innerHTML; + const index = [...parent.parentNode.children].findIndex(element => element === parent); - const parent = target?.parentNode?.parentNode; + return openPopup(content, date, index); + }; + + if(target.classList.contains("delete")) { + const parent = target?.parentNode?.parentNode?.parentNode; + const index = [...parent.parentNode.children].findIndex(element => element === parent); + + const year = localStorage.getItem("year"); + const items = JSON.parse(localStorage.getItem(year)).filter((item, idx) => idx !== index - 1); - const content = parent.children[1].innerHTML; - const date = parent.children[0].innerHTML; - const index = [...parent.parentNode.children].findIndex(element => element === parent); + localStorage.setItem(year, JSON.stringify([...items])); + localStorageRender(); - openPopup(content, date, index); + if(items.length === 0) { + removeHistoryTab(year); + parent.parentNode.parentNode.removeChild(parent.parentNode); + }; + }; }); \ No newline at end of file From 4b5a4b060a312ce7fd44709043b79e0bec02fb1b Mon Sep 17 00:00:00 2001 From: wonsunil Date: Fri, 26 Mar 2021 09:24:45 +0900 Subject: [PATCH 3/4] Fixed: edit, delete function error --- js/sub3.js | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/js/sub3.js b/js/sub3.js index e2479c1..e9b04ff 100644 --- a/js/sub3.js +++ b/js/sub3.js @@ -88,7 +88,7 @@ const removeHistoryTab = year => { // 탭 삭제 const tabAlign = nodeList => [...nodeList].sort((a, b) => a.innerHTML > b.innerHTML ? -1 : 1); const tabRender = () => { // 정렬한 탭 렌더 historyTabGenerator(); - + const alignedTabs = tabAlign(document.querySelectorAll(".history-tab")); for(let i = 0, limit = alignedTabs.length; i < limit; i++) { @@ -231,9 +231,15 @@ const openPopup = (...arguments) => { // 수정 팝업 생성 const oldItems = JSON.parse(localStorage.getItem(oldYear)).filter((item, idx) => idx !== index); localStorage.setItem(oldYear, JSON.stringify([...oldItems])); + + localStorage.setItem(year, JSON.stringify([...items, {date: $date.value, content: $historyContent.value}])); + + return localStorageRender(); }; - localStorage.setItem(year, JSON.stringify([...items, {date: $date.value, content: $historyContent.value}])); + items[index] = {date: $date.value, content: $historyContent.value}; + + localStorage.setItem(year, JSON.stringify([...items])); historySelect(year).children[1].innerHTML = ""; From 9ab5ce43cdb9f3ea66eb4ed273936a734438e90d Mon Sep 17 00:00:00 2001 From: wonsunil Date: Fri, 26 Mar 2021 17:35:35 +0900 Subject: [PATCH 4/4] Refactoring --- js/sub3.js | 380 +++++++++++++++++------------------------------------ 1 file changed, 124 insertions(+), 256 deletions(-) diff --git a/js/sub3.js b/js/sub3.js index e9b04ff..ca3cdf7 100644 --- a/js/sub3.js +++ b/js/sub3.js @@ -1,313 +1,181 @@ const $historyTabs = document.querySelector("#history-tabs"); +const $historyBox = document.querySelector("#history-box"); -const historySelect = year => { - // 년도를 받아서 선택후 리턴 / 해당하는 탭이 없을경우 생성 후 리턴 - const length = document.querySelectorAll(".history-box").length; - const $history = document.querySelector(`.history-box[data-year='${year}']`); - - if(!$history) { - if(!localStorage.getItem("year")) localStorage.setItem("year", year); - - $historyTabs.insertAdjacentHTML("beforeend", ` -
  • ${year}
    • - `); - - document.querySelector("#history-box").insertAdjacentHTML("beforeend", ` -
    -

    ${year}

    -
    -
    -
    - `); - - const $historyTab = [...document.querySelectorAll(".history-tab")] - .filter(({ textContent }) => textContent === localStorage.getItem("year"))[0]; - - $historyTab?.classList.add("active-history-tab"); - - return document.querySelector(`.history-box[data-year='${year}']`); - }; - - return $history; -}; - -const historyItem = (date, content) => { // 연혁 아이템 - return `
    -
  • ${date}
    • -
  • ${content}
    • -
    - - -
    -
    `; -}; - -const historyRender = index => { // 클릭한 년도별 연혁 박스 디스플레이 - const year = localStorage.getItem("year") ?? index; - const items = JSON.parse(localStorage.getItem(index ?? year)) ?? []; - - const $histories = document.querySelectorAll(".history-box"); - $histories.forEach(history => history.style.display = "none"); - - const $history = document.querySelector(`.history-box[data-year='${year}']`) ?? $histories[0]; - if($history) $history.style.display = "flex"; -}; -historyRender(); - -const historyGenerator = year => { // 연혁 생성 - historySelect(year).children[1].innerHTML = ""; - - const items = JSON.parse(localStorage.getItem(year)); - - items.forEach(item => { - historySelect(year) - .children[1] - .insertAdjacentHTML("beforeend", historyItem(item["date"], item["content"])); - }); -}; - -const historyTabGenerator = () => { // 탭 생성 - const years = Object.keys(localStorage).filter(name => name !== "year"); - years.forEach(year => historySelect(year)); -}; +const resetHistoryTabs = () => $historyTabs.innerHTML = ""; +const resetHistoryBox = () => $historyBox.innerHTML = ""; -const removeHistoryTab = year => { // 탭 삭제 - const $historyTab = [...document.querySelectorAll(".history-tab")] - .filter(({ textContent }) => textContent === year)[0]; +const getYear = () => localStorage.getItem("year") ?? ""; +const setYear = year => localStorage.setItem("year", year); +const getItem = year => localStorage.getItem(year) ? JSON.parse(localStorage.getItem(year)) : []; +const setItem = (year, newItem, flag = true) => localStorage.setItem(year, JSON.stringify(flag ? [...getItem(year), ...newItem] : [...newItem])); +const getYearKeys = () => Object.keys(localStorage).filter(name => name !== "year"); +const removeItem = name => localStorage.removeItem(name); - if($historyTab) $historyTabs.removeChild($historyTab); +const append = (target, position, html) => target.insertAdjacentHTML(position, html); - if(localStorage.getItem("year") === year) - localStorage.setItem("year", $historyTabs.children[0] !== undefined ? $historyTabs.children[0].textContent : ""); +const historyTab = year => `
  • ${year}
    • `; +const historyTabSelect = year => [...document.querySelectorAll(`.history-tab`)].filter(tab => tab.textContent === year)[0]; +const historyTabGenerator = year => append($historyTabs, "beforeend", historyTab(year)); +const removeHistoryTab = year => historyTabSelect(year) ? $historyTabs.removeChild(historyTabSelect(year)) : false; - localStorageRender(); - tabRender(); -}; +const historyBox = year => ``; +const historyBoxSelect = year => document.querySelector(`.history-box[data-year='${year}']`); +const historyBoxGenerator = year => append($historyBox, "beforeend", historyBox(year)); +const removeHistoryBox = year => historyBoxSelect(year) ? $historyBox.removeChild(historyBoxSelect(year)) : false; -// 탭 정렬 -const tabAlign = nodeList => [...nodeList].sort((a, b) => a.innerHTML > b.innerHTML ? -1 : 1); -const tabRender = () => { // 정렬한 탭 렌더 - historyTabGenerator(); +const historyItem = (date, content) => `
  • ${date}
  • ${content}
    • `; +const historyItemGenerator = (year, date, content) => append(historyBoxSelect(year).children[1], "beforeend", historyItem(date, content)); - const alignedTabs = tabAlign(document.querySelectorAll(".history-tab")); +const historyRender = year => historyBoxSelect(year ?? getYear()) ? historyBoxSelect(year ?? getYear()).style.display = "flex" : ""; +const historyDisplayNone = () => [...$historyBox.children].forEach(element => element.style.display = "none"); - for(let i = 0, limit = alignedTabs.length; i < limit; i++) { - const tab = alignedTabs[i]; - const year = tab.textContent; +const cleanLocalStorage = () => Object.keys(localStorage).forEach(key => {if(getItem(key) === "" || getItem(key).length === 0) removeItem(key);}); - $historyTabs.insertAdjacentElement("beforeend", tab); +const render = () => { + cleanLocalStorage(); - if(JSON.parse(localStorage.getItem(year)).length === 0) { - localStorage.removeItem(year); - removeHistoryTab(year); + getYearKeys().forEach(year => { + if(year !== "") { + historyTabGenerator(year); + historyBoxGenerator(year); - localStorage.setItem("year", $historyTabs.children[0] !== undefined ? $historyTabs.children[0].textContent : ""); + getItem(year).forEach(item => { + const date = item["date"].substring(5).replace("-","."); + historyItemGenerator(year, date, item["content"]); + }); }; - } - - const $historyTab = [...document.querySelectorAll(".history-tab")] - .filter(({ textContent }) => textContent === localStorage.getItem("year"))[0]; - - $historyTab?.classList.add("active-history-tab"); -}; - -const localStorageRender = () => { // 년도별로 연혁 렌더 - tabRender(); - - const year = localStorage.getItem("year"); - const $historyTab = [...document.querySelectorAll(".history-box > h1")] - .filter(({ textContent }) => textContent === year)[0]; - - const years = Object.keys(localStorage).filter(name => name !== "year"); - - years.forEach(year => { - historySelect(year).children[1].innerHTML = ""; }); - years.forEach(year => { - const $history = historySelect(year); - - const items = JSON.parse(localStorage.getItem(year)) ?? []; - items.forEach(item => { - $history.children[1].insertAdjacentHTML("beforeend", historyItem(item["date"], item["content"])); - }); - }); - - historyRender(); + historyDisplayNone(); + if(!historyTabSelect(getYear())) { + setYear($historyTabs.children[0]?.textContent ?? ""); + historyRender($historyTabs.children[0]?.textContent); + }; + if(historyBoxSelect(getYear())) historyRender(); }; -localStorageRender(); +render(); -[...$historyTabs.children].forEach(tab => { // 로컬스토리지에 저장된 년도를 액티브 - tab.classList.remove("active-history-tab"); - - const year = localStorage.getItem("year") ?? $historyTabs.children[0].textContent; - - if(tab.textContent === year) - tab.classList.add("active-history-tab"); -}); +const reset = () => { + cleanLocalStorage(); + resetHistoryTabs(); + resetHistoryBox(); + render(); +}; $historyTabs.addEventListener("mouseup", ({ target }) => { - [...$historyTabs.children].forEach(tab => { - tab.classList.remove("active-history-tab"); - }); + [...$historyTabs.children].forEach(tab => tab.classList.remove("active-history-tab")); target.classList.add("active-history-tab"); - localStorage.setItem("year", target.textContent); + setYear(target.textContent); - historyRender(target.textContent); + historyDisplayNone(); + historyRender(); }); -const $popupBox = document.querySelector("#popup-box"); const $addHistory = document.querySelector("#add-history"); -$addHistory.addEventListener("click", () => { - $popupBox.style.display = "block"; -}); - -const popupReset = () => { // 팝업 초기화 - [...document.querySelectorAll(".popup-group")] - .forEach(({ children }) => children[1].value = ""); +$addHistory.addEventListener("click", () => document.forms["insert"].style.display = "block"); - $popupBox.style.display = "none"; -}; - -const openPopup = (...arguments) => { // 수정 팝업 생성 - const [ content, date, index ] = arguments; - const oldYear = date.substring(0, 4); - - document.body.insertAdjacentHTML("beforeend", ` -
    -
    -
    -
    - - -
    -
    - - -
    -
    -
    - - -
    -
    -
    -
    - `); - - const $clonePopup = document.querySelector("#clone-popup-box"); - - const $close = document.querySelector("#clone-close"); - $close.addEventListener("click", ({ target }) => document.body.removeChild($clonePopup)); - - const $save = document.querySelector("#clone-save"); - $save.addEventListener("click", ({ target }) => { - const $historyContent = document.querySelector("#clone-history-content"); - const $date = document.querySelector("#clone-date"); - - if($historyContent.value === "") { - alert("연혁 내용칸이 비었습니다"); - - return $historyContent.focus(); - }; +document.addEventListener("click", event => { + const { target } = event; - if($date.value === "") { - alert("연혁 날짜칸이 비었습니다"); + if(target.classList.contains("close")) { + event.preventDefault(); - return $date.focus(); - }; - - const year = $date.value.substring(0, 4); - const items = JSON.parse(localStorage.getItem(year)) ?? []; - - document.body.removeChild($clonePopup); + target.parentNode.parentNode.reset(); + target.parentNode.parentNode.style.display = "none"; + }; - if(oldYear !== year) { - const parent = target?.parentNode?.parentNode; + if(target.classList.contains("edit")) { + const parent = target?.parentNode?.parentNode; + const index = [...parent.parentNode.children].findIndex(element => element === parent); + const { content, date } = getItem(getYear())[index]; + + const form = document.forms["modify"]; + form["modify-content"].value = content; + form["modify-date"].value = date; + form.dataset.old = date; + form.dataset.index = index; + return form.style.display = "block"; + }; - parent.parentNode.removeChild(parent); + if(target.classList.contains("delete")) { + const parent = target?.parentNode?.parentNode?.parentNode; + const index = [...parent.parentNode.children].findIndex(element => element === parent); - const oldItems = JSON.parse(localStorage.getItem(oldYear)).filter((item, idx) => idx !== index); - localStorage.setItem(oldYear, JSON.stringify([...oldItems])); + const year = getYear(); + const items = getItem(year).filter((item, idx) => idx !== index - 1); - localStorage.setItem(year, JSON.stringify([...items, {date: $date.value, content: $historyContent.value}])); + setItem(year, items, false); + reset(); - return localStorageRender(); + if(items.length === 0) { + removeHistoryTab(year); + removeHistoryBox(year); }; + }; +}); +document.addEventListener("submit", event => { + event.preventDefault(); - items[index] = {date: $date.value, content: $historyContent.value}; - - localStorage.setItem(year, JSON.stringify([...items])); + const form = event.target; - historySelect(year).children[1].innerHTML = ""; + if(form.id === "insert") { + const $content = form["insert-content"].value; + const $date = form["date"].value; + const year = $date.substring(0, 4); + const items = getItem(year); - tabRender(); - historyGenerator(year); - localStorageRender(); - return historySelect(year); - }); -}; + const date = $date.substring(5).replace("-","."); -const $save = document.querySelector("#save"); -$save.addEventListener("click", () => { - const $historyContent = document.querySelector("#history-content"); - const $date = document.querySelector("#date"); + setItem(date, [{date: $date, content: $content}]); + + if(getYear() === "") setYear(year); - if($historyContent.value === "") { - alert("연혁 내용칸이 비었습니다"); + if(!historyBoxSelect(year)) { + historyTabGenerator(year); + historyBoxGenerator(year); + }; - return $historyContent.focus(); - }; + append(historyBoxSelect(year).children[1], "beforeend", historyItem(date, $content)); - if($date.value === "") { - alert("연혁 날짜칸이 비었습니다"); + form.reset(); + form.style.display = "none"; - return $date.focus(); + return reset(); }; - const year = $date.value.substring(0, 4); - const items = JSON.parse(localStorage.getItem(year)) ?? []; + if(form.id === "modify") { + const $content = form["modify-content"].value; + const $date = form["modify-date"]; + const index = form.dataset.index; - localStorage.setItem(year, JSON.stringify([...items, {date: $date.value, content: $historyContent.value}])); + const year = $date.value; + const items = getItem(year); + const oldYear = form.dataset.old; - historySelect(year) - .children[1] - .insertAdjacentHTML("beforeend", historyItem($date.value, $historyContent.value)); + if(oldYear !== year) { + const oldItems = getItem(oldYear).slice(index, 1); + + localStorage.setItem(oldYear, JSON.stringify(...oldItems)); - popupReset(); - historyRender(); - tabRender(); -}); + setItem(year.substring(0, 4), [{date: year, content: $content}]); -const $close = document.querySelector("#close"); -$close.addEventListener("click", ({ target }) => popupReset()); + form.style.display = "none"; + form.reset(); -const $historyBox = document.querySelector("#history-box"); -$historyBox.addEventListener("click", ({ target }) => { - if(target.classList.contains("edit")) { - const parent = target?.parentNode?.parentNode; - const content = parent.children[1].innerHTML; - const date = parent.children[0].innerHTML; - const index = [...parent.parentNode.children].findIndex(element => element === parent); + return reset(); + }; - return openPopup(content, date, index); - }; + $date.dataset.old = $date.value; - if(target.classList.contains("delete")) { - const parent = target?.parentNode?.parentNode?.parentNode; - const index = [...parent.parentNode.children].findIndex(element => element === parent); + items[index] = {date: $date.value, content: $content}; - const year = localStorage.getItem("year"); - const items = JSON.parse(localStorage.getItem(year)).filter((item, idx) => idx !== index - 1); + setItem(year.substring(0, 4), items, false); - localStorage.setItem(year, JSON.stringify([...items])); - localStorageRender(); + form.style.display = "none"; + form.reset(); - if(items.length === 0) { - removeHistoryTab(year); - parent.parentNode.parentNode.removeChild(parent.parentNode); - }; + return reset(); }; }); \ No newline at end of file