topo-lldp/arp.html at main · sinnoken/topo-lldp · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
<!DOCTYPE html>
<html lang="en" data-theme="light">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ARP Map Mapper | Network Toolbox</title>
    <link href="css/output.css" rel="stylesheet">

    <link href="https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500;700&display=swap" rel="stylesheet">
    <link rel="stylesheet"
        href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20,400,0,0" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg">
    <style>
        body {
            font-family: 'Google Sans', sans-serif;
        }

        .font-mono-custom {
            font-family: 'ui-monospace', 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', monospace;
        }
    </style>
</head>

<body class="min-h-screen flex flex-col bg-base-200">
    <nav class="navbar bg-base-100 shadow-sm px-6 h-16 flex-none">
        <div class="flex-1 gap-2">
            <a href="index.html" class="flex items-center gap-2 hover:opacity-80 transition-opacity">
                <span class="material-symbols-outlined text-primary text-3xl">settings_ethernet</span>
                <span class="text-xl font-bold text-base-content">Network <span
                        class="text-primary">Toolbox</span></span>
            </a>
            <span class="material-symbols-outlined text-warning text-3xl font-bold">dataset</span>
            <span class="text-xl font-bold tracking-tight">ARP <span class="text-warning">Mapper</span></span>
        </div>
        <div class="flex-none gap-2">
            <a href="https://github.com/sinnoken/topo-lldp" target="_blank" rel="noopener noreferrer"
                class="btn btn-ghost btn-circle" aria-label="GitHub Repository">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
                    <path
                        d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.041-1.416-4.041-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
                </svg>
            </a>
        </div>
    </nav>

    <main class="flex-grow container mx-auto px-4 py-8 max-w-6xl">
        <header class="mb-8 flex flex-col md:flex-row justify-between items-start md:items-end gap-4">
            <div>
                <div class="flex items-center gap-3 mb-2">
                    <span class="material-symbols-outlined text-primary text-4xl">dataset</span>
                    <h1 class="text-3xl font-bold text-base-content">ARP Auto-Mapper</h1>
                </div>
                <p class="text-base-content/60">Paste raw logs to instantly generate structured JSON and auto-copy to
                    clipboard.</p>
            </div>

            <div id="statusTag" class="invisible alert alert-success py-2 px-4 shadow-lg w-fit">
                <span class="material-symbols-outlined text-sm">check_circle</span>
                <span class="text-sm font-bold">Auto-copied to clipboard!</span>
            </div>
        </header>

        <div class="grid md:grid-cols-2 gap-8 h-fit lg:h-[600px]">
            <div class="flex flex-col h-full gap-3">
                <div class="flex justify-between items-center px-1">
                    <label class="text-sm font-bold uppercase tracking-wider text-base-content/70">Raw Data
                        Input</label>
                    <button id="clearBtn" class="btn btn-ghost btn-xs text-error gap-1">
                        <span class="material-symbols-outlined text-sm">delete</span> Clear
                    </button>
                </div>
                <textarea id="input"
                    class="textarea textarea-bordered flex-grow font-mono-custom text-sm shadow-inner focus:textarea-primary leading-relaxed"
                    placeholder="Paste 'diagnose ip arp list' ..."></textarea>
            </div>

            <div class="flex flex-col h-full gap-3">
                <div class="flex justify-between items-center px-1">
                    <label class="text-sm font-bold uppercase tracking-wider text-base-content/70">JSON Output</label>
                </div>
                <textarea id="output" readonly
                    class="textarea textarea-bordered flex-grow font-mono-custom text-sm bg-base-100 shadow-inner text-primary"
                    placeholder="Waiting for input..."></textarea>

                <button id="copyBtn" class="btn btn-neutral w-full shadow-lg gap-2 mt-2">
                    <span class="material-symbols-outlined text-lg">content_copy</span>
                    Manual Copy JSON
                </button>
            </div>
        </div>
    </main>
    <footer class="footer footer-center p-3 bg-base-100 text-base-content/50 border-t border-base-300 flex-none">
        &copy; 2026 Network Admin Suite. Open Source Infrastructure Tools.
    </footer>
    <script>
        const CONFIG = {
            STORAGE: {
                POSITIONS: 'networkNodesPosition',
                DATA: 'networkTopologyData',
                ARP_MAP: 'networkArpMap',
                EXPIRY: 'storageExpiry'
            },
            STORAGE_EXPIRY_MS: 1 * 8 * 60 * 60 * 1000,
        };

        function universalArpParser(rawText) {
            const root = { arpMap: {} };
            const blocks = rawText.split(/_{5,}/);

            blocks.forEach(block => {
                const lines = block.trim().split('\n');
                if (lines.length < 1) return;

                const headerMatch = lines[0].match(/^([\w-]+)\s*\(([\d\.]+)\):/);
                if (!headerMatch) return;

                const hostname = headerMatch[1];
                const entries = [];

                lines.forEach(line => {
                    const coreMatch = line.trim().match(/ifname=(\S+)\s+([\d\.]+)\s+([0-9a-f:]{17})/i);
                    if (coreMatch) {
                        const [_, rawIface, ip, mac] = coreMatch;
                        const lowerMac = mac.toLowerCase();
                        if (ip.startsWith('224.') || ip.startsWith('169.254.')) return;
                        if (lowerMac === '00:00:00:00:00:00' || lowerMac === 'ff:ff:ff:ff:ff:ff') return;

                        entries.push({ port: rawIface, mac: lowerMac, ip: ip });
                    }
                });

                root.arpMap[hostname] = { mgmtIp: headerMatch[2], entries: entries };
            });
            return root;
        }

        // Automatic Processing
        function autoProcess() {
            const inputArea = document.getElementById('input');
            const outputArea = document.getElementById('output');
            const rawText = inputArea.value;

            if (!rawText.trim()) {
                outputArea.value = "";
                return;
            }

            const result = universalArpParser(rawText);
            const jsonString = JSON.stringify(result, null, 4);
            outputArea.value = jsonString;

            // 儲存至 Storage
            saveToStorage(result);

            // 自動複製 (可選：只有在手動輸入時才自動複製)
            navigator.clipboard.writeText(jsonString).then(() => {
                showStatus();
            }).catch(err => console.error('Auto-copy failed', err));
        }

        function showStatus() {
            const statusTag = document.getElementById('statusTag');
            statusTag.classList.remove('invisible');
            setTimeout(() => {
                statusTag.classList.add('invisible');
            }, 3000);
        }

        function manualCopy() {
            const output = document.getElementById('output');
            if (!output.value) return;
            navigator.clipboard.writeText(output.value);
            showStatus();
        }

        function clearInput() {
            document.getElementById('input').value = "";
            document.getElementById('output').value = "";
            document.getElementById('statusTag').classList.add('invisible');
        }

        // 1. 新增：專門處理儲存的函式
        function saveToStorage(data) {
            localStorage.setItem(CONFIG.STORAGE.ARP_MAP, JSON.stringify(data));
            const expiryTime = new Date().getTime() + CONFIG.STORAGE_EXPIRY_MS;
            localStorage.setItem(CONFIG.STORAGE.EXPIRY, expiryTime.toString());
        }

        // 2. 新增：專門處理讀取的函式
        function loadFromStorage() {
            const expiry = localStorage.getItem(CONFIG.STORAGE.EXPIRY);
            const now = new Date().getTime();

            // 檢查是否過期
            if (expiry && now < parseInt(expiry)) {
                const savedData = localStorage.getItem(CONFIG.STORAGE.ARP_MAP);
                return savedData ? JSON.parse(savedData) : null;
            }

            // 過期則清理
            localStorage.removeItem(CONFIG.STORAGE.ARP_MAP);
            localStorage.removeItem(CONFIG.STORAGE.EXPIRY);
            return null;
        }

        // 3. 初始化事件監聽 (核心修改點)
        function init() {
            const inputEl = document.getElementById('input');
            const clearBtn = document.getElementById('clearBtn');
            const copyBtn = document.getElementById('copyBtn');

            // --- A. 恢復狀態 (從 localStorage 拿資料) ---
            const cachedData = loadFromStorage();
            if (cachedData) {
                const outputArea = document.getElementById('output');
                outputArea.value = JSON.stringify(cachedData, null, 4);
                console.log("Restored data from storage.");
            }

            // --- B. 綁定事件監聽 ---
            if (inputEl) {
                inputEl.addEventListener('input', autoProcess);
            }

            if (clearBtn) {
                clearBtn.addEventListener('click', () => {
                    clearInput();
                    // 清理時也一併清空 Storage
                    localStorage.removeItem(CONFIG.STORAGE.ARP_MAP);
                    localStorage.removeItem(CONFIG.STORAGE.EXPIRY);
                });
            }

            if (copyBtn) {
                copyBtn.addEventListener('click', manualCopy);
            }
        }

        // 當 DOM 準備好後執行 init
        document.addEventListener('DOMContentLoaded', init);
    </script>
</body>

</html>