☰

Greasy Fork 还支持 简体中文。

WME Residencial Navigator

Herramienta completa para gestionar lugares residenciales en WME con nombre visible

// ==UserScript==
// @name         WME Residencial Navigator
// @namespace    http://tampermonkey.net/
// @version      2.3
// @description  Herramienta completa para gestionar lugares residenciales en WME con nombre visible
// @author       TuNombre
// @match        https://www.waze.com/*/editor*
// @match        https://beta.waze.com/*/editor*
// @match        https://www.waze.com/editor/*
// @grant        GM_addStyle
// @require      https://greasyfork.org/scripts/24851-wazewrap/code/WazeWrap.js
// ==/UserScript==

(function() {
    'use strict';

    // Configuración
    const TAB_NAME = "Residenciales";
    const DEBUG_MODE = true;

    // Estilos mejorados
    GM_addStyle(`
        #residentialPanel {
            background: white;
            padding: 15px;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            width: 100%;
            max-height: 80vh;
            overflow-y: auto;
            margin-top: 10px;
            border: 1px solid #ddd;
        }

        #residentialList {
            width: 100%;
            margin: 15px 0;
            padding: 5px;
            max-height: 60vh;
            overflow-y: auto;
        }

        .residential-item {
            display: flex;
            align-items: center;
            padding: 8px 0;
            border-bottom: 1px solid #eee;
        }

        .residential-checkbox {
            margin-right: 12px;
            cursor: pointer;
        }

        .residential-name {
            flex-grow: 1;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-size: 14px;
        }

        .go-to-btn {
            background: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            padding: 5px 10px;
            cursor: pointer;
            margin-left: 10px;
            flex-shrink: 0;
            font-size: 13px;
            transition: background 0.2s;
        }

        .go-to-btn:hover {
            background: #3e8e41;
        }

        .action-buttons {
            display: flex;
            gap: 10px;
            margin-top: 15px;
        }

        .refresh-btn, .delete-btn {
            color: white;
            border: none;
            border-radius: 4px;
            padding: 8px 12px;
            cursor: pointer;
            flex-grow: 1;
            font-weight: bold;
            transition: opacity 0.2s;
        }

        .refresh-btn {
            background: #2196F3;
        }

        .refresh-btn:hover {
            opacity: 0.9;
        }

        .delete-btn {
            background: #f44336;
        }

        .delete-btn:hover {
            opacity: 0.9;
        }

        .select-all-container {
            margin: 10px 0;
            font-size: 14px;
            display: flex;
            align-items: center;
        }

        .status-message {
            margin-top: 15px;
            padding: 10px;
            border-radius: 4px;
            font-size: 13px;
            text-align: center;
            display: none;
        }

        .success {
            background-color: #dff0d8;
            color: #3c763d;
            border: 1px solid #d6e9c6;
        }

        .warning {
            background-color: #fcf8e3;
            color: #8a6d3b;
            border: 1px solid #faebcc;
        }

        .error {
            background-color: #f2dede;
            color: #a94442;
            border: 1px solid #ebccd1;
        }

        /* Estilo para la pestaña personalizada */
        #user-tabs .residential-tab {
            background-color: #f8f9fa;
        }

        #user-tabs .residential-tab.active {
            background-color: #e9ecef;
        }

        /* Asegurar que el texto de la pestaña sea visible */
        #user-tabs .residential-tab a {
            color: #333 !important;
            font-weight: bold;
            padding: 8px 12px;
            display: block;
        }

        /* Botón flotante de respaldo */
        #residentialFloatingBtn {
            position: fixed;
            bottom: 20px;
            right: 20px;
            z-index: 9999;
            background: #4CAF50;
            color: white;
            border: none;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            font-size: 20px;
            cursor: pointer;
            box-shadow: 0 2px 10px rgba(0,0,0,0.2);
            display: none;
        }
    `);

    let residentialPlaces = [];
    let panelInitialized = false;

    // Función para debug
    function debugLog(message) {
        if (DEBUG_MODE) {
            console.log(`[Residencial Navigator] ${message}`);
        }
    }

    // Función principal para registrar la pestaña
    function registerSidebarTab() {
        debugLog(`Intentando registrar pestaña: ${TAB_NAME}`);

        // Método 1: API oficial de WME
        if (typeof W !== 'undefined' && W.userscripts && typeof W.userscripts.registerSidebarTab === 'function') {
            try {
                const { tabLabel, tabPane } = W.userscripts.registerSidebarTab(TAB_NAME);

                if (tabPane) {
                    debugLog("Pestaña registrada con API oficial");

                    // Asegurar que el nombre sea visible
                    tabLabel.textContent = TAB_NAME;
                    tabLabel.title = TAB_NAME;
                    tabLabel.style.color = "#333";
                    tabLabel.style.fontWeight = "bold";

                    const contentPanel = document.createElement("div");
                    contentPanel.id = "residential-content";
                    tabPane.appendChild(contentPanel);

                    tabLabel.addEventListener("click", function(e) {
                        e.preventDefault();
                        toggleResidentialPanel(contentPanel);
                    });

                    initResidentialPanel(contentPanel);
                    return;
                }
            } catch (e) {
                debugLog(`Error con API oficial: ${e}`);
            }
        }

        // Método 2: Alternativo si falla la API
        setupAlternativeTab();
    }

    // Método alternativo para crear pestaña
    function setupAlternativeTab() {
        debugLog("Usando método alternativo para crear pestaña");

        const userTabs = document.querySelector('#user-tabs ul');
        if (!userTabs) {
            debugLog("No se encontró #user-tabs, creando botón flotante");
            createFloatingButton();
            return;
        }

        // Verificar si la pestaña ya existe
        if (document.querySelector(`#user-tabs a[title="${TAB_NAME}"]`)) {
            debugLog("La pestaña ya existe");
            return;
        }

        // Crear nueva pestaña
        const tabItem = document.createElement('li');
        tabItem.className = 'residential-tab';

        const tabLink = document.createElement('a');
        tabLink.href = '#';
        tabLink.title = TAB_NAME;
        tabLink.textContent = TAB_NAME;

        tabItem.appendChild(tabLink);
        userTabs.appendChild(tabItem);

        // Crear panel de contenido
        const userPanel = document.querySelector('#user-panel');
        if (!userPanel) {
            debugLog("No se encontró #user-panel, creando botón flotante");
            createFloatingButton();
            return;
        }

        const contentPanel = document.createElement('div');
        contentPanel.id = 'residential-content';
        contentPanel.style.display = 'none';
        userPanel.appendChild(contentPanel);

        // Manejar clics en la pestaña
        tabLink.addEventListener('click', function(e) {
            e.preventDefault();
            toggleResidentialPanel(contentPanel);

            // Actualizar estado activo
            document.querySelectorAll('#user-tabs li').forEach(tab => {
                tab.classList.remove('active');
            });
            this.parentNode.classList.add('active');
        });

        initResidentialPanel(contentPanel);
    }

    // Crear botón flotante como respaldo
    function createFloatingButton() {
        debugLog("Creando botón flotante de respaldo");

        const floatingBtn = document.createElement('button');
        floatingBtn.id = 'residentialFloatingBtn';
        floatingBtn.textContent = '🏠';
        floatingBtn.title = TAB_NAME;
        floatingBtn.style.display = 'block';
        document.body.appendChild(floatingBtn);

        const panel = document.createElement('div');
        panel.id = 'residentialPanel';
        panel.style.position = 'fixed';
        panel.style.right = '20px';
        panel.style.bottom = '80px';
        panel.style.zIndex = '9998';
        panel.style.display = 'none';
        panel.style.width = '300px';
        document.body.appendChild(panel);

        initResidentialPanel(panel);

        floatingBtn.addEventListener('click', () => {
            panel.style.display = panel.style.display === 'none' ? 'block' : 'none';
        });
    }

    // Inicializar el panel de contenido
    function initResidentialPanel(container) {
        if (panelInitialized) return;
        panelInitialized = true;

        debugLog("Inicializando panel residencial");

        const panel = document.createElement('div');
        panel.id = 'residentialPanel';

        panel.innerHTML = `
            <h3 style="margin-top: 0; color: #333;">Lugares Residenciales</h3>
            <div class="select-all-container">
                <input type="checkbox" id="selectAllResidentials" class="residential-checkbox">
                <label for="selectAllResidentials">Seleccionar todos</label>
            </div>
            <div id="residentialList"></div>
            <div class="action-buttons">
                <button class="refresh-btn">🔄 Actualizar</button>
                <button class="delete-btn">🗑️ Eliminar</button>
            </div>
            <div id="statusMessage" class="status-message" style="display: none;"></div>
        `;

        // Configurar eventos
        panel.querySelector('#selectAllResidentials').addEventListener('change', function() {
            const checkboxes = panel.querySelectorAll('.residential-checkbox');
            checkboxes.forEach(checkbox => {
                if (checkbox !== this) checkbox.checked = this.checked;
            });
        });

        panel.querySelector('.refresh-btn').addEventListener('click', updateResidentialList);
        panel.querySelector('.delete-btn').addEventListener('click', deleteSelectedPlaces);

        container.appendChild(panel);
        updateResidentialList();
    }

    // Mostrar/ocultar panel
    function toggleResidentialPanel(contentPanel) {
        if (!contentPanel) return;

        debugLog("Alternando visibilidad del panel");

        // Ocultar todos los paneles primero
        document.querySelectorAll("#user-panel > div").forEach(panel => {
            panel.style.display = "none";
        });

        // Mostrar/ocultar nuestro panel
        contentPanel.style.display = contentPanel.style.display === "block" ? "none" : "block";

        // Cargar datos si se muestra
        if (contentPanel.style.display === "block" && residentialPlaces.length === 0) {
            updateResidentialList();
        }
    }

    // Actualizar lista de lugares residenciales
    function updateResidentialList() {
        debugLog("Actualizando lista de residenciales");

        if (!W || !W.model || !W.model.venues) {
            showStatusMessage("WME no está completamente cargado", 'error');
            return;
        }

        residentialPlaces = [];
        const venues = W.model.venues.objects;
        let count = 0;

        for (let id in venues) {
            const venue = venues[id];
            if (venue.attributes.categories && venue.attributes.categories.includes('RESIDENCE_HOME')) {
                const name = venue.attributes.name || 'Sin nombre';
                const geom = venue.attributes.geoJSONGeometry;

                if (geom && geom.coordinates) {
                    let lat, lon;
                    if (geom.type === "Point") {
                        [lon, lat] = geom.coordinates;
                    } else if (geom.type === "Polygon") {
                        [lon, lat] = geom.coordinates[0][0];
                    } else {
                        continue;
                    }

                    residentialPlaces.push({
                        id: id,
                        name: name,
                        lat: lat,
                        lon: lon,
                        venueObject: venue
                    });
                    count++;
                }
            }
        }

        updateListDisplay();
        showStatusMessage(`Encontrados ${count} lugares residenciales`, count > 0 ? 'success' : 'warning');
        debugLog(`Encontrados ${count} lugares residenciales`);
    }

    // Actualizar visualización de la lista
    function updateListDisplay() {
        const listContainer = document.getElementById('residentialList');
        if (!listContainer) return;

        listContainer.innerHTML = '';

        if (residentialPlaces.length === 0) {
            listContainer.innerHTML = '<div style="padding: 10px; text-align: center;">No se encontraron lugares residenciales</div>';
            return;
        }

        residentialPlaces.forEach((place, index) => {
            const item = document.createElement('div');
            item.className = 'residential-item';
            item.innerHTML = `
                <input type="checkbox" class="residential-checkbox" data-id="${place.id}">
                <span class="residential-name" title="${place.name}">${place.name || `Lugar ${index + 1}`}</span>
                <button class="go-to-btn" data-id="${place.id}">Ir</button>
            `;

            item.querySelector('.go-to-btn').addEventListener('click', () => goToPlace(place));
            listContainer.appendChild(item);
        });
    }

    // Navegar a un lugar
    function goToPlace(place) {
        debugLog(`Navegando a lugar: ${place.name || place.id}`);

        if (!W || !W.map) return;

        try {
            const center = WazeWrap.LonLat.fromObject({lon: place.lon, lat: place.lat});
            W.map.setCenter(center, 18);

            if (place.venueObject) {
                W.model.venues.setSelectedVenue(place.venueObject);

                // Habilitar botón de guardar
                setTimeout(() => {
                    const saveBtn = document.querySelector('[title="Save"], [title="Guardar"]');
                    if (saveBtn) saveBtn.removeAttribute('disabled');
                }, 500);
            }
        } catch (e) {
            debugLog(`Error al navegar: ${e}`);
            showStatusMessage("Error al navegar al lugar", 'error');
        }
    }

    // Eliminar lugares seleccionados
    function deleteSelectedPlaces() {
        const checkboxes = document.querySelectorAll('.residential-checkbox:checked');
        if (checkboxes.length === 0) {
            showStatusMessage('Selecciona al menos un lugar', 'warning');
            return;
        }

        if (!confirm(`¿Eliminar ${checkboxes.length} lugar(es) seleccionado(s)?`)) return;

        let deletedCount = 0;
        let errors = 0;

        checkboxes.forEach(checkbox => {
            const id = checkbox.dataset.id;
            const place = W.model.venues.getObjectById(id);

            if (!place) {
                errors++;
                return;
            }

            try {
                const DeleteObject = require("Waze/Action/DeleteObject");
                const action = new DeleteObject(place);
                W.model.actionManager.add(action);
                deletedCount++;
                debugLog(`Eliminado lugar: ${id}`);
            } catch (e) {
                debugLog(`Error eliminando lugar ${id}: ${e}`);
                errors++;
            }
        });

        if (deletedCount > 0) {
            showStatusMessage(`Eliminados ${deletedCount} lugares (${errors} errores)`, 'success');
            updateResidentialList();

            // Habilitar botón de guardar
            setTimeout(() => {
                const saveBtn = document.querySelector('[title="Save"], [title="Guardar"]');
                if (saveBtn) saveBtn.removeAttribute('disabled');
            }, 500);
        } else {
            showStatusMessage("No se eliminaron lugares", 'warning');
        }
    }

    // Mostrar mensajes de estado
    function showStatusMessage(message, type) {
        debugLog(`Mensaje de estado [${type}]: ${message}`);

        const element = document.getElementById('statusMessage');
        if (!element) return;

        element.textContent = message;
        element.className = `status-message ${type}`;
        element.style.display = 'block';

        setTimeout(() => {
            element.style.display = 'none';
        }, 5000);
    }

    // Inicialización del script

        let initAttempts = 0;
    const MAX_INIT_ATTEMPTS = 5;

function initScript() {
    debugLog("Iniciando WME Residencial Navigator");
    initAttempts++;

    if (document.querySelector("#user-tabs")) {
        registerSidebarTab();
    } else if (initAttempts < MAX_INIT_ATTEMPTS) {
        setTimeout(initScript, 500);
    } else {
        debugLog("No se encontró #user-tabs después de múltiples intentos");
        createFloatingButton();
    }
}
    

    // Esperar a que cargue WME
    if (document.readyState === 'complete') {
        initScript();
    } else {
        window.addEventListener('load', initScript);
    }

    debugLog("Script cargado correctamente");
})();