Brewery/gravitymon
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Rough update to bootstrap 5 done

Browse Source
This commit is contained in:
Magnus Persson 2022-04-10 15:33:00 +02:00
parent 2e3820ca73
commit 635d788ba6
9 changed files with 1754 additions and 1696 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
html/about.htm
View File

@ -5,25 +5,28 @@
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content=""> <meta name="description" content="">
<title>Beer Gravity Monitor</title> <title>Beer Gravity Monitor</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" 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://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" crossorigin="anonymous"></script> <style>
.row-margin-05 { margin-top: 0.5em; }
.row-margin-10 { margin-top: 1.0em; }
</style>
</head> </head>
<body class="py-4"> <body class="py-4">
<!-- START MENU --> <!-- START MENU -->
<nav class="navbar navbar-expand-sm navbar-dark bg-primary"> <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<div class="container">
<a class="navbar-brand" href="/index.htm">Beer Gravity Monitor</a> <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"> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
</button> </button>
<div class="collapse navbar-collapse" id="navbarNav">
<div class="collapse navbar-collapse" id="navbar"> <ul class="navbar-nav">
<ul class="navbar-nav mr-auto">
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="/index.htm">Home <span class="sr-only">(current)</span></a> <a class="nav-link" href="/index.htm">Home</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="/config.htm">Configuration</a> <a class="nav-link" href="/config.htm">Configuration</a>
@ -32,23 +35,36 @@
<a class="nav-link" href="/calibration.htm">Calibration</a> <a class="nav-link" href="/calibration.htm">Calibration</a>
</li> </li>
<li class="nav-item active"> <li class="nav-item active">
<a class="nav-link" href="/about.htm">About</a> <a class="nav-link" href="#"><b>About</b></a>
</li> </li>
</ul> </ul>
</div> </div>
</div>
</nav> </nav>
<!-- START MAIN INDEX --> <!-- START BODY -->
<div class="container"> <div class="container row-margin-10">
<hr class="my-4">
<div class="row mb-3"> <div class="accordion row-margin-10" id="accordion">
<h3>Beer Gravity Monitor</h3> <div class="accordion-item">
<h2 class="accordion-header" id="headingAbout">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseAbout" aria-expanded="true" aria-controls="collapseAbout">
<b>About</b>
</button>
</h2>
<div id="collapseAbout" class="accordion-collapse collapse show" aria-labelledby="headingAbout" data-bs-parent="#accordion">
<div class="accordion-body">
<div class="row h3 col-sm-8">
Beer Gravity Monitor
</div>
<div class="row col-sm-8 mb-3">
This is a piece of software for the iSpindle hardware and will work in a similar way. No part of this software is copied from the iSpindle project. This is a piece of software for the iSpindle hardware and will work in a similar way. No part of this software is copied from the iSpindle project.
</div> </div>
<div class="row mb-3"> <div class="row h3 col-sm-8 mb-3">
<h3>MIT License</h3> MIT License
</div>
<div class="row col-sm-8 mb-3">
Permission is hereby granted, free of charge, to any person obtaining a copy Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights in the Software without restriction, including without limitation the rights
@ -67,12 +83,14 @@
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE. SOFTWARE.
</div> </div>
</div>
<hr class="my-4"> </div>
</div>
</div>
</div> </div>
<!-- START FOOTER --> <!-- START FOOTER -->
<div class="container-fluid themed-container bg-primary text-light">(C) Copyright 2021-22 Magnus Persson</div> <div class="container themed-container bg-primary text-light row-margin-10">(C) Copyright 2021-22 Magnus Persson</div>
</body> </body>
</html> </html>

168
html/calibration.htm
View File

