SPA-landing/symbols/js/app/custom.js

// ============================================
// CUSTOM - Eigene Symbole und UI
// ============================================

// Custom Symbols aus localStorage
var customSymbols = [];

// ========== TEXT-GENERATOR UI ==========
function toggleTextGenerator() {
    var generator = document.querySelector('.text-generator');
    generator.classList.toggle('collapsed');
}

// ========== CUSTOM SYMBOLS STORAGE ==========
function loadCustomSymbols() {
    try {
        var stored = localStorage.getItem('customSymbols');
        if (stored) {
            customSymbols = JSON.parse(stored);
        }
    } catch (e) {
        console.error('Fehler beim Laden der eigenen Symbole:', e);
        customSymbols = [];
    }
}

function saveCustomSymbols() {
    try {
        localStorage.setItem('customSymbols', JSON.stringify(customSymbols));
    } catch (e) {
        console.error('Fehler beim Speichern der eigenen Symbole:', e);
    }
}

function openSaveModal() {
    var modal = document.getElementById('saveModal');
    var nameInput = document.getElementById('symbolName');
    var descInput = document.getElementById('symbolDescription');

    var state = window.TextGenState ? window.TextGenState.current : {};
    var suggestedName = state.text ? state.text.replace(/\n/g, ' ').substring(0, 30) : '';
    nameInput.value = suggestedName;
    descInput.value = '';

    modal.style.display = 'flex';
    nameInput.focus();
}

function closeSaveModal() {
    var modal = document.getElementById('saveModal');
    modal.style.display = 'none';
}

function saveCustomSymbol() {
    var nameInput = document.getElementById('symbolName');
    var descInput = document.getElementById('symbolDescription');

    var name = nameInput.value.trim();
    if (!name) {
        showNotification('Bitte einen Namen eingeben!', 'error');
        return;
    }

    var svg = window.SvgGenerator ? window.SvgGenerator.generate(window.TextGenState.current) : '';

    var newSymbol = {
        id: 'custom_' + Date.now(),
        name: name,
        description: descInput.value.trim(),
        svg: svg,
        category: 'custom',
        tags: ['eigene', 'custom', name.toLowerCase()],
        createdAt: new Date().toISOString()
    };

    customSymbols.push(newSymbol);
    saveCustomSymbols();

    closeSaveModal();
    showNotification('Symbol "' + name + '" gespeichert!');
}

function deleteCustomSymbol(id) {
    if (!confirm('Symbol wirklich loeschen?')) return;

    customSymbols = customSymbols.filter(function(s) { return s.id !== id; });
    saveCustomSymbols();
    renderSymbols();
    showNotification('Symbol geloescht');
}

function createCustomSymbolCard(symbol) {
    var card = document.createElement('div');
    card.className = 'symbol-card';
    card.innerHTML =
        '<button class="btn-delete" onclick="event.stopPropagation(); deleteCustomSymbol(\'' + symbol.id + '\')" title="Loeschen">X</button>' +
        '<div class="symbol-preview">' + symbol.svg + '</div>' +
        '<div class="symbol-name">' + escapeHtml(symbol.name) + '</div>' +
        '<div class="symbol-actions">' +
            '<button class="btn-action btn-copy" onclick="copySymbolAsImage(\'' + symbol.id + '\', true)" title="Kopieren">Kopieren</button>' +
            '<button class="btn-action btn-svg" onclick="downloadSymbolSVG(\'' + symbol.id + '\', true)" title="SVG">SVG</button>' +
            '<button class="btn-action btn-dxf" onclick="downloadSymbolDXF(\'' + symbol.id + '\', true)" title="DXF">DXF</button>' +
            '<button class="btn-action btn-legend" onclick="addSymbolToLegend(\'' + symbol.id + '\', true)" title="Legende">+</button>' +
        '</div>';
    return card;
}

// ========== IMPRESSUM ==========
function openImpressum() {
    var modal = document.getElementById('impressumModal');
    if (modal) modal.style.display = 'flex';
}

function closeImpressum() {
    var modal = document.getElementById('impressumModal');
    if (modal) modal.style.display = 'none';
}

// Init beim Laden
document.addEventListener('DOMContentLoaded', function() {
    loadCustomSymbols();
});