woowacourse · ddongule · Dec 10, 2020 · Dec 10, 2020 · Dec 10, 2020 · Dec 11, 2020
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+.vscode
+.DS_Store
diff --git a/README.md b/README.md
diff --git a/images/1.png b/images/1.png
diff --git a/index.html b/index.html
@@ -6,8 +6,15 @@
   </head>
   <body>
     <div id="app">
-      <h1>🚇 지하철 노선도 관리 </h1>
+      <h1>🚇 지하철 노선도 관리</h1>
     </div>
+    <div id="menu">
+      <button id="station-manager-button">1. 역 관리</button>
+      <button id="line-manager-button">2. 노선 관리</button>
+      <button id="section-manager-button">3. 구간 관리</button>
+      <button id="map-print-manager-button">4. 지하철 노선도 출력</button>
+    </div>
+    <div id="content"></div>
     <script type="module" src="src/index.js"></script>
   </body>
 </html>
diff --git a/src/components/line-manage-container.js b/src/components/line-manage-container.js
@@ -0,0 +1,72 @@
+import SubwayLine from "../domain/subway-line.js";
+import inputNameValidator from "../utils/inputs/validator/name-validator.js";
+import clearInput from "../utils/inputs/clear-input.js";
+import { saveToLocalStorage } from "../index.js";
+import { showNewRow, makeSelectOptions } from "../utils/display/make-elements.js";
+import { getStationByName } from "../utils/global-utils.js";
+import { LINE_ALERT_MESSAGES } from "../global/messages.js";
+import { LINE_ARRAY_KEY, LINE_TAGS } from "../global/constant.js";
+
+const SUBWAY_LINE_TBODY_ID = "lines";
+const VALIDATION_TYPE = "LINE";
+
+function loadLines(state) {
+  for (const line of state.subwayLines) {
+    showNewRow(SUBWAY_LINE_TBODY_ID, line, [
+      line.lineName,
+      line.stations[0].stationName,
+      line.stations[line.stations.length - 1].stationName
+    ]);
+  }
+}
+
+function validateLineName(subwayLines, lineName, upLine, downLine, addLineInput) {
+  if (inputNameValidator(VALIDATION_TYPE, lineName)) {
+    saveLine(subwayLines, lineName, upLine, downLine);
+    saveToLocalStorage(LINE_ARRAY_KEY, JSON.stringify(subwayLines));
+    clearInput(addLineInput);
+  } else {
+    clearInput(addLineInput);
+  }
+}
+
+function saveLine(subwayLines, lineName, upLine, downLine) {
+  let lineId = 0;
+  if (subwayLines.length !== 0) {
+    lineId = subwayLines[subwayLines.length - 1].id + 1;
+  }
+
+  const line = new SubwayLine(
+    lineName,
+    getStationByName(upLine.value),
+    getStationByName(downLine.value),
+    lineId
+  );
+
+  showNewRow(SUBWAY_LINE_TBODY_ID, line, [
+    line.lineName,
+    line.stations[0].stationName,
+    line.stations[line.stations.length - 1].stationName
+  ]);
+
+  subwayLines.push(line);
+}
+
+export default function lineManageContainer(state) {
+  const addLineInput = document.getElementById(LINE_TAGS.LINE_NAME_INPUT_ID);
+  const addLineSubmit = document.getElementById(LINE_TAGS.ADD_LINE_ID);
+  const upLine = document.getElementById(LINE_TAGS.SELECT_UP_LINE_ID);
+  const downLine = document.getElementById(LINE_TAGS.SELECT_DOWN_LINE_ID);
+  makeSelectOptions(upLine, state.stationArray);
+  makeSelectOptions(downLine, state.stationArray);
+  loadLines(state);
+
+  addLineSubmit.addEventListener("click", () => {
+    if (upLine.value !== downLine.value) {
+      const lineNameInputValue = addLineInput.value.trim();
+      validateLineName(state.subwayLines, lineNameInputValue, upLine, downLine, addLineInput);
+    } else {
+      alert(LINE_ALERT_MESSAGES.ERROR_UPLINE_DOWNLINE_SAME);
+    }
+  });
+}
diff --git a/src/components/map-print-manage-container.js b/src/components/map-print-manage-container.js
@@ -0,0 +1,39 @@
+import { state } from "../index.js";
+
+function printAllLineAndStations(elementToAppend, subwayLines) {
+  for (const line of subwayLines) {
+    printLineName(elementToAppend, line.lineName);
+    printStation(elementToAppend, line.stations);
+  }
+}
+
+function printLineName(elementToAppend, lineName) {
+  const h2 = document.createElement("h2");
+
+  h2.append(lineName);
+  elementToAppend.append(h2);
+}
+
+function printStation(elementToAppend, stationArray) {
+  for (const station of stationArray) {
+    const stationsInLine = document.createElement("li");
+    stationsInLine.append(station.stationName);
+    elementToAppend.append(stationsInLine);
+  }
+}
+
+export default function mapPrintManageContainer() {
+  const parent = document.getElementById("manage-map-print");
+  const div = document.createElement("div");
+
+  if (state.subwayLines.length) {
+    printAllLineAndStations(div, state.subwayLines);
+  } else {
+    const title = `<h2>노선이 없습니다.<br />노선에 아래의 역들을 등록해 주세요.</h2>`;
+    const titleElement = new DOMParser().parseFromString(title, "text/html").firstElementChild;
+    div.append(titleElement);
+    printStation(div, state.stationArray);
+  }
+
+  parent.append(div);
+}
diff --git a/src/components/section-manage-container.js b/src/components/section-manage-container.js
@@ -0,0 +1,184 @@
+import { state, saveToLocalStorage } from "../index.js";
+import { LINE_ARRAY_KEY, SECTION_TAGS } from "../global/constant.js";
+import { CONFIRM_MESSAGES } from "../global/messages.js";
+import { SECTION_HTML, makeSectionHtml } from "../global/innerHtml.js";
+import { getStationByName } from "../utils/global-utils.js";
+import {
+  makeNewElementWithInnerHtml,
+  makeNewTdWithElement
+} from "../utils/display/make-elements.js";
+import sectionInputValidator, {
+  checkZero
+} from "../utils/inputs/validator/section-input-validator.js";
+
+import clearInput from "../utils/inputs/clear-input.js";
+
+function removeAllChild(element) {
+  while (element.firstChild) {
+    element.removeChild(element.firstChild);
+  }
+}
+
+function loadEditSectionLines() {
+  const parentDiv = document.getElementById(SECTION_TAGS.PARENT_SECTION_ID);
+
+  for (const line of state.subwayLines) {
+    const lineManageButton = makeNewElementWithInnerHtml("button", line.lineName);
+    lineManageButton.classList.add(SECTION_TAGS.LINE_MENU_BUTTON_CLASS);
+    lineManageButton.dataset.id = `manage-${line.id}`;
+
+    parentDiv.append(lineManageButton);
+  }
+}
+
+function indexOfNewElement(sectionInput, stationsInLine) {
+  if (sectionInput < stationsInLine.length) {
+    return sectionInput;
+  }
+  return stationsInLine.length;
+}
+
+function addSectionInput(input, option, line, tableBody) {
+  const sectionInputValue = checkZero(input.value);
+
+  if (sectionInputValidator(sectionInputValue, option.value, line.stations)) {
+    const newStation = getStationByName(option.value);
+    const newIndex = indexOfNewElement(sectionInputValue, line.stations);
+    const tr = makeOneRow(newStation, newIndex, line, tableBody);
+    line.stations.splice(parseInt(sectionInputValue), 0, newStation);
+
+    updateAddedIndex(newIndex, tableBody.children);
+    tableBody.insertBefore(tr, tableBody.children[newIndex]);
+    saveToLocalStorage(LINE_ARRAY_KEY, JSON.stringify(state.subwayLines));
+    clearInput(input);
+  } else {
+    clearInput(input);
+  }
+}
+
+function makeSelectOptions(stationArray) {
+  const selectWrapper = document.createElement("select");
+  selectWrapper.id = SECTION_TAGS.STATION_SELECTOR_ID;
+
+  for (const station of stationArray) {
+    const option = `<option value="${station.stationName}">${station.stationName}</option>`;
+    appendHtmlToParent(selectWrapper, option);
+  }
+  return selectWrapper;
+}
+
+function makeSectionManager(stationArray, wrapper, parent) {
+  const selectWrapper = makeSelectOptions(stationArray);
+
+  appendHtmlToParent(wrapper, SECTION_HTML.SECTION_TABLE_HTML);
+  wrapper.append(selectWrapper);
+  appendHtmlToParent(wrapper, SECTION_HTML.SECTION_INPUT_HTML);
+  parent.append(wrapper);
+}
+
+export default function sectionManageContainer() {
+  loadEditSectionLines();
+  const parentDiv = document.getElementById(SECTION_TAGS.PARENT_SECTION_ID);
+  const lineWrapperDiv = document.createElement("div");
+  lineWrapperDiv.id = "manage-wrapper";
+
+  for (const line of state.subwayLines) {
+    const manage = document.querySelector(`[data-id="manage-${line.id}"]`);
+    manage.addEventListener("click", () => {
+      removeAllChild(lineWrapperDiv);
+      appendHtmlToParent(lineWrapperDiv, makeSectionHtml(line.lineName));
+      makeSectionManager(state.stationArray, lineWrapperDiv, parentDiv);
+
+      const table = document.getElementById("section-table");
+      const tableBody = document.getElementById("section-tbody");
+
+      const selectedOption = document.getElementById(SECTION_TAGS.STATION_SELECTOR_ID);
+      const sectionInput = document.getElementById(SECTION_TAGS.ORDER_INPUT_ID);
+      const addSectionInputButton = document.getElementById(SECTION_TAGS.ADD_BUTTON_ID);
+
+      addSectionInputButton.addEventListener("click", () => {
+        addSectionInput(sectionInput, selectedOption, line, tableBody);
+      });
+
+      showTableItems(line, tableBody);
+      table.append(tableBody);
+      lineWrapperDiv.append(table);
+    });
+  }
+}
+
+// TODO - utils로 빼기
+
+function appendHtmlToParent(parent, html) {
+  const htmlDOM = new DOMParser().parseFromString(html, "text/html").body.childNodes;
+
+  for (const node of htmlDOM) {
+    parent.append(node);
+  }
+}
+
+function updateDeletedIndex(currentIndex, trDatas) {
+  for (let index = parseInt(currentIndex.innerHTML); index < trDatas.length; index++) {
+    trDatas[index].firstChild.innerHTML = parseInt(trDatas[index].firstChild.innerHTML) - 1;
+  }
+}
+
+function updateAddedIndex(currentIndex, trDatas) {
+  for (let index = parseInt(currentIndex); index < trDatas.length; index++) {
+    trDatas[index].firstChild.innerHTML = parseInt(trDatas[index].firstChild.innerHTML) + 1;
+  }
+}
+
+function deletedStationFromLine(currentStations, deleteButton) {
+  return currentStations.filter(
+    station => parseInt(deleteButton.dataset.id) !== parseInt(station.id)
+  );
+}
+
+function deleteStationFromLine(tr, line, tableBody) {
+  if (confirm(CONFIRM_MESSAGES.CONFIRM_DELETE)) {
+    line.stations = deletedStationFromLine(line.stations, tr.childNodes[2].firstChild);
+    tr.remove();
+
+    updateDeletedIndex(tr.childNodes[0], tableBody.children);
+  }
+  saveToLocalStorage(LINE_ARRAY_KEY, JSON.stringify(state.subwayLines));
+}
+
+function makeTdDeleteButton(station, tr, line, tableBody) {
+  const tdDeleteButton = makeNewElementWithInnerHtml("button", "노선에서 삭제");
+  tdDeleteButton.class = SECTION_TAGS.DELETE_BUTTON_CLASS;
+  tdDeleteButton.dataset.id = station.id;
+
+  tdDeleteButton.addEventListener("click", () => {
+    deleteStationFromLine(tr, line, tableBody);
+  });
+
+  return tdDeleteButton;
+}
+
+function makeTrWithDataset(station, index) {
+  const tr = document.createElement("tr");
+  tr.dataset.stationId = station.id;
+  tr.dataset.trId = index;
+
+  return tr;
+}
+
+function makeOneRow(station, index, line, tableBody) {
+  const tr = makeTrWithDataset(station, index);
+  const tdIndex = makeNewElementWithInnerHtml("td", index);
+  const tdStationName = makeNewElementWithInnerHtml("td", station.stationName);
+  const tdDeleteButton = makeTdDeleteButton(station, tr, line, tableBody);
+  const tdDelete = makeNewTdWithElement(tdDeleteButton);
+  tr.append(...[tdIndex, tdStationName, tdDelete]);
+
+  return tr;
+}
+
+function showTableItems(line, tableBody) {
+  for (const [index, station] of Object.entries(line.stations)) {
+    const tr = makeOneRow(station, index, line, tableBody);
+    tableBody.append(tr);
+  }
+}
diff --git a/src/components/station-manage-container.js b/src/components/station-manage-container.js
@@ -0,0 +1,50 @@
+import Station from "../domain/station.js";
+import inputNameValidator from "../utils/inputs/validator/name-validator.js";
+import clearInput from "../utils/inputs/clear-input.js";
+import { saveToLocalStorage } from "../index.js";
+import { showNewRow } from "../utils/display/make-elements.js";
+import { STATION_ARRAY_KEY, STATION_TAGS } from "../global/constant.js";
+
+const VALIDATION_TYPE = "STATION";
+
+function loadStations(state) {
+  for (const station of state.stationArray) {
+    showNewRow(STATION_TAGS.STATION_TBODY_ID, station, [station.stationName]);
+  }
+}
+
+function makeStationId(stationArray) {
+  let stationId = 0;
+
+  if (stationArray.length !== 0) {
+    stationId = stationArray[stationArray.length - 1].id + 1;
+  }
+
+  return stationId;
+}
+
+function makeNewStation(stationArray, stationNameInputValue) {
+  const stationId = makeStationId(stationArray);
+  const station = new Station(stationNameInputValue, stationId);
+
+  showNewRow(STATION_TAGS.STATION_TBODY_ID, station, [station.stationName]);
+  stationArray.push(station);
+  saveToLocalStorage(STATION_ARRAY_KEY, JSON.stringify(stationArray));
+}
+
+export default function stationManageContainer(state) {
+  const addStationButton = document.getElementById(STATION_TAGS.ADD_BUTTON_ID);
+  const stationNameInput = document.getElementById(STATION_TAGS.STATION_NAME_INPUT_ID);
+
+  loadStations(state);
+  addStationButton.addEventListener("click", () => {
+    const stationNameInputValue = stationNameInput.value.trim();
+
+    if (inputNameValidator(VALIDATION_TYPE, stationNameInputValue)) {
+      makeNewStation(state.stationArray, stationNameInputValue);
+      clearInput(stationNameInput);
+    } else {
+      clearInput(stationNameInput);
+    }
+  });
+}