@ -5,32 +5,36 @@
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content=""> <meta name="description" content="">
<title>Beer Gravity Monitor</title> <title>Beer Gravity Monitor</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
.row-margin-05 { margin-top: 0.5em; }
.row-margin-10 { margin-top: 1.0em; }
</style>
</head> </head>
<body class="py-4"> <body class="py-4">
<!-- START MENU --> <!-- START MENU -->
<nav class="navbar navbar-expand-sm navbar-dark bg-primary"> <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<div class="container">
<a class="navbar-brand" href="/index.htm">Beer Gravity Monitor</a> <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"> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
</button> </button>
<div class="collapse navbar-collapse" id="navbarNav">
<div class="collapse navbar-collapse" id="navbar"> <ul class="navbar-nav">
<ul class="navbar-nav mr-auto">
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="/index.htm">Home <span class="sr-only">(current)</span></a> <a class="nav-link" href="/index.htm">Home</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="/config.htm">Configuration</a> <a class="nav-link" href="/config.htm">Configuration</a>
</li> </li>
<li class="nav-item active"> <li class="nav-item active">
<a class="nav-link" href="/calibration.htm">Calibration</a> <a class="nav-link" href="#"><b>Calibration</b></a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="/about.htm">About</a> <a class="nav-link" href="/about.htm">About</a>
@ -38,50 +42,42 @@
</ul> </ul>
</div> </div>
<div class="spinner-border text-light" id="spinner" role="status"></div> <div class="spinner-border text-light" id="spinner" role="status"></div>
</div>
</nav> </nav>
<!-- START MAIN INDEX --> <!-- START BODY -->
<div class="container"> <div class="container row-margin-10">
<div class="alert alert-success alert-dismissible hide fade d-none" role="alert">
<hr class="my-2"> <div id="alert"></div>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
<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">&times;</span>
</button>
</div> </div>
<script type="text/javascript"> <script type="text/javascript">
function showError( msg ) { function showError( msg ) {
$('.alert').removeClass('alert-success').addClass('alert-danger').removeClass('d-none').addClass('show') $('.alert').removeClass('alert-success').addClass('alert-danger').removeClass('hide').addClass('show').removeClass('d-none');
$('#alert-msg').text( msg ); $('#alert').text( msg );
} }
function showSuccess( msg ) { function showSuccess( msg ) {
$('.alert').addClass('alert-success').removeClass('alert-danger').removeClass('d-none').addClass('show') $('.alert').addClass('alert-success').removeClass('alert-danger').removeClass('hide').addClass('show').removeClass('d-none');
$('#alert-msg').text( msg ); $('#alert').text( msg );
} }
$("#alert-btn").click(function(e){ $("#alert-btn").click(function(e){
$('.alert').addClass('d-none').removeClass('show') $('.alert').addClass('hide').removeClass('show').addClass('d-none');
}); });
</script> </script>
<div class="accordion" id="accordion"> <div class="accordion" id="accordion">
<div class="accordion-item">
<div class="card"> <h2 class="accordion-header" id="headingFormula">
<div class="card-header" id="headingOne"> <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFormula" aria-expanded="true" aria-controls="collapseFormula">
<h2 class="mb-0"> <b>Formula calculation</b>
<button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#collapseCalibration" aria-expanded="true" aria-controls="collapseCalibration">
Formula calculation
</button> </button>
</h2> </h2>
</div> <div id="collapseFormula" class="accordion-collapse collapse show" aria-labelledby="headingFormula" data-bs-parent="#accordion">
<div class="accordion-body">
<div id="collapseCalibration" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
<div class="card-body">
<form action="/api/formula" method="post"> <form action="/api/formula" method="post">
<input type="text" name="gravity-format" id="gravity-format" hidden> <input type="text" name="gravity-format" id="gravity-format" hidden>
<input type="text" name="id" id="id" hidden> <input type="text" name="id" id="id" hidden>
@ -93,73 +89,53 @@
rejected. On the bottom of the page you can see a graph over the entered values + values calcualated by the formula. rejected. On the bottom of the page you can see a graph over the entered values + values calcualated by the formula.
</div> </div>
<div class="form-group row"> <div class="row">
<label class="col-sm-2 col-form-label">#:</label> <label class="col-sm-1 col-form-label">#</label>
<label class="col-sm-4 col-form-label">Angle/Tilt:</label> <label class="col-sm-4 col-form-label">Angle/Tilt</label>
<label class="col-sm-4 col-form-label" id="gravity-header">Gravity (SG):</label> <label class="col-sm-4 col-form-label" id="gravity-header">Gravity</label>
</div> </div>
<div class="form-group row"> <div class="row mb-3">
<label for="angle1" class="col-sm-2 col-form-label">1.</label> <label for="angle1" class="col-sm-1 col-form-label">1.</label>
<div class="col-sm-4"> <div class="col-sm-4"><input type="number" min="0" max="90" step="0.001" class="form-control" name="a1" id="a1"></div>
<input type="number" min="0" max="90" step="0.001" class="form-control" name="a1" id="a1"> <div class="col-sm-4"><input type="number" min="0" max="26" step="0.0001" class="form-control" name="g1" id="g1"></div>
</div>
<div class="col-sm-4">
<input type="number" min="0" max="26" step="0.0001" class="form-control" name="g1" id="g1">
</div>
</div> </div>
<div class="form-group row"> <div class="row mb-3">
<label for="angle2" class="col-sm-2 col-form-label">2.</label> <label for="angle2" class="col-sm-1 col-form-label">2.</label>
<div class="col-sm-4"> <div class="col-sm-4"><input type="number" min="0" max="90" step="0.001" class="form-control" name="a2" id="a2"></div>
<input type="number" min="0" max="90" step="0.001" class="form-control" name="a2" id="a2"> <div class="col-sm-4"><input type="number" min="0" max="26" step="0.0001" class="form-control" name="g2" id="g2"></div>
</div>
<div class="col-sm-4">
<input type="number" min="0" max="26" step="0.0001" class="form-control" name="g2" id="g2">
</div>
</div> </div>
<div class="form-group row"> <div class="row mb-3">
<label for="angle3" class="col-sm-2 col-form-label">3.</label> <label for="angle3" class="col-sm-1 col-form-label">3.</label>
<div class="col-sm-4"> <div class="col-sm-4"><input type="number" min="0" max="90" step="0.001" class="form-control" name="a3" id="a3"></div>
<input type="number" min="0" max="90" step="0.001" class="form-control" name="a3" id="a3"> <div class="col-sm-4"><input type="number" min="0" max="26" step="0.0001" class="form-control" name="g3" id="g3"></div>
</div>
<div class="col-sm-4">
<input type="number" min="0" max="26" step="0.0001" class="form-control" name="g3" id="g3">
</div>
</div> </div>
<div class="form-group row"> <div class="row mb-3">
<label for="angle4" class="col-sm-2 col-form-label">4.</label> <label for="angle4" class="col-sm-1 col-form-label">4.</label>
<div class="col-sm-4"> <div class="col-sm-4"><input type="number" min="0" max="90" step="0.001" class="form-control" name="a4" id="a4"></div>
<input type="number" min="0" max="90" step="0.001" class="form-control" name="a4" id="a4"> <div class="col-sm-4"><input type="number" min="0" max="26" step="0.0001" class="form-control" name="g4" id="g4"></div>
</div>
<div class="col-sm-4">
<input type="number" min="0" max="26" step="0.0001" class="form-control" name="g4" id="g4">
</div>
</div> </div>
<div class="form-group row"> <div class="row mb-3">
<label for="angle5" class="col-sm-2 col-form-label">5.</label> <label for="angle5" class="col-sm-1 col-form-label">5.</label>
<div class="col-sm-4"> <div class="col-sm-4"><input type="number" min="0" max="90" step="0.001" class="form-control" name="a5" id="a5"></div>
<input type="number" min="0" max="90" step="0.001" class="form-control" name="a5" id="a5"> <div class="col-sm-4"><input type="number" min="0" max="26" step="0.0001" class="form-control" name="g5" id="g5"></div>
</div>
<div class="col-sm-4">
<input type="number" min="0" max="26" step="0.0001" class="form-control" name="g5" id="g5">
</div>
</div> </div>
<div class="form-group row"> <div class="row mb-3">
<div class="col-sm-8 offset-sm-0"> <div class="col-sm-8 offset-sm-1"><button type="submit" class="btn btn-primary" id="calculate-btn">Save & Calculate</button></div>
<button type="submit" class="btn btn-primary" id="calculate-btn">Save & Calculate</button>
</div>
</div> </div>
<div class="form-group row"> <hr class="my-2">
<div class="row">
<label for="calculate-btn" class="col-sm-2 col-form-label">Current angle: </label> <label for="calculate-btn" class="col-sm-2 col-form-label">Current angle: </label>
<label for="calculate-btn" class="col-sm-2 col-form-label" id="angle"></label> <label for="calculate-btn" class="col-sm-2 col-form-label" id="angle"></label>
</div> </div>
<div class="form-group row"> <div class="row">
<label for="calculate-btn" class="col-sm-2 col-form-label">Formula: </label> <label for="calculate-btn" class="col-sm-2 col-form-label">Formula: </label>
<label for="calculate-btn" class="col-sm-8 col-form-label" id="formula">Loading...</label> <label for="calculate-btn" class="col-sm-8 col-form-label" id="formula">Loading...</label>
</div> </div>
@ -167,12 +143,20 @@
</div> </div>
</div> </div>
</div> </div>
</div>
<hr class="my-4"> <div class="accordion-item">
<div> <h2 class="accordion-header" id="headingGraph">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseGraph" aria-expanded="false" aria-controls="collapseGraph">
<b>Formula graph</b>
</button>
</h2>
<div id="collapseGraph" class="accordion-collapse collapse" aria-labelledby="headingGraph" data-bs-parent="#accordion">
<div class="accordion-body">
<canvas id="gravityChart"></canvas> <canvas id="gravityChart"></canvas>
</div> </div>
<hr class="my-4"> </div>
</div>
</div>
</div> </div>
<script type="text/javascript"> <script type="text/javascript">
@ -328,7 +312,9 @@
setButtonDisabled( true ); setButtonDisabled( true );
var url = "/api/formula"; var url = "/api/formula";
//var url = "/test/formula.json"; var url = "/test/formula.json";
showError(url);
//showSuccess(url);
$('#spinner').show(); $('#spinner').show();
$.getJSON(url, function (cfg) { $.getJSON(url, function (cfg) {
console.log( cfg ); console.log( cfg );
@ -378,6 +364,6 @@
<!-- START FOOTER --> <!-- START FOOTER -->
<div class="container-fluid themed-container bg-primary text-light">(C) Copyright 2021-22 Magnus Persson</div> <div class="container themed-container bg-primary text-light row-margin-10">(C) Copyright 2021-22 Magnus Persson</div>
</body> </body>
</html> </html>

308
html/config.htm
View File

@ -5,28 +5,32 @@
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content=""> <meta name="description" content="">
<title>Beer Gravity Monitor</title> <title>Beer Gravity Monitor</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script> <style>
.row-margin-05 { margin-top: 0.5em; }
.row-margin-10 { margin-top: 1.0em; }
</style>
</head> </head>
<body class="py-4"> <body class="py-4">
<!-- START MENU --> <!-- START MENU -->
<nav class="navbar navbar-expand-sm navbar-dark bg-primary"> <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<div class="container">
<a class="navbar-brand" href="/index.htm">Beer Gravity Monitor</a> <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"> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
</button> </button>
<div class="collapse navbar-collapse" id="navbarNav">
<div class="collapse navbar-collapse" id="navbar"> <ul class="navbar-nav">
<ul class="navbar-nav mr-auto">
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="/index.htm">Home <span class="sr-only">(current)</span></a> <a class="nav-link" href="/index.htm">Home</a>
</li> </li>
<li class="nav-item active"> <li class="nav-item">
<a class="nav-link" href="/config.htm">Configuration</a> <a class="nav-link active" href="#"><b>Configuration</b></a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="/calibration.htm">Calibration</a> <a class="nav-link" href="/calibration.htm">Calibration</a>
@ -37,104 +41,102 @@
</ul> </ul>
</div> </div>
<div class="spinner-border text-light" id="spinner" role="status"></div> <div class="spinner-border text-light" id="spinner" role="status"></div>
</div>
</nav> </nav>
<!-- START MAIN INDEX --> <!-- START MAIN INDEX -->
<div class="container"> <div class="container row-margin-10">
<hr class="my-2"> <div class="alert alert-success alert-dismissible hide fade d-none" role="alert" id="alert">
<div id="alert-msg"></div>
<div class="alert alert-success alert-dismissible fade hide show d-none" role="alert" id="alert"> <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
<div id="alert-msg">...</div>
<button type="button" id="alert-btn" class="close" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div> </div>
<div class="alert alert-warning fade hide show d-none" role="alert" id="warning-sleep"> <div class="alert alert-warning alert-dismissible hide fade d-none" role="alert" id="warning-sleep">
<div>A sleep-interval of less than 300s will reduce battery life, consider using 900s</div> <div>A sleep-interval of less than 300s will reduce battery life, consider using 900s</div>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div> </div>
<div class="alert alert-warning fade hide show d-none" role="alert" id="warning-gyro"> <div class="alert alert-warning alert-dismissible hide fade 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>When using the gyro temperature use a sleep-interval that is greater than 300s for accurate readings</div>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div> </div>
<script type="text/javascript"> <script type="text/javascript">
function showError( msg ) { function showError( msg ) {
$('#alert').removeClass('alert-success').addClass('alert-danger').removeClass('d-none').addClass('show'); $('#alert').removeClass('alert-success').addClass('alert-danger').removeClass('hide').addClass('show').removeClass('d-none');
$('#alert-msg').text( msg ); $('#alert-msg').text( msg );
} }
function showSuccess( msg ) { function showSuccess( msg ) {
$('#alert').addClass('alert-success').removeClass('alert-danger').removeClass('d-none').addClass('show'); $('#alert').addClass('alert-success').removeClass('alert-danger').removeClass('hide').addClass('show').removeClass('d-none');
$('#alert-msg').text( msg ); $('#alert-msg').text( msg );
} }
$("#alert-btn").click(function(e){ $("#alert-btn").click(function(e){
$('#alert').addClass('d-none').removeClass('show'); $('#alert').addClass('hide').removeClass('show').addClass('d-none');
}); });
function showWarningSleep() { function showWarningSleep() {
$('#warning-sleep').removeClass('d-none').addClass('show'); $('#warning-sleep').removeClass('d-none').addClass('show').removeClass('hide');
} }
function hideWarningSleep() { function hideWarningSleep() {
$('#warning-sleep').addClass('d-none').removeClass('show'); $('#warning-sleep').addClass('d-none').removeClass('show').addClass('hide');
} }
function showWarningGyro() { function showWarningGyro() {
$('#warning-gyro').removeClass('d-none').addClass('show'); $('#warning-gyro').removeClass('d-none').addClass('show').removeClass('hide');
} }
function hideWarningGyro() { function hideWarningGyro() {
$('#warning-gyro').addClass('d-none').removeClass('show'); $('#warning-gyro').addClass('d-none').removeClass('show').addClass('hide');
} }
</script> </script>
<div class="accordion" id="accordion"> <div class="accordion" id="accordion">
<input type="text" name="runtime-average" id="runtime-average" hidden> <div class="accordion-item">
<h2 class="accordion-header" id="headingDevice">
<div class="card"> <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseDevice" aria-expanded="true" aria-controls="collapseDevice">
<div class="card-header" id="headingDevice"> <b>Device settings</b>
<h2 class="mb-0">
<button class="btn btn-link btn-block text-left" onclick="window.location.href = '#collapseDevice'" type="button" data-toggle="collapse" data-target="#collapseDevice" aria-expanded="true" aria-controls="collapseDevice">
Device settings
</button> </button>
</h2> </h2>
</div> <div id="collapseDevice" class="accordion-collapse collapse show" aria-labelledby="headingDevice" data-bs-parent="#accordion">
<div id="collapseDevice" class="collapse show" aria-labelledby="headingDevice" data-parent="#accordion"> <div class="accordion-body">
<div class="card-body">
<form action="/api/config/device" method="post"> <form action="/api/config/device" method="post">
<input type="text" name="id" id="id1" hidden> <input type="text" name="id" id="id1" hidden>
<div class="form-group row">
<div class="row mb-3">
<label for="mdns" class="col-sm-3 col-form-label">Device name:</label> <label for="mdns" class="col-sm-3 col-form-label">Device name:</label>
<div class="col-sm-9"> <div class="col-sm-3">
<input type="text" maxlength="12" class="form-control" name="mdns" id="mdns"> <input type="text" maxlength="12" class="form-control" name="mdns" id="mdns">
</div> </div>
</div> </div>
<fieldset class="form-group row">
<div class="row mb-3">
<fieldset class="form-group">
<legend class="col-form-label col-sm-3 float-sm-left pt-0">Temperature Format:</legend> <legend class="col-form-label col-sm-3 float-sm-left pt-0">Temperature Format:</legend>
<div class="col-sm-6"> <div class="col-sm-6">
<div class="form-check"> <div class="form-check">
<input class="form-check-input" type="radio" name="temp-format" id="temp-format-c" value="C" checked> <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"> <label class="form-check-label" for="temp-format-c">Celsius</label>
Celsius
</label>
</div> </div>
<div class="form-check"> <div class="form-check">
<input class="form-check-input" type="radio" name="temp-format" id="temp-format-f" value="F"> <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"> <label class="form-check-label" for="temp-format-f">Farenheight</label>
Farenheight
</label>
</div> </div>
</div> </div>
</fieldset> </fieldset>
<div class="form-group row"> </div>
<div class="row mb-3">
<label for="sleep-interval" class="col-sm-3 col-form-label">Interval (seconds):</label> <label for="sleep-interval" class="col-sm-3 col-form-label">Interval (seconds):</label>
<div class="col-sm-2"> <div class="col-sm-2">
<input type="number" min="10" max="3600" class="form-control" name="sleep-interval" id="sleep-interval"> <input type="number" min="10" max="3600" class="form-control" name="sleep-interval" id="sleep-interval">
</div> </div>
<label for="sleep-interval" class="col-sm-4 col-form-label" id="sleep-interval-info"></label> <label for="sleep-interval" class="col-sm-4 col-form-label" id="sleep-interval-info"></label>
</div> </div>
<div class="form-group row">
<div class="row mb-3">
<div class="col-sm-8 offset-sm-3"> <div class="col-sm-8 offset-sm-3">
<button type="submit" class="btn btn-primary" id="device-btn">Save</button> <button type="submit" class="btn btn-primary" id="device-btn">Save</button>
</div> </div>
@ -143,7 +145,7 @@
<hr class="my-2"> <hr class="my-2">
<div class="form-group row"> <div class="row mb-3">
<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">Current calibration values:</label>
<label for="calibrate-btn" class="col-sm-3 col-form-label" id="gyro-calibration-data">Loading...</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> <label for="gyro-calibration-data" class="col-sm-3 col-form-label" id="angle">Loading...</label>
@ -156,16 +158,14 @@
</div> </div>
</div> </div>
<div class="card"> <div class="accordion-item">
<div class="card-header" id="headingPush"> <h2 class="accordion-header" id="headingPush">
<h2 class="mb-0"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapsePush" aria-expanded="false" aria-controls="collapsePush">
<button class="btn btn-link btn-block text-left collapsed" onclick="window.location.href = '#collapsePush'" type="button" data-toggle="collapse" data-target="#collapsePush" aria-expanded="false" aria-controls="collapsePush"> <b>Push settings</b>
Push settings
</button> </button>
</h2> </h2>
</div> <div id="collapsePush" class="accordion-collapse collapse" aria-labelledby="headingPush" data-bs-parent="#accordion">
<div id="collapsePush" class="collapse" aria-labelledby="headingPush" data-parent="#accordion"> <div class="accordion-body">
<div class="card-body">
<form action="/api/config/push" method="post"> <form action="/api/config/push" method="post">
<input type="text" name="id" id="id2" hidden> <input type="text" name="id" id="id2" hidden>
<input type="text" name="section" value="collapsePush" hidden> <input type="text" name="section" value="collapsePush" hidden>
@ -174,68 +174,58 @@
<input type="text" name="http-push2-h1" id="http-push2-h1" hidden> <input type="text" name="http-push2-h1" id="http-push2-h1" hidden>
<input type="text" name="http-push2-h2" id="http-push2-h2" hidden> <input type="text" name="http-push2-h2" id="http-push2-h2" hidden>
<div class="form-group row"> <div class="row mb-3">
<label for="http-push" class="col-sm-2 col-form-label">HTTP 1 (POST):</label> <label for="http-push" class="col-sm-2 col-form-label">HTTP 1 (POST):</label>
<div class="col-sm-8"> <div class="col-sm-8">
<input type="url" maxlength="120" class="form-control" name="http-push" id="http-push"> <input type="url" maxlength="120" class="form-control" name="http-push" id="http-push">
</div> </div>
<div class="col-sm-2"> <div class="col-sm-2">
<button type="button" class="btn btn-info" data-field1="#http-push-h1" data-field2="#http-push-h2" data-toggle="modal" data-target="#modal-http">Headers</button> <button type="button" class="btn btn-secondary" data-field1="#http-push-h1" data-field2="#http-push-h2" data-bs-toggle="modal" data-bs-target="#modal-http">Headers</button>
</div> </div>
</div> </div>
<div class="form-group row">
<div class="row mb-3">
<label for="http-push2" class="col-sm-2 col-form-label">HTTP 2 (POST):</label> <label for="http-push2" class="col-sm-2 col-form-label">HTTP 2 (POST):</label>
<div class="col-sm-8"> <div class="col-sm-8">
<input type="url" maxlength="120" class="form-control" name="http-push2" id="http-push2"> <input type="url" maxlength="120" class="form-control" name="http-push2" id="http-push2">
</div> </div>
<div class="col-sm-2"> <div class="col-sm-2">
<button type="button" class="btn btn-info" data-field1="#http-push2-h1" data-field2="#http-push2-h2" data-toggle="modal" data-target="#modal-http">Headers</button> <button type="button" class="btn btn-secondary" data-field1="#http-push2-h1" data-field2="#http-push2-h2" data-bs-toggle="modal" data-bs-target="#modal-http">Headers</button>
</div> </div>
</div> </div>
<div class="form-group row"> <div class="row mb-3">
<label for="token" class="col-sm-2 col-form-label">Token:</label> <label for="token" class="col-sm-2 col-form-label">Token:</label>
<div class="col-sm-4"> <div class="col-sm-4">
<input type="text" maxlength="50" class="form-control" name="token" id="token"> <input type="text" maxlength="50" class="form-control" name="token" id="token">
</div> </div>
</div> </div>
<hr class="my-2"> <div class="row mb-3">
<div class="form-group row">
<label for="http-push3" class="col-sm-2 col-form-label">HTTP 3 (GET):</label> <label for="http-push3" class="col-sm-2 col-form-label">HTTP 3 (GET):</label>
<div class="col-sm-8"> <div class="col-sm-8">
<input type="url" maxlength="120" class="form-control" name="http-push3" id="http-push3"> <input type="url" maxlength="120" class="form-control" name="http-push3" id="http-push3">
</div> </div>
</div> </div>
<div class="form-group row"> <div class="row mb-3">
<label for="token2" class="col-sm-2 col-form-label">Token 2:</label> <label for="token2" class="col-sm-2 col-form-label">Token 2:</label>
<div class="col-sm-4"> <div class="col-sm-4">
<input type="text" maxlength="50" class="form-control" name="token2" id="token2"> <input type="text" maxlength="50" class="form-control" name="token2" id="token2">
</div> </div>
</div> </div>
<hr class="my-2"> <div class="row mb-3">
<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>
<div class="form-group row">
<div class="col-sm-8 offset-sm-2"> <div class="col-sm-8 offset-sm-2">
<button type="submit" class="btn btn-primary" id="push-btn">Save</button> <button type="submit" class="btn btn-primary" id="push-btn">Save</button>
</div> </div>
</div> </div>
</form> </form>
<div class="form-group row"> <div class="row mb-3">
<div class="col-sm-8 offset-sm-2"> <div class="col-sm-8 offset-sm-2">
<button class="btn btn-info" id="format-btn">Format editor</button> <button class="btn btn-secondary" id="format-btn">Format editor</button>
<button class="btn btn-info" id="test-btn">Test Push</button> <button class="btn btn-secondary" id="test-btn">Test Push</button>
</div> </div>
</div> </div>
@ -243,39 +233,41 @@
</div> </div>
</div> </div>
<div class="card"> <div class="accordion-item">
<div class="card-header" id="headingPush2"> <h2 class="accordion-header" id="headingPush2">
<h2 class="mb-0"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapsePush2" aria-expanded="false" aria-controls="collapsePush2">
<button class="btn btn-link btn-block text-left collapsed" onclick="window.location.href = '#collapsePush2'" type="button" data-toggle="collapse" data-target="#collapsePush2" aria-expanded="false" aria-controls="collapsePush2"> <b>Push settings (2)</b>
Push settings (2)
</button> </button>
</h2> </h2>
</div> <div id="collapsePush2" class="accordion-collapse collapse" aria-labelledby="headingPush2" data-bs-parent="#accordion">
<div id="collapsePush2" class="collapse" aria-labelledby="headingPush2" data-parent="#accordion"> <div class="accordion-body">
<div class="card-body">
<form action="/api/config/push" method="post"> <form action="/api/config/push" method="post">
<input type="text" name="id" id="id5" hidden> <input type="text" name="id" id="id5" hidden>
<input type="text" name="section" value="collapsePush2" hidden> <input type="text" name="section" value="collapsePush2" hidden>
<div class="form-group row"> <div class="row mb-3">
<label for="influxdb2-push" class="col-sm-2 col-form-label">InfluxDB v2 URL:</label> <label for="influxdb2-push" class="col-sm-2 col-form-label">InfluxDB v2 URL:</label>
<div class="col-sm-6"> <div class="col-sm-8">
<input type="url" maxlength="40" class="form-control" name="influxdb2-push" id="influxdb2-push"> <input type="url" maxlength="40" class="form-control" name="influxdb2-push" id="influxdb2-push">
</div> </div>
</div> </div>
<div class="form-group row">
<div class="row mb-3">
<label for="influxdb2-org" class="col-sm-2 col-form-label">InfluxDB v2 Org:</label> <label for="influxdb2-org" class="col-sm-2 col-form-label">InfluxDB v2 Org:</label>
<div class="col-sm-4"> <div class="col-sm-4">
<input type="text" maxlength="50" class="form-control" name="influxdb2-org" id="influxdb2-org"> <input type="text" maxlength="50" class="form-control" name="influxdb2-org" id="influxdb2-org">
</div> </div>
</div> </div>
<div class="form-group row">
<div class="row mb-3">
<label for="influxdb2-bucket" class="col-sm-2 col-form-label">InfluxDB v2 Bucket:</label> <label for="influxdb2-bucket" class="col-sm-2 col-form-label">InfluxDB v2 Bucket:</label>
<div class="col-sm-4"> <div class="col-sm-4">
<input type="text" maxlength="50" class="form-control" name="influxdb2-bucket" id="influxdb2-bucket"> <input type="text" maxlength="50" class="form-control" name="influxdb2-bucket" id="influxdb2-bucket">
</div> </div>
</div> </div>
<div class="form-group row">
<div class="row mb-3">
<label for="influxdb2-auth" class="col-sm-2 col-form-label">InfluxDB v2 Auth:</label> <label for="influxdb2-auth" class="col-sm-2 col-form-label">InfluxDB v2 Auth:</label>
<div class="col-sm-4"> <div class="col-sm-4">
<input type="text" maxlength="100" class="form-control" name="influxdb2-auth" id="influxdb2-auth"> <input type="text" maxlength="100" class="form-control" name="influxdb2-auth" id="influxdb2-auth">
@ -284,42 +276,45 @@
<hr class="my-2"> <hr class="my-2">
<div class="form-group row"> <div class="row mb-3">
<label for="mqtt-push" class="col-sm-2 col-form-label">MQTT Server:</label> <label for="mqtt-push" class="col-sm-2 col-form-label">MQTT Server:</label>
<div class="col-sm-4"> <div class="col-sm-4">
<input type="text" maxlength="40" class="form-control" name="mqtt-push" id="mqtt-push"> <input type="text" maxlength="40" class="form-control" name="mqtt-push" id="mqtt-push">
</div> </div>
</div> </div>
<div class="form-group row">
<div class="row mb-3">
<label for="mqtt-topic" class="col-sm-2 col-form-label">MQTT Port:</label> <label for="mqtt-topic" class="col-sm-2 col-form-label">MQTT Port:</label>
<div class="col-sm-4"> <div class="col-sm-4">
<input type="number" min="1" max="65535" class="form-control" name="mqtt-port" id="mqtt-port"> <input type="number" min="1" max="65535" class="form-control" name="mqtt-port" id="mqtt-port">
</div> </div>
</div> </div>
<div class="form-group row">
<div class="row mb-3">
<label for="mqtt-user" class="col-sm-2 col-form-label">MQTT User:</label> <label for="mqtt-user" class="col-sm-2 col-form-label">MQTT User:</label>
<div class="col-sm-4"> <div class="col-sm-4">
<input type="text" maxlength="20" class="form-control" name="mqtt-user" id="mqtt-user"> <input type="text" maxlength="20" class="form-control" name="mqtt-user" id="mqtt-user">
</div> </div>
</div> </div>
<div class="form-group row">
<div class="row mb-3">
<label for="mqtt-pass" class="col-sm-2 col-form-label">MQTT Password:</label> <label for="mqtt-pass" class="col-sm-2 col-form-label">MQTT Password:</label>
<div class="col-sm-4"> <div class="col-sm-4">
<input type="text" maxlength="20" class="form-control" name="mqtt-pass" id="mqtt-pass"> <input type="text" maxlength="20" class="form-control" name="mqtt-pass" id="mqtt-pass">
</div> </div>
</div> </div>
<div class="form-group row"> <div class="row mb-3">
<div class="col-sm-8 offset-sm-2"> <div class="col-sm-8 offset-sm-2">
<button type="submit" class="btn btn-primary" id="push-btn2">Save</button> <button type="submit" class="btn btn-primary" id="push-btn2">Save</button>
</div> </div>
</div> </div>
</form> </form>
<div class="form-group row"> <div class="row mb-3">
<div class="col-sm-8 offset-sm-2"> <div class="col-sm-8 offset-sm-2">
<button class="btn btn-info" id="format-btn2">Format editor</button> <button class="btn btn-secondary" id="format-btn2">Format editor</button>
<button class="btn btn-info" id="test-btn2">Test Push</button> <button class="btn btn-secondary" id="test-btn2">Test Push</button>
</div> </div>
</div> </div>
@ -327,52 +322,51 @@
</div> </div>
</div> </div>
<div class="card"> <div class="accordion-item">
<div class="card-header" id="headingGravity"> <h2 class="accordion-header" id="headingGravity">
<h2 class="mb-0"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseGravity" aria-expanded="false" aria-controls="collapseGravity">
<button class="btn btn-link btn-block text-left collapsed" onclick="window.location.href = '#collapseGravity'" type="button" data-toggle="collapse" data-target="#collapseGravity" aria-expanded="false" aria-controls="collapseGravity"> <b>Gravity</b>
Gravity
</button> </button>
</h2> </h2>
</div> <div id="collapseGravity" class="accordion-collapse collapse" aria-labelledby="headingGravity" data-bs-parent="#accordion">
<div id="collapseGravity" class="collapse" aria-labelledby="headingGravity" data-parent="#accordion"> <div class="accordion-body">
<div class="card-body">
<form action="/api/config/gravity" method="post"> <form action="/api/config/gravity" method="post">
<input type="text" name="id" id="id3" hidden> <input type="text" name="id" id="id3" hidden>
<div class="row mb-3">
<fieldset class="form-group row"> <fieldset class="form-group row">
<legend class="col-form-label col-sm-2 float-sm-left pt-0">Gravity Format:</legend> <legend class="col-form-label col-sm-2 float-sm-left pt-0">Gravity Format:</legend>
<div class="col-sm-4"> <div class="col-sm-4">
<div class="form-check"> <div class="form-check">
<input class="form-check-input" type="radio" name="gravity-format" id="gravity-format-g" value="G" checked> <input class="form-check-input" type="radio" name="gravity-format" id="gravity-format-g" value="G" checked>
<label class="form-check-label" for="gravity-format-g"> <label class="form-check-label" for="gravity-format-g">SG</label>
SG
</label>
</div> </div>
<div class="form-check"> <div class="form-check">
<input class="form-check-input" type="radio" name="gravity-format" id="gravity-format-p" value="P"> <input class="form-check-input" type="radio" name="gravity-format" id="gravity-format-p" value="P">
<label class="form-check-label" for="gravity-format-p"> <label class="form-check-label" for="gravity-format-p">Plato</label>
Plato
</label>
</div> </div>
</div> </div>
</fieldset> </fieldset>
<div class="form-group row"> </div>
<label for="gravity-formula" class="col-sm-2 col-form-label">Formula (SG)</label>
<div class="row mb-3">
<label for="gravity-formula" class="col-sm-2 col-form-label">Formula</label>
<div class="col-sm-10"> <div class="col-sm-10">
<input type="text" maxlength="200" class="form-control" name="gravity-formula" id="gravity-formula"> <input type="text" maxlength="200" class="form-control" name="gravity-formula" id="gravity-formula">
</div> </div>
</div> </div>
<div class="form-group row">
<div class="row mb-3">
<div class="col-sm-4 offset-sm-2"> <div class="col-sm-4 offset-sm-2">
<div class="form-check"> <div class="form-check">
<input class="form-check-input" type="checkbox" name="gravity-temp-adjustment" id="gravity-temp-adjustment"> <input class="form-check-input" type="checkbox" name="gravity-temp-adjustment" id="gravity-temp-adjustment">
<label class="form-check-label" for="gravity-temp-adjustment"> <label class="form-check-label" for="gravity-temp-adjustment">Temperature adjust gravity</label>
Temperature adjust gravity
</label>
</div> </div>
</div> </div>
</div> </div>
<div class="form-group row">
<div class="row mb-3">
<div class="col-sm-4 offset-sm-2"> <div class="col-sm-4 offset-sm-2">
<button type="submit" class="btn btn-primary" id="gravity-btn">Save</button> <button type="submit" class="btn btn-primary" id="gravity-btn">Save</button>
</div> </div>
@ -382,45 +376,46 @@
</div> </div>
</div> </div>
<div class="card"> <div class="accordion-item">
<div class="card-header" id="headingHardware"> <h2 class="accordion-header" id="headingHardware">
<h2 class="mb-0"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseHardware" aria-expanded="false" aria-controls="collapseHardware">
<button class="btn btn-link btn-block text-left collapsed" onclick="window.location.href = '#collapseHardware'" type="button" data-toggle="collapse" data-target="#collapseHardware" aria-expanded="false" aria-controls="collapseHardware"> <b>Hardware</b>
Hardware settings
</button> </button>
</h2> </h2>
</div> <div id="collapseHardware" class="accordion-collapse collapse" aria-labelledby="headingHardware" data-bs-parent="#accordion">
<div id="collapseHardware" class="collapse" aria-labelledby="headingHardware" data-parent="#accordion"> <div class="accordion-body">
<div class="card-body">
<form action="/api/config/hardware" method="post"> <form action="/api/config/hardware" method="post">
<input type="text" name="id" id="id4" hidden> <input type="text" name="id" id="id4" hidden>
<div class="form-group row">
<div class="row mb-3">
<label for="voltage-factor" class="col-sm-2 col-form-label">Voltage factor:</label> <label for="voltage-factor" class="col-sm-2 col-form-label">Voltage factor:</label>
<div class="col-sm-2"> <div class="col-sm-2">
<input type="number" step=".01" class="form-control" name="voltage-factor" id="voltage-factor"> <input type="number" step=".01" class="form-control" name="voltage-factor" id="voltage-factor">
</div> </div>
<label for="voltage-factor" class="col-sm-3 col-form-label" id="battery">Loading...</label> <label for="voltage-factor" class="col-sm-3 col-form-label" id="battery">Loading...</label>
</div> </div>
<div class="form-group row">
<div class="row mb-3">
<label for="temp-adjustment-value" class="col-sm-2 col-form-label">Temp Sensor Adj:</label> <label for="temp-adjustment-value" class="col-sm-2 col-form-label">Temp Sensor Adj:</label>
<div class="col-sm-2"> <div class="col-sm-2">
<input type="number" step=".1" class="form-control" name="temp-adjustment-value" id="temp-adjustment-value"> <input type="number" step=".1" class="form-control" name="temp-adjustment-value" id="temp-adjustment-value">
</div> </div>
</div> </div>
<div class="form-group row">
<div class="row mb-3">
<div class="col-sm-3 offset-sm-2"> <div class="col-sm-3 offset-sm-2">
<div class="form-check"> <div class="form-check">
<input class="form-check-input" type="checkbox" name="gyro-temp" id="gyro-temp"> <input class="form-check-input" type="checkbox" name="gyro-temp" id="gyro-temp">
<label class="form-check-label" for="gyro-temp"> <label class="form-check-label" for="gyro-temp">Use gyro temperature</label>
Use gyro temperature
</label>
</div> </div>
</div> </div>
</div> </div>
<div class="form-group row">
<div class="row mb-3">
<label class="col-sm-2 col-form-label" for="ble">Bluetooth tilt color:</label> <label class="col-sm-2 col-form-label" for="ble">Bluetooth tilt color:</label>
<div class="col-sm-2"> <div class="col-sm-2">
<select class="form-control" id="ble" name="ble" disabled> <select class="form-select" id="ble" name="ble" disabled>
<option value="">-not active-</option> <option value="">-not active-</option>
<option value="red">red</option> <option value="red">red</option>
<option value="green">green</option> <option value="green">green</option>
@ -433,21 +428,24 @@
</select> </select>
</div> </div>
</div> </div>
<div class="form-group row">
<div class="row mb-3">
<label for="ota-url" class="col-sm-2 col-form-label">OTA base URL:</label> <label for="ota-url" class="col-sm-2 col-form-label">OTA base URL:</label>
<div class="col-sm-10"> <div class="col-sm-8">
<input type="url" maxlength="90" class="form-control" name="ota-url" id="ota-url"> <input type="url" maxlength="90" class="form-control" name="ota-url" id="ota-url">
</div> </div>
</div> </div>
<div class="form-group row">
<div class="row mb-3">
<div class="col-sm-8 offset-sm-2"> <div class="col-sm-8 offset-sm-2">
<button type="submit" class="btn btn-primary" id="hardware-btn">Save</button> <button type="submit" class="btn btn-primary" id="hardware-btn">Save</button>
</div> </div>
</div> </div>
</form> </form>
<div class="form-group row">
<div class="row mb-3">
<div class="col-sm-8 offset-sm-2"> <div class="col-sm-8 offset-sm-2">
<button class="btn btn-info" id="firmware-btn">Upload firmware</button> <button class="btn btn-secondary" id="firmware-btn">Upload firmware</button>
</div> </div>
</div> </div>
</div> </div>
@ -455,14 +453,12 @@
</div> </div>
</div> </div>
<hr class="my-4"> <div class="modal fade" id="modal-http" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="modal-header" aria-hidden="true">
</div> <div class="modal-dialog">
<div class="modal fade" id="modal-http" tabindex="-1" role="dialog" aria-labelledby="modal-header" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h5 class="modal-title" id="modal-header">Define HTTP headers</h5> <h5 class="modal-title" id="modal-header">Define HTTP headers</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<label for="http-header" class="col-form-label">Header 1 (Header: value)</label> <label for="http-header" class="col-form-label">Header 1 (Header: value)</label>
@ -473,7 +469,7 @@
<input type="text" id="field2" hidden> <input type="text" id="field2" hidden>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn btn-primary" id="btn-close" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Close</button>
</div> </div>
</div> </div>
</div> </div>
@ -491,6 +487,7 @@ $('#modal-http').on('show.bs.modal', function (event) {
modal.find('.modal-body #field2').val(field2) modal.find('.modal-body #field2').val(field2)
}) })
$('#modal-http').on('hide.bs.modal', function (event) { $('#modal-http').on('hide.bs.modal', function (event) {
console.log("2")
var modal = $(this) var modal = $(this)
field1 = modal.find('.modal-body #field1').val() field1 = modal.find('.modal-body #field1').val()
field2 = modal.find('.modal-body #field2').val() field2 = modal.find('.modal-body #field2').val()
@ -588,7 +585,7 @@ function checkHeader(input) {
$("#sleep-interval-info").text( t1 + " - Estimated runtime: " + t2); $("#sleep-interval-info").text( t1 + " - Estimated runtime: " + t2);
else else
$("#sleep-interval-info").text( t1 ); $("#sleep-interval-info").text( t1 );
/*
hideWarningGyro(); hideWarningGyro();
if(i>0 && i<300) { if(i>0 && i<300) {
if( $("#gyro-temp").is(":checked") ) if( $("#gyro-temp").is(":checked") )
@ -596,7 +593,7 @@ function checkHeader(input) {
showWarningSleep(); showWarningSleep();
} else { } else {
hideWarningSleep(); hideWarningSleep();
} }*/
} }
// Trigger the calibration and show warnings if needed // Trigger the calibration and show warnings if needed
@ -621,7 +618,11 @@ function checkHeader(input) {
setButtonDisabled( true ); setButtonDisabled( true );
var url = "/api/config"; var url = "/api/config";
//var url = "/test/config.json"; var url = "/test/config.json";
showError(url);
//showSuccess(url);
showWarningGyro();
showWarningSleep();
$('#spinner').show(); $('#spinner').show();
$.getJSON(url, function (cfg) { $.getJSON(url, function (cfg) {
console.log( cfg ); console.log( cfg );
@ -651,7 +652,6 @@ function checkHeader(input) {
$("#http-push2-h1").val(cfg["http-push2-h1"]); $("#http-push2-h1").val(cfg["http-push2-h1"]);
$("#http-push2-h2").val(cfg["http-push2-h2"]); $("#http-push2-h2").val(cfg["http-push2-h2"]);
$("#http-push3").val(cfg["http-push3"]); $("#http-push3").val(cfg["http-push3"]);
$("#brewfather-push").val(cfg["brewfather-push"]);
$("#influxdb2-push").val(cfg["influxdb2-push"]); $("#influxdb2-push").val(cfg["influxdb2-push"]);
$("#influxdb2-org").val(cfg["influxdb2-org"]); $("#influxdb2-org").val(cfg["influxdb2-org"]);
$("#influxdb2-bucket").val(cfg["influxdb2-bucket"]); $("#influxdb2-bucket").val(cfg["influxdb2-bucket"]);
@ -685,6 +685,6 @@ function checkHeader(input) {
<!-- START FOOTER --> <!-- START FOOTER -->
<div class="container-fluid themed-container bg-primary text-light">(C) Copyright 2021-22 Magnus Persson</div> <div class="container themed-container bg-primary text-light row-margin-10">(C) Copyright 2021-22 Magnus Persson</div>
</body> </body>
</html> </html>

87
html/firmware.htm
View File

@ -5,98 +5,105 @@
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content=""> <meta name="description" content="">
<title>Beer Gravity Monitor</title> <title>Beer Gravity Monitor</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script> <style>
.row-margin-05 { margin-top: 0.5em; }
.row-margin-10 { margin-top: 1.0em; }
</style>
</head> </head>
<body class="py-4"> <body class="py-4">
<!-- START MENU --> <!-- START MENU -->
<nav class="navbar navbar-expand-sm navbar-dark bg-primary"> <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<a class="navbar-brand" href="/firmware.htm">Beer Gravity Monitor - Firmware upgrade</a> <div class="container">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation"> <a class="navbar-brand" href="/index.htm">Beer Gravity Monitor</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
</button> </button>
<div class="collapse navbar-collapse" id="navbarNav">
<div class="collapse navbar-collapse" id="navbar">
<ul class="navbar-nav mr-auto"> <ul class="navbar-nav mr-auto">
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="javascript:history.back()">Back to configuration</a> <a class="nav-link" href="javascript:history.back()">Back to configuration</a>
</li> </li>
</ul> </ul>
</div>
<div class="spinner-border text-light" id="spinner" role="status"></div> <div class="spinner-border text-light" id="spinner" role="status"></div>
</div> </div>
</nav> </nav>
<!-- START MAIN INDEX --> <!-- START MAIN INDEX -->
<div class="container"> <div class="container row-margin-10">
<hr class="my-4"> <div class="alert alert-success alert-dismissible hide fade d-none" role="alert">
<div id="alert"></div>
<div class="alert alert-success alert-dismissible fade hide show d-none" role="alert" id="alert"> <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
<div id="alert-msg">...</div>
<button type="button" id="alert-btn" class="close" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div> </div>
<script type="text/javascript"> <script type="text/javascript">
function showError( msg ) { function showError( msg ) {
$('.alert').removeClass('alert-success').addClass('alert-danger').removeClass('d-none').addClass('show') $('.alert').removeClass('alert-success').addClass('alert-danger').removeClass('hide').addClass('show').removeClass('d-none');
$('#alert-msg').text( msg ); $('#alert').text( msg );
} }
function showSuccess( msg ) { function showSuccess( msg ) {
$('.alert').addClass('alert-success').removeClass('alert-danger').removeClass('d-none').addClass('show') $('.alert').addClass('alert-success').removeClass('alert-danger').removeClass('hide').addClass('show').removeClass('d-none');
$('#alert-msg').text( msg ); $('#alert').text( msg );
} }
$("#alert-btn").click(function(e){ $("#alert-btn").click(function(e){
$('.alert').addClass('d-none').removeClass('show') $('.alert').addClass('hide').removeClass('show').addClass('d-none');
}); });
</script> </script>
<div class="accordion" id="accordion">
<div class="accordion-item">
<h2 class="accordion-header" id="headingFirmware">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFirmware" aria-expanded="true" aria-controls="collapseFirmware">
<b>Upload firmware</b>
</button>
</h2>
<div id="collapseFirmware" class="accordion-collapse collapse show" aria-labelledby="headingFirmware" data-bs-parent="#accordion">
<div class="accordion-body">
<div class="row mb-3"> <div class="row mb-3">
<div class="col-md-12 themed-grid-col bg-light">Here you can upload a new firmware version, it will not check the version number so you can also downgrade the firmware here. <div class="col-md-12 themed-grid-col bg-light">Here you can upload a new firmware version, it will not check the version number so you can also downgrade the firmware here.
</div> </div>
</div> </div>
<div class="row mb-3"> <div class="row mb-3">
<div class="col-md-8 themed-grid-col bg-light">Current version:</div> <div class="col-md-2 themed-grid-col bg-light">Current version:</div>
<div class="col-md-4 themed-grid-col bg-light" id="app-ver">Loading...</div> <div class="col-md-10 themed-grid-col bg-light" id="app-ver">Loading...</div>
</div>
<div class="row mb-3">
<div class="col-md-8 themed-grid-col bg-light">Platform:</div>
<div class="col-md-4 themed-grid-col bg-light" id="platform">Loading...</div>
</div> </div>
<div class="row mb-3"> <div class="row mb-3">
<!-- <div class="col-md-2 themed-grid-col bg-light">Platform:</div>
<form action="/api/upload" method="post" enctype="multipart/form-data"> <div class="col-md-10 themed-grid-col bg-light" id="platform">Loading...</div>
<div class="col-md-8 custom-file">
<input type="file" accept=".bin" class="custom-file-input" name="name" id="name">
<label class="custom-file-label" for="name">Choose file</label>
</div> </div>
<button type="submit" class="btn btn-primary" id="upload-btn" value="upload">Flash firmware</button>
</form>
-->
<form id="uploadForm" enctype="multipart/form-data"> <form id="uploadForm" enctype="multipart/form-data">
<div class="row mb-3">
<div class="col-md-8 custom-file"> <div class="col-md-8 custom-file">
<input type="file" accept=".bin" class="custom-file-input" name="name" id="name" onchange="checkName()"> <input type="file" accept=".bin" class="custom-file-input" name="name" id="name" onchange="checkName()">
<label class="custom-file-label" for="name">Choose file</label>
</div> </div>
</div>
<div class="row mb-3">
<div class="col-md-2">
<button type="submit" class="btn btn-primary" id="upload-btn" value="upload">Flash firmware</button> <button type="submit" class="btn btn-primary" id="upload-btn" value="upload">Flash firmware</button>
</form>
</div> </div>
</div>
</form>
<div class="progress"> <div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div> <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div> </div>
<hr class="my-4"> </div>
</div>
</div>
</div> </div>
<script type="text/javascript"> <script type="text/javascript">
@ -159,7 +166,7 @@
setButtonDisabled( true ); setButtonDisabled( true );
var url = "/api/status"; var url = "/api/status";
//var url = "/test/status.json"; var url = "/test/status.json";
$('#spinner').show(); $('#spinner').show();
$.getJSON(url, function (cfg) { $.getJSON(url, function (cfg) {
console.log( cfg ); console.log( cfg );
@ -183,6 +190,6 @@
<!-- START FOOTER --> <!-- START FOOTER -->
<div class="container-fluid themed-container bg-primary text-light">(C) Copyright 2021-22 Magnus Persson</div> <div class="container themed-container bg-primary text-light row-margin-10">(C) Copyright 2021-22 Magnus Persson</div>
</body> </body>
</html> </html>

82
html/format.htm
View File

@ -5,22 +5,26 @@
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content=""> <meta name="description" content="">
<title>Beer Gravity Monitor</title> <title>Beer Gravity Monitor</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script> <style>
.row-margin-05 { margin-top: 0.5em; }
.row-margin-10 { margin-top: 1.0em; }
</style>
</head> </head>
<body class="py-4"> <body class="py-4">
<!-- START MENU --> <!-- START MENU -->
<nav class="navbar navbar-expand-sm navbar-dark bg-primary"> <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<div class="container">
<a class="navbar-brand" href="/index.htm">Beer Gravity Monitor</a> <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"> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
</button> </button>
<div class="collapse navbar-collapse" id="navbarNav">
<div class="collapse navbar-collapse" id="navbar">
<ul class="navbar-nav mr-auto"> <ul class="navbar-nav mr-auto">
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="javascript:history.back()">Back to configuration</a> <a class="nav-link" href="javascript:history.back()">Back to configuration</a>
@ -28,89 +32,84 @@
</ul> </ul>
</div> </div>
<div class="spinner-border text-light" id="spinner" role="status"></div> <div class="spinner-border text-light" id="spinner" role="status"></div>
</div>
</nav> </nav>
<!-- START MAIN INDEX --> <!-- START MAIN INDEX -->
<div class="container"> <div class="container row-margin-10">
<hr class="my-2"> <div class="alert alert-success alert-dismissible hide fade d-none" role="alert">
<div id="alert"></div>
<div class="alert alert-success alert-dismissible fade hide show d-none" role="alert" id="alert"> <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
<div id="alert-msg">...</div>
<button type="button" id="alert-btn" class="close" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div> </div>
<script type="text/javascript"> <script type="text/javascript">
function showError( msg ) { function showError( msg ) {
$('#alert').removeClass('alert-success').addClass('alert-danger').removeClass('d-none').addClass('show'); $('.alert').removeClass('alert-success').addClass('alert-danger').removeClass('hide').addClass('show').removeClass('d-none');
$('#alert-msg').text( msg ); $('#alert').text( msg );
} }
function showSuccess( msg ) { function showSuccess( msg ) {
$('#alert').addClass('alert-success').removeClass('alert-danger').removeClass('d-none').addClass('show'); $('.alert').addClass('alert-success').removeClass('alert-danger').removeClass('hide').addClass('show').removeClass('d-none');
$('#alert-msg').text( msg ); $('#alert').text( msg );
} }
$("#alert-btn").click(function(e){ $("#alert-btn").click(function(e){
$('#alert').addClass('d-none').removeClass('show'); $('.alert').addClass('hide').removeClass('show').addClass('d-none');
}); });
</script> </script>
<div class="accordion" id="accordion"> <div class="accordion" id="accordion">
<div class="accordion-item">
<div class="card"> <h2 class="accordion-header" id="headingFormat">
<div class="card-header" id="headingFormat"> <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFormat" aria-expanded="true" aria-controls="collapseFormat">
<h2 class="mb-0"> <b>Push Format Templates</b>
<button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#collapseFormat" aria-expanded="true" aria-controls="collapseFormat">
Push Format Templates
</button> </button>
</h2> </h2>
</div> <div id="collapseFormat" class="accordion-collapse collapse show" aria-labelledby="headingFormat" data-bs-parent="#accordion">
<div id="collapseFormat" class="collapse show" aria-labelledby="headingFormat" data-parent="#accordion"> <div class="accordion-body">
<div class="card-body">
<input type="text" name="id" id="id" hidden> <input type="text" name="id" id="id" hidden>
<input type="text" name="http-1" id="http-1" hidden> <input type="text" name="http-1" id="http-1" hidden>
<input type="text" name="http-2" id="http-2" hidden> <input type="text" name="http-2" id="http-2" hidden>
<input type="text" name="http-3" id="http-3" hidden> <input type="text" name="http-3" id="http-3" hidden>
<!--<input type="text" name="brewfather" id="brewfather" hidden>-->
<input type="text" name="influxdb" id="influxdb" hidden> <input type="text" name="influxdb" id="influxdb" hidden>
<input type="text" name="mqtt" id="mqtt" hidden> <input type="text" name="mqtt" id="mqtt" hidden>
<div class="form-group row"> <div class="row mb-3">
<label for="push-target" class="col-sm-2 col-form-label">Push target:</label> <label for="push-target" class="col-sm-2 col-form-label">Push target:</label>
<select class="custom-select col-sm-4" required name="push-target" id="push-target"> <select class="custom-select col-sm-4" required name="push-target" id="push-target">
<option value="http-1">HTTP option 1 (post)</option> <option value="http-1">HTTP option 1 (post)</option>
<option value="http-2">HTTP option 2 (post)</option> <option value="http-2">HTTP option 2 (post)</option>
<option value="http-3">HTTP option 3 (get)</option> <option value="http-3">HTTP option 3 (get)</option>
<!--<option value="brewfather">Brewfather</option>-->
<option value="influxdb">Influx DB</option> <option value="influxdb">Influx DB</option>
<option value="mqtt">MQTT</option> <option value="mqtt">MQTT</option>
</select> </select>
</div> </div>
<div class="form-group row"> <div class="row mb-3">
<div class="col-sm-12"> <div class="col-sm-12">
<textarea rows="5" class="form-control" name="format" id="format"> <textarea rows="5" class="form-control" name="format" id="format">
</textarea> </textarea>
</div> </div>
</div> </div>
<div class="form-group row"> <div class="row mb-3">
<div class="col-sm-8 offset-sm-2"> <div class="col-sm-8 offset-sm-2">
<button class="btn btn-primary" id="format-btn">Save</button> <button class="btn btn-primary" id="format-btn">Save</button>
<button class="btn btn-secondary" id="test-btn">Test</button> <button class="btn btn-secondary" id="test-btn">Test</button>
</div> </div>
</div> </div>
<pre class="card-preview" id="preview" name="preview"></pre> <hr class="my-2">
</div>
</div>
</div>
<hr class="my-4"> <pre class="card-preview" id="preview" name="preview"></pre>
</div>
</div>
</div>
</div>
</div> </div>
<script type="text/javascript"> <script type="text/javascript">
@ -215,7 +214,6 @@
}); });
}); });
function setButtonDisabled( b ) { function setButtonDisabled( b ) {
$("#format-btn").prop("disabled", b); $("#format-btn").prop("disabled", b);
$("#test-btn").prop("disabled", b); $("#test-btn").prop("disabled", b);
@ -237,7 +235,7 @@
setButtonDisabled( true ); setButtonDisabled( true );
var url = "/api/config/format"; var url = "/api/config/format";
//var url = "/test/format.json"; var url = "/test/format.json";
$('#spinner').show(); $('#spinner').show();
$.getJSON(url, function (cfg) { $.getJSON(url, function (cfg) {
console.log( cfg ); console.log( cfg );
@ -263,6 +261,6 @@
<!-- START FOOTER --> <!-- START FOOTER -->
<div class="container-fluid themed-container bg-primary text-light">(C) Copyright 2021-22 Magnus Persson</div> <div class="container themed-container bg-primary text-light row-margin-10">(C) Copyright 2021-22 Magnus Persson</div>
</body> </body>
</html> </html>

140
html/index.htm
View File

@ -5,25 +5,30 @@
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content=""> <meta name="description" content="">
<title>Beer Gravity Monitor</title> <title>Beer Gravity Monitor</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script> <style>
.row-margin-05 { margin-top: 0.5em; }
.row-margin-10 { margin-top: 1.0em; }
</style>
</head> </head>
<body class="py-4"> <body class="py-4">
<!-- START MENU --> <!-- START MENU -->
<nav class="navbar navbar-expand-sm navbar-dark bg-primary"> <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<div class="container">
<a class="navbar-brand" href="/index.htm">Beer Gravity Monitor</a> <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"> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
</button> </button>
<div class="collapse navbar-collapse" id="navbarNav">
<div class="collapse navbar-collapse" id="navbar"> <ul class="navbar-nav">
<ul class="navbar-nav mr-auto"> <li class="nav-item">
<li class="nav-item active"> <a class="nav-link active" href="#"><b>Home</b></a>
<a class="nav-link" href="/index.htm">Home <span class="sr-only">(current)</span></a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="/config.htm">Configuration</a> <a class="nav-link" href="/config.htm">Configuration</a>
@ -35,59 +40,67 @@
<a class="nav-link" href="/about.htm">About</a> <a class="nav-link" href="/about.htm">About</a>
</li> </li>
</ul> </ul>
</div>
<div class="spinner-border text-light" id="spinner" role="status"></div> <div class="spinner-border text-light" id="spinner" role="status"></div>
</div> </div>
</nav> </nav>
<!-- START MAIN INDEX --> <!-- START MAIN INDEX -->
<div class="container"> <div class="container row-margin-10">
<hr class="my-4"> <div class="alert alert-success alert-dismissible hide fade d-none" role="alert">
<div id="alert"></div>
<div class="alert alert-success alert-dismissible fade hide show d-none" role="alert" id="alert"> <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
<div id="alert-msg">...</div>
<button type="button" id="alert-btn" class="close" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div> </div>
<script type="text/javascript"> <script type="text/javascript">
function showError( msg ) { function showError( msg ) {
$('.alert').removeClass('alert-success').addClass('alert-danger').removeClass('d-none').addClass('show') console.log("Error:" + msg);
$('#alert-msg').text( msg ); $('.alert').removeClass('alert-success').addClass('alert-danger').removeClass('hide').addClass('show').removeClass('d-none');
$('#alert').text( msg );
} }
function showSuccess( msg ) { function showSuccess( msg ) {
$('.alert').addClass('alert-success').removeClass('alert-danger').removeClass('d-none').addClass('show') console.log("Success:" + msg);
$('#alert-msg').text( msg ); $('.alert').addClass('alert-success').removeClass('alert-danger').removeClass('hide').addClass('show').removeClass('d-none');
$('#alert').text( msg );
} }
$("#alert-btn").click(function(e){ $("#alert-btn").click(function(e){
$('.alert').addClass('d-none').removeClass('show') console.log("Disable");
$('.alert').addClass('hide').removeClass('show').addClass('d-none');
}); });
</script> </script>
<div class="accordion" id="accordion">
<div class="accordion-item">
<h2 class="accordion-header" id="headingSoftware">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseSoftware" aria-expanded="true" aria-controls="collapseSoftware">
<b>Device</b>
</button>
</h2>
<div id="collapseSoftware" class="accordion-collapse collapse show" aria-labelledby="headingSoftware" data-bs-parent="#accordion">
<div class="accordion-body">
<div class="row mb-3"> <div class="row mb-3">
<div class="col-md-8 themed-grid-col bg-light">Current version:</div> <div class="col-md-4 bg-light">Current version:</div>
<div class="col-md-4 themed-grid-col bg-light" id="app-ver">Loading...</div> <div class="col-md-4 bg-light" id="app-ver">Loading...</div>
</div> </div>
<div class="row mb-3" id="h-app-ver-new" hidden> <div class="row mb-3" id="h-app-ver-new" hidden>
<div class="col-md-8 themed-grid-col bg-light">New version:</div> <div class="col-md-4 bg-light">New version:</div>
<div class="col-md-4 themed-grid-col bg-light" id="app-ver-new">Loading...</div> <div class="col-md-4 bg-light" id="app-ver-new">Loading...</div>
</div> </div>
<div class="row mb-3"> <div class="row mb-3">
<div class="col-md-8 themed-grid-col bg-light">Host name:</div> <div class="col-md-4 bg-light">Host name:</div>
<div class="col-md-4 themed-grid-col bg-light" id="mdns">Loading...</div> <div class="col-md-4 bg-light" id="mdns">Loading...</div>
</div> </div>
<div class="row mb-3"> <div class="row mb-3">
<div class="col-md-8 themed-grid-col bg-light">Device ID:</div> <div class="col-md-4 bg-light">Device ID:</div>
<div class="col-md-4 themed-grid-col bg-light" id="id">Loading...</div> <div class="col-md-4 bg-light" id="id">Loading...</div>
</div> </div>
<div class="row mb-3"> <div class="row mb-3">
<div class="col-md-8 themed-grid-col bg-light">Platform:</div> <div class="col-md-4 bg-light">Platform:</div>
<div class="col-md-4 themed-grid-col bg-light" id="platform">Loading...</div> <div class="col-md-4 bg-light" id="platform">Loading...</div>
</div> </div>
<script> <script>
@ -99,56 +112,65 @@
}, 3000); //5 seconds }, 3000); //5 seconds
function loadLog() { function loadLog() {
$("#logContent").load("/log"); //$("#logContent").load("/log");
//$("#logContent").load("/test/status.json"); $("#logContent").load("/test/status.json");
}; };
</script> </script>
<div class="row mb-3"> <button class="btn btn-primary btn-sm" type="button" data-bs-toggle="collapse" data-bs-target="#collapseLog" aria-expanded="false" aria-controls="collapseLog">
<a class="badge badge-primary" data-toggle="collapse" href="#collapseLog" role="button" aria-expanded="false" aria-controls="collapseLog" id="log-btn">
View error log View error log
</a> </button>
</div>
<div class="collapse" id="collapseLog"> <div class="collapse row-margin-10" id="collapseLog">
<div class="card card-body"> <div class="card card-body">
<pre><code id="logContent"></code></pre> <pre><code class="card-text" id="logContent"></code></pre>
</div> </div>
</div> </div>
<hr class="my-4"> </div>
</div>
</div>
<h2 class="accordion-header" id="headingData">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseData" aria-expanded="true" aria-controls="collapseData">
<b>Measurement</b>
</button>
</h2>
<div id="collapseData" class="accordion-collapse collapse show" aria-labelledby="headingData" data-bs-parent="#accordion">
<div class="accordion-body">
<div class="row mb-3"> <div class="row mb-3">
<div class="col-md-8 themed-grid-col bg-light">Gravity:</div> <div class="col-md-4 bg-light">Gravity:</div>
<div class="col-md-4 themed-grid-col bg-light" id="gravity">Loading...</div> <div class="col-md-4 bg-light" id="gravity">Loading...</div>
</div> </div>
<div class="row mb-3"> <div class="row mb-3">
<div class="col-md-8 themed-grid-col bg-light">Temperature:</div> <div class="col-md-4 bg-light">Temperature:</div>
<div class="col-md-4 themed-grid-col bg-light" id="temp">Loading...</div> <div class="col-md-4 bg-light" id="temp">Loading...</div>
</div> </div>
<div class="row mb-3"> <div class="row mb-3">
<div class="col-md-8 themed-grid-col bg-light">Angle/Tilt:</div> <div class="col-md-4 bg-light">Angle/Tilt:</div>
<div class="col-md-4 themed-grid-col bg-light" id="angle">Loading...</div> <div class="col-md-4 bg-light" id="angle">Loading...</div>
</div> </div>
<div class="row mb-3"> <div class="row mb-3">
<div class="col-md-8 themed-grid-col bg-light">Battery:</div> <div class="col-md-4 bg-light">Battery:</div>
<div class="col-md-4 themed-grid-col bg-light" id="battery">Loading...</div> <div class="col-md-4 bg-light" id="battery">Loading...</div>
</div> </div>
<div class="row mb-3"> <div class="row mb-3">
<div class="col-md-8 themed-grid-col bg-light">Average runtime:</div> <div class="col-md-4 bg-light">Average runtime:</div>
<div class="col-md-4 themed-grid-col bg-light" id="runtime">Loading...</div> <div class="col-md-4 bg-light" id="runtime">Loading...</div>
</div> </div>
<div class="row mb-3"> <div class="row mb-3">
<div class="col-md-12 px-md-5 themed-grid-col bg-light custom-control custom-checkbox"> <div class="col-md-8 bg-light custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" name="sleep-mode" id="sleep-mode" disabled> <input type="checkbox" class="custom-control-input" name="sleep-mode" id="sleep-mode" disabled>
<label class="custom-control-label" for="sleep-mode">Do not enter sleep mode when floating (check this if you are collecting angles/tilt for calibration).</label> <label class="custom-control-label" for="sleep-mode">Do not enter sleep mode when floating (check this if you are collecting angles/tilt for calibration).</label>
</div> </div>
</div> </div>
<hr class="my-4"> </div>
</div>
</div>
</div> </div>
<script type="text/javascript"> <script type="text/javascript">
@ -167,12 +189,14 @@
function getStatus() { function getStatus() {
var url = "/api/status"; var url = "/api/status";
//var url = "/test/status.json"; var url = "/test/status.json";
showError(url);
//showSuccess(url);
$('#spinner').show(); $('#spinner').show();
$.getJSON(url, function (cfg) { $.getJSON(url, function (cfg) {
console.log( cfg ); console.log( cfg );
//$("#app-ver").text(cfg["app-ver"] + " (html 0.8.0)");
$("#app-ver").text(cfg["app-ver"] + " (" + cfg["app-build"] + ")"); $("#app-ver").text(cfg["app-ver"] + " (" + cfg["app-build"] + ")");
$("#mdns").text(cfg["mdns"]); $("#mdns").text(cfg["mdns"]);
$("#id").text(cfg["id"]); $("#id").text(cfg["id"]);
@ -236,6 +260,6 @@
<!-- START FOOTER --> <!-- START FOOTER -->
<div class="container-fluid themed-container bg-primary text-light">(C) Copyright 2021-22 Magnus Persson</div> <div class="container themed-container bg-primary text-light row-margin-10">(C) Copyright 2021-22 Magnus Persson</div>
</body> </body>
</html> </html>

70
html/test.htm
View File

@ -5,22 +5,26 @@
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content=""> <meta name="description" content="">
<title>Beer Gravity Monitor</title> <title>Beer Gravity Monitor</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script> <style>
.row-margin-05 { margin-top: 0.5em; }
.row-margin-10 { margin-top: 1.0em; }
</style>
</head> </head>
<body class="py-4"> <body class="py-4">
<!-- START MENU --> <!-- START MENU -->
<nav class="navbar navbar-expand-sm navbar-dark bg-primary"> <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<div class="container">
<a class="navbar-brand" href="/index.htm">Beer Gravity Monitor</a> <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"> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
</button> </button>
<div class="collapse navbar-collapse" id="navbarNav">
<div class="collapse navbar-collapse" id="navbar">
<ul class="navbar-nav mr-auto"> <ul class="navbar-nav mr-auto">
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="javascript:history.back()">Back to configuration</a> <a class="nav-link" href="javascript:history.back()">Back to configuration</a>
@ -28,54 +32,58 @@
</ul> </ul>
</div> </div>
<div class="spinner-border text-light" id="spinner" role="status"></div> <div class="spinner-border text-light" id="spinner" role="status"></div>
</div>
</nav> </nav>
<!-- START MAIN INDEX --> <!-- START MAIN INDEX -->
<div class="container"> <div class="container row-margin-10">
<hr class="my-2"> <div class="alert alert-success alert-dismissible hide fade d-none" role="alert">
<div id="alert"></div>
<div class="alert alert-success alert-dismissible fade hide show d-none" role="alert" id="alert"> <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
<div id="alert-msg">...</div>
<button type="button" id="alert-btn" class="close" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div> </div>
<script type="text/javascript"> <script type="text/javascript">
function showError( msg ) { function showError( msg ) {
$('#alert').removeClass('alert-success').addClass('alert-danger').removeClass('d-none').addClass('show'); $('.alert').removeClass('alert-success').addClass('alert-danger').removeClass('hide').addClass('show').removeClass('d-none');
$('#alert-msg').text( msg ); $('#alert').text( msg );
} }
function showSuccess( msg ) { function showSuccess( msg ) {
$('#alert').addClass('alert-success').removeClass('alert-danger').removeClass('d-none').addClass('show'); $('.alert').addClass('alert-success').removeClass('alert-danger').removeClass('hide').addClass('show').removeClass('d-none');
$('#alert-msg').text( msg ); $('#alert').text( msg );
} }
$("#alert-btn").click(function(e){ $("#alert-btn").click(function(e){
$('#alert').addClass('d-none').removeClass('show'); $('.alert').addClass('hide').removeClass('show').addClass('d-none');
}); });
</script> </script>
<div>
<div class="card"> <div class="accordion" id="accordion">
<div class="card-body"> <div class="accordion-item">
<pre class="card-preview" id="preview" name="preview"></pre> <h2 class="accordion-header" id="headingTest">
</div> <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTest" aria-expanded="true" aria-controls="collapseTest">
<b>Testing push targets</b>
</button>
</h2>
<div id="collapseTest" class="accordion-collapse collapse show" aria-labelledby="headingTest" data-bs-parent="#accordion">
<div class="accordion-body">
<div class="row mb-3">
<pre class="card-preview" id="preview" name="preview">Press test button to start testing all defined push targets.</pre>
</div> </div>
<div class="form-group row"> <div class="row mb-3">
</div>
<div class="form-group row">
<div class="col-sm-8"> <div class="col-sm-8">
<button class="btn btn-primary" id="test-btn">Test</button> <button class="btn btn-primary" id="test-btn">Test</button>
</div> </div>
</div> </div>
<hr class="my-4"> </div>
</div>
</div>
</div>
</div> </div>
<script type="text/javascript"> <script type="text/javascript">
@ -212,6 +220,6 @@
<!-- START FOOTER --> <!-- START FOOTER -->
<div class="container-fluid themed-container bg-primary text-light">(C) Copyright 2021-22 Magnus Persson</div> <div class="container themed-container bg-primary text-light row-margin-10">(C) Copyright 2021-22 Magnus Persson</div>
</body> </body>
</html> </html>

96
html/upload.htm
View File

@ -5,99 +5,115 @@
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content=""> <meta name="description" content="">
<title>Beer Gravity Monitor</title> <title>Beer Gravity Monitor</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script> <style>
.row-margin-05 { margin-top: 0.5em; }
.row-margin-10 { margin-top: 1.0em; }
</style>
</head> </head>
<body class="py-4"> <body class="py-4">
<!-- START MENU --> <!-- START MENU -->
<nav class="navbar navbar-expand-sm navbar-dark bg-primary"> <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<a class="navbar-brand" href="/upload.htm">Beer Gravity Monitor - Missing html files</a> <div class="container">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation"> <a class="navbar-brand" href="/index.htm">Beer Gravity Monitor</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
</button> </button>
<div class="collapse navbar-collapse" id="navbar">
<div class="spinner-border text-light" id="spinner" role="status"></div> <div class="spinner-border text-light" id="spinner" role="status"></div>
</div> </div>
</nav> </nav>
<!-- START MAIN INDEX --> <!-- START MAIN INDEX -->
<div class="container"> <div class="container row-margin-10">
<hr class="my-4"> <div class="alert alert-success alert-dismissible hide fade d-none" role="alert">
<div id="alert"></div>
<div class="alert alert-success alert-dismissible fade hide show d-none" role="alert" id="alert"> <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
<div id="alert-msg">...</div>
<button type="button" id="alert-btn" class="close" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div> </div>
<script type="text/javascript"> <script type="text/javascript">
function showError( msg ) { function showError( msg ) {
$('.alert').removeClass('alert-success').addClass('alert-danger').removeClass('d-none').addClass('show') $('.alert').removeClass('alert-success').addClass('alert-danger').removeClass('hide').addClass('show').removeClass('d-none');
$('#alert-msg').text( msg ); $('#alert').text( msg );
} }
function showSuccess( msg ) { function showSuccess( msg ) {
$('.alert').addClass('alert-success').removeClass('alert-danger').removeClass('d-none').addClass('show') $('.alert').addClass('alert-success').removeClass('alert-danger').removeClass('hide').addClass('show').removeClass('d-none');
$('#alert-msg').text( msg ); $('#alert').text( msg );
} }
$("#alert-btn").click(function(e){ $("#alert-btn").click(function(e){
$('.alert').addClass('d-none').removeClass('show') $('.alert').addClass('hide').removeClass('show').addClass('d-none');
}); });
</script> </script>
<div class="accordion" id="accordion">
<div class="accordion-item">
<h2 class="accordion-header" id="headingUpload">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseUpload" aria-expanded="true" aria-controls="collapseUpload">
<b>Upload missing html files</b>
</button>
</h2>
<div id="collapseUpload" class="accordion-collapse collapse show" aria-labelledby="headingUpload" data-bs-parent="#accordion">
<div class="accordion-body">
<div class="row mb-3"> <div class="row mb-3">
<div class="col-md-8 themed-grid-col bg-light">The listed files below needs to be uploaded to the FileSystem in order for the GUI to work. <div class="col-md-8 bg-light">The listed files below needs to be uploaded to the FileSystem in order for the GUI to work.
You can also flash the LittleFS filesystem but in that case you will loose your device settings. An OTA upgrade will automatically download You can also flash the LittleFS filesystem but in that case you will loose your device settings. An OTA upgrade will automatically download
the files if they are found in the same location as the firmware.bin. This page is a fallback option. the files if they are found in the same location as the firmware.bin. This page is a fallback option.
</div> </div>
<div class="col-md-8 themed-grid-col bg-light"><br><strong>Once all the files are confirmed, please reboot the device for normal operation.</strong></div> <div class="col-md-8 bg-light"><br><strong>Once all the files are confirmed, please reboot the device for normal operation.</strong></div>
</div> </div>
<div class="row mb-3"> <div class="row mb-3">
<div class="col-md-2 themed-grid-col bg-light">index.min.htm</div> <div class="col-md-2 bg-light">index.min.htm</div>
<div class="col-md-6 themed-grid-col bg-light" id="index">Checking...</div> <div class="col-md-6 bg-light" id="index">Checking...</div>
</div> </div>
<div class="row mb-3"> <div class="row mb-3">
<div class="col-md-2 themed-grid-col bg-light">config.min.htm</div> <div class="col-md-2 bg-light">config.min.htm</div>
<div class="col-md-6 themed-grid-col bg-light" id="config">Checking...</div> <div class="col-md-6 bg-light" id="config">Checking...</div>
</div> </div>
<div class="row mb-3"> <div class="row mb-3">
<div class="col-md-2 themed-grid-col bg-light">calibration.min.htm</div> <div class="col-md-2 bg-light">calibration.min.htm</div>
<div class="col-md-6 themed-grid-col bg-light" id="calibration">Checking...</div> <div class="col-md-6 bg-light" id="calibration">Checking...</div>
</div> </div>
<div class="row mb-3"> <div class="row mb-3">
<div class="col-md-2 themed-grid-col bg-light">format.min.htm</div> <div class="col-md-2 bg-light">format.min.htm</div>
<div class="col-md-6 themed-grid-col bg-light" id="format">Checking...</div> <div class="col-md-6 bg-light" id="format">Checking...</div>
</div> </div>
<div class="row mb-3"> <div class="row mb-3">
<div class="col-md-2 themed-grid-col bg-light">test.min.htm</div> <div class="col-md-2 bg-light">test.min.htm</div>
<div class="col-md-6 themed-grid-col bg-light" id="test">Checking...</div> <div class="col-md-6 bg-light" id="test">Checking...</div>
</div> </div>
<div class="row mb-3"> <div class="row mb-3">
<div class="col-md-2 themed-grid-col bg-light">about.min.htm</div> <div class="col-md-2 bg-light">about.min.htm</div>
<div class="col-md-6 themed-grid-col bg-light" id="about">Checking...</div> <div class="col-md-6 bg-light" id="about">Checking...</div>
</div> </div>
<div class="row mb-3">
<form action="/api/upload" method="post" enctype="multipart/form-data"> <form action="/api/upload" method="post" enctype="multipart/form-data">
<div class="row mb-3">
<div class="col-md-8 custom-file"> <div class="col-md-8 custom-file">
<input type="file" accept=".min.htm" class="custom-file-input" name="name" id="name"> <input type="file" accept=".min.htm" class="custom-file-input" name="name" id="name">
<label class="custom-file-label" for="name">Choose file</label>
</div> </div>
</div>
<div class="row mb-3">
<div class="col-md-3">
<button type="submit" class="btn btn-primary" id="upload-btn" value="upload">Upload</button> <button type="submit" class="btn btn-primary" id="upload-btn" value="upload">Upload</button>
</form>
</div> </div>
</div>
</form>
<hr class="my-4"> </div>
</div>
</div>
</div>
</div> </div>
<script type="text/javascript"> <script type="text/javascript">
@ -111,7 +127,7 @@ $(".custom-file-input").on("change", function() {
function getUpload() { function getUpload() {
var url = "/api/upload"; var url = "/api/upload";
//var url = "/test/upload.json"; var url = "/test/upload.json";
$('#spinner').show(); $('#spinner').show();
$.getJSON(url, function (cfg) { $.getJSON(url, function (cfg) {
console.log( cfg ); console.log( cfg );
@ -159,6 +175,6 @@ function getUpload() {
<!-- START FOOTER --> <!-- START FOOTER -->
<div class="container-fluid themed-container bg-primary text-light">(C) Copyright 2021-22 Magnus Persson</div> <div class="container themed-container bg-primary text-light row-margin-10">(C) Copyright 2021-22 Magnus Persson</div>
</body> </body>
</html> </html>

3
test/formula.json
View File

@ -10,5 +10,6 @@
"g3": 1.010, "g3": 1.010,
"g2": 1.025, "g2": 1.025,
"g4": 1.040, "g4": 1.040,
"g5": 1.005 "g5": 1.005,
"error": ""
} }