fixed forms in tables

table.html

@@ -26,46 +26,113 @@
   <p>I have some temperature sensors installed in various locations. <br>
     on the table you could see the values</p>
 
+  <details>
+    <summary>Filters</summary>
     <form>
       <fieldset>
-        <legend>Filter by Location</legend>
+        <i><b>Location</b></i><br>
         <input type="checkbox" id="loc_kitchen" name="location" value="Kitchen"> Kitchen<br>
         <input type="checkbox" id="loc_living" name="location" value="Living Room"> Living Room<br>
         <input type="checkbox" id="loc_balcony" name="location" value="Balcony"> Balcony<br>
         <input type="checkbox" id="loc_bedroom" name="location" value="Bedroom"> Bedroom<br>
-    </fieldset>
 
-    <fieldset>
+        <i><b>Sensor Type</b></i><br>
-        <legend>Filter by Sensor Type</legend>
         <input type="checkbox" id="type_xiaomi" name="sensor_type" value="Xiaomi"> Xiaomi<br>
         <input type="checkbox" id="type_bmp220" name="sensor_type" value="Bmp220"> Bmp220<br>
         <input type="checkbox" id="type_scd30" name="sensor_type" value="Scd30(Internal)"> Scd30(Internal)<br>
         <input type="checkbox" id="type_bmp280" name="sensor_type" value="Bmp280"> Bmp280<br>
-    </fieldset>
 
-    <fieldset>
+        <i><b>Numeric Values</b></i><br>
-        <legend>Filter by Numeric Values</legend>
+        Temperature from: <input type="number" name="temp_min" placeholder="20"> to: <input type="number"
-        Temperature from: <input type="number" name="temp_min" placeholder="20"> to: <input type="number" name="temp_max" placeholder="30"><br>
+          name="temp_max" placeholder="30"><br>
-        Humidity from: <input type="number" name="humidity_min" placeholder="40"> to: <input type="number" name="humidity_max" placeholder="60"><br>
+        Humidity from: <input type="number" name="humidity_min" placeholder="40"> to: <input type="number"
-    </fieldset>
+          name="humidity_max" placeholder="60"><br>
 
-    <fieldset>
+        <i><b>Device Specific Filters</b></i><br>
-        <legend>Device Specific Filters</legend>
+        Sensor Name: <input type="text" name="sensor_name"><br>
-        Sensor Number: <input type="number" name="sensor_number" placeholder="7"><br>
         Days Since Calibration (max): <input type="number" name="calibration_days" placeholder="30"><br>
-    </fieldset>
 
-    <fieldset>
+        <i><b>Measurement Period</b></i><br>
-        <legend>Filter by Measurement Period</legend>
         From: <input type="date" name="date_from"><br>
         To: <input type="date" name="date_to"><br>
-    </fieldset>
 
-    <fieldset>
         <input type="submit" value="Apply Filters">
         <input type="reset" value="Reset Filters">
       </fieldset>
     </form>
+  </details>
+
+  <details>
+    <summary>Sorings</summary>
+    <form>
+      <fieldset>
+        <i><b>Sort Level 1</b></i><br>
+        <label for="sort1">Field:</label>
+        <select id="sort1" name="sort1">
+          <option value="">-- None --</option>
+          <option value="SensorID">SensorID</option>
+          <option value="Timestamp">Time</option>
+          <option value="BatteryLevel">BatteryLevel</option>
+          <option value="Temperature">Temperature</option>
+          <option value="Humidity">Humidity</option>
+        </select>
+        <label for="sort1_reverse"><input type="checkbox" id="sort1_reverse" name="sort1_reverse">
+          Reverse</label><br><br>
+
+        <i><b>Sort Level 2</b></i><br>
+        <label for="sort2">Field:</label>
+        <select id="sort2" name="sort2">
+          <option value="">-- None --</option>
+          <option value="SensorID">SensorID</option>
+          <option value="Timestamp">Time</option>
+          <option value="BatteryLevel">BatteryLevel</option>
+          <option value="Temperature">Temperature</option>
+          <option value="Humidity">Humidity</option>
+        </select>
+        <label for="sort2_reverse"><input type="checkbox" id="sort2_reverse" name="sort2_reverse">
+          Reverse</label><br><br>
+
+        <i><b>Sort Level 3</b></i><br>
+        <label for="sort3">Field:</label>
+        <select id="sort3" name="sort3">
+          <option value="">-- None --</option>
+          <option value="SensorID">SensorID</option>
+          <option value="Timestamp">Time</option>
+          <option value="BatteryLevel">BatteryLevel</option>
+          <option value="Temperature">Temperature</option>
+          <option value="Humidity">Humidity</option>
+        </select>
+        <label for="sort3_reverse"><input type="checkbox" id="sort3_reverse" name="sort3_reverse"> Reverse</label><br>
+      </fieldset>
+    </form>
+  </details>
+  <details>
+    <summary>Graph</summary>
+    <form>
+      <fieldset>
+        <i><b>X axis</b></i><br>
+        <input type="radio" id="x_time" name="x_axis" value="Time" checked>
+        <label for="x_time">Time</label><br>
+        <input type="radio" id="x_battery" name="x_axis" value="BatteryLevel">
+        <label for="x_battery">BatteryLevel</label><br>
+        <input type="radio" id="x_temperature" name="x_axis" value="Temperature">
+        <label for="x_temperature">Temperature</label><br>
+        <input type="radio" id="x_humidity" name="x_axis" value="Humidity">
+        <label for="x_humidity">Humidity</label><br>
+        <i><b>Values</b></i><br>
+        <input type="checkbox" id="val_temperature" name="values" value="Temperature" checked>
+        <label for="val_temperature">Temperature</label><br>
+        <input type="checkbox" id="val_humidity" name="values" value="Humidity">
+        <label for="val_humidity">Humidity</label><br>
+        <input type="checkbox" id="val_battery" name="values" value="BatteryLevel">
+        <label for="val_battery">BatteryLevel</label><br>
+        <button type="submit" id="build_graph" name="build_graph">Build</button>
+      </fieldset>
+    </form>
+  </details>
+
+
+
 
   <table class="data-table" border="1" cellpadding="5" cellspacing="0">
     <thead>