search

nervetattoo / simple-thermostat

A different take on the thermostat card for Home Assistant ♨️
MIT License
749 stars 111 forks source link

UI Editor Not working any more #233

Closed KNXBroker closed 3 years ago

KNXBroker commented 3 years ago

Hello, since 2.0.0 the ui editor is not working anymore. Changes are not stored. Configuration can only be done via YAML.

I'm wondering why this issue has not already been posted, did I oversee any note / comment / hint?

Thank you, great card.

Screenshot_20210408-060532

KNXBroker commented 3 years ago

I have some additional information: Changing things in YAML mode are shown in UI editor when switching back to UI editor, but not the other way round: Changing things in UI editor or not shown in YAML mode.

Furthermore I have recognized that the card configuration does not show "SAVE" when changing things in UI editor only.

KNXBroker commented 3 years ago

And again some information: Just saw that there are some strange errors in the logs . Don't know if this is linked to the problem.

Logger: frontend.js.latest.202104071
Source: components/system_log/__init__.py:190
First occurred: 20:46:48 (9 occurrences)
Last logged: 20:48:45

http://192.168.178.xx:8123/hacsfiles/simple-thermostat/simple-thermostat.js:285:18684 Uncaught TypeError: Cannot assign to read only property 'name' of object '#<Object>'
http://192.168.178.xx:8123/hacsfiles/simple-thermostat/simple-thermostat.js:285:18684 Uncaught TypeError: Cannot assign to read only property 'step' of object '#<Object>'
nervetattoo commented 3 years ago

Weird. Can you make sure your browser cache gets cleared? It sounds like you are using a cached old version of the editor. I just tested editing and it worked fine for me.

techguydave commented 3 years ago

I'm running into this issue as well. I'm using 2.2.1 which I just upgraded to as part of my troubleshooting, but I had this problem on 2.0.0 as well. I'm on HA 2021.4.0.

Logger: frontend.js.latest.202104071
Source: components/system_log/__init__.py:190
First occurred: 6:44:52 PM (149 occurrences)
Last logged: 7:39:30 PM

http://<URL>/hacsfiles/simple-thermostat/simple-thermostat.js:285:18838 TypeError: can't define property "header": Object is not extensible
http://<URL>/hacsfiles/simple-thermostat/simple-thermostat.js:285:18679 TypeError: can't define property "entity": Object is not extensible
http://<URL>/hacsfiles/simple-thermostat/simple-thermostat.js:285:19879 TypeError: "decimals" is read-only
http://<URL>/hacsfiles/simple-thermostat/simple-thermostat.js:285:19879 TypeError: "step_size" is read-only
http://<URL>/hacsfiles/simple-thermostat/simple-thermostat.js:285:19854 TypeError: can't define property "header": Object is not extensible
nervetattoo commented 3 years ago

Do you edit existing cards or add new? Yesterday I tested adding a new card and changing every option in the editor. Does this error happen when you open the editor, or when you type/edit something? Click on something? Did you try to manually clear your browser cache?

KNXBroker commented 3 years ago

