Auswahlliste in einem String speichern

[Marc9025]

Hallo zusammen,
ich suche eine Möglichkeit aus einer Liste Werte auszuwählen und diese dann in einen String abzuspeichern.

Hintergrund ist das ich hier gerne z.B 2 oder mehr Werte anklicke und die dann in einem Datenpunkt abgespeichert werden.
Ich habe schon von materialdesign die Liste ausprobiert aber dort kann man es leider nicht in einem Datenpunkt abspeichern.
Hat jemand eine Idee was man da machen könnte ?

[OliverIO]

@marc9025

wie wäre es damit?
https://github.com/Scrounger/ioBroker.vis-materialdesign#select

[Marc9025]

@oliverio
habe ich auch schon getestet.
Leider kann man hier keine mehrfach Auswahl treffen.

[OliverIO]

@marc9025

du könntest mal folgendes probieren
du holst dir meinen adapter rssfeed (nicht wundern, da ist ein widget mit enthalten, was dir hier helfen kann)

dann fügst du das widget JSON Template 2 hinzu

In den Einstellungen des widgets fügst du bei template das folgende Hinzu

<select id="mySelect"  onchange="myFunction(this)" multiple="multiple">
</select>
<script>
    var datapoint="0_userdata.0.test.test1";
    var selectedvalue = "<%= dp['0_userdata.0.test.test1'] %>";
    var selectid="mySelect";
    var values="Wert1|Wert2|Wert3|Wert4";
    values.split("|").map(el=>$("#"+selectid).append($('<option>', {
        value: el,
        text: el,
        selected:selectedvalue.split("|").includes(el)
    })));
    function myFunction(el) {
        vis.setValue(datapoint,$(el).val().join("|"));
    }
</script> 

Zeile 4+5 aktualisierst du mit dem Namen deines Datenpunkts
Zeile 7: Hier kommen die einzelnen Werte rein getrennt mit dem senkrechten Strich |

Dann in den widget-Einstellung bei rss_dp[1] dann nochmal den namen des Datenpunkts.

Aktuell ist es so eingestellt das du das widget nur einmal einsetzen kannst. Wenn du das mehrmals benötigst, muss man nochmal schauen

[Marc9025]

@oliverio
vielen Dank, dass hat soweit geklappt.
Würde es auch gehen wenn ich z.B Wert1 und Wert2 anklicken und dann beide werte im Datenpunkt geschrieben werden mit einem Trennzeichen.

edit
Wenn man die Maus gedrückt hält und dann Wert1 und Wert2 berührt funktioniert es.
Würde das auch mit jeweils einzahlend anklicken gehen ?
Auf dem Handy ist es Perfekt geht das so auch am PC ?

Ich habe noch eine 2 Frage
Könnte man Wert1 anzeigen lassen aber in den Datenpunkt etwas anders übertragen.

[OliverIO]

@marc9025

1. Klar kann man alle programmieren. Ich hab jetzt mal ein basic select element des browsers genommen. im internet gibt es auch entsprechend viele ersatz elemente, die die funktionalität nachahmen. aber zusammen mit vis muss man das dann individuell anpassen.
   du kannst ja mal schauen ob du so was im internet findest (also konkreten html/javascript code), ich schaue dann wie aufwändig es ist das anzupassen.
   hier ein vorschlag
   https://github.com/ehynds/jquery-ui-multiselect-widget

2. ja das geht auch, dazu müsste man dann die interpretation von values anpassen.
   Aktuell kennt er ja nur eine Liste von Werten.
   Das würde dann so aussehen

<select id="mySelect"  onchange="myFunction(this)" multiple="multiple">
</select>
<script>
    var datapoint="0_userdata.0.test.test1";
    var selectedvalue = "<%= dp['0_userdata.0.test.test1'] %>";
    var selectid="mySelect";
    var values= [
        {"display":"Wert1",value:"w1"},
        {"display":"Wert2",value:"w2"},
        {"display":"Wert3",value:"w3"},
        {"display":"Wert4",value:"w4"}
        ];
    values.map(el=>$("#"+selectid).append($('<option>', {
        value: el.value,
        text: el.display,
        selected:selectedvalue.split("|").includes(el.value)
    })));
    function myFunction(el) {
        vis.setValue(datapoint,$(el).val().join("|"));
    }
</script> 

[Marc9025]

@oliverio
vielen vielen Dank für deine Mühe.
Es klappt super
Aus deinem Link das Demo Projekt
https://ehynds.github.io/jquery-ui-multiselect-widget/
das wäre doch schon Perfekt
Aber nur wenn das nicht zu viel Aufwand ist.

