Still migrating dashboard to new design

This commit is contained in:
Anatole SCHRAMM 2022-10-10 13:56:57 +02:00
parent 2a51d0cdf6
commit a7033e5c5e

View File

@ -122,12 +122,12 @@
<section id="mainpage_id">
<table>
<tr>
<td colspan="2" style="width: 50%;">
<div style="margin:10px;padding:5px 0 10px 0;" class="grey lighten-2 z-depth-3">
<h5 class="center-align">Connectivity</h5>
</div>
<td colspan="2" style="width: 50%;margin:0;padding:0;">
<div style="margin:10px;padding:5px 0 10px 0;" class="grey lighten-2 z-depth-3">
<h5 class="center-align">Connectivity</h5>
</div>
</td>
<td colspan="2" style="width: 50%;">
<td colspan="2" style="width: 50%;margin:0;padding:0;">
<div style="margin:10px;padding:5px 0 10px 0;" class="grey lighten-2 z-depth-3">
<h5 class="center-align">System Info</h5>
</div>
@ -135,8 +135,8 @@
</tr>
<tr>
<td colspan="4">
<div class="row" style="display:flex;">
<div class="teal darken-1 col m3" style="margin: 7px 22px 7px 22px;border-radius: 5px;padding-bottom: 15px;">
<div class="row" style="display:flex;margin:0;padding:0;">
<div class="teal darken-1 col m3" style="margin: 7px 5px 7px 10px;border-radius: 5px;padding-bottom: 15px;">
<div class="white-text">
<h5 style="font-weight:bold;" class="center-align">Access Point Mode</h5>
</div>
@ -167,7 +167,7 @@
</div>
</div>
<div class="teal darken-1 col m3" style="margin: 7px 22px 7px 22px;border-radius: 5px;padding-bottom: 15px;">
<div class="teal darken-1 col m3" style="margin: 7px 20px 7px 5px;border-radius: 5px;padding-bottom: 15px;">
<div class="white-text">
<h5 style="font-weight:bold;" class="center-align">Station Mode</h5>
</div>
@ -207,7 +207,7 @@
</div>
</div>
<div class="teal darken-1 col m6" style="margin: 7px 22px 7px 22px;border-radius: 5px;padding-bottom: 15px;">
<div class="teal darken-1 col m6" style="margin: 7px 10px 7px 0px;border-radius: 5px;padding-bottom: 15px;">
<div class="white-text">
<h5 style="font-weight:bold;" class="center-align">System State</h5>
</div>
@ -252,23 +252,35 @@
<span id="upTime"></span>
</div>
</div>
<hr>
<div class="white-text">
<h5 style="font-weight:bold;" class="center-align">System State</h5>
</div>
<div class="row">
<div class="col m6">
Available OTA update :
</div>
<div class="col m6">
<span id="otaUpdateInfo"></span>
</div>
</div>
</div>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>
<td style="margin:0;padding:0;width:25%;">
<div style="margin:10px;padding:5px 0 10px 0;" class="grey lighten-2 z-depth-3">
<h5 class="center-align">Clock</h5>
</div>
</td>
<td>
<td style="margin:0;padding:0;width:25%;">
<div style="margin:10px;padding:5px 0 10px 0;" class="grey lighten-2 z-depth-3">
<h5 class="center-align">Storage</h5>
</div>
</td>
<td colspan="2">
<td colspan="2" style="margin:0;padding:0;width:50%;">
<div style="margin:10px;padding:5px 0 10px 0;" class="grey lighten-2 z-depth-3">
<h5 class="center-align">Services</h5>
</div>
@ -368,62 +380,13 @@
</div>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
</table>
<div class="row" style="margin-top:-20px;">
<div class="row col m3">
<div class="col m12">
</div>
</div>
<div class="row col m3">
<div class="col m12">
</div>
</div>
<div class="col m6">
<div class="col m6">
</div>
<div class="col m6">
<div class="card teal darken-1">
<div class="card-content white-text">
<span class="card-title center-align" style="font-weight:bold;">FTP Server</span>
</div>
<div class="card-action white-text center-align" style="font-size:1.2em;">
<div class="switch">
<div class="teal darken-1 col m3" style="margin: 7px 22px 7px 22px;border-radius: 5px;padding-bottom: 15px;">
<div class="white-text">
<h5 style="font-weight:bold;" class="center-align">FTP Server</h5>
</div>
<hr>
<div class="switch center-align">
<label class="white-text">
Disabled
<input type="checkbox">
@ -439,136 +402,153 @@
</table>
<input placeholder="Login" id="ssid" type="text" class="validate white-text">
<input placeholder="Password" id="pwd" type="password" class="validate white-text">
</div>
<div class="card-action">
<button class="btn waves-effect waves-light green darken-3" type="submit" name="apply">
Apply &#10004;
</button>
<button class="btn waves-effect waves-light red darken-3" type="submit" name="cancel">
Cancel &#10008;
</button>
<hr>
<div class="row">
<div class="col m6">
<button class="btn waves-effect waves-light green darken-3" type="submit" name="apply">
Apply &#10004;
</button>
</div>
<div class="col m6 right-align">
<button class="btn waves-effect waves-light red darken-3" type="submit" name="cancel">
Cancel &#10008;
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td colspan="4">
<div style="margin:10px;padding:5px 0 10px 0;" class="grey lighten-2 z-depth-3">
<h5 class="center-align">IO's Mode and State</h5>
</div>
</td>
</tr>
<tr>
<td colspan="4">
<div class="row" style="display:flex;">
<div class="teal darken-1 col m12" style="margin: 7px 22px 7px 22px;border-radius: 5px;padding-bottom: 15px;">
<div class="white-text">
<h5 style="font-weight:bold;" class="center-align">IO Expander</h5>
</div>
<div class="white-text center-align" style="font-size:1.2em;">
<table>
<tr>
<td>
</td>
<td>
<p>P0</p>
</td>
<td>
<p>P1</p>
</td>
<td>
<p>P2</p>
</td>
<td>
<p>P3</p>
</td>
<td>
<p>P4</p>
</td>
<td>
<p>P5</p>
</td>
<td>
<p>P6</p>
</td>
<td>
<p>P7</p>
</td>
</tr>
<tr>
<td>
<p>MODE</p>
</td>
<td>
<img class="mode-img" style="display:none;" onclick="setIoMode(this.id,'OUTPUT');" id="P0_MODE_I" src="rsrc/in.png" alt="input" >
<img class="mode-img" style="display:none;" onclick="setIoMode(this.id,'INPUT');" id="P0_MODE_O" src="rsrc/out.png" alt="output" >
</td>
<td>
<img class="mode-img" style="display:none;" onclick="setIoMode(this.id,'OUTPUT');" id="P1_MODE_I" src="rsrc/in.png" alt="input" >
<img class="mode-img" style="display:none;" onclick="setIoMode(this.id,'INPUT');" id="P1_MODE_O" src="rsrc/out.png" alt="output" >
</td>
<td>
<img class="mode-img" style="display:none;" onclick="setIoMode(this.id,'OUTPUT');" id="P2_MODE_I" src="rsrc/in.png" alt="input" >
<img class="mode-img" style="display:none;" onclick="setIoMode(this.id,'INPUT');" id="P2_MODE_O" src="rsrc/out.png" alt="output" >
</td>
<td>
<img class="mode-img" style="display:none;" onclick="setIoMode(this.id,'OUTPUT');" id="P3_MODE_I" src="rsrc/in.png" alt="input" >
<img class="mode-img" style="display:none;" onclick="setIoMode(this.id,'INPUT');" id="P3_MODE_O" src="rsrc/out.png" alt="output" >
</td>
<td>
<img class="mode-img" style="display:none;" onclick="setIoMode(this.id,'OUTPUT');" id="P4_MODE_I" src="rsrc/in.png" alt="input" >
<img class="mode-img" style="display:none;" onclick="setIoMode(this.id,'INPUT');" id="P4_MODE_O" src="rsrc/out.png" alt="output" >
</td>
<td>
<img class="mode-img" style="display:none;" onclick="setIoMode(this.id,'OUTPUT');" id="P5_MODE_I" src="rsrc/in.png" alt="input" >
<img class="mode-img" style="display:none;" onclick="setIoMode(this.id,'INPUT');" id="P5_MODE_O" src="rsrc/out.png" alt="output" >
</td>
<td>
<img class="mode-img" style="display:none;" onclick="setIoMode(this.id,'OUTPUT');" id="P6_MODE_I" src="rsrc/in.png" alt="input" >
<img class="mode-img" style="display:none;" onclick="setIoMode(this.id,'INPUT');" id="P6_MODE_O" src="rsrc/out.png" alt="output" >
</td>
<td>
<img class="mode-img" style="display:none;" onclick="setIoMode(this.id,'OUTPUT');" id="P7_MODE_I" src="rsrc/in.png" alt="input" >
<img class="mode-img" style="display:none;" onclick="setIoMode(this.id,'INPUT');" id="P7_MODE_O" src="rsrc/out.png" alt="output" >
</td>
</tr>
<tr>
<td>
<p>LEVEL</p>
</td>
<td>
<img class="mode-img" style="display:none;" onclick="setIoLevel(this.id,'LOW');" id="P0_LEVEL_H" src="rsrc/on.png" alt="on" >
<img class="mode-img" style="display:none;" onclick="setIoLevel(this.id,'HIGH');" id="P0_LEVEL_L" src="rsrc/off.png" alt="off" >
</td>
<td>
<img class="mode-img" style="display:none;" onclick="setIoLevel(this.id,'LOW');" id="P1_LEVEL_H" src="rsrc/on.png" alt="on" >
<img class="mode-img" style="display:none;" onclick="setIoLevel(this.id,'HIGH');" id="P1_LEVEL_L" src="rsrc/off.png" alt="off" >
</td>
<td>
<img class="mode-img" style="display:none;" onclick="setIoLevel(this.id,'LOW');" id="P2_LEVEL_H" src="rsrc/on.png" alt="on" >
<img class="mode-img" style="display:none;" onclick="setIoLevel(this.id,'HIGH');" id="P2_LEVEL_L" src="rsrc/off.png" alt="off" >
</td>
<td>
<img class="mode-img" style="display:none;" onclick="setIoLevel(this.id,'LOW');" id="P3_LEVEL_H" src="rsrc/on.png" alt="on" >
<img class="mode-img" style="display:none;" onclick="setIoLevel(this.id,'HIGH');" id="P3_LEVEL_L" src="rsrc/off.png" alt="off" >
</td>
<td>
<img class="mode-img" style="display:none;" onclick="setIoLevel(this.id,'LOW');" id="P4_LEVEL_H" src="rsrc/on.png" alt="on" >
<img class="mode-img" style="display:none;" onclick="setIoLevel(this.id,'HIGH');" id="P4_LEVEL_L" src="rsrc/off.png" alt="off" >
</td>
<td>
<img class="mode-img" style="display:none;" onclick="setIoLevel(this.id,'LOW');" id="P5_LEVEL_H" src="rsrc/on.png" alt="on" >
<img class="mode-img" style="display:none;" onclick="setIoLevel(this.id,'HIGH');" id="P5_LEVEL_L" src="rsrc/off.png" alt="off" >
</td>
<td>
<img class="mode-img" style="display:none;" onclick="setIoLevel(this.id,'LOW');" id="P6_LEVEL_H" src="rsrc/on.png" alt="on" >
<img class="mode-img" style="display:none;" onclick="setIoLevel(this.id,'HIGH');" id="P6_LEVEL_L" src="rsrc/off.png" alt="off" >
</td>
<td>
<img class="mode-img" style="display:none;" onclick="setIoLevel(this.id,'LOW');" id="P7_LEVEL_H" src="rsrc/on.png" alt="on" >
<img class="mode-img" style="display:none;" onclick="setIoLevel(this.id,'HIGH');" id="P7_LEVEL_L" src="rsrc/off.png" alt="off" >
</td>
</tr>
</table>
</div>
</div>
</div>>
</td>
</tr>
</table>
<div class="row" style="margin-top:-20px;">
<div class="row col m12">
<div style="margin:10px;padding:5px 0 10px 0;" class="grey lighten-2 z-depth-3">
<h5 class="center-align">IO's Mode and State</h5>
</div>
<div class="card teal darken-1">
<div class="card-content white-text">
<span class="card-title center-align" style="font-weight:bold;">IO Expander</span>
</div>
<div class="card-action white-text center-align" style="font-size:1.2em;">
<table>
<tr>
<td>
</td>
<td>
<p>P0</p>
</td>
<td>
<p>P1</p>
</td>
<td>
<p>P2</p>
</td>
<td>
<p>P3</p>
</td>
<td>
<p>P4</p>
</td>
<td>
<p>P5</p>
</td>
<td>
<p>P6</p>
</td>
<td>
<p>P7</p>
</td>
</tr>
<tr>
<td>
<p>MODE</p>
</td>
<td>
<img class="mode-img" style="display:none;" onclick="setIoMode(this.id,'OUTPUT');" id="P0_MODE_I" src="rsrc/in.png" alt="input" >
<img class="mode-img" style="display:none;" onclick="setIoMode(this.id,'INPUT');" id="P0_MODE_O" src="rsrc/out.png" alt="output" >
</td>
<td>
<img class="mode-img" style="display:none;" onclick="setIoMode(this.id,'OUTPUT');" id="P1_MODE_I" src="rsrc/in.png" alt="input" >
<img class="mode-img" style="display:none;" onclick="setIoMode(this.id,'INPUT');" id="P1_MODE_O" src="rsrc/out.png" alt="output" >
</td>
<td>
<img class="mode-img" style="display:none;" onclick="setIoMode(this.id,'OUTPUT');" id="P2_MODE_I" src="rsrc/in.png" alt="input" >
<img class="mode-img" style="display:none;" onclick="setIoMode(this.id,'INPUT');" id="P2_MODE_O" src="rsrc/out.png" alt="output" >
</td>
<td>
<img class="mode-img" style="display:none;" onclick="setIoMode(this.id,'OUTPUT');" id="P3_MODE_I" src="rsrc/in.png" alt="input" >
<img class="mode-img" style="display:none;" onclick="setIoMode(this.id,'INPUT');" id="P3_MODE_O" src="rsrc/out.png" alt="output" >
</td>
<td>
<img class="mode-img" style="display:none;" onclick="setIoMode(this.id,'OUTPUT');" id="P4_MODE_I" src="rsrc/in.png" alt="input" >
<img class="mode-img" style="display:none;" onclick="setIoMode(this.id,'INPUT');" id="P4_MODE_O" src="rsrc/out.png" alt="output" >
</td>
<td>
<img class="mode-img" style="display:none;" onclick="setIoMode(this.id,'OUTPUT');" id="P5_MODE_I" src="rsrc/in.png" alt="input" >
<img class="mode-img" style="display:none;" onclick="setIoMode(this.id,'INPUT');" id="P5_MODE_O" src="rsrc/out.png" alt="output" >
</td>
<td>
<img class="mode-img" style="display:none;" onclick="setIoMode(this.id,'OUTPUT');" id="P6_MODE_I" src="rsrc/in.png" alt="input" >
<img class="mode-img" style="display:none;" onclick="setIoMode(this.id,'INPUT');" id="P6_MODE_O" src="rsrc/out.png" alt="output" >
</td>
<td>
<img class="mode-img" style="display:none;" onclick="setIoMode(this.id,'OUTPUT');" id="P7_MODE_I" src="rsrc/in.png" alt="input" >
<img class="mode-img" style="display:none;" onclick="setIoMode(this.id,'INPUT');" id="P7_MODE_O" src="rsrc/out.png" alt="output" >
</td>
</tr>
<tr>
<td>
<p>LEVEL</p>
</td>
<td>
<img class="mode-img" style="display:none;" onclick="setIoLevel(this.id,'LOW');" id="P0_LEVEL_H" src="rsrc/on.png" alt="on" >
<img class="mode-img" style="display:none;" onclick="setIoLevel(this.id,'HIGH');" id="P0_LEVEL_L" src="rsrc/off.png" alt="off" >
</td>
<td>
<img class="mode-img" style="display:none;" onclick="setIoLevel(this.id,'LOW');" id="P1_LEVEL_H" src="rsrc/on.png" alt="on" >
<img class="mode-img" style="display:none;" onclick="setIoLevel(this.id,'HIGH');" id="P1_LEVEL_L" src="rsrc/off.png" alt="off" >
</td>
<td>
<img class="mode-img" style="display:none;" onclick="setIoLevel(this.id,'LOW');" id="P2_LEVEL_H" src="rsrc/on.png" alt="on" >
<img class="mode-img" style="display:none;" onclick="setIoLevel(this.id,'HIGH');" id="P2_LEVEL_L" src="rsrc/off.png" alt="off" >
</td>
<td>
<img class="mode-img" style="display:none;" onclick="setIoLevel(this.id,'LOW');" id="P3_LEVEL_H" src="rsrc/on.png" alt="on" >
<img class="mode-img" style="display:none;" onclick="setIoLevel(this.id,'HIGH');" id="P3_LEVEL_L" src="rsrc/off.png" alt="off" >
</td>
<td>
<img class="mode-img" style="display:none;" onclick="setIoLevel(this.id,'LOW');" id="P4_LEVEL_H" src="rsrc/on.png" alt="on" >
<img class="mode-img" style="display:none;" onclick="setIoLevel(this.id,'HIGH');" id="P4_LEVEL_L" src="rsrc/off.png" alt="off" >
</td>
<td>
<img class="mode-img" style="display:none;" onclick="setIoLevel(this.id,'LOW');" id="P5_LEVEL_H" src="rsrc/on.png" alt="on" >
<img class="mode-img" style="display:none;" onclick="setIoLevel(this.id,'HIGH');" id="P5_LEVEL_L" src="rsrc/off.png" alt="off" >
</td>
<td>
<img class="mode-img" style="display:none;" onclick="setIoLevel(this.id,'LOW');" id="P6_LEVEL_H" src="rsrc/on.png" alt="on" >
<img class="mode-img" style="display:none;" onclick="setIoLevel(this.id,'HIGH');" id="P6_LEVEL_L" src="rsrc/off.png" alt="off" >
</td>
<td>
<img class="mode-img" style="display:none;" onclick="setIoLevel(this.id,'LOW');" id="P7_LEVEL_H" src="rsrc/on.png" alt="on" >
<img class="mode-img" style="display:none;" onclick="setIoLevel(this.id,'HIGH');" id="P7_LEVEL_L" src="rsrc/off.png" alt="off" >
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</section>