FastAPI: クライアントのページ

こちらで作成した FastAPI のクライアントです。
[FastAPI: シリアルポートの制御](https://qiita.com/ekzemplaro/items/07b410fa47e8c7167c02)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/695e523f-adca-889a-40be-e6f23880a2bc.png)

```html:index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<script src="led_serial.js"></script>
<link rel="stylesheet" href="css/led_serial.css">
<title>LED Serial</title>
</head>

<body>
<h2>LED Serial</h2><p />
<blockquote>
	<button id="red"  onclick="dispatch_proc(this)">Red</button>
	<button id="yellow"  onclick="dispatch_proc(this)">Yellow</button>
	<button id="green"  onclick="dispatch_proc(this)">Green</button>
	<button id="blue"  onclick="dispatch_proc(this)">Blue</button>
</blockquote>

<div class="contents"></div>
<p />
<hr />

<hr />
<div id="outarea_aa">outarea_aa</div>
<div id="outarea_bb">outarea_bb</div>
<div id="outarea_cc">outarea_cc</div>
<div id="outarea_dd">outarea_dd</div>
<div id="outarea_ee">outarea_ee</div>
<div id="outarea_ff">outarea_ff</div>
<div id="outarea_gg">outarea_gg</div>
<div id="outarea_hh">outarea_hh</div>

<hr />
Sep/25/2022 AM 11:21<p>
</body>
</html>
```

```js:led_serial.js
// -----------------------------------------------------------------------
//	led_serial.js
//
//					Sep/24/2022
//
// -----------------------------------------------------------------------
'use strict'
// -----------------------------------------------------------------------
window.onload = ()=>{

	document.querySelector("#outarea_aa").innerHTML = "*** led_serial *** start ***"


	document.querySelector("#outarea_hh").innerHTML = "*** led_serial *** end ***"
}

// -----------------------------------------------------------------------
// [8]:
function dispatch_proc(obj)
{
	const key = obj.id


	document.querySelector("#outarea_bb").innerHTML = key + " clicked ***"

	const matches = document.querySelectorAll("button")

	console.log("matches.length = " + matches.length)
	for (var it=0; it < matches.length; it += 1)
		{
		const id = matches[it].id
		console.log("id = " + id)
		const elemx = document.getElementById(id)
		elemx.style.color = 'black'
		}

	const elem = document.getElementById(key)
	elem.style.color = 'blue'

	serial_send_proc(key)
}

// -----------------------------------------------------------------------
function serial_send_proc(color)
{
	document.querySelector("#outarea_cc").innerHTML = color + " ***"
	const url_target = "http://127.0.0.1:8000/led"

	var data = {}
	data["color"] = color

const params = {method : "POST", mode : 'cors', 
headers: { 'Content-Type': 'application/json' },
body : JSON.stringify(data)}
// const params = {method : "POST", mode : 'cors', body : JSON.stringify({color: "blue"})}

fetch(url_target,params
    ).then((response) => {
        if(!response.ok) {
            console.log('*** error! ***')
		console.log(JSON.stringify(data))
        } 
        console.log('ok!');
        return response.json();
    }).then((data)  => {
        console.log(data);
    }).catch((error) => {
        console.log(error);
    });

}

// -----------------------------------------------------------------------
```

```css:css/led_serial.css
/* -------------------------------------------------------------- */
/*

	led_serial.css

						Aug/24/2020

*/
/* -------------------------------------------------------------- */
table.main,td,th {
table-layout:fixed;
border:1.5px #7e7e7e solid;
border-collapse: collapse;
height: 16px;
}

th {
	background: #c6c6c6;
}


table.tag {
border:0.5px green solid;
}

tr.cyan {
	background-color: #c7d7c7;
}

.red {color:#ff0000;}

/* -------------------------------------------------------------- */
```