-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
362 lines (344 loc) · 21.3 KB
/
index.html
1
2
3
4
5
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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
<!DOCTYPE html>
<html>
<head>
<title>SKKU_Corona_Map</title>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"
/>
<script
type="text/javascript"
src="https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=78impuwxr0"
></script>
<!-- Bootstrap CSS -->
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6"
crossorigin="anonymous"
/>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css"
/>
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Gothic+A1&family=Noto+Sans+KR:wght@500&display=swap"
rel="stylesheet"
/>
>
<link rel="stylesheet" , href="style.css" />
</head>
<body>
<div id="wrapper">
<div
class="d-inline-flex p-2 bd-highlight"
style="margin-bottom: 0px"
>
<h2 style="margin-top: 10px; background-color: blanchedalmond">
성균관대학교 확진자 동선
</h2>
</div>
<div class="d-flex">
<div class="flex-grow-1 bg-light rounded-2 p-2 me-1 w-50">
<div class="d-inline-flex p-2 bd-highlight">
<h3 style="background-color: #6edf6eb9">인사캠</h3>
</div>
<div id="map1" style="width: 400px; height: 400px"></div>
</div>
<div class="flex-grow-1 bg-light rounded-2 p-2 w-50">
<div class="d-inline-flex p-2 bd-highlight">
<h3 style="background-color: #6edf6eb9">자과캠</h3>
</div>
<div id="map2" style="width: 400px; height: 400px"></div>
</div>
</div>
<div class="dflex">
<div class="d-flex align-items-center mb-2 mt-2">
<input
type="text"
class="form-control"
id="number-input"
placeholder="확진자 번호를 입력하세요."
/>
<button
type="button"
id="add"
class="btn btn-primary ms-1 text-nowrap"
>
Search
</button>
</div>
</div>
<div class="d-flex flex-column mb-3" id="descriptions"></div>
<script>
// 인사캠 지도
var mapOptions1 = {
center: new naver.maps.LatLng(
37.5875515293465,
126.99326325081786
),
zoom: 16,
};
var map1 = new naver.maps.Map("map1", mapOptions1);
var marker_pos1 = {
"600주년기념관": [37.587553261331415, 126.99452495090915],
법학관: [37.58736849120635, 126.9906234845225],
교수회관: [37.58864979264062, 126.9931239356516],
호암관: [37.58848672013139, 126.99193859735817],
중앙학술정보관: [37.58845858419305, 126.99417986957981],
학생회관: [37.58751957778467, 126.99331315067182],
국제관: [37.586846278131034, 126.99512615613428],
양현관: [37.58980928393619, 126.993241635981],
퇴계인문관: [37.589062529160216, 126.99157870768938],
다산경제관: [37.589039970447324, 126.99218841065118],
경영관: [37.588548254194976, 126.99269125302078],
수선관: [37.587830780152174, 126.99077828392309],
"수선관(별관)": [37.58812748077748, 126.99098591935544],
"킹고(K)하우스": [37.58776581894057, 126.9952576872889],
"인터네셔널(I)하우스": [
37.585881037605176, 126.99424078822312,
],
금잔디광장: [37.58794097893494, 126.99297398936812],
대운동장: [37.587477448335264, 126.99165783991585],
};
var markers1 = [];
// 자과캠 지도
var mapOptions2 = {
center: new naver.maps.LatLng(
37.294001573207794,
126.97466660855437
),
zoom: 16,
};
var map2 = new naver.maps.Map("map2", mapOptions2);
var marker_pos2 = {
학생회관: [37.293993391992025, 126.97357585530635],
복지회관: [37.29399104658904, 126.9725387543493],
수성관: [37.29320185217941, 126.97198618068263],
유틸리티센터: [37.29363106421013, 126.97858225709355],
환경플랜트: [37.290983722535245, 126.97526116095953],
건축관리실: [37.29494332904548, 126.9782669655373],
공학실습동A: [37.294205041161376, 126.97807921090859],
"제1공학관 21": [37.29362038029, 126.976448427834],
"제1공학관 22": [37.29384656349899, 126.97710825124348],
"제1공학관 23": [37.294298927876824, 126.97667909780641],
"공학실습동B(24)": [37.29328750565124, 126.97781635441459],
"제2공학관 25": [37.29475982463392, 126.97671664873218],
"제2공학관 26": [37.29499880702589, 126.97745157399308],
"제2공학관 27": [37.29547250202733, 126.97700632730225],
"공학실습동C(28)": [37.294452560447034, 126.9782562366876],
건축환경실험실: [37.29334298486408, 126.97695268312259],
"제1과학관 31": [37.294499503673684, 126.9751931540079],
"제2과학관 32": [37.29496466673989, 126.97495175519954],
화학관: [37.29153775573484, 126.97682930149837],
반도체관: [37.291648716692144, 126.97771443046226],
삼성학술정보관: [37.293923380267664, 126.9748820177734],
운용재: [37.29465313583996, 126.97206033387081],
"기초학문관 51": [37.29537861678552, 126.97437239804557],
약학관: [37.29191331523712, 126.97666836896899],
"생명공학관 61": [37.29589498427068, 126.97399152436994],
"생명공학관 62": [37.29609128832887, 126.97450114407641],
생명공학실습동: [37.29510549537773, 126.97811676181513],
대강당: [37.29233154975799, 126.97238219896532],
의학관: [37.29217364516423, 126.97342289605015],
체육관: [37.292365691246445, 126.9706226698589],
제1종합연구동: [37.292267534417796, 126.97836888946405],
제2종합연구동: [37.2931637441636, 126.97842253364371],
제약기술관: [37.29145240104462, 126.97638405481774],
산학협력센터: [37.29593339161983, 126.9757725111496],
N센터: [37.292032811036016, 126.97564912953719],
학군단: [37.294550714424844, 126.97185112157464],
기숙사인관: [37.29689783659106, 126.97386814275583],
기숙사의관: [37.296923441155926, 126.97458161034491],
기숙사예관: [37.29653083687054, 126.97559012092198],
기숙사지관: [37.296360138711805, 126.97762859977861],
게스트하우스: [37.29579256456275, 126.97777343906363],
기숙사신관: [37.29623638231038, 126.9728542677458],
};
var markers2 = [];
var path_line1 = [];
var path_line2 = [];
// 경로 표시 함수
function mark_path(visited) {
for (var i = 0; markers1.length !== 0; ) {
markers1[i].setMap(null);
markers1.shift();
}
for (var i = 0; markers2.length !== 0; ) {
markers2[i].setMap(null);
markers2.shift();
}
for (var i = 0; path_line1.length !== 0; ) {
path_line1[i].setMap(null);
path_line1.shift();
}
for (var i = 0; path_line2.length !== 0; ) {
path_line2[i].setMap(null);
path_line2.shift();
}
var markers_line1 = [];
var markers_line2 = [];
for (var key in marker_pos1) {
if (visited.includes(key)) {
var position = new naver.maps.LatLng(
marker_pos1[key][0],
marker_pos1[key][1]
);
var marker = new naver.maps.Marker({
map: null,
position: position,
title: key,
});
marker.setMap(map1);
markers_line1.push(position);
markers1.push(marker);
}
}
for (var key in marker_pos2) {
if (visited.includes(key)) {
var position = new naver.maps.LatLng(
marker_pos2[key][0],
marker_pos2[key][1]
);
var marker = new naver.maps.Marker({
map: null,
position: position,
title: key,
});
marker.setMap(map2);
markers_line2.push(position);
markers2.push(marker);
}
}
path1 = new naver.maps.Polyline({
path: markers_line1,
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 3,
map: null,
});
path1.setMap(map1);
path_line1.push(path1);
path2 = new naver.maps.Polyline({
path: markers_line2,
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 3,
map: null,
});
path2.setMap(map2);
path_line2.push(path2);
}
// lib.js에서 추출된 path 데이터
let visited_data = [
[], //52 = 52 + 0
["의학관"], //53
["산학협력센터"], //54
["법학관", "경영관"],
["산학협력센터"],
["양현관", "경영관"],
["교수회관", "중앙학술정보관", "양현관"],
["양현관"],
["중앙학술정보관", "양현관", "경영관"],
["양현관", "경영관", "수선관"],
["양현관", "경영관", "수선관"],
[],
[],
["중앙학술정보관", "경영관"],
[
"제1공학관 22",
"제1공학관 23",
"제2공학관 26",
"기초학문관 51",
"생명공학관 61",
],
[],
["제1공학관 22", "제2공학관 26"],
["호암관", "제1공학관 22", "제2공학관 26"],
["복지회관", "삼성학술정보관"],
["학생회관", "삼성학술정보관"],
[],
[],
[],
[],
["제1공학관 23"],
];
// lib.js에서 추출된 splitedData 데이터
let splitedData = [
"교내 동선은 없습니다.", //52 = 52 + 0
"- 4/1~4/6 의학관 1층 의과대학행정실 근무(주말 제외)", //53 = 52 + 1
"- 4/5~4/9 산학협력센터 6층 85631호(확진자 주요 체류 공간)", //54 = 52 + 2
" '- 4/7(수) 14:45~22:00 법학관 지하1층 대학원열람실', '- 4/7(수) 18:19~18:40 경영관 지하2층 금잔디식당 저녁식사', '- 4/9(금) 15:00~18:30 법학관 지하1층 대학원열람실'", //55 = 52 + 3
"※ 역학조사 결과에 따라 추가로 자가격리대상자가 발생할 수 있습니다.※ 확진자 방문 공간은 금일 오전 긴급방역을 완료하였습니다.■ 산학협력관 동선4/11, 4/14일85773 에너지 변환나노소재 연구실85696 에너지촉매연구실■ 제2 공학관 동선(일시는 건물입구 QR체크시간)4/11~4/1425422 에너지공학 연구실25420 에너지촉매 연구실25429 에너지촉매 연구실26402 화학공학과 대학원 열람실■ 역학조사 결과에 따라 금일 오전11시?부터 내일 아침 08시까지 상기 공간 및 산학협력센터 엘리베이터를 폐쇄합니다.", //56 = 52 + 4
"※ 역학조사 결과에 따라 추가로 자가격리대상자가 발생할 수 있습니다.※ 확진자 방문 공간은 금일 오전 긴급방역을 완료하였습니다.■ 양현관: 4/15~4/17■ 경영관 QR체크 입장시간 (금잔디 식당 이용)- 4/15 12:23, 17:29- 4/16 11:10- 4/17 13:39", //57 = 52 + 5
"※ 역학조사 결과에 따라 추가로 자가격리대상자가 발생할 수 있습니다.※ 확진자 방문 공간은 어제 오후 긴급방역을 완료하였습니다.■ 양현관: 4/15~4/17■ 교수회관 QR체크 입장시간 (옥류천 테이크아웃)- 4/16 07:58■ 중앙학술정보관 3층 QR체크 입장시간 4/16 12:30(도서대출 후 퇴실)※ 양현관 4층 열람실은 보건당국 권고에 따라 임시폐쇄합니다.", //58 = 52 + 66
"- 양현관: 4/16~4/19", // 59 = 52 + 7
"- 양현관: 4/16~4/17- 중앙학술정보관: 4/16 17:51, 18:50(QR체크 입장시간)- 경영관 4/16 18:00(QR체크 입장시간)", //60 = 52 + 8
"- 4/16 수선관 5층(08:31), 양현관 1층(13:17)- 4/17 수선관 5층(09:44~12:30 62701호 특강수강),양현관 1층(13:13), 경영관 1층(13:54~16:00 경영관 지하3층 소극장 특강수강)", //61 = 52 + 9
"- 4/16 양현관 1층(12:24)- 4/17 수선관 5층(09:06~12:30 62701호 특강수강)양현관 1층(13:22), 경영관 1층(13:49~16:00 경영관 지하3층 소극장 특강수강)양현관 1층(17:38~21:50)", //62 = 52 + 10
"교내 동선은 없습니다.", //63 = 52 + 11
"교내 동선은 없습니다.", //64 = 52 + 12
"- 4/19 옥류천식당(08:10), 중앙학술정보관(08:13, 노트북 2열람실), 경영관 금잔디식당(12:06), 중앙학술정보관(12:51, 노트북 제2열람실), 경영관 금잔디식당(17:57), 중앙학술정보관(18:47)- 4/20 옥류천식당(08:10), 중앙학술정보관(08:13), 노트북 2열람실), 경영관 금잔디식당(12:06), 중앙학술정보관(13:06, 노트북 제2열람실)", //65 = 52 + 13
"- - 4/20 생명공학관 61동 1층 정문(14:49), 기초학문관 51308호(15:00~16:15 수업 수강), 제2공학관 26동 26509호(16:30~17:35 수업 수강) , 제1공학관 23동 1층 정문(17:36, 21:18), 제1공학관 22동 22527호(철야)- 4/21 제1공학관 22동 22534호(10:30~16:15 수업 수강)", //66 = 52 + 14
"교내 동선은 없습니다.", //67 = 52 + 15
"- 4/21 제1공학관 22529호(09:12,14:42), 22527호(철야)- 4/22 생명공학관 51207호(14:43), 제2공학관 26509호(16:29), 자연과학관 정문(17:37)", ///68 = 52 + 16
"- 4/21 제1공학관 22529호(09:12,14:42, 14:45, 19:10), 22527호(철야)- 4/22 생명공학관 51206호(14:43, 16:40), 제2공학관 26509호(16:48)- 4/23 호암관 50411호(09:50)", //69 = 52 + 17
"- 4/21 삼성학술정보관(11:48~16:22, 1층 컴넷/3층 서고 /4층 F열람실). 복지회관 정문(14:08)- 4/22 제2연구동 83동 정문(15:23)", // 70 = 52 + 18
"- 4/22 삼성학술정보관(14:28~16:28, 정보검색 Zone-E), 자과캠 학생회관 1층(16:29, 2층 서브웨이 테이크아웃)- 4/23 삼성학술정보관(10:07~13:53, 정보검색 Zone-D), 자과캠 학생회관 1층(11:48 행단골 식사)※ 조금 전 역학조사 완료하였으며, 삼성학술정보관/행단골은 좌석 간 거리두기, 칸막이 설치 등 방역수칙에 따라 운영되어 집단감염확산 우려는 낮은 것으로 ㅍ확인되었습니다.(장안구보건소 접촉자 구분 중이며 개별통지예정)※ 확진자 방문공간은 방역을 완료하였습니다.", // 71 = 52 + 19
"교내 동선은 없습니다.", //72 = 52 + 20
"교내 동선은 없습니다.", //73 = 52 + 21
"교내 동선은 없습니다.", //74 = 52 + 22
"교내 동선은 없습니다.", //75 = 52 + 23
"- 05/17(월) 10:26 및 12:12, 제1공학관 23동 → 23314호※ 당일 확진자 동선 방역소독 시행(23동 3층 공용공간 포함)※ 밀접접촉자는 검사안내 및 개별연락 완료", //76 = 52 + 24
];
// 입력창 관련 event handler
let searchButton = document.querySelector("#add");
let number;
searchButton.addEventListener("click", (event) => {
// Read the text in #number-input.
let input = document.querySelector("#number-input");
let number = input.value;
if (!number.length) return;
else if (isNaN(number))
window.alert(
"잘못된 형식의 입력입니다. 숫자를 입력하세요."
);
else if (number <= 0)
window.alert(
"해당 번호를 가진 확진자는 존재하지 않습니다."
);
else if (number <= 51)
window.alert(
"개인정보보호를 위하여 교내 동선이 비공개 처리되었습니다."
);
// Bring info and make a container to display
else if (number <= 76) {
let descriptions =
document.querySelector("#descriptions");
let description = document.createElement("p-2");
description.style.marginBottom = "10px";
description.style.marginLeft = "5px";
description.style.marginRight = "5px";
description.innerText =
"#" +
number +
"번 확진자\n" +
splitedData[number - 52];
descriptions.appendChild(description);
mark_path(visited_data[number - 52]);
} else
window.alert(
"해당 번호를 가진 확진자는 존재하지 않습니다."
);
// Clear #number-input.
input.value = "";
});
</script>
</div>
</body>
</html>