More webUI Adjustments, started with settings-Page

This commit is contained in:
Marcel Peterkau 2022-04-16 10:17:06 +02:00
parent e6b5c0e3f0
commit d99216815a

View File

@ -24,8 +24,8 @@
</head> </head>
<body> <body>
<header class="sticky-top">
<nav class="navbar navbar-expand-sm navbar-dark bg-dark"> <nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<a class="navbar-brand" href="#"> <a class="navbar-brand" href="#">
<img src="static/img/logo.png" width="30" height="30" class="d-inline-block align-top" alt=""> <img src="static/img/logo.png" width="30" height="30" class="d-inline-block align-top" alt="">
@ -36,36 +36,36 @@
</button> </button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup"> <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<ul class="navbar-nav nav ms-2 align-items-end"> <ul class="navbar-nav nav ms-2 align-items-end">
<li class="nav-item"> <li class="nav-item">
<a class="nav-link active" href="#tab_home" data-toggle="tab">Home</a> <a class="nav-link active" href="#tab_home" data-toggle="tab">Home</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#tab_settings" data-toggle="tab">Settings</a> <a class="nav-link" href="#tab_settings" data-toggle="tab">Settings</a>
</li> </li>
</ul> </ul>
</div> </div>
</nav> </nav>
</header>
<div class="jumbotron text-center">
<p class="p-4">
<img src="static/img/logo.png">
</p>
<h3>%DEVICE_NAME%</h3>
</div>
<main role="main" class="container">
<main class="container-fluid py-3 flex-fill">
<!-- Tabs Content --> <!-- Tabs Content -->
<div class="tab-content"> <div class="tab-content">
<!-- Div Tab Home--> <!-- Div Tab Home-->
<div class="tab-pane fade show active" id="tab_home" role="tabpanel"> <div class="tab-pane fade show active" id="tab_home" role="tabpanel">
<!-- Jumbotron -->
<div class="jumbotron text-center">
<p class="p-4">
<img src="static/img/logo.png">
</p>
<h3>%DEVICE_NAME%</h3>
</div>
<div class="container-fluid pb-5"> <div class="container-fluid pb-5">
<h4>Akku</h4> <h4>Akku</h4>
<div class="progress"> <div class="progress">
<div class="progress-bar text-light" role="progressbar" aria-valuenow="%BAT_REMAIN_CAPACITY%" aria-valuemin="0" <div class="progress-bar text-light" role="progressbar" aria-valuenow="%BAT_REMAIN_CAPACITY%"
aria-valuemax="100" style="width: %BAT_REMAIN_CAPACITY%&#37;"> aria-valuemin="0" aria-valuemax="100" style="width: %BAT_REMAIN_CAPACITY%&#37;">
%BAT_REMAIN_CAPACITY%&#37; / %BAT_VOLTAGE% V %BAT_REMAIN_CAPACITY%&#37; / %BAT_VOLTAGE% V
</div> </div>
</div> </div>
@ -135,128 +135,21 @@
<!-- Div Tab Home--> <!-- Div Tab Home-->
<!-- Div Tab Settings--> <!-- Div Tab Settings-->
<div class="tab-pane fade" id="tab_settings" role="tabpanel"> <div class="tab-pane fade" id="tab_settings" role="tabpanel">
<h3>Erfassung Wegstrecke</h3> <h3>Settings</h3>
<hr> <hr>
<p> <form action="\post.htm" method="POST">
<form action="\post.htm" method="POST" class="form-horizontal"> <div class="form-group row">
<div class="form-group"> <label for="commandInput" class="col-sm-2 col-form-label">Command</label>
<label for="sourceselect" class="control-label col-xs-5">Wegstrecke Quelle</label> <div class="col-sm-10">
<div class="col-xs-7"> <input type="text" class="form-control bg-light" id="commandInput" placeholder="type command here...">
<select id="sourceselect" name="sourceselect" class="select form-control">
%SOURCE_SELECT_OPTIONS%
</select>
</div> </div>
</div> </div>
<div class="form-group row"> <div class="form-group row">
<div class="col-xs-offset-5 col-xs-7"> <div class="col-sm-12">
<button name="sourcesave" type="submit" class="btn btn-primary">&Uuml;bernehmen</button> <button name="cmdsubmit" type="submit" class="btn btn-primary float-right">Apply</button>
</div> </div>
</div> </div>
</form> </form>
</p>
<div class="alert alert-warning">
<strong>Achtung!</strong><br>
Bei Änderung der Wegstrecken-Quelle wird der CAN-Oiler neu gestartet.
Dadurch wird die WiFi-Verbindung getrennt und muss neu aufgebaut werden.
</div>
<!-- Div Source:Impulse Settings-->
<div %SHOW_IMPULSE_SETTINGS%>
<h4>Einstellungen Impuls</h4>
<p>
<form action="\post.htm" method="POST" class="form-horizontal">
<div class="form-group">
<label for="tirewidth" class="control-label col-xs-5">Reifenbreite</label>
<div class="col-xs-7">
<div class="input-group">
<input id="tirewidth" name="tirewidth" type="text" required="required" class="form-control"
value="%TIRE_WIDTH_MM%">
<div class="input-group-addon">mm</div>
</div>
</div>
</div>
<div class="form-group">
<label for="tireratio" class="control-label col-xs-5">Höhe/Breite-Verhältniss</label>
<div class="col-xs-7">
<div class="input-group">
<input id="tireratio" name="tireratio" type="text" required="required" class="form-control"
value="%TIRE_RATIO%">
<div class="input-group-addon"></div>
</div>
</div>
</div>
<div class="form-group">
<label for="tiredia" class="control-label col-xs-5">Felgendurchmesser</label>
<div class="col-xs-7">
<div class="input-group">
<input id="tiredia" name="tiredia" type="text" required="required" class="form-control"
value="%RIM_DIAMETER%">
<div class="input-group-addon">"</div>
</div>
</div>
</div>
<div class="form-group">
<label for="pulserev" class="control-label col-xs-5">Pulse pro Umdrehung</label>
<div class="col-xs-7">
<div class="input-group">
<input id="pulserev" name="pulserev" type="text" required="required" class="form-control"
value="%PULSE_PER_REV%">
<div class="input-group-addon"></div>
</div>
</div>
</div>
<div class="form-group row">
<div class="col-xs-offset-5 col-xs-7">
<button name="pulsesave" type="submit" class="btn btn-primary">Speichern</button>
</div>
</div>
</form>
</p>
</div>
<!-- Div Source:Impulse Settings-->
<!-- Div Source:CAN Settings-->
<div %SHOW_CAN_SETTINGS%>
<h4>Einstellungen CAN-Bus</h4>
<p>
<form action="\post.htm" method="POST" class="form-horizontal">
<div class="form-group">
<label for="cansource" class="control-label col-xs-5">Model</label>
<div class="col-xs-7">
<select id="cansource" name="cansource" class="select form-control">
%CANSOURCE_SELECT_OPTIONS%
</select>
</div>
</div>
<div class="form-group row">
<div class="col-xs-offset-5 col-xs-7">
<button name="cansave" type="submit" class="btn btn-primary">Speichern</button>
</div>
</div>
</form>
</p>
</div>
<!-- Div Source:CAN Settings-->
<!-- Div Source:GPS Settings-->
<div %SHOW_GPS_SETTINGS%>
<h4>Einstellungen GPS</h4>
<p>
<form action="\post.htm" method="POST" class="form-horizontal">
<div class="form-group">
<label for="gpsbaud" class="control-label col-xs-5">Baudrate</label>
<div class="col-xs-7">
<select id="gpsbaud" name="gpsbaud" class="select form-control">
%GPSBAUD_SELECT_OPTIONS%
</select>
</div>
</div>
<div class="form-group row">
<div class="col-xs-offset-5 col-xs-7">
<button name="gpssave" type="submit" class="btn btn-primary">Speichern</button>
</div>
</div>
</form>
</p>
</div>
<!-- Div Source:GPS Settings-->
</div> </div>
<!-- Div Tab Settings--> <!-- Div Tab Settings-->
</div> </div>
@ -264,13 +157,14 @@
</main> </main>
<!-- Footer --> <!-- Footer -->
<footer class="navbar-default navbar-fixed-bottom"> <footer class="fixed-bottom bg-secondary font-weight-light text-light text-center py-3">
<!-- Copyright -->
<div class="footer-copyright text-center py-3"> <!-- Copyright -->
© 2022 Copyright: <span class=" footer-copyright">
<a class="text-reset fw-bold" href="https://hiabuto.de/">Hiabuto AS-Defence Systems</a> © 2022 <a class="text-reset fw-bold" href="https://hiabuto.de/">Hiabuto Defence Systems</a>
</div> </span>
<!-- Copyright --> <!-- Copyright -->
</footer> </footer>
<!-- Footer --> <!-- Footer -->