ioBroker Forum Widget – Forum-Daten direkt in Visu

David G.

Ich wollte euch kurz ein kleines JS vorstellen was ich gestern Abend mehr oder weniger aus Langeweile mit Claude geschrieben habe.

Es ruft die "Wichtigsten" Infos aus diesem Forum ab und schreibt diese in DPs, zusätzliche wird noch ein konfigurierbares Widget erstellt.

Das Widget zeigt:

Eigene Benachrichtigungen (ungelesen/gelesen)
Ungelesene Topics mit Kategorie, Postanzahl und Autor
Eigene letzten Topics & Posts der letzten X Tage
Neueste Forum-Topics
Forum-Stats (Online-User, Themen, Beiträge)

Alles als einzelne DPs verfügbar – nicht nur das Widget

// ═══════════════════════════════════════════════════════════════
//  ioBroker Forum Widget
//  Autor:   David G. (David G.)
//  Version: 1.0.1
//  Forum:   https://forum.iobroker.net/topic/84513/iobroker-forum-widget-forum-daten-direkt-in-visu
//
//  Zeigt Forum-Daten als Datenpunkte und HTML-Widget an:
//  Benachrichtigungen, ungelesene Topics, eigene Posts & Topics,
//  neueste Topics und Forum-Stats.
// ═══════════════════════════════════════════════════════════════

// ── Zugangsdaten ──────────────────────────────────────────────
const FORUM_URL          = 'https://forum.iobroker.net';
const USERNAME           = 'deine@email.de';
const PASSWORD           = 'deinPasswort';
const SIMPLE_API         = 'http://192.168.99.33:8087';

// ── Datenpunkte ───────────────────────────────────────────────
const BASE_DP            = '0_userdata.0.forum.iobroker.';

// ── Intervall & Limits ────────────────────────────────────────
const INTERVAL_MIN       = 15;
const OWN_POST_DAYS      = 7;
const OWN_POSTS_MAX      = 10;
const OWN_TOPICS_MAX     = 5;
const LATEST_TOPICS_MAX  = 20;
const UNREAD_MAX         = 20;
const NOTIFICATIONS_MAX  = 10;

// ── Sektionen ein/ausblenden ──────────────────────────────────
const SHOW_STATS         = true;
const SHOW_NOTIFICATIONS = true;
const SHOW_UNREAD        = true;
const SHOW_OWN_TOPICS    = true;
const SHOW_OWN_POSTS     = true;
const SHOW_LATEST        = true;

// ── Widget Design ─────────────────────────────────────────────
const BG_COLOR           = '#1e1e2e';
const BG_OPACITY         = 1.0;
const TEXT_COLOR         = '#ccc';
const LINK_COLOR         = '#cdd6f4';
const ACCENT_COLOR       = '#89b4fa';
const BADGE_BG           = '#f38ba8';
const BADGE_TEXT         = '#1e1e2e';
const STATS_COLOR        = '#a6e3a1';
const MUTED_COLOR        = '#6c7086';
const DIVIDER_COLOR      = '#313244';

// ═══════════════════════════════════════════════════════════════

const axios = require('axios');
var cookieJar = '';
var csrfToken = '';

function extractCookies(arr) {
    if (!arr) return '';
    return arr.map(function(c) { return c.split(';')[0]; }).join('; ');
}

function stripHtml(str) {
    return (str || '').replace(/<[^>]*>/g, '')
        .replace(/&lt;/g,'<').replace(/&gt;/g,'>')
        .replace(/&amp;/g,'&').replace(/&#x27;/g,"'");
}

function dp(path) { return BASE_DP + path; }

function hexToRgba(hex, opacity) {
    var r = parseInt(hex.slice(1,3), 16);
    var g = parseInt(hex.slice(3,5), 16);
    var b = parseInt(hex.slice(5,7), 16);
    return 'rgba(' + r + ',' + g + ',' + b + ',' + opacity + ')';
}

function apiGet(path, callback, retry) {
    axios.get(FORUM_URL + path, {
        headers: { Cookie: cookieJar },
        validateStatus: function(s) { return s < 500; }
    })
    .then(function(res) {
        if (res.status === 401 && !retry) {
            log('Session abgelaufen – logge neu ein... (' + path + ')');
            login(function() { apiGet(path, callback, true); });
            return;
        }
        try { callback(res.data); }
        catch(e) { log('Callback Fehler ' + path + ': ' + e, 'error'); }
    })
    .catch(function(err) { log('GET Fehler ' + path + ': ' + err, 'error'); });
}

function extractStats(data) {
    var stats = { online: '?', topics: '?', posts: '?' };
    try {
        var footer = data.widgets.footer[0].html;
        var vals = footer.match(/title="([^"]+)">/g) || [];
        if (vals[0]) stats.online = vals[0].replace('title="','').replace('">','');
        if (vals[2]) stats.topics = vals[2].replace('title="','').replace('">','');
        if (vals[3]) stats.posts  = vals[3].replace('title="','').replace('">','');
    } catch(e) {}
    return stats;
}

