From 7d119ca0e67f52d4b2e6a339ad1948bd76c41637 Mon Sep 17 00:00:00 2001 From: ginger-kang Date: Mon, 14 Dec 2020 15:05:50 +0900 Subject: [PATCH 01/34] docs: add a list of feature to implement --- docs/README.md | 31 +++++++++++++++++++++++++++++++ 1 file changed, 31 insertions(+) create mode 100644 docs/README.md diff --git a/docs/README.md b/docs/README.md new file mode 100644 index 000000000..bad467031 --- /dev/null +++ b/docs/README.md @@ -0,0 +1,31 @@ +# πŸš‡ μ§€ν•˜μ²  노선도 λ―Έμ…˜ + +## πŸš€ κΈ°λŠ₯ μš”κ΅¬μ‚¬ν•­ + +### μ§€ν•˜μ²  μ—­ κ΄€λ ¨ κΈ°λŠ₯ +- [ ] μ§€ν•˜μ²  역을 λ“±λ‘ν•˜κ³  μ‚­μ œν•  수 μžˆλ‹€. + - [ ] 단, 노선에 λ“±λ‘λœ 역은 μ‚­μ œν•  수 μ—†λ‹€ +- [ ] μ€‘λ³΅λœ μ§€ν•˜μ²  μ—­ 이름이 등둝될 수 μ—†λ‹€. +- [ ] μ§€ν•˜μ²  역은 2κΈ€μž 이상이어야 ν•œλ‹€. +- [ ] μ§€ν•˜μ²  μ—­μ˜ λͺ©λ‘μ„ μ‘°νšŒν•  수 μžˆλ‹€. + +### μ§€ν•˜μ²  λ…Έμ„  κ΄€λ ¨ κΈ°λŠ₯ +- [ ] μ§€ν•˜μ²  노선을 λ“±λ‘ν•˜κ³  μ‚­μ œν•  수 μžˆλ‹€. +- [ ] μ€‘λ³΅λœ μ§€ν•˜μ²  λ…Έμ„  이름이 등둝될 수 μ—†λ‹€. +- [ ] λ…Έμ„  등둝 μ‹œ 상행 쒅점역과 ν•˜ν–‰ 쒅점역을 μž…λ ₯λ°›λŠ”λ‹€. +- [ ] μ§€ν•˜μ²  λ…Έμ„ μ˜ λͺ©λ‘μ„ μ‘°νšŒν•  수 μžˆλ‹€. + +### μ§€ν•˜μ²  ꡬ간 μΆ”κ°€ κΈ°λŠ₯ +- [ ] μ§€ν•˜μ²  노선에 ꡬ간을 μΆ”κ°€ν•˜λŠ” κΈ°λŠ₯은 노선에 역을 μΆ”κ°€ν•˜λŠ” κΈ°λŠ₯이라고도 ν•  수 μžˆλ‹€. + - μ—­κ³Ό 역사이λ₯Ό ꡬ간이라 ν•˜κ³  이 κ΅¬κ°„λ“€μ˜ λͺ¨μŒμ΄ 노선이닀. +- [ ] ν•˜λ‚˜μ˜ 역은 μ—¬λŸ¬κ°œμ˜ 노선에 좔가될 수 μžˆλ‹€. +- [ ] μ—­κ³Ό μ—­ 사이에 μƒˆλ‘œμš΄ 역이 μΆ”κ°€ 될 수 μžˆλ‹€. +- [ ] λ…Έμ„ μ—μ„œ κ°ˆλž˜κΈΈμ€ 생길 수 μ—†λ‹€. + +### μ§€ν•˜μ²  ꡬ간 μ‚­μ œ κΈ°λŠ₯ +- [ ] 노선에 λ“±λ‘λœ 역을 μ œκ±°ν•  수 μžˆλ‹€. +- [ ] 쒅점을 μ œκ±°ν•  경우 λ‹€μŒ 역이 쒅점이 λœλ‹€. +- [ ] 노선에 ν¬ν•¨λœ 역이 λ‘κ°œ μ΄ν•˜μΌ λ•ŒλŠ” 역을 μ œκ±°ν•  수 μ—†λ‹€. + +### μ§€ν•˜μ²  노선에 λ“±λ‘λœ μ—­ 쑰회 κΈ°λŠ₯ +- [ ] λ…Έμ„ μ˜ 상행 쒅점뢀터 ν•˜ν–‰ μ’…μ κΉŒμ§€ μ—°κ²°λœ μˆœμ„œλŒ€λ‘œ μ—­ λͺ©λ‘μ„ μ‘°νšŒν•  수 μžˆλ‹€. From ad0485e4a3ed81a7af51bcebc467f008156e12b3 Mon Sep 17 00:00:00 2001 From: ginger-kang Date: Mon, 14 Dec 2020 15:24:34 +0900 Subject: [PATCH 02/34] feat: add manager buttons to index.html --- index.html | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/index.html b/index.html index fc99deac2..9d355ed8f 100644 --- a/index.html +++ b/index.html @@ -7,6 +7,12 @@

πŸš‡ μ§€ν•˜μ²  노선도 관리

+
+ + + + +
From 6c0d868086ab418f2c679b2165dcdafeeceb6ace Mon Sep 17 00:00:00 2001 From: ginger-kang Date: Tue, 15 Dec 2020 14:47:21 +0900 Subject: [PATCH 03/34] feat: station manager container set up in index.html --- index.html | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/index.html b/index.html index 9d355ed8f..0542e641c 100644 --- a/index.html +++ b/index.html @@ -13,6 +13,14 @@

πŸš‡ μ§€ν•˜μ²  노선도 관리

