-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathmanager.html
More file actions
145 lines (139 loc) · 7.27 KB
/
manager.html
File metadata and controls
145 lines (139 loc) · 7.27 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<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">
<link rel="stylesheet" href="manager.css"/>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Space+Mono&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Gothic+A1:wght@400;800&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Syncopate&display=swap" rel="stylesheet">
<title>자리 안내 서비스</title>
</head>
<body>
<div id="title">
<h1 class="title_font"><a href="https://github.com/LeeJinSoo-BIN/BINARY-ESG"
style="color:white; font-size: medium; margin-right: 10px; text-decoration-line: none;">MANAGER</a>
NOW U SEAT Me <span id="manager">MANAGER</span></h1>
</div>
<div id="gridseatinfo">
<p id="seatinfo" class="font">잔여좌석 안내</p>
<p class="font"><span style="color:rgb(254, 65, 65)">●</span> 이용중 : <span th:text="${seatNumber.fullSeat}"></span>석
</p>
<p class="font"><span style="color:rgb(61, 171, 49)">●</span> 이용 가능 : <span
th:text="${seatNumber.emptySeat}"></span>석</p>
<p class="font"><span style="color:rgb(238, 221, 64)">●</span> 자리 비움 : <span
th:text="${seatNumber.awaySeat}"></span>석</p>
</div>
<div id="grid_backmap">
<div>
<div id="backmap">
<div id="window">
<p class="font">창가</p>
</div>
<div id="gridmap">
<div>
<p id="studyroom" class="font">스터디룸</p>
</div>
<div>
<div id="seats" class="button_font">
<div th:each="seat : ${seats}" th:switch="${seat.status.toString()}">
<button th:case="EMPTY" class="seatbutton emptyseat"
th:onclick="'document.getElementById(\'id' + ${seat.seatNum} + '\').style.display=\'block\''"
th:text="${seat.seatNum}">
</button>
<button th:case="AWAY" class="seatbutton helpseat"
th:onclick="'document.getElementById(\'id' + ${seat.seatNum} + '\').style.display=\'block\''"
th:text="${seat.seatNum}">
</button>
<button th:case="FULL" class="seatbutton usingseat"
th:onclick="'document.getElementById(\'id' + ${seat.seatNum} + '\').style.display=\'block\''"
th:text="${seat.seatNum}">
</button>
<div th:id="'id' + ${seat.seatNum}" class="modal">
<span th:onclick="'document.getElementById(\'id' + ${seat.seatNum} + '\').style.display=\'block\''"
title="Close Modal">×</span>
<form class="modal-content" action="/home">
<div class="container">
<h1>자리 상태 변경</h1>
<p>자리 상태를 변경 하시겠습니까?</p>
<div class="clearfix">
<button type="button"
th:onclick="'document.getElementById(\'id' + ${seat.seatNum} + '\').style.display=\'none\''"
th:class="'change-empty' + ${seat.seatNum} + ' emptyseatbtn'">이용
가능으로 변경
</button>
<button type="button"
th:onclick="'document.getElementById(\'id' + ${seat.seatNum} + '\').style.display=\'none\''"
th:class="'change-away' + ${seat.seatNum} + ' helpseatbtn'">자리 비움으로
변경
</button>
<button type="button"
th:onclick="'document.getElementById(\'id' + ${seat.seatNum} + '\').style.display=\'none\''"
th:class="'change-full' + ${seat.seatNum} + ' usingseatbtn'">이용 중으로
변경
</button>
<button type="button"
th:onclick="'document.getElementById(\'id' + ${seat.seatNum} + '\').style.display=\'none\''"
class="cancelbtn">취소
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="admin_alam" class="requestMessageForm">
<p class="alam_name font">알림창</p>
<div class="alam" th:each="message : ${messages}">
<p class="alam_text" th:text="${message.sendTime}"></p>
<p class="alam_text" th:text="${message.seatNum} + '번 좌석 자리비움 요청'"></p>
</div>
</div>
</div>
<div class="text"></div>
<script src='/js/home.js'></script>
<script src='https://code.jquery.com/jquery-3.6.0.min.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sockjs-client/1.1.5/sockjs.min.js"></script>
<script>
$(function () {
var inputMessage = $('.requestMessageForm');
var changeEmptyBtn = [];
for (let i = 1; i <= 8; i++) {
changeEmptyBtn[i] = $('.change-empty' + i);
}
var changeAwayBtn = [];
for (let i = 1; i <= 8; i++) {
changeAwayBtn[i] = $('.change-away' + i);
}
var changeFullBtn = [];
for (let i = 1; i <= 8; i++) {
changeFullBtn[i] = $('.change-full' + i);
}
var sock = new SockJS("/ws");
sock.onopen = function () {
sock.onmessage = function (e) {
window.location.reload();
}
}
for (let i = 1; i <= 8; i++) {
changeEmptyBtn[i].click(function () {
sock.send(JSON.stringify({seatNum: i, messageType: 'CHANGE-EMPTY'}));
});
changeAwayBtn[i].click(function () {
sock.send(JSON.stringify({seatNum: i, messageType: 'CHANGE-AWAY'}));
});
changeFullBtn[i].click(function () {
sock.send(JSON.stringify({seatNum: i, messageType: 'CHANGE-FULL'}));
});
}
})
</script>
</body>
</html>