[web_server] grouping (#3905)

components/alarm_control_panel/index.rst

@@ -50,8 +50,8 @@ 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 and version 3 is selected, All other options from Webserver Component.. See :ref:`Webserver Version 3 <config-webserver-version-3-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>`.
 
 
 Automation:

components/binary_sensor/index.rst

@@ -75,7 +75,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>`.
+- If Webserver enabled and version 3 is selected, All other options from Webserver Component.. See :ref:`Webserver Version 3 <config-webserver-version-3-options>`.
 
 .. _binary_sensor-filters:
 

components/button/index.rst

@@ -60,7 +60,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>`.
+- If Webserver enabled and version 3 is selected, All other options from Webserver Component.. See :ref:`Webserver Version 3 <config-webserver-version-3-options>`.
 
 Automations:
 

components/climate/index.rst

@@ -86,6 +86,7 @@ Advanced options:
   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 and version 3 is selected, All other options from Webserver Component.. See :ref:`Webserver Version 3 <config-webserver-version-3-options>`.
 
 MQTT options:
 
@@ -128,7 +129,6 @@ 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

@@ -52,6 +52,8 @@ Advanced options:
   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 and version 3 is selected, All other options from Webserver Component.. See :ref:`Webserver Version 3 <config-webserver-version-3-options>`.
+
 
 MQTT options:
 
@@ -64,7 +66,6 @@ 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

@@ -50,7 +50,7 @@ Configuration variables:
   Set to ``""`` to remove the default entity category.
 - **time_id** (**Optional**, :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. Required if ``on_time`` is used.
-- If Webserver enabled, ``web_server_sorting_weight`` can be set. See :ref:`Webserver Entity Sorting <config-webserver-sorting>`.
+- If Webserver enabled and version 3 is selected, All other options from Webserver Component.. See :ref:`Webserver Version 3 <config-webserver-version-3-options>`.
 
 MQTT Options:
 

components/fan/index.rst

@@ -55,6 +55,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 and version 3 is selected, All other options from Webserver Component.. See :ref:`Webserver Version 3 <config-webserver-version-3-options>`.
 
 MQTT options:
 
@@ -71,7 +72,6 @@ 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

@@ -82,7 +82,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>`.
+- If Webserver enabled and version 3 is selected, All other options from Webserver Component.. See :ref:`Webserver Version 3 <config-webserver-version-3-options>`.
 
 .. _light-toggle_action:
 

components/lock/index.rst

@@ -45,7 +45,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>`.
+- If Webserver enabled and version 3 is selected, All other options from Webserver Component.. See :ref:`Webserver Version 3 <config-webserver-version-3-options>`.
 
 .. _lock-lock_action:
 

components/number/index.rst

@@ -58,7 +58,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>`.
+- If Webserver enabled and version 3 is selected, All other options from Webserver Component.. See :ref:`Webserver Version 3 <config-webserver-version-3-options>`.
 
 Automations:
 

components/select/index.rst

@@ -49,7 +49,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>`.
+- If Webserver enabled and version 3 is selected, All other options from Webserver Component.. See :ref:`Webserver Version 3 <config-webserver-version-3-options>`.
 
 Automations:
 

components/sensor/index.rst

@@ -73,7 +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>`.
+- If Webserver enabled and version 3 is selected, All other options from Webserver Component.. See :ref:`Webserver Version 3 <config-webserver-version-3-options>`.
 
 Automations:
 

components/switch/index.rst

@@ -69,7 +69,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>`.
+- If Webserver enabled and version 3 is selected, All other options from Webserver Component.. See :ref:`Webserver Version 3 <config-webserver-version-3-options>`.
 
 .. _switch-toggle_action:
 

components/text/index.rst

@@ -50,7 +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>`.
+- If Webserver enabled and version 3 is selected, All other options from Webserver Component.. See :ref:`Webserver Version 3 <config-webserver-version-3-options>`.
 
 Automations:
 

components/text_sensor/index.rst

@@ -48,7 +48,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>`.
+- If Webserver enabled and version 3 is selected, All other options from Webserver Component.. See :ref:`Webserver Version 3 <config-webserver-version-3-options>`.
 
 Automations:
 

components/update/index.rst

@@ -38,8 +38,8 @@ Configuration variables:
 - **icon** (*Optional*, icon): The icon to use for the update entity in the frontend.
 - **internal** (*Optional*, boolean): Mark this component as internal. Internal components will
   not be exposed to the frontend (like Home Assistant). Specifying an ``id`` without a ``name`` will
-  implicitly set this to true.
 - **on_update_available** (*Optional*, :ref:`Action <config-action>`): An automation to perform when an update is available.
+- If Webserver enabled and version 3 is selected, All other options from Webserver Component.. See :ref:`Webserver Version 3 <config-webserver-version-3-options>`.
 
 Automations
 -----------

components/valve/index.rst

@@ -50,6 +50,7 @@ Advanced options:
   (usually Home Assistant) without the user manually enabling it (via the Home Assistant UI). Defaults to ``false``.
 - **entity_category** (*Optional*, string): The category of the entity. 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 and version 3 is selected, All other options from Webserver Component.. See :ref:`Webserver Version 3 <config-webserver-version-3-options>`.
 
 MQTT options:
 

components/web_server.rst

@@ -71,6 +71,11 @@ Configuration variables:
 - **id** (*Optional*, :ref:`config-id`): Manually specify the ID used for code generation.
 - **local** (*Optional*, boolean): Include supporting javascript locally allowing it to work without internet access. Defaults to ``false``.
 - **version** (*Optional*, string): ``1``, ``2`` or ``3``. Version 1 displays as a table. Version 2 uses web components and has more functionality. Version 3 uses HA-Styling. Defaults to ``2``.
+- **sorting_groups**  (*Optional*, list): Avaliable only on ``version: 3``. A list of group ID's and names to group the entities. See :ref:`Webserver Entity Grouping <config-webserver-grouping>`.
+  
+  - **id** (*Required*, :ref:`config-id`): Manually specify the ID used for the group.
+  - **name** (*Required*, string): A string representing the group name which is displayed as the header of the group
+  - **sorting_weight** (*Optional*, float) A float representing the weight of the group. A group with a smaler ``sorting_weight`` will be displayed first. Defaults to ``50``
 
 To conserve flash size, the CSS and JS files used on the root page to show a simple user
 interface are hosted by esphome.io. If you want to use your own service, use the
@@ -149,6 +154,68 @@ Copy https://oi.esphome.io/v2/www.js to a V2 folder in your yaml folder.
 Version 3 features
 ---------------------------
 
+
+.. _config-webserver-sorting:
+
+Entity sorting
+**************
+
+Version `3` supports the sorting of the entities.
+You can set a ``sorting_weight`` on each entity.
+Smaller numbers will be displayed first, defaults to 50.
+``My Sensor 2`` is displayed before ``My Sensor 1``
+
+Example configuration:
+
+.. 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
+
+
+.. _config-webserver-grouping:
+
+Entity grouping
+***************
+
+Version `3` of the ``web_server`` allows for grouping of entities in custom groups.
+Groups can be sorted by providing a ``sorting_weight``. Groups with a smaller ``sorting_weight`` will be displayed first.
+If you don't provide a ``web_server_sorting_group`` on the component, the ``entity_category`` will be used as the group.
+
+Example configuration:
+
+.. code-block:: yaml
+
+    web_server:
+      version: 3
+      sorting_groups:
+        - id: sorting_group_time_settings
+          name: "Time Settings"
+          sorting_weight: 10
+        - id: sorting_group_number_settings
+          name: "Number settings"
+          sorting_weight: 20
+          
+    datetime:
+      - platform: template
+        ...
+        web_server:
+          sorting_group_id: sorting_group_time_settings
+
+    number:
+      - platform: template
+      ...
+        web_server:
+          sorting_group_id: sorting_group_number_settings
+
+
 Number in slider mode
 *********************
 .. figure:: /components/images/web_server/number-slider-popup.png
@@ -196,27 +263,6 @@ Sensor value graph
 
 By clicking on any sensor it will expand a graph with the historical values for that sensor.
 
-.. _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
 --------