C3MA/PlantCtrl
5
0
Fork 0
Code Issues 8 Pull Requests Packages Projects Releases Wiki Activity

added file manager, upload animation, unsaved config indicator

Browse Source
This commit is contained in:
Empire Phoenix
2025-01-21 01:18:36 +01:00
parent e7556b7ec9
commit 1ce4d74a65
21 changed files with 550 additions and 186 deletions
Download Patch File Download Diff File Expand all files Collapse all files

142
rust/src_webpack/src/main.html
View File

@@ -1,6 +1,7 @@
<style>
.progressPane {
display: block;
display: flex;
flex-direction: column;
position: fixed;
width: 100%;
height: 100%;
@@ -8,27 +9,21 @@
padding: 0;
top: 0;
left: 0;
background-color: lightgrey;
background-color: grey;
opacity: 0.8;
}
.progressPaneCenter {
display: inline-block;
margin-top: 48%;
position: absolute;
height: 4%;
width: 50%;
margin-left: 25%;
margin-right: 25%;
}
.progress {
height: 1.5em;
width: 100%;
background-color: #c9c9c9;
background-color: #555;
position: relative;
}
.progressSpacer{
flex-grow: 1;
}
.progress:after {
content: attr(data-label);
font-size: 0.8em;
@@ -40,13 +35,13 @@
}
.progress .value {
background-color: #7cc4ff;
background-color: darkcyan;
display: inline-block;
height: 100%;
}
.progress .valueIndeterminate {
background-color: #7cc4ff;
background-color: darkcyan;
display: inline-block;
height: 100%;
animation: indeterminateAnimation 1s infinite linear;
@@ -73,8 +68,13 @@
display: flex;
flex-wrap: wrap;
}
.flexcontainer-rev{
display: flex;
flex-wrap: wrap-reverse;
}
.subcontainer {
min-width: 300px;
max-width: 900px;
flex-grow: 1;
border-style: solid;
border-width: 1px;
@@ -100,7 +100,7 @@
padding: 8px;
}
}
@media (min-width: 900px) {
@media (min-width: 1100px) {
.plantcontainer {
flex-grow: 1;
min-width: 20%;
@@ -109,7 +109,7 @@
padding: 8px;
}
}
@media (min-width: 1800px) {
@media (min-width: 2150px) {
.plantcontainer {
flex-grow: 1;
min-width: 200px;
@@ -132,75 +132,6 @@
font-weight: bold;
}
.powerflexkey {
min-width: 150px;
}
.powerflexvalue {
text-wrap: nowrap;
flex-grow: 1;
}
.basicnetworkkey{
min-width: 200px;
}
.basicnetworkvalue{
flex-grow: 1;
}
.basicnetworkkeyssid1{
flex-grow: 1;
}
.basicnetworkkeyssid2{
min-width: 50px;
flex-grow: 1;
}
.mqttkey{
min-width: 100px;
}
.mqttvalue{
flex-grow: 1;
}
.otakey{
min-width: 100px;
}
.otavalue{
flex-grow: 1;
}
.otaform {
min-width: 100px;
flex-grow: 1;
}
.otachooser {
min-width: 100px;
width: 100%;
}
.lightcheckbox{
margin: 0px;
min-width: 20px
}
.lightkey{
min-width: 200px;
}
.lightvalue{
flex-grow: 1;
}
.lightnumberbox{
min-width: 75px;
}
.tankcheckbox {
min-width: 20px;
margin: 0px;
}
.tankkey{
min-width: 250px;
}
.tankvalue{
flex-grow: 1;
margin: 0px;
}
</style>
@@ -208,11 +139,11 @@
<div class="container-xl">
<div style="display:flex; flex-wrap: wrap;">
<div id="firmwareview" style="border-width: 1px; border-style: solid; flex-grow: 1; min-width: 350px">
<div id="firmwareview" class="subcontainer">
</div>
<div id="timeview" style="border-width: 1px; border-style: solid; flex-grow: 1;">
<div id="timeview" class="subcontainer">
</div>
<div id="batteryview" style="border-width: 1px; border-style: solid; flex-grow: 1;">
<div id="batteryview" class="subcontainer">
</div>
</div>
@@ -224,31 +155,32 @@
</div>
</div>
<h2>config</h2>
<h3>Plants:</h3>
<button id="measure_moisture">Measure Moisture</button>
<div id="plants" class="plantlist"></div>
<button id="submit">Submit</button>
<div id="submit_status"></div>
<br>
<textarea id="json" cols=50 rows=10></textarea>
<script src="bundle.js"></script>
<div class="flexcontainer-rev">
<div>
<textarea id="json" cols=50 rows=10></textarea>
<button id="submit">Submit</button>
<div id="submit_status"></div>
</div>
<div id="fileview" class="subcontainer">
</div>
</div>
<button id="exit">Exit</button>
<button id="reboot">Reboot</button>
<script src="bundle.js"></script>
</div>
<div id="progressPane" class="progressPane">
<div class="progressPaneCenter">
<div id="progressPaneBar" class="progress" data-label="50% Complete">
<span id="progressPaneSpan" class="value" style="width:100%;"></span>
</div>
<div class="progressSpacer"></div>>
<div id="progressPaneBar" class="progress" data-label="50% Complete">
<span id="progressPaneSpan" class="value" style="width:100%;"></span>
</div>
<div class="progressSpacer"></div>>
</div>