Neues YouTube-Video: Visualisierung im Devices-Adapter

[jlssmt]

Hallo zusammen,

ich habe mich mal an meinen ersten Adapter gewagt.
Komme von der Angular Front und daher das create-adapter script mit React und Typescript initialisiert.
Komme gut voran, aber ich habe ein essenzielles Problem.
Ich würde gerne im Frontend also den Adapter-Einstellungen eine Liste implementieren, welche sich durch einen Klick auf den "+" Button um eine Zeile erweitert.
Das sieht man ja in so manchen Adaptern, aber leider kann ich dort nicht abschauen, weil dort alles in jQuery o.ä. implementiert wurde.

Ich hätte gerne so ein Interface für die Settings:

interface AdapterConfig {
  option1: boolean;
  items: [
    {
      productName: string;
      url: string;
      keyword: string;
    }
  ]
}

Und dann eben pro Zeile ein this.config.items.push(newItem); bzw. halt direkt einen bind vom input value auf die config.

Leider bekomme ich das nicht hin, da im Template das hier vorgegeben ist:

<TextField value={this.props.native[attr]}>...</TextField>

Ich frage mich wie ich jetzt das items array in meine adapter.config bekomme, damit es als "setting" dauerhaft bestehen bleibt.
Ist das so grob verständlich? Ich denke ich brauch nur ne kleine Hilfe.

Adapter bzw. settings.tsx file ist hier: https://github.com/jlssmt/ioBroker.product-alert/blob/master/admin/src/components/settings.tsx

[UncleSam]

@jlssmt Ich bin leider auf dem Handy und kann dir nicht alle Details schreiben, aber schau dir mal meinen Adapter an, dort mache ich genau das:
https://github.com/UncleSamSwiss/ioBroker.i2c/tree/master/admin/src

Es gibt mehrere Devices und die werden durch die Antwort von sendTo hinzugefügt.

[AlCalzone]

@jlssmt Dein Anwendungsfall ist etwas komplizierter als die vorgegebenen Standardfälle.

Im Grunde brauchst du eine extra Component für die Items, die statt dem TextField für jedes Item gerendert wird (musst du schreiben). Und in dieser Component dann eben 3 Textfelder, die du an productName, url und keyword des jeweiligen Items bindest.

[jlssmt]

@UncleSam
Hat mir sehr geholfen, danke dir ;-)

@alcalzone
Danke, bin jetzt schon weitergekommen.
Das "any" bei onChange: (attr: string, value: any) => void; hatte ich übersehen.
Damit kann ich mir ein Object[] in die config schieben ;-)