woowacourse · bucketHaneul · Dec 9, 2020 · Dec 9, 2020 · Dec 9, 2020 · Dec 9, 2020
diff --git a/docs/README.md b/docs/README.md
@@ -0,0 +1,83 @@
+## ✅ 구현 기능 목록
+
+### 기본 세팅
+
+- 클릭되는 버튼마다 하단 result 변경하기
+
+### 지하철 역 관련
+
+- 지하철 역 목록 조회하기
+- 지하철 역 등록하기
+- 지하철 역 생성 객체(name, 속하는 line 등 포함)
+- 지하철 역 삭제하기(노선에 등록 안 된거만)
+
+### 지하철 노선 관련
+
+- 노선 등록하기(상행 종점역, 하행 종점역)
+- 노선 삭제하기
+- 중복 노선 불가
+- 지하철 노선 목록 조회하기
+
+### 지하철 구간
+
+- 관리할 노선 선택하기
+- 선택된 노선의 전체 구간 보여주기
+- 구간 추가하기( === 노선에 역 추가하기)
+  - 입력 받은 순서로, line 내 해당 번호 station 사이에 추가하기
+  - 추가 사항 적용된 구간 보여주기
+- 상행 종점과 하행 종점 삭제시, 다음 역 종점으로 설정
+-
+
+### 지하철 노선도 출력 기능
+
+- 노선도 출력 버튼 누르면 노선도 출력
+  - Line 객체 배열 순회하면서, 차례로 출력
+
+## :star: 예외처리 항목
+
+#### 역 관리
+
+- 지하철 역 이름 예외처리
+- 역이 한 line에 포함된 상태에서 삭제 될 때
+  - 노선에 등록된 역은 삭제할 수 없다는 조건 존재
+- 역 삭제 시
+  1. 역 관리에서 삭제
+  - 삭제하는 대상의 station 객체의 isIncluded 속성의 길이가 === 1 일 시 삭제 불가
+    => 역이 이미 노선에 등록되어 있음
+  - isIncluded 속성의 길이 === 0 일 시 삭제 가능
+    => 역이 등록된 노선 없음
+  2. 구간 관리에서 삭제
+  - station 객체의 isInCluded 속성에서 선택된 라인을 삭제
+- 중복 지하철 역 불가 => isOverlappedStationName()
+
+#### 노선 관리
+
+- 노선 이름 입력 값 예외처리
+- 상행과 하행 이름 같을 때
+
+#### 구간 관리
+
+- 선택 노선 변경 시 지하철 역 계속 나열 안되게 수정
+- 지하철 역 추가하고 나서 초기화
+- 중복 지하철 역 추가 불가해야함
+- 0 < inputIdx <= 마지막 인덱스 && 정수일 때
+- 상행 종점과 하행 종점 삭제시, 다음 역 종점으로 설정
+
+#### 그 외
+
+- station 객체가 노선에 등록 될 때마다 등록되는 노선을 추가하면 안됌.
+  - 하나의 역은 여러 노선에 포함될 수 있음
+  - 하지만 하나의 역은 하나의 다음 역을 가짐
+  - 이상해짐
+    => 노선을 추가할 때 새로운 역 객체를 만들기
+    => 역 객체가 속하는 노선은 1개
+- station 객체 전체를 보여줄 때
+  1. 역 관리에서
+  - isIncluded === null 인거 하나만 있으면 이거 보여주기
+  - isIncluded === null 외에 더 있으면 그 중 하나 보여주기
+  2. 노선 관리, 구간 관리의 option에서
+  - 중복만 없애서 보여주기
+
+## :open_mouth: 의문점
+
+- 객체 Line을 다룰 때 addStaionToIdx()라는 메소드를 통해서 station을 원하는 위치에 끼워넣으려 한다. 그런데 prototype을 메소드 명 앞에 붙히면 안되고, 안 붙히면 내가 원하는 대로 작동한다. 그래서 prototype에 대해 공부하였는데 내가 원하는 답을 찾지는 못했다. 더 알아봐야겠다.
diff --git a/index.html b/index.html
@@ -6,7 +6,83 @@
   </head>
   <body>
     <div id="app">
