souko/Kettenoeler
1
0
Fork 0
Code Issues Pull Requests Releases 4 Wiki Activity

more WebUI-Progress

Browse Source
This commit is contained in:
Marcel Peterkau
2022-02-17 09:17:16 +01:00
parent fa23e72fbc
commit 6ba4c40166
3 changed files with 68 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

106
Software/ChainLube/data/index.htm
View File

@@ -6,66 +6,77 @@
<title>KTM CAN Chain Oiler</title>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/static/css/bootstrap.min.css">
<link rel="stylesheet" href="/static/css/custom.css">
<script src="/static/js/jquery.min.js"></script>
<script src="/static/js/bootstrap.min.js"></script>
<link rel="apple-touch-icon" sizes="180x180" href="/static/img/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/static/img/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/static/img/favicon-16x16.png">
<link rel="manifest" href="/static/img/site.webmanifest">
<link rel="stylesheet" href="static/css/bootstrap.min.css">
<link rel="stylesheet" href="static/css/custom.css">
<script src="static/js/jquery.min.js"></script>
<script src="static/js/bootstrap.min.js"></script>
<link rel="apple-touch-icon" sizes="180x180" href="static/img/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="static/img/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="static/img/favicon-16x16.png">
<link rel="manifest" href="static/img/site.webmanifest">
</head>
<body>
<div class="container">
<nav class="navbar navbar-default">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<img src="/static/img/logo.png" width="30" height="30" class="d-inline-block align-top" alt="">
KTM CAN ChainLube
</a>
</div>
<!-- Collection of nav links, forms, and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a data-toggle="tab" href="#tab_home">Home</a></li>
<li><a data-toggle="tab" href="#tab_source">Wegstrecke</a></li>
<li><a data-toggle="tab" href="#tab_lube">Schmierung</a></li>
<li><a data-toggle="tab" href="#tab_tank">Öltank</a></li>
<li><a data-toggle="tab" href="#tab_maintenance">Wartung</a></li>
<li><a data-toggle="tab" href="#tab_sysinfo">Systeminfo</a></li>
</ul>
<nav class="navbar navbar-expand-md navbar-default fixed-top">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img src="static/img/logo.png" width="30" height="30" class="d-inline-block align-top" alt="">
KTM CAN ChainLube
</a>
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
</div>
</nav>
<!-- Collection of nav links, forms, and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a data-toggle="tab" href="#tab_home">Home</a></li>
<li><a data-toggle="tab" href="#tab_source">Wegstrecke</a></li>
<li><a data-toggle="tab" href="#tab_lube">Schmierung</a></li>
<li><a data-toggle="tab" href="#tab_tank">Öltank</a></li>
<li><a data-toggle="tab" href="#tab_maintenance">Wartung</a></li>
<li><a data-toggle="tab" href="#tab_sysinfo">Systeminfo</a></li>
</ul>
</div>
</nav>
<main role="main" class="container">
<!-- Tabs Content -->
<div class="tab-content">
<!-- Div Tab Home-->
<div id="tab_home" class="tab-pane fade in active">
<h3>HOME</h3>
<div class="col text-center">
<div class="jumbotron">
<img src="static/img/logo.png" width="120" height="120" class="img-fluid" alt="">
<h3>KTM CAN Chain Lube</h3>
</div>
</div>
<p>
<h4>Tankinhalt</h4>
<h4>Tankinhalt verbleibend</h4>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="%TANK_REMAIN_CAPACITY%" aria-valuemin="0"
aria-valuemax="100" style="width: %TANK_REMAIN_CAPACITY%&#37;">
%TANK_REMAIN_CAPACITY%&#37;
</div>
</div>
<h4>aktueller Modus</h4>
<input class="form-control" type="text" placeholder="%SYSTEM_STATUS%" readonly>
</p>
</div>
<!-- Div Tab Home-->
<!-- Div Tab Source Settings-->
<div id="tab_source" class="tab-pane fade">
<h3>Quelle Wegstrecke</h3>
<h3>Erfassung Wegstrecke</h3>
<hr>
<p>
<form action="source-settings" method="POST" class="form-horizontal">
<div class="form-group">
@@ -182,6 +193,7 @@
<!-- Div Tab Lube -->
<div id="tab_lube" class="tab-pane fade">
<h3>Schmierung</h3>
<hr>
<p>
</p>
@@ -190,6 +202,7 @@
<!-- Div Tab Maintenance -->
<div id="tab_maintenance" class="tab-pane fade">
<h3>Wartung</h3>
<hr>
<p>
<form class="form-horizontal">
<div class="form-group">
@@ -213,6 +226,7 @@
<!-- Div Tank Settings-->
<div id="tab_tank" class="tab-pane fade">
<h3>Öltank</h3>
<hr>
<p>
<form class="form-horizontal">
<div class="form-group">
@@ -253,7 +267,9 @@
<!-- Div Tank Settings-->
<!-- Div Tab SystemInfo -->
<div id="tab_sysinfo" class="tab-pane fade">
<h3>Einstellungen</h3>
<h3>Systeminfo</h3>
<hr>
<h4>Einstellungen</h4>
<p>
<table class="table">
<tbody>
@@ -324,7 +340,7 @@
</tbody>
</table>
</p>
<h3>Betriebsdaten</h3>
<h4>Betriebsdaten</h4>
<p>
<table class="table">
<tbody>
@@ -354,16 +370,18 @@
<!-- Div Tab SystemInfo -->
</div>
<!-- Tabs Content -->
</div>
</main>
<!-- Footer -->
<footer class="navbar-default navbar-fixed-bottom">
<div class="container-fluid">
<!-- Copyright -->
© 2022 Copyright:
<a class="text-reset fw-bold" href="https://eventronics.de/">Marcel Peterkau</a>
<div class="col text-center">
© 2022 Copyright:
<a class="text-reset fw-bold" href="https://eventronics.de/">Marcel Peterkau</a>
</div>
<!-- Copyright -->
</div>
<!-- Copyright -->
</footer>
<!-- Footer -->