function createDPs(callback) {
    var dps = [
        { id: 'info.connected',            val: false,  type: 'boolean', role: 'indicator', write: false },
        { id: 'info.lastUpdate',           val: '',     type: 'string',  role: 'text',       write: false },
        { id: 'info.lastError',            val: '',     type: 'string',  role: 'text',       write: false },
        { id: 'info.username',             val: '',     type: 'string',  role: 'text',       write: false },
        { id: 'stats.online',              val: '?',    type: 'string',  role: 'text',       write: false },
        { id: 'stats.topics',              val: '?',    type: 'string',  role: 'text',       write: false },
        { id: 'stats.posts',               val: '?',    type: 'string',  role: 'text',       write: false },
        { id: 'topics.latest',             val: '[]',   type: 'string',  role: 'json',       write: false },
        { id: 'unread.count',              val: 0,      type: 'number',  role: 'value',      write: false },
        { id: 'unread.list',               val: '[]',   type: 'string',  role: 'json',       write: false },
        { id: 'notifications.unreadCount', val: 0,      type: 'number',  role: 'value',      write: false },
        { id: 'notifications.unreadList',  val: '[]',   type: 'string',  role: 'json',       write: false },
        { id: 'notifications.list',        val: '[]',   type: 'string',  role: 'json',       write: false },
        { id: 'ownPosts.list',             val: '[]',   type: 'string',  role: 'json',       write: false },
        { id: 'ownTopics.list',            val: '[]',   type: 'string',  role: 'json',       write: false },
        { id: 'cmd.reload',                val: false,  type: 'boolean', role: 'button',     write: true  },
        { id: 'widget.html',               val: '',     type: 'string',  role: 'html',       write: false }
    ];

    var done = 0;
    dps.forEach(function(d) {
        createState(dp(d.id), d.val, {
            name: d.id, type: d.type, role: d.role, read: true, write: d.write
        }, function() {
            done++;
            if (done >= dps.length) callback();
        });
    });
}