-      <h1>🚇 지하철 노선도 관리 </h1>
+      <h1>🚇 지하철 노선도 관리</h1>
+      <div>
+        <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 class="result">
+        <div id="station-manager-result" style="display: block">
+          <div>
+            <div>역 이름</div>
+            <div>
+              <input id="station-name-input" />
+              <button id="station-add-button">역 추가</button>
+            </div>
+          </div>
+          <div>
+            <div>지하철 역 목록</div>
+            <table id="staion-list-table">
+              <thead>
+                <th>역 이름</th>
+                <th>설정</th>
+              </thead>
+              <tbody id="station-list"></tbody>
+            </table>
+          </div>
+        </div>
+        <div id="line-manager-result" style="display: None">
+          <div>
+            <div>노선 이름</div>
+            <input id="line-name-input" />
+            <div>
+              <label for="line-start-station-selector">상행 종점</label>
+              <select id="line-start-station-selector"></select>
+            </div>
+            <div>
+              <label for="line-end-station-selector">하행 종점</label>
+              <select id="line-end-station-selector"></select>
+            </div>
+            <button id="line-add-button">노선 추가</button>
+          </div>
+          <div>
+            <div>지하철 역 목록</div>
+            <table id="line-list-table">
+              <thead>
+                <th>노선 이름</th>
+                <th>상행 종점역</th>
+                <th>하행 종점역</th>
+                <th>설정</th>
+              </thead>
+              <tbody id="line-list"></tbody>
+            </table>
+          </div>
+        </div>
+        <div id="section-manager-result" style="display: None">
+          <div>구간을 수정할 노선을 선택해주세요.</div>
+          <div id="section-line-list"></div>
+          <div id="selected-section-line" style="display: None">
+            <h3 id="section-line-name"></h3>
+            <div>구간 등록</div>
+            <div>
+              <select id="section-station-selector"></select>
+              <input id="section-order-input" />
+              <button id="section-add-button">등록</button>
+            </div>
+            <table id="station-in-selected-line-list-table">
+              <thead>
+                <th>순서</th>
+                <th>이름</th>
+                <th>설정</th>
+              </thead>
+              <tbody id="station-in-selected-line"></tbody>
+            </table>
+          </div>
+        </div>
+        <div id="map-print-manager-result" style="display: None"></div>
+      </div>
     </div>
     <script type="module" src="src/index.js"></script>
   </body>

