Webserver entity sorting (#3741)

Co-authored-by: Jesse Hills <3060199+jesserockz@users.noreply.github.com>

components/alarm_control_panel/index.rst

@@ -49,6 +49,7 @@ Configuration variables:
 - **on_chime** (*Optional*, :ref:`Action <config-action>`): An automation to perform
   when a zone has been marked as chime in the configuration, and it changes from closed to open. 
   See :ref:`alarm_control_panel_on_chime_trigger`.
+- If Webserver enabled, ``web_server_sorting_weight`` can be set. See :ref:`Webserver Entity Sorting <config-webserver-sorting>`.
 
 
 Automation:

components/binary_sensor/index.rst

@@ -74,6 +74,7 @@ Advanced options:
   for a list of available options.
   Set to ``""`` to remove the default entity category.
 - If MQTT enabled, all other options from :ref:`MQTT Component <config-mqtt-component>`.
+- If Webserver enabled, ``web_server_sorting_weight`` can be set. See :ref:`Webserver Entity Sorting <config-webserver-sorting>`.
 
 .. _binary_sensor-filters:
 

components/button/index.rst

@@ -59,6 +59,7 @@ Configuration variables:
 - **device_class** (*Optional*, string): The device class for the button.
   See https://www.home-assistant.io/integrations/button/#device-class
   for a list of available options.
+- If Webserver enabled, ``web_server_sorting_weight`` can be set. See :ref:`Webserver Entity Sorting <config-webserver-sorting>`.
 
 Automations:
 

components/climate/index.rst

@@ -127,6 +127,7 @@ MQTT options:
 - **target_humidity_command_topic** (*Optional*, string): The topic to receive
   target humidity commands on.
 - All other options from :ref:`MQTT Component <config-mqtt-component>`.
+- If Webserver enabled, ``web_server_sorting_weight`` can be set. See :ref:`Webserver Entity Sorting <config-webserver-sorting>`.
 
 Climate Automation
 ------------------

components/cover/index.rst

@@ -63,6 +63,7 @@ MQTT options:
 - **tilt_command_topic** (*Optional*, string): The topic to receive
   cover tilt commands on.
 - All other options from :ref:`MQTT Component <config-mqtt-component>`.
+- If Webserver enabled, ``web_server_sorting_weight`` can be set. See :ref:`Webserver Entity Sorting <config-webserver-sorting>`.
 
 
 .. _cover-open_action:

components/datetime/index.rst

@@ -49,6 +49,7 @@ Configuration variables:
   Set to ``""`` to remove the default entity category.
 - **time_id** (**Required**, :ref:`config-id`): The ID of the time entity. Automatically set
   to the ID of a time component if only a single one is defined.
+- If Webserver enabled, ``web_server_sorting_weight`` can be set. See :ref:`Webserver Entity Sorting <config-webserver-sorting>`.
 
 MQTT Options:
 

components/fan/index.rst

@@ -70,6 +70,7 @@ MQTT options:
 - **speed_command_topic** (*Optional*, string): The topic to receive
   speed commands on (options: LOW, MEDIUM, HIGH).
 - All other options from :ref:`MQTT Component <config-mqtt-component>`.
+- If Webserver enabled, ``web_server_sorting_weight`` can be set. See :ref:`Webserver Entity Sorting <config-webserver-sorting>`.
 
 Automation triggers:
 

components/light/index.rst

@@ -83,6 +83,7 @@ Advanced options:
   for a list of available options.
   Set to ``""`` to remove the default entity category.
 - If MQTT enabled, all other options from :ref:`MQTT Component <config-mqtt-component>`.
+- If Webserver enabled, ``web_server_sorting_weight`` can be set. See :ref:`Webserver Entity Sorting <config-webserver-sorting>`.
 
 .. _light-toggle_action:
 

components/lock/index.rst

@@ -44,6 +44,7 @@ Configuration variables:
   See https://developers.home-assistant.io/docs/core/entity/#generic-properties
   for a list of available options. Set to ``""`` to remove the default entity category.
 - If MQTT enabled, All other options from :ref:`MQTT Component <config-mqtt-component>`.
+- If Webserver enabled, ``web_server_sorting_weight`` can be set. See :ref:`Webserver Entity Sorting <config-webserver-sorting>`.
 
 .. _lock-lock_action:
 

components/number/index.rst

@@ -57,6 +57,7 @@ Configuration variables:
 - **device_class** (*Optional*, string): The device class for the number.
   See https://www.home-assistant.io/integrations/number/#device-class
   for a list of available options.
+- If Webserver enabled, ``web_server_sorting_weight`` can be set. See :ref:`Webserver Entity Sorting <config-webserver-sorting>`.
 
 Automations:
 
@@ -69,6 +70,7 @@ MQTT Options:
 
 - All other options from :ref:`MQTT Component <config-mqtt-component>`.
 
+
 Number Automation
 -----------------
 

components/select/index.rst

@@ -48,6 +48,7 @@ Configuration variables:
   See https://developers.home-assistant.io/docs/core/entity/#generic-properties
   for a list of available options.
   Set to ``""`` to remove the default entity category.
+- If Webserver enabled, ``web_server_sorting_weight`` can be set. See :ref:`Webserver Entity Sorting <config-webserver-sorting>`.
 
 Automations:
 

components/sensor/index.rst

@@ -73,6 +73,7 @@ Configuration variables:
   See https://developers.home-assistant.io/docs/core/entity/#generic-properties
   for a list of available options.
   Set to ``""`` to remove the default entity category.
+- If Webserver enabled, ``web_server_sorting_weight`` can be set. See :ref:`Webserver Entity Sorting <config-webserver-sorting>`.
 
 Automations:
 

components/switch/index.rst

@@ -68,6 +68,7 @@ Configuration variables:
   See https://www.home-assistant.io/integrations/switch/#device-class
   for a list of available options.
 - If MQTT enabled, All other options from :ref:`MQTT Component <config-mqtt-component>`.
+- If Webserver enabled, ``web_server_sorting_weight`` can be set. See :ref:`Webserver Entity Sorting <config-webserver-sorting>`.
 
 .. _switch-toggle_action:
 

components/text/index.rst

@@ -50,6 +50,7 @@ Configuration variables:
   for a list of available options. Set to ``""`` to remove the default entity category.
 - **mode** (**Required**, string): Defines how the text should be displayed in the frontend.
   One of ``text`` or ``password``.
+- If Webserver enabled, ``web_server_sorting_weight`` can be set. See :ref:`Webserver Entity Sorting <config-webserver-sorting>`.
 
 Automations:
 

components/text_sensor/index.rst

@@ -47,6 +47,7 @@ Configuration variables:
   for a list of available options.
   Set to ``""`` to remove the default entity category.
 - If MQTT enabled, All other options from :ref:`MQTT Component <config-mqtt-component>`.
+- If Webserver enabled, ``web_server_sorting_weight`` can be set. See :ref:`Webserver Entity Sorting <config-webserver-sorting>`.
 
 Automations:
 

components/web_server.rst

@@ -16,7 +16,6 @@ will take up *a lot* of memory and may decrease stability, especially on ESP8266
 
     Web server version 1
 
-
 .. figure:: /components/images/web_server-v2.png
     :align: center
     :width: 86.0%
@@ -24,6 +23,13 @@ will take up *a lot* of memory and may decrease stability, especially on ESP8266
     Web server version 2
 
 
+.. figure:: /components/images/web_server-v3.png
+    :align: center
+    :width: 86.0%
+
+    Web server version 3
+
+    
 To navigate to the web server in your browser, either use the IP address of the node or
 use ``<node_name>.local/`` (note the trailing forward slash) via mDNS.
 
@@ -136,6 +142,26 @@ V2 embeds the css within the js file so is not required, however you could inclu
 
 Copy https://oi.esphome.io/v2/www.js to a V2 folder in your yaml folder.
 
+.. _config-webserver-sorting:
+
+Entity sorting
+--------------
+
+``web_server`` version 3 supports the sorting of the entitys.
+You can set a ``web_server_sorting_weight`` on each entity.
+Smaller numbers will be displayed first, defaults to 50.
+Example ``sensor`` configuration.
+``My Sensor 2`` is displayed first, then ``My Sensor 1``
+
+.. code-block:: yaml
+
+    sensor:
+      - platform: template
+        name: "My Sensor 1"
+        web_server_sorting_weight: 10
+      - platform: template
+        name: "My Sensor 2"
+        web_server_sorting_weight: -1
 
 See Also
 --------