sdhs-webskills · rsj2003 · Mar 26, 2021
diff --git a/src/js/current.js b/src/js/current.js
@@ -0,0 +1,113 @@
+const url = "/xml/nihList.xml";
+const $albumList = document.querySelector("#albumList");
+const $listList = document.querySelector("#listList");
+const $pagingList = document.querySelector("#pagingList");
+const $count = document.querySelector("#count");
+const $page = document.querySelector("#page");
+const $maxPage = document.querySelector("#maxPage");
+let maxPage = 1;
+let page = 1;
+
+function changePage(data) {
+  $albumList.innerHTML = "";
+  $page.innerHTML = page;
+  data.forEach((item, i) => {
+    if(i <= page * 8 && i > (page - 1) * 8){
+      const div = document.createElement("div");
+      const img = new Image();
+      const name = item.ccbaMnm1;
+
+      const itemURL = `/xml/detail/${item.ccbaKdcd}_${item.ccbaCtcd}_${item.ccbaAsno}.xml`;
+      const src = fetch(itemURL)
+                    .then(res => res.text())
+                    .then(data => new DOMParser().parseFromString(data, "text/xml"))
+                    .then(data => {
+                      return [...data.querySelectorAll("item")].map(({children}) => {
+                        return [...children].reduce((acc, {tagName, textContent}) => {
+                          acc[tagName] = textContent;
+
+                          return acc;
+                        }, {})
+                      })
+                    })
+      src.then(data => img.src = `/xml/nihcImage/${data[0].imageUrl}`);
+
+      img.onerror = function() {
+        img.src = "/src/images/no_image.png";
+        img.alt = "No images";
+      }
+
+      div.append(img, name);
+
+      div.classList.add("item");
+
+      $albumList.append(div);
+    }
+  })
+}
+
+function hasClass(element, className) {
+  return element.classList.contains(className);
+}
+
+const result = fetch(url)
+                .then(res => res.text())
+                .then(data => new DOMParser().parseFromString(data, "text/xml"))
+                .then(data => {
+                  return [...data.querySelectorAll("item")].map(({children}) => {
+                    return [...children].reduce((acc, {tagName, textContent}) => {
+                      acc[tagName] = textContent;
+
+                      return acc;
+                    }, {})
+                  })
+                })
+
+result.then(data => {
+  maxPage = Math.ceil(data.length / 8);
+  $count.innerHTML = data.length;
+  $maxPage.innerHTML = maxPage;
+  changePage(data);
+
+  for(let i = 1; i <= maxPage; i++) {
+    const td = document.createElement("td");
+    td.innerHTML = i;
+
+    td.classList.add("button", `paging${i}`, "pagingButton");
+
+    if(i === 1) td.classList.add("active");
+
+    $pagingList.querySelector(".next").before(td);
+  }
+
+
+  $pagingList.querySelectorAll(".button").forEach(item => item.addEventListener("click", e => {
+    target = e.target;
+    num = Number(target.innerHTML);
+
+    if(num > 0) {
+      page = num;
+
+      changePage(data);
+
+      $pagingList.querySelector(".active").classList.remove("active");
+
+      target.classList.add("active");
+    }else {
+      if(hasClass(target, "prev")) {
+        page--;
+        if(page < 1) page = 1;
+      }
+      if(hasClass(target, "next")) {
+        page++;
+        if(page > maxPage) page = maxPage;
+      }
+      if(hasClass(target, "first")) page = 1;
+      if(hasClass(target, "last")) page = maxPage;
+      $pagingList.querySelector(".active").classList.remove("active");
+      $pagingList.querySelectorAll(".pagingButton")[page - 1].classList.add("active");
+
+      changePage(data);
+    }
+  }))
+})
diff --git a/src/js/history.js b/src/js/history.js
@@ -0,0 +1,200 @@
+const $addHistory = document.querySelector("#addHistory");
+const $years = document.querySelector("#years");
+const $year = document.querySelector("#year");
+const $list = document.querySelector("#list");
+const $historyForm = document.querySelector("#historyForm");
+const $close = document.querySelector(".close");
+const $save = document.querySelector("#save");
+
+const yearList = JSON.parse(localStorage.getItem("yearList")) ?? [];
+const historyList = JSON.parse(localStorage.getItem("historyList")) ?? [];
+let selectYear = localStorage.getItem("selectYear") ? JSON.parse(localStorage.getItem("selectYear")) : yearList.length > 0 ? yearList[yearList.length - 1] : null;
+
+function hasClass(element, className) {
+  return element.classList.contains(className);
+}
+
+const setText = function (element, text = "") {
+  if(text !== "") element.querySelector(".text").innerHTML = text;
+  else return element.querySelector(".text").innerHTML;
+}
+
+function createElement(element, classList = []) {
+  const result = document.createElement(element);
+  classList.forEach(cl => {
+    result.classList.add(cl);
+  })
+  return result;
+}
+
+function changeYear() {
+  if(!selectYear > 0) {
+    $year.style.display = "none";
+  }else {
+    $year.style.display = "";
+    setText($year, selectYear);
+  }
+  localStorage.setItem("selectYear", selectYear);
+  document.querySelectorAll(".year").forEach(e => {
+    if(e.querySelector(".text").innerHTML == selectYear) {
+      e.classList.add("active")
+    }else {
+      e.classList.remove("active")
+    }
+  });
+
+  $list.innerHTML = "";
+
+  historyList.forEach((item, i) => {
+    if(item.year === selectYear) {
+      const li = createElement("li", ["item"]);
+      const date = createElement("span", ["date"]);
+      const notice = createElement("span", ["notice"]);
+      const modifyBtn = createElement("span", ["button", "modify"]);
+      const deleteBtn = createElement("span", ["button", "delete"]);
+
+      date.innerHTML = item.date;
+      notice.innerHTML = item.text;
+      modifyBtn.innerHTML = "수정";
+      deleteBtn.innerHTML = "삭제";
+
+      li.append(date, notice, modifyBtn, deleteBtn);
+
+      li.dataset.no = item.no;
+
+      $list.append(li);
+
+      deleteBtn.addEventListener("click", _ => {
+        let thisYears = 0;
+        historyList.forEach(e => {if(e.year === item.year) thisYears++});
+
+        if(thisYears === 1) {
+          yearList.splice(yearList.indexOf(item.year), 1);
+
+           selectYear= yearList.length > 0 ? yearList[yearList.length - 1] : null;
+
+          localStorage.setItem("yearList", JSON.stringify(yearList));
+          changeYearList();
+        }
+
+        historyList.splice(i, 1);
+
+
+        localStorage.setItem("historyList", JSON.stringify(historyList));
+        changeYear();
+      })
+
+      modifyBtn.addEventListener("click", _ => {
+        $historyForm.notice.value = item.text;
+        $historyForm.date.value = `${item.year}-${item.date.split(".").join("-")}`;
+        $historyForm.style.display = "block";
+        $historyForm.classList.add("modifing");
+        $historyForm.dataset.no = item.no;
+      })
+    }
+  })
+}
+
+function changeYearList() {
+  $years.innerHTML = "<tbody><tr></tr></tbody>";
+
+  yearList.forEach(item => {
+    const td = createElement("td", ["year"]);
+    const text = createElement("span", ["text"]);
+
+    text.innerHTML = item;
+
+    td.append(text, "년");
+
+    if(item === selectYear) td.classList.add("active");
+
+    $years.querySelector("tr").prepend(td);
+
+    td.addEventListener("click", _ => {
+      selectYear = Number(td.querySelector(".text").innerHTML);
+
+      changeYear();
+    })
+  })
+}
+
+
+$addHistory.addEventListener("click", e => {
+  $historyForm.style.display = "block";
+})
+
+$close.addEventListener("click", e => {
+  $historyForm.style.display = "";
+  $historyForm.notice.value = "";
+  $historyForm.date.value = "";
+  $historyForm.classList.remove("modifing");
+  $historyForm.dataset.no = null;
+})
+
+$historyForm.addEventListener("submit", e => {
+  e.preventDefault();
+})
+
+$save.addEventListener("click", e => {
+  if($historyForm.notice.value === "") return alert("연혁내용을 작성해주세요.");
+  if($historyForm.date.value === "") return alert("연혁일자를 작성해주세요.");
+  const result = {};
+  let date = $historyForm.date.value.split("-");
+  result.year = Number(date[0]);
+  result.date = `${date[1]}.${date[2]}`;
+  result.text = $historyForm.notice.value;
+  result.time = Number(date.join(''));
+  result.no = Date.now();
+
+  if(hasClass($historyForm, "modifing")) {
+    historyList.forEach((item, i) => {
+      if(item.no == $historyForm.dataset.no) {
+        let thisYears = 0;
+        historyList.forEach(e => {if(e.year === item.year) thisYears++});
+
+        if(thisYears === 1 && item.year !== result.year) {
+          yearList.splice(yearList.indexOf(item.year), 1);
+
+          selectYear= yearList.length > 0 ? yearList[yearList.length - 1] : null;
+
+          localStorage.setItem("yearList", JSON.stringify(yearList));
+          changeYearList();
+        }
+
+        const no = item.no;
+        historyList[i] = result;
+        historyList[i].no = no;
+      }
+    })
+  }else {
+    historyList.push(result);
+  }
+  historyList.sort(function (a, b) {
+    return a.time - b.time;
+  })
+
+  if(yearList.indexOf(result.year) < 0) {
+    yearList.push(result.year);
+
+    yearList.sort(function (a, b) {
+      return a - b;
+    })
+
+    localStorage.setItem("yearList", JSON.stringify(yearList));
+    changeYearList();
+  }
+
+  localStorage.setItem("historyList", JSON.stringify(historyList));
+
+  $historyForm.notice.value = "";
+  $historyForm.date.value = "";
+  $historyForm.style.display = "";
+  $historyForm.classList.remove("modifing");
+  $historyForm.dataset.no = null;
+  if(selectYear === null) selectYear = Number(date[0]);
+
+  changeYear();
+})
+
+changeYearList();
+changeYear();
diff --git a/src/js/phone.js b/src/js/phone.js
@@ -0,0 +1,71 @@
+const $category = document.querySelector("#category");
+const $list = document.querySelector("#list");
+
+const result = fetch("/restAPI/phone.php").then(rs => rs.json())
+  .then(data => {
+    window.a = data;
+    if(data.statusCd !== "200") {
+      alert(data.statusMsg);
+      return location.replace("/index.html");
+    }
+    const list = [{deptNm: "전체"}];
+
+    data.items.forEach(item => {
+      let returnValue = false;
+      list.forEach((li, i) => {
+        if(li.deptNm === item.deptNm) returnValue = i;
+      })
+      if(returnValue === false) {
+        list.push({deptNm: item.deptNm, children: [{name: item.name, telNo: item.telNo}]});
+      }else {
+        list[returnValue].children.push({name: item.name, telNo: item.telNo});
+      }
+    })
+
+    function addList(type) {
+      $list.innerHTML = "";
+      list.forEach(item => {
+        if(item.deptNm === "전체") return false;
+        if(type !== "전체" && type !== item.deptNm) return false;
+        const tag = document.createElement("div");
+        const subtitle = document.createElement("h2");
+        const ul = document.createElement("ul");
+        subtitle.innerHTML = item.deptNm;
+
+        tag.append(subtitle, ul);
+
+        item.children.forEach(i => {
+          const li = document.createElement("li");
+          const p = document.createElement("p");
+          const span = document.createElement("span");
+
+          p.innerHTML = i.name;
+          span.innerHTML = i.telNo;
+
+          li.append(p, span);
+
+          ul.append(li);
+        })
+
+        $list.append(tag);
+      })
+    }
+
+    list.forEach(item => {
+      const category = document.createElement("div");
+      category.innerHTML = item.deptNm;
+      if(item.deptNm === "전체") category.classList.add("active");
+
+      category.addEventListener("click", ({target}) => {
+        $category.querySelector(".active").classList.remove("active");
+        target.classList.add("active");
+
+        addList(item.deptNm);
+      })
+
+      $category.append(category);
+
+    })
+
+    addList("전체");
+  })