canvas で作る在席表 #JavaScript

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}
}