Klärung von AdpaterEntwicklungs Fragen

[OliverIO]

@Peoples
Im Zweifel kann man im Browser einen breakpoint setzen und dann mal schauen was vis da genau macht
Wenn mal den im chrome öffnete eröffnet sich eine komplett neue Welt
https://developers.google.com/web/tools/chrome-devtools

[Peoples]

Also, ich habe nun einiges versucht und auch mit den Developer Tools rumprobiert, konnte auch folgende funktion finden:

readDir:          function (dirname, callback) {
        //socket.io
        if (this._socket === null) {
            console.log('socket.io not initialized');
            return;
        }
        if (!dirname) dirname = '/';
        var parts = dirname.split('/');
        var adapter = parts[1];
        parts.splice(0, 2);

        this._socket.emit('readDir', adapter, parts.join('/'), {filter: true}, function (err, data) {
            if (callback) callback(err, data);
        });
    },

und

 readProjects:     function (callback) {
        var that = this;
        this.readDir('/' + this.namespace, function (err, dirs) {
            var result = [];
            var count = 0;
            for (var d = 0; d < dirs.length; d++) {
                if (dirs[d].isDir) {
                    count++;
                    that._detectViews(dirs[d].file, function (subErr, project) {
                        if (project) result.push(project);

                        err = err || subErr;
                        if (!(--count)) callback(err, result);
                    });
                }
            }
        });
    },

Ich habe wirklich viel gegooglet begreife es aber nicht.
Ich habe verstanden dass ich fs.readdir nicht nutzen kann da require('fs') clientseitig anscheinend nicht funktioniert.

Aber wie funktioniert dann this.readDir? https://github.com/ioBroker/ioBroker.vis/blob/a3d4ae6139ee5e20253a1257136f7fe0e7a635f0/www/js/conn.js#L1288

Erklärung zu this:
this ist ein Verweis auf das Objekt, das die aktuelle Javascript-Funktion aufgerufen hat. ... Bei jedem Aufruf der Funktion wird dieses Argument - sozusagen hinter den Kulissen - zusammen mit einem Zeiger auf das Objekt, das die Funktion aufrief, übergeben.

Ich verstehe nur Bahnhof
Kann ich die funktion oben nun irgendwie umschreiben dass ich sie nutzen kann oder geht das nicht.

Fakt ist, wenn ich hier nicht weiter komme bzw das begreife, wird das auch nix mit dem Adapter

[OliverIO]

@Peoples

Vis (client) fragt den Server und dort funktioniert fs

[OliverIO]

@Peoples
Hast du dir mal die Funktionen angeschaut auf die ich schon mal verwiesen habe?
Ich denke mit deinem aktuellen Lösungsweg bist du auf der falschen fährte
Welches Problem willst du aktuell nochmal lösen? Projekte oder views auflisten?

[simatec]

@Peoples
schaue mal hier ... Bei schoolfree lese ich so die "locations.json" aus und fülle damit dann die Config

[Peoples]

@OliverIO
Ja ich habe das schon angeschaut, aber komme da nicht weiter. Ich möchte im enddefekt so wie im vorherigen Post bei readProjects die Projekte Ordner / Projekte auslesen um diese dann in dein dropdown zu packen.

In der main.js ist das überhaupt kein Problem aber in der index_m.html finde ich keine Möglichkeit.

Hier fehlt es mir schlicht und ergreiffend an Wissen.

[OliverIO]

@Peoples
Wenn du einen Breakpoint in readprojects setzt und im edit Modus neu ladest, dann landest du in dieser Funktion und kannst schauen welche Parameter du übergeben musst und welches Ergebnis sie zurück liefert

[Peoples]

Nach ewigem probieren, bin ich so weit:

function loadProjects() {
  return new Promise(resolve => {
    socket.emit('getState', 'viewswitch.0.existingProjects' , function (err, state) {
        if (state && state.val) {
          var projects = state.val.split(',');
          var text = '<option value="undefined" class="translate">Platzhalter</option>';
          if(projects.length){
                for (var d = 0; d < (projects.length -1); d++) {
                text +='<option value="'+ projects[d] +'" class="translate">'+ projects[d] +'</option>';
                }
          resolve(text);
          } 
        }
    });
  });
}

  loadProjects().then(result => alert(result));      

ausgegeben wird mir dann folgendes:

<option value="undefined" class="translate">Platzhalter</option>
<option value="Wandtablet" class="translate">Wandtablet</option>
<option value="main" class="translate">main</option>

