Binding-Wert aus JSON filtern

[OliverIO]

@marcio
ich habe mal ein widget gebaut mit dem das geht.
https://forum.iobroker.net/topic/31521/test-widget-json-template
Dan kannst du dir deine Darstellung individuell bauen

[MarcIO]

@oliverio

Ja den kenne ich bereits und nutze es auch, aber für diesen Fall wäre es leider viel zu aufwändig.
Wie schaut es denn mit getState aus? Ist es mittlerweile wieder sinnvoll damit zu arbeiten? Hatte nämlich in der Vergangenheit öfter mal Probleme damit in IoB.

[OliverIO]

@marcio

Was heißt aufwändig, eigentlich nicht.

GetState gibt es bei vis quasi nicht, bzw. ist es noch aufwändiger.

Dann könnte man noch den Datenpunkt per Binding in ein Java Skript in einem HTML Widget einblenden. Ist aber genauso aufwändig, wie jsontemplate

Beispiel:

<p class="myvar">test</p>
<script>
debugger;    
var json = {0_userdata.0.test};
$(".myvar").html(json[0].geraet_name);
</script>

[MarcIO]

@oliverio

Von der Logik her nicht unbedingt, aber ich habe dieses Binding in nav-button verwendet und müsste es entsprechend in html/css/js nochmals machen.

[MarcIO]

@oliverio Hey Oliver,

Ich hatte doch mal ein Versuch gewagt und habe es mit deiner JSON-Template 3 Widget probiert. Habe nun das Problem, dass es im Edit der Vis funktioniert aber in Runtime die Funktionen einfach weg sind.

So habe ich es gestaltet:

<%
debugger;
let newList = data
  .map(el => {
    return {
      ...el,
      status: el['issue_type'] === "error" ? 'red' :
              el['issue_type'] === "warning" ? 'yellow' :
              el['issue_type'] === "success" ? 'green' : 'grey'
    };
  })
  .filter(item => item.machine_name === "Kaffeemaschine");

let item = newList[0];
let targetView = "Kueche";

return `
  <button style="
    width: 672px;
    height: 538px;
    border: 4px solid ${status};
    border-radius: 8px;
    background-color: #
    cursor: pointer;
  "
  onclick="vis.changeView('${targetView}')">
  </button>
`;
%>

In der Konsole auch nichts auffälliges entdeckt. Da ist zwar ein allgemeiner und ein alter Fehler über rssfeed, aber die anderen JSON-Templates funktionieren ja alle. Woran könnte es hier scheitern?

Im Bearbeitungsmodus sehe ich die Farbe/Status korrekt und kann auch per Klick navigieren, aber wie erwähnt ist im Runtime nichts mehr da..

[OliverIO]

@marcio

Ich schau mir das an. Du wendest den Template Mechanismus etwas ungewöhnlich an. Muss aber selbst prüfen, wo da genau das Problem liegt
Melde mich morgen

[MarcIO]

@oliverio

Super, danke dir!

[OliverIO]

@marcio

Gib mir bitte ein paar Beispiel Daten für den Input

[MarcIO]

@oliverio

[
  {
    "geraet_name": "Gerät A",
    "issue_name": "Nachbearbeiten",
    "issue_date": "24.09.2024",
    "issue_type": "warning",
  },
  {
    "geraet_name": "Test 4",
    "issue_name": "Vorrichtung nicht vorhanden",
    "issue_date": "04.05.2025",
    "issue_type": "warning",
  },
  {
    "geraet_name": "Auto",
    "issue_name": "defekt",
    "issue_date": "31.05.2025",
    "issue_type": "error",
  },

[OliverIO]

@marcio

ok folgende erkenntnisse:

leider passen die daten nicht zum template
in den daten steht
geraet_name
im template
filter(item => item.machine_name === "Kaffeemaschine");

da filtert natürlich nix

der unterschied zwischen edit und runtimemode ist leider durch den in vis eingebauten binding erkennungsmechanismus zu erklären

wenn man mit den browser dev tools sich jeweils das javascript anschaut, dann sieht man

im edit
onclick="vis.changeView('${targetView}')">

im runtime
onclick="vis.changeView('$undefined')">

der in vis eingebaute erkennungsmechanismuss sucht per regex nach allem was zwischen den geschweiften klammern steht und versucht das mit dem darin enthaltenen ausdruck zu ersetzen, was hier zu undefined führt.

wie ich schon im vorigen post erwähnt habe, wendest du den template mechanismus nicht gut an. schau dir bitte die dokumentation zum widget im adapter readme nochmal an. kannst aber auch gerne hier fragen.

hier ein verbessertes template

<%
debugger;
let newList = data
  .map(el => {
    return {
      ...el, 
      status: el['issue_type'] === "error" ? 'red' :
              el['issue_type'] === "warning" ? 'yellow' :
              el['issue_type'] === "success" ? 'green' : 'grey'
    };
  })
  .filter(item => item.machine_name === "Auto"); 
 
let item = newList[0];
let targetView = "Küche";
 
%>
  <button style="width: 50px;height: 50px;border: 4px solid <%- item.status||"blue" %>;border-radius: 8px;background-color: #555555;cursor: pointer;"
  onclick="vis.changeView('<%- targetView %>')">
  </button>

anmerkungen zu deinem ursprungstemplate

• backgroundcolor ist fehlerhaft, habe hier mal #555555 verwendet
• der knopf ist etwas groß?
• variable status hat keinen wert wen die liste leer ist, daher hier fallbackwert blau hinzugefügt
• die jeweilige statusfarbe ist nicht über status, sondern item.status erreichbar

[MarcIO]

@oliverio said in Binding-Wert aus JSON filtern:

leider passen die daten nicht zum template
in den daten steht
geraet_name

Das habe ich im Nachhinein angepasst gehabt, deshalb stand im JSON noch die alte Version, aber ja hast natürlich richtig gesehen.

@oliverio said in Binding-Wert aus JSON filtern:

wie ich schon im vorigen post erwähnt habe, wendest du den template mechanismus nicht gut an. schau dir bitte die dokumentation zum widget im adapter readme nochmal an. kannst aber auch gerne hier fragen.

Ja das stimmt, ich fühl mich iwie in IoBroker noch so manchmal fremd, trotz JavaScript-Kenntnisse. Aber nehme mir deinen Rat zu Herzen.

@oliverio said in Binding-Wert aus JSON filtern:

anmerkungen zu deinem ursprungstemplate

• backgroundcolor ist fehlerhaft, habe hier mal #555555 verwendet

Was genau scheitert denn an #e5e5e5? Ich habe es schon zuvor verwendet und bisher problemlos.

Ich danke dir für deinen Skript. Das funktioniert nun einwandfrei!

[OliverIO]

@marcio

Wenn es dagestanden wäre Nix

[MarcIO]

@oliverio

Dann war ich ja wohl mega verpeilt unterwegs.

Ich danke dir auf jeden Fall, es funktioniert wie gewollt