Just updated to 2.2.1, issue is still there. I have already cleared the cache of my PC, it was the first thing I have tried. Today I even have reinstalled Home assistant App, issue is still there :-(

KNXBroker commented 3 years ago

Modifing or creating a new card doesn't matter. The only steps I have done with a new card: Add Card --> Select simple thermostat --> select entity --> save

Result: 

You need to define an entity
type: 'custom:simple-thermostat'

Strange....

nervetattoo commented 3 years ago

Weeeeird. And when you open that config, try to view it as yaml, how does it look? Do you do this in the HA App or in a browser?

KNXBroker commented 3 years ago

Here is the result of the steps described above:

type: 'custom:simple-thermostat'

I have written some text in every UI editor field --> same behaviour. I have uninstalled and reinstalled the component --> some behaviour.

Here a new log:

http://192.168.178.xx:8123/hacsfiles/simple-thermostat/simple-thermostat.js:285:19867 Uncaught TypeError: Cannot add property header, object is not extensible
http://192.168.178.xx:8123/hacsfiles/simple-thermostat/simple-thermostat.js:285:19886 Uncaught TypeError: Cannot add property fallback, object is not extensible
http://192.168.178.xx:8123/hacsfiles/simple-thermostat/simple-thermostat.js:285:19886 Uncaught TypeError: Cannot add property decimals, object is not extensible
http://192.168.178.xx:8123/hacsfiles/simple-thermostat/simple-thermostat.js:285:19886 Uncaught TypeError: Cannot add property step_size, object is not extensible
http://192.168.178.xx:8123/hacsfiles/simple-thermostat/simple-thermostat.js:285:19886 Uncaught TypeError: Cannot add property unit, object is not extensible
nervetattoo commented 3 years ago

So you are editing using the Android mobile app, or? What device? Unless someone else pipes in with the same issue I figure this might be down to the HA App / device type. Its possible that its down to a difference in the JS runtime in the browser you are using. Do you see the same error on mobile and on a computer?

techguydave commented 3 years ago

I was seeing this issue in Firefox on the desktop. I'll provide more info when I'm back at the computer.

KNXBroker commented 3 years ago

Could it be a language issue? I'm German I have switched HASS language to English, but this did not help. I have the issue on my pc and on my android phone.

On the pc error is always the same:

New card on windows 10 with Microsoft Edge Version 89.0.774.75 (Offizielles Build) (64-Bit)

Logger: frontend.js.latest.202104072
Source: components/system_log/__init__.py:190
First occurred: 6:48:16 (1 occurrences)
Last logged: 6:48:16

http://192.168.178.xx:8123/hacsfiles/simple-thermostat/simple-thermostat.js:285:19886 Uncaught TypeError: Cannot add property entity, object is not extensible

New card on windows 10 with Google Chrome Version 89.0.4389.114 (Offizieller Build) (64-Bit)

Logger: frontend.js.latest.202104072
Source: components/system_log/__init__.py:190
First occurred: 6:51:49 (1 occurrences)
Last logged: 6:51:49

http://192.168.178.xx:8123/hacsfiles/simple-thermostat/simple-thermostat.js:285:19886 Uncaught TypeError: Cannot add property entity, object is not extensible
nervetattoo commented 3 years ago

Starting in v2.2.2 I also publish a simple-thermostat.debug.js that is not minified. That means the error code will point to a line number that is more readable, and might be a pointer as to where the error actually happens.

Unfortunately you need to manually download and overwrite the file with this debug file to install it. Could you test it and see what line number it errs on?

KNXBroker commented 3 years ago

I'm not sure if I understood it correct, I have:

Result after creating a new card with entity only:

Logger: frontend.js.latest.202104073
Source: components/system_log/__init__.py:190
First occurred: 21:51:50 (1 occurrences)
Last logged: 21:51:50

http://192.168.178.xx:8123/hacsfiles/simple-thermostat/simple-thermostat.js:2818:13 Uncaught TypeError: Cannot add property entity, object is not extensible
nervetattoo commented 3 years ago

You understood perfectly 👍 Now I at least know exactly where the error happens in the code.

KNXBroker commented 3 years ago

Issue still there with V2.2.3 :-(

For your information, I'm using HASS on the following:

Home Assistant OS 5.13 64 Bit version
Supervisor-2021.03.9
Docker-Version 19.03.15
Board rpi4

I have tested the card on a friend's installation (same hardware / installation): same issue. @synth3tk: Which hardware / installation method are you using? Same / similar?

Furthermore I have reflashed my card today: same issue

techguydave commented 3 years ago

2.3.1 didn't solve it for me as well. Still getting the same read-only and "not extensible" errors.

Home Assistant OS 5.13
supervisor-2021.03.9
core-2021.4.1

Running as a VM in Proxmox.

nervetattoo commented 3 years ago

I did remove some errors I finally managed to reproduce in Chrome myself. Curious to hear if this helps your cases

techguydave commented 3 years ago

Same errors on 2.3.2. Tried both editing the existing card and adding a new card.

image

nervetattoo commented 3 years ago

Yeah, expected as much. I can't for the life of me reproduce that error :rage4:

KNXBroker commented 3 years ago

Unforntunately V2.3.2 did neither fix the issue for me 😢

techguydave commented 3 years ago

Ok, update: I can now make changes in the YAML that are accurately reflected. So it appears you solved part of it, but the UI configuration is still broken.

bsp9493 commented 3 years ago

same issue for me, plus one other

I have a toggle_entity defined. this would normally place a small switch in the top right corner of my card. this is NOT being displayed.

`toggle_entity: entity_id: switch.pentair_ec_60_dd_pool name: master

thanx in advance

bsp9493 commented 3 years ago

one addition if it helps... just noticed this in my logs

`Logger: frontend.js.latest.202104073 Source: components/system_log/init.py:190 First occurred: 10:06:51 AM (26 occurrences) Last logged: 10:13:15 AM

http://homeassistant.local:8123/hacsfiles/simple-thermostat/simple-thermostat.js:285:61511 TypeError: Attempted to assign to readonly property. http://homeassistant.local:8123/hacsfiles/simple-thermostat/simple-thermostat.js:285:61495 TypeError: Attempted to assign to readonly property. http://homeassistant.local:8123/hacsfiles/simple-thermostat/simple-thermostat.js:285:61570 TypeError: Attempted to assign to readonly property. http://homeassistant.local:8123/hacsfiles/simple-thermostat/simple-thermostat.js:285:61554 TypeError: Attempted to assign to readonly property.`

nervetattoo commented 3 years ago

I've still not been able to reproduce this bug myself, which is highly frustrating. But, I did notice that the same problem have been reported across multiple other cards historically so there might be something related to how the card edit UI works in HA I need to look into. Only half of the editor comes from code in the custom card, the rest is built into HA.

Anyways, I'm still investigating this issue from time to time and do intend to get it fixed eventually. Feel free to keep reporting new incidents 👍

techguydave commented 3 years ago

No worries, take your time!

Matt-PMCT commented 3 years ago

Fresh install here and I get the following error in my Home Assistant Logs: "https://192.168.4.13:8123/hacsfiles/simple-thermostat/simple-thermostat.js:285:33489 TypeError: can't define property "entity": Object is not extensible" When I select an entity it does nothing: image

And this is what it looks like when I switch to YAML: image

Changes in the UI editor just don't seem to do anything, no YAML is every produced.

stefangehn commented 3 years ago

Using HA 2021.4.5 and simple-thermostat 2.4.0 I get the following behavior.

Adding a new card in the UI and selecting one of my thermostats in the UI yields this in the Firefox JS Console:

Uncaught TypeError: can't define property "entity": Object is not extensible
    valueChanged simple-thermostat.js:285
    valueChanged simple-thermostat.js:285
    handleEvent simple-thermostat.js:1
    __boundHandleEvent simple-thermostat.js:1
    i app.ebe75b7a.js:12795
    value chunk.c51de79f5e4ee70befb0.js:336
simple-thermostat.js:285:33489

In addition the following is visible in homeassistant logs:

[frontend.js.latest.202104073] http://homeassistant.local:8123/local/simple-thermostat.js?v=2.4.0:285:33489 TypeError: can't define property "entity": Object is not extensible

I guess for the JS part I'd need a non-minified version to provide a more useful backtrace, line 285 is the entire JS code in one line. I'll try to built it locally and see if my limited JS knowledge can provide anything.

JS error when using the unminified debug version:

Uncaught TypeError: can't define property "entity": Object is not extensible
    setValue simple-thermostat.debug.js:2887
    valueChanged simple-thermostat.debug.js:3085
    handleEvent simple-thermostat.debug.js:1114
    __boundHandleEvent simple-thermostat.debug.js:1080
    i app.ebe75b7a.js:12795
    value chunk.c51de79f5e4ee70befb0.js:336
    setTimeout handler*value chunk.c51de79f5e4ee70befb0.js:336
    value chunk.c51de79f5e4ee70befb0.js:336
    handleEvent app.ebe75b7a.js:12795
    __boundHandleEvent app.ebe75b7a.js:12795
    x app.ebe75b7a.js:12795
    E app.ebe75b7a.js:12795
    w app.ebe75b7a.js:12795
    _propertiesChanged app.ebe75b7a.js:12795
    _propertiesChanged app.ebe75b7a.js:12795
    _flushProperties app.ebe75b7a.js:12795
    _flushProperties app.ebe75b7a.js:12795
    _invalidateProperties app.ebe75b7a.js:12795
    _setProperty app.ebe75b7a.js:12795
    set app.ebe75b7a.js:12795
    _selectedItemChanged chunk.4c4fdc744fc4f182a8e7.js:467
    R app.ebe75b7a.js:12795
    w app.ebe75b7a.js:12795
    _ app.ebe75b7a.js:12795
    _propertiesChanged app.ebe75b7a.js:12795
    _flushProperties app.ebe75b7a.js:12795
    _flushProperties app.ebe75b7a.js:12795
    _invalidateProperties app.ebe75b7a.js:12795
    _setProperty app.ebe75b7a.js:12795
    set app.ebe75b7a.js:12795
    _onClosed chunk.4c4fdc744fc4f182a8e7.js:467
    _openedChanged chunk.4c4fdc744fc4f182a8e7.js:467
    A app.ebe75b7a.js:12795
    w app.ebe75b7a.js:12795
    _ app.ebe75b7a.js:12795
    _propertiesChanged app.ebe75b7a.js:12795
    _flushProperties app.ebe75b7a.js:12795
    _flushProperties app.ebe75b7a.js:12795
    _invalidateProperties app.ebe75b7a.js:12795
    _setProperty app.ebe75b7a.js:12795
    set app.ebe75b7a.js:12795
    close chunk.4c4fdc744fc4f182a8e7.js:467
    _overlaySelectedItemChanged chunk.4c4fdc744fc4f182a8e7.js:467
    _onItemClick chunk.4c4fdc744fc4f182a8e7.js:4316
    n app.ebe75b7a.js:12795
    _addEventListenerToNode app.ebe75b7a.js:12795
    _addEventListenerToNode app.ebe75b7a.js:12795
    _addEventListenerToNode app.ebe75b7a.js:12795
    _addMethodEventListenerToNode app.ebe75b7a.js:12795
    p app.ebe75b7a.js:12795
    _stampTemplate app.ebe75b7a.js:12795
    _stampTemplate app.ebe75b7a.js:12795
    p app.ebe75b7a.js:12795
    n app.ebe75b7a.js:12795
    s app.ebe75b7a.js:12795
    stamp app.ebe75b7a.js:12795
    _createPool chunk.4c4fdc744fc4f182a8e7.js:2095
    _increasePoolIfNeeded chunk.4c4fdc744fc4f182a8e7.js:2095
    _render chunk.4c4fdc744fc4f182a8e7.js:2095
    flush app.ebe75b7a.js:12795
    o app.ebe75b7a.js:12795
    s app.ebe75b7a.js:12795
    _onOpened chunk.4c4fdc744fc4f182a8e7.js:467
    _openedChanged chunk.4c4fdc744fc4f182a8e7.js:4069
    A app.ebe75b7a.js:12795
    w app.ebe75b7a.js:12795
    _ app.ebe75b7a.js:12795
    _propertiesChanged app.ebe75b7a.js:12795
    _flushProperties app.ebe75b7a.js:12795
    _flushProperties app.ebe75b7a.js:12795
    _invalidateProperties app.ebe75b7a.js:12795
    _setProperty app.ebe75b7a.js:12795
    set app.ebe75b7a.js:12795
    _openedChanged chunk.4c4fdc744fc4f182a8e7.js:4316
stefangehn commented 3 years ago

After a bit of digging it looks like commit 7f66a551f67ce85e02130f127ead8488a1e5fa58 changed the way adding properties to this.config in the editor is done. The old code reassigned the config object, extending it with the new property, i.e. this.config = { ...this.config, [key]: value }. The new setValue() function rather uses o[key] = value which does not appear to workand leads to the "cannot be extended" error message.

Since setValue supports nested config options while the old code only supported flat properties on the config object and my JS is still rather limited I'm a bit at a loss how a proper fix could look like. But maybe this provides a starting point of how to tackle this.

nervetattoo commented 3 years ago

Thanks for digging in @stefangehn You are probably onto something. The setConfig method is called from HA, and its not impossible that a frozen object is passed. I'll try to spread the existing config to a new object and you can test if that helps.

nervetattoo commented 3 years ago

The only peculiar part is how it only happens for some though – and not me, despite heavy attempts at reproducing it.

fcastilloec commented 3 years ago

I have the same problem. I've been following this thread to see if a fix will come soon. It seems that you guys are getting closer to figuring out what's going on. I'll be happy to test any code that can help reproduce/debug this issue. I'm not sure if this is relevant but might help to figure out what's going on: I'm running Home Assistant in Supervised mode on a Raspberry Pi 4 with 32bit OS.

stefangehn commented 3 years ago

The fix works for toplevel properties like entity but still fails for sub-properties like layout.mode.names. The reason is indeed that setConfig is called with a frozen object. I suspect this is the case since https://github.com/home-assistant/frontend/pull/4862 got merged. For flat config objects the suggested code indeed works:

this.config = { ...config }

However since simple-thermostat uses nested config entries it needs some sort of deep-clone implementation for the setConfig code, otherwise all the sub-objects will still be frozen. Afterwards the remaining code does not appear to need any of the previous workarounds anymore, i.e. this.config can be modified at will again.

FWIW, I partially got the card working with this:

  setConfig(config: CardConfig): void {
    this.config = {
      ...config,
      header: {
        ...config?.header,
      },
      layout: {
        ...config?.layout,
        mode: {
          ...config?.layout?.mode,
        },
        sensors: {
          ...config?.layout?.sensors,
        },
      },
      hide: {
        ...config?.hide,
      },
      label: {
        ...config?.label,
      },
    }
  }

Mind you, this will create all the sub-sections like layout etc. which is obviously undesired. The suggested https://github.com/balloob/deep-clone-simple module seems to lack a TS support (i.e. it'd need a index.d.ts with appropriate type information to pull it into `editor.ts.

nervetattoo commented 3 years ago

Hooray! That was the confirmation I'd hoped for. Thanks a bunch for digging into this 💯 ! I'll make sure it just makes a copy in the recursive setvalue func. Should probably find time to do this in a few days

github-actions[bot] commented 3 years ago

:tada: This issue has been resolved in version 2.4.2 :tada:

The release is available on:

Your semantic-release bot :package::rocket:

nervetattoo commented 3 years ago

LMK how it goes 🤞

KNXBroker commented 3 years ago

Seems to Work! Thank you