Still migrating dashboard to new design
This commit is contained in:
Anatole SCHRAMM
parent
2a51d0cdf6
commit
a7033e5c5e
@ -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 ✔
|
||||
</button>
|
||||
<button class="btn waves-effect waves-light red darken-3" type="submit" name="cancel">
|
||||
Cancel ✘
|
||||
</button>
|
||||
<hr>
|
||||
<div class="row">
|
||||
<div class="col m6">
|
||||
<button class="btn waves-effect waves-light green darken-3" type="submit" name="apply">
|
||||
Apply ✔
|
||||
</button>
|
||||
</div>
|
||||
<div class="col m6 right-align">
|
||||
<button class="btn waves-effect waves-light red darken-3" type="submit" name="cancel">
|
||||
Cancel ✘
|
||||
</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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user