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 e26dcab4768f29d25935a6f56b0fc0b5a6154c74 Mon Sep 17 00:00:00 2001 From: wonsunil Date: Thu, 25 Mar 2021 22:24:39 +0900 Subject: [PATCH 3/4] Add: phone --- js/sub4.js | 67 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 67 insertions(+) create mode 100644 js/sub4.js diff --git a/js/sub4.js b/js/sub4.js new file mode 100644 index 0000000..c657bfe --- /dev/null +++ b/js/sub4.js @@ -0,0 +1,67 @@ +const url = "restAPI/phone.php"; + +const result = fetch(url) +.then(res => res.json()) +.then(data => { + if(data.statusCd !== "200") { + alert("조회에 실패했습니다"); + + return location.href = "index.html"; + }; + + return [...data.items].reduce(((item, { sn, deptNm, name, telNo }) => { + item[deptNm] = [...item[deptNm] || [], {sn, name, telNo}] + + return item; + }), {}); +}); + +const $tabBox = document.querySelector("#tab-box"); +const $phoneBox = document.querySelector("#phone-box"); + +result.then(items => { + const tabs = Object.keys(items); + + tabs.forEach(tab => { + $tabBox.insertAdjacentHTML("beforeend", `
  • ${tab}
    • `); + + $phoneBox.insertAdjacentHTML("beforeend", ` +
    +
    +

    ${tab}

    +
    +
    +
    +
    + `); + + items[tab].forEach(item => { + const $phone = [...$phoneBox.children].filter(element => element.dataset.tab === tab)[0]; + $phone.children[1].insertAdjacentHTML("beforeend", ` +
    +
  • ${item["name"]}
    • +
  • ${item["telNo"]}
    • +
    + `); + }); + }); +}); + +$tabBox.addEventListener("click", ({ target }) => { + if(!target.classList.contains("tab")) return false; + + const tabs = [...target.parentNode.children]; + const index = tabs.findIndex(element => element === target); + + tabs.forEach(element => element.classList.remove("active-tab")); + tabs[index].classList.add("active-tab"); + + if(target.getAttribute("name") === "all") { + return [...$phoneBox.children].forEach(element => element.style.display = "flex"); + }; + + const $phone = [...$phoneBox.children].filter(element => element.dataset.tab === tabs[index].textContent)[0]; + [...$phoneBox.children].forEach(element => element.style.display = "none"); + + $phone.style.display = "flex"; +}); \ No newline at end of file From 14bc9b7a7f4c749f2888cdb22544e59024bf2c9c Mon Sep 17 00:00:00 2001 From: wonsunil Date: Thu, 25 Mar 2021 22:25:03 +0900 Subject: [PATCH 4/4] Delete sub3.js --- js/sub3.js | 307 ----------------------------------------------------- 1 file changed, 307 deletions(-) delete mode 100644 js/sub3.js diff --git a/js/sub3.js b/js/sub3.js deleted file mode 100644 index e2479c1..0000000 --- a/js/sub3.js +++ /dev/null @@ -1,307 +0,0 @@ -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]; - - if($historyTab) $historyTabs.removeChild($historyTab); - - if(localStorage.getItem("year") === year) - localStorage.setItem("year", $historyTabs.children[0] !== undefined ? $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] !== undefined ? $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(); - historyGenerator(year); - localStorageRender(); - return historySelect(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")) { - 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 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); - - localStorage.setItem(year, JSON.stringify([...items])); - localStorageRender(); - - if(items.length === 0) { - removeHistoryTab(year); - parent.parentNode.parentNode.removeChild(parent.parentNode); - }; - }; -}); \ No newline at end of file