.. otsikko: MAC-osoitteen OUI-haku
.. etana: mac-oui-lookup
.. päivämäärä: 2025-12-26 15:00:00 UTC
.. tunnisteet: laskimet, verkko, mac-osoite
.. luokka: Laskimet
.. linkki:
.. kuvaus: Tunnista verkkolaitteiden toimittajat MAC-osoitteesta OUI (Organizationally Unique Identifier). Etsi valmistaja, rekisteröity organisaatio ja MAC-osoitetyyppi.
.. tyyppi: teksti
<style>
        .mac-lookup-container {
            max-width: 900px;
            margin: 20px auto;
            padding: 20px;
        }

        .search-box {
            margin-bottom: 30px;
            padding: 20px;
            background: #f5f5f5;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        .search-box h2 {
            margin-top: 0;
            color: #333;
        }

        .input-group {
            display: flex;
            gap: 10px;
            margin-top: 15px;
        }

        #macInput {
            flex: 1;
            padding: 12px;
            font-size: 16px;
            border: 2px solid #ddd;
            border-radius: 4px;
            font-family: monospace;
        }

        #macInput:focus {
            outline: none;
            border-color: #4CAF50;
        }

        #searchBtn {
            padding: 12px 30px;
            font-size: 16px;
            background: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-weight: bold;
        }

        #searchBtn:hover {
            background: #45a049;
        }

        #searchBtn:active {
            background: #3d8b40;
        }

        .help-text {
            margin-top: 10px;
            font-size: 14px;
            color: #666;
        }

        .results {
            margin-top: 20px;
            padding: 20px;
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            display: none;
        }

        .results.show {
            display: block;
        }

        .result-row {
            margin: 15px 0;
            padding-bottom: 15px;
            border-bottom: 1px solid #eee;
        }

        .result-row:last-child {
            border-bottom: none;
            padding-bottom: 0;
        }

        .result-label {
            font-weight: bold;
            color: #555;
            display: inline-block;
            width: 180px;
        }

        .result-value {
            color: #333;
            word-wrap: break-word;
        }

        .result-value.mac {
            font-family: monospace;
            font-size: 18px;
            color: #0066cc;
        }

        .error {
            background: #ffebee;
            color: #c62828;
            padding: 15px;
            border-radius: 4px;
            margin-top: 20px;
        }

        .info {
            background: #e3f2fd;
            color: #1565c0;
            padding: 15px;
            border-radius: 4px;
            margin-top: 20px;
        }

        .loading {
            text-align: center;
            padding: 20px;
            color: #666;
        }

        .stats {
            margin-top: 30px;
            padding: 15px;
            background: #f9f9f9;
            border-radius: 4px;
            font-size: 14px;
            color: #666;
        }
    </style>
