node.js로 좌석예매 만들고 있는데
회색 박스안에 숫자 쉽게 넣는 방법있음?
코드
const express = require("express");
const socketio = require("socket.io");
const fs = require("fs");
let seats = [
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
];
const app = express();
const PORT = 3000;
const server = app.listen(PORT, () => {
console.log(PORT, "번 포트 실행");
});
const io = socketio(server);
app.get("/", (req, res) => {
fs.readFile("page.html", (err, data) => {
res.send(data.toString());
});
});
app.get("/seats", (req, res) => {
res.send(seats);
})
io.sockets.on("connection", (socket) => {
socket.on("reserve", (data) => {
seats[data.y][data.x] = 2;
io.sockets.emit("reserve", data);
});
});
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page</title>
<style>
.line {
overflow: hidden;
}
.seat {
margin: 2px;
float: left;
width: 30px;
height: 30px;
border-radius: 3px;
}
.enable {
background-color: gray;
}
.enable:hover{
background-color: lightgray;
}
.disable {
background-color: red;
}
</style>
<script src="/socket.io/socket.io.js"></script>;
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>;
</head>
<body>
<div></div>
</body>
<script>
const socket = io.connect();
socket.on("reserve", (data) => {
let $target = $("div[data-x ="+data.x+"][data-y ="+data.y+"]");
$target.removeClass("enable");
$target.addClass("disable");
});
$(window).ready(function(){
const onClickSeat = function(){
if($(this).hasClass("disable")){
return;
}
let x = $(this).attr("data-x");
let y = $(this).attr("data-y");
if (confirm("이 좌석을 예매 하시나요?")){
socket.emit("reserve",{
x, y
});
} else {
alert("취소 되었습니다.");
};
};
$.getJSON('/seats', {dummy : new Date().getTime()}, (data) => {
$.each(data, (indexY, line) => {
let $line = $("<div></div>").addClass("line");
$.each(line, (indexX, seat) => {
`
<div class="line">
<div class="seats" data-x="indexX" data-y="indexY"></div>
</div>
`
let $output = $("<div></div>", {
class : "seat",
"data-x" : indexX,
"data-y" : indexY,
}).appendTo($line);
if (seat == 1) {
$output.addClass("enable").on("click", onClickSeat);
} else if (seat == 2) {
$output.addClass("disable");
}
});
$line.appendTo("body");
});
});
});
</script>
</html>
