t510599/210-seat
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Add show seat page

Browse Source
This commit is contained in:
t510599 2019-04-18 01:00:22 +08:00
parent b72333550e
commit 4bca82b1f7
2 changed files with 81 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
web/routes/index.js
View File

@ -45,6 +45,11 @@ router.post('/', function(req, res, next){
});
});
router.get('/show', function(req, res, next) {
var seats = JSON.parse(fs.readFileSync(path.resolve(__dirname, "../../cli/seats.txt"), 'utf8'));
res.render('show', { title: '自己選自己的', seats: seats});
});
router.get('/login', function(req, res, next) {
if (req.session.stdno) {
return res.redirect('.');

76
web/views/show.ejs Normal file
View File

@ -0,0 +1,76 @@
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title><%= title %></title>
<meta charset="UTF-8">
<!-- Tocas UI：CSS 與元件 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tocas-ui/2.3.3/tocas.css">
<!-- Tocas JS：模塊與 JavaScript 函式 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/tocas-ui/2.3.3/tocas.js"></script>
<style>
.main {
padding: 4em 0;
}
.highlight {
background-color: yellow !important;
}
</style>
</head>
<body>
<div class="ts main container">
<div class="ts grid" style="margin-bottom: 1em;">
<div class="stretched column">
<div class="ts header">
210 選（？）座位系統
</div>
</div>
<div class="column">
<a class="ts button" href="./login">登入</a>
</div>
</div>
<div class="ts container" style="overflow-x: auto">
<table class="ts center aligned basic celled table">
<thead>
<tr>
<th colspan="<%= seats[0].length %>">講台</th>
</tr>
</thead>
<tbody>
<% seats.forEach(function (row){ %>
<tr>
<% row.forEach(function (no){ %>
<td><%= (no != 0) ? no : "X" %></td>
<% }); %>
</tr>
<% }); %>
</tbody>
</table>
<div class="ts horizontal section divider">
<span class="text">我是分隔線</span>
</div>
<div class="ts fluid action input">
<input type="text" placeholder="座號" pattern="^\d$" id="input">
<button class="ts button" id="button">搜尋</button>
</div>
</div>
</div>
<script>
document.querySelector('#button').addEventListener('click', function () {
let seats = document.querySelector('tbody');
let target = document.querySelector('#input').value;
for (let i = 0; i < seats.children.length; i++) {
for (let j = 0; j < seats.children[i].children.length; j++) {
if (seats.children[i].children[j].innerText == target && target != "X") {
seats.children[i].children[j].classList.toggle('highlight', true);
} else {
seats.children[i].children[j].classList.toggle('highlight', false);
}
}
}
});
</script>
</body>
</html>