Rough update to bootstrap 5 done
This commit is contained in:
Magnus Persson
@ -5,25 +5,28 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="">
|
||||
<title>Beer Gravity Monitor</title>
|
||||
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
|
||||
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
|
||||
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" crossorigin="anonymous"></script>
|
||||
<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>
|
||||
<style>
|
||||
.row-margin-05 { margin-top: 0.5em; }
|
||||
.row-margin-10 { margin-top: 1.0em; }
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="py-4">
|
||||
|
||||
<!-- 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>
|
||||
<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>
|
||||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbar">
|
||||
<ul class="navbar-nav mr-auto">
|
||||
<div class="collapse navbar-collapse" id="navbarNav">
|
||||
<ul class="navbar-nav">
|
||||
<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 class="nav-item">
|
||||
<a class="nav-link" href="/config.htm">Configuration</a>
|
||||
@ -32,23 +35,36 @@
|
||||
<a class="nav-link" href="/calibration.htm">Calibration</a>
|
||||
</li>
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" href="/about.htm">About</a>
|
||||
<a class="nav-link" href="#"><b>About</b></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- START MAIN INDEX -->
|
||||
<!-- START BODY -->
|
||||
|
||||
<div class="container">
|
||||
<hr class="my-4">
|
||||
<div class="row mb-3">
|
||||
<h3>Beer Gravity Monitor</h3>
|
||||
<div class="container row-margin-10">
|
||||
|
||||
<div class="accordion row-margin-10" id="accordion">
|
||||
<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.
|
||||
</div>
|
||||
<div class="row mb-3">
|
||||
<h3>MIT License</h3>
|
||||
|
||||
<div class="row h3 col-sm-8 mb-3">
|
||||
MIT License
|
||||
</div>
|
||||
<div class="row col-sm-8 mb-3">
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
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
|
||||
SOFTWARE.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class="my-4">
|
||||
</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>
|
||||
</html>
|
||||
@ -5,32 +5,36 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="">
|
||||
<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://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>
|
||||
<style>
|
||||
.row-margin-05 { margin-top: 0.5em; }
|
||||
.row-margin-10 { margin-top: 1.0em; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="py-4">
|
||||
|
||||
<!-- START MENU -->
|
||||
|
||||
<nav class="navbar navbar-expand-sm navbar-dark bg-primary">
|
||||
<!-- START MENU -->
|
||||
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
|
||||
<div class="container">
|
||||
<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>
|
||||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbar">
|
||||
<ul class="navbar-nav mr-auto">
|
||||
<div class="collapse navbar-collapse" id="navbarNav">
|
||||
<ul class="navbar-nav">
|
||||
<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 class="nav-item">
|
||||
<a class="nav-link" href="/config.htm">Configuration</a>
|
||||
</li>
|
||||
<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 class="nav-item">
|
||||
<a class="nav-link" href="/about.htm">About</a>
|
||||
@ -38,50 +42,42 @@
|
||||
</ul>
|
||||
</div>
|
||||
<div class="spinner-border text-light" id="spinner" role="status"></div>
|
||||
</nav>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- START MAIN INDEX -->
|
||||
<!-- START BODY -->
|
||||
|
||||
<div class="container">
|
||||
|
||||
<hr class="my-2">
|
||||
|
||||
<div class="alert alert-success alert-dismissible fade hide show d-none" role="alert" id="alert">
|
||||
<div id="alert-msg">...</div>
|
||||
<button type="button" id="alert-btn" class="close" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
<div class="container row-margin-10">
|
||||
<div class="alert alert-success alert-dismissible hide fade d-none" role="alert">
|
||||
<div id="alert"></div>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
function showError( msg ) {
|
||||
$('.alert').removeClass('alert-success').addClass('alert-danger').removeClass('d-none').addClass('show')
|
||||
$('#alert-msg').text( msg );
|
||||
$('.alert').removeClass('alert-success').addClass('alert-danger').removeClass('hide').addClass('show').removeClass('d-none');
|
||||
$('#alert').text( msg );
|
||||
}
|
||||
|
||||
function showSuccess( msg ) {
|
||||
$('.alert').addClass('alert-success').removeClass('alert-danger').removeClass('d-none').addClass('show')
|
||||
$('#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').addClass('d-none').removeClass('show')
|
||||
$('.alert').addClass('hide').removeClass('show').addClass('d-none');
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="accordion" id="accordion">
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header" id="headingOne">
|
||||
<h2 class="mb-0">
|
||||
<button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#collapseCalibration" aria-expanded="true" aria-controls="collapseCalibration">
|
||||
Formula calculation
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header" id="headingFormula">
|
||||
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFormula" aria-expanded="true" aria-controls="collapseFormula">
|
||||
<b>Formula calculation</b>
|
||||
</button>
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div id="collapseCalibration" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
|
||||
<div class="card-body">
|
||||
<div id="collapseFormula" class="accordion-collapse collapse show" aria-labelledby="headingFormula" data-bs-parent="#accordion">
|
||||
<div class="accordion-body">
|
||||
<form action="/api/formula" method="post">
|
||||
<input type="text" name="gravity-format" id="gravity-format" 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.
|
||||
</div>
|
||||
|
||||
<div class="form-group row">
|
||||
<label class="col-sm-2 col-form-label">#:</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>
|
||||
<div class="row">
|
||||
<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" id="gravity-header">Gravity</label>
|
||||
</div>
|
||||
|
||||
<div class="form-group row">
|
||||
<label for="angle1" class="col-sm-2 col-form-label">1.</label>
|
||||
<div class="col-sm-4">
|
||||
<input type="number" min="0" max="90" step="0.001" class="form-control" name="a1" id="a1">
|
||||
</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 class="row mb-3">
|
||||
<label for="angle1" class="col-sm-1 col-form-label">1.</label>
|
||||
<div class="col-sm-4"><input type="number" min="0" max="90" step="0.001" class="form-control" name="a1" id="a1"></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 class="form-group row">
|
||||
<label for="angle2" class="col-sm-2 col-form-label">2.</label>
|
||||
<div class="col-sm-4">
|
||||
<input type="number" min="0" max="90" step="0.001" class="form-control" name="a2" id="a2">
|
||||
</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 class="row mb-3">
|
||||
<label for="angle2" class="col-sm-1 col-form-label">2.</label>
|
||||
<div class="col-sm-4"><input type="number" min="0" max="90" step="0.001" class="form-control" name="a2" id="a2"></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 class="form-group row">
|
||||
<label for="angle3" class="col-sm-2 col-form-label">3.</label>
|
||||
<div class="col-sm-4">
|
||||
<input type="number" min="0" max="90" step="0.001" class="form-control" name="a3" id="a3">
|
||||
</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 class="row mb-3">
|
||||
<label for="angle3" class="col-sm-1 col-form-label">3.</label>
|
||||
<div class="col-sm-4"><input type="number" min="0" max="90" step="0.001" class="form-control" name="a3" id="a3"></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 class="form-group row">
|
||||
<label for="angle4" class="col-sm-2 col-form-label">4.</label>
|
||||
<div class="col-sm-4">
|
||||
<input type="number" min="0" max="90" step="0.001" class="form-control" name="a4" id="a4">
|
||||
</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 class="row mb-3">
|
||||
<label for="angle4" class="col-sm-1 col-form-label">4.</label>
|
||||
<div class="col-sm-4"><input type="number" min="0" max="90" step="0.001" class="form-control" name="a4" id="a4"></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 class="form-group row">
|
||||
<label for="angle5" class="col-sm-2 col-form-label">5.</label>
|
||||
<div class="col-sm-4">
|
||||
<input type="number" min="0" max="90" step="0.001" class="form-control" name="a5" id="a5">
|
||||
</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 class="row mb-3">
|
||||
<label for="angle5" class="col-sm-1 col-form-label">5.</label>
|
||||
<div class="col-sm-4"><input type="number" min="0" max="90" step="0.001" class="form-control" name="a5" id="a5"></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 class="form-group row">
|
||||
<div class="col-sm-8 offset-sm-0">
|
||||
<button type="submit" class="btn btn-primary" id="calculate-btn">Save & Calculate</button>
|
||||
</div>
|
||||
<div class="row mb-3">
|
||||
<div class="col-sm-8 offset-sm-1"><button type="submit" class="btn btn-primary" id="calculate-btn">Save & Calculate</button></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" id="angle"></label>
|
||||
</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-8 col-form-label" id="formula">Loading...</label>
|
||||
</div>
|
||||
@ -167,15 +143,23 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr class="my-4">
|
||||
<div>
|
||||
|
||||
<div class="accordion-item">
|
||||
<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>
|
||||
</div>
|
||||
<hr class="my-4">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
<script type="text/javascript">
|
||||
var chartDataForm = [];
|
||||
var chartDataCalc = [];
|
||||
|
||||
@ -228,9 +212,9 @@
|
||||
};
|
||||
|
||||
var myChart = 0;
|
||||
</script>
|
||||
</script>
|
||||
|
||||
<script type="text/javascript">
|
||||
<script type="text/javascript">
|
||||
g1.onchange = setGravityDecimal
|
||||
g2.onchange = setGravityDecimal
|
||||
g3.onchange = setGravityDecimal
|
||||
@ -328,7 +312,9 @@
|
||||
setButtonDisabled( true );
|
||||
|
||||
var url = "/api/formula";
|
||||
//var url = "/test/formula.json";
|
||||
var url = "/test/formula.json";
|
||||
showError(url);
|
||||
//showSuccess(url);
|
||||
$('#spinner').show();
|
||||
$.getJSON(url, function (cfg) {
|
||||
console.log( cfg );
|
||||
@ -374,10 +360,10 @@
|
||||
setButtonDisabled( false );
|
||||
});
|
||||
}
|
||||
</script>
|
||||
</script>
|
||||
|
||||
<!-- 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>
|
||||
</html>
|
||||
338
html/config.htm
338
html/config.htm
@ -5,28 +5,32 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="">
|
||||
<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://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>
|
||||
<body class="py-4">
|
||||
|
||||
<!-- START MENU -->
|
||||
|
||||
<nav class="navbar navbar-expand-sm navbar-dark bg-primary">
|
||||
<!-- START MENU -->
|
||||
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
|
||||
<div class="container">
|
||||
<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>
|
||||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbar">
|
||||
<ul class="navbar-nav mr-auto">
|
||||
<div class="collapse navbar-collapse" id="navbarNav">
|
||||
<ul class="navbar-nav">
|
||||
<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 class="nav-item active">
|
||||
<a class="nav-link" href="/config.htm">Configuration</a>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="#"><b>Configuration</b></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="/calibration.htm">Calibration</a>
|
||||
@ -37,104 +41,102 @@
|
||||
</ul>
|
||||
</div>
|
||||
<div class="spinner-border text-light" id="spinner" role="status"></div>
|
||||
</nav>
|
||||
</div>
|
||||
</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 fade hide show d-none" role="alert" id="alert">
|
||||
<div id="alert-msg">...</div>
|
||||
<button type="button" id="alert-btn" class="close" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
<div class="alert alert-success alert-dismissible hide fade d-none" role="alert" id="alert">
|
||||
<div id="alert-msg"></div>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
||||
</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>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
||||
</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>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
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 );
|
||||
}
|
||||
|
||||
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-btn").click(function(e){
|
||||
$('#alert').addClass('d-none').removeClass('show');
|
||||
$('#alert').addClass('hide').removeClass('show').addClass('d-none');
|
||||
});
|
||||
|
||||
function showWarningSleep() {
|
||||
$('#warning-sleep').removeClass('d-none').addClass('show');
|
||||
$('#warning-sleep').removeClass('d-none').addClass('show').removeClass('hide');
|
||||
}
|
||||
function hideWarningSleep() {
|
||||
$('#warning-sleep').addClass('d-none').removeClass('show');
|
||||
$('#warning-sleep').addClass('d-none').removeClass('show').addClass('hide');
|
||||
}
|
||||
function showWarningGyro() {
|
||||
$('#warning-gyro').removeClass('d-none').addClass('show');
|
||||
$('#warning-gyro').removeClass('d-none').addClass('show').removeClass('hide');
|
||||
}
|
||||
function hideWarningGyro() {
|
||||
$('#warning-gyro').addClass('d-none').removeClass('show');
|
||||
$('#warning-gyro').addClass('d-none').removeClass('show').addClass('hide');
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="accordion" id="accordion">
|
||||
<input type="text" name="runtime-average" id="runtime-average" hidden>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header" id="headingDevice">
|
||||
<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
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header" id="headingDevice">
|
||||
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseDevice" aria-expanded="true" aria-controls="collapseDevice">
|
||||
<b>Device settings</b>
|
||||
</button>
|
||||
</h2>
|
||||
</div>
|
||||
<div id="collapseDevice" class="collapse show" aria-labelledby="headingDevice" data-parent="#accordion">
|
||||
<div class="card-body">
|
||||
<div id="collapseDevice" class="accordion-collapse collapse show" aria-labelledby="headingDevice" data-bs-parent="#accordion">
|
||||
<div class="accordion-body">
|
||||
|
||||
<form action="/api/config/device" method="post">
|
||||
<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>
|
||||
<div class="col-sm-9">
|
||||
<div class="col-sm-3">
|
||||
<input type="text" maxlength="12" class="form-control" name="mdns" id="mdns">
|
||||
</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>
|
||||
<div class="col-sm-6">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="radio" name="temp-format" id="temp-format-c" value="C" checked>
|
||||
<label class="form-check-label" for="temp-format-c">
|
||||
Celsius
|
||||
</label>
|
||||
<label class="form-check-label" for="temp-format-c">Celsius</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="radio" name="temp-format" id="temp-format-f" value="F">
|
||||
<label class="form-check-label" for="temp-format-f">
|
||||
Farenheight
|
||||
</label>
|
||||
<label class="form-check-label" for="temp-format-f">Farenheight</label>
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
<div class="col-sm-2">
|
||||
<input type="number" min="10" max="3600" class="form-control" name="sleep-interval" id="sleep-interval">
|
||||
</div>
|
||||
<label for="sleep-interval" class="col-sm-4 col-form-label" id="sleep-interval-info"></label>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
|
||||
<div class="row mb-3">
|
||||
<div class="col-sm-8 offset-sm-3">
|
||||
<button type="submit" class="btn btn-primary" id="device-btn">Save</button>
|
||||
</div>
|
||||
@ -143,7 +145,7 @@
|
||||
|
||||
<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" id="gyro-calibration-data">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 class="card">
|
||||
<div class="card-header" id="headingPush">
|
||||
<h2 class="mb-0">
|
||||
<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">
|
||||
Push settings
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header" id="headingPush">
|
||||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapsePush" aria-expanded="false" aria-controls="collapsePush">
|
||||
<b>Push settings</b>
|
||||
</button>
|
||||
</h2>
|
||||
</div>
|
||||
<div id="collapsePush" class="collapse" aria-labelledby="headingPush" data-parent="#accordion">
|
||||
<div class="card-body">
|
||||
<div id="collapsePush" class="accordion-collapse collapse" aria-labelledby="headingPush" data-bs-parent="#accordion">
|
||||
<div class="accordion-body">
|
||||
<form action="/api/config/push" method="post">
|
||||
<input type="text" name="id" id="id2" 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-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>
|
||||
<div class="col-sm-8">
|
||||
<input type="url" maxlength="120" class="form-control" name="http-push" id="http-push">
|
||||
</div>
|
||||
<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 class="form-group row">
|
||||
|
||||
<div class="row mb-3">
|
||||
<label for="http-push2" class="col-sm-2 col-form-label">HTTP 2 (POST):</label>
|
||||
<div class="col-sm-8">
|
||||
<input type="url" maxlength="120" class="form-control" name="http-push2" id="http-push2">
|
||||
</div>
|
||||
<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 class="form-group row">
|
||||
<div class="row mb-3">
|
||||
<label for="token" class="col-sm-2 col-form-label">Token:</label>
|
||||
<div class="col-sm-4">
|
||||
<input type="text" maxlength="50" class="form-control" name="token" id="token">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class="my-2">
|
||||
|
||||
<div class="form-group row">
|
||||
<div class="row mb-3">
|
||||
<label for="http-push3" class="col-sm-2 col-form-label">HTTP 3 (GET):</label>
|
||||
<div class="col-sm-8">
|
||||
<input type="url" maxlength="120" class="form-control" name="http-push3" id="http-push3">
|
||||
</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>
|
||||
<div class="col-sm-4">
|
||||
<input type="text" maxlength="50" class="form-control" name="token2" id="token2">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class="my-2">
|
||||
|
||||
<div class="form-group row">
|
||||
<label for="inputBrewfatherPush" class="col-sm-2 col-form-label">Brewfather URL:</label>
|
||||
<div class="col-sm-10">
|
||||
<input type="url" maxlength="100" class="form-control" name="brewfather-push" id="brewfather-push">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group row">
|
||||
<div class="row mb-3">
|
||||
<div class="col-sm-8 offset-sm-2">
|
||||
<button type="submit" class="btn btn-primary" id="push-btn">Save</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="form-group row">
|
||||
<div class="row mb-3">
|
||||
<div class="col-sm-8 offset-sm-2">
|
||||
<button class="btn btn-info" id="format-btn">Format editor</button>
|
||||
<button class="btn btn-info" id="test-btn">Test Push</button>
|
||||
<button class="btn btn-secondary" id="format-btn">Format editor</button>
|
||||
<button class="btn btn-secondary" id="test-btn">Test Push</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -243,39 +233,41 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header" id="headingPush2">
|
||||
<h2 class="mb-0">
|
||||
<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">
|
||||
Push settings (2)
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header" id="headingPush2">
|
||||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapsePush2" aria-expanded="false" aria-controls="collapsePush2">
|
||||
<b>Push settings (2)</b>
|
||||
</button>
|
||||
</h2>
|
||||
</div>
|
||||
<div id="collapsePush2" class="collapse" aria-labelledby="headingPush2" data-parent="#accordion">
|
||||
<div class="card-body">
|
||||
<div id="collapsePush2" class="accordion-collapse collapse" aria-labelledby="headingPush2" data-bs-parent="#accordion">
|
||||
<div class="accordion-body">
|
||||
|
||||
<form action="/api/config/push" method="post">
|
||||
<input type="text" name="id" id="id5" 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>
|
||||
<div class="col-sm-6">
|
||||
<div class="col-sm-8">
|
||||
<input type="url" maxlength="40" class="form-control" name="influxdb2-push" id="influxdb2-push">
|
||||
</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>
|
||||
<div class="col-sm-4">
|
||||
<input type="text" maxlength="50" class="form-control" name="influxdb2-org" id="influxdb2-org">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
|
||||
<div class="row mb-3">
|
||||
<label for="influxdb2-bucket" class="col-sm-2 col-form-label">InfluxDB v2 Bucket:</label>
|
||||
<div class="col-sm-4">
|
||||
<input type="text" maxlength="50" class="form-control" name="influxdb2-bucket" id="influxdb2-bucket">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
|
||||
<div class="row mb-3">
|
||||
<label for="influxdb2-auth" class="col-sm-2 col-form-label">InfluxDB v2 Auth:</label>
|
||||
<div class="col-sm-4">
|
||||
<input type="text" maxlength="100" class="form-control" name="influxdb2-auth" id="influxdb2-auth">
|
||||
@ -284,42 +276,45 @@
|
||||
|
||||
<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>
|
||||
<div class="col-sm-4">
|
||||
<input type="text" maxlength="40" class="form-control" name="mqtt-push" id="mqtt-push">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
|
||||
<div class="row mb-3">
|
||||
<label for="mqtt-topic" class="col-sm-2 col-form-label">MQTT Port:</label>
|
||||
<div class="col-sm-4">
|
||||
<input type="number" min="1" max="65535" class="form-control" name="mqtt-port" id="mqtt-port">
|
||||
</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>
|
||||
<div class="col-sm-4">
|
||||
<input type="text" maxlength="20" class="form-control" name="mqtt-user" id="mqtt-user">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
|
||||
<div class="row mb-3">
|
||||
<label for="mqtt-pass" class="col-sm-2 col-form-label">MQTT Password:</label>
|
||||
<div class="col-sm-4">
|
||||
<input type="text" maxlength="20" class="form-control" name="mqtt-pass" id="mqtt-pass">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group row">
|
||||
<div class="row mb-3">
|
||||
<div class="col-sm-8 offset-sm-2">
|
||||
<button type="submit" class="btn btn-primary" id="push-btn2">Save</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="form-group row">
|
||||
<div class="row mb-3">
|
||||
<div class="col-sm-8 offset-sm-2">
|
||||
<button class="btn btn-info" id="format-btn2">Format editor</button>
|
||||
<button class="btn btn-info" id="test-btn2">Test Push</button>
|
||||
<button class="btn btn-secondary" id="format-btn2">Format editor</button>
|
||||
<button class="btn btn-secondary" id="test-btn2">Test Push</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -327,52 +322,51 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header" id="headingGravity">
|
||||
<h2 class="mb-0">
|
||||
<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">
|
||||
Gravity
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header" id="headingGravity">
|
||||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseGravity" aria-expanded="false" aria-controls="collapseGravity">
|
||||
<b>Gravity</b>
|
||||
</button>
|
||||
</h2>
|
||||
</div>
|
||||
<div id="collapseGravity" class="collapse" aria-labelledby="headingGravity" data-parent="#accordion">
|
||||
<div class="card-body">
|
||||
<div id="collapseGravity" class="accordion-collapse collapse" aria-labelledby="headingGravity" data-bs-parent="#accordion">
|
||||
<div class="accordion-body">
|
||||
|
||||
<form action="/api/config/gravity" method="post">
|
||||
<input type="text" name="id" id="id3" hidden>
|
||||
|
||||
<div class="row mb-3">
|
||||
<fieldset class="form-group row">
|
||||
<legend class="col-form-label col-sm-2 float-sm-left pt-0">Gravity Format:</legend>
|
||||
<div class="col-sm-4">
|
||||
<div class="form-check">
|
||||
<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">
|
||||
SG
|
||||
</label>
|
||||
<label class="form-check-label" for="gravity-format-g">SG</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<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">
|
||||
Plato
|
||||
</label>
|
||||
<label class="form-check-label" for="gravity-format-p">Plato</label>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
<div class="form-group row">
|
||||
<label for="gravity-formula" class="col-sm-2 col-form-label">Formula (SG)</label>
|
||||
</div>
|
||||
|
||||
<div class="row mb-3">
|
||||
<label for="gravity-formula" class="col-sm-2 col-form-label">Formula</label>
|
||||
<div class="col-sm-10">
|
||||
<input type="text" maxlength="200" class="form-control" name="gravity-formula" id="gravity-formula">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
|
||||
<div class="row mb-3">
|
||||
<div class="col-sm-4 offset-sm-2">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" name="gravity-temp-adjustment" id="gravity-temp-adjustment">
|
||||
<label class="form-check-label" for="gravity-temp-adjustment">
|
||||
Temperature adjust gravity
|
||||
</label>
|
||||
<label class="form-check-label" for="gravity-temp-adjustment">Temperature adjust gravity</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
|
||||
<div class="row mb-3">
|
||||
<div class="col-sm-4 offset-sm-2">
|
||||
<button type="submit" class="btn btn-primary" id="gravity-btn">Save</button>
|
||||
</div>
|
||||
@ -382,45 +376,46 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header" id="headingHardware">
|
||||
<h2 class="mb-0">
|
||||
<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">
|
||||
Hardware settings
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header" id="headingHardware">
|
||||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseHardware" aria-expanded="false" aria-controls="collapseHardware">
|
||||
<b>Hardware</b>
|
||||
</button>
|
||||
</h2>
|
||||
</div>
|
||||
<div id="collapseHardware" class="collapse" aria-labelledby="headingHardware" data-parent="#accordion">
|
||||
<div class="card-body">
|
||||
<div id="collapseHardware" class="accordion-collapse collapse" aria-labelledby="headingHardware" data-bs-parent="#accordion">
|
||||
<div class="accordion-body">
|
||||
|
||||
<form action="/api/config/hardware" method="post">
|
||||
<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>
|
||||
<div class="col-sm-2">
|
||||
<input type="number" step=".01" class="form-control" name="voltage-factor" id="voltage-factor">
|
||||
</div>
|
||||
<label for="voltage-factor" class="col-sm-3 col-form-label" id="battery">Loading...</label>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
|
||||
<div class="row mb-3">
|
||||
<label for="temp-adjustment-value" class="col-sm-2 col-form-label">Temp Sensor Adj:</label>
|
||||
<div class="col-sm-2">
|
||||
<input type="number" step=".1" class="form-control" name="temp-adjustment-value" id="temp-adjustment-value">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
|
||||
<div class="row mb-3">
|
||||
<div class="col-sm-3 offset-sm-2">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" name="gyro-temp" id="gyro-temp">
|
||||
<label class="form-check-label" for="gyro-temp">
|
||||
Use gyro temperature
|
||||
</label>
|
||||
<label class="form-check-label" for="gyro-temp">Use gyro temperature</label>
|
||||
</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>
|
||||
<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="red">red</option>
|
||||
<option value="green">green</option>
|
||||
@ -433,21 +428,24 @@
|
||||
</select>
|
||||
</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>
|
||||
<div class="col-sm-10">
|
||||
<div class="col-sm-8">
|
||||
<input type="url" maxlength="90" class="form-control" name="ota-url" id="ota-url">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
|
||||
<div class="row mb-3">
|
||||
<div class="col-sm-8 offset-sm-2">
|
||||
<button type="submit" class="btn btn-primary" id="hardware-btn">Save</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<div class="form-group row">
|
||||
|
||||
<div class="row mb-3">
|
||||
<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>
|
||||
@ -455,14 +453,12 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class="my-4">
|
||||
</div>
|
||||
|
||||
<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 fade" id="modal-http" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="modal-header" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<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 class="modal-body">
|
||||
<label for="http-header" class="col-form-label">Header 1 (Header: value)</label>
|
||||
@ -473,14 +469,14 @@
|
||||
<input type="text" id="field2" hidden>
|
||||
</div>
|
||||
<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>
|
||||
|
||||
<script>
|
||||
$('#modal-http').on('show.bs.modal', function (event) {
|
||||
<script>
|
||||
$('#modal-http').on('show.bs.modal', function (event) {
|
||||
var button = $(event.relatedTarget)
|
||||
var field1 = button.data('field1')
|
||||
var field2 = button.data('field2')
|
||||
@ -489,15 +485,16 @@ $('#modal-http').on('show.bs.modal', function (event) {
|
||||
modal.find('.modal-body #header2').val($(field2).val())
|
||||
modal.find('.modal-body #field1').val(field1)
|
||||
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)
|
||||
field1 = modal.find('.modal-body #field1').val()
|
||||
field2 = modal.find('.modal-body #field2').val()
|
||||
$(field1).val(modal.find('.modal-body #header1').val())
|
||||
$(field2).val(modal.find('.modal-body #header2').val())
|
||||
})
|
||||
function checkHeader(input) {
|
||||
})
|
||||
function checkHeader(input) {
|
||||
console.log( input.value );
|
||||
if (input.value != "" && input.value.indexOf(":") == -1) {
|
||||
$("#btn-close").prop("disabled", true);
|
||||
@ -506,10 +503,10 @@ function checkHeader(input) {
|
||||
$("#btn-close").prop("disabled", false);
|
||||
$(input).removeClass("is-invalid").addClass("is-valid");
|
||||
}
|
||||
}
|
||||
</script>
|
||||
}
|
||||
</script>
|
||||
|
||||
<script type="text/javascript">
|
||||
<script type="text/javascript">
|
||||
window.onload = getConfig;
|
||||
|
||||
setButtonDisabled( true );
|
||||
@ -588,7 +585,7 @@ function checkHeader(input) {
|
||||
$("#sleep-interval-info").text( t1 + " - Estimated runtime: " + t2);
|
||||
else
|
||||
$("#sleep-interval-info").text( t1 );
|
||||
|
||||
/*
|
||||
hideWarningGyro();
|
||||
if(i>0 && i<300) {
|
||||
if( $("#gyro-temp").is(":checked") )
|
||||
@ -596,7 +593,7 @@ function checkHeader(input) {
|
||||
showWarningSleep();
|
||||
} else {
|
||||
hideWarningSleep();
|
||||
}
|
||||
}*/
|
||||
}
|
||||
|
||||
// Trigger the calibration and show warnings if needed
|
||||
@ -621,7 +618,11 @@ function checkHeader(input) {
|
||||
setButtonDisabled( true );
|
||||
|
||||
var url = "/api/config";
|
||||
//var url = "/test/config.json";
|
||||
var url = "/test/config.json";
|
||||
showError(url);
|
||||
//showSuccess(url);
|
||||
showWarningGyro();
|
||||
showWarningSleep();
|
||||
$('#spinner').show();
|
||||
$.getJSON(url, function (cfg) {
|
||||
console.log( cfg );
|
||||
@ -651,7 +652,6 @@ function checkHeader(input) {
|
||||
$("#http-push2-h1").val(cfg["http-push2-h1"]);
|
||||
$("#http-push2-h2").val(cfg["http-push2-h2"]);
|
||||
$("#http-push3").val(cfg["http-push3"]);
|
||||
$("#brewfather-push").val(cfg["brewfather-push"]);
|
||||
$("#influxdb2-push").val(cfg["influxdb2-push"]);
|
||||
$("#influxdb2-org").val(cfg["influxdb2-org"]);
|
||||
$("#influxdb2-bucket").val(cfg["influxdb2-bucket"]);
|
||||
@ -681,10 +681,10 @@ function checkHeader(input) {
|
||||
updateSleepInfo();
|
||||
});
|
||||
}
|
||||
</script>
|
||||
</script>
|
||||
|
||||
<!-- 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>
|
||||
</html>
|
||||
@ -5,101 +5,108 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="">
|
||||
<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://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>
|
||||
|
||||
<body class="py-4">
|
||||
|
||||
<!-- START MENU -->
|
||||
<!-- START MENU -->
|
||||
|
||||
<nav class="navbar navbar-expand-sm navbar-dark bg-primary">
|
||||
<a class="navbar-brand" href="/firmware.htm">Beer Gravity Monitor - Firmware upgrade</a>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
|
||||
<div class="container">
|
||||
<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>
|
||||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbar">
|
||||
<div class="collapse navbar-collapse" id="navbarNav">
|
||||
<ul class="navbar-nav mr-auto">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="javascript:history.back()">Back to configuration</a>
|
||||
</li>
|
||||
</ul>
|
||||
</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-4">
|
||||
|
||||
<div class="alert alert-success alert-dismissible fade hide show d-none" role="alert" id="alert">
|
||||
<div id="alert-msg">...</div>
|
||||
<button type="button" id="alert-btn" class="close" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
<div class="alert alert-success alert-dismissible hide fade d-none" role="alert">
|
||||
<div id="alert"></div>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
function showError( msg ) {
|
||||
$('.alert').removeClass('alert-success').addClass('alert-danger').removeClass('d-none').addClass('show')
|
||||
$('#alert-msg').text( msg );
|
||||
$('.alert').removeClass('alert-success').addClass('alert-danger').removeClass('hide').addClass('show').removeClass('d-none');
|
||||
$('#alert').text( msg );
|
||||
}
|
||||
|
||||
function showSuccess( msg ) {
|
||||
$('.alert').addClass('alert-success').removeClass('alert-danger').removeClass('d-none').addClass('show')
|
||||
$('#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').addClass('d-none').removeClass('show')
|
||||
$('.alert').addClass('hide').removeClass('show').addClass('d-none');
|
||||
});
|
||||
</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="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 class="row mb-3">
|
||||
<div class="col-md-8 themed-grid-col bg-light">Current version:</div>
|
||||
<div class="col-md-4 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 class="col-md-2 themed-grid-col bg-light">Current version:</div>
|
||||
<div class="col-md-10 themed-grid-col bg-light" id="app-ver">Loading...</div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-3">
|
||||
<!--
|
||||
<form action="/api/upload" method="post" enctype="multipart/form-data">
|
||||
<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 class="col-md-2 themed-grid-col bg-light">Platform:</div>
|
||||
<div class="col-md-10 themed-grid-col bg-light" id="platform">Loading...</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">
|
||||
<div class="row mb-3">
|
||||
<div class="col-md-8 custom-file">
|
||||
<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 class="row mb-3">
|
||||
<div class="col-md-2">
|
||||
<button type="submit" class="btn btn-primary" id="upload-btn" value="upload">Flash firmware</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="progress">
|
||||
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
|
||||
<hr class="my-4">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
<script type="text/javascript">
|
||||
window.onload = getStatus;
|
||||
|
||||
$(document).ready(function() {
|
||||
@ -159,7 +166,7 @@
|
||||
setButtonDisabled( true );
|
||||
|
||||
var url = "/api/status";
|
||||
//var url = "/test/status.json";
|
||||
var url = "/test/status.json";
|
||||
$('#spinner').show();
|
||||
$.getJSON(url, function (cfg) {
|
||||
console.log( cfg );
|
||||
@ -179,10 +186,10 @@
|
||||
function start() {
|
||||
setInterval(getStatus, 3000);
|
||||
}
|
||||
</script>
|
||||
</script>
|
||||
|
||||
<!-- 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>
|
||||
</html>
|
||||
@ -5,22 +5,26 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="">
|
||||
<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://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>
|
||||
<body class="py-4">
|
||||
|
||||
<!-- 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>
|
||||
<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>
|
||||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbar">
|
||||
<div class="collapse navbar-collapse" id="navbarNav">
|
||||
<ul class="navbar-nav mr-auto">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="javascript:history.back()">Back to configuration</a>
|
||||
@ -28,92 +32,87 @@
|
||||
</ul>
|
||||
</div>
|
||||
<div class="spinner-border text-light" id="spinner" role="status"></div>
|
||||
</nav>
|
||||
</div>
|
||||
</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 fade hide show d-none" role="alert" id="alert">
|
||||
<div id="alert-msg">...</div>
|
||||
<button type="button" id="alert-btn" class="close" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
<div class="alert alert-success alert-dismissible hide fade d-none" role="alert">
|
||||
<div id="alert"></div>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
function showError( msg ) {
|
||||
$('#alert').removeClass('alert-success').addClass('alert-danger').removeClass('d-none').addClass('show');
|
||||
$('#alert-msg').text( msg );
|
||||
$('.alert').removeClass('alert-success').addClass('alert-danger').removeClass('hide').addClass('show').removeClass('d-none');
|
||||
$('#alert').text( msg );
|
||||
}
|
||||
|
||||
function showSuccess( msg ) {
|
||||
$('#alert').addClass('alert-success').removeClass('alert-danger').removeClass('d-none').addClass('show');
|
||||
$('#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').addClass('d-none').removeClass('show');
|
||||
$('.alert').addClass('hide').removeClass('show').addClass('d-none');
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="accordion" id="accordion">
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header" id="headingFormat">
|
||||
<h2 class="mb-0">
|
||||
<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
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header" id="headingFormat">
|
||||
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFormat" aria-expanded="true" aria-controls="collapseFormat">
|
||||
<b>Push Format Templates</b>
|
||||
</button>
|
||||
</h2>
|
||||
</div>
|
||||
<div id="collapseFormat" class="collapse show" aria-labelledby="headingFormat" data-parent="#accordion">
|
||||
<div class="card-body">
|
||||
<div id="collapseFormat" class="accordion-collapse collapse show" aria-labelledby="headingFormat" data-bs-parent="#accordion">
|
||||
<div class="accordion-body">
|
||||
|
||||
<input type="text" name="id" id="id" 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-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="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>
|
||||
<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-2">HTTP option 2 (post)</option>
|
||||
<option value="http-3">HTTP option 3 (get)</option>
|
||||
<!--<option value="brewfather">Brewfather</option>-->
|
||||
<option value="influxdb">Influx DB</option>
|
||||
<option value="mqtt">MQTT</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group row">
|
||||
<div class="row mb-3">
|
||||
<div class="col-sm-12">
|
||||
<textarea rows="5" class="form-control" name="format" id="format">
|
||||
</textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group row">
|
||||
<div class="row mb-3">
|
||||
<div class="col-sm-8 offset-sm-2">
|
||||
<button class="btn btn-primary" id="format-btn">Save</button>
|
||||
<button class="btn btn-secondary" id="test-btn">Test</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class="my-2">
|
||||
|
||||
<pre class="card-preview" id="preview" name="preview"></pre>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class="my-4">
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
<script type="text/javascript">
|
||||
window.onload = getConfig;
|
||||
|
||||
setButtonDisabled( true );
|
||||
@ -215,7 +214,6 @@
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
function setButtonDisabled( b ) {
|
||||
$("#format-btn").prop("disabled", b);
|
||||
$("#test-btn").prop("disabled", b);
|
||||
@ -237,7 +235,7 @@
|
||||
setButtonDisabled( true );
|
||||
|
||||
var url = "/api/config/format";
|
||||
//var url = "/test/format.json";
|
||||
var url = "/test/format.json";
|
||||
$('#spinner').show();
|
||||
$.getJSON(url, function (cfg) {
|
||||
console.log( cfg );
|
||||
@ -259,10 +257,10 @@
|
||||
setButtonDisabled( false );
|
||||
});
|
||||
}
|
||||
</script>
|
||||
</script>
|
||||
|
||||
<!-- 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>
|
||||
</html>
|
||||
180
html/index.htm
180
html/index.htm
@ -5,25 +5,30 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="">
|
||||
<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://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>
|
||||
|
||||
<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>
|
||||
<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>
|
||||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbar">
|
||||
<ul class="navbar-nav mr-auto">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" href="/index.htm">Home <span class="sr-only">(current)</span></a>
|
||||
<div class="collapse navbar-collapse" id="navbarNav">
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="#"><b>Home</b></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="/config.htm">Configuration</a>
|
||||
@ -35,62 +40,70 @@
|
||||
<a class="nav-link" href="/about.htm">About</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</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-4">
|
||||
|
||||
<div class="alert alert-success alert-dismissible fade hide show d-none" role="alert" id="alert">
|
||||
<div id="alert-msg">...</div>
|
||||
<button type="button" id="alert-btn" class="close" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
<div class="alert alert-success alert-dismissible hide fade d-none" role="alert">
|
||||
<div id="alert"></div>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
function showError( msg ) {
|
||||
$('.alert').removeClass('alert-success').addClass('alert-danger').removeClass('d-none').addClass('show')
|
||||
$('#alert-msg').text( msg );
|
||||
console.log("Error:" + msg);
|
||||
$('.alert').removeClass('alert-success').addClass('alert-danger').removeClass('hide').addClass('show').removeClass('d-none');
|
||||
$('#alert').text( msg );
|
||||
}
|
||||
|
||||
function showSuccess( msg ) {
|
||||
$('.alert').addClass('alert-success').removeClass('alert-danger').removeClass('d-none').addClass('show')
|
||||
$('#alert-msg').text( msg );
|
||||
console.log("Success:" + msg);
|
||||
$('.alert').addClass('alert-success').removeClass('alert-danger').removeClass('hide').addClass('show').removeClass('d-none');
|
||||
$('#alert').text( msg );
|
||||
}
|
||||
|
||||
$("#alert-btn").click(function(e){
|
||||
$('.alert').addClass('d-none').removeClass('show')
|
||||
console.log("Disable");
|
||||
$('.alert').addClass('hide').removeClass('show').addClass('d-none');
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="row mb-3">
|
||||
<div class="col-md-8 themed-grid-col bg-light">Current version:</div>
|
||||
<div class="col-md-4 themed-grid-col bg-light" id="app-ver">Loading...</div>
|
||||
</div>
|
||||
<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 themed-grid-col bg-light" id="app-ver-new">Loading...</div>
|
||||
</div>
|
||||
<div class="row mb-3">
|
||||
<div class="col-md-8 themed-grid-col bg-light">Host name:</div>
|
||||
<div class="col-md-4 themed-grid-col bg-light" id="mdns">Loading...</div>
|
||||
</div>
|
||||
<div class="row mb-3">
|
||||
<div class="col-md-8 themed-grid-col bg-light">Device ID:</div>
|
||||
<div class="col-md-4 themed-grid-col bg-light" id="id">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 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="col-md-4 bg-light">Current version:</div>
|
||||
<div class="col-md-4 bg-light" id="app-ver">Loading...</div>
|
||||
</div>
|
||||
<div class="row mb-3" id="h-app-ver-new" hidden>
|
||||
<div class="col-md-4 bg-light">New version:</div>
|
||||
<div class="col-md-4 bg-light" id="app-ver-new">Loading...</div>
|
||||
</div>
|
||||
<div class="row mb-3">
|
||||
<div class="col-md-4 bg-light">Host name:</div>
|
||||
<div class="col-md-4 bg-light" id="mdns">Loading...</div>
|
||||
</div>
|
||||
<div class="row mb-3">
|
||||
<div class="col-md-4 bg-light">Device ID:</div>
|
||||
<div class="col-md-4 bg-light" id="id">Loading...</div>
|
||||
</div>
|
||||
<div class="row mb-3">
|
||||
<div class="col-md-4 bg-light">Platform:</div>
|
||||
<div class="col-md-4 bg-light" id="platform">Loading...</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
<script>
|
||||
$("#log-btn").click(function(e){
|
||||
loadLog();
|
||||
});
|
||||
@ -99,59 +112,68 @@
|
||||
}, 3000); //5 seconds
|
||||
|
||||
function loadLog() {
|
||||
$("#logContent").load("/log");
|
||||
//$("#logContent").load("/test/status.json");
|
||||
//$("#logContent").load("/log");
|
||||
$("#logContent").load("/test/status.json");
|
||||
};
|
||||
</script>
|
||||
</script>
|
||||
|
||||
<div class="row mb-3">
|
||||
<a class="badge badge-primary" data-toggle="collapse" href="#collapseLog" role="button" aria-expanded="false" aria-controls="collapseLog" id="log-btn">
|
||||
<button class="btn btn-primary btn-sm" type="button" data-bs-toggle="collapse" data-bs-target="#collapseLog" aria-expanded="false" aria-controls="collapseLog">
|
||||
View error log
|
||||
</a>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<div class="collapse" id="collapseLog">
|
||||
<div class="collapse row-margin-10" id="collapseLog">
|
||||
<div class="card card-body">
|
||||
<pre><code id="logContent"></code></pre>
|
||||
<pre><code class="card-text" id="logContent"></code></pre>
|
||||
</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="col-md-8 themed-grid-col 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">Gravity:</div>
|
||||
<div class="col-md-4 bg-light" id="gravity">Loading...</div>
|
||||
</div>
|
||||
<div class="row mb-3">
|
||||
<div class="col-md-8 themed-grid-col 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">Temperature:</div>
|
||||
<div class="col-md-4 bg-light" id="temp">Loading...</div>
|
||||
</div>
|
||||
<div class="row mb-3">
|
||||
<div class="col-md-8 themed-grid-col 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">Angle/Tilt:</div>
|
||||
<div class="col-md-4 bg-light" id="angle">Loading...</div>
|
||||
</div>
|
||||
<div class="row mb-3">
|
||||
<div class="col-md-8 themed-grid-col 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">Battery:</div>
|
||||
<div class="col-md-4 bg-light" id="battery">Loading...</div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-3">
|
||||
<div class="col-md-8 themed-grid-col 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">Average runtime:</div>
|
||||
<div class="col-md-4 bg-light" id="runtime">Loading...</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<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>
|
||||
|
||||
<hr class="my-4">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
<script type="text/javascript">
|
||||
window.onload = start;
|
||||
|
||||
$("#sleep-mode").click(function(e){
|
||||
@ -167,12 +189,14 @@
|
||||
|
||||
function getStatus() {
|
||||
var url = "/api/status";
|
||||
//var url = "/test/status.json";
|
||||
var url = "/test/status.json";
|
||||
showError(url);
|
||||
//showSuccess(url);
|
||||
$('#spinner').show();
|
||||
|
||||
$.getJSON(url, function (cfg) {
|
||||
console.log( cfg );
|
||||
|
||||
//$("#app-ver").text(cfg["app-ver"] + " (html 0.8.0)");
|
||||
$("#app-ver").text(cfg["app-ver"] + " (" + cfg["app-build"] + ")");
|
||||
$("#mdns").text(cfg["mdns"]);
|
||||
$("#id").text(cfg["id"]);
|
||||
@ -232,10 +256,10 @@
|
||||
function start() {
|
||||
setInterval(getStatus, 3000);
|
||||
}
|
||||
</script>
|
||||
</script>
|
||||
|
||||
<!-- 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>
|
||||
</html>
|
||||
@ -5,22 +5,26 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="">
|
||||
<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://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>
|
||||
<body class="py-4">
|
||||
|
||||
<!-- START MENU -->
|
||||
|
||||
<nav class="navbar navbar-expand-sm navbar-dark bg-primary">
|
||||
<!-- START MENU -->
|
||||
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
|
||||
<div class="container">
|
||||
<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>
|
||||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbar">
|
||||
<div class="collapse navbar-collapse" id="navbarNav">
|
||||
<ul class="navbar-nav mr-auto">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="javascript:history.back()">Back to configuration</a>
|
||||
@ -28,57 +32,61 @@
|
||||
</ul>
|
||||
</div>
|
||||
<div class="spinner-border text-light" id="spinner" role="status"></div>
|
||||
</nav>
|
||||
</div>
|
||||
</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 fade hide show d-none" role="alert" id="alert">
|
||||
<div id="alert-msg">...</div>
|
||||
<button type="button" id="alert-btn" class="close" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
<div class="alert alert-success alert-dismissible hide fade d-none" role="alert">
|
||||
<div id="alert"></div>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
function showError( msg ) {
|
||||
$('#alert').removeClass('alert-success').addClass('alert-danger').removeClass('d-none').addClass('show');
|
||||
$('#alert-msg').text( msg );
|
||||
$('.alert').removeClass('alert-success').addClass('alert-danger').removeClass('hide').addClass('show').removeClass('d-none');
|
||||
$('#alert').text( msg );
|
||||
}
|
||||
|
||||
function showSuccess( msg ) {
|
||||
$('#alert').addClass('alert-success').removeClass('alert-danger').removeClass('d-none').addClass('show');
|
||||
$('#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').addClass('d-none').removeClass('show');
|
||||
$('.alert').addClass('hide').removeClass('show').addClass('d-none');
|
||||
});
|
||||
</script>
|
||||
|
||||
<div>
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<pre class="card-preview" id="preview" name="preview"></pre>
|
||||
</div>
|
||||
|
||||
<div class="accordion" id="accordion">
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header" id="headingTest">
|
||||
<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 class="form-group row">
|
||||
</div>
|
||||
|
||||
<div class="form-group row">
|
||||
<div class="row mb-3">
|
||||
<div class="col-sm-8">
|
||||
<button class="btn btn-primary" id="test-btn">Test</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class="my-4">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
<script type="text/javascript">
|
||||
$('#spinner').hide();
|
||||
|
||||
function clearLog() {
|
||||
@ -208,10 +216,10 @@
|
||||
appendLog( "Failed to test push target '" + target + "'");
|
||||
})
|
||||
}
|
||||
</script>
|
||||
</script>
|
||||
|
||||
<!-- 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>
|
||||
</html>
|
||||
118
html/upload.htm
118
html/upload.htm
@ -5,113 +5,129 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="">
|
||||
<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://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>
|
||||
|
||||
<body class="py-4">
|
||||
|
||||
<!-- START MENU -->
|
||||
<!-- START MENU -->
|
||||
|
||||
<nav class="navbar navbar-expand-sm navbar-dark bg-primary">
|
||||
<a class="navbar-brand" href="/upload.htm">Beer Gravity Monitor - Missing html files</a>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
|
||||
<div class="container">
|
||||
<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>
|
||||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbar">
|
||||
<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-4">
|
||||
|
||||
<div class="alert alert-success alert-dismissible fade hide show d-none" role="alert" id="alert">
|
||||
<div id="alert-msg">...</div>
|
||||
<button type="button" id="alert-btn" class="close" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
<div class="alert alert-success alert-dismissible hide fade d-none" role="alert">
|
||||
<div id="alert"></div>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
function showError( msg ) {
|
||||
$('.alert').removeClass('alert-success').addClass('alert-danger').removeClass('d-none').addClass('show')
|
||||
$('#alert-msg').text( msg );
|
||||
$('.alert').removeClass('alert-success').addClass('alert-danger').removeClass('hide').addClass('show').removeClass('d-none');
|
||||
$('#alert').text( msg );
|
||||
}
|
||||
|
||||
function showSuccess( msg ) {
|
||||
$('.alert').addClass('alert-success').removeClass('alert-danger').removeClass('d-none').addClass('show')
|
||||
$('#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').addClass('d-none').removeClass('show')
|
||||
$('.alert').addClass('hide').removeClass('show').addClass('d-none');
|
||||
});
|
||||
</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="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
|
||||
the files if they are found in the same location as the firmware.bin. This page is a fallback option.
|
||||
</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 class="row mb-3">
|
||||
<div class="col-md-2 themed-grid-col bg-light">index.min.htm</div>
|
||||
<div class="col-md-6 themed-grid-col bg-light" id="index">Checking...</div>
|
||||
<div class="col-md-2 bg-light">index.min.htm</div>
|
||||
<div class="col-md-6 bg-light" id="index">Checking...</div>
|
||||
</div>
|
||||
<div class="row mb-3">
|
||||
<div class="col-md-2 themed-grid-col bg-light">config.min.htm</div>
|
||||
<div class="col-md-6 themed-grid-col bg-light" id="config">Checking...</div>
|
||||
<div class="col-md-2 bg-light">config.min.htm</div>
|
||||
<div class="col-md-6 bg-light" id="config">Checking...</div>
|
||||
</div>
|
||||
<div class="row mb-3">
|
||||
<div class="col-md-2 themed-grid-col bg-light">calibration.min.htm</div>
|
||||
<div class="col-md-6 themed-grid-col bg-light" id="calibration">Checking...</div>
|
||||
<div class="col-md-2 bg-light">calibration.min.htm</div>
|
||||
<div class="col-md-6 bg-light" id="calibration">Checking...</div>
|
||||
</div>
|
||||
<div class="row mb-3">
|
||||
<div class="col-md-2 themed-grid-col bg-light">format.min.htm</div>
|
||||
<div class="col-md-6 themed-grid-col bg-light" id="format">Checking...</div>
|
||||
<div class="col-md-2 bg-light">format.min.htm</div>
|
||||
<div class="col-md-6 bg-light" id="format">Checking...</div>
|
||||
</div>
|
||||
<div class="row mb-3">
|
||||
<div class="col-md-2 themed-grid-col bg-light">test.min.htm</div>
|
||||
<div class="col-md-6 themed-grid-col bg-light" id="test">Checking...</div>
|
||||
<div class="col-md-2 bg-light">test.min.htm</div>
|
||||
<div class="col-md-6 bg-light" id="test">Checking...</div>
|
||||
</div>
|
||||
<div class="row mb-3">
|
||||
<div class="col-md-2 themed-grid-col bg-light">about.min.htm</div>
|
||||
<div class="col-md-6 themed-grid-col bg-light" id="about">Checking...</div>
|
||||
<div class="col-md-2 bg-light">about.min.htm</div>
|
||||
<div class="col-md-6 bg-light" id="about">Checking...</div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-3">
|
||||
<form action="/api/upload" method="post" enctype="multipart/form-data">
|
||||
<div class="row mb-3">
|
||||
<div class="col-md-8 custom-file">
|
||||
<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 class="row mb-3">
|
||||
<div class="col-md-3">
|
||||
<button type="submit" class="btn btn-primary" id="upload-btn" value="upload">Upload</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class="my-4">
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
<script type="text/javascript">
|
||||
window.onload = getUpload;
|
||||
|
||||
// Add the following code if you want the name of the file appear on select
|
||||
$(".custom-file-input").on("change", function() {
|
||||
// Add the following code if you want the name of the file appear on select
|
||||
$(".custom-file-input").on("change", function() {
|
||||
var fileName = $(this).val().split("\\").pop();
|
||||
$(this).siblings(".custom-file-label").addClass("selected").html(fileName);
|
||||
});
|
||||
});
|
||||
|
||||
function getUpload() {
|
||||
function getUpload() {
|
||||
var url = "/api/upload";
|
||||
//var url = "/test/upload.json";
|
||||
var url = "/test/upload.json";
|
||||
$('#spinner').show();
|
||||
$.getJSON(url, function (cfg) {
|
||||
console.log( cfg );
|
||||
@ -155,10 +171,10 @@ function getUpload() {
|
||||
$('#spinner').hide();
|
||||
});
|
||||
}
|
||||
</script>
|
||||
</script>
|
||||
|
||||
<!-- 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>
|
||||
</html>
|
||||
@ -10,5 +10,6 @@
|
||||
"g3": 1.010,
|
||||
"g2": 1.025,
|
||||
"g4": 1.040,
|
||||
"g5": 1.005
|
||||
"g5": 1.005,
|
||||
"error": ""
|
||||
}
|
||||
Reference in New Issue
Block a user