서준혁

Add district, festival selector

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