Using accentuated characters for room id breaks the card

[vlebourl]

Checklist

• I have updated the card to the latest version available
• I have cleared the cache of my browser
• I have checked if the problem is already reported

The problem

Using "Entrée" as a room id in the map_modes.predefined_selections.id breaks the card. Adding single or double quotes doesn't fix the issue.

What version of a card has described problem?

v2.2.2

What was the last working version card?

No response

What vacuum model do you have problems with?

Neato

Which integration do you use to control your vacuum (link)?

https://www.home-assistant.io/integrations/neato/

What browser (browsers/apps) does have this problem?

Chrome

What version of Home Assistant do you use?

Home Assistant 2023.10.5

What type of installation are you running?

Home Assistant OS

Card's configuration

type: custom:xiaomi-vacuum-map-card
title: Remora
entity: vacuum.remora
vacuum_platform: Neato
map_source:
  camera: camera.remora_cleaning_map
map_locked: true
icons:
  - icon: mdi:play
    conditions:
      - entity: vacuum.remora
        value_not: cleaning
      - entity: vacuum.remora
        value_not: error
      - entity: vacuum.remora
        value_not: returning
    tooltip: Start
    tap_action:
      action: call-service
      service: vacuum.start
      service_data:
        entity_id: vacuum.remora
  - icon: mdi:pause
    conditions:
      - entity: vacuum.remora
        value_not: docked
      - entity: vacuum.remora
        value_not: idle
      - entity: vacuum.remora
        value_not: error
      - entity: vacuum.remora
        value_not: paused
    tooltip: Pause
    tap_action:
      action: call-service
      service: vacuum.pause
      service_data:
        entity_id: vacuum.remora
  - icon: mdi:stop
    conditions:
      - entity: vacuum.remora
        value_not: docked
      - entity: vacuum.remora
        value_not: idle
      - entity: vacuum.remora
        value_not: error
      - entity: vacuum.remora
        value_not: paused
    tooltip: Stop
    tap_action:
      action: call-service
      service: vacuum.stop
      service_data:
        entity_id: vacuum.remora
  - icon: mdi:home-map-marker
    conditions:
      - entity: vacuum.remora
        value_not: docked
      - entity: vacuum.remora
        value_not: returning
    tooltip: Return to base
    tap_action:
      action: call-service
      service: vacuum.return_to_base
      service_data:
        entity_id: vacuum.remora
  - icon: mdi:target-variant
    conditions:
      - entity: vacuum.remora
        value_not: docked
      - entity: vacuum.remora
        value_not: error
      - entity: vacuum.remora
        value_not: cleaning
      - entity: vacuum.remora
        value_not: returning
    tooltip: Clean spot
    tap_action:
      action: call-service
      service: vacuum.clean_spot
      service_data:
        entity_id: vacuum.remora
  - icon: mdi:map-marker
    tooltip: Locate
    tap_action:
      action: call-service
      service: vacuum.locate
      service_data:
        entity_id: vacuum.remora
tiles:
  - tile_id: status
    entity: vacuum.remora
    label: Status
    attribute: status
    icon: mdi:robot-vacuum
    translations:
      starting: Starting
      charger disconnected: Charger disconnected
      idle: Idle
      remote control active: Remote control active
      cleaning: Cleaning
      returning home: Returning home
      manual mode: Manual mode
      charging: Charging
      charging problem: Charging problem
      paused: Paused
      spot cleaning: Spot cleaning
      error: Error
      shutting down: Shutting down
      updating: Updating
      docking: Docking
      going to target: Going to target
      zoned cleaning: Zoned cleaning
      segment cleaning: Segment cleaning
      emptying the bin: Emptying the bin
      charging complete: Charging complete
      device offline: Device offline
  - tile_id: battery_level
    entity: vacuum.remora
    label: Battery
    attribute: battery_level
    icon_source: vacuum.remora.attributes.battery_icon
    unit: '%'
  - tile_id: cleaned_area
    attribute: clean_area
    label: Cleaned area
    icon: mdi:texture-box
    unit: m²
    entity: vacuum.remora
    precision: 0
    translations: {}
map_modes:
  - name: Rooms
    icon: mdi:floor-plan
    run_immediately: false
    coordinates_rounding: true
    coordinates_to_meters_divider: 1000
    selection_type: ROOM
    max_selections: 999
    repeats_type: NONE
    max_repeats: 1
    service_call_schema:
      service: neato.custom_cleaning
      service_data:
        zone: '[[selection_unwrapped]]'
        entity_id: '[[entity_id]]'
    predefined_selections:
      - id: Salon
        outline:
          - - 230
            - 510
          - - 665
            - 510
          - - 665
            - 525
          - - 540
            - 525
          - - 540
            - 585
          - - 605
            - 585
          - - 605
            - 730
          - - 450
            - 730
          - - 450
            - 680
          - - 280
            - 680
          - - 280
            - 620
          - - 230
            - 620
        label:
          text: Salon
          x: 460
          'y': 600
          offset_y: 25
        icon:
          name: mdi:sofa-outline
          x: 460
          'y': 600
      - id: Entrée
        outline:
          - - 500
            - 510
          - - 665
            - 510
          - - 665
            - 240
          - - 565
            - 240
          - - 565
            - 270
          - - 500
            - 270
        label:
          text: Entrée
          x: 560
          'y': 380
          offset_y: 25
        icon:
          name: mdi:door-open
          x: 560
          'y': 380
      - id: Cuisine
        outline:
          - - 260
            - 300
          - - 390
            - 300
          - - 390
            - 260
          - - 500
            - 260
          - - 500
            - 500
          - - 260
            - 500
        label:
          text: Cuisine
          x: 350
          'y': 380
          offset_y: 25
        icon:
          name: mdi:countertop-outline
          x: 350
          'y': 380
    variables: {}
additional_presets: []

Javascript errors shown in the browser's console (if applicable)

xiaomi-vacuum-map-card.js?hacstag=193372044221:1222 Invalid room id: Entr&e

Additional information

I'm in France and my room is indeed labeled Entrée and not Entree... Any way to get it working?
Thanks so much!

[PiotrMachowski]

Room ids are also used as a part of CSS ids, so they can't contain any non-standard characters. I would need to sanitize the room ids to make it work. The quickest temporary workaround would be to rename the room, but if it's not possible then I can try to find out an another one.

[sca075]

Room ids are also used as a part of CSS ids, so they can't contain any non-standard characters. I would need to sanitize the room ids to make it work. The quickest temporary workaround would be to rename the room, but if it's not possible then I can try to find out an another one.

@PiotrMachowski I just implement the segments export from the camera the work around was proposed on the release note, in the case of Valetudo RE the id '16' isn't valid while 16 is.. we can later discuss for details via usual channels ;)

[PiotrMachowski]

@sca075 there is a separate attribute for handling this situation
Example:
https://github.com/PiotrMachowski/lovelace-xiaomi-vacuum-map-card/blob/master/src/model/generators/platform_templates/xiaomiMiio.json#L14

[sca075]

@PiotrMachowski wow great sorry if I didn't contact you earlier for that :) thank you so much I will patch it in few hours from now ;)