Jahresrückblick 2025 – unser neuer Blogbeitrag ist online! ✨

[Peoples]

So, ich versuche nun die Admin-Oberfläche mit Leben zu befüllen und komme wie erwartet nicht weiter.

Ich möchte die Lokale Iobroker-Strucktur des Vis Ordners auslesen, um die Projekte in einem Select oder ähnlichem aufzulisten. Nur wie ich das angehe ist mir nicht klar.

In der main.js kann ich mit:

 var fs = require("fs");
        var dirPath        = '/opt/iobroker/iobroker-data/files/vis.0/';
        var viewsJsonFile  = '/vis-views.json'

        function generateProjectList(dirPath, viewsJsonFile){
            var text = '';
            fs.readdir(dirPath, (err, files) => { 
                if(err){
                        console.log('Cannot parse views file "' + dirPath + file + 'vis-views.json"');
                        window.alert('Cannot parse views file "' + dirPath + file + 'vis-views.json');
                } else { 
                        files.forEach(file => { 
                            var isDirExists = fs.existsSync(dirPath + file) && fs.lstatSync(dirPath + file).isDirectory();
                            if(isDirExists === true){
                                if(fs.existsSync(dirPath + file + viewsJsonFile)){
                                        
                                            text += '<option value="Wandtablet" class="translate">'+file+'</option>';
                                }
                            }
                        })
                       // $('#select_projects').html(text); 
                } 
            }) 
            adapter.log.info('funktioniert!'+dirPath+viewsJsonFile);
        }

Die Projekte auflisten, aber das geht in der index_m.html so natürlich nicht weil es (soweit ich gelesen habe) require("fs") aus Sicherheitsgründen nicht gibt.

Wie kann ich nun die Datei einlesen?

Kann ich vielleicht in der main.js den Auslesevorgang machen und die Werte irgendwie in eine adapter.config.variable schreiben?

[OliverIO]

@Peoples

Hier hatte ich dir schon einmal geschrieben wie vis an die Daten kommt. Den Code kannst du doch direkt benützen Bzw. etwas adaptieren
https://forum.iobroker.net/topic/37589/vorhandene-vis-projekte-bzw-vis-views-auslesen/6

[Peoples]

@OliverIO
Da fehlts halt ein wenig am können weil ich bekomme das einfach nicht zum laufen.

Mir ist schon garnicht klar was ich da mit angeben muss dass ich nicht immer folgenden Fehler bekomme.

Uncaught TypeError: Cannot read property 'readProjects' of undefined

[OliverIO]

@Peoples
Und wie hast du das jetzt aufgerufen, das die Fehlermeldung erzeugt wird.

[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 :angry:
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 :joy:

[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):