김서연 / Corona_Vaccination_Medical_Institution

Go to a project
Toggle navigation Toggle navigation pinning
김서연
30e900ea 1 parent f1f2439e

UI크기 조절과 기관정보전처리 및 출력

Inline Side-by-side
Showing 3 changed files with 53 additions and 12 deletions
...@@ -6,7 +6,7 @@ var app =express(); ...@@ -6,7 +6,7 @@ var app =express();
6 app.set('view engine','ejs'); 6 app.set('view engine','ejs');
7 app.set('views','./views') 7 app.set('views','./views')
8 app.use(express.urlencoded( {extended : false } )); 8 app.use(express.urlencoded( {extended : false } ));
9 - 9 +app.use(express.static(__dirname + '/public'));
10 app.locals.pretty=true; 10 app.locals.pretty=true;
11 11
12 // app.set('view engine','pug'); 12 // app.set('view engine','pug');
...@@ -41,8 +41,22 @@ app.post('/',function(req,res,next){ ...@@ -41,8 +41,22 @@ app.post('/',function(req,res,next){
41 41
42 // console.log(searchList); 42 // console.log(searchList);
43 //result라는 변수에 담아 결과 보내기 43 //result라는 변수에 담아 결과 보내기
44 - var hey = searchList[0].orgZipaddr.split(','); 44 + // var hey = searchList[0].orgZipaddr.split(',');
45 - res.render('index', {result:JSON.stringify(searchList) }); 45 + var timeList=[];
46 + for(var i=0; i<searchList.length; i++){ //시간정보 파싱
47 + var eachtime=[];
48 + console.log(searchList[i]);
49 + eachtime.push(searchList[i].lunchSttTm.substr(0,2));
50 + eachtime.push(searchList[i].lunchSttTm.substr(2,2));
51 + eachtime.push(searchList[i].lunchEndTm.substr(0,2));
52 + eachtime.push(searchList[i].lunchEndTm.substr(2,2));
53 + eachtime.push(searchList[i].sttTm.substr(0,2));
54 + eachtime.push(searchList[i].sttTm.substr(2,2));
55 + eachtime.push(searchList[i].endTm.substr(0,2));
56 + eachtime.push(searchList[i].endTm.substr(2,2));
57 + timeList.push(eachtime);
58 + }
59 + res.render('index', {result:JSON.stringify(searchList),info:searchList ,timeList:timeList});
46 60
47 }) 61 })
48 62
......
1 +/* #placeList li{list-style: none;}
2 +#placesList .item {position:relative;border-bottom:1px solid #888;overflow: hidden;cursor: pointer;min-height: 65px;}
3 +#placesList .item span {display: block;margin-top:4px;}
4 +#placesList .item h5, #placesList .item .info {text-overflow: ellipsis;overflow: hidden;white-space: nowrap;}
5 +#placesList .info .gray {color:#8a8a8a;}
6 +#placesList .info .jibun {padding-left:26px;background:url(https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/places_jibun.png) no-repeat;}
7 +#placesList .info .tel {color:#009900;} */
...\ No newline at end of file ...\ No newline at end of file
...@@ -4,20 +4,40 @@ ...@@ -4,20 +4,40 @@
4 <meta charset="utf-8"> 4 <meta charset="utf-8">
5 <title>여러개 마커에 이벤트 등록하기1</title> 5 <title>여러개 마커에 이벤트 등록하기1</title>
6 6
7 + <!-- <link rel="stylesheet" href="/css/master.css"> -->
8 +
7 </head> 9 </head>
8 <body> 10 <body>
11 + <center>
12 + <h1>COVID-19 예방접종 위탁 의료기관 조회</h1>
13 + <form action="/" method="post">
14 + <p>
15 + <input type="text" name="region" placeholder="지역을 입력하세요" size="15"/>
16 + <button type="submit">검색</button>
17 + </p>
18 + </form>
9 19
10 - <h1>COVID-19 의료기관 검색하기</h1> 20 + <div id="map" style="width:1300px;height:600px;"></div>
11 - <form action="/" method="post"> 21 + </center>
12 - <p>
13 - <input type="text" name="region" placeholder="서울시"/>
14 - <input type="submit"/>
15 - </p>
16 - </form>
17 22
18 - <div id="map" style="width:700px;height:400px;"></div>
19 <script type="text/javascript" src="https://dapi.kakao.com/v2/maps/sdk.js?appkey=35fccf4b4e2a3179187346f26ed3f988&libraries=services"></script> 23 <script type="text/javascript" src="https://dapi.kakao.com/v2/maps/sdk.js?appkey=35fccf4b4e2a3179187346f26ed3f988&libraries=services"></script>
20 24
25 + <% if(typeof(info) != "undefined"){ %>
26 + <ul id="placelist">
27 + <% for(i=0; i<info.length; i++){%>
28 + <li class="item">
29 + <div class="info">
30 + <h5>기관명 : <%= info[i].orgnm%></h5>
31 + <span>점심시간 : <%=timeList[i][0]%>:<%=timeList[i][1]%>~<%=timeList[i][2]%>:<%=timeList[i][3] %></span>
32 + <span>진료시간 : <%=timeList[i][4]%>:<%=timeList[i][5]%>~<%=timeList[i][6]%>:<%=timeList[i][7] %></span>
33 + <span class="jibun gray">기관주소 : <%=info[i].orgZipaddr%></span>
34 + <span class="tel"><%=info[i].orgTlno%></span>
35 + </div>
36 + </li>
37 + <%} %>
38 + </ul>
39 + <%} %>
40 +
21 <% if(typeof(result) != "undefined"){ %> 41 <% if(typeof(result) != "undefined"){ %>
22 <script> 42 <script>
23 var mapContainer = document.getElementById('map'), // 지도를 표시할 div 43 var mapContainer = document.getElementById('map'), // 지도를 표시할 div
...@@ -57,7 +77,7 @@ ...@@ -57,7 +77,7 @@
57 77
58 // 인포윈도우를 생성합니다 78 // 인포윈도우를 생성합니다
59 var infowindow = new kakao.maps.InfoWindow({ 79 var infowindow = new kakao.maps.InfoWindow({
60 - content: '<div style="width:150px;text-align:center;padding:6px 0;">' + '기관명:' + addr.orgnm + '</div>', 80 + content: '<div style="width:250px;text-align:center;padding:5px 0;">' + '기관명: ' + addr.orgnm + '</div>',
61 }); 81 });
62 // 마커에 mouseover 이벤트와 mouseout 이벤트를 등록합니다 82 // 마커에 mouseover 이벤트와 mouseout 이벤트를 등록합니다
63 // 이벤트 리스너로는 클로저를 만들어 등록합니다 83 // 이벤트 리스너로는 클로저를 만들어 등록합니다
......