+ From 922fdc2c8672dd72e77b4dcfc4c2e88b052ac72e Mon Sep 17 00:00:00 2001 From: ginger-kang Date: Tue, 15 Dec 2020 14:48:39 +0900 Subject: [PATCH 04/34] feat: add table border style --- src/index.css | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 src/index.css diff --git a/src/index.css b/src/index.css new file mode 100644 index 000000000..4d2b60ecd --- /dev/null +++ b/src/index.css @@ -0,0 +1,5 @@ +table, +th, +td { + border: 1px solid black; +} From 88a57f4c0bea13deb215db286972d195ee75a0fa Mon Sep 17 00:00:00 2001 From: ginger-kang Date: Tue, 15 Dec 2020 14:54:38 +0900 Subject: [PATCH 05/34] feat: create station container and basic handler setting --- src/index.js | 3 +++ src/station/stationContainer.js | 21 +++++++++++++++++++++ 2 files changed, 24 insertions(+) create mode 100644 src/station/stationContainer.js diff --git a/src/index.js b/src/index.js index e69de29bb..0c55d95a2 100644 --- a/src/index.js +++ b/src/index.js @@ -0,0 +1,3 @@ +import stationContainer from "./station/stationContainer"; + +stationContainer(); diff --git a/src/station/stationContainer.js b/src/station/stationContainer.js new file mode 100644 index 000000000..5d300e781 --- /dev/null +++ b/src/station/stationContainer.js @@ -0,0 +1,21 @@ +export default function stationContainer() { + const checkStationName = stationName => { + console.log(stationName); + }; + + const init = () => { + const stationContainer = document.querySelector( + "#station-manager-container", + ); + const submitButton = document.querySelector("#station-name-button"); + const stationNameInput = document.querySelector("#station-name-input"); + + stationContainer.style.display = "block"; + submitButton.addEventListener("click", () => { + checkStationName(stationNameInput.value); + stationNameInput.value = ""; + }); + }; + + init(); +} From 55c14de888127d1ecf60aad954edc1f727d15bb9 Mon Sep 17 00:00:00 2001 From: ginger-kang Date: Tue, 15 Dec 2020 15:04:24 +0900 Subject: [PATCH 06/34] feat: check if the subway station is duplicated and if it is more than two characters --- src/station/stationContainer.js | 13 ++++++++++++- src/utils.js | 10 ++++++++++ 2 files changed, 22 insertions(+), 1 deletion(-) create mode 100644 src/utils.js diff --git a/src/station/stationContainer.js b/src/station/stationContainer.js index 5d300e781..6f5157d08 100644 --- a/src/station/stationContainer.js +++ b/src/station/stationContainer.js @@ -1,6 +1,17 @@ +import { isValidStationName } from "../utils"; + export default function stationContainer() { + let stationList = []; + const checkStationName = stationName => { - console.log(stationName); + isValidStationName(stationList, stationName) + ? addStation(stationName) + : alert("μ§€ν•˜μ²  역이 μ€‘λ³΅λ˜μ§€ μ•Šκ²Œ 2κΈ€μž μ΄μƒμœΌλ‘œ μž…λ ₯ν•΄μ£Όμ„Έμš”."); + }; + + const addStation = stationName => { + stationList.push(stationName); + console.log(stationList); }; const init = () => { diff --git a/src/utils.js b/src/utils.js new file mode 100644 index 000000000..b87865ad2 --- /dev/null +++ b/src/utils.js @@ -0,0 +1,10 @@ +const hasDuplicatedName = (stationList, stationName) => + stationList.includes(stationName); + +const isLengthMoreOne = stationName => stationName.length > 1; + +export const isValidStationName = (stationList, stationName) => { + return ( + !hasDuplicatedName(stationList, stationName) && isLengthMoreOne(stationName) + ); +}; From e211c8a6d7a77d220ff498344ac9f21f9aa0095e Mon Sep 17 00:00:00 2001 From: ginger-kang Date: Tue, 15 Dec 2020 15:05:19 +0900 Subject: [PATCH 07/34] docs: station name duplicated and it is more than two characters --- docs/README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/README.md b/docs/README.md index bad467031..d8ad40e15 100644 --- a/docs/README.md +++ b/docs/README.md @@ -5,8 +5,8 @@ ### μ§€ν•˜μ²  μ—­ κ΄€λ ¨ κΈ°λŠ₯ - [ ] μ§€ν•˜μ²  역을 λ“±λ‘ν•˜κ³  μ‚­μ œν•  수 μžˆλ‹€. - [ ] 단, 노선에 λ“±λ‘λœ 역은 μ‚­μ œν•  수 μ—†λ‹€ -- [ ] μ€‘λ³΅λœ μ§€ν•˜μ²  μ—­ 이름이 등둝될 수 μ—†λ‹€. -- [ ] μ§€ν•˜μ²  역은 2κΈ€μž 이상이어야 ν•œλ‹€. +- [x] μ€‘λ³΅λœ μ§€ν•˜μ²  μ—­ 이름이 등둝될 수 μ—†λ‹€. +- [x] μ§€ν•˜μ²  역은 2κΈ€μž 이상이어야 ν•œλ‹€. - [ ] μ§€ν•˜μ²  μ—­μ˜ λͺ©λ‘μ„ μ‘°νšŒν•  수 μžˆλ‹€. ### μ§€ν•˜μ²  λ…Έμ„  κ΄€λ ¨ κΈ°λŠ₯ From b088e3deb1130a49a92303d1961cde58b1bd3f0b Mon Sep 17 00:00:00 2001 From: ginger-kang Date: Tue, 15 Dec 2020 15:09:46 +0900 Subject: [PATCH 08/34] feat: change alert message to constant --- src/station/stationConstant.js | 2 ++ src/station/stationContainer.js | 3 ++- 2 files changed, 4 insertions(+), 1 deletion(-) create mode 100644 src/station/stationConstant.js diff --git a/src/station/stationConstant.js b/src/station/stationConstant.js new file mode 100644 index 000000000..98343ddcb --- /dev/null +++ b/src/station/stationConstant.js @@ -0,0 +1,2 @@ +export const INVALID_STATION_NAME = + "μ§€ν•˜μ²  역이 μ€‘λ³΅λ˜μ§€ μ•Šκ²Œ 2κΈ€μž μ΄μƒμœΌλ‘œ μž…λ ₯ν•΄μ£Όμ„Έμš”."; diff --git a/src/station/stationContainer.js b/src/station/stationContainer.js index 6f5157d08..f7a3d7679 100644 --- a/src/station/stationContainer.js +++ b/src/station/stationContainer.js @@ -1,4 +1,5 @@ import { isValidStationName } from "../utils"; +import { INVALID_STATION_NAME } from "./stationConstant"; export default function stationContainer() { let stationList = []; @@ -6,7 +7,7 @@ export default function stationContainer() { const checkStationName = stationName => { isValidStationName(stationList, stationName) ? addStation(stationName) - : alert("μ§€ν•˜μ²  역이 μ€‘λ³΅λ˜μ§€ μ•Šκ²Œ 2κΈ€μž μ΄μƒμœΌλ‘œ μž…λ ₯ν•΄μ£Όμ„Έμš”."); + : alert(INVALID_STATION_NAME); }; const addStation = stationName => { From 5da8bb27afed8b6eaf8110811bc67a83d01649f0 Mon Sep 17 00:00:00 2001 From: ginger-kang Date: Tue, 15 Dec 2020 15:14:22 +0900 Subject: [PATCH 09/34] docs: additional feature using localStorage and data property --- docs/README.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/docs/README.md b/docs/README.md index d8ad40e15..afff4abd4 100644 --- a/docs/README.md +++ b/docs/README.md @@ -29,3 +29,7 @@ ### μ§€ν•˜μ²  노선에 λ“±λ‘λœ μ—­ 쑰회 κΈ°λŠ₯ - [ ] λ…Έμ„ μ˜ 상행 쒅점뢀터 ν•˜ν–‰ μ’…μ κΉŒμ§€ μ—°κ²°λœ μˆœμ„œλŒ€λ‘œ μ—­ λͺ©λ‘μ„ μ‘°νšŒν•  수 μžˆλ‹€. + +### μΆ”κ°€ κΈ°λŠ₯ +- `localStorage`λ₯Ό μ΄μš©ν•˜μ—¬, μƒˆλ‘œκ³ μΉ¨ ν•˜λ”λΌλ„ μž‘μ—…ν•˜λ˜ 정보듀을 뢈러올 수 있게 ν•œλ‹€. +- `data`속성을 μ΄μš©ν•˜μ—¬ htmlνƒœκ·Έμ— μ—­, λ…Έμ„ , κ΅¬κ°„μ˜ μœ μΌν•œ 데이터 값듀을 λ³΄κ΄€ν•œλ‹€. From c4a531b7f141aafb4dab65ce502167209e542f68 Mon Sep 17 00:00:00 2001 From: ginger-kang Date: Tue, 15 Dec 2020 15:17:29 +0900 Subject: [PATCH 10/34] feat: get data from localStorage and set data --- src/station/stationContainer.js | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/src/station/stationContainer.js b/src/station/stationContainer.js index f7a3d7679..9ef4996f7 100644 --- a/src/station/stationContainer.js +++ b/src/station/stationContainer.js @@ -12,7 +12,22 @@ export default function stationContainer() { const addStation = stationName => { stationList.push(stationName); - console.log(stationList); + setLocalData(stationList); + }; + + const setLocalData = stationList => { + window.localStorage.setItem("stationList", JSON.stringify(stationList)); + }; + + const getLocalData = () => { + let localData = window.localStorage.getItem("stationList"); + + if (!localData) { + localData = []; + window.localStorage.setItem("stationList", JSON.stringify(localData)); + } else { + stationList = JSON.parse(localData); + } }; const init = () => { @@ -22,6 +37,7 @@ export default function stationContainer() { const submitButton = document.querySelector("#station-name-button"); const stationNameInput = document.querySelector("#station-name-input"); + getLocalData(); stationContainer.style.display = "block"; submitButton.addEventListener("click", () => { checkStationName(stationNameInput.value); From eff38ea7d72825beb3295e80469dd872c9be1506 Mon Sep 17 00:00:00 2001 From: ginger-kang Date: Tue, 15 Dec 2020 15:20:32 +0900 Subject: [PATCH 11/34] feat: create station presenter for show list of station name --- src/station/stationContainer.js | 3 +++ src/station/stationPresenter.js | 22 ++++++++++++++++++++++ 2 files changed, 25 insertions(+) create mode 100644 src/station/stationPresenter.js diff --git a/src/station/stationContainer.js b/src/station/stationContainer.js index 9ef4996f7..2ea7502e7 100644 --- a/src/station/stationContainer.js +++ b/src/station/stationContainer.js @@ -1,4 +1,5 @@ import { isValidStationName } from "../utils"; +import { stationListTemplate } from "./stationPresenter"; import { INVALID_STATION_NAME } from "./stationConstant"; export default function stationContainer() { @@ -13,6 +14,7 @@ export default function stationContainer() { const addStation = stationName => { stationList.push(stationName); setLocalData(stationList); + stationListTemplate(stationList); }; const setLocalData = stationList => { @@ -38,6 +40,7 @@ export default function stationContainer() { const stationNameInput = document.querySelector("#station-name-input"); getLocalData(); + stationListTemplate(stationList); stationContainer.style.display = "block"; submitButton.addEventListener("click", () => { checkStationName(stationNameInput.value); diff --git a/src/station/stationPresenter.js b/src/station/stationPresenter.js new file mode 100644 index 000000000..a90f5f95b --- /dev/null +++ b/src/station/stationPresenter.js @@ -0,0 +1,22 @@ +export const stationListTemplate = stationList => { + let template = ` + + μ—­ 이름 + μ„€μ • + + `; + for (const station of stationList) { + template += ` + + ${station} + + + `; + } + stationListPresenter(template); +}; + +export const stationListPresenter = template => { + const stationNameTable = document.querySelector("#station-name-table"); + stationNameTable.innerHTML = template; +}; From 0246c74dfbab27d63c108cc08e0ef642a20701ab Mon Sep 17 00:00:00 2001 From: ginger-kang Date: Tue, 15 Dec 2020 15:23:48 +0900 Subject: [PATCH 12/34] docs: can inquire the list of stations --- docs/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/README.md b/docs/README.md index afff4abd4..4558ec7c0 100644 --- a/docs/README.md +++ b/docs/README.md @@ -7,7 +7,7 @@ - [ ] 단, 노선에 λ“±λ‘λœ 역은 μ‚­μ œν•  수 μ—†λ‹€ - [x] μ€‘λ³΅λœ μ§€ν•˜μ²  μ—­ 이름이 등둝될 수 μ—†λ‹€. - [x] μ§€ν•˜μ²  역은 2κΈ€μž 이상이어야 ν•œλ‹€. -- [ ] μ§€ν•˜μ²  μ—­μ˜ λͺ©λ‘μ„ μ‘°νšŒν•  수 μžˆλ‹€. +- [x] μ§€ν•˜μ²  μ—­μ˜ λͺ©λ‘μ„ μ‘°νšŒν•  수 μžˆλ‹€. ### μ§€ν•˜μ²  λ…Έμ„  κ΄€λ ¨ κΈ°λŠ₯ - [ ] μ§€ν•˜μ²  노선을 λ“±λ‘ν•˜κ³  μ‚­μ œν•  수 μžˆλ‹€. From cb2e450f458440df4a74b52859601d09d13f6370 Mon Sep 17 00:00:00 2001 From: ginger-kang Date: Tue, 15 Dec 2020 15:25:35 +0900 Subject: [PATCH 13/34] feat: remove station from list and localStorage --- docs/README.md | 2 +- src/station/stationContainer.js | 26 ++++++++++++++++++++++++++ 2 files changed, 27 insertions(+), 1 deletion(-) diff --git a/docs/README.md b/docs/README.md index 4558ec7c0..4de07a592 100644 --- a/docs/README.md +++ b/docs/README.md @@ -3,7 +3,7 @@ ## πŸš€ κΈ°λŠ₯ μš”κ΅¬μ‚¬ν•­ ### μ§€ν•˜μ²  μ—­ κ΄€λ ¨ κΈ°λŠ₯ -- [ ] μ§€ν•˜μ²  역을 λ“±λ‘ν•˜κ³  μ‚­μ œν•  수 μžˆλ‹€. +- [x] μ§€ν•˜μ²  역을 λ“±λ‘ν•˜κ³  μ‚­μ œν•  수 μžˆλ‹€. - [ ] 단, 노선에 λ“±λ‘λœ 역은 μ‚­μ œν•  수 μ—†λ‹€ - [x] μ€‘λ³΅λœ μ§€ν•˜μ²  μ—­ 이름이 등둝될 수 μ—†λ‹€. - [x] μ§€ν•˜μ²  역은 2κΈ€μž 이상이어야 ν•œλ‹€. diff --git a/src/station/stationContainer.js b/src/station/stationContainer.js index 2ea7502e7..f432089cf 100644 --- a/src/station/stationContainer.js +++ b/src/station/stationContainer.js @@ -15,6 +15,31 @@ export default function stationContainer() { stationList.push(stationName); setLocalData(stationList); stationListTemplate(stationList); + removeStationHandler(); + }; + + const removeStationHandler = () => { + const stationRemoveButton = document.querySelectorAll( + "#station-remove-button", + ); + if (stationRemoveButton !== null) { + for (const removeButton of stationRemoveButton) { + removeButton.addEventListener("click", event => { + removeStation(event); + }); + } + } + }; + + const removeStation = event => { + const targetStation = event.target.parentNode.parentNode; + const stationName = targetStation.dataset.stationname; + const stationIndex = stationList.indexOf(stationName); + + stationList.splice(stationIndex, 1); + setLocalData(stationList); + stationListTemplate(stationList); + removeStationHandler(); }; const setLocalData = stationList => { @@ -41,6 +66,7 @@ export default function stationContainer() { getLocalData(); stationListTemplate(stationList); + removeStationHandler(); stationContainer.style.display = "block"; submitButton.addEventListener("click", () => { checkStationName(stationNameInput.value); From d40ec1667670cc2425e6d43695887a97c188ee0e Mon Sep 17 00:00:00 2001 From: ginger-kang Date: Tue, 15 Dec 2020 16:02:11 +0900 Subject: [PATCH 14/34] feat: line manage container set up in index.html --- index.html | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/index.html b/index.html index 0542e641c..7736fa890 100644 --- a/index.html +++ b/index.html @@ -21,6 +21,23 @@

πŸš‡ μ§€ν•˜μ²  노선도 관리

πŸš‰ μ§€ν•˜μ²  μ—­ λͺ©λ‘

+ From dac7d157f9ccd48c47eac62a2b30e54d0f64b9ff Mon Sep 17 00:00:00 2001 From: ginger-kang Date: Tue, 15 Dec 2020 16:05:19 +0900 Subject: [PATCH 15/34] feat: handler setting and set selector option from localStorage data --- src/index.js | 4 +++- src/line/lineContainer.js | 37 +++++++++++++++++++++++++++++++++++++ 2 files changed, 40 insertions(+), 1 deletion(-) create mode 100644 src/line/lineContainer.js diff --git a/src/index.js b/src/index.js index 0c55d95a2..04b57f1eb 100644 --- a/src/index.js +++ b/src/index.js @@ -1,3 +1,5 @@ import stationContainer from "./station/stationContainer"; +import lineContainer from "./line/lineContainer"; -stationContainer(); +//stationContainer(); +lineContainer(); diff --git a/src/line/lineContainer.js b/src/line/lineContainer.js new file mode 100644 index 000000000..b46ab63af --- /dev/null +++ b/src/line/lineContainer.js @@ -0,0 +1,37 @@ +export default function lineContainer() { + let lineList = []; + + const checkLineName = lineName => { + console.log(lineName); + }; + + const setSelectorOption = selector => { + const stationData = JSON.parse(window.localStorage.getItem("stationList")); + if (stationData) { + for (const station of stationData) { + const selectorOption = document.createElement("option"); + selectorOption.textContent = station; + selector.appendChild(selectorOption); + } + } + }; + + const init = () => { + const lineNameContainer = document.querySelector("#line-manager-container"); + const lineNameInput = document.querySelector("#line-name-input"); + const lineStartSelector = document.querySelector( + "#line-start-name-selector", + ); + const lineEndSelector = document.querySelector("#line-start-end-selector"); + const lineNameButton = document.querySelector("#line-name-button"); + + setSelectorOption(lineStartSelector); + setSelectorOption(lineEndSelector); + lineNameContainer.style.display = "block"; + lineNameButton.addEventListener("click", () => { + checkLineName(lineNameInput.value); + }); + }; + + init(); +} From 5a9e7adc8cb0773824c7f8ff2cc529d5833cd6a9 Mon Sep 17 00:00:00 2001 From: ginger-kang Date: Tue, 15 Dec 2020 16:32:11 +0900 Subject: [PATCH 16/34] feat: check if line name is duplicated and same stations --- docs/README.md | 2 +- src/line/lineConstant.js | 1 + src/line/lineContainer.js | 16 ++++++++++++++-- src/utils.js | 15 +++++++++++++++ 4 files changed, 31 insertions(+), 3 deletions(-) create mode 100644 src/line/lineConstant.js diff --git a/docs/README.md b/docs/README.md index 4de07a592..47d55b505 100644 --- a/docs/README.md +++ b/docs/README.md @@ -11,7 +11,7 @@ ### μ§€ν•˜μ²  λ…Έμ„  κ΄€λ ¨ κΈ°λŠ₯ - [ ] μ§€ν•˜μ²  노선을 λ“±λ‘ν•˜κ³  μ‚­μ œν•  수 μžˆλ‹€. -- [ ] μ€‘λ³΅λœ μ§€ν•˜μ²  λ…Έμ„  이름이 등둝될 수 μ—†λ‹€. +- [x] μ€‘λ³΅λœ μ§€ν•˜μ²  λ…Έμ„  이름이 등둝될 수 μ—†λ‹€. - [ ] λ…Έμ„  등둝 μ‹œ 상행 쒅점역과 ν•˜ν–‰ 쒅점역을 μž…λ ₯λ°›λŠ”λ‹€. - [ ] μ§€ν•˜μ²  λ…Έμ„ μ˜ λͺ©λ‘μ„ μ‘°νšŒν•  수 μžˆλ‹€. diff --git a/src/line/lineConstant.js b/src/line/lineConstant.js new file mode 100644 index 000000000..21f361943 --- /dev/null +++ b/src/line/lineConstant.js @@ -0,0 +1 @@ +export const INVALID_LINE_INFO = "μ§€ν•˜μ²  노선이 μ€‘λ³΅λ˜μ§€ μ•Šκ²Œ μž…λ ₯ν•΄μ£Όμ„Έμš”."; diff --git a/src/line/lineContainer.js b/src/line/lineContainer.js index b46ab63af..ae9c4eeda 100644 --- a/src/line/lineContainer.js +++ b/src/line/lineContainer.js @@ -1,8 +1,15 @@ +import { isValidLineInfo } from "../utils"; +import { INVALID_LINE_INFO } from "./lineConstant"; + export default function lineContainer() { let lineList = []; const checkLineName = lineName => { - console.log(lineName); + const lineInfo = [lineName, startLine, endLine]; + + isValidLineInfo(lineList, lineInfo) + ? lineList.push(lineInfo) + : alert(INVALID_LINE_INFO); }; const setSelectorOption = selector => { @@ -29,7 +36,12 @@ export default function lineContainer() { setSelectorOption(lineEndSelector); lineNameContainer.style.display = "block"; lineNameButton.addEventListener("click", () => { - checkLineName(lineNameInput.value); + checkLineName( + lineNameInput.value, + lineStartSelector.options[lineStartSelector.selectedIndex].value, + lineEndSelector.options[lineEndSelector.selectedIndex].value, + ); + lineNameInput.value = ""; }); }; diff --git a/src/utils.js b/src/utils.js index b87865ad2..33ee300da 100644 --- a/src/utils.js +++ b/src/utils.js @@ -8,3 +8,18 @@ export const isValidStationName = (stationList, stationName) => { !hasDuplicatedName(stationList, stationName) && isLengthMoreOne(stationName) ); }; + +const hasDuplicatedLine = (lineList, lineInfo) => { + for (const line of lineList) { + if (line[0] === lineInfo[0]) { + return true; + } + } + return false; +}; + +const isSameStation = lineInfo => lineInfo[1] === lineInfo[2]; + +export const isValidLineInfo = (lineList, lineInfo) => { + return !hasDuplicatedLine(lineList, lineInfo) && !isSameStation(lineInfo); +}; From a2bcba1f0fab8e9482cd63c09fd239df40bfd6ee Mon Sep 17 00:00:00 2001 From: ginger-kang Date: Tue, 15 Dec 2020 16:33:05 +0900 Subject: [PATCH 17/34] docs: registering a route, the uplink and downlink end stations are entered --- docs/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/README.md b/docs/README.md index 47d55b505..470033cc5 100644 --- a/docs/README.md +++ b/docs/README.md @@ -12,7 +12,7 @@ ### μ§€ν•˜μ²  λ…Έμ„  κ΄€λ ¨ κΈ°λŠ₯ - [ ] μ§€ν•˜μ²  노선을 λ“±λ‘ν•˜κ³  μ‚­μ œν•  수 μžˆλ‹€. - [x] μ€‘λ³΅λœ μ§€ν•˜μ²  λ…Έμ„  이름이 등둝될 수 μ—†λ‹€. -- [ ] λ…Έμ„  등둝 μ‹œ 상행 쒅점역과 ν•˜ν–‰ 쒅점역을 μž…λ ₯λ°›λŠ”λ‹€. +- [x] λ…Έμ„  등둝 μ‹œ 상행 쒅점역과 ν•˜ν–‰ 쒅점역을 μž…λ ₯λ°›λŠ”λ‹€. - [ ] μ§€ν•˜μ²  λ…Έμ„ μ˜ λͺ©λ‘μ„ μ‘°νšŒν•  수 μžˆλ‹€. ### μ§€ν•˜μ²  ꡬ간 μΆ”κ°€ κΈ°λŠ₯ From 0007540ac355090673e98b6500a805196ee7e02a Mon Sep 17 00:00:00 2001 From: ginger-kang Date: Tue, 15 Dec 2020 16:52:08 +0900 Subject: [PATCH 18/34] feat: get localStorage data and set data to localStorage --- src/line/lineContainer.js | 20 +++++++++++++++++++- 1 file changed, 19 insertions(+), 1 deletion(-) diff --git a/src/line/lineContainer.js b/src/line/lineContainer.js index ae9c4eeda..0e6aa7e2e 100644 --- a/src/line/lineContainer.js +++ b/src/line/lineContainer.js @@ -8,10 +8,27 @@ export default function lineContainer() { const lineInfo = [lineName, startLine, endLine]; isValidLineInfo(lineList, lineInfo) - ? lineList.push(lineInfo) + ? addLine(lineInfo) : alert(INVALID_LINE_INFO); }; + const addLine = lineInfo => { + lineList.push(lineInfo); + setLocalData(lineList); + }; + + const setLocalData = lineList => { + window.localStorage.setItem("lineList", JSON.stringify(lineList)); + }; + + const getLocalData = () => { + let localData = window.localStorage.getItem("lineList"); + + if (localData) { + lineList = JSON.parse(localData); + } + }; + const setSelectorOption = selector => { const stationData = JSON.parse(window.localStorage.getItem("stationList")); if (stationData) { @@ -32,6 +49,7 @@ export default function lineContainer() { const lineEndSelector = document.querySelector("#line-start-end-selector"); const lineNameButton = document.querySelector("#line-name-button"); + getLocalData(); setSelectorOption(lineStartSelector); setSelectorOption(lineEndSelector); lineNameContainer.style.display = "block"; From 82d09ce33cc067c792c37c165171905bb214029d Mon Sep 17 00:00:00 2001 From: ginger-kang Date: Tue, 15 Dec 2020 16:57:19 +0900 Subject: [PATCH 19/34] feat: add subway line and inquire a list of line --- docs/README.md | 2 +- src/line/lineContainer.js | 3 +++ src/line/linePresenter.js | 26 ++++++++++++++++++++++++++ 3 files changed, 30 insertions(+), 1 deletion(-) create mode 100644 src/line/linePresenter.js diff --git a/docs/README.md b/docs/README.md index 470033cc5..bf21559de 100644 --- a/docs/README.md +++ b/docs/README.md @@ -13,7 +13,7 @@ - [ ] μ§€ν•˜μ²  노선을 λ“±λ‘ν•˜κ³  μ‚­μ œν•  수 μžˆλ‹€. - [x] μ€‘λ³΅λœ μ§€ν•˜μ²  λ…Έμ„  이름이 등둝될 수 μ—†λ‹€. - [x] λ…Έμ„  등둝 μ‹œ 상행 쒅점역과 ν•˜ν–‰ 쒅점역을 μž…λ ₯λ°›λŠ”λ‹€. -- [ ] μ§€ν•˜μ²  λ…Έμ„ μ˜ λͺ©λ‘μ„ μ‘°νšŒν•  수 μžˆλ‹€. +- [x] μ§€ν•˜μ²  λ…Έμ„ μ˜ λͺ©λ‘μ„ μ‘°νšŒν•  수 μžˆλ‹€. ### μ§€ν•˜μ²  ꡬ간 μΆ”κ°€ κΈ°λŠ₯ - [ ] μ§€ν•˜μ²  노선에 ꡬ간을 μΆ”κ°€ν•˜λŠ” κΈ°λŠ₯은 노선에 역을 μΆ”κ°€ν•˜λŠ” κΈ°λŠ₯이라고도 ν•  수 μžˆλ‹€. diff --git a/src/line/lineContainer.js b/src/line/lineContainer.js index 0e6aa7e2e..a3d5ef55e 100644 --- a/src/line/lineContainer.js +++ b/src/line/lineContainer.js @@ -1,5 +1,6 @@ import { isValidLineInfo } from "../utils"; import { INVALID_LINE_INFO } from "./lineConstant"; +import { lineListTemplate } from "./linePresenter"; export default function lineContainer() { let lineList = []; @@ -15,6 +16,7 @@ export default function lineContainer() { const addLine = lineInfo => { lineList.push(lineInfo); setLocalData(lineList); + lineListTemplate(lineList); }; const setLocalData = lineList => { @@ -50,6 +52,7 @@ export default function lineContainer() { const lineNameButton = document.querySelector("#line-name-button"); getLocalData(); + lineListTemplate(lineList); setSelectorOption(lineStartSelector); setSelectorOption(lineEndSelector); lineNameContainer.style.display = "block"; diff --git a/src/line/linePresenter.js b/src/line/linePresenter.js new file mode 100644 index 000000000..efdc9c7b0 --- /dev/null +++ b/src/line/linePresenter.js @@ -0,0 +1,26 @@ +export const lineListTemplate = lineList => { + let template = ` + + λ…Έμ„  이름 + 상행 쒅점역 + ν•˜ν–‰ 쒅점역 + μ„€μ • + + `; + for (const line of lineList) { + template += ` + + ${line[0]} + ${line[1]} + ${line[2]} + + + `; + } + lineListPresenter(template); +}; + +export const lineListPresenter = template => { + const lineNameTable = document.querySelector("#line-name-table"); + lineNameTable.innerHTML = template; +}; From 1cc26fcb872c222b5060087ff3ba6590ce96c3c2 Mon Sep 17 00:00:00 2001 From: ginger-kang Date: Tue, 15 Dec 2020 17:13:30 +0900 Subject: [PATCH 20/34] feat: remove line from list and localStorage --- docs/README.md | 2 +- src/line/lineContainer.js | 30 +++++++++++++++++++++++++++++- 2 files changed, 30 insertions(+), 2 deletions(-) diff --git a/docs/README.md b/docs/README.md index bf21559de..2e2b67320 100644 --- a/docs/README.md +++ b/docs/README.md @@ -10,7 +10,7 @@ - [x] μ§€ν•˜μ²  μ—­μ˜ λͺ©λ‘μ„ μ‘°νšŒν•  수 μžˆλ‹€. ### μ§€ν•˜μ²  λ…Έμ„  κ΄€λ ¨ κΈ°λŠ₯ -- [ ] μ§€ν•˜μ²  노선을 λ“±λ‘ν•˜κ³  μ‚­μ œν•  수 μžˆλ‹€. +- [x] μ§€ν•˜μ²  노선을 λ“±λ‘ν•˜κ³  μ‚­μ œν•  수 μžˆλ‹€. - [x] μ€‘λ³΅λœ μ§€ν•˜μ²  λ…Έμ„  이름이 등둝될 수 μ—†λ‹€. - [x] λ…Έμ„  등둝 μ‹œ 상행 쒅점역과 ν•˜ν–‰ 쒅점역을 μž…λ ₯λ°›λŠ”λ‹€. - [x] μ§€ν•˜μ²  λ…Έμ„ μ˜ λͺ©λ‘μ„ μ‘°νšŒν•  수 μžˆλ‹€. diff --git a/src/line/lineContainer.js b/src/line/lineContainer.js index a3d5ef55e..f061d9304 100644 --- a/src/line/lineContainer.js +++ b/src/line/lineContainer.js @@ -5,7 +5,7 @@ import { lineListTemplate } from "./linePresenter"; export default function lineContainer() { let lineList = []; - const checkLineName = lineName => { + const checkLineName = (lineName, startLine, endLine) => { const lineInfo = [lineName, startLine, endLine]; isValidLineInfo(lineList, lineInfo) @@ -17,6 +17,33 @@ export default function lineContainer() { lineList.push(lineInfo); setLocalData(lineList); lineListTemplate(lineList); + removeLineHandler(); + }; + + const removeLineHandler = () => { + const lineRemoveButton = document.querySelectorAll("#line-remove-button"); + if (lineRemoveButton !== null) { + for (const removeButton of lineRemoveButton) { + removeButton.addEventListener("click", event => { + removeLine(event); + }); + } + } + }; + + const removeLine = event => { + const targetLine = event.target.parentNode.parentNode; + const lineName = targetLine.dataset.linename; + let lineIndex = 0; + for (const line of lineList) { + if (line[0] === lineName) { + lineIndex = lineList.indexOf(line); + } + } + lineList.splice(lineIndex, 1); + setLocalData(lineList); + lineListTemplate(lineList); + removeLineHandler(); }; const setLocalData = lineList => { @@ -53,6 +80,7 @@ export default function lineContainer() { getLocalData(); lineListTemplate(lineList); + removeLineHandler(); setSelectorOption(lineStartSelector); setSelectorOption(lineEndSelector); lineNameContainer.style.display = "block"; From 1c072b8947a505d4c28ed6bf9be03aa5a2ed910a Mon Sep 17 00:00:00 2001 From: ginger-kang Date: Tue, 15 Dec 2020 18:23:53 +0900 Subject: [PATCH 21/34] feat: section manage container set up in index.hmtl --- index.html | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/index.html b/index.html index 7736fa890..95078caff 100644 --- a/index.html +++ b/index.html @@ -38,6 +38,11 @@

πŸš‰ μ§€ν•˜μ²  μ—­ λͺ©λ‘

πŸš‰ μ§€ν•˜μ²  λ…Έμ„  λͺ©λ‘

+ From b8eadf15dc4a23240f8872790f29165421de4da5 Mon Sep 17 00:00:00 2001 From: ginger-kang Date: Tue, 15 Dec 2020 18:25:45 +0900 Subject: [PATCH 22/34] feat: get line data and station data from localStorage --- src/section/sectionContainer.js | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) create mode 100644 src/section/sectionContainer.js diff --git a/src/section/sectionContainer.js b/src/section/sectionContainer.js new file mode 100644 index 000000000..4ee668a9f --- /dev/null +++ b/src/section/sectionContainer.js @@ -0,0 +1,19 @@ +export default function sectionContainer() { + let lineData = []; + let stationData = []; + + const getLocalData = () => { + stationData = JSON.parse(window.localStorage.getItem("stationList")); + lineData = JSON.parse(window.localStorage.getItem("lineList")); + }; + + const init = () => { + const sectionContainer = document.querySelector( + "#section-manager-container", + ); + getLocalData(); + sectionContainer.style.display = "block"; + }; + + init(); +} From 9698f23ad6404020591a880e57b3c40ce6f9c93f Mon Sep 17 00:00:00 2001 From: ginger-kang Date: Tue, 15 Dec 2020 18:27:34 +0900 Subject: [PATCH 23/34] feat: present line menu button --- src/section/sectionContainer.js | 3 +++ src/section/sectionPresenter.js | 10 ++++++++++ 2 files changed, 13 insertions(+) create mode 100644 src/section/sectionPresenter.js diff --git a/src/section/sectionContainer.js b/src/section/sectionContainer.js index 4ee668a9f..dfbf075c8 100644 --- a/src/section/sectionContainer.js +++ b/src/section/sectionContainer.js @@ -1,3 +1,5 @@ +import { lineMenuPresenter } from "./sectionPresenter"; + export default function sectionContainer() { let lineData = []; let stationData = []; @@ -12,6 +14,7 @@ export default function sectionContainer() { "#section-manager-container", ); getLocalData(); + lineMenuPresenter(lineData); sectionContainer.style.display = "block"; }; diff --git a/src/section/sectionPresenter.js b/src/section/sectionPresenter.js new file mode 100644 index 000000000..228b4453e --- /dev/null +++ b/src/section/sectionPresenter.js @@ -0,0 +1,10 @@ +export const lineMenuPresenter = lineData => { + const lineMenuContainer = document.querySelector("#line-menu-container"); + let lineMenu = ""; + for (const line of lineData) { + lineMenu += ` + + `; + } + lineMenuContainer.innerHTML = lineMenu; +}; From 06a38cb3edf4aace2fda73625eb343c22d0eae2d Mon Sep 17 00:00:00 2001 From: ginger-kang Date: Tue, 15 Dec 2020 18:30:06 +0900 Subject: [PATCH 24/34] feat: rendering line manage elements when click each line button --- src/section/sectionContainer.js | 23 ++++++++++++++++++++++- src/section/sectionPresenter.js | 27 +++++++++++++++++++++++++++ 2 files changed, 49 insertions(+), 1 deletion(-) diff --git a/src/section/sectionContainer.js b/src/section/sectionContainer.js index dfbf075c8..38337755f 100644 --- a/src/section/sectionContainer.js +++ b/src/section/sectionContainer.js @@ -1,4 +1,4 @@ -import { lineMenuPresenter } from "./sectionPresenter"; +import { lineMenuPresenter, sectionManagePresenter } from "./sectionPresenter"; export default function sectionContainer() { let lineData = []; @@ -9,12 +9,33 @@ export default function sectionContainer() { lineData = JSON.parse(window.localStorage.getItem("lineList")); }; + const MenuButtonHandler = () => { + const menuButtons = document.querySelectorAll("#line-menu-button"); + if (menuButtons !== null) { + for (const menuButton of menuButtons) { + menuButton.addEventListener("click", event => { + manageLine(event); + }); + } + } + }; + + const manageLine = event => { + const targetLine = event.target.dataset.linenumber; + for (const line of lineData) { + if (line[0] === targetLine) { + sectionManagePresenter(line, stationData); + } + } + }; + const init = () => { const sectionContainer = document.querySelector( "#section-manager-container", ); getLocalData(); lineMenuPresenter(lineData); + MenuButtonHandler(); sectionContainer.style.display = "block"; }; diff --git a/src/section/sectionPresenter.js b/src/section/sectionPresenter.js index 228b4453e..f7496f29b 100644 --- a/src/section/sectionPresenter.js +++ b/src/section/sectionPresenter.js @@ -8,3 +8,30 @@ export const lineMenuPresenter = lineData => { } lineMenuContainer.innerHTML = lineMenu; }; + +export const sectionManagePresenter = (lineData, stationData) => { + const sectionManageContainer = document.querySelector( + "#section-manage-container", + ); + let sectionManageTemplate = ` +

${lineData[0]} 관리

+

ꡬ간 등둝

+ `; + sectionManageTemplate += stationSelector(stationData); + sectionManageTemplate += ` + + + `; + sectionManageContainer.innerHTML = sectionManageTemplate; +}; + +const stationSelector = stationData => { + let selectTemplate = ``; + return selectTemplate; +}; From d57c4ee0e73cba4ecb8d3ab05e05dafe150775a5 Mon Sep 17 00:00:00 2001 From: ginger-kang Date: Tue, 15 Dec 2020 19:02:37 +0900 Subject: [PATCH 25/34] feat: present each line's station --- src/section/sectionContainer.js | 7 ++++++- src/section/sectionPresenter.js | 29 +++++++++++++++++++++++++++++ 2 files changed, 35 insertions(+), 1 deletion(-) diff --git a/src/section/sectionContainer.js b/src/section/sectionContainer.js index 38337755f..73c9b1a9a 100644 --- a/src/section/sectionContainer.js +++ b/src/section/sectionContainer.js @@ -1,4 +1,8 @@ -import { lineMenuPresenter, sectionManagePresenter } from "./sectionPresenter"; +import { + lineMenuPresenter, + sectionManagePresenter, + lineListTemplate, +} from "./sectionPresenter"; export default function sectionContainer() { let lineData = []; @@ -25,6 +29,7 @@ export default function sectionContainer() { for (const line of lineData) { if (line[0] === targetLine) { sectionManagePresenter(line, stationData); + lineListTemplate(line); } } }; diff --git a/src/section/sectionPresenter.js b/src/section/sectionPresenter.js index f7496f29b..09c2f379e 100644 --- a/src/section/sectionPresenter.js +++ b/src/section/sectionPresenter.js @@ -35,3 +35,32 @@ const stationSelector = stationData => { selectTemplate += ``; return selectTemplate; }; + +export const lineListTemplate = line => { + let template = ` + + μˆœμ„œ + 이름 + μ„€μ • + + `; + for (let i = 1; i < line.length; i++) { + template += ` + +
${i - 1}
+ ${line[i]} + + + `; + } + lineListPresenter(template); +}; + +export const lineListPresenter = template => { + const sectionManageContainer = document.querySelector( + "#section-manage-container", + ); + const lineListTable = document.createElement("table"); + lineListTable.innerHTML = template; + sectionManageContainer.appendChild(lineListTable); +}; From 386366ba3922932f634de527b0c0d5986d025667 Mon Sep 17 00:00:00 2001 From: ginger-kang Date: Tue, 15 Dec 2020 19:38:47 +0900 Subject: [PATCH 26/34] feat: add section to subway line --- docs/README.md | 6 +++--- src/section/sectionContainer.js | 34 +++++++++++++++++++++++++++++++++ 2 files changed, 37 insertions(+), 3 deletions(-) diff --git a/docs/README.md b/docs/README.md index 2e2b67320..0859c0677 100644 --- a/docs/README.md +++ b/docs/README.md @@ -16,10 +16,10 @@ - [x] μ§€ν•˜μ²  λ…Έμ„ μ˜ λͺ©λ‘μ„ μ‘°νšŒν•  수 μžˆλ‹€. ### μ§€ν•˜μ²  ꡬ간 μΆ”κ°€ κΈ°λŠ₯ -- [ ] μ§€ν•˜μ²  노선에 ꡬ간을 μΆ”κ°€ν•˜λŠ” κΈ°λŠ₯은 노선에 역을 μΆ”κ°€ν•˜λŠ” κΈ°λŠ₯이라고도 ν•  수 μžˆλ‹€. +- [x] μ§€ν•˜μ²  노선에 ꡬ간을 μΆ”κ°€ν•˜λŠ” κΈ°λŠ₯은 노선에 역을 μΆ”κ°€ν•˜λŠ” κΈ°λŠ₯이라고도 ν•  수 μžˆλ‹€. - μ—­κ³Ό 역사이λ₯Ό ꡬ간이라 ν•˜κ³  이 κ΅¬κ°„λ“€μ˜ λͺ¨μŒμ΄ 노선이닀. -- [ ] ν•˜λ‚˜μ˜ 역은 μ—¬λŸ¬κ°œμ˜ 노선에 좔가될 수 μžˆλ‹€. -- [ ] μ—­κ³Ό μ—­ 사이에 μƒˆλ‘œμš΄ 역이 μΆ”κ°€ 될 수 μžˆλ‹€. +- [x] ν•˜λ‚˜μ˜ 역은 μ—¬λŸ¬κ°œμ˜ 노선에 좔가될 수 μžˆλ‹€. +- [x] μ—­κ³Ό μ—­ 사이에 μƒˆλ‘œμš΄ 역이 μΆ”κ°€ 될 수 μžˆλ‹€. - [ ] λ…Έμ„ μ—μ„œ κ°ˆλž˜κΈΈμ€ 생길 수 μ—†λ‹€. ### μ§€ν•˜μ²  ꡬ간 μ‚­μ œ κΈ°λŠ₯ diff --git a/src/section/sectionContainer.js b/src/section/sectionContainer.js index 73c9b1a9a..7b5c82df9 100644 --- a/src/section/sectionContainer.js +++ b/src/section/sectionContainer.js @@ -8,11 +8,44 @@ export default function sectionContainer() { let lineData = []; let stationData = []; + const addSection = (station, order, line) => { + const sectionManageContainer = document.querySelector( + "#section-manage-container", + ); + const lineListTable = document.querySelector("#line-list-table"); + const prevLineDataIndex = lineData.indexOf(line); + + line.splice(parseInt(order) + 1, 0, station); + lineData[prevLineDataIndex] = line; + sectionManageContainer.removeChild(lineListTable); + + setLocalData(lineData); + lineListTemplate(line); + sectionHandler(line); + }; + const getLocalData = () => { stationData = JSON.parse(window.localStorage.getItem("stationList")); lineData = JSON.parse(window.localStorage.getItem("lineList")); }; + const setLocalData = lineData => { + window.localStorage.setItem("lineList", JSON.stringify(lineData)); + }; + + const sectionHandler = line => { + const sectionSelector = document.querySelector("#section-manage-selector"); + const sectionInputNumber = document.querySelector("#section-manage-input"); + const sectionButton = document.querySelector("#section-manage-button"); + sectionButton.addEventListener("click", () => { + addSection( + sectionSelector.options[sectionSelector.selectedIndex].value, + sectionInputNumber.value, + line, + ); + }); + }; + const MenuButtonHandler = () => { const menuButtons = document.querySelectorAll("#line-menu-button"); if (menuButtons !== null) { @@ -30,6 +63,7 @@ export default function sectionContainer() { if (line[0] === targetLine) { sectionManagePresenter(line, stationData); lineListTemplate(line); + sectionHandler(line); } } }; From b0a4e02bddd60e87d19d9e49bf8f8d1c094a37a2 Mon Sep 17 00:00:00 2001 From: ginger-kang Date: Tue, 15 Dec 2020 19:43:49 +0900 Subject: [PATCH 27/34] feat: check if line has duplicated section --- src/section/sectionConstant.js | 1 + src/section/sectionContainer.js | 18 ++++++++++++------ src/utils.js | 2 +- 3 files changed, 14 insertions(+), 7 deletions(-) create mode 100644 src/section/sectionConstant.js diff --git a/src/section/sectionConstant.js b/src/section/sectionConstant.js new file mode 100644 index 000000000..c6f2488e3 --- /dev/null +++ b/src/section/sectionConstant.js @@ -0,0 +1 @@ +export const INVALID_SECTION_NAME = "ꡬ간이 μ€‘λ³΅λ˜μ§€ μ•Šκ²Œ μž…λ ₯ν•΄μ£Όμ„Έμš”."; diff --git a/src/section/sectionContainer.js b/src/section/sectionContainer.js index 7b5c82df9..7ec7f08f1 100644 --- a/src/section/sectionContainer.js +++ b/src/section/sectionContainer.js @@ -3,6 +3,8 @@ import { sectionManagePresenter, lineListTemplate, } from "./sectionPresenter"; +import { hasDuplicatedName } from "../utils"; +import { INVALID_SECTION_NAME } from "./sectionConstant"; export default function sectionContainer() { let lineData = []; @@ -15,13 +17,17 @@ export default function sectionContainer() { const lineListTable = document.querySelector("#line-list-table"); const prevLineDataIndex = lineData.indexOf(line); - line.splice(parseInt(order) + 1, 0, station); - lineData[prevLineDataIndex] = line; - sectionManageContainer.removeChild(lineListTable); + if (!hasDuplicatedName(line, station)) { + line.splice(parseInt(order) + 1, 0, station); + lineData[prevLineDataIndex] = line; + sectionManageContainer.removeChild(lineListTable); - setLocalData(lineData); - lineListTemplate(line); - sectionHandler(line); + setLocalData(lineData); + lineListTemplate(line); + sectionHandler(line); + } else { + alert(INVALID_SECTION_NAME); + } }; const getLocalData = () => { diff --git a/src/utils.js b/src/utils.js index 33ee300da..ecbc4139d 100644 --- a/src/utils.js +++ b/src/utils.js @@ -1,4 +1,4 @@ -const hasDuplicatedName = (stationList, stationName) => +export const hasDuplicatedName = (stationList, stationName) => stationList.includes(stationName); const isLengthMoreOne = stationName => stationName.length > 1; From 416260b59d4977f4ff9d150ef3e01571c476a3a2 Mon Sep 17 00:00:00 2001 From: ginger-kang Date: Tue, 15 Dec 2020 20:12:21 +0900 Subject: [PATCH 28/34] feat: remove section from list and localStorage --- docs/README.md | 4 ++-- src/section/sectionContainer.js | 36 +++++++++++++++++++++++++++++++++ src/section/sectionPresenter.js | 1 + 3 files changed, 39 insertions(+), 2 deletions(-) diff --git a/docs/README.md b/docs/README.md index 0859c0677..4cd8d843f 100644 --- a/docs/README.md +++ b/docs/README.md @@ -23,8 +23,8 @@ - [ ] λ…Έμ„ μ—μ„œ κ°ˆλž˜κΈΈμ€ 생길 수 μ—†λ‹€. ### μ§€ν•˜μ²  ꡬ간 μ‚­μ œ κΈ°λŠ₯ -- [ ] 노선에 λ“±λ‘λœ 역을 μ œκ±°ν•  수 μžˆλ‹€. -- [ ] 쒅점을 μ œκ±°ν•  경우 λ‹€μŒ 역이 쒅점이 λœλ‹€. +- [x] 노선에 λ“±λ‘λœ 역을 μ œκ±°ν•  수 μžˆλ‹€. +- [x] 쒅점을 μ œκ±°ν•  경우 λ‹€μŒ 역이 쒅점이 λœλ‹€. - [ ] 노선에 ν¬ν•¨λœ 역이 λ‘κ°œ μ΄ν•˜μΌ λ•ŒλŠ” 역을 μ œκ±°ν•  수 μ—†λ‹€. ### μ§€ν•˜μ²  노선에 λ“±λ‘λœ μ—­ 쑰회 κΈ°λŠ₯ diff --git a/src/section/sectionContainer.js b/src/section/sectionContainer.js index 7ec7f08f1..08a3120d1 100644 --- a/src/section/sectionContainer.js +++ b/src/section/sectionContainer.js @@ -25,11 +25,45 @@ export default function sectionContainer() { setLocalData(lineData); lineListTemplate(line); sectionHandler(line); + removeSectionHandler(line); } else { alert(INVALID_SECTION_NAME); } }; + const removeSectionHandler = line => { + const sectionRemoveButton = document.querySelectorAll( + "#section-remove-button", + ); + if (sectionRemoveButton !== null) { + for (const removeButton of sectionRemoveButton) { + removeButton.addEventListener("click", event => { + removeSection(event, line); + }); + } + } + }; + + const removeSection = (event, line) => { + const sectionManageContainer = document.querySelector( + "#section-manage-container", + ); + const lineListTable = document.querySelector("#line-list-table"); + const lineDataIndex = lineData.indexOf(line); + const targetSection = event.target.parentNode.parentNode; + const targetName = targetSection.dataset.linename; + const targetIndex = line.indexOf(targetName); + + line.splice(targetIndex, 1); + lineData[lineDataIndex] = line; + sectionManageContainer.removeChild(lineListTable); + + setLocalData(lineData); + lineListTemplate(line); + sectionHandler(line); + removeSectionHandler(line); + }; + const getLocalData = () => { stationData = JSON.parse(window.localStorage.getItem("stationList")); lineData = JSON.parse(window.localStorage.getItem("lineList")); @@ -70,6 +104,7 @@ export default function sectionContainer() { sectionManagePresenter(line, stationData); lineListTemplate(line); sectionHandler(line); + removeSectionHandler(line); } } }; @@ -81,6 +116,7 @@ export default function sectionContainer() { getLocalData(); lineMenuPresenter(lineData); MenuButtonHandler(); + removeSectionHandler(); sectionContainer.style.display = "block"; }; diff --git a/src/section/sectionPresenter.js b/src/section/sectionPresenter.js index 09c2f379e..9a256946c 100644 --- a/src/section/sectionPresenter.js +++ b/src/section/sectionPresenter.js @@ -61,6 +61,7 @@ export const lineListPresenter = template => { "#section-manage-container", ); const lineListTable = document.createElement("table"); + lineListTable.setAttribute("id", "line-list-table"); lineListTable.innerHTML = template; sectionManageContainer.appendChild(lineListTable); }; From 0893d76caa61059022d0aeb0c3c8d0566f1921f7 Mon Sep 17 00:00:00 2001 From: ginger-kang Date: Tue, 15 Dec 2020 20:18:25 +0900 Subject: [PATCH 29/34] feat: cannot remove station when line has two stations or less --- docs/README.md | 2 +- src/section/sectionConstant.js | 2 ++ src/section/sectionContainer.js | 20 ++++++++++++-------- 3 files changed, 15 insertions(+), 9 deletions(-) diff --git a/docs/README.md b/docs/README.md index 4cd8d843f..d4dc40068 100644 --- a/docs/README.md +++ b/docs/README.md @@ -25,7 +25,7 @@ ### μ§€ν•˜μ²  ꡬ간 μ‚­μ œ κΈ°λŠ₯ - [x] 노선에 λ“±λ‘λœ 역을 μ œκ±°ν•  수 μžˆλ‹€. - [x] 쒅점을 μ œκ±°ν•  경우 λ‹€μŒ 역이 쒅점이 λœλ‹€. -- [ ] 노선에 ν¬ν•¨λœ 역이 λ‘κ°œ μ΄ν•˜μΌ λ•ŒλŠ” 역을 μ œκ±°ν•  수 μ—†λ‹€. +- [x] 노선에 ν¬ν•¨λœ 역이 λ‘κ°œ μ΄ν•˜μΌ λ•ŒλŠ” 역을 μ œκ±°ν•  수 μ—†λ‹€. ### μ§€ν•˜μ²  노선에 λ“±λ‘λœ μ—­ 쑰회 κΈ°λŠ₯ - [ ] λ…Έμ„ μ˜ 상행 쒅점뢀터 ν•˜ν–‰ μ’…μ κΉŒμ§€ μ—°κ²°λœ μˆœμ„œλŒ€λ‘œ μ—­ λͺ©λ‘μ„ μ‘°νšŒν•  수 μžˆλ‹€. diff --git a/src/section/sectionConstant.js b/src/section/sectionConstant.js index c6f2488e3..8934761d6 100644 --- a/src/section/sectionConstant.js +++ b/src/section/sectionConstant.js @@ -1 +1,3 @@ export const INVALID_SECTION_NAME = "ꡬ간이 μ€‘λ³΅λ˜μ§€ μ•Šκ²Œ μž…λ ₯ν•΄μ£Όμ„Έμš”."; +export const CANNOT_REMOVE = + "노선에 ν¬ν•¨λœ 역이 두 개 μ΄ν•˜μΌ 경우 역을 μ œκ±°ν•  수 μ—†μŠ΅λ‹ˆλ‹€."; diff --git a/src/section/sectionContainer.js b/src/section/sectionContainer.js index 08a3120d1..a792a5b2b 100644 --- a/src/section/sectionContainer.js +++ b/src/section/sectionContainer.js @@ -4,7 +4,7 @@ import { lineListTemplate, } from "./sectionPresenter"; import { hasDuplicatedName } from "../utils"; -import { INVALID_SECTION_NAME } from "./sectionConstant"; +import { INVALID_SECTION_NAME, CANNOT_REMOVE } from "./sectionConstant"; export default function sectionContainer() { let lineData = []; @@ -54,14 +54,18 @@ export default function sectionContainer() { const targetName = targetSection.dataset.linename; const targetIndex = line.indexOf(targetName); - line.splice(targetIndex, 1); - lineData[lineDataIndex] = line; - sectionManageContainer.removeChild(lineListTable); + if (line.length > 3) { + line.splice(targetIndex, 1); + lineData[lineDataIndex] = line; + sectionManageContainer.removeChild(lineListTable); - setLocalData(lineData); - lineListTemplate(line); - sectionHandler(line); - removeSectionHandler(line); + setLocalData(lineData); + lineListTemplate(line); + sectionHandler(line); + removeSectionHandler(line); + } else { + alert(CANNOT_REMOVE); + } }; const getLocalData = () => { From 47fa351cc8e493220945e3b098f509a6d118b7fa Mon Sep 17 00:00:00 2001 From: ginger-kang Date: Tue, 15 Dec 2020 20:32:46 +0900 Subject: [PATCH 30/34] feat: present each menu when on click button and initialize map print element in index.html --- index.html | 1 + src/index.js | 51 +++++++++++++++++++++++++++++-- src/printMap/printMapContainer.js | 1 + 3 files changed, 51 insertions(+), 2 deletions(-) create mode 100644 src/printMap/printMapContainer.js diff --git a/index.html b/index.html index 95078caff..8a7194ac8 100644 --- a/index.html +++ b/index.html @@ -43,6 +43,7 @@

ꡬ간을 μˆ˜μ •ν•  노선을 μ„ νƒν•΄μ£Όμ„Έμš”.

+ diff --git a/src/index.js b/src/index.js index 04b57f1eb..5c3285e1f 100644 --- a/src/index.js +++ b/src/index.js @@ -1,5 +1,52 @@ import stationContainer from "./station/stationContainer"; import lineContainer from "./line/lineContainer"; +import sectionContainer from "./section/sectionContainer"; +import printMapContainer from "./printMap/printMapContainer"; -//stationContainer(); -lineContainer(); +const init = () => { + const stationButton = document.querySelector("#station-manager-button"); + const lineButton = document.querySelector("#line-manager-button"); + const sectionButton = document.querySelector("#section-manager-button"); + const printMapButton = document.querySelector("#map-print-manager-button"); + + stationButton.addEventListener("click", () => { + clearScreen(); + stationContainer(); + }); + + lineButton.addEventListener("click", () => { + clearScreen(); + lineContainer(); + }); + + sectionButton.addEventListener("click", () => { + clearScreen(); + sectionContainer(); + }); + printMapButton.addEventListener("click", () => { + clearScreen(); + printMapContainer(); + }); + + const clearScreen = () => { + const stationManageContainer = document.querySelector( + "#station-manager-container", + ); + const lineManageContainer = document.querySelector( + "#line-manager-container", + ); + const sectionManageContainer = document.querySelector( + "#section-manager-container", + ); + const printMapManageContainer = document.querySelector( + "#map-print-manager-container", + ); + + stationManageContainer.style.display = "none"; + lineManageContainer.style.display = "none"; + sectionManageContainer.style.display = "none"; + printMapManageContainer.style.display = "none"; + }; +}; + +init(); diff --git a/src/printMap/printMapContainer.js b/src/printMap/printMapContainer.js new file mode 100644 index 000000000..63e6cd79f --- /dev/null +++ b/src/printMap/printMapContainer.js @@ -0,0 +1 @@ +export default function printMapContainer() {} From 03169fac006c938f37b0d376744c5c745cec5d47 Mon Sep 17 00:00:00 2001 From: ginger-kang Date: Tue, 15 Dec 2020 20:56:31 +0900 Subject: [PATCH 31/34] feat: inquire list of stations in the order of connection from the uplink end point to the downlink end point --- docs/README.md | 2 +- src/printMap/printMapContainer.js | 21 ++++++++++++++++++++- src/printMap/printMapPresenter.js | 24 ++++++++++++++++++++++++ 3 files changed, 45 insertions(+), 2 deletions(-) create mode 100644 src/printMap/printMapPresenter.js diff --git a/docs/README.md b/docs/README.md index d4dc40068..a8fcfa816 100644 --- a/docs/README.md +++ b/docs/README.md @@ -28,7 +28,7 @@ - [x] 노선에 ν¬ν•¨λœ 역이 λ‘κ°œ μ΄ν•˜μΌ λ•ŒλŠ” 역을 μ œκ±°ν•  수 μ—†λ‹€. ### μ§€ν•˜μ²  노선에 λ“±λ‘λœ μ—­ 쑰회 κΈ°λŠ₯ -- [ ] λ…Έμ„ μ˜ 상행 쒅점뢀터 ν•˜ν–‰ μ’…μ κΉŒμ§€ μ—°κ²°λœ μˆœμ„œλŒ€λ‘œ μ—­ λͺ©λ‘μ„ μ‘°νšŒν•  수 μžˆλ‹€. +- [x] λ…Έμ„ μ˜ 상행 쒅점뢀터 ν•˜ν–‰ μ’…μ κΉŒμ§€ μ—°κ²°λœ μˆœμ„œλŒ€λ‘œ μ—­ λͺ©λ‘μ„ μ‘°νšŒν•  수 μžˆλ‹€. ### μΆ”κ°€ κΈ°λŠ₯ - `localStorage`λ₯Ό μ΄μš©ν•˜μ—¬, μƒˆλ‘œκ³ μΉ¨ ν•˜λ”λΌλ„ μž‘μ—…ν•˜λ˜ 정보듀을 뢈러올 수 있게 ν•œλ‹€. diff --git a/src/printMap/printMapContainer.js b/src/printMap/printMapContainer.js index 63e6cd79f..8f49ea6ba 100644 --- a/src/printMap/printMapContainer.js +++ b/src/printMap/printMapContainer.js @@ -1 +1,20 @@ -export default function printMapContainer() {} +import { listHeaderPresenter } from "./printMapPresenter"; + +export default function printMapContainer() { + let lineData = []; + + const getLocalData = () => { + lineData = JSON.parse(window.localStorage.getItem("lineList")); + }; + + const init = () => { + const printMapContainer = document.querySelector( + "#map-print-manager-container", + ); + getLocalData(); + listHeaderPresenter(lineData); + printMapContainer.style.display = "block"; + }; + + init(); +} diff --git a/src/printMap/printMapPresenter.js b/src/printMap/printMapPresenter.js new file mode 100644 index 000000000..7132bc767 --- /dev/null +++ b/src/printMap/printMapPresenter.js @@ -0,0 +1,24 @@ +export const listHeaderPresenter = lineData => { + const printMapContainer = document.querySelector( + "#map-print-manager-container", + ); + let listTemplate = ""; + for (const line of lineData) { + listTemplate += ` +

${line[0]}

+ `; + listTemplate += listStation(line); + } + printMapContainer.innerHTML = listTemplate; +}; + +const listStation = lineData => { + let stationTemplate = `
    `; + for (let i = 1; i < lineData.length; i++) { + stationTemplate += ` +
  • ${lineData[i]}
    • + `; + } + stationTemplate += `
`; + return stationTemplate; +}; From 1ea1d670fe8236dbb5b2d2c78154fa26cbe9629d Mon Sep 17 00:00:00 2001 From: ginger-kang Date: Tue, 15 Dec 2020 22:18:07 +0900 Subject: [PATCH 32/34] fix: line downbound station index --- src/line/linePresenter.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/line/linePresenter.js b/src/line/linePresenter.js index efdc9c7b0..25743422e 100644 --- a/src/line/linePresenter.js +++ b/src/line/linePresenter.js @@ -12,7 +12,7 @@ export const lineListTemplate = lineList => { ${line[0]} ${line[1]} - ${line[2]} + ${line[line.length - 1]} `; From ec9c31943407b3cb093a87418883dc55df993616 Mon Sep 17 00:00:00 2001 From: ginger-kang Date: Tue, 15 Dec 2020 22:39:37 +0900 Subject: [PATCH 33/34] feat: cannot remove station in line --- docs/README.md | 2 +- src/station/stationConstant.js | 1 + src/station/stationContainer.js | 16 ++++++++++------ src/utils.js | 7 +++++++ 4 files changed, 19 insertions(+), 7 deletions(-) diff --git a/docs/README.md b/docs/README.md index a8fcfa816..56b8f8002 100644 --- a/docs/README.md +++ b/docs/README.md @@ -4,7 +4,7 @@ ### μ§€ν•˜μ²  μ—­ κ΄€λ ¨ κΈ°λŠ₯ - [x] μ§€ν•˜μ²  역을 λ“±λ‘ν•˜κ³  μ‚­μ œν•  수 μžˆλ‹€. - - [ ] 단, 노선에 λ“±λ‘λœ 역은 μ‚­μ œν•  수 μ—†λ‹€ + - [x] 단, 노선에 λ“±λ‘λœ 역은 μ‚­μ œν•  수 μ—†λ‹€ - [x] μ€‘λ³΅λœ μ§€ν•˜μ²  μ—­ 이름이 등둝될 수 μ—†λ‹€. - [x] μ§€ν•˜μ²  역은 2κΈ€μž 이상이어야 ν•œλ‹€. - [x] μ§€ν•˜μ²  μ—­μ˜ λͺ©λ‘μ„ μ‘°νšŒν•  수 μžˆλ‹€. diff --git a/src/station/stationConstant.js b/src/station/stationConstant.js index 98343ddcb..2ca79fb33 100644 --- a/src/station/stationConstant.js +++ b/src/station/stationConstant.js @@ -1,2 +1,3 @@ export const INVALID_STATION_NAME = "μ§€ν•˜μ²  역이 μ€‘λ³΅λ˜μ§€ μ•Šκ²Œ 2κΈ€μž μ΄μƒμœΌλ‘œ μž…λ ₯ν•΄μ£Όμ„Έμš”."; +export const CANNOT_REMOVE = "노선에 λ“±λ‘λœ 역은 μ‚­μ œν•  수 μ—†μŠ΅λ‹ˆλ‹€."; diff --git a/src/station/stationContainer.js b/src/station/stationContainer.js index f432089cf..67f62b89e 100644 --- a/src/station/stationContainer.js +++ b/src/station/stationContainer.js @@ -1,6 +1,6 @@ -import { isValidStationName } from "../utils"; +import { isValidStationName, inLine } from "../utils"; import { stationListTemplate } from "./stationPresenter"; -import { INVALID_STATION_NAME } from "./stationConstant"; +import { INVALID_STATION_NAME, CANNOT_REMOVE } from "./stationConstant"; export default function stationContainer() { let stationList = []; @@ -36,10 +36,14 @@ export default function stationContainer() { const stationName = targetStation.dataset.stationname; const stationIndex = stationList.indexOf(stationName); - stationList.splice(stationIndex, 1); - setLocalData(stationList); - stationListTemplate(stationList); - removeStationHandler(); + if (!inLine(stationName)) { + stationList.splice(stationIndex, 1); + setLocalData(stationList); + stationListTemplate(stationList); + removeStationHandler(); + } else { + alert(CANNOT_REMOVE); + } }; const setLocalData = stationList => { diff --git a/src/utils.js b/src/utils.js index ecbc4139d..3dbaf7b11 100644 --- a/src/utils.js +++ b/src/utils.js @@ -23,3 +23,10 @@ const isSameStation = lineInfo => lineInfo[1] === lineInfo[2]; export const isValidLineInfo = (lineList, lineInfo) => { return !hasDuplicatedLine(lineList, lineInfo) && !isSameStation(lineInfo); }; + +export const inLine = stationName => { + let lineList = JSON.parse(window.localStorage.getItem("lineList")); + + lineList = lineList.flat(); + return lineList.includes(stationName); +}; From d8500c8cf8bc6aebe218af9ddc330a8080147182 Mon Sep 17 00:00:00 2001 From: ginger-kang Date: Tue, 15 Dec 2020 23:04:29 +0900 Subject: [PATCH 34/34] fix: select option duplicated issue --- src/line/lineContainer.js | 9 ++++++++- src/line/linePresenter.js | 7 +++++++ 2 files changed, 15 insertions(+), 1 deletion(-) diff --git a/src/line/lineContainer.js b/src/line/lineContainer.js index f061d9304..ccfa88273 100644 --- a/src/line/lineContainer.js +++ b/src/line/lineContainer.js @@ -1,6 +1,6 @@ import { isValidLineInfo } from "../utils"; import { INVALID_LINE_INFO } from "./lineConstant"; -import { lineListTemplate } from "./linePresenter"; +import { lineListTemplate, clearOption } from "./linePresenter"; export default function lineContainer() { let lineList = []; @@ -59,10 +59,17 @@ export default function lineContainer() { }; const setSelectorOption = selector => { + const lineStartSelector = document.querySelector( + "#line-start-name-selector", + ); const stationData = JSON.parse(window.localStorage.getItem("stationList")); + if (selector === lineStartSelector) { + clearOption(); + } if (stationData) { for (const station of stationData) { const selectorOption = document.createElement("option"); + selectorOption.setAttribute("id", "station-option"); selectorOption.textContent = station; selector.appendChild(selectorOption); } diff --git a/src/line/linePresenter.js b/src/line/linePresenter.js index 25743422e..bd3e84a10 100644 --- a/src/line/linePresenter.js +++ b/src/line/linePresenter.js @@ -24,3 +24,10 @@ export const lineListPresenter = template => { const lineNameTable = document.querySelector("#line-name-table"); lineNameTable.innerHTML = template; }; + +export const clearOption = () => { + const lineOptions = document.querySelectorAll("#station-option"); + for (const option of lineOptions) { + option.remove(); + } +};