From eeae5fc034774b3a1459b2edfa0a936d9a607685 Mon Sep 17 00:00:00 2001 From: yang Date: Sun, 13 Dec 2020 15:22:22 +0900 Subject: [PATCH 01/27] create README --- .prettierrc | 8 ++++++++ docs/README.md | 45 +++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 53 insertions(+) create mode 100644 .prettierrc create mode 100644 docs/README.md diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 000000000..1c12442ae --- /dev/null +++ b/.prettierrc @@ -0,0 +1,8 @@ +{ + "arrowParens": "avoid", + "bracketSpacing": true, + "printWidth": 100, + "semi": true, + "singleQuote": true, + "tabWidth": 2 +} \ No newline at end of file diff --git a/docs/README.md b/docs/README.md new file mode 100644 index 000000000..d31fe3fd3 --- /dev/null +++ b/docs/README.md @@ -0,0 +1,45 @@ +# ๐Ÿš‡ ์ง€ํ•˜์ฒ  ๋…ธ์„ ๋„ ๋ฏธ์…˜ + +## ๐Ÿš€ ๊ตฌํ˜„ํ•  ๊ธฐ๋Šฅ ๋ชฉ๋ก + +### ์ฃผ ๊ธฐ๋Šฅ + +- [ ] ๊ฐ๊ฐ์˜ ๊ด€๋ฆฌ ๋ฒ„ํŠผ ์ƒ์„ฑ +- [ ] localStorage์— ๋ฐ์ดํ„ฐ ์ €์žฅ ๋ฐ ๋ถˆ๋Ÿฌ์˜ค๊ธฐ + +1. ์—ญ ๊ด€๋ฆฌ + +- [ ] ์—ญ ๊ด€๋ฆฌ ๋ฒ„ํŠผ ํด๋ฆญ์‹œ ์—ญ ์ด๋ฆ„ ์ž…๋ ฅ, ์ง€ํ•˜์ฒ  ์—ญ ๋ชฉ๋ก ๋ณด์—ฌ์ฃผ๊ธฐ +- [ ] ์—ญ ์ด๋ฆ„ ์ž…๋ ฅ, ์ถ”๊ฐ€ ๋ฒ„ํŠผ ํ™œ์„ฑํ™” +- [ ] ์—ญ ์ด๋ฆ„ ์ค‘๋ณต ์ฒดํฌ +- [ ] ์—ญ ์ด๋ฆ„ 2๊ธ€์ž ์ด์ƒ ์ฒดํฌ +- [ ] ์—ญ ๋“ฑ๋ก์‹œ ํ™”๋ฉด์— ํ‘œ์‹œ +- [ ] ์—ญ ์‚ญ์ œ ๊ธฐ๋Šฅ `alert`์‚ฌ์šฉ +- [ ] ์—ญ ์‚ญ์ œ์‹œ ๋…ธ์„ ์— ์žˆ๋Š”์ง€ ํ™•์ธ + +2. ๋…ธ์„  ๊ด€๋ฆฌ + +- [ ] ๋…ธ์„  ๊ด€๋ฆฌ ๋ฒ„ํŠผ ํด๋ฆญ์‹œ ๋…ธ์„  ์ด๋ฆ„ ์ž…๋ ฅ, ์ข…์  ์„ ํƒ, ๋…ธ์„  ๋ชฉ๋ก ๋ณด์—ฌ์ฃผ๊ธฐ +- [ ] ๋…ธ์„  ์ด๋ฆ„ ์ž…๋ ฅ, ์ถ”๊ฐ€ ๋ฒ„ํŠผ ํ™œ์„ฑํ™” +- [ ] ์ข…์  ๋ฆฌ์ŠคํŠธ ๋ถˆ๋Ÿฌ์˜ค๊ธฐ +- [ ] ๋…ธ์„  ์ด๋ฆ„ ์ค‘๋ณต ์ฒดํฌ +- [ ] ๋…ธ์„  ๋“ฑ๋ก์‹œ ํ™”๋ฉด์— ํ‘œ์‹œ +- [ ] ๋…ธ์„  ์‚ญ์ œ ๊ธฐ๋Šฅ `alert`์‚ฌ์šฉ + +3. ๊ตฌ๊ฐ„ ๊ด€๋ฆฌ + +- [ ] ๋…ธ์„  ๊ด€๋ฆฌ ๋ฒ„ํŠผ ํด๋ฆญ์‹œ ์ˆ˜์ •ํ•  ๋…ธ์„  ์„ ํƒ ๋ฒ„ํŠผ +- [ ] ์ˆ˜์ • ํ•  ๋…ธ์„  ์„ ํƒ์‹œ ๊ด€๋ฆฌ ํ™”๋ฉด ๋ณด์—ฌ์ฃผ๊ธฐ +- [ ] ์—ญ ์„ ํƒ ๋ฆฌ์ŠคํŠธ ๋ถˆ๋Ÿฌ์˜ค๊ธฐ +- [ ] ์ˆœ์„œ ์ž…๋ ฅ, ๋“ฑ๋ก ๋ฒ„ํŠผ ํ™œ์„ฑํ™” +- [ ] ๋…ธ์„ ์ด ์ค‘๋ณต๋˜๋Š” ์—ญ์ด ์žˆ์œผ๋ฉด ์•ˆ๋จ +- [ ] ์—ญ๊ณผ ์—ญ ์‚ฌ์ด์—๋งŒ ์ถ”๊ฐ€๋˜๋„๋ก +- [ ] ์—ญ์„ ์ œ๊ฑฐํ•˜๋Š” ๊ธฐ๋Šฅ +- [ ] ์—ญ ๊ฐœ์ˆ˜๊ฐ€ 2๊ฐœ ์ดํ•˜๊ฐ€ ๋˜๋ฉด ์•ˆ๋จ + +4. ์ง€ํ•˜์ฒ  ๋…ธ์„ ๋„ ์ถœ๋ ฅ + +- [ ] ๋…ธ์„ ๋„ ์ถœ๋ ฅ ๋ฒ„ํŠผ ํด๋ฆญ์‹œ ๋…ธ์„ ๋„ ํ™”๋ฉด ๋ณด์—ฌ์ฃผ๊ธฐ +- [ ] ๋…ธ์„  ๋ชฉ๋ก ๋ณด์—ฌ์ฃผ๊ธฐ + +### ๋ถ€๊ฐ€ ๊ธฐ๋Šฅ From ac36648a4e33e10ba2dd80f516f34dbbe293b80d Mon Sep 17 00:00:00 2001 From: yang Date: Sun, 13 Dec 2020 15:41:57 +0900 Subject: [PATCH 02/27] create manager button --- docs/README.md | 3 ++- index.html | 4 ++++ 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/docs/README.md b/docs/README.md index d31fe3fd3..aec6d1be9 100644 --- a/docs/README.md +++ b/docs/README.md @@ -4,7 +4,8 @@ ### ์ฃผ ๊ธฐ๋Šฅ -- [ ] ๊ฐ๊ฐ์˜ ๊ด€๋ฆฌ ๋ฒ„ํŠผ ์ƒ์„ฑ +- [x] ๊ฐ๊ฐ์˜ ๊ด€๋ฆฌ ๋ฒ„ํŠผ ์ƒ์„ฑ +- [ ] element๋ฅผ ์ƒ์„ฑํ•˜๊ณ  ์—†์• ๋Š” ํ•จ์ˆ˜ - [ ] localStorage์— ๋ฐ์ดํ„ฐ ์ €์žฅ ๋ฐ ๋ถˆ๋Ÿฌ์˜ค๊ธฐ 1. ์—ญ ๊ด€๋ฆฌ diff --git a/index.html b/index.html index fc99deac2..63c90ba37 100644 --- a/index.html +++ b/index.html @@ -7,6 +7,10 @@

๐Ÿš‡ ์ง€ํ•˜์ฒ  ๋…ธ์„ ๋„ ๊ด€๋ฆฌ

+ + + +
From a3be94a143264a60c7f603dfd9de6e78fccc9049 Mon Sep 17 00:00:00 2001 From: yang Date: Sun, 13 Dec 2020 17:07:31 +0900 Subject: [PATCH 03/27] make&append element --- docs/README.md | 2 +- src/Controllers/utils.js | 25 +++++++++++++++++++++++++ src/index.js | 1 + 3 files changed, 27 insertions(+), 1 deletion(-) create mode 100644 src/Controllers/utils.js diff --git a/docs/README.md b/docs/README.md index aec6d1be9..853108987 100644 --- a/docs/README.md +++ b/docs/README.md @@ -5,7 +5,7 @@ ### ์ฃผ ๊ธฐ๋Šฅ - [x] ๊ฐ๊ฐ์˜ ๊ด€๋ฆฌ ๋ฒ„ํŠผ ์ƒ์„ฑ -- [ ] element๋ฅผ ์ƒ์„ฑํ•˜๊ณ  ์—†์• ๋Š” ํ•จ์ˆ˜ +- [x] element๋ฅผ ์ƒ์„ฑํ•˜๊ณ  ํ™”๋ฉด์— ๋„์šฐ๋Š” ๊ธฐ๋Šฅ - [ ] localStorage์— ๋ฐ์ดํ„ฐ ์ €์žฅ ๋ฐ ๋ถˆ๋Ÿฌ์˜ค๊ธฐ 1. ์—ญ ๊ด€๋ฆฌ diff --git a/src/Controllers/utils.js b/src/Controllers/utils.js new file mode 100644 index 000000000..c9e357c81 --- /dev/null +++ b/src/Controllers/utils.js @@ -0,0 +1,25 @@ +export const makeElement = ({ + tag, + id, + elementClass, + innerHTML, + placeholder, + styles, + dataName, + dataValue, +}) => { + const element = document.createElement(tag); + if (id) element.id = id; + if (elementClass) element.classList.add(elementClass); + if (innerHTML) element.innerHTML = innerHTML; + if (placeholder) element.placeholder = placeholder; + if (styles) element.style.cssText = styles; + if (dataName && dataValue) element.setAttribute(`data-${dataName}`, dataValue); + return element; +}; + +export const appendElements = (elements, parent) => { + elements.forEach(element => { + parent.appendChild(element); + }); +}; diff --git a/src/index.js b/src/index.js index e69de29bb..6a11f02da 100644 --- a/src/index.js +++ b/src/index.js @@ -0,0 +1 @@ +import { makeElement, appendElements } from './Controllers/utils.js'; From b426093a34221733348e5fdedaae14d7a0ccea30 Mon Sep 17 00:00:00 2001 From: yang Date: Mon, 14 Dec 2020 00:36:40 +0900 Subject: [PATCH 04/27] create tab controller --- docs/README.md | 4 +- index.html | 102 +++++++++++++++++++++++++++++-- src/Controllers/tabController.js | 21 +++++++ src/index.js | 11 ++++ style.css | 17 ++++++ 5 files changed, 149 insertions(+), 6 deletions(-) create mode 100644 src/Controllers/tabController.js create mode 100644 style.css diff --git a/docs/README.md b/docs/README.md index 853108987..541f74f6c 100644 --- a/docs/README.md +++ b/docs/README.md @@ -10,7 +10,7 @@ 1. ์—ญ ๊ด€๋ฆฌ -- [ ] ์—ญ ๊ด€๋ฆฌ ๋ฒ„ํŠผ ํด๋ฆญ์‹œ ์—ญ ์ด๋ฆ„ ์ž…๋ ฅ, ์ง€ํ•˜์ฒ  ์—ญ ๋ชฉ๋ก ๋ณด์—ฌ์ฃผ๊ธฐ +- [x] ์—ญ ๊ด€๋ฆฌ ๋ฒ„ํŠผ ํด๋ฆญ์‹œ ์—ญ ์ด๋ฆ„ ์ž…๋ ฅ, ์ง€ํ•˜์ฒ  ์—ญ ๋ชฉ๋ก ๋ณด์—ฌ์ฃผ๊ธฐ - [ ] ์—ญ ์ด๋ฆ„ ์ž…๋ ฅ, ์ถ”๊ฐ€ ๋ฒ„ํŠผ ํ™œ์„ฑํ™” - [ ] ์—ญ ์ด๋ฆ„ ์ค‘๋ณต ์ฒดํฌ - [ ] ์—ญ ์ด๋ฆ„ 2๊ธ€์ž ์ด์ƒ ์ฒดํฌ @@ -20,7 +20,7 @@ 2. ๋…ธ์„  ๊ด€๋ฆฌ -- [ ] ๋…ธ์„  ๊ด€๋ฆฌ ๋ฒ„ํŠผ ํด๋ฆญ์‹œ ๋…ธ์„  ์ด๋ฆ„ ์ž…๋ ฅ, ์ข…์  ์„ ํƒ, ๋…ธ์„  ๋ชฉ๋ก ๋ณด์—ฌ์ฃผ๊ธฐ +- [x] ๋…ธ์„  ๊ด€๋ฆฌ ๋ฒ„ํŠผ ํด๋ฆญ์‹œ ๋…ธ์„  ์ด๋ฆ„ ์ž…๋ ฅ, ์ข…์  ์„ ํƒ, ๋…ธ์„  ๋ชฉ๋ก ๋ณด์—ฌ์ฃผ๊ธฐ - [ ] ๋…ธ์„  ์ด๋ฆ„ ์ž…๋ ฅ, ์ถ”๊ฐ€ ๋ฒ„ํŠผ ํ™œ์„ฑํ™” - [ ] ์ข…์  ๋ฆฌ์ŠคํŠธ ๋ถˆ๋Ÿฌ์˜ค๊ธฐ - [ ] ๋…ธ์„  ์ด๋ฆ„ ์ค‘๋ณต ์ฒดํฌ diff --git a/index.html b/index.html index 63c90ba37..a7f701452 100644 --- a/index.html +++ b/index.html @@ -2,15 +2,109 @@ + ์ง€ํ•˜์ฒ  ๋…ธ์„ ๋„ ๊ด€๋ฆฌ

๐Ÿš‡ ์ง€ํ•˜์ฒ  ๋…ธ์„ ๋„ ๊ด€๋ฆฌ

- - - - + + + + +
+
+

์—ญ์ด๋ฆ„

+ + +

๐Ÿš‰ ์ง€ํ•˜์ฒ  ์—ญ ๋ชฉ๋ก

+ + + + + + + + + + + + + +
์—ญ ์ด๋ฆ„์„ค์ •
asd
+
+
+

๋…ธ์„ ์ด๋ฆ„

+ +
+ ์ƒํ–‰ ์ข…์  + +
+
+ ํ•˜ํ–‰ ์ข…์  + +
+ +

๐Ÿš‰ ๋…ธ์„  ๋ชฉ๋ก

+ + + + + + + + + + + + + + + + + +
๋…ธ์„  ์ด๋ฆ„์ƒํ–‰ ์ข…์ ์—ญํ•˜ํ–‰ ์ข…์ ์—ญ์„ค์ •
asdasdfasdf
+
+
+

๊ตฌ๊ฐ„์„ ์ˆ˜์ •ํ•  ๋…ธ์„ ์„ ์„ ํƒํ•ด์ฃผ์„ธ์š”.

+
+
+

๊ด€๋ฆฌ

+
+

๊ตฌ๊ฐ„ ๋“ฑ๋ก

+
+ + + + + + + + + + + + + + + + + + + +
์ˆœ์„œ์ด๋ฆ„์„ค์ •
asdasdfasdf
+
+
+
+

๋…ธ์„ ๋„

