pypluginstore.html

<style>
    :root {
        --bg-color: #f4f4f9;
        --text-color: #333;
        --card-bg: #fff;
        --border-color: #ddd;
        --primary: #007bff;
        --primary-hover: #0056b3;
        --danger: #dc3545;
        --danger-hover: #c82333;
        --success: #28a745;
    }

    #pypluginstore-container {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        color: var(--text-color);
        padding: 20px;
    }

    #pypluginstore-container .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
    }

    #pypluginstore-container h1 {
        margin: 0;
        color: var(--primary);
    }

    #PyPluginStore-status {
        font-weight: bold;
        color: #666;
    }

    #pypluginstore-container .filters {
        display: flex;
        gap: 20px;
        margin-bottom: 20px;
        align-items: center;
        background: var(--card-bg);
        padding: 15px;
        border-radius: 8px;
        border: 1px solid var(--border-color);
        flex-wrap: wrap;
    }

    #pypluginstore-container .filters input[type="text"] {
        flex-grow: 1;
        padding: 8px 12px;
        border: 1px solid var(--border-color);
        border-radius: 4px;
        font-size: 1em;
        min-width: 200px;
    }

    #pypluginstore-container .filters label {
        display: flex;
        align-items: center;
        gap: 12px;
        font-weight: bold;
        cursor: pointer;
        user-select: none;
    }

    #pypluginstore-container .sort-controls {
        display: flex;
        gap: 10px;
        align-items: center;
    }

    #pypluginstore-container .sort-controls label {
        margin: 0;
        font-weight: normal;
        font-size: 0.95em;
    }

    #pypluginstore-container .sort-controls select {
        padding: 8px 12px;
        border: 1px solid var(--border-color);
        border-radius: 4px;
        font-size: 1em;
        background: white;
        cursor: pointer;
    }

    /* Switch styling */
    .switch {
        position: relative;
        display: inline-block;
        width: 50px;
        height: 24px;
    }

    .switch input { 
        opacity: 0;
        width: 0;
        height: 0;
    }

    .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #ccc;
        transition: .4s;
        border-radius: 24px;
    }

    .slider:before {
        position: absolute;
        content: "";
        height: 18px;
        width: 18px;
        left: 3px;
        bottom: 3px;
        background-color: white;
        transition: .4s;
        border-radius: 50%;
    }

    input:checked + .slider {
        background-color: var(--success);
    }

    input:focus + .slider {
        box-shadow: 0 0 1px var(--success);
    }

    input:checked + .slider:before {
        transform: translateX(26px);
    }

    #pypluginstore-container .grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 20px;
    }

    #pypluginstore-container .card {
        background: var(--card-bg);
        border: 1px solid var(--border-color);
        border-radius: 8px;
        padding: 15px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        display: flex;
        flex-direction: column;
    }

    #pypluginstore-container .card-header {
        font-size: 1.1em;
        font-weight: bold;
        margin-bottom: 10px;
    }

    #pypluginstore-container .card-desc {
        font-size: 0.9em;
        color: #666;
        margin-bottom: 15px;
        flex-grow: 1;
    }

    #pypluginstore-container .card-meta {
        font-size: 0.8em;
        color: #888;
        margin-bottom: 15px;
    }

    #pypluginstore-container .actions {
        display: flex;
        gap: 10px;
        align-items: stretch;
    }

    #pypluginstore-container button, 
    #pypluginstore-container .btn-link {
        padding: 8px 12px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-weight: bold;
        flex: 1;
        transition: background 0.2s;
        font-size: 13.3333px; /* Match default button font size */
        font-family: inherit;
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        box-sizing: border-box;
        min-height: 35px;
    }

    .btn-install { background: var(--primary); color: white; }
    .btn-install:hover { background: var(--primary-hover); }

    .btn-remove { background: var(--danger); color: white; }
    .btn-remove:hover { background: var(--danger-hover); }

    .btn-update { background: var(--success); color: white; }
    
    .btn-info { background: #17a2b8; color: white; }
    .btn-info:hover { background: #138496; }
    
    .installed-badge {
        display: inline-block;
        background: var(--success);
        color: white;
        padding: 2px 6px;
        border-radius: 10px;
        font-size: 0.7em;
        margin-left: 10px;
        vertical-align: middle;
    }
</style>

<div id="pypluginstore-container">
    <div class="header">
        <h1>PyPluginStore: Plugin Store</h1>
        <div id="pypluginstore-status">Initializing...</div>
    </div>

    <div class="filters">
        <input type="text" id="search-box" placeholder="Search plugins...">
        <div class="sort-controls">
            <label for="sort-select">Sort by:</label>
            <select id="sort-select">
                <option value="name">Name (A-Z)</option>
                <option value="name-desc">Name (Z-A)</option>
                <option value="updated">Last Updated (Newest)</option>
                <option value="updated-oldest">Last Updated (Oldest)</option>
            </select>
        </div>
        <label>
            Installed
            <span class="switch">
                <input type="checkbox" id="installed-toggle">
                <span class="slider"></span>
            </span>
        </label>
    </div>
    
    <div id="plugins-list" class="grid">
        <!-- Plugins will be rendered here -->
    </div>
</div>

<script>
(function() {
    console.log("PyPluginStore script starting...");
    let payloadIdx = null;
    let triggerIdx = null;
    let isLoading = false;
    let pluginCache = null;
    let installedCache = [];
    let currentSort = 'name';

    function setStatus(msg) {
        console.log("PyPluginStore Status: " + msg);
        const el = document.getElementById('pypluginstore-status');
        if (el) el.innerText = msg;
    }

    async function init() {
        if (document.getElementById('pypluginstore-status').innerText !== 'Initializing...') {
            return; // Already running
        }

        // Attach filter listeners
        document.getElementById('search-box').oninput = filterAndRender;
        document.getElementById('installed-toggle').onchange = filterAndRender;
        document.getElementById('sort-select').onchange = function() {
            currentSort = this.value;
            filterAndRender();
        };
        
        setStatus("Finding API bridge...");
        try {
            console.log("Fetching devices from /json.htm...");
            const req = await fetch('json.htm?type=command&param=getdevices&filter=all&used=true&t=' + Date.now());
            if (!req.ok) throw new Error("HTTP error " + req.status);
            const devices = await req.json();
            
            if (devices.result) {
                for (const device of devices.result) {
                    if (device.ID === 'PPM_API_PAYLOAD') {
                        payloadIdx = device.idx;
                    }
                    if (device.ID === 'PPM_API_TRIGGER') {
                        triggerIdx = device.idx;
                    }
                }
            }
            
            if (!payloadIdx || !triggerIdx) {
                setStatus("Error: PyPluginStore devices not found (" + (payloadIdx?'Y':'N') + "/" + (triggerIdx?'Y':'N') + "). Please ensure the plugin is added in Hardware.");
                return;
            }
            
            console.log("Found bridge devices: Payload=" + payloadIdx + ", Trigger=" + triggerIdx);
            loadPlugins();
        } catch (e) {
            console.error("Init Error:", e);
            setStatus("Failed to connect to Domoticz API: " + e.message);
        }
    }

    async function sendCommand(action, data) {
        if (isLoading) {
            alert("An operation is already in progress. Please wait.");
            return null;
        }
        isLoading = true;
        
        try {
            const txId = Date.now().toString();
            const payload = JSON.stringify({ action, tx_id: txId, ...data });
            
            console.log("Sending command: " + action, payload);
            await fetch(`json.htm?type=command&param=udevice&idx=${payloadIdx}&nvalue=0&svalue=${encodeURIComponent(payload)}`);
            await fetch(`json.htm?type=command&param=switchlight&idx=${triggerIdx}&switchcmd=On`);
            
            return await pollResponse(action, txId);
        } finally {
            isLoading = false;
        }
    }

    async function pollResponse(action, txId, retries = 120) {
        console.log("Polling for response to " + action + " (tx_id: " + txId + ")...");
        for (let i = 0; i < retries; i++) {
            await new Promise(r => setTimeout(r, 1000));
            try {
                const req = await fetch(`json.htm?type=command&param=getdevices&rid=${payloadIdx}&t=` + Date.now());
                const resp = await req.json();
                
                if (resp.result && resp.result.length > 0) {
                    const dataStr = resp.result[0].Data;
                    try {
                        const data = JSON.parse(dataStr);
                        if (data.action === action && data.tx_id === txId) {
                            console.log("Received response:", data);
                            return data;
                        }
                    } catch (e) {}
                }
            } catch (e) {
                console.error("Polling error", e);
            }
        }
        throw new Error("Timeout waiting for plugin response.");
    }

    async function loadPlugins() {
        setStatus("Loading plugins from registry...");
        try {
            const response = await sendCommand('list_plugins', {});
            if (response && response.status === 'success') {
                pluginCache = response.data;
                installedCache = response.installed;
                filterAndRender();
                setStatus(`Loaded ${Object.keys(response.data).length} plugins.`);
            } else {
                setStatus("Error loading plugins: " + (response ? response.message : "Unknown error"));
            }
        } catch (e) {
            setStatus(e.message);
        }
    }

    function filterAndRender() {
        if (!pluginCache) return;

        const searchQuery = document.getElementById('search-box').value.toLowerCase();
        const showInstalledOnly = document.getElementById('installed-toggle').checked;

        const filteredKeys = Object.keys(pluginCache).filter(key => {
            const info = pluginCache[key];
            const description = info[2].toLowerCase();
            const matchesSearch = description.includes(searchQuery) || key.toLowerCase().includes(searchQuery);
            const isInstalled = installedCache.indexOf(key) !== -1;
            
            if (showInstalledOnly && !isInstalled) return false;
            return matchesSearch;
        });

        const filteredData = {};
        filteredKeys.forEach(key => filteredData[key] = pluginCache[key]);

        renderPlugins(filteredData, installedCache);
    }

    function sortPlugins(pluginData, sortBy) {
        const keys = Object.keys(pluginData);
        
        switch(sortBy) {
            case 'name':
                return keys.sort((a, b) => a.localeCompare(b));
            case 'name-desc':
                return keys.sort((a, b) => b.localeCompare(a));
            case 'updated':
                return keys.sort((a, b) => {
                    const dateA = new Date(pluginData[a][4] || 0);
                    const dateB = new Date(pluginData[b][4] || 0);
                    return dateB - dateA; // Newest first
                });
            case 'updated-oldest':
                return keys.sort((a, b) => {
                    const dateA = new Date(pluginData[a][4] || 0);
                    const dateB = new Date(pluginData[b][4] || 0);
                    return dateA - dateB; // Oldest first
                });
            default:
                return keys.sort((a, b) => a.localeCompare(b));
        }
    }

    function renderPlugins(pluginData, installedList) {
        const container = document.getElementById('plugins-list');
        if (!container) return;
        container.innerHTML = '';
        
        const keys = sortPlugins(pluginData, currentSort);

        if (keys.length === 0) {
            container.innerHTML = '<div style="grid-column: 1/-1; text-align: center; padding: 40px; color: #888;">No plugins match your filters.</div>';
            return;
        }

        const now = new Date();

        for (const key of keys) {
            const info = pluginData[key];
            const author = info[0];
            const repo = info[1];
            const description = info[2];
            const branch = info[3];
            const updatedAt = info[4];
            const isInstalled = installedList.indexOf(key) !== -1;

            let timeStr = "";
            if (updatedAt) {
                const date = new Date(updatedAt);
                const diffMs = now - date;
                const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));
                
                if (diffDays === 0) timeStr = "today";
                else if (diffDays === 1) timeStr = "yesterday";
                else if (diffDays < 30) timeStr = diffDays + " days ago";
                else if (diffDays < 365) timeStr = Math.floor(diffDays/30) + " months ago";
                else timeStr = Math.floor(diffDays/365) + " years ago";
            }

            const card = document.createElement('div');
            card.className = 'card';
            
            let html = `
                <div class="card-header">
                    ${key}
                    ${isInstalled ? '<span class="installed-badge">Installed</span>' : ''}
                </div>
                <div class="card-desc">${description}</div>
                <div class="card-meta">
                    Author: ${author} <br> 
                    Repo: ${repo} (${branch})
                    ${timeStr ? '<br> Last updated: ' + timeStr : ''}
                </div>
                <div class="actions">
                    <a class="btn-info btn-link" href="https://github.com/${author}/${repo}" target="_blank">Repo</a>
            `;
            
            const cardId = 'btn-' + key.replace(/[^a-z0-9]/gi, '-');

            if (isInstalled) {
                html += `
                    <button class="btn-update" data-key="${key}" data-action="update">Update</button>
                    <button class="btn-remove" data-key="${key}" data-action="remove">Remove</button>
                `;
            } else {
                html += `
                    <button class="btn-install" data-key="${key}" data-action="install">Install</button>
                `;
            }
            
            html += `</div>`;
            card.innerHTML = html;
            container.appendChild(card);
        }

        // Add event listeners only to action buttons
        container.querySelectorAll('button[data-action]').forEach(btn => {
            btn.onclick = function() {
                handleAction(this.getAttribute('data-action'), this.getAttribute('data-key'));
            };
        });
    }

    async function handleAction(action, pluginKey) {
        if (action === 'remove' && !confirm(`Are you sure you want to remove ${pluginKey}?`)) {
            return;
        }
        
        setStatus(`Executing ${action} for ${pluginKey}... This may take a moment.`);
        try {
            const response = await sendCommand(action, { plugin_key: pluginKey });
            if (response && response.status === 'success') {
                alert(`Successfully completed ${action} for ${pluginKey}. Domoticz restart may be required.`);
                loadPlugins();
            } else {
                alert(`Error during ${action}: ` + (response ? response.message : "Unknown error"));
                setStatus("Operation failed.");
            }
        } catch (e) {
            alert("Error: " + e.message);
            setStatus("Operation failed.");
        }
    }

    // Domoticz SPA might load this multiple times or at different ready states
    if (document.readyState === 'complete' || document.readyState === 'interactive') {
        setTimeout(init, 100);
    } else {
        document.addEventListener('DOMContentLoaded', init);
    }
    
    // Fallback for some browsers/SPA engines
    window.onload = init;
})();
</script>