function buildHtml(topics, unread, unreadTotal, notifs, stats, ownPosts, ownTopics, user) {
    var unreadNotifs    = notifs.filter(function(n) { return !n.read; }).slice(0, NOTIFICATIONS_MAX);
    var unreadSliced    = unread.slice(0, UNREAD_MAX);
    var topicsSliced    = topics.slice(0, LATEST_TOPICS_MAX);
    var ownPostsSliced  = ownPosts.slice(0, OWN_POSTS_MAX);
    var ownTopicsSliced = ownTopics.slice(0, OWN_TOPICS_MAX);
    var updated         = new Date().toLocaleString('de-DE');
    var apiBase         = SIMPLE_API + '/set/' + BASE_DP;

    var css = '<style>'
        + '.nb{font-family:sans-serif;font-size:13px;color:' + TEXT_COLOR + ';background:' + hexToRgba(BG_COLOR, BG_OPACITY) + ';border-radius:12px;padding:12px;box-sizing:border-box}'
        + '.nb .hd{display:flex;justify-content:space-between;align-items:center;margin-bottom:2px}'
        + '.nb h2{margin:0;font-size:15px;color:' + TEXT_COLOR + '}'
        + '.nb .reload{background:transparent;border:1px solid ' + DIVIDER_COLOR + ';color:' + MUTED_COLOR + ';border-radius:6px;padding:2px 8px;cursor:pointer;font-size:11px;}'
        + '.nb .reload:hover{color:' + TEXT_COLOR + ';border-color:' + ACCENT_COLOR + '}'
        + '.nb .usr{font-size:11px;color:' + ACCENT_COLOR + ';margin-bottom:2px}'
        + '.nb .upd{font-size:11px;color:' + MUTED_COLOR + ';margin-bottom:10px}'
        + '.nb .sec{margin-bottom:12px}'
        + '.nb .sec-hd{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid ' + DIVIDER_COLOR + ';padding-bottom:3px;margin-bottom:5px}'
        + '.nb .sec-t{font-size:11px;font-weight:bold;color:' + ACCENT_COLOR + ';text-transform:uppercase;letter-spacing:1px}'
        + '.nb table{width:100%;border-collapse:collapse}'
        + '.nb td{padding:4px;border-bottom:1px solid ' + DIVIDER_COLOR + ';vertical-align:top;font-size:12px}'
        + '.nb .num{text-align:center;color:' + MUTED_COLOR + ';white-space:nowrap}'
        + '.nb .cat{font-size:10px;color:' + MUTED_COLOR + ';display:block}'
        + '.nb a{color:' + LINK_COLOR + ';text-decoration:none}'
        + '.nb .nf{padding:4px 0;border-bottom:1px solid ' + DIVIDER_COLOR + ';font-size:12px;color:' + TEXT_COLOR + '}'
        + '.nb .badge{background:' + BADGE_BG + ';color:' + BADGE_TEXT + ';font-size:10px;font-weight:bold;padding:1px 5px;border-radius:8px;margin-right:4px;white-space:nowrap}'
        + '.nb .stats{display:flex;gap:8px;flex-wrap:wrap}'
        + '.nb .stat{background:' + hexToRgba(DIVIDER_COLOR, 1) + ';border-radius:8px;padding:8px;flex:1;text-align:center}'
        + '.nb .sv{font-size:16px;font-weight:bold;color:' + STATS_COLOR + '}'
        + '.nb .sl{font-size:10px;color:' + MUTED_COLOR + '}'
        + '</style>';

    var statsHtml = '<div class="sec"><div class="sec-hd"><span class="sec-t">Stats</span></div><div class="stats">'
        + '<div class="stat"><div class="sv">' + stats.online + '</div><div class="sl">Online</div></div>'
        + '<div class="stat"><div class="sv">' + stats.topics + '</div><div class="sl">Themen</div></div>'
        + '<div class="stat"><div class="sv">' + stats.posts  + '</div><div class="sl">Beitraege</div></div>'
        + '<div class="stat"><div class="sv">' + unreadNotifs.length + '</div><div class="sl">Neue Notifs</div></div>'
        + '</div></div>';

    var notifHtml = '<div class="sec"><div class="sec-hd"><span class="sec-t">Benachrichtigungen (' + unreadNotifs.length + ')</span></div>';
    if (unreadNotifs.length > 0) {
        unreadNotifs.forEach(function(n) {
            notifHtml += '<div class="nf"><span class="badge">NEU</span>' + stripHtml(n.bodyShort) + '</div>';
        });
    } else {
        notifHtml += '<div style="font-size:12px;color:' + MUTED_COLOR + ';padding:4px 0;">Keine ungelesenen</div>';
    }
    notifHtml += '</div>';

    var unreadHtml = '<div class="sec"><div class="sec-hd"><span class="sec-t">Ungelesen (zeige ' + unreadSliced.length + ' von ' + unreadTotal + ')</span></div>'
        + '<table><tr style="font-size:10px;color:' + MUTED_COLOR + '"><td>Titel</td><td class="num">Posts</td><td class="num">Von</td></tr>';
    unreadSliced.forEach(function(t) {
        unreadHtml += '<tr><td>'
            + '<span class="cat">' + stripHtml(t.category.name) + '</span>'
            + '<a href="' + FORUM_URL + '/topic/' + t.slug + '" target="_blank">' + stripHtml(t.title) + '</a>'
            + '</td><td class="num">' + t.postcount
            + '</td><td class="num">' + stripHtml(t.user.username) + '</td></tr>';
    });
    unreadHtml += '</table></div>';

    var ownTopicsHtml = '<div class="sec"><div class="sec-hd"><span class="sec-t">Meine letzten ' + OWN_TOPICS_MAX + ' Topics (' + ownTopicsSliced.length + ')</span></div>';
    if (ownTopicsSliced.length > 0) {
        ownTopicsHtml += '<table><tr style="font-size:10px;color:' + MUTED_COLOR + '"><td>Titel</td><td class="num">Posts</td></tr>';
        ownTopicsSliced.forEach(function(t) {
            ownTopicsHtml += '<tr><td>'
                + '<span class="cat">' + stripHtml(t.category ? t.category.name : '') + '</span>'
                + '<a href="' + FORUM_URL + '/topic/' + t.slug + '" target="_blank">' + stripHtml(t.title) + '</a>'
                + '</td><td class="num">' + t.postcount + '</td></tr>';
        });
        ownTopicsHtml += '</table>';
    } else {
        ownTopicsHtml += '<div style="font-size:12px;color:' + MUTED_COLOR + ';padding:4px 0;">Keine eigenen Topics</div>';
    }
    ownTopicsHtml += '</div>';

    var ownPostsHtml = '<div class="sec"><div class="sec-hd"><span class="sec-t">Meine letzten ' + OWN_POSTS_MAX + ' Posts - letzte ' + OWN_POST_DAYS + ' Tage (' + ownPostsSliced.length + ')</span></div>';
    if (ownPostsSliced.length > 0) {
        ownPostsHtml += '<table><tr style="font-size:10px;color:' + MUTED_COLOR + '"><td>Inhalt</td></tr>';
        ownPostsSliced.forEach(function(p) {
            var date = new Date(p.timestamp).toLocaleString('de-DE');
            ownPostsHtml += '<tr><td>'
                + '<span class="cat">' + date + ' · ' + stripHtml(p.topic ? p.topic.title : '') + '</span>'
                + '<a href="' + FORUM_URL + '/post/' + p.pid + '" target="_blank">' + stripHtml(p.content).substring(0, 80) + '...</a>'
                + '</td></tr>';
        });
        ownPostsHtml += '</table>';
    } else {
        ownPostsHtml += '<div style="font-size:12px;color:' + MUTED_COLOR + ';padding:4px 0;">Keine eigenen Posts in diesem Zeitraum</div>';
    }
    ownPostsHtml += '</div>';

    var topicsHtml = '<div class="sec"><div class="sec-hd"><span class="sec-t">Neueste ' + LATEST_TOPICS_MAX + ' Topics</span></div><table>'
        + '<tr style="font-size:10px;color:' + MUTED_COLOR + '"><td>Titel</td><td class="num">Posts</td><td class="num">Von</td></tr>';
    topicsSliced.forEach(function(t) {
        topicsHtml += '<tr><td>'
            + '<span class="cat">' + stripHtml(t.category.name) + '</span>'
            + '<a href="' + FORUM_URL + '/topic/' + t.slug + '" target="_blank">' + stripHtml(t.title) + '</a>'
            + '</td><td class="num">' + t.postcount
            + '</td><td class="num">' + stripHtml(t.user.username) + '</td></tr>';
    });
    topicsHtml += '</table></div>';

    var userLine = user ? ('<div class="usr">Eingeloggt als ' + user.username + '</div>') : '';

    return css
        + '<div class="nb">'
        + '<div class="hd">'
        + '<h2>ioBroker Forum</h2>'
        + '<button class="reload" onclick="fetch(\'' + apiBase + 'cmd.reload?value=true\',{mode:\'no-cors\'})">Reload</button>'
        + '</div>'
        + userLine
        + '<div class="upd">Stand: ' + updated + ' · alle ' + INTERVAL_MIN + ' Min.</div>'
        + (SHOW_STATS         ? statsHtml      : '')
        + (SHOW_NOTIFICATIONS ? notifHtml      : '')
        + (SHOW_UNREAD        ? unreadHtml     : '')
        + (SHOW_OWN_TOPICS    ? ownTopicsHtml  : '')
        + (SHOW_OWN_POSTS     ? ownPostsHtml   : '')
        + (SHOW_LATEST        ? topicsHtml     : '')
        + '</div>';
}