diff --git a/src/Controllers/tabController.js b/src/Controllers/tabController.js new file mode 100644 index 000000000..1c1aa30e8 --- /dev/null +++ b/src/Controllers/tabController.js @@ -0,0 +1,21 @@ +const stationManagerScreen = document.querySelector('#station-manager-screen'); +const lineManagerScreen = document.querySelector('#line-manager-screen'); +const sectionManagerScreen = document.querySelector('#section-manager-screen'); +const mapPrintManagerScreen = document.querySelector('#map-print-manager-screen'); + +const tabList = [ + stationManagerScreen, + lineManagerScreen, + sectionManagerScreen, + mapPrintManagerScreen, +]; + +export const tabController = value => { + for (let i = 0; i < tabList.length; i++) { + if (i == parseInt(value)) { + tabList[i].classList.add('active'); + } else { + tabList[i].classList.remove('active'); + } + } +}; diff --git a/src/index.js b/src/index.js index 6a11f02da..6f4209de3 100644 --- a/src/index.js +++ b/src/index.js @@ -1 +1,12 @@ import { makeElement, appendElements } from './Controllers/utils.js'; +import { tabController } from './Controllers/tabController.js'; + +const stationManagerBtn = document.querySelector('#station-manager-button'); +const lineManagerBtn = document.querySelector('#line-manager-button'); +const sectionManagerBtn = document.querySelector('#section-manager-button'); +const mapPrintManagerBtn = document.querySelector('#map-print-manager-button'); + +stationManagerBtn.addEventListener('click', e => tabController(e.target.value)); +lineManagerBtn.addEventListener('click', e => tabController(e.target.value)); +sectionManagerBtn.addEventListener('click', e => tabController(e.target.value)); +mapPrintManagerBtn.addEventListener('click', e => tabController(e.target.value)); diff --git a/style.css b/style.css new file mode 100644 index 000000000..4ea43637a --- /dev/null +++ b/style.css @@ -0,0 +1,17 @@ +.tab-screen { + display: none; +} + +table { + border: 1px solid gray; + margin-top: 10px; +} + +table th, +table td { + border: 1px solid gray; +} + +.active { + display: block; +} From 5225f9d213b10a1cf560cec621eaa25602c5f998 Mon Sep 17 00:00:00 2001 From: yang Date: Mon, 14 Dec 2020 00:46:29 +0900 Subject: [PATCH 05/27] create station, line --- docs/README.md | 6 ++++-- src/index.js | 4 ++-- src/models/Line.js | 4 ++++ src/models/Station.js | 3 +++ 4 files changed, 13 insertions(+), 4 deletions(-) create mode 100644 src/models/Line.js create mode 100644 src/models/Station.js diff --git a/docs/README.md b/docs/README.md index 541f74f6c..ed8f7edcb 100644 --- a/docs/README.md +++ b/docs/README.md @@ -6,6 +6,8 @@ - [x] ๊ฐ๊ฐ์˜ ๊ด€๋ฆฌ ๋ฒ„ํŠผ ์ƒ์„ฑ - [x] element๋ฅผ ์ƒ์„ฑํ•˜๊ณ  ํ™”๋ฉด์— ๋„์šฐ๋Š” ๊ธฐ๋Šฅ +- [x] Station ์ƒ์„ฑ +- [x] Line ์ƒ์„ฑ - [ ] localStorage์— ๋ฐ์ดํ„ฐ ์ €์žฅ ๋ฐ ๋ถˆ๋Ÿฌ์˜ค๊ธฐ 1. ์—ญ ๊ด€๋ฆฌ @@ -29,7 +31,7 @@ 3. ๊ตฌ๊ฐ„ ๊ด€๋ฆฌ -- [ ] ๋…ธ์„  ๊ด€๋ฆฌ ๋ฒ„ํŠผ ํด๋ฆญ์‹œ ์ˆ˜์ •ํ•  ๋…ธ์„  ์„ ํƒ ๋ฒ„ํŠผ +- [x] ๋…ธ์„  ๊ด€๋ฆฌ ๋ฒ„ํŠผ ํด๋ฆญ์‹œ ์ˆ˜์ •ํ•  ๋…ธ์„  ์„ ํƒ ๋ฒ„ํŠผ - [ ] ์ˆ˜์ • ํ•  ๋…ธ์„  ์„ ํƒ์‹œ ๊ด€๋ฆฌ ํ™”๋ฉด ๋ณด์—ฌ์ฃผ๊ธฐ - [ ] ์—ญ ์„ ํƒ ๋ฆฌ์ŠคํŠธ ๋ถˆ๋Ÿฌ์˜ค๊ธฐ - [ ] ์ˆœ์„œ ์ž…๋ ฅ, ๋“ฑ๋ก ๋ฒ„ํŠผ ํ™œ์„ฑํ™” @@ -40,7 +42,7 @@ 4. ์ง€ํ•˜์ฒ  ๋…ธ์„ ๋„ ์ถœ๋ ฅ -- [ ] ๋…ธ์„ ๋„ ์ถœ๋ ฅ ๋ฒ„ํŠผ ํด๋ฆญ์‹œ ๋…ธ์„ ๋„ ํ™”๋ฉด ๋ณด์—ฌ์ฃผ๊ธฐ +- [x] ๋…ธ์„ ๋„ ์ถœ๋ ฅ ๋ฒ„ํŠผ ํด๋ฆญ์‹œ ๋…ธ์„ ๋„ ํ™”๋ฉด ๋ณด์—ฌ์ฃผ๊ธฐ - [ ] ๋…ธ์„  ๋ชฉ๋ก ๋ณด์—ฌ์ฃผ๊ธฐ ### ๋ถ€๊ฐ€ ๊ธฐ๋Šฅ diff --git a/src/index.js b/src/index.js index 6f4209de3..24a6237f8 100644 --- a/src/index.js +++ b/src/index.js @@ -1,5 +1,5 @@ -import { makeElement, appendElements } from './Controllers/utils.js'; -import { tabController } from './Controllers/tabController.js'; +import { makeElement, appendElements } from './controllers/utils.js'; +import { tabController } from './controllers/tabController.js'; const stationManagerBtn = document.querySelector('#station-manager-button'); const lineManagerBtn = document.querySelector('#line-manager-button'); diff --git a/src/models/Line.js b/src/models/Line.js new file mode 100644 index 000000000..59c39874c --- /dev/null +++ b/src/models/Line.js @@ -0,0 +1,4 @@ +export default function Line(name, start, end) { + this.name = name; + this.lineList = [start, end]; +} diff --git a/src/models/Station.js b/src/models/Station.js new file mode 100644 index 000000000..365dea4df --- /dev/null +++ b/src/models/Station.js @@ -0,0 +1,3 @@ +export default function Station(name) { + this.name = name; +} From 567e2186c5efdc25b246e56e33e2b31a2c117033 Mon Sep 17 00:00:00 2001 From: yang Date: Mon, 14 Dec 2020 01:11:18 +0900 Subject: [PATCH 06/27] create storage controller --- docs/README.md | 2 +- src/controllers/storage.js | 8 ++++++++ src/controllers/tab.js | 13 +++++++++++++ src/index.js | 13 ++----------- src/{Controllers/tabController.js => views/tab.js} | 2 +- src/{Controllers => views}/utils.js | 0 6 files changed, 25 insertions(+), 13 deletions(-) create mode 100644 src/controllers/storage.js create mode 100644 src/controllers/tab.js rename src/{Controllers/tabController.js => views/tab.js} (93%) rename src/{Controllers => views}/utils.js (100%) diff --git a/docs/README.md b/docs/README.md index ed8f7edcb..ba88ef8a2 100644 --- a/docs/README.md +++ b/docs/README.md @@ -8,7 +8,7 @@ - [x] element๋ฅผ ์ƒ์„ฑํ•˜๊ณ  ํ™”๋ฉด์— ๋„์šฐ๋Š” ๊ธฐ๋Šฅ - [x] Station ์ƒ์„ฑ - [x] Line ์ƒ์„ฑ -- [ ] localStorage์— ๋ฐ์ดํ„ฐ ์ €์žฅ ๋ฐ ๋ถˆ๋Ÿฌ์˜ค๊ธฐ +- [x] localStorage์— ๋ฐ์ดํ„ฐ ์ €์žฅ ๋ฐ ๋ถˆ๋Ÿฌ์˜ค๊ธฐ 1. ์—ญ ๊ด€๋ฆฌ diff --git a/src/controllers/storage.js b/src/controllers/storage.js new file mode 100644 index 000000000..7ce25ab8b --- /dev/null +++ b/src/controllers/storage.js @@ -0,0 +1,8 @@ +export function saveData(key, object) { + localStorage.setItem(key, JSON.stringify(object)); +} + +export function loadData(key) { + const data = localStorage.getItem(key); + return data ? JSON.parse(data) : []; +} diff --git a/src/controllers/tab.js b/src/controllers/tab.js new file mode 100644 index 000000000..8511a9cd1 --- /dev/null +++ b/src/controllers/tab.js @@ -0,0 +1,13 @@ +import { tabManager } from '../views/tab.js'; + +const stationManagerBtn = document.querySelector('#station-manager-button'); +const lineManagerBtn = document.querySelector('#line-manager-button'); +const sectionManagerBtn = document.querySelector('#section-manager-button'); +const mapPrintManagerBtn = document.querySelector('#map-print-manager-button'); + +export const tabController = () => { + stationManagerBtn.addEventListener('click', e => tabManager(e.target.value)); + lineManagerBtn.addEventListener('click', e => tabManager(e.target.value)); + sectionManagerBtn.addEventListener('click', e => tabManager(e.target.value)); + mapPrintManagerBtn.addEventListener('click', e => tabManager(e.target.value)); +}; diff --git a/src/index.js b/src/index.js index 24a6237f8..f3a3f63ce 100644 --- a/src/index.js +++ b/src/index.js @@ -1,12 +1,3 @@ -import { makeElement, appendElements } from './controllers/utils.js'; -import { tabController } from './controllers/tabController.js'; +import { tabController } from './controllers/tab.js'; -const stationManagerBtn = document.querySelector('#station-manager-button'); -const lineManagerBtn = document.querySelector('#line-manager-button'); -const sectionManagerBtn = document.querySelector('#section-manager-button'); -const mapPrintManagerBtn = document.querySelector('#map-print-manager-button'); - -stationManagerBtn.addEventListener('click', e => tabController(e.target.value)); -lineManagerBtn.addEventListener('click', e => tabController(e.target.value)); -sectionManagerBtn.addEventListener('click', e => tabController(e.target.value)); -mapPrintManagerBtn.addEventListener('click', e => tabController(e.target.value)); +tabController(); diff --git a/src/Controllers/tabController.js b/src/views/tab.js similarity index 93% rename from src/Controllers/tabController.js rename to src/views/tab.js index 1c1aa30e8..eef71e4a0 100644 --- a/src/Controllers/tabController.js +++ b/src/views/tab.js @@ -10,7 +10,7 @@ const tabList = [ mapPrintManagerScreen, ]; -export const tabController = value => { +export const tabManager = value => { for (let i = 0; i < tabList.length; i++) { if (i == parseInt(value)) { tabList[i].classList.add('active'); diff --git a/src/Controllers/utils.js b/src/views/utils.js similarity index 100% rename from src/Controllers/utils.js rename to src/views/utils.js From b611c2126623b9a7e4a08ebf8a7d3d5c77393214 Mon Sep 17 00:00:00 2001 From: yang Date: Mon, 14 Dec 2020 02:35:48 +0900 Subject: [PATCH 07/27] read station name --- docs/README.md | 6 +++--- index.html | 6 +++--- src/controllers/stationManager.js | 15 +++++++++++++++ src/controllers/validation.js | 7 +++++++ src/index.js | 2 ++ src/views/stationManager.js | 7 +++++++ 6 files changed, 37 insertions(+), 6 deletions(-) create mode 100644 src/controllers/stationManager.js create mode 100644 src/controllers/validation.js create mode 100644 src/views/stationManager.js diff --git a/docs/README.md b/docs/README.md index ba88ef8a2..b88492cdb 100644 --- a/docs/README.md +++ b/docs/README.md @@ -13,9 +13,9 @@ 1. ์—ญ ๊ด€๋ฆฌ - [x] ์—ญ ๊ด€๋ฆฌ ๋ฒ„ํŠผ ํด๋ฆญ์‹œ ์—ญ ์ด๋ฆ„ ์ž…๋ ฅ, ์ง€ํ•˜์ฒ  ์—ญ ๋ชฉ๋ก ๋ณด์—ฌ์ฃผ๊ธฐ -- [ ] ์—ญ ์ด๋ฆ„ ์ž…๋ ฅ, ์ถ”๊ฐ€ ๋ฒ„ํŠผ ํ™œ์„ฑํ™” -- [ ] ์—ญ ์ด๋ฆ„ ์ค‘๋ณต ์ฒดํฌ -- [ ] ์—ญ ์ด๋ฆ„ 2๊ธ€์ž ์ด์ƒ ์ฒดํฌ +- [x] ์—ญ ์ด๋ฆ„ ์ž…๋ ฅ, ์ถ”๊ฐ€ ๋ฒ„ํŠผ ํ™œ์„ฑํ™” +- [x] ์—ญ ์ด๋ฆ„ ์ค‘๋ณต ์ฒดํฌ +- [x] ์—ญ ์ด๋ฆ„ 2๊ธ€์ž ์ด์ƒ ์ฒดํฌ - [ ] ์—ญ ๋“ฑ๋ก์‹œ ํ™”๋ฉด์— ํ‘œ์‹œ - [ ] ์—ญ ์‚ญ์ œ ๊ธฐ๋Šฅ `alert`์‚ฌ์šฉ - [ ] ์—ญ ์‚ญ์ œ์‹œ ๋…ธ์„ ์— ์žˆ๋Š”์ง€ ํ™•์ธ diff --git a/index.html b/index.html index a7f701452..7f1f1aaa7 100644 --- a/index.html +++ b/index.html @@ -16,7 +16,7 @@

๐Ÿš‡ ์ง€ํ•˜์ฒ  ๋…ธ์„ ๋„ ๊ด€๋ฆฌ

์—ญ์ด๋ฆ„

- +

๐Ÿš‰ ์ง€ํ•˜์ฒ  ์—ญ ๋ชฉ๋ก

@@ -37,13 +37,13 @@

๐Ÿš‰ ์ง€ํ•˜์ฒ  ์—ญ ๋ชฉ๋ก

๋…ธ์„ ์ด๋ฆ„

