<!doctype html>
<html>
<head>
<script>
function status(msg) {
document.getElementById('status').textContent = msg
}
async function queryParams() {
const resp = await fetch('/api/params')
//console.log(json)
//console.log(Object.keys(json))
if (!resp.ok) {
var err_msg = null
if (resp.body != null) {
err_msg = await resp.text()
}
if (err_msg != null) {
status("query failed: " + resp.status + " " + err_msg)
} else {
status("query failed: " + resp.status)
}
}
const json = await resp.json()
status('parameter query successful!')
const paramList = document.getElementById('param-list')
while (paramList.firstChild) {
paramList.removeChild(paramList.lastChild)
}
Object.keys(json).forEach((name) => {
const elem = document.createElement('div')
elem.textContent = name + " = " + json[name]
paramList.appendChild(elem)
})
}
async function setParam(auth, name, value) {
const msg = JSON.stringify({
auth: auth,
data: {
set_params: {
name: name,
value: value
}
}
})
const resp = await fetch('/api/admin', {
method: 'POST',
body: msg
})
if (!resp.ok) {
var err_msg = null
if (resp.body != null) {
err_msg = await resp.text()
}
if (err_msg != null) {
status("set failed: " + resp.status + " " + err_msg)
} else {
status("set failed: " + resp.status)
}
} else {
status("parameter set successful!")
await queryParams()
}
}
var manual_mode = false
var manual_loop_running = false
const sleep = (ms) => new Promise(r => setTimeout(r, ms))
async function manualModeLoop(auth) {
if (manual_loop_running) return
manual_loop_running = true
try {
while (manual_mode) {
await sleep(30*1000)
if (manual_mode) await manualMode(auth, manual_mode)
}
} finally {
manual_loop_running = false
}
}
async function manualMode(auth, on) {
const msg = JSON.stringify({
auth: auth,
data: {
manual_mode: on
}
})
const resp = await fetch('/api/admin', {
method: 'POST',
body: msg
})
if (!resp.ok) {
var err_msg = null
if (resp.body != null) {
err_msg = await resp.text()
}
if (err_msg != null) {
status("manual mode set failed: " + resp.status + " " + err_msg)
} else {
status("manual mode set failed: " + resp.status)
}
} else {
status("manual mode set successful!")
manual_mode = on
if (manual_mode) {
manualModeLoop(auth)
}
//await queryParams()
}
}
async function manualHumidifier(auth, on) {
const msg = JSON.stringify({
auth: auth,
data: {
manual_mode_on: on
}
})
const resp = await fetch('/api/admin', {
method: 'POST',
body: msg
})
if (!resp.ok) {
var err_msg = null
if (resp.body != null) {
err_msg = await resp.text()
}
if (err_msg != null) {
status("manual hum set failed: " + resp.status + " " + err_msg)
} else {
status("manual hum set failed: " + resp.status)
}
} else {
status("manual hum set successful!")
}
}
window.onload = () => {
document.getElementById('query-params').addEventListener('click', (e) => {
queryParams()
})
document.getElementById('set-param').addEventListener('click', (e) => {
const auth = document.getElementById('password').value
const name = document.getElementById('name').value
const value = parseFloat(document.getElementById('value').value)
if (isNaN(value)) {
status('invalid value set')
return
}
setParam(auth, name, value)
})
document.getElementById('manual-mode').addEventListener('click', (e) => {
const auth = document.getElementById('password').value
const on = document.getElementById('manual-mode').checked
manualMode(auth, on)
})
document.getElementById('manual-on').addEventListener('click', (e) => {
const auth = document.getElementById('password').value
const on = document.getElementById('manual-on').checked
manualHumidifier(auth, on)
})
}
</script>
</head>
<body>
<fieldset>
<legend>Status</legend>
<div id=status></div>
</fieldset>
<form>
<fieldset>
<legend>Parameter list</legend>
<div id=param-list></div>
<input id=query-params type=button value="Query params"></input><br />
</fieldset>
<label for=password>Auth password: </label>
<input id=password type=password></input><br />
<fieldset>
<legend>Set parameter</legend>
<label for=name>Name: </label>
<input id=name type=text></input><br />
<label for=value>Value: </label>
<input id=value type=text></input><br />
<input id=set-param type=button value="Set parameter"></input><br />
</fieldset>
<fieldset>
<legend>Manual mode</legend>
<input id=manual-mode type=checkbox></input><label for=manual-mode>manual mode</label><br />
<input id=manual-on type=checkbox></input><label for=manual-on>humidifier on</label><br />
</fieldset>
</form>
</body>
</html>