1 line
14 KiB
HTML
1 line
14 KiB
HTML
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name="description" content=""><title>Beer Gravity Monitor</title><link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous"><script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" crossorigin="anonymous"></script></head><body class="py-4"><!-- START MENU --><nav class="navbar navbar-expand-sm navbar-dark bg-primary"><a class="navbar-brand" href="/index.htm">Beer Gravity Monitor</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button><div class="collapse navbar-collapse" id="navbar"><ul class="navbar-nav mr-auto"><li class="nav-item"><a class="nav-link" href="/index.htm">Home <span class="sr-only">(current)</span></a></li><li class="nav-item"><a class="nav-link" href="/device.htm">Device</a></li><li class="nav-item active"><a class="nav-link" href="/config.htm">Configuration</a></li><li class="nav-item"><a class="nav-link" href="/calibration.htm">Calibration</a></li><li class="nav-item"><a class="nav-link" href="/about.htm">About</a></li></ul></div><div class="spinner-border text-light" id="spinner" role="status"></div></nav><!-- START MAIN INDEX --><div class="container"><hr class="my-2"><div class="alert alert-success alert-dismissible fade hide show d-none" role="alert" id="alert"><div id="alert-msg">...</div><button type="button" id="alert-btn" class="close" aria-label="Close"><span aria-hidden="true">×</span></button></div><div class="alert alert-warning fade hide show d-none" role="alert" id="warning-sleep"><div>A sleep-interval of less than 300s will reduce battery life, consider using 900s</div></div><div class="alert alert-warning fade hide show d-none" role="alert" id="warning-gyro"><div>When using the gyro temperature use a sleep-interval that is greater than 300s for accurate readings</div></div><script type="text/javascript">function showError(s){$("#alert").removeClass("alert-success").addClass("alert-danger").removeClass("d-none").addClass("show"),$("#alert-msg").text(s)}function showSuccess(s){$("#alert").addClass("alert-success").removeClass("alert-danger").removeClass("d-none").addClass("show"),$("#alert-msg").text(s)}function showWarningSleep(){$("#warning-sleep").removeClass("d-none").addClass("show")}function hideWarningSleep(){$("#warning-sleep").addClass("d-none").removeClass("show")}function showWarningGyro(){$("#warning-gyro").removeClass("d-none").addClass("show")}function hideWarningGyro(){$("#warning-gyro").addClass("d-none").removeClass("show")}$("#alert-btn").click(function(s){$("#alert").addClass("d-none").removeClass("show")})</script><div class="accordion" id="accordion"><div class="card"><div class="card-header" id="headingOne"><h2 class="mb-0"><button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">Device settings</button></h2></div><div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion"><div class="card-body"><form action="/api/config/device" method="post"><input type="text" name="id" id="id1" hidden><div class="form-group row"><label for="mdns" class="col-sm-3 col-form-label">Device name:</label><div class="col-sm-9"><input type="text" maxlength="12" class="form-control" name="mdns" id="mdns"></div></div><fieldset class="form-group row"><legend class="col-form-label col-sm-3 float-sm-left pt-0">Temperature Format:</legend><div class="col-sm-6"><div class="form-check"><input class="form-check-input" type="radio" name="temp-format" id="temp-format-c" value="C" checked> <label class="form-check-label" for="temp-format-c">Celsius</label></div><div class="form-check"><input class="form-check-input" type="radio" name="temp-format" id="temp-format-f" value="F"> <label class="form-check-label" for="temp-format-f">Farenheight</label></div></div></fieldset><div class="form-group row"><label for="sleep-interval" class="col-sm-3 col-form-label">Interval (seconds):</label><div class="col-sm-2"><input type="number" min="10" max="3600" class="form-control" name="sleep-interval" id="sleep-interval"></div><label for="sleep-interval" class="col-sm-3 col-form-label" id="sleep-interval-info"></label></div><div class="form-group row"><div class="col-sm-8 offset-sm-3"><button type="submit" class="btn btn-primary" id="device-btn">Save</button></div></div></form><hr class="my-2"><div class="form-group row"><label for="calibrate-btn" class="col-sm-3 col-form-label">Current calibration values:</label> <label for="calibrate-btn" class="col-sm-3 col-form-label" id="gyro-calibration-data">Loading...</label> <label for="gyro-calibration-data" class="col-sm-3 col-form-label" id="angle">Loading...</label><div class="col-sm-8 offset-sm-3"><button type="button" class="btn btn-warning" id="calibrate-btn">Calibrate device</button></div></div></div></div></div><div class="card"><div class="card-header" id="headingTwo"><h2 class="mb-0"><button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">Push settings</button></h2></div><div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion"><div class="card-body"><form action="/api/config/push" method="post"><input type="text" name="id" id="id2" hidden><div class="form-group row"><label for="http-push" class="col-sm-2 col-form-label">Http URL 1:</label><div class="col-sm-10"><input type="url" maxlength="100" class="form-control" name="http-push" id="http-push"></div></div><div class="form-group row"><label for="http-push2" class="col-sm-2 col-form-label">Http URL 2:</label><div class="col-sm-10"><input type="url" maxlength="100" class="form-control" name="http-push2" id="http-push2"></div></div><hr class="my-2"><div class="form-group row"><label for="inputBrewfatherPush" class="col-sm-2 col-form-label">Brewfather URL:</label><div class="col-sm-10"><input type="url" maxlength="100" class="form-control" name="brewfather-push" id="brewfather-push"></div></div><hr class="my-2"><div class="form-group row"><label for="influxdb2-push" class="col-sm-2 col-form-label">InfluxDB v2 URL:</label><div class="col-sm-6"><input type="url" maxlength="40" class="form-control" name="influxdb2-push" id="influxdb2-push"></div></div><div class="form-group row"><label for="influxdb2-org" class="col-sm-2 col-form-label">InfluxDB v2 Org:</label><div class="col-sm-4"><input type="text" maxlength="50" class="form-control" name="influxdb2-org" id="influxdb2-org"></div></div><div class="form-group row"><label for="influxdb2-bucket" class="col-sm-2 col-form-label">InfluxDB v2 Bucket:</label><div class="col-sm-4"><input type="text" maxlength="50" class="form-control" name="influxdb2-bucket" id="influxdb2-bucket"></div></div><div class="form-group row"></div><div class="form-group row"><label for="influxdb2-auth" class="col-sm-2 col-form-label">InfluxDB v2 Auth:</label><div class="col-sm-4"><input type="text" maxlength="100" class="form-control" name="influxdb2-auth" id="influxdb2-auth"></div></div><hr class="my-2"><div class="form-group row"><label for="mqtt-push" class="col-sm-2 col-form-label">MQTT Server:</label><div class="col-sm-4"><input type="text" maxlength="40" class="form-control" name="mqtt-push" id="mqtt-push"></div></div><div class="form-group row"><label for="mqtt-topic" class="col-sm-2 col-form-label">MQTT Topic:</label><div class="col-sm-4"><input type="text" maxlength="30" class="form-control" name="mqtt-topic" id="mqtt-topic"></div></div><div class="form-group row"><label for="mqtt-user" class="col-sm-2 col-form-label">MQTT User:</label><div class="col-sm-4"><input type="text" maxlength="20" class="form-control" name="mqtt-user" id="mqtt-user"></div></div><div class="form-group row"><label for="mqtt-pass" class="col-sm-2 col-form-label">MQTT Password:</label><div class="col-sm-4"><input type="text" maxlength="20" class="form-control" name="mqtt-pass" id="mqtt-pass"></div></div><div class="form-group row"><div class="col-sm-8 offset-sm-2"><button type="submit" class="btn btn-primary" id="push-btn">Save</button></div></div></form></div></div></div><div class="card"><div class="card-header" id="headingThree"><h2 class="mb-0"><button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">Gravity</button></h2></div><div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion"><div class="card-body"><form action="/api/config/gravity" method="post"><input type="text" name="id" id="id3" hidden><div class="form-group row"><label for="gravity-formula" class="col-sm-2 col-form-label">Formula</label><div class="col-sm-10"><input type="text" maxlength="200" class="form-control" name="gravity-formula" id="gravity-formula"></div></div><div class="form-group row"><div class="col-sm-4 offset-sm-2"><div class="form-check"><input class="form-check-input" type="checkbox" name="gravity-temp-adjustment" id="gravity-temp-adjustment"> <label class="form-check-label" for="gravity-temp-adjustment">Temperature adjust gravity</label></div></div></div><div class="form-group row"><div class="col-sm-4 offset-sm-2"><button type="submit" class="btn btn-primary" id="gravity-btn">Save</button></div></div></form></div></div></div><div class="card"><div class="card-header" id="headingFour"><h2 class="mb-0"><button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">Hardware settings</button></h2></div><div id="collapseFour" class="collapse" aria-labelledby="headingFour" data-parent="#accordion"><div class="card-body"><form action="/api/config/hardware" method="post"><input type="text" name="id" id="id4" hidden><div class="form-group row"><label for="voltage-factor" class="col-sm-2 col-form-label">Voltage factor:</label><div class="col-sm-2"><input type="number" step=".01" class="form-control" name="voltage-factor" id="voltage-factor"></div><label for="voltage-factor" class="col-sm-3 col-form-label" id="battery">Loading...</label></div><div class="form-group row"><label for="temp-adjustment-value" class="col-sm-2 col-form-label">Temp Sensor Adj:</label><div class="col-sm-2"><input type="number" step=".1" class="form-control" name="temp-adjustment-value" id="temp-adjustment-value"></div></div><div class="form-group row"><div class="col-sm-3 offset-sm-2"><div class="form-check"><input class="form-check-input" type="checkbox" name="gyro-temp" id="gyro-temp"> <label class="form-check-label" for="gyro-temp">Use gyro temperature</label></div></div></div><div class="form-group row"><label for="ota-url" class="col-sm-2 col-form-label">OTA base URL:</label><div class="col-sm-10"><input type="url" maxlength="90" class="form-control" name="ota-url" id="ota-url"></div></div><div class="form-group row"><div class="col-sm-8 offset-sm-2"><button type="submit" class="btn btn-primary" id="hardware-btn">Save</button></div></div></form></div></div></div></div><hr class="my-4"></div><script type="text/javascript">function updateSleepInfo(){var a=$("#sleep-interval").val();$("#sleep-interval-info").text(Math.floor(a/60)+" m "+a%60+" s"),hideWarningGyro(),0<a&&a<300?($("#gyro-temp").is(":checked")&&showWarningGyro(),showWarningSleep()):hideWarningSleep()}function setButtonDisabled(a){$("#device-btn").prop("disabled",a),$("#calibrate-btn").prop("disabled",a),$("#push-btn").prop("disabled",a),$("#gravity-btn").prop("disabled",a),$("#hardware-btn").prop("disabled",a)}function getConfig(){setButtonDisabled(!0);var a="/api/config";$("#spinner").show(),$.getJSON(a,function(a){console.log(a),$("#id1").val(a.id),$("#id2").val(a.id),$("#id3").val(a.id),$("#id4").val(a.id),$("#mdns").val(a.mdns),"C"==a["temp-format"]?$("#temp-format-c").click():$("#temp-format-f").click(),$("#ota-url").val(a["ota-url"]),$("#http-push").val(a["http-push"]),$("#http-push2").val(a["http-push2"]),$("#brewfather-push").val(a["brewfather-push"]),$("#influxdb2-push").val(a["influxdb2-push"]),$("#influxdb2-org").val(a["influxdb2-org"]),$("#influxdb2-bucket").val(a["influxdb2-bucket"]),$("#influxdb2-auth").val(a["influxdb2-auth"]),$("#mqtt-push").val(a["mqtt-push"]),$("#mqtt-topic").val(a["mqtt-topic"]),$("#mqtt-user").val(a["mqtt-user"]),$("#mqtt-pass").val(a["mqtt-pass"]),$("#sleep-interval").val(a["sleep-interval"]),$("#voltage-factor").val(a["voltage-factor"]),$("#gravity-formula").val(a["gravity-formula"]),$("#temp-adjustment-value").val(a["temp-adjustment-value"]),$("#gravity-temp-adjustment").prop("checked",a["gravity-temp-adjustment"]),$("#gyro-temp").prop("checked",a["gyro-temp"]),$("#gyro-calibration-data").text(a["gyro-calibration-data"].ax+","+a["gyro-calibration-data"].ay+","+a["gyro-calibration-data"].az+","+a["gyro-calibration-data"].gx+","+a["gyro-calibration-data"].gy+","+a["gyro-calibration-data"].gz),$("#battery").text(a.battery+" V"),$("#angle").text(a.angle)}).fail(function(){showError("Unable to get data from the device.")}).always(function(){$("#spinner").hide(),setButtonDisabled(!1),updateSleepInfo()})}window.onload=getConfig,setButtonDisabled(!0),$(document).ready(function(){null!=location.hash&&""!=location.hash&&($(".collapse").removeClass("in"),$(location.hash+".collapse").collapse("show"))}),$("#calibrate-btn").click(function(a){console.log("Calibrating..."),$.ajax({type:"POST",url:"/api/calibrate",data:{id:$("#id1").val()},success:function(a){showSuccess("Calibration of device was completed successfully."),getConfig()},error:function(a){showError("Unable to calibrate device.")}})}),$("#sleep-interval").keyup(updateSleepInfo),$("#gyro-temp").change(updateSleepInfo)</script><!-- START FOOTER --><div class="container-fluid themed-container bg-primary text-light">(C) Copyright 2021-22 Magnus Persson</div></body></html> |