woowacourse · swon3210 · Dec 15, 2020 · Dec 19, 2020 · Dec 19, 2020 · Dec 19, 2020
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,3 @@
+{
+  "presets": ["@babel/preset-env"]
+}
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -0,0 +1,18 @@
+{
+    "extends": ["airbnb", "prettier"],
+    "env": {
+        "browser": true, 
+        "jest/globals": true,
+        "es2020": true
+    },
+    "parser": "@babel/eslint-parser",
+    "parserOptions": {
+        "ecmaVersion": 12,
+        "sourceType": "module"
+    },
+    "plugins": ["prettier", "jest", "@babel"],
+    "rules": {
+        "import/extensions": ["off"],
+        "lines-between-class-members": ["off"]
+    }
+}
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,4 @@
+.vscode/
+node_modules/
+package.json
+package-lock.json
diff --git a/README.md b/README.md
diff --git a/babel.config.js b/babel.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: [
+    '@babel/plugin-proposal-private-methods',
+    '@babel/plugin-proposal-class-properties',
+  ],
+};
diff --git a/index.css b/index.css
@@ -0,0 +1,3 @@
+#result {
+  display: none;
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>지하철 길찾기</title>
+    <link rel="stylesheet" href="./index.css" />
+  </head>
+  <body>
+    <div id="app">
+      <h1>지하철 길찾기</h1>
+      <div class="station-inputs">
+        <div>
+          <label for="departure-station-name">출발역</label>
+          <input type="text" id="departure-station-name-input" />
+        </div>
+        <div>
+          <label for="arrival-station-name">도착역</label>
+          <input type="text" id="arrival-station-name-input" />
+        </div>
+      </div>
+      <div class="options">
+        <input type="radio" name="search-type" checked /><label
+          for="min-distance-path-search"
+          >최단거리</label
+        >
+        <input type="radio" name="search-type" /><label
+          for="min-time-path-search"
+          >최소시간</label
+        >
+      </div>
+      <button id="search-button">길찾기</button>
+
+      <div id="result">
+        <h2>결과</h2>
+        <h3>최단거리</h3>
+        <table>
+          <thead>
+            <tr>
+              <th>총 거리</th>
+              <th>총 소요 시간</th>
+            </tr>
+          </thead>
+          <tbody id="result-table-body"></tbody>
+        </table>
+      </div>
+    </div>
+    <script src="src/index.js" type="module"></script>
+  </body>
+</html>
diff --git a/src/classes/station/station.js b/src/classes/station/station.js
@@ -0,0 +1,11 @@
+import { MIN_STATION_NAME_LENGTH } from '../../constants/constants.js';
+
+export default class Station {
+  static isStationNameTooShort(stationName) {
+    return stationName.length < MIN_STATION_NAME_LENGTH;
+  }
+
+  static isStationNamesSame(startStationName, endStationName) {
+    return startStationName === endStationName;
+  }
+}
diff --git a/src/classes/subwayMap/subwayMap.js b/src/classes/subwayMap/subwayMap.js
@@ -0,0 +1,90 @@
+import { initalLineData, initalStationData } from '../../data/data.js';
+
+export default class SubwayMap {
+  #allLines;
+  #allStations;
+  #pathInfo = { totalDistance: 0, totalTime: 0 };
+  #path;  constructor() {
+    this.#allStations = initalStationData;
+    this.#allLines = initalLineData;
+  }
+
+  get allLines() {
+    return this.#allLines;
+  }
+
+  get allStations() {
+    return this.#allStations;
+  }
+
+  setPath(path) {
+    this.#path = path;
+  }
+
+  getTotalDistanceAndTimeFromPath() {
+    this.#pathInfo.totalDistance = 0;
+    this.#pathInfo.totalTime = 0;
+    const initialIndex = 0;
+    const initialDistance = 0;
+    const initialTime = 0;
+
+    this.#traverseSubwayMap(initialIndex, initialDistance, initialTime);
+    return this.#pathInfo;
+  }
+
+  // 첫번째 노드를 바탕으로 역들을 순회
+  // 순회하다가 발견하면 연결된 노드들 중에 index + 1에 해당하는 값이 있는지 확인
+  // 있다면 info 를 더함
+
+  #traverseSubwayMap(index, distance, time) {
+    if (index >= this.#path.length - 1) {
+      this.#pathInfo.totalDistance = distance;
+      this.#pathInfo.totalTime = time;
+    }
+    const stationName = this.#path[index];
+    const newIndex = index + 1;
+    let addedDistance = distance;
+    let addedTime = time;
+
+    const station = this.#allStations[stationName];
+    station.connected.forEach((connectedStation) => {
+      const nextPathStation = this.#path[newIndex];
+      if (connectedStation.station === nextPathStation) {
+        addedDistance += connectedStation.distance;
+        addedTime += connectedStation.time;
+        this.#traverseSubwayMap(newIndex, addedDistance, addedTime);
+      }
+    });
+  }
+
+  isStationNotExist(stationName) {
+    let isExist = true;
+    const allLineNames = Object.keys(this.#allLines);
+    allLineNames.forEach((lineName) => {
+      const line = this.#allLines[lineName];
+      line.forEach((section) => {
+        if (section.station === stationName) {
+          isExist = false;
+        }
+      });
+    });
+
+    return isExist;
+  }
+
+  isStationsConnected(fromStationName, toStationName) {
+    let isConnected = false;
+    const allLineNames = Object.keys(this.#allLines);
+    allLineNames.forEach((lineName) => {
+      const line = this.#allLines[lineName];
+      const fileterdLine = line.filter(
+        (section) => section.station === fromStationName || toStationName
+      );
+      if (fileterdLine.length === 2) {
+        isConnected = true;
+      }
+    });
+
+    return isConnected;
+  }
+}
diff --git a/src/classes/subwayPath/subwayPath.js b/src/classes/subwayPath/subwayPath.js
@@ -0,0 +1,13 @@
+import DijstraStore from '../../store/dijkstra.js';
+
+const { distanceDijkstra, timeDijkstra } = DijstraStore;
+
+export default class subwayPath {
+  static getMinDistancePath(startStationName, endStationName) {
+    return distanceDijkstra.findShortestPath(startStationName, endStationName);
+  }
+
+  static getMinTimePath(startStationName, endStationName) {
+    return timeDijkstra.findShortestPath(startStationName, endStationName);
+  }
+}
diff --git a/src/classes/subwayPath/subwayPathUI.js b/src/classes/subwayPath/subwayPathUI.js
@@ -0,0 +1,121 @@
+import {
+  MIN_DISTANCE_CHECK_OPTION_NAME,
+  MIN_TIME_CHECK_OPTION_NAME,
+  TOO_SHORT_STATION_NAME_MESSAGE,
+  NOT_CONNECTED_STATIONS_MESSAGE,
+  SAME_STATIONS_MESSAGE,
+  STATION_NOT_EXIST_MESSAGE,
+} from '../../constants/constants.js';
+import {
+  resultElement,
+  resultTableBodyElement,
+  arrivalStationNameInputElement,
+  departureStationNameInputElement,
+  minDistancePathSearchRadioElement,
+  minTimePathSearchRadioElement,
+} from '../../elements/subwayPath.js';
+import SubwayPath from './subwayPath.js';
+import Station from '../station/station.js';
+import { subwayMap } from '../../store/subway.js';
+import { getResultTableBodyTemplate } from '../../templates/table.js';
+
+export default class SubwayPathUI {
+  static getCheckedOptionName() {
+    let checkedOptionName = '';
+    if (minDistancePathSearchRadioElement.checked === true) {
+      checkedOptionName = MIN_DISTANCE_CHECK_OPTION_NAME;
+    } else if (minTimePathSearchRadioElement.checked === true) {
+      checkedOptionName = MIN_TIME_CHECK_OPTION_NAME;
+    }
+
+    return checkedOptionName;
+  }
+
+  static getInvalidInputAlertMessage(startStationName, endStationName) {
+    let alertMessage = '';
+    if (
+      Station.isStationNameTooShort(startStationName) ||
+      Station.isStationNameTooShort(endStationName)
+    ) {
+      alertMessage += TOO_SHORT_STATION_NAME_MESSAGE;
+    }
+    if (Station.isStationNamesSame(startStationName, endStationName)) {
+      alertMessage += SAME_STATIONS_MESSAGE;
+    }
+
+    return alertMessage;
+  }
+
+  static getInvalidSearchAlertMessage(startStationName, endStationName) {
+    let alertMessage = '';
+    if (
+      subwayMap.isStationNotExist(startStationName) ||
+      subwayMap.isStationNotExist(endStationName)
+    ) {
+      alertMessage += STATION_NOT_EXIST_MESSAGE;
+    }
+    if (subwayMap.isStationsConnected(startStationName, endStationName)) {
+      alertMessage += NOT_CONNECTED_STATIONS_MESSAGE;
+    }
+
+    return alertMessage;
+  }
+
+  static showResultToTable({
+    checkedOptionName,
+    departureStationName,
+    arrivalStationName,
+  }) {
+    let resultPath;
+    if (checkedOptionName === MIN_DISTANCE_CHECK_OPTION_NAME) {
+      resultPath = SubwayPath.getMinDistancePath(
+        departureStationName,
+        arrivalStationName
+      );
+    } else if (checkedOptionName === MIN_TIME_CHECK_OPTION_NAME) {
+      resultPath = SubwayPath.getMinTimePath(
+        departureStationName,
+        arrivalStationName
+      );
+    }
+    subwayMap.setPath(resultPath);
+    const {
+      totalDistance,
+      totalTime,
+    } = subwayMap.getTotalDistanceAndTimeFromPath();
+    const resultTableBodyTemplate = getResultTableBodyTemplate(
+      totalDistance,
+      totalTime,
+      resultPath
+    );
+    resultElement.setAttribute('style', 'display: block;');
+    resultTableBodyElement.innerHTML = resultTableBodyTemplate;
+  }
+
+  static showPath() {
+    const departureStationName = departureStationNameInputElement.value;
+    const arrivalStationName = arrivalStationNameInputElement.value;
+    const checkedOptionName = SubwayPathUI.getCheckedOptionName();
+    const invalidInputAlertMessage = SubwayPathUI.getInvalidInputAlertMessage(
+      departureStationName,
+      arrivalStationName
+    );
+    if (invalidInputAlertMessage !== '') {
+      alert(invalidInputAlertMessage);
+      return;
+    }
+    const invalidSearchAlertMessage = SubwayPathUI.getInvalidSearchAlertMessage(
+      departureStationName,
+      arrivalStationName
+    );
+    if (invalidSearchAlertMessage !== '') {
+      alert(invalidSearchAlertMessage);
+    } else {
+      SubwayPathUI.showResultToTable({
+        checkedOptionName,
+        departureStationName,
+        arrivalStationName,
+      });
+    }
+  }
+}
diff --git a/src/constants/constants.js b/src/constants/constants.js
@@ -0,0 +1,18 @@
+export const MIN_STATION_NAME_LENGTH = 2;
+export const MIN_DISTANCE_CHECK_OPTION_NAME = '최단거리';
+export const MIN_TIME_CHECK_OPTION_NAME = '최소시간';
+export const TOO_SHORT_STATION_NAME_MESSAGE =
+  '입력하신 역들 중 이름이 너무 짧은 역이 있습니다';
+export const SAME_STATIONS_MESSAGE = '출발역과 도착역의 이름이 동일합니다';
+export const NOT_CONNECTED_STATIONS_MESSAGE =
+  '출발역으로부터 도착역에 도달할 수 없습니다';
+export const STATION_NOT_EXIST_MESSAGE = '존재하지 않는 역을 입력하셨습니다'
+
+export default {
+  MIN_STATION_NAME_LENGTH,
+  MIN_DISTANCE_CHECK_OPTION_NAME,
+  MIN_TIME_CHECK_OPTION_NAME,
+  TOO_SHORT_STATION_NAME_MESSAGE,
+  SAME_STATIONS_MESSAGE,
+  NOT_CONNECTED_STATIONS_MESSAGE
+};