Format-Tweaks on WebUI

This commit is contained in:
Marcel Peterkau 2022-08-23 00:50:52 +02:00
parent da19ebcc09
commit f67817adb5
2 changed files with 68 additions and 70 deletions

View File

@ -20,7 +20,7 @@
<nav class="navbar fixed-top navbar-dark bg-primary" id="navbar1"> <nav class="navbar fixed-top navbar-dark bg-primary" id="navbar1">
<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 mr-1" alt="">
KTM CAN ChainLube KTM CAN ChainLube
</a> </a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsingNavbar" <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsingNavbar"
@ -51,7 +51,7 @@
<div class="col text-center"> <div class="col text-center">
<div class="jumbotron"> <div class="jumbotron">
<img src="static/img/logo.png" width="120" height="120" class="img-fluid" alt=""> <img src="static/img/logo.png" width="120" height="120" class="img-fluid" alt="">
<h3>KTM CAN Chain Lube</h3> <h3 class="pt-3">KTM CAN Chain Lube</h3>
</div> </div>
</div> </div>
<hr /> <hr />
@ -85,8 +85,8 @@
</tbody> </tbody>
</table> </table>
<p> <p>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseDTCDescription" <button class="btn btn-outline-primary" type="button" data-toggle="collapse"
aria-expanded="false" aria-controls="collapseDTCDescription"> data-target="#collapseDTCDescription" aria-expanded="false" aria-controls="collapseDTCDescription">
DTC Beschreibung DTC Beschreibung
</button> </button>
</p> </p>
@ -102,37 +102,40 @@
<!-- Div Tab Home--> <!-- Div Tab Home-->
<!-- Div Tab Source Settings--> <!-- Div Tab Source Settings-->
<div id="tab_source" class="tab-pane fade" role="tabpanel"> <div id="tab_source" class="tab-pane fade" role="tabpanel">
<h3>Erfassung Wegstrecke</h3> <h3>Wegstreckenerfassung</h3>
<hr /> <hr />
<p> <p>
<h4>Signalquelle</h4> <h4>Signalquelle</h4>
<form action="\post.htm" method="POST" class="form-horizontal"> <form action="post.htm" method="POST" class="form-horizontal">
<div class="form-group row"> <div class="form-group row">
<label for="sourceselect" class="control-label col-4">Wegstrecke Quelle</label> <label for="sourceselect" class="control-label col-4">Schnittstelle</label>
<div class="col-8"> <div class="col-8">
<select id="sourceselect" name="sourceselect" class="select form-control"> <select id="sourceselect" name="sourceselect" class="select form-control">
%SOURCE_SELECT_OPTIONS% %SOURCE_SELECT_OPTIONS%
</select> </select>
</div> </div>
</div> </div>
<div class="alert alert-primary alert-dismissable show fade" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<strong>Achtung!</strong><br>
Bei Änderung der Signalquelle wird der CAN-Oiler neu gestartet.
Dadurch wird die WiFi-Verbindung getrennt und muss neu aufgebaut werden.
</div>
<div class="form-group row"> <div class="form-group row">
<div class="offset-4 col-8"> <div class="offset-4 col-8">
<button name="sourcesave" type="submit" class="btn btn-primary">&Uuml;bernehmen</button> <button name="sourcesave" type="submit" class="btn btn-outline-primary">&Uuml;bernehmen</button>
</div> </div>
</div> </div>
</form> </form>
<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>
</p> </p>
<!-- Div Source:Impulse Settings--> <!-- Div Source:Impulse Settings-->
<div %SHOW_IMPULSE_SETTINGS%> <div %SHOW_IMPULSE_SETTINGS%>
<hr /> <hr />
<p> <p>
<h4>Einstellungen Impuls</h4> <h4>Einstellungen Impulseingang</h4>
<form action="\post.htm" method="POST" class="form-horizontal"> <form action="post.htm" method="POST" class="form-horizontal">
<div class="form-group row"> <div class="form-group row">
<label for="tirewidth" class="control-label col-4">Reifenbreite</label> <label for="tirewidth" class="control-label col-4">Reifenbreite</label>
@ -183,7 +186,7 @@
</div> </div>
<div class="form-group row"> <div class="form-group row">
<div class="offset-4 col-8"> <div class="offset-4 col-8">
<button name="pulsesave" type="submit" class="btn btn-primary">Speichern</button> <button name="pulsesave" type="submit" class="btn btn-outline-primary">Speichern</button>
</div> </div>
</div> </div>
</form> </form>
@ -195,7 +198,7 @@
<hr /> <hr />
<p> <p>
<h4>Einstellungen CAN-Bus</h4> <h4>Einstellungen CAN-Bus</h4>
<form action="\post.htm" method="POST" class="form-horizontal"> <form action="post.htm" method="POST" class="form-horizontal">
<div class="form-group row"> <div class="form-group row">
<label for="cansource" class="control-label col-4">Model</label> <label for="cansource" class="control-label col-4">Model</label>
<div class="col-8"> <div class="col-8">
@ -206,7 +209,7 @@
</div> </div>
<div class="form-group row"> <div class="form-group row">
<div class="offset-4 col-8"> <div class="offset-4 col-8">
<button name="cansave" type="submit" class="btn btn-primary">Speichern</button> <button name="cansave" type="submit" class="btn btn-outline-primary">Speichern</button>
</div> </div>
</div> </div>
</form> </form>
@ -218,7 +221,7 @@
<hr /> <hr />
<p> <p>
<h4>Einstellungen GPS</h4> <h4>Einstellungen GPS</h4>
<form action="\post.htm" method="POST" class="form-horizontal"> <form action="post.htm" method="POST" class="form-horizontal">
<div class="form-group row"> <div class="form-group row">
<label for="gpsbaud" class="control-label col-4">Baudrate</label> <label for="gpsbaud" class="control-label col-4">Baudrate</label>
<div class="col-8"> <div class="col-8">
@ -229,7 +232,7 @@
</div> </div>
<div class="form-group row"> <div class="form-group row">
<div class="offset-4 col-8"> <div class="offset-4 col-8">
<button name="gpssave" type="submit" class="btn btn-primary">Speichern</button> <button name="gpssave" type="submit" class="btn btn-outline-primary">Speichern</button>
</div> </div>
</div> </div>
</form> </form>
@ -246,7 +249,7 @@
<p> <p>
<form action="post.htm" method="POST" class="form-horizontal"> <form action="post.htm" method="POST" class="form-horizontal">
<div class="form-group row"> <div class="form-group row">
<label for="lubedistancenormal" class="control-label col-4">Modus:normal</label> <label for="lubedistancenormal" class="control-label col-4">Normal (gr&uuml;n)</label>
<div class="col-8"> <div class="col-8">
<div class="input-group"> <div class="input-group">
<input id="lubedistancenormal" name="lubedistancenormal" value="%LUBE_DISTANCE_NORMAL%" type="text" <input id="lubedistancenormal" name="lubedistancenormal" value="%LUBE_DISTANCE_NORMAL%" type="text"
@ -258,7 +261,7 @@
</div> </div>
</div> </div>
<div class="form-group row"> <div class="form-group row">
<label for="lubedistancerain" class="control-label col-4">Modus:rain</label> <label for="lubedistancerain" class="control-label col-4">Regen (blau)</label>
<div class="col-8"> <div class="col-8">
<div class="input-group"> <div class="input-group">
<input id="lubedistancerain" name="lubedistancerain" value="%LUBE_DISTANCE_RAIN%" type="text" <input id="lubedistancerain" name="lubedistancerain" value="%LUBE_DISTANCE_RAIN%" type="text"
@ -271,7 +274,7 @@
</div> </div>
<div class="form-group row"> <div class="form-group row">
<div class="offset-4 col-8"> <div class="offset-4 col-8">
<button name="oilsave" type="submit" class="btn btn-primary">Speichern</button> <button name="oilsave" type="submit" class="btn btn-outline-primary">Speichern</button>
</div> </div>
</div> </div>
</form> </form>
@ -285,7 +288,7 @@
<hr /> <hr />
<p> <p>
<h4>&Ouml;lvorrat</h4> <h4>&Ouml;lvorrat</h4>
<form action="\post.htm" method="POST" class="form-horizontal"> <form action="post.htm" method="POST" class="form-horizontal">
<div class="form-group row"> <div class="form-group row">
<label for="tankcap" class="control-label col-4">Tankkapazität</label> <label for="tankcap" class="control-label col-4">Tankkapazität</label>
<div class="col-8"> <div class="col-8">
@ -336,8 +339,8 @@
</div> </div>
<div class="form-group row"> <div class="form-group row">
<div class="offset-4 col-8 row"> <div class="offset-4 col-8 row">
<button name="oilsave" type="submit" class="btn btn-primary">Speichern</button> <button name="oilsave" type="submit" class="btn btn-outline-primary">Speichern</button>
<button name="resettank" type="submit" class="btn btn-primary">Tank zurücksetzen</button> <button name="resettank" type="submit" class="btn btn-outline-primary ml-2">Tank zurücksetzen</button>
</div> </div>
</div> </div>
</form> </form>
@ -345,7 +348,7 @@
<hr /> <hr />
<p> <p>
<h4>Entl&uuml;ftung</h4> <h4>Entl&uuml;ftung</h4>
<form action="\post.htm" method="POST" class="form-horizontal"> <form action="post.htm" method="POST" class="form-horizontal">
<div class="form-group row"> <div class="form-group row">
<label for="purgepulse" class="control-label col-4">Entl&uuml;ftung Dosierung</label> <label for="purgepulse" class="control-label col-4">Entl&uuml;ftung Dosierung</label>
<div class="col-8"> <div class="col-8">
@ -359,8 +362,8 @@
</div> </div>
<div class="form-group row"> <div class="form-group row">
<div class="offset-4 col-8 row"> <div class="offset-4 col-8 row">
<button name="maintsave" type="submit" class="btn btn-primary">Speichern</button> <button name="maintsave" type="submit" class="btn btn-outline-primary">Speichern</button>
<button name="purgenow" type="submit" class="btn btn-primary">Entlüftung starten</button> <button name="purgenow" type="submit" class="btn btn-outline-primary ml-2">Entlüftung starten</button>
</div> </div>
</div> </div>
</form> </form>
@ -368,7 +371,10 @@
<hr /> <hr />
<h4>EEPROM formatieren</h4> <h4>EEPROM formatieren</h4>
<p> <p>
<div class="alert alert-warning"> <div class="alert alert-primary alert-dismissable show fade" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<strong>Achtung!</strong><br> <strong>Achtung!</strong><br>
Das Formatieren der EEPROM-Bereiche sollte nur ausgeführt werden wenn es unbedingt erforderlich ist! Das Formatieren der EEPROM-Bereiche sollte nur ausgeführt werden wenn es unbedingt erforderlich ist!
Hierdurch werden alle Einstellungen zurück gesetzt bzw. alle Betriebsdaten gehen verloren. Hierdurch werden alle Einstellungen zurück gesetzt bzw. alle Betriebsdaten gehen verloren.
@ -395,7 +401,7 @@
</div> </div>
<div class="form-group row"> <div class="form-group row">
<div class="offset-4 col-8"> <div class="offset-4 col-8">
<button name="reset_ee_btn" type="submit" class="btn btn-primary">EEPROM formatieren</button> <button name="reset_ee_btn" type="submit" class="btn btn-outline-primary">EEPROM formatieren</button>
</div> </div>
</div> </div>
</form> </form>
@ -536,10 +542,6 @@
<p> <p>
<h4>Firmware-Update</h4> <h4>Firmware-Update</h4>
<form method='POST' action='/doUpdate' enctype='multipart/form-data'> <form method='POST' action='/doUpdate' enctype='multipart/form-data'>
<div class="input-group"> <div class="input-group">
<div class="input-group-prepend"> <div class="input-group-prepend">
<span class="input-group-text" id="inputGroupFileAddon01">Upload</span> <span class="input-group-text" id="inputGroupFileAddon01">Upload</span>
@ -549,12 +551,6 @@
<label class="custom-file-label" for="fw-update-file">Choose file</label> <label class="custom-file-label" for="fw-update-file">Choose file</label>
</div> </div>
</div> </div>
</form> </form>
</p> </p>
</div> </div>
@ -564,16 +560,16 @@
</main> </main>
<!-- Footer --> <!-- Footer -->
<footer class="navbar-default navbar-fixed-bottom">
<div class="container-fluid"> <footer class="page-footer navbar-dark bg-primary font-small fixed-bottom">
<!-- Copyright --> <div class="container-fluid text-center">
<div class="col text-center"> <div class="footer-copyright text-center py-3">
© 2022 Copyright: <span class="text-muted">© 2022 -
<a class="text-reset fw-bold" href="https://eventronics.de/">Marcel Peterkau</a> <a class="text-reset fw-bold" href="https://eventronics.de/">Marcel Peterkau</a></span>
</div> </div>
<!-- Copyright -->
</div> </div>
</footer> </footer>
<!-- Footer --> <!-- Footer -->
<script> <script>

View File

@ -8,6 +8,7 @@
body { body {
padding-top: 70px; padding-top: 70px;
margin-bottom: 56px;
} }
hr { hr {
@ -16,3 +17,4 @@ hr {
color: gray; color: gray;
background-color: gray background-color: gray
} }