diff --git a/src/index.js b/src/index.js
@@ -0,0 +1,93 @@
+import Station from "./station.js";
+import { showAllStationInManager } from "./station-manager.js";
+import Line from "./line.js";
+import { showAllLineInLineManager } from "./line-manager.js";
+import { showLineMenuInSectionManager } from "./section-manager.js";
+import { showMapList } from "./map-print-manager.js";
+import { manager } from "./manager.js";
+import { makeStationOption, makeStationList } from "./make-selector-list.js";
+
+const btnStationManager = document.getElementById("station-manager-button");
+const btnLineManager = document.getElementById("line-manager-button");
+const btnSectionManager = document.getElementById("section-manager-button");
+const btnMapPrintManager = document.getElementById("map-print-manager-button");
+const resultStationManager = document.getElementById("station-manager-result");
+const resultSectionManager = document.getElementById("section-manager-result");
+const resultLineManager = document.getElementById("line-manager-result");
+const resultMapPrintManager = document.getElementById(
+  "map-print-manager-result"
+);
+const resultList = [
+  resultStationManager,
+  resultLineManager,
+  resultSectionManager,
+  resultMapPrintManager,
+];
+
+// storage.clear();
+export const initializeStationList = () => {
+  const stationList = JSON.parse(storage.getItem("stationList"));
+  if (stationList === null) {
+    manager.stationList = [];
+  } else {
+    for (let i in stationList) {
+      const station = new Station(stationList[i].name);
+      station.next = stationList[i].next;
+      station.isIncluded = stationList[i].isIncluded;
+      manager.setStationInManager(station);
+    }
+  }
+  showAllStationInManager(makeStationList());
+};
+export const initializeLineList = () => {
+  const lineList = JSON.parse(storage.getItem("lineList"));
+  if (lineList === null) {
+    manager.lineList = [];
+  } else {
+    for (let i in lineList) {
+      const line = new Line(lineList[i].name);
+      line.length = lineList[i].length;
+      line.head = lineList[i].head;
+      manager.setLineInManager(line);
+    }
+  }
+};
+const storage = window.localStorage;
+window.onload = () => {
+  // 페이지 새로 열릴 때
+  initializeStationList();
+  initializeLineList();
+};
+window.onbeforeunload = () => {
+  // 페이지 닫히기 전
+  storage.setItem("stationList", JSON.stringify(manager.stationList));
+  storage.setItem("lineList", JSON.stringify(manager.lineList));
+};
+const makeResultBlock = (idx) => {
+  for (let i in resultList) {
+    if (i === String(idx)) {
+      resultList[i].style.display = "Block";
+    } else {
+      resultList[i].style.display = "None";
+    }
+  }
+};
+showAllStationInManager(manager.stationList);
+btnStationManager.onclick = () => {
+  makeResultBlock(0);
+  showAllStationInManager(makeStationList());
+};
+btnLineManager.onclick = () => {
+  makeResultBlock(1);
+  makeStationOption("line-start-station-selector");
+  makeStationOption("line-end-station-selector");
+  showAllLineInLineManager(manager.lineList);
+};
+btnSectionManager.onclick = () => {
+  makeResultBlock(2);
+  showLineMenuInSectionManager(manager.lineList);
+};
+btnMapPrintManager.onclick = () => {
+  makeResultBlock(3);
+  showMapList();
+};
diff --git a/src/line-manager.js b/src/line-manager.js
@@ -0,0 +1,113 @@
+import { makeStationOption } from "./make-selector-list.js";
+import { manager } from "./manager.js";
+import Line from "./line.js";
+import Station from "./station.js";
+
+export const deleteLineInList = (lineName) => {
+  const parent = document.querySelector("tbody#line-list");
+  const deleteIdx = manager.lineList.findIndex((line) => {
+    return line.name === lineName;
+  });
+  parent.removeChild(document.getElementById(`${lineName}-line`));
+  manager.lineList[deleteIdx].deleteAllStationInLine();
+  manager.lineList.splice(deleteIdx, 1);
+};
+export const makeLineChildUI = (line) => {
+  const lineName = document.createElement("td");
+  const startStation = document.createElement("td");
+  const endStation = document.createElement("td");
+  const deleteButton = document.createElement("td");
+  lineName.innerHTML = line.name;
+  startStation.innerHTML = line.getStartStation();
+  endStation.innerHTML = line.getEndStation();
+  deleteButton.innerHTML = "삭제";
+  deleteButton.setAttribute("class", "line-delete-button");
+  deleteButton.onclick = () => {
+    deleteLineInList(`${line.name}`);
+  };
+  deleteButton.innerHTML = "삭제";
+
+  return [lineName, startStation, endStation, deleteButton];
+};
+export const makeLineUI = (line) => {
+  const [lineName, startStation, endStation, deleteButton] = makeLineChildUI(
+    line
+  );
+  const newLine = document.createElement("tr");
+  newLine.setAttribute("id", `${line.name}-line`);
+  newLine.append(lineName, startStation, endStation, deleteButton);
+
+  return newLine;
+};
+export const showAllLineInLineManager = (lineList) => {
+  const table = document.getElementById("line-list");
+  table.innerHTML = "";
+  lineList.forEach((line) => {
+    const newLine = makeLineUI(line);
+    table.appendChild(newLine);
+  });
+  document.getElementById("line-name-input").value = "";
+};
+export const isPossibleLineName = (name) => {
+  const rHangel = /^[0-9A-Za-z가-힣]*$/;
+  if (name.length > 0 && rHangel.exec(name) !== null) {
+    return true;
+  }
+  alert("올바른 노선 이름을 입력 해주세요");
+
+  return false;
+};
+export const resetLineInput = () => {
+  document.getElementById("line-name-input").value = "";
+  makeStationOption("line-start-station-selector");
+  makeStationOption("line-end-station-selector");
+};
+export const isPossibleLine = (startName, endName) => {
+  if (startName === endName) {
+    alert("상행 종점과 다른 하행 종점을 선택 해주세요.");
+    resetLineInput();
+
+    return false;
+  }
+  return true;
+};
+export const isOverlappedLineName = (newLineName) => {
+  const overlappedName = manager.lineList.find(
+    (line) => line.name === newLineName
+  );
+  if (overlappedName) {
+    alert("이미 등록된 노선입니다.");
+    resetLineInput();
+
+    return true;
+  }
+  return false;
+};
+export const addLineToList = () => {
+  const newLineName = document.getElementById("line-name-input").value;
+  const startStationName = document.getElementById(
+    "line-start-station-selector"
+  ).value;
+  const endStationName = document.getElementById("line-end-station-selector")
+    .value;
+  if (
+    isPossibleLineName(newLineName) &&
+    isPossibleLine(startStationName, endStationName) &&
+    !isOverlappedLineName(newLineName)
+  ) {
+    const line = new Line(newLineName);
+    const startStation = new Station(startStationName);
+    const endStation = new Station(endStationName);
+    manager.setStationInManager(startStation);
+    manager.setStationInManager(endStation);
+    line.addLine(startStation, endStation);
+    manager.setLineInManager(line);
+    showAllLineInLineManager(manager.lineList);
+    resetLineInput();
+  }
+};
+
+const btnAddLine = document.getElementById("line-add-button");
+btnAddLine.onclick = () => {
+  addLineToList();
+};