이유제 / CultureGallery

Go to a project
Toggle navigation Toggle navigation pinning
YujeLee
8725dbd5 1 parent a6872f5c

최종 수정

Inline Side-by-side
Showing 3 changed files with 170 additions and 0 deletions
table{
position: absolute;
z-index: 2;
left:50%;
top: 20vh;
margin-left: -75vh;
width: 150vh;
border-collapse: collapse;
border-spacing: 0;
border-radius: 12px 12px 0 0;
overflow: hidden;
background: #fafafa;
text-align: center;
}
th,td{
padding:12px 15px;
}
th{
background: #303f9f;
color: #fafafa;
text-transform: uppercase;
}
tr:nth-child(odd){
background-color: #eeeeee;
}
.name{
position: absolute;
width: 70vh;
left:50%;
margin-left:-35vh;
}
.question{
position: absolute;
top: 15vh;
width: 40vh;
left: 50%;
margin-left:-15vh;
}
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<title> findpage</title>
<link rel="stylesheet" href='/stylesheets/findPage_style.css' type="text/css">
<script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
<script>
Kakao.init('0678e32dab56db1c52ac63ab4ccb7663')
function sendLink(id){
var data=[];
var strData = "<%= data %>";
var splitData=strData.split(',');
for(var i=0;i<splitData.length;i+=5){
data.push([Number(splitData[i]),splitData[i+1],Number(splitData[i+2]),Number(splitData[i+3]),splitData[i+4],splitData[i+5]]);
}
var index;
for(var i=0;i<data.length;i++){
console.log(data.length);
if(data[i][0]===id){
index=i;
Kakao.Link.sendDefault({
objectType: 'location',
address: `${data[i][5]}`,
addressTitle: `${data[i][1]}`,
content:{
title: `공연 이름: ${data[i][1]}\n공연 위치: ${data[i][5]}`,
description: `${splitData[i+2]}`,
imageUrl:'https://ifh.cc/g/aEvr86.png',
link:{
mobileWebUrl: 'http://naver.com',
webUrl: 'http://naver.com',
},
},
buttons: [
{
title: 'Culture Gallery',
link: {
mobileWebUrl: 'http://naver.com',
webUrl: 'http://naver.com',
},
},
],
})
}
}
}
</script>
</head>
<body>
<h1 class='name'>공연 이름을 검색해보세요!</h1>
<div class = "question">
<input type="text" value='' id="inputText" placeholder="어떤 공연을 찾으시나요?">
<button onclick='find()'>검색</button>
</div>
</div>
<table class="table" >
<tr>
<th>id</th>
<th>행사 이름</th>
<th>시작 날짜</th>
<th>주소</th>
<th>이동하기</th>
</tr>
<tbody id="map-data">
</tbody>
</table>
</div>
<script>
function find(){
var input= document.getElementById('inputText').value;
var dataContainer=document.getElementById('map-data');
var data=[];
var strData = "<%= data %>";
var splitData=strData.split(',');
for(var i=0;i<splitData.length;i+=5){
data.push([Number(splitData[i]),splitData[i+1],Number(splitData[i+2]),Number(splitData[i+3]),splitData[i+4],splitData[i+5]]);
}
for(var i=0;i<data.length;i++){
if(data[i][1].indexOf(input)!=-1){
var row = `<tr>
<td> ${data[i][0]}</td>
<td> ${data[i][1]}</td>
<td> ${data[i][4]}</td>
<td> ${data[i][5]}</td>
<td> <input type="button" onclick="sendLink(${data[i][0]})" value="전송하기"> </td>
</tr>`
dataContainer.innerHTML+=row;
}
}
}
</script>
</body>
</html>
\ No newline at end of file
......@@ -6,6 +6,7 @@ var ejs = require('ejs');
var mapPage = fs.readFileSync('routes/mapPage.ejs', 'utf8');
var findPage = fs.readFileSync('routes/findPage.ejs','utf-8');
var dataNum = 0;
router.get('/mappage', (req, res) => {
......@@ -37,6 +38,35 @@ router.get('/mappage', (req, res) => {
});
});
router.get('/findpage', (req, res) => {
connection.query('SELECT COUNT (*) AS cnt FROM SHOW_DATA', function (error, results, field) {
if (error) {
console.log(error);
}
console.log(results[0].cnt);
dataNum = results[0].cnt;
});
////
connection.query('SELECT * FROM SHOW_DATA', function (error, results, field) {
if (error) {
console.log(error);
} else {
var show_list = [];
for (var i = 0; i < dataNum; i++) {
show_list.push([results[i].id, results[i].oper_name, results[i].latitude, results[i].longitude,results[i].start_day,results[i].where]);
var page = ejs.render(findPage, {
title: "show data",
data: show_list,
dataNum: dataNum,
});
}
res.send(page);
}
});
});
//루트 페이지 (메인페이지)에서 실행됨 : title 할당하고 main.html 띄워줌.
router.get('/', function (req, res, next) {
......