added file manager, upload animation, unsaved config indicator

This commit is contained in:
2025-01-21 01:18:36 +01:00
parent e7556b7ec9
commit 1ce4d74a65
21 changed files with 550 additions and 186 deletions

View File

@@ -1,65 +1,88 @@
<style>
.plantsensorkey{
min-width: 100px;
}
.plantsensorvalue{
flex-grow: 1;
}
.plantkey{
min-width: 175px;
}
.plantvalue{
flex-grow: 1;
}
.plantcheckbox{
min-width: 20px;
margin: 0px;
}
</style>
<div>
<div style="font-weight: bold; text-align: center; flex-grow: 1;"
id="plant_${plantId}_header">Plant ${plantId}</div>
<div class="subtitle"
id="plant_${plantId}_header">
Plant ${plantId}
</div>
<div>
<div class="row">
<div class="col-1"></div>
<button class="col-10" id="plant_${plantId}_test">Test</button>
<div class="col-1"></div>
</div>
<div class="row">
<div class="col-12">Live:</div>
</div>
<div class="row">
<div class="col-7">Sensor A:</div>
<span class="col-4" id="plant_${plantId}_moisture_a">loading</span>
<div class="col-7">Sensor B:</div>
<span class="col-4" id="plant_${plantId}_moisture_b">loading</span>
</div>
<div class="row">
<div class="col-7">
<div class="flexcontainer">
<div class="plantkey">
Mode:
</div>
<select class="col-4" id="plant_${plantId}_mode">
<select class="plantvalue" id="plant_${plantId}_mode">
<option value="OFF">Off</option>
<option value="TargetMoisture">Target</option>
<option value="TimerOnly">Timer</option>
</select>
</div>
<div class="row">
<div class="col-7">Target Moisture:</div>
<input class="col-4" id="plant_${plantId}_target_moisture" type="number" min="0" max="100" placeholder="0">
<div class="flexcontainer">
<div class="plantkey">Target Moisture:</div>
<input class="plantvalue" id="plant_${plantId}_target_moisture" type="number" min="0" max="100" placeholder="0">
</div>
<div class="row">
<div class="col-7">Pump Time (s):</div>
<input class="col-4" id="plant_${plantId}_pump_time_s" type="number" min="0" max="600" placeholder="30">
<div class="flexcontainer">
<div class="plantkey">Pump Time (s):</div>
<input class="plantvalue" id="plant_${plantId}_pump_time_s" type="number" min="0" max="600" placeholder="30">
</div>
<div class="row">
<div class="col-7">Pump Cooldown (m):</div>
<input class="col-4" id="plant_${plantId}_pump_cooldown_min" type="number" min="0" max="600" placeholder="30">
<div class="flexcontainer">
<div class="plantkey">Pump Cooldown (m):</div>
<input class="plantvalue" id="plant_${plantId}_pump_cooldown_min" type="number" min="0" max="600" placeholder="30">
</div>
<div class="row">
<div class="col-7">"Pump Hour Start":</div>
<select class="col-4" id="plant_${plantId}_pump_hour_start">10</select>
<div class="flexcontainer">
<div class="plantkey">"Pump Hour Start":</div>
<select class="plantvalue" id="plant_${plantId}_pump_hour_start">10</select>
</div>
<div class="row">
<div class="col-7">"Pump Hour End":</div>
<select class="col-4" id="plant_${plantId}_pump_hour_end">19</select>
<div class="flexcontainer">
<div class="plantkey">"Pump Hour End":</div>
<select class="plantvalue" id="plant_${plantId}_pump_hour_end">19</select>
</div>
<div class="row">
<div class="col-7">Sensor B installed:</div>
<input class="col-4" id="plant_${plantId}_sensor_b" type="checkbox">
</div>
<div class="row">
<div class="col-7">Warn Pump Count:</div>
<input class="col-4" id="plant_${plantId}_max_consecutive_pump_count" type="number" min="1" , max="50" ,
<div class="flexcontainer">
<div class="plantkey">Warn Pump Count:</div>
<input class="plantvalue" id="plant_${plantId}_max_consecutive_pump_count" type="number" min="1" , max="50" ,
placeholder="10">
</div>
</div>
<div class="flexcontainer">
<div class="plantkey">Sensor B installed:</div>
<input class="plantcheckbox" id="plant_${plantId}_sensor_b" type="checkbox">
</div>
<div class="flexcontainer">
<button class="subtitle" id="plant_${plantId}_test">Test Pump</button>
</div>
<div class="flexcontainer">
<div class="subtitle">Live:</div>
</div>
<div class="flexcontainer">
<span class="plantsensorkey">Sensor A:</span>
<span class="plantsensorvalue" id="plant_${plantId}_moisture_a">loading</span>
</div>
<div class="flexcontainer">
<div class="plantsensorkey">Sensor B:</div>
<span class="plantsensorvalue" id="plant_${plantId}_moisture_b">loading</span>
</div>
</div>