LI WENHAO / TFT

Go to a project
Toggle navigation Toggle navigation pinning
서준혁
e1fe1466 1 parent 1c394206

Add district, festival selector

Expand all
Inline Side-by-side
Showing 18 changed files with 497 additions and 232 deletions
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
1 <script> 1 <script>
2 - import Menu from './Menu.svelte' 2 + import Menu from './Menu.svelte';
3 - import Backtotop from './Side/Backtotop.svelte' 3 + import Backtotop from './SideItems/Backtotop.svelte';
4 - import Map from './Map.svelte' 4 + import Map from './Map.svelte';
5 - import Article from './Articles.svelte' 5 + import Article from './Articles.svelte';
6 - import Festalist from './Side/Festalist.svelte'; 6 + import { AllFestas } from './Stores/AllFestas';
7 - import Areaset from './Side/Areaset.svelte'; 7 + import jQuery from 'jquery';
8 + import { DisplayedFestas } from './Stores/DisplayedFestas';
9 +
10 + function LoadFestas() {
11 + let url = "http://api.visitkorea.or.kr/openapi/service/rest/KorService/areaBasedList?ServiceKey=2lFkvQJYgzOOhwUKiUt8aZVNpd1PpBOf%2FfMNW17cl25DE0GUEDddeR9iGnuSUpggjUoIUgamfhcvnKQ3eH1dAw%3D%3D&contentTypeId=15&areaCode=&sigunguCode=&cat1=&cat2=&cat3=&listYN=Y&MobileOS=ETC&MobileApp=TourAPI3.0_Guide&arrange=A&numOfRows=12&pageNo=1&_type=json";
12 + jQuery.getJSON(url, (json) => {
13 + AllFestas.set(json.response.body.items.item);
14 + });
15 + }
8 </script> 16 </script>
9 17
10 <style> 18 <style>
...@@ -29,10 +37,9 @@ ...@@ -29,10 +37,9 @@
29 37
30 </style> 38 </style>
31 39
40 +<svelte:window on:load|once={LoadFestas}></svelte:window>
32 <div> 41 <div>
33 <Menu/> 42 <Menu/>
34 - <Festalist/>
35 - <Areaset/>
36 <Map/> 43 <Map/>
37 <Backtotop/> 44 <Backtotop/>
38 <Article/> 45 <Article/>
......
This diff is collapsed. Click to expand it.
1 +export let DISTRICTS = {
2 + "name": "korea-administrative-district",
3 + "version": "20160125",
4 + "url": "https://github.com/cosmosfarm/korea-administrative-district",
5 + "data":[
6 + {"미선택":[
7 + "미선택"
8 + ]},
9 + {"서울특별시":[
10 + "미선택", "종로구", "중구", "용산구", "성동구", "광진구", "동대문구", "중랑구", "성북구", "강북구", "도봉구", "노원구", "은평구", "서대문구", "마포구", "양천구", "강서구", "구로구", "금천구", "영등포구", "동작구", "관악구", "서초구", "강남구", "송파구", "강동구"
11 + ]},
12 + {"부산광역시":[
13 + "미선택", "중구", "서구", "동구", "영도구", "부산진구", "동래구", "남구", "북구", "강서구", "해운대구", "사하구", "금정구", "연제구", "수영구", "사상구", "기장군"
14 + ]},
15 + {"인천광역시":[
16 + "미선택", "중구", "동구", "남구", "연수구", "남동구", "부평구", "계양구", "서구", "강화군", "옹진군"
17 + ]},
18 + {"대구광역시":[
19 + "미선택", "중구", "동구", "서구", "남구", "북구", "수성구", "달서구", "달성군"
20 + ]},
21 + {"광주광역시":[
22 + "미선택", "동구", "서구", "남구", "북구", "광산구"
23 + ]},
24 + {"대전광역시":[
25 + "미선택", "동구", "중구", "서구", "유성구", "대덕구"
26 + ]},
27 + {"울산광역시":[
28 + "미선택", "중구", "남구", "동구", "북구", "울주군"
29 + ]},
30 + {"세종특별자치시":[
31 + "미선택", "세종특별자치시"
32 + ]},
33 + {"경기도":[
34 + "미선택", "가평군", "고양시", "과천시", "광명시", "광주시", "구리시", "군포시", "김포시", "남양주시", "동두천시", "부천시", "성남시", "수원시", "시흥시", "안산시", "안성시", "안양시", "양주시", "양평군", "여주시", "연천군", "오산시", "용인시", "의왕시", "의정부시", "이천시", "파주시", "평택시", "포천시", "하남시", "화성시"
35 + ]},
36 + {"강원도":[
37 + "미선택", "원주시", "춘천시", "강릉시", "동해시", "속초시", "삼척시", "홍천군", "태백시", "철원군", "횡성군", "평창군", "영월군", "정선군", "인제군", "고성군", "양양군", "화천군", "양구군"
38 + ]},
39 + {"충청북도":[
40 + "미선택", "청주시", "충주시", "제천시", "보은군", "옥천군", "영동군", "증평군", "진천군", "괴산군", "음성군", "단양군"
41 + ]},
42 + {"충청남도":[
43 + "미선택", "천안시", "공주시", "보령시", "아산시", "서산시", "논산시", "계룡시", "당진시", "금산군", "부여군", "서천군", "청양군", "홍성군", "예산군", "태안군"
44 + ]},
45 + {"경상북도":[
46 + "미선택", "포항시", "경주시", "김천시", "안동시", "구미시", "영주시", "영천시", "상주시", "문경시", "경산시", "군위군", "의성군", "청송군", "영양군", "영덕군", "청도군", "고령군", "성주군", "칠곡군", "예천군", "봉화군", "울진군", "울릉군"
47 + ]},
48 + {"경상남도":[
49 + "미선택", "창원시", "김해시", "진주시", "양산시", "거제시", "통영시", "사천시", "밀양시", "함안군", "거창군", "창녕군", "고성군", "하동군", "합천군", "남해군", "함양군", "산청군", "의령군"
50 + ]},
51 + {"전라북도":[
52 + "미선택", "전주시", "익산시", "군산시", "정읍시", "완주군", "김제시", "남원시", "고창군", "부안군", "임실군", "순창군", "진안군", "장수군", "무주군"
53 + ]},
54 + {"전라남도":[
55 + "미선택", "여수시", "순천시", "목포시", "광양시", "나주시", "무안군", "해남군", "고흥군", "화순군", "영암군", "영광군", "완도군", "담양군", "장성군", "보성군", "신안군", "장흥군", "강진군", "함평군", "진도군", "곡성군", "구례군"
56 + ]},
57 + {"제주특별자치도":[
58 + "미선택", "제주시", "서귀포시"
59 + ]}
60 + ]
61 +}
...\ No newline at end of file ...\ No newline at end of file
...@@ -21,15 +21,21 @@ ...@@ -21,15 +21,21 @@
21 </style> 21 </style>
22 22
23 <script> 23 <script>
24 - import jQuery from 'jquery'; 24 + import Info from './SideItems/Info.svelte';
25 - import Info from './Side/Info.svelte'; 25 + import Festalist from './SideItems/Festalist.svelte';
26 + import Arealist from './SideItems/Arealist.svelte';
27 + import { COORDINATES } from "./Data/coordinates";
28 + import { DisplayedFestas } from "./Stores/DisplayedFestas";
26 29
27 var {kakao} = window; 30 var {kakao} = window;
28 - var url = "http://api.visitkorea.or.kr/openapi/service/rest/KorService/areaBasedList?ServiceKey=2lFkvQJYgzOOhwUKiUt8aZVNpd1PpBOf%2FfMNW17cl25DE0GUEDddeR9iGnuSUpggjUoIUgamfhcvnKQ3eH1dAw%3D%3D&contentTypeId=15&areaCode=&sigunguCode=&cat1=&cat2=&cat3=&listYN=Y&MobileOS=ETC&MobileApp=TourAPI3.0_Guide&arrange=A&numOfRows=12&pageNo=1&_type=json";
29 31
30 - let ShowInfo = false; 32 + var ShowArea = false;
31 - let Festa = {}; 33 + var ShowFesta = false;
32 - var markers= []; 34 + var ShowInfo = false;
35 +
36 + var Festa = {};
37 + var markers = [];
38 + var infowindows = [];
33 var map; 39 var map;
34 40
35 function createMap() { 41 function createMap() {
...@@ -42,15 +48,21 @@ ...@@ -42,15 +48,21 @@
42 48
43 markers= []; 49 markers= [];
44 map = new kakao.maps.Map(mapContainer, mapOption); // 카카오 지도 50 map = new kakao.maps.Map(mapContainer, mapOption); // 카카오 지도
45 -
46 - // 임시로 관광공사에서 JSON 직접 불러와서 하는 중
47 - jQuery.getJSON(url, (json) => {drawMarkers( json.response.body.items.item )});
48 } 51 }
49 52
53 + $: drawMarkers($DisplayedFestas);
50 54
51 function drawMarkers (data) { 55 function drawMarkers (data) {
52 let len = data.length >= 9 ? 9 : data.length; 56 let len = data.length >= 9 ? 9 : data.length;
53 57
58 + markers.forEach( mk => {
59 + mk.setMap(null);
60 + });
61 + infowindows.forEach( iw => {
62 + iw.close();
63 + });
64 + markers, infowindows = [], [];
65 +
54 for(var i = 0; i < len; i++){ 66 for(var i = 0; i < len; i++){
55 // 지도에 마커를 생성하고 표시한다 67 // 지도에 마커를 생성하고 표시한다
56 let marker = new kakao.maps.Marker({ 68 let marker = new kakao.maps.Marker({
...@@ -58,7 +70,10 @@ ...@@ -58,7 +70,10 @@
58 map: map // 마커를 표시할 지도 객체 70 map: map // 마커를 표시할 지도 객체
59 }); 71 });
60 72
61 - markers.push(marker); 73 + let infowindow = new kakao.maps.InfoWindow({
74 + content : '<div style="padding:5px;white-space:nowrap;">' + data[i].title + '</div>' // 인포윈도우에 표시할 내용
75 + });
76 + infowindow.open(map, marker);
62 77
63 // 마커 클릭 시 이벤트 78 // 마커 클릭 시 이벤트
64 let showInfo = function(festa) { 79 let showInfo = function(festa) {
...@@ -68,22 +83,31 @@ ...@@ -68,22 +83,31 @@
68 console.log(Festa); 83 console.log(Festa);
69 } 84 }
70 }; 85 };
86 + kakao.maps.event.addListener(marker, 'click', showInfo(data[i]));
87 + infowindows.push(infowindow);
88 + markers.push(marker);
71 89
72 - kakao.maps.event.addListener(markers[i], 'click', showInfo(data[i]));
73 }; 90 };
91 + }
74 92
75 - // 마커 위에 표시할 인포윈도우를 생성한다 93 + function moveTo(district, city) {
76 - for(var i = 0; i<9;i++) { // 왜 9까지 밖에 안되누 ㅠㅠ 94 + let [x, y, level] = COORDINATES[district][city];
77 - let infowindow = new kakao.maps.InfoWindow({ 95 + var moveLatLon = new kakao.maps.LatLng(y, x);
78 - content : '<div style="padding:5px;">' + data[i].title + '</div>' // 인포윈도우에 표시할 내용 96 + map.setLevel(level);
79 - }); 97 + map.panTo(moveLatLon);
80 - infowindow.open(map, markers[i]);
81 } 98 }
99 +
100 + function closeBars() {
101 + ShowArea = false;
102 + ShowFesta = false;
103 + ShowInfo = false;
82 } 104 }
105 +
83 </script> 106 </script>
84 107
85 <svelte:window on:load={createMap}></svelte:window> 108 <svelte:window on:load={createMap}></svelte:window>
86 - 109 +<Festalist bind:sidebar_show={ShowFesta}/>
110 +<Arealist bind:sidebar_show={ShowArea} {moveTo}/>
87 <Info bind:sidebar_show={ShowInfo} bind:festa={Festa}/> 111 <Info bind:sidebar_show={ShowInfo} bind:festa={Festa}/>
88 <div id="map_bg"> 112 <div id="map_bg">
89 <div id="map"></div> 113 <div id="map"></div>
......
1 -<script>
2 - import { fly } from 'svelte/transition'
3 - import SideBar from './SideBar.svelte';
4 - let show = true;
5 - let sidebar_show = false;
6 -
7 - function showBar() {
8 - sidebar_show = !sidebar_show;
9 - }
10 -
11 - function hide() {
12 - if (window.scrollY < 400) {
13 - show = true
14 - } else {
15 - show = false
16 - }
17 - }
18 -
19 -</script>
20 -
21 -<style>
22 - .sidebtn {
23 - border-radius: 5px;
24 - border: 0px;
25 - width: 70px;
26 - height: 70px;
27 - position: fixed;
28 - left: -20px;
29 - top: 18.5%;
30 - padding-right: 10px;
31 - text-align: right;
32 - background-color: #b71c1c;
33 - color: #ffffff;
34 - }
35 -
36 - .sidebtn:focus {
37 - background-color: #ef5350;
38 - }
39 -
40 - .sidebtn:hover {
41 - background-color: #d32f2f;
42 - }
43 -
44 -</style>
45 -
46 -<svelte:window on:scroll={hide}></svelte:window>
47 -
48 -{#if (show)}
49 - <button class="sidebtn"
50 - transition:fly="{{ x : -50, duration : 400}}"
51 - on:click={showBar}>
52 - 지역<br>선택
53 - </button>
54 - <SideBar bind:show={sidebar_show}>
55 - 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br>
56 - 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br>
57 - 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br>
58 - 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br>
59 - 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br>
60 - 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br>
61 - 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br>
62 - 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br>
63 - 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br>
64 - 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br>
65 - 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br>
66 - 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br>
67 - 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br>
68 - 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br>
69 - 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br>
70 - 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br>
71 - 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br>
72 - 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br>
73 - 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br>
74 - 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br>
75 - 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br>
76 - 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br>
77 - 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br> 지역선택!<br>
78 - </SideBar>
79 -{/if}
...\ No newline at end of file ...\ No newline at end of file
1 -<script>
2 - import { fly } from 'svelte/transition'
3 - import SideBar from './SideBar.svelte';
4 - let show = true;
5 - let sidebar_show = false;
6 -
7 - function showBar() {
8 - sidebar_show = !sidebar_show;
9 - }
10 -
11 - function hide() {
12 - if (window.scrollY < 400) {
13 - show = true
14 - } else {
15 - show = false
16 - }
17 - }
18 -
19 -</script>
20 -
21 -<style>
22 - .sidebtn {
23 - border-radius: 5px;
24 - border: 0px;
25 - width: 70px;
26 - height: 70px;
27 - position: fixed;
28 - left: -20px;
29 - top: 10%;
30 - padding-right: 10px;
31 - text-align: right;
32 - background-color: #e65100;
33 - color: #ffffff;
34 - }
35 -
36 - .sidebtn:focus {
37 - background-color: #f57c00;
38 - }
39 -
40 - .sidebtn:hover {
41 - background-color: #ef6c00;
42 - }
43 -
44 -</style>
45 -
46 -<svelte:window on:scroll={hide}></svelte:window>
47 -
48 -{#if (show)}
49 - <button class="sidebtn"
50 - transition:fly="{{ x : -50, duration : 400}}"
51 - on:click={showBar}>
52 - 행사<br>목록
53 - </button>
54 - <SideBar bind:show={sidebar_show}>행사목록!</SideBar>
55 -{/if}
...\ No newline at end of file ...\ No newline at end of file
1 +<script>
2 + import { fly } from 'svelte/transition'
3 + import SideBar from './SideBar.svelte';
4 + var icon_show = true;
5 + var sidebar_show = false;
6 +
7 + function showBar() {
8 + sidebar_show = true;
9 + }
10 +
11 + function hide() {
12 + if (window.scrollY < 400) {
13 + icon_show = true;
14 + } else {
15 + icon_show = false;
16 + sidebar_show = false;
17 + }
18 + }
19 +
20 + import { DISTRICTS } from '../Data/district'
21 + import { District, City, Changed } from '../Stores/DistrictStore'
22 +
23 + export var moveTo;
24 +
25 + let curDisrict = {"미선택" : ["미선택"]};
26 + let curCity = "미선택";
27 +
28 + $: if(Object.keys(curDisrict)[0] != "미선택") {
29 + District.set(Object.keys(curDisrict)[0]);
30 + } else {
31 + District.set("");
32 + };
33 +
34 + $: if(curCity != "미선택") {
35 + City.set(curCity);
36 + } else {
37 + City.set("");
38 + }
39 +
40 + function setDistrict(district) {
41 + curDisrict = district;
42 + if(Object.keys(curDisrict)[0] == "세종특별자치시")
43 + curCity = "세종특별자치시";
44 + else
45 + curCity = "미선택";
46 + moveTo(Object.keys(curDisrict)[0], curCity);
47 + Changed.set(true);
48 + }
49 +
50 + function setCity(city) {
51 + curCity = city;
52 + moveTo(Object.keys(curDisrict)[0], curCity);
53 + Changed.set(true);
54 + }
55 +
56 +</script>
57 +
58 +<style>
59 + .sidebtn {
60 + border-radius: 5px;
61 + border: 0px;
62 + width: 70px;
63 + height: 70px;
64 + position: fixed;
65 + left: -20px;
66 + top: 120px;
67 + padding-right: 10px;
68 + text-align: right;
69 + background-color: #b71c1c;
70 + color: #ffffff;
71 + box-shadow: 0 10px 20px rgb(0 0 0 / 15%);
72 + }
73 +
74 + .sidebtn:focus {
75 + background-color: #ef5350;
76 + }
77 +
78 + .sidebtn:hover {
79 + background-color: #d32f2f;
80 + }
81 +
82 + .areas {
83 + display: flex;
84 + border-bottom: #999999 solid 1px;
85 + width: 100%;
86 + flex-wrap: wrap;
87 + justify-content: space-evenly;
88 + }
89 +
90 + .areatitle {
91 + display: inline-block;
92 + text-align:center;
93 + width: 200px;
94 + }
95 +
96 + .district {
97 + display: inline-block;
98 + text-align:center;
99 + width: 125px;
100 + margin: 5px;
101 + border: 1px solid black;
102 + border-radius: 5px;
103 + padding-top: 5px;
104 + padding-bottom: 5px;
105 + }
106 +
107 + .district:hover {
108 + background-color: #ffebee;
109 + }
110 +
111 + .district:focus {
112 + background-color: #ffcdd2;
113 + }
114 +
115 + .district.selected{
116 + background-color: #ffcdd2;
117 + }
118 +
119 + .city {
120 + display: inline-block;
121 + text-align:center;
122 + width: 125px;
123 + margin: 5px;
124 + border: 1px solid black;
125 + border-radius: 5px;
126 + padding-top: 5px;
127 + padding-bottom: 5px;
128 + }
129 +
130 + .city:hover {
131 + background-color: #ffebee;
132 + }
133 +
134 + .city:focus {
135 + background-color: #ffcdd2;
136 + }
137 +
138 + .city.selected{
139 + background-color: #ffcdd2;
140 + }
141 +
142 +</style>
143 +
144 +<svelte:window on:scroll={hide}></svelte:window>
145 +
146 +{#if (icon_show)}
147 + <button class="sidebtn"
148 + transition:fly="{{ x : -50, duration : 400}}"
149 + on:click={showBar}>
150 + 지역<br>선택
151 + </button>
152 +{/if}
153 +<SideBar bind:show={sidebar_show}>
154 + <div class="areas">
155 + <div class="areatitle">광역시/도</div>
156 + {#each DISTRICTS.data as d}
157 + <div class="{Object.keys(curDisrict)[0] == Object.keys(d)[0] ? 'district selected' : 'district'}"
158 + on:click={() => {setDistrict(d)}}>
159 + {Object.keys(d)[0]}
160 + </div><br>
161 + {/each}
162 + </div><br>
163 + <div class="areas">
164 + <div class="areatitle">시/군/구</div>
165 + {#each curDisrict[Object.keys(curDisrict)[0]] as c}
166 + <div class="{curCity == c ? 'city selected' : 'city'}"
167 + on:click={() => {setCity(c)}}>
168 + {c}
169 + </div><br>
170 + {/each}
171 + </div>
172 +</SideBar>
...\ No newline at end of file ...\ No newline at end of file
1 +<script>
2 + import { fly } from 'svelte/transition'
3 + import SideBar from './SideBar.svelte';
4 + let icon_show = true;
5 + let sidebar_show = false;
6 +
7 + function showBar() {
8 + sidebar_show = true;
9 + }
10 +
11 + function hide() {
12 + if (window.scrollY < 400) {
13 + icon_show = true;
14 + } else {
15 + icon_show = false;
16 + sidebar_show = false;
17 + }
18 + }
19 +
20 + import { District, City, Changed } from '../Stores/DistrictStore';
21 + import { AllFestas } from "../Stores/AllFestas";
22 + import { DisplayedFestas } from "../Stores/DisplayedFestas";
23 +
24 + let festaChecked = [];
25 + $: festaList = $AllFestas.filter( v => {
26 + if(v.addr1) {
27 + let district = v.addr1.split(" ")[0];
28 + let city = v.addr1.split(" ")[1];
29 + return ($District === "" || district === $District) &&
30 + ($City === "" || city === $City);
31 + } else {
32 + return false;
33 + }
34 + });
35 + $: festaParsed = festaList.map( (v, i) => {
36 + return { "id" : i, "title" : v.title, "addr1" : v.addr1, "contentid" : v.contentid, "checked" : false }
37 + });
38 + $: if ($Changed) {
39 + let len = festaList.length >= 9 ? 9 : festaList.length;
40 + festaChecked = [];
41 + for(let i = 0; i < len; i++)
42 + check(i);
43 + }
44 + $: DisplayedFestas.set(festaChecked);
45 +
46 + function check(idx) {
47 + if (!festaParsed[idx].checked) {
48 + if(festaChecked.length <= 8) {
49 + festaParsed[idx].checked = true;
50 + festaChecked = festaChecked.concat(festaList[idx]);
51 + } else {
52 + alert("9개 이상 선택하실 수 없습니다.");
53 + }
54 + } else {
55 + festaParsed[idx].checked = false;
56 + festaChecked = festaChecked.filter( v => {
57 + return v.contentid !== festaParsed[idx].contentid;
58 + });
59 + }
60 + }
61 +</script>
62 +
63 +<style>
64 + .sidebtn {
65 + border-radius: 5px;
66 + border: 0px;
67 + width: 70px;
68 + height: 70px;
69 + position: fixed;
70 + left: -20px;
71 + top: 200px;
72 + padding-right: 10px;
73 + text-align: right;
74 + background-color: #e65100;
75 + color: #ffffff;
76 + box-shadow: 0 10px 20px rgb(0 0 0 / 15%);
77 + }
78 +
79 + .sidebtn:focus {
80 + background-color: #f57c00;
81 + }
82 +
83 + .sidebtn:hover {
84 + background-color: #ef6c00;
85 + }
86 +
87 + .festa {
88 + border: 1px solid #aaa;
89 + border-radius: 2px;
90 + box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
91 + padding: 2px;
92 + margin-bottom: 5px;
93 + }
94 +
95 + .festa:hover {
96 + background-color: #fff3e0;
97 + }
98 +
99 + .festa:focus {
100 + background-color: #ffe0b2;
101 + }
102 +
103 + .selected {
104 + background-color: #ffe0b2;
105 + border: 1px solid #aaa;
106 + border-radius: 2px;
107 + box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
108 + padding: 2px;
109 + margin-bottom: 5px;
110 + }
111 +
112 + .title {
113 + font-weight: bold;
114 + border-bottom: 2px solid #ff3e00;
115 + }
116 +
117 + .addr {
118 + display: flex;
119 + align-items: center;
120 + }
121 +
122 + .addr img {
123 + width: 20px;
124 + height: 20px;
125 + }
126 +
127 +</style>
128 +
129 +<svelte:window on:scroll={hide}></svelte:window>
130 +
131 +{#if (icon_show)}
132 + <button class="sidebtn"
133 + transition:fly="{{ x : -50, duration : 400}}"
134 + on:click={showBar}>
135 + 행사<br>목록
136 + </button>
137 +{/if}
138 +<SideBar bind:show={sidebar_show}>
139 +
140 + {#if festaParsed.length > 0}
141 + {#each festaParsed as festa}
142 + <div class="{festa.checked ? "selected" : "festa"}"
143 + on:click={() => {check(festa.id)}}>
144 + <div class="title">{festa.title}</div>
145 + <div class="addr"><img alt="pin" src="/public/map-pin.png"><div>{festa.addr1}</div></div>
146 + </div>
147 + {/each}
148 + {:else}
149 + 개최되는 축제가 없습니다.
150 + {/if}
151 +
152 +</SideBar>
...\ No newline at end of file ...\ No newline at end of file
...@@ -6,10 +6,8 @@ ...@@ -6,10 +6,8 @@
6 let side = "right"; 6 let side = "right";
7 7
8 function hide() { 8 function hide() {
9 - if (window.scrollY < 400) { 9 + if (window.scrollY > 400) {
10 - sidebar_show = true 10 + sidebar_show = false;
11 - } else {
12 - sidebar_show = false
13 } 11 }
14 } 12 }
15 </script> 13 </script>
......
...@@ -8,6 +8,7 @@ ...@@ -8,6 +8,7 @@
8 <style> 8 <style>
9 .nav { 9 .nav {
10 overflow-y: auto; 10 overflow-y: auto;
11 + overflow-x: hidden;
11 } 12 }
12 13
13 .left { 14 .left {
...@@ -15,13 +16,12 @@ ...@@ -15,13 +16,12 @@
15 top: 0; 16 top: 0;
16 left: 0; 17 left: 0;
17 height: 100%; 18 height: 100%;
18 - /* padding: 2rem 1rem 0.6rem; */
19 border-right: 1px solid #aaa; 19 border-right: 1px solid #aaa;
20 background: #fff; 20 background: #fff;
21 overflow-y: auto; 21 overflow-y: auto;
22 - padding: 2rem 1rem 0.6rem;
23 width: 330px; 22 width: 330px;
24 z-index: 900; 23 z-index: 900;
24 + white-space: pre-line;
25 } 25 }
26 26
27 .right { 27 .right {
...@@ -29,7 +29,6 @@ ...@@ -29,7 +29,6 @@
29 top: 0; 29 top: 0;
30 right: 0; 30 right: 0;
31 height: 100%; 31 height: 100%;
32 - padding: 2rem 1rem 0.6rem;
33 border-left: 1px solid #aaa; 32 border-left: 1px solid #aaa;
34 background: #fff; 33 background: #fff;
35 overflow-y: auto; 34 overflow-y: auto;
...@@ -37,21 +36,36 @@ ...@@ -37,21 +36,36 @@
37 z-index: 900; 36 z-index: 900;
38 } 37 }
39 38
40 - .background { 39 + .navtop {
41 - position: fixed; 40 + display: flex;
42 - top: 0;
43 - left: 0;
44 width: 100%; 41 width: 100%;
45 - height: 100%; 42 + height: 60px;
46 - z-index: 700; 43 + background-color: white;
44 + font-size: 30pt;
45 + color: #AAAAAA;
46 + justify-content: right;
47 + padding: 5px 5px 5px;
48 + border-bottom: #999999 solid 1px;
49 + }
50 +
51 + .navitems {
52 + display: flex;
53 + padding: 2rem 1rem 0.6rem;
54 + flex-direction: column
47 } 55 }
48 56
49 </style> 57 </style>
50 58
51 {#if show} 59 {#if show}
52 - <div class="background" on:click={() => {show = false;}}></div>
53 <nav class={"nav " + side} transition:fly={{x: (side == "left" ? -400 : 400), opacity: 1, duration: 800}}> 60 <nav class={"nav " + side} transition:fly={{x: (side == "left" ? -400 : 400), opacity: 1, duration: 800}}>
61 + <div class="navtop" on:click={() => {show = false;}}
62 + style="justify-content:{side == "left" ? "right" : "left"}; cursor:pointer;">
63 + { side == "left" ? "＜" : "＞" }
64 + </div>
65 + <div class="navitems">
54 <slot> 66 <slot>
67 +
55 </slot> 68 </slot>
69 + </div>
56 </nav> 70 </nav>
57 {/if} 71 {/if}
...\ No newline at end of file ...\ No newline at end of file
......
1 +import { writable } from 'svelte/store';
2 +
3 +function create() {
4 + const { subscribe, set } = writable([]);
5 +
6 + return {
7 + subscribe,
8 + set: (e) => set(e),
9 + }
10 +}
11 +
12 +export const AllFestas = create();
...\ No newline at end of file ...\ No newline at end of file
1 +import { writable } from 'svelte/store';
2 +
3 +function create() {
4 + const { subscribe, set} = writable([]);
5 +
6 + return {
7 + subscribe,
8 + set: (e) => set(e),
9 + }
10 +}
11 +
12 +export const DisplayedFestas = create();
...\ No newline at end of file ...\ No newline at end of file
1 +import { writable } from 'svelte/store';
2 +
3 +export const District = writable("미선택");
4 +export const City = writable("미선택");
5 +export const Changed = writable("true");
...\ No newline at end of file ...\ No newline at end of file
1 -export let district = {
2 - "name": "korea-administrative-district",
3 - "version": "20160125",
4 - "url": "https://github.com/cosmosfarm/korea-administrative-district",
5 - "data":[
6 - {"서울특별시":[
7 - "종로구", "중구", "용산구", "성동구", "광진구", "동대문구", "중랑구", "성북구", "강북구", "도봉구", "노원구", "은평구", "서대문구", "마포구", "양천구", "강서구", "구로구", "금천구", "영등포구", "동작구", "관악구", "서초구", "강남구", "송파구", "강동구"
8 - ]},
9 - {"부산광역시":[
10 - "중구", "서구", "동구", "영도구", "부산진구", "동래구", "남구", "북구", "강서구", "해운대구", "사하구", "금정구", "연제구", "수영구", "사상구", "기장군"
11 - ]},
12 - {"인천광역시":[
13 - "중구", "동구", "남구", "연수구", "남동구", "부평구", "계양구", "서구", "강화군", "옹진군"
14 - ]},
15 - {"대구광역시":[
16 - "중구", "동구", "서구", "남구", "북구", "수성구", "달서구", "달성군"
17 - ]},
18 - {"광주광역시":[
19 - "동구", "서구", "남구", "북구", "광산구"
20 - ]},
21 - {"대전광역시":[
22 - "동구", "중구", "서구", "유성구", "대덕구"
23 - ]},
24 - {"울산광역시":[
25 - "중구", "남구", "동구", "북구", "울주군"
26 - ]},
27 - {"세종특별자치시":[
28 -
29 - ]},
30 - {"경기도":[
31 - "가평군", "고양시", "과천시", "광명시", "광주시", "구리시", "군포시", "김포시", "남양주시", "동두천시", "부천시", "성남시", "수원시", "시흥시", "안산시", "안성시", "안양시", "양주시", "양평군", "여주시", "연천군", "오산시", "용인시", "의왕시", "의정부시", "이천시", "파주시", "평택시", "포천시", "하남시", "화성시"
32 - ]},
33 - {"강원도":[
34 - "원주시", "춘천시", "강릉시", "동해시", "속초시", "삼척시", "홍천군", "태백시", "철원군", "횡성군", "평창군", "영월군", "정선군", "인제군", "고성군", "양양군", "화천군", "양구군"
35 - ]},
36 - {"충청북도":[
37 - "청주시", "충주시", "제천시", "보은군", "옥천군", "영동군", "증평군", "진천군", "괴산군", "음성군", "단양군"
38 - ]},
39 - {"충청남도":[
40 - "천안시", "공주시", "보령시", "아산시", "서산시", "논산시", "계룡시", "당진시", "금산군", "부여군", "서천군", "청양군", "홍성군", "예산군", "태안군"
41 - ]},
42 - {"경상북도":[
43 - "포항시", "경주시", "김천시", "안동시", "구미시", "영주시", "영천시", "상주시", "문경시", "경산시", "군위군", "의성군", "청송군", "영양군", "영덕군", "청도군", "고령군", "성주군", "칠곡군", "예천군", "봉화군", "울진군", "울릉군"
44 - ]},
45 - {"경상남도":[
46 - "창원시", "김해시", "진주시", "양산시", "거제시", "통영시", "사천시", "밀양시", "함안군", "거창군", "창녕군", "고성군", "하동군", "합천군", "남해군", "함양군", "산청군", "의령군"
47 - ]},
48 - {"전라북도":[
49 - "전주시", "익산시", "군산시", "정읍시", "완주군", "김제시", "남원시", "고창군", "부안군", "임실군", "순창군", "진안군", "장수군", "무주군"
50 - ]},
51 - {"전라남도":[
52 - "여수시", "순천시", "목포시", "광양시", "나주시", "무안군", "해남군", "고흥군", "화순군", "영암군", "영광군", "완도군", "담양군", "장성군", "보성군", "신안군", "장흥군", "강진군", "함평군", "진도군", "곡성군", "구례군"
53 - ]},
54 - {"제주특별자치도":[
55 - "제주시", "서귀포시"
56 - ]}
57 - ]
58 -}
...\ No newline at end of file ...\ No newline at end of file