김재현 / open-source-project-2017-02

Go to a project
Toggle navigation Toggle navigation pinning
김재현
9d768be8 2 parents e6b28ced 9bd06312

프론트 부분 머지

Inline Side-by-side
Showing 8 changed files with 220 additions and 104 deletions
......@@ -6,7 +6,7 @@ ul.sidenav {
list-style-type: none;
margin: 0;
padding: 0;
width: 10%;
width: 15%;
background-color: #f1f1f1;
height: 100%;
position: fixed;
......@@ -17,7 +17,6 @@ ul.sidenav li a {
color: #000;
padding: 8px 16px;
text-decoration: none;
transition: 0.3s;
}
ul.sidenav li a.active {
background-color: #4caf50;
......@@ -27,19 +26,33 @@ ul.sidenav li a:hover:not(.active) {
background-color: #555;
color: #fff;
}
#title {
text-align: center;
width: 100%;
font-size: 50px;
padding-bottom: 30px;
}
#content {
margin-left: 25%;
padding: 1px 16px;
padding: 10px 16px;
height: 100%;
}
table {
display: block;
width: 70%;
height: 100%;
border-collapse: collapse;
text-align: center;
vertical-align: middle;
}
td {
vertical-align: middle;
text-align: center;
display: block;
border: 1px solid #ddd;
width: 10%;
height: 0%;
padding-bottom: 20%;
background-image: url("/images/stamp.jpg");
background-repeat: no-repeat;
background-position: center top;
}
.bold {
color: #ffc0cb;
......@@ -49,7 +62,30 @@ td {
color: #808080;
font-size: 8pt;
}
#map{
#show {
width: 15%;
display: inline-block;
float: left;
position: fixed;
overflow: auto;
}
#maintitle {
text-align: center;
background: #ffc0cb;
padding: 8px 16px;
margin-left: 15%;
}
#mynav {
display: block;
margin-left: -250px;
transition: all 0.4s ease-in-out 0s;
}
#mynav.open {
transition: all 0.4s ease-in-out 0s;
float: left;
margin-left: 0px;
}
#map {
height: 400px;
width: 100%;
}
......
body
a
color: gray;
......@@ -7,7 +10,7 @@ ul.sidenav
list-style-type: none;
margin: 0;
padding: 0;
width: 10%;
width: 15%;
background-color: #f1f1f1;
height: 100%;
position : fixed;
......@@ -18,7 +21,6 @@ ul.sidenav li a
color: #000;
padding: 8px 16px;
text-decoration: none;
transition: 0.3s;
ul.sidenav li a.active
......@@ -31,21 +33,33 @@ ul.sidenav li a:hover:not(.active)
color: white;
#title
text-align : center;
width : 100%
font-size : 50px;
padding-bottom : 30px;
#content
margin-left: 25%;
padding: 1px 16px;
padding: 10px 16px;
height: 100%;
table
display : block
width : 70%
height : 100%
width : 70%;
border-collapse: collapse;
text-align : center;
vertical-align : middle;
td
vertical-align: middle;
text-align : center;
display : block
border: 1px solid #ddd;
width : 10%;
height : 0%;
padding-bottom: 20%;
background-image : url("/images/stamp.jpg");
background-repeat: no-repeat;
background-position: center top;
.bold
color : pink;
......@@ -53,3 +67,28 @@ td
.small
color : grey;
font-size : 8pt;
#show
width: 15%;
display : inline-block;
float : left;
position : fixed;
overflow : auto;
#maintitle
text-align : center;
background : pink;
padding: 8px 16px;
margin-left : 15%;
#mynav
display: block;
margin-left: -250px;
transition:all 0.4s ease-in-out 0s;
#mynav.open
transition:all 0.4s ease-in-out 0s;
float:left;
margin-left : 0px;
#map
height: 400px;
width: 100%;
......
......@@ -20,6 +20,9 @@ router.get('/home', function(req,res,next){
res.render('main', {title: '맛집견문록'});
});
router.get('/mybook', function(req, res, next){
var rows = new Array();
......@@ -35,15 +38,24 @@ router.get('/mybook', function(req, res, next){
var temp5 = {name : "와장창창", place : "윌집앞"}
var temp6 = {name : "맛있는 짜장면", place : "너네집앞"}
var temp4 = {name : "네모네모 오징어", place : "영등포경찰서"}
var temp7 = {name : "스타벅스", place : "서울특별시 영등포구 여의도동"}
rows.push(temp1);
rows.push(temp2);
rows.push(temp3);
rows.push(temp4);
rows.push(temp5);
// rows.push(temp3);
// rows.push(temp4);
// rows.push(temp5);
rows.push(temp6);
rows.push(temp7);
res.render('mybook', {title: '견문록 보기', rows : rows});
});
router.get('/test', function(req, res, next){
res.render('test', {title: 'test'});
});
module.exports = router;
......
requestUrl = "http://api.visitkorea.or.kr/openapi/service/rest/KorService/locationBasedList?serviceKey=D0l3YlPyS%2FkOOP6THiiZfSx2sqFsFLD7F14cAj7kqio3k7G%2BPHsb66v2W4C5qOuj7GeEXqjaYsFFZcn%2BLIDItg%3D%3D&numOfRoews=10&startPage=1&MobileOS=ETC&MobileApp=openSource&arrange=A&contenTypeId=15&listYN=Y&radius=10000"
requestNumUrl = "http://api.visitkorea.or.kr/openapi/service/rest/KorService/locationBasedList?serviceKey=D0l3YlPyS%2FkOOP6THiiZfSx2sqFsFLD7F14cAj7kqio3k7G%2BPHsb66v2W4C5qOuj7GeEXqjaYsFFZcn%2BLIDItg%3D%3D&numOfRoews=10&MobileOS=ETC&MobileApp=AppTest&arrange=A&contenTypeId=15&radius=10000&listYN=N"
resultObject = new Array();
function findShops(latitude, longitude) {
//var parameter = "&mapX=" + 126.981611 + "&mapY=" + 37.568477;
pageIndex = 1;
var parameter = "&mapX=" + longitude + "&mapY=" + latitude + "&pageNo=" + pageIndex;
$.ajax({
type: "GET"
,dataType: "xml"
,url: requestUrl + parameter
,success: function(xml){
totalCount = Number($(xml).find("totalCount").text());
for(pageIndex=1; pageIndex<=totalCount/10; pageIndex++)
{
$.ajax({
type: "GET"
,dataType: "xml"
,url: requestUrl + "&mapX=" + longitude + "&mapY=" + latitude + "&pageNo=" + pageIndex
,success: function(xml){
var xmlData = $(xml).find("items item");
var listLength = xmlData.length;
if (listLength) {
$(xmlData).each(function(){
var data = new Object() ;
data.title = $(this).find("title").text()
data.lng = $(this).find("mapx").text()
data.lat = $(this).find("mapy").text()
//console.log(data)
resultObject.push(data);
});
var markers = resultObject.map(function(currentValue, index, array) {
var marker = new google.maps.Marker({
position: {lat: Number(currentValue.lat), lng: Number(currentValue.lng)},
title: currentValue.title,
});
marker.setMap(map);
});
}
}
});
}
}
});
}
......@@ -10,11 +10,18 @@
<script>
$(document).ready(function() {
$('.sidenav').hide();
$('#show').click(function() {
$('.sidenav').slideToggle("fast");
//$('.sidenav').slideToggle("fast");
$this = $(this);
$nav = $('#mynav');
$nav.toggleClass('open');
});
});
......@@ -24,22 +31,22 @@
<div id ="menu">
<div id ="show">clickmenu</div>
<div id ="maintitle">맛집견문록</div>
<div id ="mynav">
<ul class="sidenav">
<li><a class="active" href="home">home</a></li>
<li><a href="map">맛집도장찍기</a></li>
<li><a href="mybook">견문록확인</a></li>
</ul>
</div>
<div id = "header"> </div>
<div id= "title"></div>
<div id ="content">
<h1><%= title %></h1>
......
......@@ -6,59 +6,6 @@
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBTR69UvS1403rvBcM64_8nlzpKLv23RIE&libraries=places"></script>
<script>
requestUrl = "http://api.visitkorea.or.kr/openapi/service/rest/KorService/locationBasedList?serviceKey=D0l3YlPyS%2FkOOP6THiiZfSx2sqFsFLD7F14cAj7kqio3k7G%2BPHsb66v2W4C5qOuj7GeEXqjaYsFFZcn%2BLIDItg%3D%3D&numOfRoews=10&startPage=1&MobileOS=ETC&MobileApp=openSource&arrange=A&contenTypeId=15&listYN=Y&radius=10000"
requestNumUrl = "http://api.visitkorea.or.kr/openapi/service/rest/KorService/locationBasedList?serviceKey=D0l3YlPyS%2FkOOP6THiiZfSx2sqFsFLD7F14cAj7kqio3k7G%2BPHsb66v2W4C5qOuj7GeEXqjaYsFFZcn%2BLIDItg%3D%3D&numOfRoews=10&MobileOS=ETC&MobileApp=AppTest&arrange=A&contenTypeId=15&radius=10000&listYN=N"
resultObject = new Array();
function findShops(latitude, longitude) {
//var parameter = "&mapX=" + 126.981611 + "&mapY=" + 37.568477;
pageIndex = 1;
var parameter = "&mapX=" + longitude + "&mapY=" + latitude + "&pageNo=" + pageIndex;
$.ajax({
type: "GET"
,dataType: "xml"
,url: requestUrl + parameter
,success: function(xml){
totalCount = Number($(xml).find("totalCount").text());
for(pageIndex=1; pageIndex<=totalCount/10; pageIndex++)
{
$.ajax({
type: "GET"
,dataType: "xml"
,url: requestUrl + "&mapX=" + longitude + "&mapY=" + latitude + "&pageNo=" + pageIndex
,success: function(xml){
var xmlData = $(xml).find("items item");
var listLength = xmlData.length;
if (listLength) {
$(xmlData).each(function(){
var data = new Object() ;
data.title = $(this).find("title").text()
data.lng = $(this).find("mapx").text()
data.lat = $(this).find("mapy").text()
//console.log(data)
resultObject.push(data);
});
var markers = resultObject.map(function(currentValue, index, array) {
var marker = new google.maps.Marker({
position: {lat: Number(currentValue.lat), lng: Number(currentValue.lng)},
title: currentValue.title,
});
marker.setMap(map);
});
}
}
});
}
}
});
}
$('.popup').click(function(e){
})
function initMap(latitude, longitude) {
var center = {lat: latitude, lng: longitude};
......@@ -112,7 +59,7 @@
'<h1 id="firstHeading" class="firstHeading">'+place.name+'</h1>'+
'<div id="bodyContent">'+
'<p>주소: '+place.vicinity+'<br/>'+
'<a href="https://localhost:3000/id=297882194">'+
'<a href="https://localhost:3000/id=' + place.id + '">'+
'표시하기</a> '+
'</p>'+
'</div>'+
......@@ -120,6 +67,7 @@
google.maps.event.addListener(marker1, 'click', function(e) {
//console.log(place)
var infowindow = new google.maps.InfoWindow({
content: contentString,
maxWidth: 300
......@@ -140,9 +88,15 @@
}
$(document).ready(function() {
$('.sidenav').hide();
// $('.sidenav').hide();
$('#show').click(function() {
$('.sidenav').slideToggle("fast");
//$('.sidenav').slideToggle("fast");
$this = $(this);
$nav = $('#mynav');
$nav.toggleClass('open');
});
if("geolocation" in navigator) {
......@@ -155,19 +109,24 @@
}
});
</script>
</head>
<body>
<div id ="menu">
<div id ="show">clickmenu</div>
<div id ="maintitle">맛집견문록</div>
<div id ="mynav">
<ul class="sidenav">
<li><a class="active" href="home">home</a></li>
<li><a href="map">맛집도장찍기</a></li>
<li><a href="mybook">견문록확인</a></li>
</ul>
</div>
</div>
<div id = "header"> </div>
<div id = "title"> </div>
<div id ="content">
<div id="map"></div>
......
......@@ -9,11 +9,14 @@
<script>
$(document).ready(function() {
$('.sidenav').hide();
//$('.sidenav').hide();
$('#show').click(function() {
$('.sidenav').slideToggle("fast");
//$('.sidenav').slideToggle("fast");
$this = $(this);
$nav = $('#mynav');
$nav.toggleClass('open');
});
});
......@@ -22,22 +25,24 @@
<div id ="menu">
<div id ="show">clickmenu</div>
<div id ="maintitle">맛집견문록</div>
<div id ="mynav">
<ul class="sidenav">
<li><a class="active" href="home">home</a></li>
<li><a href="map">맛집도장찍기</a></li>
<li><a href="mybook">견문록확인</a></li>
</ul>
</div>
</div>
<div id = "title">
ㅇㅇㅇ님의 맛집 견문록<br/>
<div id = "header"> </div>
</div>
<div id ="content">
......@@ -45,31 +50,39 @@
<%
for( var i=0; i<rows.length; i++)
for(var i=0; i<rows.length; i++)
{
var oneItem = rows[i];
for( var j = 0; j<3; j++){
num = i * 3 + j;
var item = rows[num];
%>
<%if(i==0){ %>
<tr>
<td><p class="bold"><%=i%>:a <%=oneItem.name%></p>
<p class="small"><%=oneItem.place%></p></td>
%>
<%} else if (i%3==0){%>
</tr>
<tr>
<td><p class="bold"><%=num%> : <%=item.name%></p>
<td><p class="bold"><%=i%>:b <%=oneItem.name%></p>
<p class="small"><%=oneItem.place%></p></td>
<p class="small"><%=item.place%></p></td>
<%}else if(i%3!=0 && i!=rows.length-1){%>
<% } %>
<td><p class="bold"><%=i%>:c <%=oneItem.name%></p>
<p class="small"><%=oneItem.place%></p></td>
</tr>
<%}else{%>
<td><p class="bold"><%=i%>:c <%=oneItem.name%></p>
<p class="small"><%=oneItem.place%></p></td></tr>
<%}}%>
<%
}
%>
</table>
......@@ -83,6 +96,7 @@
</body>
</html>
......