function setAllDPs(results) {
    var now          = new Date().toLocaleString('de-DE');
    var notifs       = results.notifs   || [];
    var unreadNotifs = notifs.filter(function(n) { return !n.read; });
    var stats        = results.stats    || {};
    var user         = results.user     || {};

    setState(dp('info.connected'),            true,                                    true);
    setState(dp('info.lastUpdate'),           now,                                     true);
    setState(dp('info.username'),             user.username || '',                     true);
    setState(dp('stats.online'),              stats.online  || '?',                   true);
    setState(dp('stats.topics'),              stats.topics  || '?',                   true);
    setState(dp('stats.posts'),               stats.posts   || '?',                   true);
    setState(dp('topics.latest'),             JSON.stringify(results.topics   || []),  true);
    setState(dp('unread.count'),              results.unreadTotal || 0,                true);
    setState(dp('unread.list'),               JSON.stringify(results.unread   || []),  true);
    setState(dp('notifications.unreadCount'), unreadNotifs.length,                     true);
    setState(dp('notifications.unreadList'),  JSON.stringify(unreadNotifs),            true);
    setState(dp('notifications.list'),        JSON.stringify(notifs),                  true);
    setState(dp('ownPosts.list'),             JSON.stringify(results.ownPosts  || []), true);
    setState(dp('ownTopics.list'),            JSON.stringify(results.ownTopics || []), true);
    setState(dp('widget.html'), buildHtml(
        results.topics    || [],
        results.unread    || [],
        results.unreadTotal || 0,
        notifs,
        stats,
        results.ownPosts  || [],
        results.ownTopics || [],
        user
    ), true);

    log('Alle DPs aktualisiert: ' + now);
}

