[web_server] v3 entity grouping

[RFDarter]

What does this implement/fix?

Adds the possibility to group the entitys displayed on the web_server and order the groups

You need to specify the groups on the web_server component

web_server:
  version: 3
  sorting_groups:
    - id: group_1
      name: "Group 1 Diplayed Last"
      sorting_weight: 40
    - id: group_2
      name: "Group 2 Displayed Third"
      sorting_weight: 30
    - id: group_3
      name: "Group 3 Displayed Second"
      sorting_weight: 20
    - id: group_4
      name: "Group 4 Displayed First"
      sorting_weight: 10

and on the component you wish to group you need to provide the group id

(esphome/esphome-webserver#102)

Types of changes

• Bugfix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Other

Related issue or feature (if applicable): fixes

Pull request in esphome-docs with documentation (if applicable): esphome/esphome-docs#3905

Test Environment

• ESP32
• ESP32 IDF
• ESP8266
• RP2040
• BK72xx
• RTL87xx

Example entry for config.yaml:

esphome:
  name: "sorting-test"

esp32:
  board: wemos_d1_mini32

wifi:
  ssid: !secret wifi_ssid
  password: !secret wifi_password

logger:
  level: DEBUG

web_server:
  version: 2
  sorting_groups:
    - id: group_1
      name: "Group 1"
      sorting_weight: 40
    - id: group_2
      name: "Group 2"
      sorting_weight: 30
    - id: group_3
      name: "Group 3"
      sorting_weight: 20
    - id: group_4
      name: "Group 4"
      sorting_weight: 10
time:
  - platform: sntp
    id: my_time

output:
  - platform: template
    id: output_component1
    type: float
    write_action:
      logger.log: "Nothing"

text_sensor:
  - platform: template
    name: "Template Text Sensor -10"
    lambda: |-
      return {"Hello World  and some craaaaaazy loooooooooooong text"};
    web_server:
      sorting_group: group_2
      sorting_weight: -10

text:
  - platform: template
    name: "My Text -9"
    mode: text
    optimistic: True
    web_server:
      sorting_weight: -9
      sorting_group: group_2

select:
  - platform: template
    name: "My select -5"
    optimistic: true
    options:
      - one
      - two
      - three
    initial_option: two
    web_server:
      sorting_weight: -5
      sorting_group: group_1

lock:
  - platform: template
    name: "My Lock -4"
    optimistic: True
    web_server:
      sorting_group: group_1
      sorting_weight: -4

light:
  - platform: monochromatic
    name: "Kitchen Lights -3"
    output: output_component1
    web_server:
      sorting_weight: -3
      sorting_group: group_3

fan:
  - platform: template
    name: "My Fan -2"
    web_server:  
      sorting_weight: -2
      sorting_group: group_3

switch:
  - platform: template
    name: "My Switch 1  and some craaaaaaaaaazy loooooooooooooooooong name -7"
    id: template_switch1
    optimistic: true
    web_server:
      sorting_weight: -7
      sorting_group: group_4
  - platform: template
    name: "My Switch 2 -8"
    id: template_switch2
    optimistic: true
    web_server:
      sorting_weight: -8
      sorting_group: group_4

sensor:
  - platform: template
    name: "My Sensor -6"
    id: template_sensor1
    lambda: |-
      if (millis() > 10000) {
        return 42.0;
      } else {
        return 0.0;
      }
    update_interval: 60s
    web_server:
      sorting_weight: -6
      sorting_group: group_4

climate:
  - platform: bang_bang
    name: Bang Bang Climate 0
    sensor: template_sensor1
    humidity_sensor: template_sensor1
    default_target_temperature_low: 18°C
    default_target_temperature_high: 24°C
    idle_action:
      - switch.turn_on: template_switch1
    cool_action:
      - switch.turn_on: template_switch2
    heat_action:
      - switch.turn_on: template_switch1
    away_config:
      default_target_temperature_low: 16°C
      default_target_temperature_high: 20°C
    web_server:
      sorting_weight: 0
      sorting_group: group_4

cover:
  - platform: template
    name: "My Cover -1"
    web_server:
      sorting_weight: -1
      

button:
  - platform: template
    name: "My Button 4"
    web_server:
      sorting_weight: 4

binary_sensor:
  - platform: template
    name: "My Binary Sensor 3"
    web_server:
      sorting_weight: 3

alarm_control_panel:
  - platform: template
    name: "My Alarm Control Panel 2"
    web_server:
      sorting_weight: 2

number:
  - platform: template
    name: "My Number 1"
    min_value: 0
    max_value: 100
    step: 1
    mode: slider
    optimistic: True
    initial_value: 2
    web_server:
      sorting_weight: 1

datetime:
  - platform: template
    id: my_datetime_date
    type: date
    name: "Pick a Date 22"
    optimistic: yes
    initial_value: "2024-01-30"
    restore_value: true
    web_server:
      sorting_weight: 22

  - platform: template
    id: my_datetime_time
    type: time
    name: "Pick a Time 23"
    optimistic: yes
    initial_value: "12:34:56"
    restore_value: true
    web_server:
      sorting_weight: 23

  - platform: template
    id: my_datetime_datetime
    type: datetime
    name: "Pick a Datetime 24"
    optimistic: yes
    initial_value: "2024-04-23 13:45"
    restore_value: true
    web_server:
      sorting_weight: 24

Checklist:

• The code change is tested and works locally.
• Tests have been added to verify that the new code works (under tests/ folder).

If user exposed functionality or configuration variables are added/changed:

• Documentation added/updated in esphome-docs.

[codecov-commenter]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 54.01%. Comparing base (4d8b5ed) to head (47f3956).
Report is 1391 commits behind head on dev.

Additional details and impacted files

@@            Coverage Diff             @@
##              dev    #6833      +/-   ##
==========================================
+ Coverage   53.70%   54.01%   +0.30%     
==========================================
  Files          50       50              
  Lines        9408     9694     +286     
  Branches     1654     1711      +57     
==========================================
+ Hits         5053     5236     +183     
- Misses       4056     4127      +71     
- Partials      299      331      +32     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[martijnbuts]

How can I test this before it is merged in dev?

[RFDarter]

You would need to download this PR or the branch of my fork, create a python venv and run esphome run/build from that venv.
You would also need to specify the js url in the web_server config

web_server:
  js_url: https://deploy-preview-102--esphome-webserver.netlify.app/v3/www.js

[esphome]

Please take a look at the requested changes, and use the Ready for review button when you are done, thanks 👍

Learn more about our pull request process.