Merge branch 'integrated#3_ksy' into 'master'

Integrated#3 ksy See merge request !14

Merge branch 'integrated#3_ksy' into 'master'
Integrated#3 ksy See merge request !14
김서연
Commit a40f83884d0ec322de480d52ed1c6360cc859951 a40f8388 2 parents ee7029c4 125c33eb
Showing 3 changed files with 63 additions and 16 deletions
app.js
public/css/master.css
views/index.ejs
--- a/app.js
View file @a40f838
+++ b/app.js
View file @a40f838
@@ -6,7 +6,7 @@ var app =express();
 app.set('view engine','ejs');
 app.set('views','./views')
 app.use(express.urlencoded( {extended : false } ));
-
+app.use(express.static(__dirname + '/public'));
 app.locals.pretty=true;
 // app.set('view engine','pug');
@@ -41,8 +41,22 @@ app.post('/',function(req,res,next){
         // console.log(searchList);
         //result라는 변수에 담아 결과 보내기 
-        var hey = searchList[0].orgZipaddr.split(',');
+        // var hey = searchList[0].orgZipaddr.split(',');
-        res.render('index', {result:JSON.stringify(searchList) });
+        var timeList=[];
+        for(var i=0; i<searchList.length; i++){ //시간정보 파싱 
+            var eachtime=[];
+            console.log(searchList[i]);
+            eachtime.push(searchList[i].lunchSttTm.substr(0,2));
+            eachtime.push(searchList[i].lunchSttTm.substr(2,2));
+            eachtime.push(searchList[i].lunchEndTm.substr(0,2));
+            eachtime.push(searchList[i].lunchEndTm.substr(2,2));
+            eachtime.push(searchList[i].sttTm.substr(0,2));
+            eachtime.push(searchList[i].sttTm.substr(2,2));
+            eachtime.push(searchList[i].endTm.substr(0,2));
+            eachtime.push(searchList[i].endTm.substr(2,2));
+            timeList.push(eachtime);
+        }
+        res.render('index', {result:JSON.stringify(searchList),info:searchList ,timeList:timeList});
     })
--- a/public/css/master.css 0 → 100644
View file @a40f838
+++ b/public/css/master.css 0 → 100644
View file @a40f838
+/* #placeList li{list-style: none;}
+#placesList .item {position:relative;border-bottom:1px solid #888;overflow: hidden;cursor: pointer;min-height: 65px;}
+#placesList .item span {display: block;margin-top:4px;}
+#placesList .item h5, #placesList .item .info {text-overflow: ellipsis;overflow: hidden;white-space: nowrap;}
+#placesList .info .gray {color:#8a8a8a;}
+#placesList .info .jibun {padding-left:26px;background:url(https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/places_jibun.png) no-repeat;}
+#placesList .info .tel {color:#009900;} */
\ No newline at end of file
--- a/views/index.ejs
View file @a40f838
+++ b/views/index.ejs
View file @a40f838
@@ -4,26 +4,51 @@
     <meta charset="utf-8">
     <title>여러개 마커에 이벤트 등록하기1</title>
+    <!-- <link rel="stylesheet" href="/css/master.css"> -->
+
 </head>
 <body>
-
+    <center>
-    <h1>COVID-19 의료기관 검색하기</h1>
+        <h1>COVID-19 예방접종 위탁 의료기관 조회</h1> <br><hr>
-    <form action="/" method="post">
+        <form action="/" method="post">
-      <p> 
+        <p> 
-        <input type="text" name="region" placeholder="서울시"/>
+            <br>
-        <input type="submit"/>
+            <div style="float:right; margin-right:250px;margin-right:70px; margin-bottom:7px;">
-      </p>
+                <input type="text" style="width:450px;height:30px;font-size:20px;" name="region" placeholder="지역을 입력하세요" size="20"/>
-    </form>
+                <button type="submit" style="height:35px;font-size:20px;">검색</button> 
-
+            </div>
-    <div id="map" style="width:700px;height:400px;"></div>  
+            
+        </p>
+        </form>
+    </center>
+    <div id="map" style="width:1300px;height:750px; margin-left:100px; float:left; " ></div>  
     <script type="text/javascript" src="https://dapi.kakao.com/v2/maps/sdk.js?appkey=35fccf4b4e2a3179187346f26ed3f988&libraries=services"></script>
+    <% if(typeof(info) != "undefined"){ %>
+    <div style="overflow:scroll; width:500px; height:675px; padding:10px;float:right; margin-right:70px; border:1px solid black;">
+        <ol id="placelist">
+            <% for(i=0; i<info.length; i++){%>
+            <li class="item">
+                <div class="info">
+                    <span><strong><%= info[i].orgnm%></strong></span><br>
+                    <span>점심시간 : <%=timeList[i][0]%>:<%=timeList[i][1]%>~<%=timeList[i][2]%>:<%=timeList[i][3] %></span><br>
+                    <span>진료시간 : <%=timeList[i][4]%>:<%=timeList[i][5]%>~<%=timeList[i][6]%>:<%=timeList[i][7] %></span><br>
+                    <span style="color:gray" class="jibun gray"><%=info[i].orgZipaddr%></span><br>
+                    <span style="color:blue" class="tel"><%=info[i].orgTlno%></span><br>
+                </div>
+                <hr>
+            </li>
+            <%} %>
+        </ul>
+    </div>
+    <%} %>
+    
     <% if(typeof(result) != "undefined"){ %>
    <script>
     var mapContainer = document.getElementById('map'), // 지도를 표시할 div  
         mapOption = { 
             center: new kakao.maps.LatLng(37.596672, 127.051950), // 지도의 중심좌표
-            level: 3 // 지도의 확대 레벨
+            level: 2 // 지도의 확대 레벨
         };
     var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
@@ -55,9 +80,10 @@
                     // 마커를 지도에 표시합니다. 
                     marker.setMap(map); 
+                    var num=1;
                     // 인포윈도우를 생성합니다 
                     var infowindow = new kakao.maps.InfoWindow({
-                        content: '<div style="width:150px;text-align:center;padding:6px 0;">' + '기관명:' + addr.orgnm + '</div>',
+                        content: '<div style="width:250px;text-align:center;padding:5px 0;">' + addr.orgnm + '</div>',
                     }); 
                     // 마커에 mouseover 이벤트와 mouseout 이벤트를 등록합니다
                     // 이벤트 리스너로는 클로저를 만들어 등록합니다 
@@ -67,7 +93,7 @@
                         map.setCenter(coords);
                     }
                     // 지도의 중심을 결과값으로 받은 위치로 이동시킵니다
-                    map.setCenter(coords);
+                    // map.setCenter(coords);
                     //console.log(listData.length);
             }
         });