[OliverIO]

@marc9025

probier mal hier.
das mit dem widget war sogar noch einfacher, da genau das vorgecshlagene bereits in vis enthalten ist (allerdings in einer seeeehr alten version) zur wauswahl der widgets.
kleine schwierigkeit ist, das das multiselect bei jedem klick sich schließt und du für die wahl weitere elemente das immer erneut öffnen musst.
problem ist, sobald ein wert in einen datenpunkt geschrieben wird, wird das widget komplett neu erzeugt und dabei wird es geschlossen.

<select id="mySelect" multiple="multiple" onchange="myFunction(this)">
</select>
<%= dp['0_userdata.0.test.test1'] %>
<script>
    var datapoint="0_userdata.0.test.test1";
    var selectedvalue = "<%= dp['0_userdata.0.test.test1'] %>";
    var selectid="mySelect";
    var values= [
        {"display":"Wert1",value:"w1"},
        {"display":"Wert2",value:"w2"},
        {"display":"Wert3",value:"w3"},
        {"display":"Wert4",value:"w4"}
        ];
    values.map(el=>$("#"+selectid).append($('<option>', {
        value: el.value,
        text: el.display,
        selected:selectedvalue.split("|").includes(el.value)
    })));
    var $mySelect  = $('#mySelect').multiselect();
    function myFunction(el) {
        debugger;
        vis.setValue(datapoint,($(el).val()||[" "]).join("|"));
    }
</script> 

[Marc9025]

@oliverio
ja soweit ist es super.
Stimmt es schließt bei jedem klick was es etwas schwierig macht, wenn man mal mehr anklicken möchte

Jetzt ist es so das, dass Ergebnis angezeigt wird. Kann man das ausblenden ? Ich habe da nämlich ziemlich lange Namen

[OliverIO]

@marc9025
Sorry, vergessen zu entfernen.
Einfach Zeile drei löschen.

[Marc9025]

@oliverio
super, vielen dank
gibt es den eine Möglichkeit den "Fehler mit dem schließen beim klicken" zu beheben ?

[OliverIO]

@marc9025
ne leider mit der basisfunktionalität nicht und ohne da noch was größers dazuzuprogrammieren.
das ist die funktionsweise des widgets, das sobald eine änderung des datenpunkts erfolgt sich das ding neu aufbaut.
ansonsten müsste man noch eine bestätigung mit einbauen, das der code weiß wann fertig ist. hm das könnte ich mal noch probieren.
dann würde automatisch am ende noch ein element eingefügt werden, das "fertig" heißt. erst dann würde der datenpunkt geschrieben werden.

[Marc9025]

@oliverio
das wäre natürlich mega wenn das gehen würde.

[OliverIO]

@marc9025

so hier.
Den display-Wert von fertig darfst du Ändern, den value-Wert von fertig nicht.

<select id="mySelect" multiple="multiple" onchange="myFunction(this)">
</select>
<script>
    var datapoint="0_userdata.0.test.test1";
    var selectedvalue = "<%= dp['0_userdata.0.test.test1'] %>";
    var selectid="mySelect";
    var values= [
        {"display":"Wert1",value:"w1"},
        {"display":"Wert2",value:"w2"},
        {"display":"Wert3",value:"w3"},
        {"display":"Wert4",value:"w4"},
        {"display":"fertig",value:"fertig"}
        ];
//der letzte eintrag mit fertig muss genau so bleiben, oder der code muss angepasst werden    
    
    values.map(el=>$("#"+selectid).append($('<option>', {
        value: el.value,
        text: el.display,
        selected:selectedvalue.trim().split("|").includes(el.value)
    })));
    var $mySelect  = $('#mySelect').multiselect({
        click: function(event,ui) {
        }
    });
    function myFunction(el) {
        debugger;
        if (($(el).val()||[" "]).includes("fertig")) {
            vis.setValue(datapoint,($(el).val()||[]).filter(el=>el!="fertig").join("|")+" ");
        }
    }
</script> 

[Marc9025]

@oliverio
super es ist fast perfekt
Bei mir zeigt er den Datenpunkt über dem Widget an, kann man den ausblenden ?

[OliverIO]

@marc9025

sollte er nicht. bei mir sieht das so aus

[Marc9025]

@oliverio
tut mir leid das war mein Fehler
Dir vielen Dank für deine Mühe und deine Geduld es ist so wie ich es brauche.