Nun möchte ich natürlich ein in der Admin-Oberfläche vorhandenes Select mit diesen Daten befüllen. Wenn ich es so mache:

let visProjects = '<option value="undefined" class="translate">Platzhalter</option>';
            visProjects += '<option value="Wandtablet" class="translate">Wandtablet</option>';
            visProjects += '<option value="main" class="translate">main</option>';
            $('#visProjects').html(visProjects);

funktioniert das bestens.
Aber wenn ich versuche die Daten meiner Funktion mit:

loadProjects().then(result => $('#select_projects').html(result));

versuche funktioniert das nicht.

Leider hört die von mir gefundene Doku auch bei admin.html auf, und ich habe auch sonst nichts gefunden das ein wenig den Aufbau bzw. die Richtlinien der index_m.html erklärt.

Kann mir einer sagen warum die Ausgabe meiner Funktion keine Füllung des Selects bewirkt?

[OliverIO]

@Peoples

darf ich fragen wo dein code lebt? auf dem server oder auf dem client?

[Peoples]

@OliverIO
klar Oliver, die steht in der index.m.html und sollte somit im client abgearbeitet werden. (Denke ich :-))

[AlCalzone]

@Peoples sagte in Klärung von AdpaterEntwicklungs Fragen:

Kann mir einer sagen warum die Ausgabe meiner Funktion keine Füllung des Selects bewirkt?

Findet der Selektor denn das richtige Element?
$('#select_projects') heißt ja anders als im Code obendrüber.

Wird der then-Callback aufgerufen? --> Log oder Breakpoint einfügen. resolve wird ja nur aufgerufen wenn projects.length > 0 ist.

Steht in result was drin? --> Log oder Breakpoint einfügen, und Inhalt checken.

@Peoples sagte in Klärung von AdpaterEntwicklungs Fragen:

ich habe auch sonst nichts gefunden das ein wenig den Aufbau bzw. die Richtlinien der index_m.html erklärt.

Gibts nicht. Du kannst die frei gestalten, das ist einfach HTML, CSS und JS mit jQuery. Designtechnisch sollte es aber material-design sein.

[Peoples]

@AlCalzone sagte in Klärung von AdpaterEntwicklungs Fragen:

@Peoples sagte in Klärung von AdpaterEntwicklungs Fragen:

Kann mir einer sagen warum die Ausgabe meiner Funktion keine Füllung des Selects bewirkt?

Findet der Selektor denn das richtige Element?
$('#select_projects') heißt ja anders als im Code obendrüber.

Wird der then-Callback aufgerufen? --> Log oder Breakpoint einfügen. resolve wird ja nur aufgerufen wenn projects.length > 0 ist.

Steht in result was drin? --> Log oder Breakpoint einfügen, und Inhalt checken.

Ich bin grad nicht zu Hause schaue aber später. Sollte aber so sein, den alert zeigt ja folgendes an:
<option value="undefined" class="translate">Platzhalter</option>
<option value="Wandtablet" class="translate">Wandtablet</option>
<option value="main" class="translate">main</option>

[OliverIO]

@Peoples

was @AlCalzone meinte ist:
In deinem Versuch der funktioniert verwendest du den selektor #visProjects
und im richtigen Besipiel welches nicht funktioniert verwendest du den selektor #select_projects

[Peoples]

@OliverIO
Ahso, ja das passt habe zwei "select" felder gemacht um zu sehen dass die "Feste" Vorgabe funktioniert, die generierte aber nicht.

Die Ergebnisse wären identisch sollte es funktionieren tut es aber leider nicht

Ich werde hier jetzt erstmal mit dem Thema Adapter aufhören, weil mich das Nervt.
Danke jedenfalls für eure Hilfe.

Vielleicht mach ich da irgendwann nochmal weiter

[OliverIO]

@Peoples

wie oben schon mal geschrieben. für client code im browser:
schreibe in deinen code am anfang das wort

debugger;

oder halt an die stelle, wo der debugger anhalten soll.
öffne die seite in chrome,
öffne die developer tools
mach einen reload
und schwupp bist du da und kannst schritt für schritt deinen code ausführen
und schauen was in den variablen steht.

[AlCalzone]

@OliverIO Alternativ manuell breakpoint setzen (hier mal für ein Skript im Forum):

[OliverIO]

@AlCalzone
Ich glaube soweit ist er noch nicht und die richtige Datei zu finden im source tree ist zu Beginn auch nicht so einfach.