<div class="mac-lookup-container">
<div class="search-box">
<h2>MAC-osoitteen OUI-haku</h2>
<p>Anna MAC-osoite etsiäksesi toimittajan tiedot IEEE OUI -tietokannasta.</p>
<div class="input-group">
<input id="macInput" maxlength="17" placeholder="e.g., 00:1A:2B:3C:4D:5E or 001A2B" type="text"/>
<button id="searchBtn" onclick="searchMAC()">Haku</button>
</div>
<div class="help-text">Tuetut muodot: 00:1A:2B:3C:4D:5E, 00-1A-2B-3C-4D-5E, 001A2B3C4D5E tai pelkkä etuliite (001A2B)</div>
</div>
<div class="results" id="results"></div>
<div class="stats">
<strong>Tietokantatilastot:</strong> <span id="dbStats">Ladataan...</span>
</div>
</div>
<script>
        // Embedded MAC OUI database
        // Load MAC database from external JSON
        let macDatabase = [];
        let databaseLoaded = false;

        async function loadDatabase() {
            try {
                const response = await fetch('/assets/js/mac_address_vendor_database.json');
                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }
                macDatabase = await response.json();
                databaseLoaded = true;
                
                // Update stats display
                const stats = document.getElementById('dbStats');
                stats.textContent = `${macDatabase.length.toLocaleString()} entries loaded`;
                
                console.log(`Loaded ${macDatabase.length} MAC address entries`);
            } catch (error) {
                console.error('Error loading MAC database:', error);
                const stats = document.getElementById('dbStats');
                stats.textContent = 'Error loading database';
                stats.style.color = 'red';
            }
        }

        // Load database when page loads
        document.addEventListener('DOMContentLoaded', loadDatabase);

        // Normalize MAC address input
        function normalizeMac(mac) {
            // Remove all non-hex characters
            let normalized = mac.replace(/[^0-9A-Fa-f]/g, '').toUpperCase();
            return normalized;
        }

        // Format MAC address with colons
        function formatMac(mac) {
            let clean = mac.replace(/[^0-9A-Fa-f]/g, '');
            let formatted = '';
            for (let i = 0; i < clean.length && i < 12; i += 2) {
                if (i > 0) formatted += ':';
                formatted += clean.substr(i, 2);
            }
            return formatted.toUpperCase();
        }

        // Search for MAC address in database
        function searchMAC() {
            const input = document.getElementById('macInput').value.trim();
            const resultsDiv = document.getElementById('results');

            if (!databaseLoaded) {
                resultsDiv.innerHTML = '<div class="error">Database is still loading. Please wait...</div>';
                resultsDiv.classList.add('show');
                return;
            }

            if (!input) {
                resultsDiv.innerHTML = '<div class="error">Please enter a MAC address.</div>';
                resultsDiv.classList.add('show');
                return;
            }

            // Normalize input
            const normalized = normalizeMac(input);

            if (normalized.length < 6) {
                resultsDiv.innerHTML = '<div class="error">MAC address must be at least 6 characters (3 octets) long.</div>';
                resultsDiv.classList.add('show');
                return;
            }

            // Extract prefix and search
            // The macPrefix field uses colon notation (e.g., "00:00:0C")
            const searchPrefix = formatMac(normalized.substring(0, 6));
            
            // Search for exact or partial matches
            let matches = macDatabase.filter(entry => {
                const entryPrefix = entry.macPrefix.replace(/:/g, '');
                const inputPrefix = normalized.substring(0, entryPrefix.length);
                return entryPrefix === inputPrefix || inputPrefix.startsWith(entryPrefix);
            });

            if (matches.length === 0) {
                resultsDiv.innerHTML = `
                    <div class="info">
                        <strong>No match found</strong><br>
                        The MAC address <code>${formatMac(normalized)}</code> is not in the IEEE OUI database.<br>
                        This could be a locally administered address or a private/virtual MAC address.
                    </div>
                `;
                resultsDiv.classList.add('show');
                return;
            }

            // Display results (show most specific match first)
            let html = '';

            if (matches.length > 1) {
                html += `<div class="info">Found ${matches.length} matching entries. Showing most specific match first.</div>`;
            }

            matches.slice(0, 3).forEach((match, index) => {
                const isPrivate = match.private ? ' (Private)' : '';
                html += `
                    <div class="result-row">
                        ${index === 0 ? '<h3>Match Found</h3>' : '<h4>Alternative Match</h4>'}
                        <div><span class="result-label">MAC Address Entered:</span><span class="result-value mac">${formatMac(normalized)}</span></div>
                        <div><span class="result-label">Prefix:</span><span class="result-value mac">${match.macPrefix}</span></div>
                        <div><span class="result-label">Vendor:</span><span class="result-value">${match.vendorName || 'N/A'}${isPrivate}</span></div>
                        <div><span class="result-label">Block Type:</span><span class="result-value">${match.blockType}</span></div>
                        <div><span class="result-label">Last Updated:</span><span class="result-value">${match.lastUpdate}</span></div>
                    </div>
                `;
            });

            resultsDiv.innerHTML = html;
            resultsDiv.classList.add('show');
        }

        // Allow Enter key to trigger search
        document.getElementById('macInput').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                searchMAC();
            }
        });

        // Auto-format input as user types
        document.getElementById('macInput').addEventListener('input', function(e) {
            let value = e.target.value;
            let cursorPos = e.target.selectionStart;

            // Only auto-format if user is typing (not deleting)
            if (value.length > this.lastLength) {
                let normalized = normalizeMac(value);
                if (normalized.length <= 12) {
                    let formatted = '';
                    for (let i = 0; i < normalized.length; i += 2) {
                        if (i > 0) formatted += ':';
                        formatted += normalized.substr(i, 2);
                    }
                    e.target.value = formatted;

                    // Adjust cursor position
                    if (cursorPos % 3 === 0 && cursorPos > 0) {
                        e.target.selectionStart = e.target.selectionEnd = cursorPos + 1;
                    }
                }
            }

            this.lastLength = value.length;
        });
    </script>