InventoryProject/export.html at main · Xyrn23/InventoryProject · 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
246
247
248
249
250
251
252
253
254
255
256
257
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SQLite Table Exporter</title>
    <!-- Load Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Load Inter font -->
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
        body { font-family: 'Inter', sans-serif; }
    </style>
</head>
<body class="bg-gray-50 min-h-screen p-4 sm:p-8">

    <div class="max-w-4xl mx-auto bg-white shadow-2xl rounded-xl p-6 md:p-10 border border-indigo-100">
        <h1 class="text-3xl font-extrabold text-indigo-700 mb-2">
            SQLite Table Exporter
        </h1>
        <p class="text-gray-600 mb-6">
            Upload your `.db` file to extract the contents of the **<code class="font-mono text-pink-600 bg-pink-50 px-1 rounded">products</code>** table.
        </p>

        <!-- Step 1: File Input -->
        <div class="mb-8 border-b pb-6">
            <label for="dbFile" class="block text-sm font-medium text-gray-700 mb-3">
                1. Select Your Inventory Database File (.db)
            </label>
            <input type="file" id="dbFile" accept=".db" class="block w-full text-sm text-gray-900 border border-gray-300 rounded-lg cursor-pointer bg-gray-50 p-2.5 file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold file:bg-indigo-50 file:text-indigo-700 hover:file:bg-indigo-100 transition duration-150">
        </div>

        <!-- Step 2: Processing and Results -->
        <div id="loadingIndicator" class="hidden flex items-center justify-center space-x-3 text-lg font-medium text-indigo-600 p-8 bg-indigo-50 rounded-lg">
            <svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-indigo-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
            </svg>
            Processing database...
        </div>

        <div id="errorContainer" class="hidden bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded-xl mb-4" role="alert">
            <strong class="font-bold">Error:</strong>
            <span id="errorMessage" class="block sm:inline"></span>
        </div>

        <!-- Result Display Area -->
        <div id="resultsContainer" class="hidden mt-8">
            <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-4">
                <h2 class="text-2xl font-bold text-gray-800 mb-3 sm:mb-0">
                    2. Extracted Product Data
                </h2>
                <button onclick="copyToClipboard()" class="w-full sm:w-auto px-4 py-2 bg-green-500 hover:bg-green-600 text-white text-sm font-semibold rounded-lg shadow-md transition duration-150 transform hover:scale-[1.01] flex items-center justify-center">
                    <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5h10a2 2 0 012 2v3m-7-3v3m-3-3v3m-2-3H6m1 0h12m-6 0v3"></path></svg>
                    Copy Data to Share
                </button>
            </div>

            <div class="overflow-x-auto bg-gray-50 border border-gray-200 rounded-xl">
                <table id="dataTable" class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-100"></thead>
                    <tbody class="divide-y divide-gray-200"></tbody>
                </table>
            </div>

            <p class="text-sm text-gray-500 mt-4">
                <strong class="text-indigo-600">Note:</strong> The data has been extracted from the table named <code class="font-mono text-pink-600 bg-pink-50 px-1 rounded">products</code>.
            </p>
        </div>
    </div>

    <!-- SQL.js Library Import -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/sql.js/1.8.0/sql-wasm.js"></script>

    <script>
        // Global variable to hold the SQL.js object instance
        let SQL;
        let db;
        let extractedData = []; // Store data for copying

        // --- UI UTILITY FUNCTIONS ---

        const getEl = (id) => document.getElementById(id);

        const setLoading = (isLoading) => {
            getEl('loadingIndicator').classList.toggle('hidden', !isLoading);
            getEl('resultsContainer').classList.add('hidden');
            getEl('errorContainer').classList.add('hidden');
        };

        const setError = (message) => {
            getEl('errorMessage').textContent = message;
            getEl('errorContainer').classList.remove('hidden');
            getEl('loadingIndicator').classList.add('hidden');
            getEl('resultsContainer').classList.add('hidden');
        };

        const clearResults = () => {
            getEl('dataTable').querySelector('thead').innerHTML = '';
            getEl('dataTable').querySelector('tbody').innerHTML = '';
            extractedData = [];
        };

        // --- CORE DATABASE LOGIC ---

        // Renamed function to avoid recursive call and stack overflow
        async function initializeDatabaseEngine() {
            try {
                // Calls the global initSqlJs function provided by the library
                SQL = await initSqlJs({
                    locateFile: file => `https://cdnjs.cloudflare.com/ajax/libs/sql.js/1.8.0/${file}`
                });
                console.log("SQL.js initialized successfully.");
            } catch (e) {
                setError(`Failed to load SQLite engine: ${e.message}`);
            }
        }

        // Initialize SQL.js on load
        window.onload = initializeDatabaseEngine; // Updated to call the new function name

        async function processDatabase(buffer) {
            clearResults();
            if (!SQL) {
                setError("SQLite engine not ready. Please try refreshing the page.");
                return;
            }

            console.log("File buffer received, attempting to load database...");

            try {
                // Load the database from the buffer
                db = new SQL.Database(new Uint8Array(buffer));
                console.log("Database loaded.");

                // Execute query: SELECT all data from the 'products' table (UPDATED)
                const query = "SELECT * FROM products";
                const result = db.exec(query);

                console.log("Query executed. Result:", result);

                if (result.length === 0) {
                    setError("The 'products' table was found but is empty, or the table doesn't exist. Please check the table name.");
                    return;
                }

                displayResults(result[0].columns, result[0].values);

            } catch (e) {
                console.error("Database operation failed:", e); // Enhanced logging
                if (e.message.includes("no such table: products")) {
                    setError("Could not find a table named 'products' in the database. Please verify the table name.");
                } else {
                    setError(`Database processing failed: ${e.message}. Check the console for details.`);
                }
            } finally {
                if (db) db.close();
                setLoading(false);
            }
        }

        // --- FILE AND UI HANDLERS ---

        getEl('dbFile').addEventListener('change', function(event) {
            const file = event.target.files[0];
            if (!file) return;

            setLoading(true);
            const reader = new FileReader();

            reader.onload = (e) => {
                processDatabase(e.target.result);
            };

            reader.onerror = (e) => {
                setLoading(false);
                setError(`Error reading file: ${reader.error}`);
            };

            reader.readAsArrayBuffer(file);
        });

        function displayResults(columns, values) {
            const tableHead = getEl('dataTable').querySelector('thead');
            const tableBody = getEl('dataTable').querySelector('tbody');

            // 1. Create Header Row
            const headerRow = document.createElement('tr');
            columns.forEach(col => {
                const th = document.createElement('th');
                th.className = 'px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider';
                th.textContent = col;
                headerRow.appendChild(th);
            });
            tableHead.appendChild(headerRow);

            // 2. Create Body Rows
            values.forEach(row => {
                const tr = document.createElement('tr');
                tr.className = 'bg-white hover:bg-indigo-50 transition duration-150';
                row.forEach(cell => {
                    const td = document.createElement('td');
                    td.className = 'px-6 py-4 whitespace-nowrap text-sm text-gray-900';
                    td.textContent = cell;
                    tr.appendChild(td);
                });
                tableBody.appendChild(tr);
            });

            // 3. Store data for export
            extractedData = [columns.join('\t'), ...values.map(row => row.join('\t'))];

            // 4. Show results
            getEl('resultsContainer').classList.remove('hidden');
        }

        function copyToClipboard() {
            if (extractedData.length === 0) {
                setError("No data available to copy.");
                return;
            }

            const textToCopy = extractedData.join('\n');

            // Fallback for secure contexts in iframes
            const textarea = document.createElement('textarea');
            textarea.value = textToCopy;
            textarea.style.position = 'fixed'; // Avoid scrolling to bottom
            document.body.appendChild(textarea);
            textarea.select();

            try {
                document.execCommand('copy');
                // Simple visual confirmation
                const button = event.target;
                const originalText = button.textContent;
                button.textContent = 'Copied to Clipboard!';
                button.classList.remove('bg-green-500', 'hover:bg-green-600');
                button.classList.add('bg-indigo-500', 'hover:bg-indigo-600');

                setTimeout(() => {
                    button.textContent = originalText;
                    button.classList.remove('bg-indigo-500', 'hover:bg-indigo-600');
                    button.classList.add('bg-green-500', 'hover:bg-green-600');
                }, 1500);

            } catch (err) {
                console.error('Could not copy text: ', err);
                setError('Failed to copy. Please manually select the table data.');
            } finally {
                document.body.removeChild(textarea);
            }
        }

    </script>
</body>
</html>