canvas を使って簡単な在席表を作ってみました。
プログラム
index.html
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<script src="zaiseki.js"></script>
<title>在席表</title>
</head>
<body>
<div>
<canvas id="bar_area" width="400" height="600"></canvas>
</div>
<hr />
version Aug/02/2022 AM 09:00<p />
</body>
</html>
zaiseki.js
// -------------------------------------------------------------------------
// zaiseki.js
//
// Aug/02/2023
// -------------------------------------------------------------------------
// jQuery (function ()
window.onload = ()=>
{
const file_json = "status.json"
read_fetch_proc(file_json)
}
// -------------------------------------------------------------------------
function read_fetch_proc(url)
{
fetch(url).then((response) => {
if(!response.ok) {
console.log('Read error!')
throw new Error('error')
}
console.log('Read ok!')
return response.text()
}).then((data) => {
// console.log(data)
const dict_aa = JSON.parse(data)
display_proc (dict_aa)
})
}
// -------------------------------------------------------------------------
// [4]:
function display_proc (dict_aa)
{
var bar = document.getElementById('bar_area')
var ctx = bar.getContext('2d')
ctx.font = "18px 'ＭＳ Ｐゴシック'"
ctx.strokeStyle = "black"
const delt_y = 40
const xx = 100
var yy = 30
ctx.strokeText("在席表",xx + 20,yy)
yy = 70
ctx.strokeStyle = "blue"
for (var key in dict_aa)
{
const unit = dict_aa[key]
ctx.strokeText(unit.name,xx,yy)
var color = 'red'
if (unit.office)
{
color = 'green'
}
draw_circle_proc (ctx,xx+100,yy-8,color)
yy += delt_y
}
}
// -------------------------------------------------------------------------
// [4-4]:
function draw_circle_proc (ctx,xx,yy,color)
{
const radius = 10
ctx.beginPath()
ctx.fillStyle = color
ctx.arc (xx,yy,radius,0,Math.PI*2,false)
ctx.fill()
ctx.closePath()
ctx.stroke()
}
// -------------------------------------------------------------------------
データ
status.json
{
"id0001": {"name": "中島","office": true},
"id0002": {"name": "長谷川","office": false},
"id0003": {"name": "藤田","office": false},
"id0004": {"name": "青山","office": true},
"id0005": {"name": "川上","office": true},
"id0006": {"name": "吉田","office": true},
"id0007": {"name": "小林","office": false},
"id0008": {"name": "坂本","office": true},
"id0009": {"name": "安藤","office": false},
"id0010": {"name": "中村","office": true}
}