- ์ƒํ–‰ ์ข…์  + ์ƒํ–‰ ์ข…์ 
- ํ•˜ํ–‰ ์ข…์  + ํ•˜ํ–‰ ์ข…์  diff --git a/src/controllers/stationManager.js b/src/controllers/stationManager.js new file mode 100644 index 000000000..77982ee95 --- /dev/null +++ b/src/controllers/stationManager.js @@ -0,0 +1,15 @@ +import { addStation } from '../views/stationManager.js'; +import { loadData } from './storage.js'; + +export const stationAddListener = () => { + const stationManagerInput = document.querySelector('#station-name-input'); + const stationAddBtn = document.querySelector('#station-add-button'); + const stationList = ['asdf', 'asdsf', 'qwf']; //localStorage ๋ถˆ๋Ÿฌ์˜ค๊ธฐ + + stationAddBtn.addEventListener('click', () => addStation(stationManagerInput.value, stationList)); + stationManagerInput.addEventListener('keydown', e => { + if (e.keyCode === 13) { + addStation(stationManagerInput.value, stationList); + } + }); +}; diff --git a/src/controllers/validation.js b/src/controllers/validation.js new file mode 100644 index 000000000..86a0f9ec8 --- /dev/null +++ b/src/controllers/validation.js @@ -0,0 +1,7 @@ +export const overTwo = name => { + return name.length >= 2; +}; + +export const notDuplicate = (name, list) => { + return !list.includes(name); +}; diff --git a/src/index.js b/src/index.js index f3a3f63ce..6f44fe30b 100644 --- a/src/index.js +++ b/src/index.js @@ -1,3 +1,5 @@ import { tabController } from './controllers/tab.js'; +import { stationAddListener } from './controllers/stationManager.js'; tabController(); +stationAddListener(); diff --git a/src/views/stationManager.js b/src/views/stationManager.js new file mode 100644 index 000000000..016f03141 --- /dev/null +++ b/src/views/stationManager.js @@ -0,0 +1,7 @@ +import { overTwo, notDuplicate } from '../controllers/validation.js'; + +export const addStation = (name, list) => { + if (overTwo(name) && notDuplicate(name, list)) { + console.log(name, list); + } +}; From 8612acccc60c9ac224f9e9d72bba15ed4b8f34e9 Mon Sep 17 00:00:00 2001 From: yang Date: Mon, 14 Dec 2020 22:37:11 +0900 Subject: [PATCH 08/27] show station list --- docs/README.md | 2 +- index.html | 7 +--- src/controllers/stationManager.js | 29 ++++++++++++----- src/controllers/tab.js | 16 ++++++--- src/index.js | 29 +++++++++++++++-- src/views/stationManager.js | 54 ++++++++++++++++++++++++++++--- src/views/tab.js | 5 ++- src/views/utils.js | 5 +++ 8 files changed, 118 insertions(+), 29 deletions(-) diff --git a/docs/README.md b/docs/README.md index b88492cdb..38b78fa91 100644 --- a/docs/README.md +++ b/docs/README.md @@ -16,7 +16,7 @@ - [x] ์—ญ ์ด๋ฆ„ ์ž…๋ ฅ, ์ถ”๊ฐ€ ๋ฒ„ํŠผ ํ™œ์„ฑํ™” - [x] ์—ญ ์ด๋ฆ„ ์ค‘๋ณต ์ฒดํฌ - [x] ์—ญ ์ด๋ฆ„ 2๊ธ€์ž ์ด์ƒ ์ฒดํฌ -- [ ] ์—ญ ๋“ฑ๋ก์‹œ ํ™”๋ฉด์— ํ‘œ์‹œ +- [x] ์—ญ ๋“ฑ๋ก์‹œ ํ™”๋ฉด์— ํ‘œ์‹œ - [ ] ์—ญ ์‚ญ์ œ ๊ธฐ๋Šฅ `alert`์‚ฌ์šฉ - [ ] ์—ญ ์‚ญ์ œ์‹œ ๋…ธ์„ ์— ์žˆ๋Š”์ง€ ํ™•์ธ diff --git a/index.html b/index.html index 7f1f1aaa7..103fd64f4 100644 --- a/index.html +++ b/index.html @@ -25,12 +25,7 @@

๐Ÿš‰ ์ง€ํ•˜์ฒ  ์—ญ ๋ชฉ๋ก

- - - - - - +
์„ค์ •
asd
diff --git a/src/controllers/stationManager.js b/src/controllers/stationManager.js index 77982ee95..e179550c8 100644 --- a/src/controllers/stationManager.js +++ b/src/controllers/stationManager.js @@ -1,15 +1,28 @@ -import { addStation } from '../views/stationManager.js'; -import { loadData } from './storage.js'; +import { overTwo, notDuplicate } from '../controllers/validation.js'; +import { showAddedStation } from '../views/stationManager.js'; +import { clearFocus } from '../views/utils.js'; -export const stationAddListener = () => { - const stationManagerInput = document.querySelector('#station-name-input'); - const stationAddBtn = document.querySelector('#station-add-button'); - const stationList = ['asdf', 'asdsf', 'qwf']; //localStorage ๋ถˆ๋Ÿฌ์˜ค๊ธฐ +const stationManagerInput = document.querySelector('#station-name-input'); +const stationAddBtn = document.querySelector('#station-add-button'); - stationAddBtn.addEventListener('click', () => addStation(stationManagerInput.value, stationList)); +export const stationAddListener = subwayMap => { + stationAddBtn.addEventListener('click', () => + addNewStation(stationManagerInput.value, subwayMap) + ); stationManagerInput.addEventListener('keydown', e => { if (e.keyCode === 13) { - addStation(stationManagerInput.value, stationList); + addNewStation(stationManagerInput.value, subwayMap); } }); }; + +const addNewStation = (name, subwayMap) => { + if (overTwo(name) && notDuplicate(name, subwayMap.stationList)) { + subwayMap.addStation(name); + subwayMap.saveAll(); + showAddedStation(subwayMap); + } else { + alert('์ž˜๋ชป๋œ ๊ฐ’์ž…๋‹ˆ๋‹ค. ๋‹ค์‹œ ์ž…๋ ฅํ•ด์ฃผ์„ธ์š”.'); + } + clearFocus(stationManagerInput); +}; diff --git a/src/controllers/tab.js b/src/controllers/tab.js index 8511a9cd1..f36fc88df 100644 --- a/src/controllers/tab.js +++ b/src/controllers/tab.js @@ -1,13 +1,19 @@ import { tabManager } from '../views/tab.js'; +import { stationAddListener } from './stationManager.js'; const stationManagerBtn = document.querySelector('#station-manager-button'); const lineManagerBtn = document.querySelector('#line-manager-button'); const sectionManagerBtn = document.querySelector('#section-manager-button'); const mapPrintManagerBtn = document.querySelector('#map-print-manager-button'); -export const tabController = () => { - stationManagerBtn.addEventListener('click', e => tabManager(e.target.value)); - lineManagerBtn.addEventListener('click', e => tabManager(e.target.value)); - sectionManagerBtn.addEventListener('click', e => tabManager(e.target.value)); - mapPrintManagerBtn.addEventListener('click', e => tabManager(e.target.value)); +export const tabController = subwayMap => { + stationManagerBtn.addEventListener('click', e => tabManager(e.target.value, subwayMap)); + lineManagerBtn.addEventListener('click', e => tabManager(e.target.value, subwayMap)); + sectionManagerBtn.addEventListener('click', e => tabManager(e.target.value, subwayMap)); + mapPrintManagerBtn.addEventListener('click', e => tabManager(e.target.value, subwayMap)); + btnAddListener(subwayMap); +}; + +const btnAddListener = subwayMap => { + stationAddListener(subwayMap); }; diff --git a/src/index.js b/src/index.js index 6f44fe30b..0457a6e29 100644 --- a/src/index.js +++ b/src/index.js @@ -1,5 +1,28 @@ import { tabController } from './controllers/tab.js'; -import { stationAddListener } from './controllers/stationManager.js'; +import { saveData, loadData } from './controllers/storage.js'; -tabController(); -stationAddListener(); +export default function SubwayMap() { + this.stationList = loadData('stations'); + this.LineList = loadData('lines'); + + this.addStation = name => { + this.stationList.push(name); + }; + + this.reload = () => { + this.stationList = loadData('stations'); + this.LineList = loadData('lines'); + }; + + this.saveAll = () => { + saveData('stations', this.stationList); + saveData('lines', this.LineList); + }; +} + +const init = subwayMap => { + tabController(subwayMap); +}; + +const subwayMap = new SubwayMap(); +init(subwayMap); diff --git a/src/views/stationManager.js b/src/views/stationManager.js index 016f03141..f7856a72b 100644 --- a/src/views/stationManager.js +++ b/src/views/stationManager.js @@ -1,7 +1,51 @@ -import { overTwo, notDuplicate } from '../controllers/validation.js'; +import { makeElement, appendElements } from './utils.js'; -export const addStation = (name, list) => { - if (overTwo(name) && notDuplicate(name, list)) { - console.log(name, list); - } +export const showAddedStation = subwayMap => { + const stationTbody = document.querySelector('#station-manager-screen table tbody'); + let addedStations = ''; + subwayMap.stationList.forEach(name => { + const stationTr = makeElement({ + tag: 'tr', + }); + const nameTd = makeElement({ + tag: 'td', + innerHTML: name, + }); + const btnTd = makeElement({ + tag: 'td', + }); + const deleteBtn = makeElement({ + tag: 'button', + innerHTML: '์‚ญ์ œ', + dataName: 'station-name', + dataValue: name, + }); + appendElements([deleteBtn], btnTd); + appendElements([nameTd, btnTd], stationTr); + addedStations += stationTr.outerHTML; + }); + stationTbody.innerHTML = addedStations; +}; + +export const showNewStation = name => { + const stationTbody = document.querySelector('#station-manager-screen table tbody'); + const stationTr = makeElement({ + tag: 'tr', + }); + const nameTd = makeElement({ + tag: 'td', + innerHTML: name, + }); + const btnTd = makeElement({ + tag: 'td', + }); + const deleteBtn = makeElement({ + tag: 'button', + innerHTML: '์‚ญ์ œ', + dataName: 'station-name', + dataValue: name, + }); + appendElements([deleteBtn], btnTd); + appendElements([nameTd, btnTd], stationTr); + appendElements([stationTr], stationTbody); }; diff --git a/src/views/tab.js b/src/views/tab.js index eef71e4a0..1d56db60c 100644 --- a/src/views/tab.js +++ b/src/views/tab.js @@ -1,3 +1,4 @@ +import { showAddedStation } from './stationManager.js'; const stationManagerScreen = document.querySelector('#station-manager-screen'); const lineManagerScreen = document.querySelector('#line-manager-screen'); const sectionManagerScreen = document.querySelector('#section-manager-screen'); @@ -10,7 +11,7 @@ const tabList = [ mapPrintManagerScreen, ]; -export const tabManager = value => { +export const tabManager = (value, subwayMap) => { for (let i = 0; i < tabList.length; i++) { if (i == parseInt(value)) { tabList[i].classList.add('active'); @@ -18,4 +19,6 @@ export const tabManager = value => { tabList[i].classList.remove('active'); } } + subwayMap.reload(); + showAddedStation(subwayMap); }; diff --git a/src/views/utils.js b/src/views/utils.js index c9e357c81..f56bf3ab6 100644 --- a/src/views/utils.js +++ b/src/views/utils.js @@ -23,3 +23,8 @@ export const appendElements = (elements, parent) => { parent.appendChild(element); }); }; + +export const clearFocus = targetInput => { + targetInput.value = ''; + targetInput.focus(); +}; From b6d4e48e5b14242969d5190ceea81473cf7d7c0e Mon Sep 17 00:00:00 2001 From: yang Date: Tue, 15 Dec 2020 00:19:13 +0900 Subject: [PATCH 09/27] delete station --- docs/README.md | 3 ++- src/controllers/stationManager.js | 8 +++++++- src/controllers/tab.js | 4 ---- src/index.js | 17 +++++++++++++++-- src/views/stationManager.js | 1 + src/views/tab.js | 1 + 6 files changed, 26 insertions(+), 8 deletions(-) diff --git a/docs/README.md b/docs/README.md index 38b78fa91..1b4b02902 100644 --- a/docs/README.md +++ b/docs/README.md @@ -17,7 +17,8 @@ - [x] ์—ญ ์ด๋ฆ„ ์ค‘๋ณต ์ฒดํฌ - [x] ์—ญ ์ด๋ฆ„ 2๊ธ€์ž ์ด์ƒ ์ฒดํฌ - [x] ์—ญ ๋“ฑ๋ก์‹œ ํ™”๋ฉด์— ํ‘œ์‹œ -- [ ] ์—ญ ์‚ญ์ œ ๊ธฐ๋Šฅ `alert`์‚ฌ์šฉ +- [x] ์—ญ ๊ด€๋ฆฌ๋กœ ๋“ค์–ด๊ฐˆ ๋•Œ ์ด์ „ ๋ชฉ๋ก ํ‘œ์‹œ +- [x] ์—ญ ์‚ญ์ œ ๊ธฐ๋Šฅ `alert`์‚ฌ์šฉ - [ ] ์—ญ ์‚ญ์ œ์‹œ ๋…ธ์„ ์— ์žˆ๋Š”์ง€ ํ™•์ธ 2. ๋…ธ์„  ๊ด€๋ฆฌ diff --git a/src/controllers/stationManager.js b/src/controllers/stationManager.js index e179550c8..9379fb997 100644 --- a/src/controllers/stationManager.js +++ b/src/controllers/stationManager.js @@ -19,10 +19,16 @@ export const stationAddListener = subwayMap => { const addNewStation = (name, subwayMap) => { if (overTwo(name) && notDuplicate(name, subwayMap.stationList)) { subwayMap.addStation(name); - subwayMap.saveAll(); showAddedStation(subwayMap); } else { alert('์ž˜๋ชป๋œ ๊ฐ’์ž…๋‹ˆ๋‹ค. ๋‹ค์‹œ ์ž…๋ ฅํ•ด์ฃผ์„ธ์š”.'); } clearFocus(stationManagerInput); }; + +export const deleteStation = (name, subwayMap) => { + if (confirm('์ •๋ง๋กœ ์‚ญ์ œํ•˜์‹œ๊ฒ ์Šต๋‹ˆ๊นŒ?')) { + subwayMap.delStation(name); + showAddedStation(subwayMap); + } +}; diff --git a/src/controllers/tab.js b/src/controllers/tab.js index f36fc88df..ea510da74 100644 --- a/src/controllers/tab.js +++ b/src/controllers/tab.js @@ -11,9 +11,5 @@ export const tabController = subwayMap => { lineManagerBtn.addEventListener('click', e => tabManager(e.target.value, subwayMap)); sectionManagerBtn.addEventListener('click', e => tabManager(e.target.value, subwayMap)); mapPrintManagerBtn.addEventListener('click', e => tabManager(e.target.value, subwayMap)); - btnAddListener(subwayMap); -}; - -const btnAddListener = subwayMap => { stationAddListener(subwayMap); }; diff --git a/src/index.js b/src/index.js index 0457a6e29..7d71854d4 100644 --- a/src/index.js +++ b/src/index.js @@ -1,5 +1,6 @@ -import { tabController } from './controllers/tab.js'; +import { deleteStation } from './controllers/stationManager.js'; import { saveData, loadData } from './controllers/storage.js'; +import { tabController } from './controllers/tab.js'; export default function SubwayMap() { this.stationList = loadData('stations'); @@ -7,6 +8,13 @@ export default function SubwayMap() { this.addStation = name => { this.stationList.push(name); + this.saveAll(); + }; + + this.delStation = name => { + const index = this.stationList.findIndex(stationName => stationName === name); + this.stationList.splice(index, 1); + this.saveAll(); }; this.reload = () => { @@ -19,10 +27,15 @@ export default function SubwayMap() { saveData('lines', this.LineList); }; } - const init = subwayMap => { tabController(subwayMap); }; const subwayMap = new SubwayMap(); +const newBtnAddListener = event => { + if (event.target.classList.contains('station-delete-button')) { + deleteStation(event.target.dataset.stationName, subwayMap); + } +}; +document.body.addEventListener('click', newBtnAddListener); init(subwayMap); diff --git a/src/views/stationManager.js b/src/views/stationManager.js index f7856a72b..e55ac3bee 100644 --- a/src/views/stationManager.js +++ b/src/views/stationManager.js @@ -16,6 +16,7 @@ export const showAddedStation = subwayMap => { }); const deleteBtn = makeElement({ tag: 'button', + elementClass: 'station-delete-button', innerHTML: '์‚ญ์ œ', dataName: 'station-name', dataValue: name, diff --git a/src/views/tab.js b/src/views/tab.js index 1d56db60c..82e5e862c 100644 --- a/src/views/tab.js +++ b/src/views/tab.js @@ -1,4 +1,5 @@ import { showAddedStation } from './stationManager.js'; + const stationManagerScreen = document.querySelector('#station-manager-screen'); const lineManagerScreen = document.querySelector('#line-manager-screen'); const sectionManagerScreen = document.querySelector('#section-manager-screen'); From d21e6d9d7c8fdbe5ed3a67c7b555e48cbe96d0b9 Mon Sep 17 00:00:00 2001 From: yang Date: Tue, 15 Dec 2020 00:53:02 +0900 Subject: [PATCH 10/27] input, add Activation --- docs/README.md | 3 ++- index.html | 2 +- src/controllers/lineManager.js | 23 +++++++++++++++++++++++ src/controllers/stationManager.js | 12 +++++------- src/controllers/tab.js | 2 ++ src/index.js | 9 ++++++--- 6 files changed, 39 insertions(+), 12 deletions(-) create mode 100644 src/controllers/lineManager.js diff --git a/docs/README.md b/docs/README.md index 1b4b02902..e786eddc2 100644 --- a/docs/README.md +++ b/docs/README.md @@ -24,7 +24,8 @@ 2. ๋…ธ์„  ๊ด€๋ฆฌ - [x] ๋…ธ์„  ๊ด€๋ฆฌ ๋ฒ„ํŠผ ํด๋ฆญ์‹œ ๋…ธ์„  ์ด๋ฆ„ ์ž…๋ ฅ, ์ข…์  ์„ ํƒ, ๋…ธ์„  ๋ชฉ๋ก ๋ณด์—ฌ์ฃผ๊ธฐ -- [ ] ๋…ธ์„  ์ด๋ฆ„ ์ž…๋ ฅ, ์ถ”๊ฐ€ ๋ฒ„ํŠผ ํ™œ์„ฑํ™” +- [x] ๋…ธ์„  ์ด๋ฆ„ ์ž…๋ ฅ, ์ถ”๊ฐ€ ๋ฒ„ํŠผ ํ™œ์„ฑํ™” +- [ ] select์— ์—ญ์ด๋ฆ„ ๊ฐ€์ ธ์˜ค๊ธฐ - [ ] ์ข…์  ๋ฆฌ์ŠคํŠธ ๋ถˆ๋Ÿฌ์˜ค๊ธฐ - [ ] ๋…ธ์„  ์ด๋ฆ„ ์ค‘๋ณต ์ฒดํฌ - [ ] ๋…ธ์„  ๋“ฑ๋ก์‹œ ํ™”๋ฉด์— ํ‘œ์‹œ diff --git a/index.html b/index.html index 103fd64f4..fbe8a69ea 100644 --- a/index.html +++ b/index.html @@ -43,7 +43,7 @@

๐Ÿš‰ ์ง€ํ•˜์ฒ  ์—ญ ๋ชฉ๋ก

- +

๐Ÿš‰ ๋…ธ์„  ๋ชฉ๋ก

diff --git a/src/controllers/lineManager.js b/src/controllers/lineManager.js new file mode 100644 index 000000000..16d8714bb --- /dev/null +++ b/src/controllers/lineManager.js @@ -0,0 +1,23 @@ +import { overTwo, notDuplicate } from '../controllers/validation.js'; +import { showAddedStation } from '../views/stationManager.js'; +import { clearFocus } from '../views/utils.js'; + +const lineNameInput = document.querySelector('#line-name-input'); +const lineStartSelector = document.querySelector('#line-start-station-selector'); +const lineEndSelector = document.querySelector('#line-end-station-selector'); +const lineAddBtn = document.querySelector('#line-add-button'); + +export const lineAddListener = subwayMap => { + lineAddBtn.addEventListener('click', () => + addNewLine(lineNameInput.value, lineStartSelector.value, lineEndSelector.value, subwayMap) + ); + lineNameInput.addEventListener('keydown', e => { + if (e.keyCode === 13) { + addNewLine(lineNameInput.value, lineStartSelector.value, lineEndSelector.value, subwayMap); + } + }); +}; + +const addNewLine = (name, start, end, subwayMap) => { + clearFocus(lineNameInput); +}; diff --git a/src/controllers/stationManager.js b/src/controllers/stationManager.js index 9379fb997..8cd1c2292 100644 --- a/src/controllers/stationManager.js +++ b/src/controllers/stationManager.js @@ -2,16 +2,14 @@ import { overTwo, notDuplicate } from '../controllers/validation.js'; import { showAddedStation } from '../views/stationManager.js'; import { clearFocus } from '../views/utils.js'; -const stationManagerInput = document.querySelector('#station-name-input'); +const stationNameInput = document.querySelector('#station-name-input'); const stationAddBtn = document.querySelector('#station-add-button'); export const stationAddListener = subwayMap => { - stationAddBtn.addEventListener('click', () => - addNewStation(stationManagerInput.value, subwayMap) - ); - stationManagerInput.addEventListener('keydown', e => { + stationAddBtn.addEventListener('click', () => addNewStation(stationNameInput.value, subwayMap)); + stationNameInput.addEventListener('keydown', e => { if (e.keyCode === 13) { - addNewStation(stationManagerInput.value, subwayMap); + addNewStation(stationNameInput.value, subwayMap); } }); }; @@ -23,7 +21,7 @@ const addNewStation = (name, subwayMap) => { } else { alert('์ž˜๋ชป๋œ ๊ฐ’์ž…๋‹ˆ๋‹ค. ๋‹ค์‹œ ์ž…๋ ฅํ•ด์ฃผ์„ธ์š”.'); } - clearFocus(stationManagerInput); + clearFocus(stationNameInput); }; export const deleteStation = (name, subwayMap) => { diff --git a/src/controllers/tab.js b/src/controllers/tab.js index ea510da74..bf52ba2ea 100644 --- a/src/controllers/tab.js +++ b/src/controllers/tab.js @@ -1,5 +1,6 @@ import { tabManager } from '../views/tab.js'; import { stationAddListener } from './stationManager.js'; +import { lineAddListener } from './lineManager.js'; const stationManagerBtn = document.querySelector('#station-manager-button'); const lineManagerBtn = document.querySelector('#line-manager-button'); @@ -12,4 +13,5 @@ export const tabController = subwayMap => { sectionManagerBtn.addEventListener('click', e => tabManager(e.target.value, subwayMap)); mapPrintManagerBtn.addEventListener('click', e => tabManager(e.target.value, subwayMap)); stationAddListener(subwayMap); + lineAddListener(subwayMap); }; diff --git a/src/index.js b/src/index.js index 7d71854d4..293070625 100644 --- a/src/index.js +++ b/src/index.js @@ -8,13 +8,13 @@ export default function SubwayMap() { this.addStation = name => { this.stationList.push(name); - this.saveAll(); + this.saveStation(); }; this.delStation = name => { const index = this.stationList.findIndex(stationName => stationName === name); this.stationList.splice(index, 1); - this.saveAll(); + this.saveStation(); }; this.reload = () => { @@ -22,8 +22,11 @@ export default function SubwayMap() { this.LineList = loadData('lines'); }; - this.saveAll = () => { + this.saveStation = () => { saveData('stations', this.stationList); + }; + + this.saveLine = () => { saveData('lines', this.LineList); }; } From 055a808eeba039e0988617d24d89dab0b46b16e8 Mon Sep 17 00:00:00 2001 From: yang Date: Tue, 15 Dec 2020 01:09:28 +0900 Subject: [PATCH 11/27] load select option --- docs/README.md | 1 - index.html | 2 -- src/views/lineManager.js | 17 +++++++++++++++++ src/views/tab.js | 2 ++ src/views/utils.js | 2 ++ 5 files changed, 21 insertions(+), 3 deletions(-) create mode 100644 src/views/lineManager.js diff --git a/docs/README.md b/docs/README.md index e786eddc2..086677aba 100644 --- a/docs/README.md +++ b/docs/README.md @@ -25,7 +25,6 @@ - [x] ๋…ธ์„  ๊ด€๋ฆฌ ๋ฒ„ํŠผ ํด๋ฆญ์‹œ ๋…ธ์„  ์ด๋ฆ„ ์ž…๋ ฅ, ์ข…์  ์„ ํƒ, ๋…ธ์„  ๋ชฉ๋ก ๋ณด์—ฌ์ฃผ๊ธฐ - [x] ๋…ธ์„  ์ด๋ฆ„ ์ž…๋ ฅ, ์ถ”๊ฐ€ ๋ฒ„ํŠผ ํ™œ์„ฑํ™” -- [ ] select์— ์—ญ์ด๋ฆ„ ๊ฐ€์ ธ์˜ค๊ธฐ - [ ] ์ข…์  ๋ฆฌ์ŠคํŠธ ๋ถˆ๋Ÿฌ์˜ค๊ธฐ - [ ] ๋…ธ์„  ์ด๋ฆ„ ์ค‘๋ณต ์ฒดํฌ - [ ] ๋…ธ์„  ๋“ฑ๋ก์‹œ ํ™”๋ฉด์— ํ‘œ์‹œ diff --git a/index.html b/index.html index fbe8a69ea..4f6be3f87 100644 --- a/index.html +++ b/index.html @@ -34,13 +34,11 @@

๐Ÿš‰ ์ง€ํ•˜์ฒ  ์—ญ ๋ชฉ๋ก

์ƒํ–‰ ์ข…์ 
ํ•˜ํ–‰ ์ข…์ 
diff --git a/src/views/lineManager.js b/src/views/lineManager.js new file mode 100644 index 000000000..27c447076 --- /dev/null +++ b/src/views/lineManager.js @@ -0,0 +1,17 @@ +import { makeElement } from './utils.js'; + +export const showStationSelector = subwayMap => { + const lineStartSelector = document.querySelector('#line-start-station-selector'); + const lineEndSelector = document.querySelector('#line-end-station-selector'); + let stationsHTML = ''; + subwayMap.stationList.forEach(name => { + const stationOption = makeElement({ + tag: 'option', + value: name, + innerHTML: name, + }); + stationsHTML += stationOption.outerHTML; + }); + lineStartSelector.innerHTML = stationsHTML; + lineEndSelector.innerHTML = stationsHTML; +}; diff --git a/src/views/tab.js b/src/views/tab.js index 82e5e862c..3539f47c3 100644 --- a/src/views/tab.js +++ b/src/views/tab.js @@ -1,4 +1,5 @@ import { showAddedStation } from './stationManager.js'; +import { showStationSelector } from './lineManager.js'; const stationManagerScreen = document.querySelector('#station-manager-screen'); const lineManagerScreen = document.querySelector('#line-manager-screen'); @@ -22,4 +23,5 @@ export const tabManager = (value, subwayMap) => { } subwayMap.reload(); showAddedStation(subwayMap); + showStationSelector(subwayMap); }; diff --git a/src/views/utils.js b/src/views/utils.js index f56bf3ab6..bdee5c1ad 100644 --- a/src/views/utils.js +++ b/src/views/utils.js @@ -2,6 +2,7 @@ export const makeElement = ({ tag, id, elementClass, + value, innerHTML, placeholder, styles, @@ -11,6 +12,7 @@ export const makeElement = ({ const element = document.createElement(tag); if (id) element.id = id; if (elementClass) element.classList.add(elementClass); + if (value) element.value = value; if (innerHTML) element.innerHTML = innerHTML; if (placeholder) element.placeholder = placeholder; if (styles) element.style.cssText = styles; From 3f8dd73b5fe7d4a22078c0237f59cf0aea2aa1cc Mon Sep 17 00:00:00 2001 From: yang Date: Tue, 15 Dec 2020 01:34:37 +0900 Subject: [PATCH 12/27] check line name duplication --- docs/README.md | 4 ++-- src/controllers/lineManager.js | 9 +++++++-- src/controllers/stationManager.js | 4 ++-- src/controllers/validation.js | 9 ++++++++- src/index.js | 8 +++++--- 5 files changed, 24 insertions(+), 10 deletions(-) diff --git a/docs/README.md b/docs/README.md index 086677aba..d91da8589 100644 --- a/docs/README.md +++ b/docs/README.md @@ -25,8 +25,8 @@ - [x] ๋…ธ์„  ๊ด€๋ฆฌ ๋ฒ„ํŠผ ํด๋ฆญ์‹œ ๋…ธ์„  ์ด๋ฆ„ ์ž…๋ ฅ, ์ข…์  ์„ ํƒ, ๋…ธ์„  ๋ชฉ๋ก ๋ณด์—ฌ์ฃผ๊ธฐ - [x] ๋…ธ์„  ์ด๋ฆ„ ์ž…๋ ฅ, ์ถ”๊ฐ€ ๋ฒ„ํŠผ ํ™œ์„ฑํ™” -- [ ] ์ข…์  ๋ฆฌ์ŠคํŠธ ๋ถˆ๋Ÿฌ์˜ค๊ธฐ -- [ ] ๋…ธ์„  ์ด๋ฆ„ ์ค‘๋ณต ์ฒดํฌ +- [x] ์ข…์  ๋ฆฌ์ŠคํŠธ ๋ถˆ๋Ÿฌ์˜ค๊ธฐ +- [x] ๋…ธ์„  ์ด๋ฆ„ ์ค‘๋ณต ์ฒดํฌ - [ ] ๋…ธ์„  ๋“ฑ๋ก์‹œ ํ™”๋ฉด์— ํ‘œ์‹œ - [ ] ๋…ธ์„  ์‚ญ์ œ ๊ธฐ๋Šฅ `alert`์‚ฌ์šฉ diff --git a/src/controllers/lineManager.js b/src/controllers/lineManager.js index 16d8714bb..d573259dc 100644 --- a/src/controllers/lineManager.js +++ b/src/controllers/lineManager.js @@ -1,5 +1,4 @@ -import { overTwo, notDuplicate } from '../controllers/validation.js'; -import { showAddedStation } from '../views/stationManager.js'; +import { notDuplicateLine } from '../controllers/validation.js'; import { clearFocus } from '../views/utils.js'; const lineNameInput = document.querySelector('#line-name-input'); @@ -19,5 +18,11 @@ export const lineAddListener = subwayMap => { }; const addNewLine = (name, start, end, subwayMap) => { + if (notDuplicateLine(name, subwayMap.lineList) && start !== end) { + // subwayMap.addStation(name); + // showAddedStation(subwayMap); + } else { + alert('์ž˜๋ชป๋œ ๊ฐ’์ž…๋‹ˆ๋‹ค. ๋‹ค์‹œ ์ž…๋ ฅํ•ด์ฃผ์„ธ์š”.'); + } clearFocus(lineNameInput); }; diff --git a/src/controllers/stationManager.js b/src/controllers/stationManager.js index 8cd1c2292..7498c6098 100644 --- a/src/controllers/stationManager.js +++ b/src/controllers/stationManager.js @@ -1,4 +1,4 @@ -import { overTwo, notDuplicate } from '../controllers/validation.js'; +import { overTwo, notDuplicateStation } from '../controllers/validation.js'; import { showAddedStation } from '../views/stationManager.js'; import { clearFocus } from '../views/utils.js'; @@ -15,7 +15,7 @@ export const stationAddListener = subwayMap => { }; const addNewStation = (name, subwayMap) => { - if (overTwo(name) && notDuplicate(name, subwayMap.stationList)) { + if (overTwo(name) && notDuplicateStation(name, subwayMap.stationList)) { subwayMap.addStation(name); showAddedStation(subwayMap); } else { diff --git a/src/controllers/validation.js b/src/controllers/validation.js index 86a0f9ec8..a29b4fc80 100644 --- a/src/controllers/validation.js +++ b/src/controllers/validation.js @@ -2,6 +2,13 @@ export const overTwo = name => { return name.length >= 2; }; -export const notDuplicate = (name, list) => { +export const notDuplicateStation = (name, list) => { return !list.includes(name); }; + +export const notDuplicateLine = (name, list) => { + list.forEach(element => { + if (element.name === name) return false; + }); + return true; +}; diff --git a/src/index.js b/src/index.js index 293070625..6ed209cb7 100644 --- a/src/index.js +++ b/src/index.js @@ -1,10 +1,11 @@ import { deleteStation } from './controllers/stationManager.js'; import { saveData, loadData } from './controllers/storage.js'; import { tabController } from './controllers/tab.js'; +import { Line } from './models/Line.js'; export default function SubwayMap() { this.stationList = loadData('stations'); - this.LineList = loadData('lines'); + this.lineList = loadData('lines'); this.addStation = name => { this.stationList.push(name); @@ -19,7 +20,7 @@ export default function SubwayMap() { this.reload = () => { this.stationList = loadData('stations'); - this.LineList = loadData('lines'); + this.lineList = loadData('lines'); }; this.saveStation = () => { @@ -27,9 +28,10 @@ export default function SubwayMap() { }; this.saveLine = () => { - saveData('lines', this.LineList); + saveData('lines', this.lineList); }; } + const init = subwayMap => { tabController(subwayMap); }; From 00a21381bc7ee8d118f7c0d9d1998f5ba455b0f8 Mon Sep 17 00:00:00 2001 From: yang Date: Tue, 15 Dec 2020 02:12:04 +0900 Subject: [PATCH 13/27] show line list --- docs/README.md | 3 ++- index.html | 6 ------ src/controllers/lineManager.js | 5 +++-- src/controllers/validation.js | 6 +++--- src/index.js | 7 ++++++- src/models/Line.js | 2 +- src/views/lineManager.js | 38 +++++++++++++++++++++++++++++++++- src/views/stationManager.js | 23 -------------------- src/views/tab.js | 3 ++- 9 files changed, 54 insertions(+), 39 deletions(-) diff --git a/docs/README.md b/docs/README.md index d91da8589..fe1595b97 100644 --- a/docs/README.md +++ b/docs/README.md @@ -27,7 +27,8 @@ - [x] ๋…ธ์„  ์ด๋ฆ„ ์ž…๋ ฅ, ์ถ”๊ฐ€ ๋ฒ„ํŠผ ํ™œ์„ฑํ™” - [x] ์ข…์  ๋ฆฌ์ŠคํŠธ ๋ถˆ๋Ÿฌ์˜ค๊ธฐ - [x] ๋…ธ์„  ์ด๋ฆ„ ์ค‘๋ณต ์ฒดํฌ -- [ ] ๋…ธ์„  ๋“ฑ๋ก์‹œ ํ™”๋ฉด์— ํ‘œ์‹œ +- [x] ๋…ธ์„  ๋“ฑ๋ก์‹œ ํ™”๋ฉด์— ํ‘œ์‹œ +- [x] ๋…ธ์„  ๊ด€๋ฆฌ๋กœ ๋“ค์–ด๊ฐˆ ๋•Œ ์ด์ „ ๋ชฉ๋ก ํ‘œ์‹œ - [ ] ๋…ธ์„  ์‚ญ์ œ ๊ธฐ๋Šฅ `alert`์‚ฌ์šฉ 3. ๊ตฌ๊ฐ„ ๊ด€๋ฆฌ diff --git a/index.html b/index.html index 4f6be3f87..0c4d57200 100644 --- a/index.html +++ b/index.html @@ -53,12 +53,6 @@

๐Ÿš‰ ๋…ธ์„  ๋ชฉ๋ก

 - - - - - -
asdasdfasdf
diff --git a/src/controllers/lineManager.js b/src/controllers/lineManager.js index d573259dc..8e3701cff 100644 --- a/src/controllers/lineManager.js +++ b/src/controllers/lineManager.js @@ -1,5 +1,6 @@ import { notDuplicateLine } from '../controllers/validation.js'; import { clearFocus } from '../views/utils.js'; +import { showAddedLine } from '../views/lineManager.js'; const lineNameInput = document.querySelector('#line-name-input'); const lineStartSelector = document.querySelector('#line-start-station-selector'); @@ -19,8 +20,8 @@ export const lineAddListener = subwayMap => { const addNewLine = (name, start, end, subwayMap) => { if (notDuplicateLine(name, subwayMap.lineList) && start !== end) { - // subwayMap.addStation(name); - // showAddedStation(subwayMap); + subwayMap.addLine(name, start, end); + showAddedLine(subwayMap); } else { alert('์ž˜๋ชป๋œ ๊ฐ’์ž…๋‹ˆ๋‹ค. ๋‹ค์‹œ ์ž…๋ ฅํ•ด์ฃผ์„ธ์š”.'); } diff --git a/src/controllers/validation.js b/src/controllers/validation.js index a29b4fc80..b868d7abf 100644 --- a/src/controllers/validation.js +++ b/src/controllers/validation.js @@ -7,8 +7,8 @@ export const notDuplicateStation = (name, list) => { }; export const notDuplicateLine = (name, list) => { - list.forEach(element => { - if (element.name === name) return false; - }); + for (const element of list) { + if (element.name == name) return false; + } return true; }; diff --git a/src/index.js b/src/index.js index 6ed209cb7..d5c082161 100644 --- a/src/index.js +++ b/src/index.js @@ -1,7 +1,7 @@ import { deleteStation } from './controllers/stationManager.js'; import { saveData, loadData } from './controllers/storage.js'; import { tabController } from './controllers/tab.js'; -import { Line } from './models/Line.js'; +import Line from './models/Line.js'; export default function SubwayMap() { this.stationList = loadData('stations'); @@ -18,6 +18,11 @@ export default function SubwayMap() { this.saveStation(); }; + this.addLine = (name, start, end) => { + this.lineList.push(new Line(name, start, end)); + this.saveLine(); + }; + this.reload = () => { this.stationList = loadData('stations'); this.lineList = loadData('lines'); diff --git a/src/models/Line.js b/src/models/Line.js index 59c39874c..57acc223b 100644 --- a/src/models/Line.js +++ b/src/models/Line.js @@ -1,4 +1,4 @@ export default function Line(name, start, end) { this.name = name; - this.lineList = [start, end]; + this.list = [start, end]; } diff --git a/src/views/lineManager.js b/src/views/lineManager.js index 27c447076..d903342cb 100644 --- a/src/views/lineManager.js +++ b/src/views/lineManager.js @@ -1,4 +1,4 @@ -import { makeElement } from './utils.js'; +import { makeElement, appendElements } from './utils.js'; export const showStationSelector = subwayMap => { const lineStartSelector = document.querySelector('#line-start-station-selector'); @@ -15,3 +15,39 @@ export const showStationSelector = subwayMap => { lineStartSelector.innerHTML = stationsHTML; lineEndSelector.innerHTML = stationsHTML; }; + +export const showAddedLine = subwayMap => { + const lineTbody = document.querySelector('#line-manager-screen table tbody'); + let addedLines = ''; + subwayMap.lineList.forEach(element => { + const lineTr = makeElement({ + tag: 'tr', + }); + const nameTd = makeElement({ + tag: 'td', + innerHTML: element.name, + }); + const startTd = makeElement({ + tag: 'td', + innerHTML: element.list[0], + }); + const endTd = makeElement({ + tag: 'td', + innerHTML: element.list[element.list.length - 1], + }); + const btnTd = makeElement({ + tag: 'td', + }); + const deleteBtn = makeElement({ + tag: 'button', + elementClass: 'line-delete-button', + innerHTML: '์‚ญ์ œ', + dataName: 'line-name', + dataValue: element.name, + }); + appendElements([deleteBtn], btnTd); + appendElements([nameTd, startTd, endTd, btnTd], lineTr); + addedLines += lineTr.outerHTML; + }); + lineTbody.innerHTML = addedLines; +}; diff --git a/src/views/stationManager.js b/src/views/stationManager.js index e55ac3bee..724dcecac 100644 --- a/src/views/stationManager.js +++ b/src/views/stationManager.js @@ -27,26 +27,3 @@ export const showAddedStation = subwayMap => { }); stationTbody.innerHTML = addedStations; }; - -export const showNewStation = name => { - const stationTbody = document.querySelector('#station-manager-screen table tbody'); - const stationTr = makeElement({ - tag: 'tr', - }); - const nameTd = makeElement({ - tag: 'td', - innerHTML: name, - }); - const btnTd = makeElement({ - tag: 'td', - }); - const deleteBtn = makeElement({ - tag: 'button', - innerHTML: '์‚ญ์ œ', - dataName: 'station-name', - dataValue: name, - }); - appendElements([deleteBtn], btnTd); - appendElements([nameTd, btnTd], stationTr); - appendElements([stationTr], stationTbody); -}; diff --git a/src/views/tab.js b/src/views/tab.js index 3539f47c3..acb37e08c 100644 --- a/src/views/tab.js +++ b/src/views/tab.js @@ -1,5 +1,5 @@ import { showAddedStation } from './stationManager.js'; -import { showStationSelector } from './lineManager.js'; +import { showStationSelector, showAddedLine } from './lineManager.js'; const stationManagerScreen = document.querySelector('#station-manager-screen'); const lineManagerScreen = document.querySelector('#line-manager-screen'); @@ -23,5 +23,6 @@ export const tabManager = (value, subwayMap) => { } subwayMap.reload(); showAddedStation(subwayMap); + showAddedLine(subwayMap); showStationSelector(subwayMap); }; From df6c301503389fe5ddfd96d6ae81c4b31b831d25 Mon Sep 17 00:00:00 2001 From: yang Date: Tue, 15 Dec 2020 02:37:00 +0900 Subject: [PATCH 14/27] delete line --- docs/README.md | 2 +- src/controllers/lineManager.js | 7 +++++++ src/index.js | 10 ++++++++++ 3 files changed, 18 insertions(+), 1 deletion(-) diff --git a/docs/README.md b/docs/README.md index fe1595b97..035aab1d4 100644 --- a/docs/README.md +++ b/docs/README.md @@ -29,7 +29,7 @@ - [x] ๋…ธ์„  ์ด๋ฆ„ ์ค‘๋ณต ์ฒดํฌ - [x] ๋…ธ์„  ๋“ฑ๋ก์‹œ ํ™”๋ฉด์— ํ‘œ์‹œ - [x] ๋…ธ์„  ๊ด€๋ฆฌ๋กœ ๋“ค์–ด๊ฐˆ ๋•Œ ์ด์ „ ๋ชฉ๋ก ํ‘œ์‹œ -- [ ] ๋…ธ์„  ์‚ญ์ œ ๊ธฐ๋Šฅ `alert`์‚ฌ์šฉ +- [x] ๋…ธ์„  ์‚ญ์ œ ๊ธฐ๋Šฅ `alert`์‚ฌ์šฉ 3. ๊ตฌ๊ฐ„ ๊ด€๋ฆฌ diff --git a/src/controllers/lineManager.js b/src/controllers/lineManager.js index 8e3701cff..c80474a7a 100644 --- a/src/controllers/lineManager.js +++ b/src/controllers/lineManager.js @@ -27,3 +27,10 @@ const addNewLine = (name, start, end, subwayMap) => { } clearFocus(lineNameInput); }; + +export const deleteLine = (name, subwayMap) => { + if (confirm('์ •๋ง๋กœ ์‚ญ์ œํ•˜์‹œ๊ฒ ์Šต๋‹ˆ๊นŒ?')) { + subwayMap.delLine(name); + showAddedLine(subwayMap); + } +}; diff --git a/src/index.js b/src/index.js index d5c082161..732c73e36 100644 --- a/src/index.js +++ b/src/index.js @@ -1,4 +1,5 @@ import { deleteStation } from './controllers/stationManager.js'; +import { deleteLine } from './controllers/lineManager.js'; import { saveData, loadData } from './controllers/storage.js'; import { tabController } from './controllers/tab.js'; import Line from './models/Line.js'; @@ -23,6 +24,12 @@ export default function SubwayMap() { this.saveLine(); }; + this.delLine = name => { + const index = this.lineList.findIndex(element => element.name === name); + this.lineList.splice(index, 1); + this.saveLine(); + }; + this.reload = () => { this.stationList = loadData('stations'); this.lineList = loadData('lines'); @@ -46,6 +53,9 @@ const newBtnAddListener = event => { if (event.target.classList.contains('station-delete-button')) { deleteStation(event.target.dataset.stationName, subwayMap); } + if (event.target.classList.contains('line-delete-button')) { + deleteLine(event.target.dataset.lineName, subwayMap); + } }; document.body.addEventListener('click', newBtnAddListener); init(subwayMap); From 8c79611410b29531e8a0e86c8c060112a6a76883 Mon Sep 17 00:00:00 2001 From: yang Date: Tue, 15 Dec 2020 02:48:46 +0900 Subject: [PATCH 15/27] alert when station in line --- docs/README.md | 2 +- src/controllers/stationManager.js | 10 +++++++--- src/controllers/validation.js | 11 ++++++++++- 3 files changed, 18 insertions(+), 5 deletions(-) diff --git a/docs/README.md b/docs/README.md index 035aab1d4..f73bff27d 100644 --- a/docs/README.md +++ b/docs/README.md @@ -19,7 +19,7 @@ - [x] ์—ญ ๋“ฑ๋ก์‹œ ํ™”๋ฉด์— ํ‘œ์‹œ - [x] ์—ญ ๊ด€๋ฆฌ๋กœ ๋“ค์–ด๊ฐˆ ๋•Œ ์ด์ „ ๋ชฉ๋ก ํ‘œ์‹œ - [x] ์—ญ ์‚ญ์ œ ๊ธฐ๋Šฅ `alert`์‚ฌ์šฉ -- [ ] ์—ญ ์‚ญ์ œ์‹œ ๋…ธ์„ ์— ์žˆ๋Š”์ง€ ํ™•์ธ +- [x] ์—ญ ์‚ญ์ œ์‹œ ๋…ธ์„ ์— ์žˆ๋Š”์ง€ ํ™•์ธ 2. ๋…ธ์„  ๊ด€๋ฆฌ diff --git a/src/controllers/stationManager.js b/src/controllers/stationManager.js index 7498c6098..d514b96f2 100644 --- a/src/controllers/stationManager.js +++ b/src/controllers/stationManager.js @@ -1,4 +1,4 @@ -import { overTwo, notDuplicateStation } from '../controllers/validation.js'; +import { overTwo, notDuplicateStation, stationNotInLine } from '../controllers/validation.js'; import { showAddedStation } from '../views/stationManager.js'; import { clearFocus } from '../views/utils.js'; @@ -26,7 +26,11 @@ const addNewStation = (name, subwayMap) => { export const deleteStation = (name, subwayMap) => { if (confirm('์ •๋ง๋กœ ์‚ญ์ œํ•˜์‹œ๊ฒ ์Šต๋‹ˆ๊นŒ?')) { - subwayMap.delStation(name); - showAddedStation(subwayMap); + if (stationNotInLine(name, subwayMap.lineList)) { + subwayMap.delStation(name); + showAddedStation(subwayMap); + } else { + alert('๋…ธ์„ ์— ํฌํ•จ๋œ ์—ญ์ž…๋‹ˆ๋‹ค.'); + } } }; diff --git a/src/controllers/validation.js b/src/controllers/validation.js index b868d7abf..3bed641f3 100644 --- a/src/controllers/validation.js +++ b/src/controllers/validation.js @@ -7,8 +7,17 @@ export const notDuplicateStation = (name, list) => { }; export const notDuplicateLine = (name, list) => { - for (const element of list) { + for (let element of list) { if (element.name == name) return false; } return true; }; + +export const stationNotInLine = (stationName, lineList) => { + for (let line of lineList) { + if (line.list.includes(stationName)) { + return false; + } + } + return true; +}; From 307dba1ee91103a00e883a71eefe4f09faf18d94 Mon Sep 17 00:00:00 2001 From: yang Date: Tue, 15 Dec 2020 03:39:32 +0900 Subject: [PATCH 16/27] show line buttons --- docs/README.md | 1 - index.html | 5 ++--- src/models/Station.js | 3 --- src/views/lineManager.js | 6 +++--- src/views/sectionManager.js | 20 ++++++++++++++++++++ src/views/stationManager.js | 6 +++--- src/views/tab.js | 2 ++ style.css | 4 ++++ 8 files changed, 34 insertions(+), 13 deletions(-) delete mode 100644 src/models/Station.js create mode 100644 src/views/sectionManager.js diff --git a/docs/README.md b/docs/README.md index f73bff27d..8ccb988f0 100644 --- a/docs/README.md +++ b/docs/README.md @@ -6,7 +6,6 @@ - [x] ๊ฐ๊ฐ์˜ ๊ด€๋ฆฌ ๋ฒ„ํŠผ ์ƒ์„ฑ - [x] element๋ฅผ ์ƒ์„ฑํ•˜๊ณ  ํ™”๋ฉด์— ๋„์šฐ๋Š” ๊ธฐ๋Šฅ -- [x] Station ์ƒ์„ฑ - [x] Line ์ƒ์„ฑ - [x] localStorage์— ๋ฐ์ดํ„ฐ ์ €์žฅ ๋ฐ ๋ถˆ๋Ÿฌ์˜ค๊ธฐ diff --git a/index.html b/index.html index 0c4d57200..ff9dbf6bf 100644 --- a/index.html +++ b/index.html @@ -58,8 +58,8 @@

๐Ÿš‰ ๋…ธ์„  ๋ชฉ๋ก

๊ตฌ๊ฐ„์„ ์ˆ˜์ •ํ•  ๋…ธ์„ ์„ ์„ ํƒํ•ด์ฃผ์„ธ์š”.

-
-
+
+

๊ด€๋ฆฌ

๊ตฌ๊ฐ„ ๋“ฑ๋ก

@@ -83,7 +83,6 @@

๊ตฌ๊ฐ„ ๋“ฑ๋ก

asd asdf - asdf diff --git a/src/models/Station.js b/src/models/Station.js deleted file mode 100644 index 365dea4df..000000000 --- a/src/models/Station.js +++ /dev/null @@ -1,3 +0,0 @@ -export default function Station(name) { - this.name = name; -} diff --git a/src/views/lineManager.js b/src/views/lineManager.js index d903342cb..649b5f1a4 100644 --- a/src/views/lineManager.js +++ b/src/views/lineManager.js @@ -18,7 +18,7 @@ export const showStationSelector = subwayMap => { export const showAddedLine = subwayMap => { const lineTbody = document.querySelector('#line-manager-screen table tbody'); - let addedLines = ''; + let addedLinesHTML = ''; subwayMap.lineList.forEach(element => { const lineTr = makeElement({ tag: 'tr', @@ -47,7 +47,7 @@ export const showAddedLine = subwayMap => { }); appendElements([deleteBtn], btnTd); appendElements([nameTd, startTd, endTd, btnTd], lineTr); - addedLines += lineTr.outerHTML; + addedLinesHTML += lineTr.outerHTML; }); - lineTbody.innerHTML = addedLines; + lineTbody.innerHTML = addedLinesHTML; }; diff --git a/src/views/sectionManager.js b/src/views/sectionManager.js new file mode 100644 index 000000000..e31250747 --- /dev/null +++ b/src/views/sectionManager.js @@ -0,0 +1,20 @@ +import { makeElement, appendElements } from './utils.js'; + +export const showModifyLineBtn = subwayMap => { + const buttonsDiv = document.querySelector('#buttons'); + const emptyDiv = makeElement({ + tag: 'div', + }); + subwayMap.lineList.forEach(line => { + const button = makeElement({ + tag: 'button', + elementClass: '.section-line-menu-button', + innerHTML: line.name, + styles: 'margin: 0px 5px 0px 0px', + dataName: 'line-name', + dataValue: line.name, + }); + appendElements([button], emptyDiv); + }); + buttonsDiv.innerHTML = emptyDiv.outerHTML; +}; diff --git a/src/views/stationManager.js b/src/views/stationManager.js index 724dcecac..91e6c6b15 100644 --- a/src/views/stationManager.js +++ b/src/views/stationManager.js @@ -2,7 +2,7 @@ import { makeElement, appendElements } from './utils.js'; export const showAddedStation = subwayMap => { const stationTbody = document.querySelector('#station-manager-screen table tbody'); - let addedStations = ''; + let addedStationsHTML = ''; subwayMap.stationList.forEach(name => { const stationTr = makeElement({ tag: 'tr', @@ -23,7 +23,7 @@ export const showAddedStation = subwayMap => { }); appendElements([deleteBtn], btnTd); appendElements([nameTd, btnTd], stationTr); - addedStations += stationTr.outerHTML; + addedStationsHTML += stationTr.outerHTML; }); - stationTbody.innerHTML = addedStations; + stationTbody.innerHTML = addedStationsHTML; }; diff --git a/src/views/tab.js b/src/views/tab.js index acb37e08c..3a6678d57 100644 --- a/src/views/tab.js +++ b/src/views/tab.js @@ -1,5 +1,6 @@ import { showAddedStation } from './stationManager.js'; import { showStationSelector, showAddedLine } from './lineManager.js'; +import { showModifyLineBtn } from './sectionManager.js'; const stationManagerScreen = document.querySelector('#station-manager-screen'); const lineManagerScreen = document.querySelector('#line-manager-screen'); @@ -25,4 +26,5 @@ export const tabManager = (value, subwayMap) => { showAddedStation(subwayMap); showAddedLine(subwayMap); showStationSelector(subwayMap); + showModifyLineBtn(subwayMap); }; diff --git a/style.css b/style.css index 4ea43637a..15e2c777b 100644 --- a/style.css +++ b/style.css @@ -15,3 +15,7 @@ table td { .active { display: block; } + +#section-manager { + display: none; +} From 449e155a4a78a0ab6fbd8abf8f2918c1ae2786dd Mon Sep 17 00:00:00 2001 From: yang Date: Tue, 15 Dec 2020 03:54:28 +0900 Subject: [PATCH 17/27] show section manager --- docs/README.md | 2 +- index.html | 2 +- src/index.js | 4 ++++ src/views/sectionManager.js | 12 +++++++++++- src/views/tab.js | 2 ++ style.css | 8 ++++---- 6 files changed, 23 insertions(+), 7 deletions(-) diff --git a/docs/README.md b/docs/README.md index 8ccb988f0..298558006 100644 --- a/docs/README.md +++ b/docs/README.md @@ -33,7 +33,7 @@ 3. ๊ตฌ๊ฐ„ ๊ด€๋ฆฌ - [x] ๋…ธ์„  ๊ด€๋ฆฌ ๋ฒ„ํŠผ ํด๋ฆญ์‹œ ์ˆ˜์ •ํ•  ๋…ธ์„  ์„ ํƒ ๋ฒ„ํŠผ -- [ ] ์ˆ˜์ • ํ•  ๋…ธ์„  ์„ ํƒ์‹œ ๊ด€๋ฆฌ ํ™”๋ฉด ๋ณด์—ฌ์ฃผ๊ธฐ +- [x] ์ˆ˜์ • ํ•  ๋…ธ์„  ์„ ํƒ์‹œ ๊ด€๋ฆฌ ํ™”๋ฉด ๋ณด์—ฌ์ฃผ๊ธฐ - [ ] ์—ญ ์„ ํƒ ๋ฆฌ์ŠคํŠธ ๋ถˆ๋Ÿฌ์˜ค๊ธฐ - [ ] ์ˆœ์„œ ์ž…๋ ฅ, ๋“ฑ๋ก ๋ฒ„ํŠผ ํ™œ์„ฑํ™” - [ ] ๋…ธ์„ ์ด ์ค‘๋ณต๋˜๋Š” ์—ญ์ด ์žˆ์œผ๋ฉด ์•ˆ๋จ diff --git a/index.html b/index.html index ff9dbf6bf..d816c21ab 100644 --- a/index.html +++ b/index.html @@ -59,7 +59,7 @@

๐Ÿš‰ ๋…ธ์„  ๋ชฉ๋ก

๊ตฌ๊ฐ„์„ ์ˆ˜์ •ํ•  ๋…ธ์„ ์„ ์„ ํƒํ•ด์ฃผ์„ธ์š”.

-
+

๊ด€๋ฆฌ

๊ตฌ๊ฐ„ ๋“ฑ๋ก

diff --git a/src/index.js b/src/index.js index 732c73e36..7e47072d2 100644 --- a/src/index.js +++ b/src/index.js @@ -3,6 +3,7 @@ import { deleteLine } from './controllers/lineManager.js'; import { saveData, loadData } from './controllers/storage.js'; import { tabController } from './controllers/tab.js'; import Line from './models/Line.js'; +import { showSectionManager } from './views/sectionManager.js'; export default function SubwayMap() { this.stationList = loadData('stations'); @@ -56,6 +57,9 @@ const newBtnAddListener = event => { if (event.target.classList.contains('line-delete-button')) { deleteLine(event.target.dataset.lineName, subwayMap); } + if (event.target.classList.contains('section-line-menu-button')) { + showSectionManager(event.target.dataset.stationName, subwayMap); + } }; document.body.addEventListener('click', newBtnAddListener); init(subwayMap); diff --git a/src/views/sectionManager.js b/src/views/sectionManager.js index e31250747..3fed8f43b 100644 --- a/src/views/sectionManager.js +++ b/src/views/sectionManager.js @@ -8,7 +8,7 @@ export const showModifyLineBtn = subwayMap => { subwayMap.lineList.forEach(line => { const button = makeElement({ tag: 'button', - elementClass: '.section-line-menu-button', + elementClass: 'section-line-menu-button', innerHTML: line.name, styles: 'margin: 0px 5px 0px 0px', dataName: 'line-name', @@ -18,3 +18,13 @@ export const showModifyLineBtn = subwayMap => { }); buttonsDiv.innerHTML = emptyDiv.outerHTML; }; + +export const showSectionManager = () => { + const sectionManagerDiv = document.querySelector('.section-manager'); + sectionManagerDiv.classList.add('active'); +}; + +export const hideSectionManager = () => { + const sectionManagerDiv = document.querySelector('.section-manager'); + sectionManagerDiv.classList.remove('active'); +}; diff --git a/src/views/tab.js b/src/views/tab.js index 3a6678d57..a6347e2e2 100644 --- a/src/views/tab.js +++ b/src/views/tab.js @@ -1,6 +1,7 @@ import { showAddedStation } from './stationManager.js'; import { showStationSelector, showAddedLine } from './lineManager.js'; import { showModifyLineBtn } from './sectionManager.js'; +import { hideSectionManager } from './sectionManager.js'; const stationManagerScreen = document.querySelector('#station-manager-screen'); const lineManagerScreen = document.querySelector('#line-manager-screen'); @@ -21,6 +22,7 @@ export const tabManager = (value, subwayMap) => { } else { tabList[i].classList.remove('active'); } + hideSectionManager(); } subwayMap.reload(); showAddedStation(subwayMap); diff --git a/style.css b/style.css index 15e2c777b..8b4b79685 100644 --- a/style.css +++ b/style.css @@ -2,6 +2,10 @@ display: none; } +.section-manager { + display: none; +} + table { border: 1px solid gray; margin-top: 10px; @@ -15,7 +19,3 @@ table td { .active { display: block; } - -#section-manager { - display: none; -} From 0520b26b379f1f93db147db399454a2e90f42ab9 Mon Sep 17 00:00:00 2001 From: yang Date: Tue, 15 Dec 2020 03:55:20 +0900 Subject: [PATCH 18/27] hide section manager at other tabs --- docs/README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/README.md b/docs/README.md index 298558006..6fbafce05 100644 --- a/docs/README.md +++ b/docs/README.md @@ -34,6 +34,7 @@ - [x] ๋…ธ์„  ๊ด€๋ฆฌ ๋ฒ„ํŠผ ํด๋ฆญ์‹œ ์ˆ˜์ •ํ•  ๋…ธ์„  ์„ ํƒ ๋ฒ„ํŠผ - [x] ์ˆ˜์ • ํ•  ๋…ธ์„  ์„ ํƒ์‹œ ๊ด€๋ฆฌ ํ™”๋ฉด ๋ณด์—ฌ์ฃผ๊ธฐ +- [x] ๋‹ค๋ฅธ ํƒญ ๋ˆ„๋ฅผ ๋•Œ ๊ด€๋ฆฌ ํ™”๋ฉด ๋‹ซ๊ธฐ - [ ] ์—ญ ์„ ํƒ ๋ฆฌ์ŠคํŠธ ๋ถˆ๋Ÿฌ์˜ค๊ธฐ - [ ] ์ˆœ์„œ ์ž…๋ ฅ, ๋“ฑ๋ก ๋ฒ„ํŠผ ํ™œ์„ฑํ™” - [ ] ๋…ธ์„ ์ด ์ค‘๋ณต๋˜๋Š” ์—ญ์ด ์žˆ์œผ๋ฉด ์•ˆ๋จ From 745aca2e15c5f5e758a52ef98e1bcb03059395b3 Mon Sep 17 00:00:00 2001 From: yang Date: Tue, 15 Dec 2020 14:08:57 +0900 Subject: [PATCH 19/27] section load station selector --- docs/README.md | 4 +++- src/index.js | 2 +- src/views/lineManager.js | 2 +- src/views/sectionManager.js | 17 ++++++++++++++++- src/views/tab.js | 4 ++-- 5 files changed, 23 insertions(+), 6 deletions(-) diff --git a/docs/README.md b/docs/README.md index 6fbafce05..c2a15e767 100644 --- a/docs/README.md +++ b/docs/README.md @@ -35,7 +35,9 @@ - [x] ๋…ธ์„  ๊ด€๋ฆฌ ๋ฒ„ํŠผ ํด๋ฆญ์‹œ ์ˆ˜์ •ํ•  ๋…ธ์„  ์„ ํƒ ๋ฒ„ํŠผ - [x] ์ˆ˜์ • ํ•  ๋…ธ์„  ์„ ํƒ์‹œ ๊ด€๋ฆฌ ํ™”๋ฉด ๋ณด์—ฌ์ฃผ๊ธฐ - [x] ๋‹ค๋ฅธ ํƒญ ๋ˆ„๋ฅผ ๋•Œ ๊ด€๋ฆฌ ํ™”๋ฉด ๋‹ซ๊ธฐ -- [ ] ์—ญ ์„ ํƒ ๋ฆฌ์ŠคํŠธ ๋ถˆ๋Ÿฌ์˜ค๊ธฐ +- [x] ์—ญ ์„ ํƒ ๋ฆฌ์ŠคํŠธ ๋ถˆ๋Ÿฌ์˜ค๊ธฐ +- [ ] ๊ด€๋ฆฌ ํ˜ธ์„  ๋ณด์—ฌ์ฃผ๊ธฐ +- [ ] ๊ตฌ๊ฐ„ ์ •๋ณด ๋ถˆ๋Ÿฌ์˜ค๊ธฐ - [ ] ์ˆœ์„œ ์ž…๋ ฅ, ๋“ฑ๋ก ๋ฒ„ํŠผ ํ™œ์„ฑํ™” - [ ] ๋…ธ์„ ์ด ์ค‘๋ณต๋˜๋Š” ์—ญ์ด ์žˆ์œผ๋ฉด ์•ˆ๋จ - [ ] ์—ญ๊ณผ ์—ญ ์‚ฌ์ด์—๋งŒ ์ถ”๊ฐ€๋˜๋„๋ก diff --git a/src/index.js b/src/index.js index 7e47072d2..4d461dd02 100644 --- a/src/index.js +++ b/src/index.js @@ -58,7 +58,7 @@ const newBtnAddListener = event => { deleteLine(event.target.dataset.lineName, subwayMap); } if (event.target.classList.contains('section-line-menu-button')) { - showSectionManager(event.target.dataset.stationName, subwayMap); + showSectionManager(event.target.dataset.lineName, subwayMap); } }; document.body.addEventListener('click', newBtnAddListener); diff --git a/src/views/lineManager.js b/src/views/lineManager.js index 649b5f1a4..d4c25b3a6 100644 --- a/src/views/lineManager.js +++ b/src/views/lineManager.js @@ -1,6 +1,6 @@ import { makeElement, appendElements } from './utils.js'; -export const showStationSelector = subwayMap => { +export const showLineStationSelector = subwayMap => { const lineStartSelector = document.querySelector('#line-start-station-selector'); const lineEndSelector = document.querySelector('#line-end-station-selector'); let stationsHTML = ''; diff --git a/src/views/sectionManager.js b/src/views/sectionManager.js index 3fed8f43b..431fbcc2f 100644 --- a/src/views/sectionManager.js +++ b/src/views/sectionManager.js @@ -19,12 +19,27 @@ export const showModifyLineBtn = subwayMap => { buttonsDiv.innerHTML = emptyDiv.outerHTML; }; -export const showSectionManager = () => { +export const showSectionManager = (lineName, subwayMap) => { const sectionManagerDiv = document.querySelector('.section-manager'); sectionManagerDiv.classList.add('active'); + showSectionStationSelector(subwayMap); }; export const hideSectionManager = () => { const sectionManagerDiv = document.querySelector('.section-manager'); sectionManagerDiv.classList.remove('active'); }; + +const showSectionStationSelector = subwayMap => { + const sectionStationSelector = document.querySelector('#section-station-selector'); + let stationsHTML = ''; + subwayMap.stationList.forEach(name => { + const stationOption = makeElement({ + tag: 'option', + value: name, + innerHTML: name, + }); + stationsHTML += stationOption.outerHTML; + }); + sectionStationSelector.innerHTML = stationsHTML; +}; diff --git a/src/views/tab.js b/src/views/tab.js index a6347e2e2..89624e852 100644 --- a/src/views/tab.js +++ b/src/views/tab.js @@ -1,5 +1,5 @@ import { showAddedStation } from './stationManager.js'; -import { showStationSelector, showAddedLine } from './lineManager.js'; +import { showLineStationSelector, showAddedLine } from './lineManager.js'; import { showModifyLineBtn } from './sectionManager.js'; import { hideSectionManager } from './sectionManager.js'; @@ -27,6 +27,6 @@ export const tabManager = (value, subwayMap) => { subwayMap.reload(); showAddedStation(subwayMap); showAddedLine(subwayMap); - showStationSelector(subwayMap); + showLineStationSelector(subwayMap); showModifyLineBtn(subwayMap); }; From f19c9f1f4c1b8d40d862835bc2cf6ee99084eede Mon Sep 17 00:00:00 2001 From: yang Date: Tue, 15 Dec 2020 14:26:44 +0900 Subject: [PATCH 20/27] show section title --- docs/README.md | 2 +- index.html | 2 +- src/views/sectionManager.js | 2 ++ 3 files changed, 4 insertions(+), 2 deletions(-) diff --git a/docs/README.md b/docs/README.md index c2a15e767..65e70a5d4 100644 --- a/docs/README.md +++ b/docs/README.md @@ -36,7 +36,7 @@ - [x] ์ˆ˜์ • ํ•  ๋…ธ์„  ์„ ํƒ์‹œ ๊ด€๋ฆฌ ํ™”๋ฉด ๋ณด์—ฌ์ฃผ๊ธฐ - [x] ๋‹ค๋ฅธ ํƒญ ๋ˆ„๋ฅผ ๋•Œ ๊ด€๋ฆฌ ํ™”๋ฉด ๋‹ซ๊ธฐ - [x] ์—ญ ์„ ํƒ ๋ฆฌ์ŠคํŠธ ๋ถˆ๋Ÿฌ์˜ค๊ธฐ -- [ ] ๊ด€๋ฆฌ ํ˜ธ์„  ๋ณด์—ฌ์ฃผ๊ธฐ +- [x] ๊ด€๋ฆฌ ํ˜ธ์„  ๋ณด์—ฌ์ฃผ๊ธฐ - [ ] ๊ตฌ๊ฐ„ ์ •๋ณด ๋ถˆ๋Ÿฌ์˜ค๊ธฐ - [ ] ์ˆœ์„œ ์ž…๋ ฅ, ๋“ฑ๋ก ๋ฒ„ํŠผ ํ™œ์„ฑํ™” - [ ] ๋…ธ์„ ์ด ์ค‘๋ณต๋˜๋Š” ์—ญ์ด ์žˆ์œผ๋ฉด ์•ˆ๋จ diff --git a/index.html b/index.html index d816c21ab..5f5ea7ed1 100644 --- a/index.html +++ b/index.html @@ -60,7 +60,7 @@

๐Ÿš‰ ๋…ธ์„  ๋ชฉ๋ก

๊ตฌ๊ฐ„์„ ์ˆ˜์ •ํ•  ๋…ธ์„ ์„ ์„ ํƒํ•ด์ฃผ์„ธ์š”.

-

๊ด€๋ฆฌ

+

๊ด€๋ฆฌ

๊ตฌ๊ฐ„ ๋“ฑ๋ก

diff --git a/src/views/sectionManager.js b/src/views/sectionManager.js index 431fbcc2f..319f4dd3b 100644 --- a/src/views/sectionManager.js +++ b/src/views/sectionManager.js @@ -21,8 +21,10 @@ export const showModifyLineBtn = subwayMap => { export const showSectionManager = (lineName, subwayMap) => { const sectionManagerDiv = document.querySelector('.section-manager'); + const sectionTitle = document.querySelector('#title'); sectionManagerDiv.classList.add('active'); showSectionStationSelector(subwayMap); + sectionTitle.innerHTML = `${lineName} ๊ด€๋ฆฌ`; }; export const hideSectionManager = () => { From 03dea84a07ff028b7d799796f1270729973e2d62 Mon Sep 17 00:00:00 2001 From: yang Date: Tue, 15 Dec 2020 14:58:13 +0900 Subject: [PATCH 21/27] load section data --- docs/README.md | 2 +- index.html | 7 +------ src/views/sectionManager.js | 36 ++++++++++++++++++++++++++++++++++++ 3 files changed, 38 insertions(+), 7 deletions(-) diff --git a/docs/README.md b/docs/README.md index 65e70a5d4..267f305e9 100644 --- a/docs/README.md +++ b/docs/README.md @@ -37,7 +37,7 @@ - [x] ๋‹ค๋ฅธ ํƒญ ๋ˆ„๋ฅผ ๋•Œ ๊ด€๋ฆฌ ํ™”๋ฉด ๋‹ซ๊ธฐ - [x] ์—ญ ์„ ํƒ ๋ฆฌ์ŠคํŠธ ๋ถˆ๋Ÿฌ์˜ค๊ธฐ - [x] ๊ด€๋ฆฌ ํ˜ธ์„  ๋ณด์—ฌ์ฃผ๊ธฐ -- [ ] ๊ตฌ๊ฐ„ ์ •๋ณด ๋ถˆ๋Ÿฌ์˜ค๊ธฐ +- [x] ๊ตฌ๊ฐ„ ์ •๋ณด ๋ถˆ๋Ÿฌ์˜ค๊ธฐ - [ ] ์ˆœ์„œ ์ž…๋ ฅ, ๋“ฑ๋ก ๋ฒ„ํŠผ ํ™œ์„ฑํ™” - [ ] ๋…ธ์„ ์ด ์ค‘๋ณต๋˜๋Š” ์—ญ์ด ์žˆ์œผ๋ฉด ์•ˆ๋จ - [ ] ์—ญ๊ณผ ์—ญ ์‚ฌ์ด์—๋งŒ ์ถ”๊ฐ€๋˜๋„๋ก diff --git a/index.html b/index.html index 5f5ea7ed1..4cbe138c6 100644 --- a/index.html +++ b/index.html @@ -60,7 +60,7 @@

๐Ÿš‰ ๋…ธ์„  ๋ชฉ๋ก

๊ตฌ๊ฐ„์„ ์ˆ˜์ •ํ•  ๋…ธ์„ ์„ ์„ ํƒํ•ด์ฃผ์„ธ์š”.

-

๊ด€๋ฆฌ

+

๊ตฌ๊ฐ„ ๋“ฑ๋ก

@@ -80,11 +80,6 @@

๊ตฌ๊ฐ„ ๋“ฑ๋ก

- - asd - asdf - -
diff --git a/src/views/sectionManager.js b/src/views/sectionManager.js index 319f4dd3b..7afcfdb99 100644 --- a/src/views/sectionManager.js +++ b/src/views/sectionManager.js @@ -25,6 +25,7 @@ export const showSectionManager = (lineName, subwayMap) => { sectionManagerDiv.classList.add('active'); showSectionStationSelector(subwayMap); sectionTitle.innerHTML = `${lineName} ๊ด€๋ฆฌ`; + showAddedSection(lineName, subwayMap); }; export const hideSectionManager = () => { @@ -45,3 +46,38 @@ const showSectionStationSelector = subwayMap => { }); sectionStationSelector.innerHTML = stationsHTML; }; + +const showAddedSection = (lineName, subwayMap) => { + const lineList = subwayMap.lineList; + const sectionTbody = document.querySelector('.section-manager table tbody'); + const sectionIndex = lineList.findIndex(line => line.name === lineName); + const selectedSectionList = lineList[sectionIndex].list; + let addedSectionsHTML = ''; + for (let i = 0; i < selectedSectionList.length; ++i) { + const sectionTr = makeElement({ + tag: 'tr', + }); + const orderTd = makeElement({ + tag: 'td', + innerHTML: String(i), + }); + const nameTd = makeElement({ + tag: 'td', + innerHTML: selectedSectionList[i], + }); + const btnTd = makeElement({ + tag: 'td', + }); + const deleteBtn = makeElement({ + tag: 'button', + elementClass: 'station-delete-button', + innerHTML: '๋…ธ์„ ์—์„œ ์ œ๊ฑฐ', + dataName: 'station-name', + dataValue: selectedSectionList[i], + }); + appendElements([deleteBtn], btnTd); + appendElements([orderTd, nameTd, btnTd], sectionTr); + addedSectionsHTML += sectionTr.outerHTML; + } + sectionTbody.innerHTML = addedSectionsHTML; +}; From f3e51d55d4947c8dfb9bb869ef0cd6806d5dbf66 Mon Sep 17 00:00:00 2001 From: yang Date: Tue, 15 Dec 2020 15:25:59 +0900 Subject: [PATCH 22/27] activate order input, button --- docs/README.md | 2 +- src/controllers/sectionManager.js | 12 ++++++++++++ src/controllers/tab.js | 2 ++ src/views/sectionManager.js | 2 +- style.css | 2 +- 5 files changed, 17 insertions(+), 3 deletions(-) create mode 100644 src/controllers/sectionManager.js diff --git a/docs/README.md b/docs/README.md index 267f305e9..f305fe5b8 100644 --- a/docs/README.md +++ b/docs/README.md @@ -38,7 +38,7 @@ - [x] ์—ญ ์„ ํƒ ๋ฆฌ์ŠคํŠธ ๋ถˆ๋Ÿฌ์˜ค๊ธฐ - [x] ๊ด€๋ฆฌ ํ˜ธ์„  ๋ณด์—ฌ์ฃผ๊ธฐ - [x] ๊ตฌ๊ฐ„ ์ •๋ณด ๋ถˆ๋Ÿฌ์˜ค๊ธฐ -- [ ] ์ˆœ์„œ ์ž…๋ ฅ, ๋“ฑ๋ก ๋ฒ„ํŠผ ํ™œ์„ฑํ™” +- [x] ์ˆœ์„œ ์ž…๋ ฅ, ๋“ฑ๋ก ๋ฒ„ํŠผ ํ™œ์„ฑํ™” - [ ] ๋…ธ์„ ์ด ์ค‘๋ณต๋˜๋Š” ์—ญ์ด ์žˆ์œผ๋ฉด ์•ˆ๋จ - [ ] ์—ญ๊ณผ ์—ญ ์‚ฌ์ด์—๋งŒ ์ถ”๊ฐ€๋˜๋„๋ก - [ ] ์—ญ์„ ์ œ๊ฑฐํ•˜๋Š” ๊ธฐ๋Šฅ diff --git a/src/controllers/sectionManager.js b/src/controllers/sectionManager.js new file mode 100644 index 000000000..1413eafae --- /dev/null +++ b/src/controllers/sectionManager.js @@ -0,0 +1,12 @@ +const sectionStationSelector = document.querySelector('#section-station-selector'); +const sectionNameInput = document.querySelector('#section-order-input'); +const sectionAddBtn = document.querySelector('#section-add-button'); + +export const sectionAddListener = subwayMap => { + sectionAddBtn.addEventListener('click', () => console.log(sectionNameInput.value, subwayMap)); + sectionNameInput.addEventListener('keydown', e => { + if (e.keyCode === 13) { + console.log(sectionNameInput.value, subwayMap); + } + }); +}; diff --git a/src/controllers/tab.js b/src/controllers/tab.js index bf52ba2ea..70f1a6fde 100644 --- a/src/controllers/tab.js +++ b/src/controllers/tab.js @@ -1,6 +1,7 @@ import { tabManager } from '../views/tab.js'; import { stationAddListener } from './stationManager.js'; import { lineAddListener } from './lineManager.js'; +import { sectionAddListener } from './sectionManager.js'; const stationManagerBtn = document.querySelector('#station-manager-button'); const lineManagerBtn = document.querySelector('#line-manager-button'); @@ -14,4 +15,5 @@ export const tabController = subwayMap => { mapPrintManagerBtn.addEventListener('click', e => tabManager(e.target.value, subwayMap)); stationAddListener(subwayMap); lineAddListener(subwayMap); + sectionAddListener(subwayMap); }; diff --git a/src/views/sectionManager.js b/src/views/sectionManager.js index 7afcfdb99..5de8eeabc 100644 --- a/src/views/sectionManager.js +++ b/src/views/sectionManager.js @@ -70,7 +70,7 @@ const showAddedSection = (lineName, subwayMap) => { }); const deleteBtn = makeElement({ tag: 'button', - elementClass: 'station-delete-button', + elementClass: 'section-delete-button', innerHTML: '๋…ธ์„ ์—์„œ ์ œ๊ฑฐ', dataName: 'station-name', dataValue: selectedSectionList[i], diff --git a/style.css b/style.css index 8b4b79685..a7ef2ceb3 100644 --- a/style.css +++ b/style.css @@ -8,7 +8,7 @@ table { border: 1px solid gray; - margin-top: 10px; + margin-top: 20px; } table th, From 6e17c0266df4363fb16db3ee70e375a1a92731c5 Mon Sep 17 00:00:00 2001 From: yang Date: Tue, 15 Dec 2020 17:16:11 +0900 Subject: [PATCH 23/27] add section with validation --- docs/README.md | 4 +-- index.html | 9 ++---- src/controllers/sectionManager.js | 49 ++++++++++++++++++++++++++----- src/controllers/tab.js | 2 -- src/controllers/validation.js | 14 +++++++-- src/index.js | 5 ++++ src/views/sectionManager.js | 31 +++++++++++++++++-- src/views/utils.js | 2 ++ 8 files changed, 94 insertions(+), 22 deletions(-) diff --git a/docs/README.md b/docs/README.md index f305fe5b8..c9cbb093e 100644 --- a/docs/README.md +++ b/docs/README.md @@ -39,8 +39,8 @@ - [x] ๊ด€๋ฆฌ ํ˜ธ์„  ๋ณด์—ฌ์ฃผ๊ธฐ - [x] ๊ตฌ๊ฐ„ ์ •๋ณด ๋ถˆ๋Ÿฌ์˜ค๊ธฐ - [x] ์ˆœ์„œ ์ž…๋ ฅ, ๋“ฑ๋ก ๋ฒ„ํŠผ ํ™œ์„ฑํ™” -- [ ] ๋…ธ์„ ์ด ์ค‘๋ณต๋˜๋Š” ์—ญ์ด ์žˆ์œผ๋ฉด ์•ˆ๋จ -- [ ] ์—ญ๊ณผ ์—ญ ์‚ฌ์ด์—๋งŒ ์ถ”๊ฐ€๋˜๋„๋ก +- [x] ๋…ธ์„ ์ด ์ค‘๋ณต๋˜๋Š” ์—ญ์ด ์žˆ์œผ๋ฉด ์•ˆ๋จ +- [x] ์—ญ๊ณผ ์—ญ ์‚ฌ์ด์—๋งŒ ์ถ”๊ฐ€๋˜๋„๋ก - [ ] ์—ญ์„ ์ œ๊ฑฐํ•˜๋Š” ๊ธฐ๋Šฅ - [ ] ์—ญ ๊ฐœ์ˆ˜๊ฐ€ 2๊ฐœ ์ดํ•˜๊ฐ€ ๋˜๋ฉด ์•ˆ๋จ diff --git a/index.html b/index.html index 4cbe138c6..00406a21a 100644 --- a/index.html +++ b/index.html @@ -64,13 +64,8 @@

๊ตฌ๊ฐ„ ๋“ฑ๋ก

- - - +
+
diff --git a/src/controllers/sectionManager.js b/src/controllers/sectionManager.js index 1413eafae..e1a28ebbb 100644 --- a/src/controllers/sectionManager.js +++ b/src/controllers/sectionManager.js @@ -1,12 +1,47 @@ -const sectionStationSelector = document.querySelector('#section-station-selector'); -const sectionNameInput = document.querySelector('#section-order-input'); -const sectionAddBtn = document.querySelector('#section-add-button'); +import { notFirstOrLast, stationNotInSelectedLine } from './validation.js'; +import { clearFocus } from '../views/utils.js'; +import { showAddedSection } from '../views/sectionManager.js'; -export const sectionAddListener = subwayMap => { - sectionAddBtn.addEventListener('click', () => console.log(sectionNameInput.value, subwayMap)); - sectionNameInput.addEventListener('keydown', e => { +export const changeAddListener = (selectedLineName, subwayMap) => { + const sectionStationSelector = document.querySelector('#section-station-selector'); + const sectionOrderInput = document.querySelector('#section-order-input'); + const sectionAddBtn = document.querySelector('#section-add-button'); + sectionAddBtn.addEventListener('click', () => + addNewSection( + sectionStationSelector.value, + sectionOrderInput.value, + selectedLineName, + subwayMap + ) + ); + sectionOrderInput.addEventListener('keydown', e => { if (e.keyCode === 13) { - console.log(sectionNameInput.value, subwayMap); + addNewSection( + sectionStationSelector.value, + sectionOrderInput.value, + selectedLineName, + subwayMap + ); } }); }; + +export const sectionRemoveListener = () => { + const sectionOrderInput = document.querySelector('#section-order-input'); + sectionAddBtn.removeEventListener(); + sectionOrderInput.removeEventListener(); +}; + +const addNewSection = (station, order, selectedLineName, subwayMap) => { + const sectionOrderInput = document.querySelector('#section-order-input'); + const lineList = subwayMap.lineList; + let sectionIndex = lineList.findIndex(line => line.name === selectedLineName); + const selectedLine = lineList[sectionIndex].list; + if (notFirstOrLast(order, selectedLine) && stationNotInSelectedLine(station, selectedLine)) { + subwayMap.addSection(sectionIndex, order, station); + showAddedSection(selectedLineName, subwayMap); + } else { + alert('์ž˜๋ชป๋œ ๊ฐ’์ž…๋‹ˆ๋‹ค. ๋‹ค์‹œ ์ž…๋ ฅํ•ด์ฃผ์„ธ์š”.'); + } + clearFocus(sectionOrderInput); +}; diff --git a/src/controllers/tab.js b/src/controllers/tab.js index 70f1a6fde..bf52ba2ea 100644 --- a/src/controllers/tab.js +++ b/src/controllers/tab.js @@ -1,7 +1,6 @@ import { tabManager } from '../views/tab.js'; import { stationAddListener } from './stationManager.js'; import { lineAddListener } from './lineManager.js'; -import { sectionAddListener } from './sectionManager.js'; const stationManagerBtn = document.querySelector('#station-manager-button'); const lineManagerBtn = document.querySelector('#line-manager-button'); @@ -15,5 +14,4 @@ export const tabController = subwayMap => { mapPrintManagerBtn.addEventListener('click', e => tabManager(e.target.value, subwayMap)); stationAddListener(subwayMap); lineAddListener(subwayMap); - sectionAddListener(subwayMap); }; diff --git a/src/controllers/validation.js b/src/controllers/validation.js index 3bed641f3..ad21472d8 100644 --- a/src/controllers/validation.js +++ b/src/controllers/validation.js @@ -13,11 +13,21 @@ export const notDuplicateLine = (name, list) => { return true; }; -export const stationNotInLine = (stationName, lineList) => { +export const stationNotInLine = (station, lineList) => { for (let line of lineList) { - if (line.list.includes(stationName)) { + if (line.list.includes(station)) { return false; } } return true; }; + +export const notFirstOrLast = (order, lineList) => { + if (order > 0 && order <= lineList.length - 1) return true; + return false; +}; + +export const stationNotInSelectedLine = (station, selectedLineList) => { + if (selectedLineList.includes(station)) return false; + return true; +}; diff --git a/src/index.js b/src/index.js index 4d461dd02..f13d22d76 100644 --- a/src/index.js +++ b/src/index.js @@ -31,6 +31,11 @@ export default function SubwayMap() { this.saveLine(); }; + this.addSection = (lineIndex, order, name) => { + this.lineList[lineIndex].list.splice(order, 0, name); + this.saveLine(); + }; + this.reload = () => { this.stationList = loadData('stations'); this.lineList = loadData('lines'); diff --git a/src/views/sectionManager.js b/src/views/sectionManager.js index 5de8eeabc..0bd40d307 100644 --- a/src/views/sectionManager.js +++ b/src/views/sectionManager.js @@ -1,4 +1,5 @@ import { makeElement, appendElements } from './utils.js'; +import { changeAddListener } from '../controllers/sectionManager.js'; export const showModifyLineBtn = subwayMap => { const buttonsDiv = document.querySelector('#buttons'); @@ -23,9 +24,10 @@ export const showSectionManager = (lineName, subwayMap) => { const sectionManagerDiv = document.querySelector('.section-manager'); const sectionTitle = document.querySelector('#title'); sectionManagerDiv.classList.add('active'); - showSectionStationSelector(subwayMap); sectionTitle.innerHTML = `${lineName} ๊ด€๋ฆฌ`; + createInputBtn(subwayMap); showAddedSection(lineName, subwayMap); + changeAddListener(lineName, subwayMap); }; export const hideSectionManager = () => { @@ -47,7 +49,7 @@ const showSectionStationSelector = subwayMap => { sectionStationSelector.innerHTML = stationsHTML; }; -const showAddedSection = (lineName, subwayMap) => { +export const showAddedSection = (lineName, subwayMap) => { const lineList = subwayMap.lineList; const sectionTbody = document.querySelector('.section-manager table tbody'); const sectionIndex = lineList.findIndex(line => line.name === lineName); @@ -81,3 +83,28 @@ const showAddedSection = (lineName, subwayMap) => { } sectionTbody.innerHTML = addedSectionsHTML; }; + +const createInputBtn = subwayMap => { + const sectionsRegistrationDiv = document.querySelector('#section-registration-div'); + const emptyDiv = makeElement({ + tag: 'div', + }); + const stationSelect = makeElement({ + tag: 'select', + id: 'section-station-selector', + }); + const orderInput = makeElement({ + tag: 'input', + type: 'number', + id: 'section-order-input', + placeholder: '์ˆœ์„œ', + }); + const submitBtn = makeElement({ + tag: 'button', + id: 'section-add-button', + innerHTML: '๋“ฑ๋ก', + }); + appendElements([stationSelect, orderInput, submitBtn], emptyDiv); + sectionsRegistrationDiv.innerHTML = emptyDiv.innerHTML; + showSectionStationSelector(subwayMap); +}; diff --git a/src/views/utils.js b/src/views/utils.js index bdee5c1ad..ee73b65ea 100644 --- a/src/views/utils.js +++ b/src/views/utils.js @@ -3,6 +3,7 @@ export const makeElement = ({ id, elementClass, value, + type, innerHTML, placeholder, styles, @@ -13,6 +14,7 @@ export const makeElement = ({ if (id) element.id = id; if (elementClass) element.classList.add(elementClass); if (value) element.value = value; + if (type) element.type = type; if (innerHTML) element.innerHTML = innerHTML; if (placeholder) element.placeholder = placeholder; if (styles) element.style.cssText = styles; From e6dc3241b9dcdd217863df5bef75cd14fb2acbff Mon Sep 17 00:00:00 2001 From: yang Date: Tue, 15 Dec 2020 18:04:33 +0900 Subject: [PATCH 24/27] delete section --- docs/README.md | 6 +----- src/controllers/sectionManager.js | 7 +++++++ src/index.js | 13 +++++++++++++ src/views/sectionManager.js | 11 +++++++---- 4 files changed, 28 insertions(+), 9 deletions(-) diff --git a/docs/README.md b/docs/README.md index c9cbb093e..26ff71c65 100644 --- a/docs/README.md +++ b/docs/README.md @@ -2,8 +2,6 @@ ## ๐Ÿš€ ๊ตฌํ˜„ํ•  ๊ธฐ๋Šฅ ๋ชฉ๋ก -### ์ฃผ ๊ธฐ๋Šฅ - - [x] ๊ฐ๊ฐ์˜ ๊ด€๋ฆฌ ๋ฒ„ํŠผ ์ƒ์„ฑ - [x] element๋ฅผ ์ƒ์„ฑํ•˜๊ณ  ํ™”๋ฉด์— ๋„์šฐ๋Š” ๊ธฐ๋Šฅ - [x] Line ์ƒ์„ฑ @@ -41,12 +39,10 @@ - [x] ์ˆœ์„œ ์ž…๋ ฅ, ๋“ฑ๋ก ๋ฒ„ํŠผ ํ™œ์„ฑํ™” - [x] ๋…ธ์„ ์ด ์ค‘๋ณต๋˜๋Š” ์—ญ์ด ์žˆ์œผ๋ฉด ์•ˆ๋จ - [x] ์—ญ๊ณผ ์—ญ ์‚ฌ์ด์—๋งŒ ์ถ”๊ฐ€๋˜๋„๋ก -- [ ] ์—ญ์„ ์ œ๊ฑฐํ•˜๋Š” ๊ธฐ๋Šฅ +- [x] ์—ญ์„ ์ œ๊ฑฐํ•˜๋Š” ๊ธฐ๋Šฅ - [ ] ์—ญ ๊ฐœ์ˆ˜๊ฐ€ 2๊ฐœ ์ดํ•˜๊ฐ€ ๋˜๋ฉด ์•ˆ๋จ 4. ์ง€ํ•˜์ฒ  ๋…ธ์„ ๋„ ์ถœ๋ ฅ - [x] ๋…ธ์„ ๋„ ์ถœ๋ ฅ ๋ฒ„ํŠผ ํด๋ฆญ์‹œ ๋…ธ์„ ๋„ ํ™”๋ฉด ๋ณด์—ฌ์ฃผ๊ธฐ - [ ] ๋…ธ์„  ๋ชฉ๋ก ๋ณด์—ฌ์ฃผ๊ธฐ - -### ๋ถ€๊ฐ€ ๊ธฐ๋Šฅ diff --git a/src/controllers/sectionManager.js b/src/controllers/sectionManager.js index e1a28ebbb..288f863df 100644 --- a/src/controllers/sectionManager.js +++ b/src/controllers/sectionManager.js @@ -45,3 +45,10 @@ const addNewSection = (station, order, selectedLineName, subwayMap) => { } clearFocus(sectionOrderInput); }; + +export const deleteSection = (lineName, stationName, subwayMap) => { + if (confirm('์ •๋ง๋กœ ์‚ญ์ œํ•˜์‹œ๊ฒ ์Šต๋‹ˆ๊นŒ?')) { + subwayMap.delSection(lineName, stationName); + showAddedSection(lineName, subwayMap); + } +}; diff --git a/src/index.js b/src/index.js index f13d22d76..43edc892e 100644 --- a/src/index.js +++ b/src/index.js @@ -1,5 +1,6 @@ import { deleteStation } from './controllers/stationManager.js'; import { deleteLine } from './controllers/lineManager.js'; +import { deleteSection } from './controllers/sectionManager.js'; import { saveData, loadData } from './controllers/storage.js'; import { tabController } from './controllers/tab.js'; import Line from './models/Line.js'; @@ -36,6 +37,14 @@ export default function SubwayMap() { this.saveLine(); }; + this.delSection = (lineName, stationName) => { + const lineIndex = this.lineList.findIndex(element => element.name === lineName); + const { list } = this.lineList[lineIndex]; + const stationIndex = list.findIndex(name => name === stationName); + list.splice(stationIndex, 1); + this.saveLine(); + }; + this.reload = () => { this.stationList = loadData('stations'); this.lineList = loadData('lines'); @@ -65,6 +74,10 @@ const newBtnAddListener = event => { if (event.target.classList.contains('section-line-menu-button')) { showSectionManager(event.target.dataset.lineName, subwayMap); } + if (event.target.classList.contains('section-delete-button')) { + const [line, station] = event.target.dataset.lineStation.split(','); + deleteSection(line, station, subwayMap); + } }; document.body.addEventListener('click', newBtnAddListener); init(subwayMap); diff --git a/src/views/sectionManager.js b/src/views/sectionManager.js index 0bd40d307..dc26e4ae3 100644 --- a/src/views/sectionManager.js +++ b/src/views/sectionManager.js @@ -25,7 +25,7 @@ export const showSectionManager = (lineName, subwayMap) => { const sectionTitle = document.querySelector('#title'); sectionManagerDiv.classList.add('active'); sectionTitle.innerHTML = `${lineName} ๊ด€๋ฆฌ`; - createInputBtn(subwayMap); + createSectionRegistration(subwayMap); showAddedSection(lineName, subwayMap); changeAddListener(lineName, subwayMap); }; @@ -53,6 +53,7 @@ export const showAddedSection = (lineName, subwayMap) => { const lineList = subwayMap.lineList; const sectionTbody = document.querySelector('.section-manager table tbody'); const sectionIndex = lineList.findIndex(line => line.name === lineName); + const selectedSectionName = lineList[sectionIndex].name; const selectedSectionList = lineList[sectionIndex].list; let addedSectionsHTML = ''; for (let i = 0; i < selectedSectionList.length; ++i) { @@ -74,8 +75,8 @@ export const showAddedSection = (lineName, subwayMap) => { tag: 'button', elementClass: 'section-delete-button', innerHTML: '๋…ธ์„ ์—์„œ ์ œ๊ฑฐ', - dataName: 'station-name', - dataValue: selectedSectionList[i], + dataName: 'line-station', + dataValue: [selectedSectionName, selectedSectionList[i]], }); appendElements([deleteBtn], btnTd); appendElements([orderTd, nameTd, btnTd], sectionTr); @@ -84,18 +85,20 @@ export const showAddedSection = (lineName, subwayMap) => { sectionTbody.innerHTML = addedSectionsHTML; }; -const createInputBtn = subwayMap => { +const createSectionRegistration = subwayMap => { const sectionsRegistrationDiv = document.querySelector('#section-registration-div'); const emptyDiv = makeElement({ tag: 'div', }); const stationSelect = makeElement({ tag: 'select', + styles: 'margin: 0px 5px 0px 0px', id: 'section-station-selector', }); const orderInput = makeElement({ tag: 'input', type: 'number', + styles: 'margin: 0px 5px 0px 0px', id: 'section-order-input', placeholder: '์ˆœ์„œ', }); From 3b0d24fce036141964a1e1d76a1119b642571846 Mon Sep 17 00:00:00 2001 From: yang Date: Tue, 15 Dec 2020 18:18:25 +0900 Subject: [PATCH 25/27] validate station in section --- docs/README.md | 2 +- src/controllers/sectionManager.js | 17 ++++++++++++----- src/controllers/stationManager.js | 4 ++-- src/controllers/validation.js | 7 ++++++- 4 files changed, 21 insertions(+), 9 deletions(-) diff --git a/docs/README.md b/docs/README.md index 26ff71c65..9e928f997 100644 --- a/docs/README.md +++ b/docs/README.md @@ -40,7 +40,7 @@ - [x] ๋…ธ์„ ์ด ์ค‘๋ณต๋˜๋Š” ์—ญ์ด ์žˆ์œผ๋ฉด ์•ˆ๋จ - [x] ์—ญ๊ณผ ์—ญ ์‚ฌ์ด์—๋งŒ ์ถ”๊ฐ€๋˜๋„๋ก - [x] ์—ญ์„ ์ œ๊ฑฐํ•˜๋Š” ๊ธฐ๋Šฅ -- [ ] ์—ญ ๊ฐœ์ˆ˜๊ฐ€ 2๊ฐœ ์ดํ•˜๊ฐ€ ๋˜๋ฉด ์•ˆ๋จ +- [x] ์—ญ ๊ฐœ์ˆ˜๊ฐ€ 2๊ฐœ ์ดํ•˜๊ฐ€ ๋˜๋ฉด ์•ˆ๋จ 4. ์ง€ํ•˜์ฒ  ๋…ธ์„ ๋„ ์ถœ๋ ฅ diff --git a/src/controllers/sectionManager.js b/src/controllers/sectionManager.js index 288f863df..371218935 100644 --- a/src/controllers/sectionManager.js +++ b/src/controllers/sectionManager.js @@ -1,4 +1,4 @@ -import { notFirstOrLast, stationNotInSelectedLine } from './validation.js'; +import { notFirstOrLast, stationNotInSelectedLine, gtTwo } from './validation.js'; import { clearFocus } from '../views/utils.js'; import { showAddedSection } from '../views/sectionManager.js'; @@ -35,7 +35,7 @@ export const sectionRemoveListener = () => { const addNewSection = (station, order, selectedLineName, subwayMap) => { const sectionOrderInput = document.querySelector('#section-order-input'); const lineList = subwayMap.lineList; - let sectionIndex = lineList.findIndex(line => line.name === selectedLineName); + const sectionIndex = lineList.findIndex(line => line.name === selectedLineName); const selectedLine = lineList[sectionIndex].list; if (notFirstOrLast(order, selectedLine) && stationNotInSelectedLine(station, selectedLine)) { subwayMap.addSection(sectionIndex, order, station); @@ -47,8 +47,15 @@ const addNewSection = (station, order, selectedLineName, subwayMap) => { }; export const deleteSection = (lineName, stationName, subwayMap) => { - if (confirm('์ •๋ง๋กœ ์‚ญ์ œํ•˜์‹œ๊ฒ ์Šต๋‹ˆ๊นŒ?')) { - subwayMap.delSection(lineName, stationName); - showAddedSection(lineName, subwayMap); + const lineList = subwayMap.lineList; + const sectionIndex = lineList.findIndex(line => line.name === lineName); + const selectedLineList = lineList[sectionIndex].list; + if (gtTwo(selectedLineList)) { + if (confirm('์ •๋ง๋กœ ์‚ญ์ œํ•˜์‹œ๊ฒ ์Šต๋‹ˆ๊นŒ?')) { + subwayMap.delSection(lineName, stationName); + showAddedSection(lineName, subwayMap); + } + } else { + alert('๋…ธ์„ ์— 2๊ฐœ ์ด์ƒ์˜ ์—ญ์ด ์กด์žฌํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.'); } }; diff --git a/src/controllers/stationManager.js b/src/controllers/stationManager.js index d514b96f2..8b4b635ac 100644 --- a/src/controllers/stationManager.js +++ b/src/controllers/stationManager.js @@ -1,4 +1,4 @@ -import { overTwo, notDuplicateStation, stationNotInLine } from '../controllers/validation.js'; +import { geTwo, notDuplicateStation, stationNotInLine } from '../controllers/validation.js'; import { showAddedStation } from '../views/stationManager.js'; import { clearFocus } from '../views/utils.js'; @@ -15,7 +15,7 @@ export const stationAddListener = subwayMap => { }; const addNewStation = (name, subwayMap) => { - if (overTwo(name) && notDuplicateStation(name, subwayMap.stationList)) { + if (geTwo(name) && notDuplicateStation(name, subwayMap.stationList)) { subwayMap.addStation(name); showAddedStation(subwayMap); } else { diff --git a/src/controllers/validation.js b/src/controllers/validation.js index ad21472d8..0f88a6604 100644 --- a/src/controllers/validation.js +++ b/src/controllers/validation.js @@ -1,4 +1,4 @@ -export const overTwo = name => { +export const geTwo = name => { return name.length >= 2; }; @@ -31,3 +31,8 @@ export const stationNotInSelectedLine = (station, selectedLineList) => { if (selectedLineList.includes(station)) return false; return true; }; + +export const gtTwo = selectedLineList => { + if (selectedLineList.length > 2) return true; + return false; +}; From 6a37662ef06b96a9d961afd6f621dcbcd21eddb1 Mon Sep 17 00:00:00 2001 From: yang Date: Tue, 15 Dec 2020 18:31:23 +0900 Subject: [PATCH 26/27] show map result --- docs/README.md | 2 +- index.html | 4 +--- src/views/map.js | 28 ++++++++++++++++++++++++++++ src/views/tab.js | 5 +++-- 4 files changed, 33 insertions(+), 6 deletions(-) create mode 100644 src/views/map.js diff --git a/docs/README.md b/docs/README.md index 9e928f997..ee39fb902 100644 --- a/docs/README.md +++ b/docs/README.md @@ -45,4 +45,4 @@ 4. ์ง€ํ•˜์ฒ  ๋…ธ์„ ๋„ ์ถœ๋ ฅ - [x] ๋…ธ์„ ๋„ ์ถœ๋ ฅ ๋ฒ„ํŠผ ํด๋ฆญ์‹œ ๋…ธ์„ ๋„ ํ™”๋ฉด ๋ณด์—ฌ์ฃผ๊ธฐ -- [ ] ๋…ธ์„  ๋ชฉ๋ก ๋ณด์—ฌ์ฃผ๊ธฐ +- [x] ๋…ธ์„  ๋ชฉ๋ก ๋ณด์—ฌ์ฃผ๊ธฐ diff --git a/index.html b/index.html index 00406a21a..cbbeb0065 100644 --- a/index.html +++ b/index.html @@ -79,9 +79,7 @@

๊ตฌ๊ฐ„ ๋“ฑ๋ก

-
-

๋…ธ์„ ๋„

-
+
diff --git a/src/views/map.js b/src/views/map.js new file mode 100644 index 000000000..3aa7da7ea --- /dev/null +++ b/src/views/map.js @@ -0,0 +1,28 @@ +import { makeElement, appendElements } from './utils.js'; + +export const showMap = subwayMap => { + const mapDiv = document.querySelector('.map'); + let mapsHTML = ''; + subwayMap.lineList.forEach(element => { + const emptyDiv = makeElement({ + tag: 'div', + }); + const nameH3 = makeElement({ + tag: 'h3', + innerHTML: element.name, + }); + const emptyUl = makeElement({ + tag: 'ul', + }); + element.list.forEach(station => { + const stationLi = makeElement({ + tag: 'li', + innerHTML: station, + }); + appendElements([stationLi], emptyUl); + }); + appendElements([nameH3, emptyUl], emptyDiv); + mapsHTML += emptyDiv.outerHTML; + }); + mapDiv.innerHTML = mapsHTML; +}; diff --git a/src/views/tab.js b/src/views/tab.js index 89624e852..f192ccad0 100644 --- a/src/views/tab.js +++ b/src/views/tab.js @@ -1,7 +1,7 @@ import { showAddedStation } from './stationManager.js'; import { showLineStationSelector, showAddedLine } from './lineManager.js'; -import { showModifyLineBtn } from './sectionManager.js'; -import { hideSectionManager } from './sectionManager.js'; +import { showModifyLineBtn, hideSectionManager } from './sectionManager.js'; +import { showMap } from './map.js'; const stationManagerScreen = document.querySelector('#station-manager-screen'); const lineManagerScreen = document.querySelector('#line-manager-screen'); @@ -29,4 +29,5 @@ export const tabManager = (value, subwayMap) => { showAddedLine(subwayMap); showLineStationSelector(subwayMap); showModifyLineBtn(subwayMap); + showMap(subwayMap); }; From 8752f1661880698f41231188aaab3707eee06e49 Mon Sep 17 00:00:00 2001 From: yang Date: Tue, 15 Dec 2020 20:27:26 +0900 Subject: [PATCH 27/27] update validation --- src/controllers/lineManager.js | 10 +++++++--- src/controllers/sectionManager.js | 12 ++++++++---- src/controllers/stationManager.js | 4 ++-- src/controllers/validation.js | 15 ++++++--------- 4 files changed, 23 insertions(+), 18 deletions(-) diff --git a/src/controllers/lineManager.js b/src/controllers/lineManager.js index c80474a7a..495c98931 100644 --- a/src/controllers/lineManager.js +++ b/src/controllers/lineManager.js @@ -19,9 +19,13 @@ export const lineAddListener = subwayMap => { }; const addNewLine = (name, start, end, subwayMap) => { - if (notDuplicateLine(name, subwayMap.lineList) && start !== end) { - subwayMap.addLine(name, start, end); - showAddedLine(subwayMap); + if (notDuplicateLine(name.trim(), subwayMap.lineList) && name.trim() !== '') { + if (start !== end) { + subwayMap.addLine(name.trim(), start, end); + showAddedLine(subwayMap); + } else { + alert('์ƒํ–‰ ์ข…์ ๊ณผ ํ•˜ํ–‰ ์ข…์ ์ด ๊ฐ™์Šต๋‹ˆ๋‹ค.'); + } } else { alert('์ž˜๋ชป๋œ ๊ฐ’์ž…๋‹ˆ๋‹ค. ๋‹ค์‹œ ์ž…๋ ฅํ•ด์ฃผ์„ธ์š”.'); } diff --git a/src/controllers/sectionManager.js b/src/controllers/sectionManager.js index 371218935..a27e62e30 100644 --- a/src/controllers/sectionManager.js +++ b/src/controllers/sectionManager.js @@ -37,11 +37,15 @@ const addNewSection = (station, order, selectedLineName, subwayMap) => { const lineList = subwayMap.lineList; const sectionIndex = lineList.findIndex(line => line.name === selectedLineName); const selectedLine = lineList[sectionIndex].list; - if (notFirstOrLast(order, selectedLine) && stationNotInSelectedLine(station, selectedLine)) { - subwayMap.addSection(sectionIndex, order, station); - showAddedSection(selectedLineName, subwayMap); + if (notFirstOrLast(order, selectedLine)) { + if (stationNotInSelectedLine(station, selectedLine)) { + subwayMap.addSection(sectionIndex, order, station); + showAddedSection(selectedLineName, subwayMap); + } else { + alert('์ด๋ฏธ ๋…ธ์„ ์— ์กด์žฌํ•˜๋Š” ์—ญ์ž…๋‹ˆ๋‹ค.'); + } } else { - alert('์ž˜๋ชป๋œ ๊ฐ’์ž…๋‹ˆ๋‹ค. ๋‹ค์‹œ ์ž…๋ ฅํ•ด์ฃผ์„ธ์š”.'); + alert('๊ทธ ์ˆœ์„œ์— ์—ญ์„ ์ถ”๊ฐ€ํ•  ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค.'); } clearFocus(sectionOrderInput); }; diff --git a/src/controllers/stationManager.js b/src/controllers/stationManager.js index 8b4b635ac..d3cd79571 100644 --- a/src/controllers/stationManager.js +++ b/src/controllers/stationManager.js @@ -15,8 +15,8 @@ export const stationAddListener = subwayMap => { }; const addNewStation = (name, subwayMap) => { - if (geTwo(name) && notDuplicateStation(name, subwayMap.stationList)) { - subwayMap.addStation(name); + if (geTwo(name.trim()) && notDuplicateStation(name.trim(), subwayMap.stationList)) { + subwayMap.addStation(name.trim()); showAddedStation(subwayMap); } else { alert('์ž˜๋ชป๋œ ๊ฐ’์ž…๋‹ˆ๋‹ค. ๋‹ค์‹œ ์ž…๋ ฅํ•ด์ฃผ์„ธ์š”.'); diff --git a/src/controllers/validation.js b/src/controllers/validation.js index 0f88a6604..5e293c0fd 100644 --- a/src/controllers/validation.js +++ b/src/controllers/validation.js @@ -2,6 +2,10 @@ export const geTwo = name => { return name.length >= 2; }; +export const gtTwo = selectedLineList => { + return selectedLineList.length > 2; +}; + export const notDuplicateStation = (name, list) => { return !list.includes(name); }; @@ -23,16 +27,9 @@ export const stationNotInLine = (station, lineList) => { }; export const notFirstOrLast = (order, lineList) => { - if (order > 0 && order <= lineList.length - 1) return true; - return false; + return order > 0 && order <= lineList.length - 1; }; export const stationNotInSelectedLine = (station, selectedLineList) => { - if (selectedLineList.includes(station)) return false; - return true; -}; - -export const gtTwo = selectedLineList => { - if (selectedLineList.length > 2) return true; - return false; + return !selectedLineList.includes(station); };