function loadData() {
    var results = {};
    var done    = 0;
    var total   = 6;
    var since   = Date.now() - (OWN_POST_DAYS * 24 * 60 * 60 * 1000);

    function check() {
        done++;
        if (done >= total) setAllDPs(results);
    }

    apiGet('/api/recent',        function(d) { results.topics = d.topics        || []; check(); });
    apiGet('/api/notifications', function(d) { results.notifs = d.notifications || []; check(); });
    apiGet('/api/',              function(d) { results.stats  = extractStats(d);        check(); });

    apiGet('/api/unread', function(d) {
        results.unread      = d.topics     || [];
        results.unreadTotal = d.topicCount || results.unread.length;
        if (d.loggedInUser) {
            results.user = {
                uid:      d.loggedInUser.uid,
                username: d.loggedInUser.username,
                userslug: d.loggedInUser.userslug
            };

            apiGet('/api/user/' + results.user.userslug + '/posts', function(p) {
                results.ownPosts = (p.posts || []).filter(function(post) {
                    return post.timestamp >= since;
                });
                check();
            });

            apiGet('/api/user/' + results.user.userslug + '/topics', function(t) {
                results.ownTopics = (t.topics || []).slice(0, OWN_TOPICS_MAX);
                check();
            });

        } else {
            results.ownPosts  = [];
            results.ownTopics = [];
            check();
            check();
        }
        check();
    });
}

function login(callback) {
    axios.get(FORUM_URL + '/api/config')
        .then(function(res) {
            csrfToken = res.data.csrf_token;
            cookieJar = extractCookies(res.headers['set-cookie']);
            return axios.post(FORUM_URL + '/login',
                { username: USERNAME, password: PASSWORD },
                { headers: {
                    'x-csrf-token': csrfToken,
                    'Content-Type': 'application/json',
                    'Cookie': cookieJar
                }, maxRedirects: 0, validateStatus: function(s) { return s < 500; } }
            );
        })
        .then(function(res) {
            var newCookies = extractCookies(res.headers['set-cookie']);
            if (newCookies) cookieJar = newCookies;
            if (res.data && res.data.next) {
                log('Eingeloggt');
                if (callback) callback();
            } else {
                log('Login fehlgeschlagen: ' + JSON.stringify(res.data), 'error');
                setState(dp('info.connected'), false, true);
                setState(dp('info.lastError'), 'Login fehlgeschlagen', true);
            }
        })
        .catch(function(err) {
            log('Login Fehler: ' + err, 'error');
            setState(dp('info.connected'), false, true);
            setState(dp('info.lastError'), err.toString(), true);
        });
}

createDPs(function() {
    on({id: dp('cmd.reload'), ack: false}, function(obj) {
        if (!obj.state.val) return;
        log('Manueller Reload...');
        setState(dp('cmd.reload'), false, true);
        loadData();
    });

    login(function() {
        loadData();
        setInterval(function() {
            loadData();
        }, INTERVAL_MIN * 60 * 1000);
    });
});

Die SimpleApi wird für den Button zum Aktualisieren des Widgets benötigt. Auf den Weg klappt es in jeder Visualisierung. Muss man nicjt korrekt ausfüllen, dann klappt nur der reload Button nicht.

Falls jemand weiß, wie ich Daten senden kann, darf er das gerne schreiben. Mir scheint, als ob es über API und Socket.io deaktiviert ist. Im Forum.
Wollte eigentlich noch machen, dass man die Benachrichtigungen löschen kann über das Widget.

Homoran

@David-G. sagte:

wie ich Daten senden kann

Das ist eine

David G.

@Homoran
https://github.com/NodeBB/nodebb-plugin-write-api

Homoran

@David-G. Read more... ;-)

As of NodeBB v1.15.0, this plugin is deprecated

Ist aber auch eine Frage der Sicherheit.
Wir haben genug mit den bisherigen ungewünschten Aktionen zu tun.

mcm1957

Außerdem schadet es nichts wenn Postings manuell getippt werden müssen. Claude und Co können und sollen einen Menschen als Frontend benutzen :-)

David G.

@homoran @mcm1957
Da bin ich ganz bei euch beiden.
Sicherheit geht vor, und KI soll hier definitiv nicht selber im Forum tippen.

Hab es eben probiert weil es ein schönes "Upgrade" in Widget gewesen wäre ^^.

ilovegym

die Ki's sind eine Minderheit und sollten nicht diskriminiert werden 😀😎 - denkt an cyberdyne systems..

Community Forum

NEWS

ioBroker Forum Widget – Forum-Daten direkt in Visu

Support us

452

32.9k

83.0k

1.3m