21312

index.html

@@ -412,6 +412,8 @@ SELECT * FROM users LIMIT 10;"></textarea>
                         <option value="DATE">DATE</option>
                         <option value="TIMESTAMP">TIMESTAMP</option>
                         <option value="UUID">UUID</option>
+                        <option value="JSON">JSON</option>
+                        <option value="JSONB">JSONB</option>
                     </select>
                 </div>
                 <div class="flex items-center gap-2">
@@ -626,7 +628,14 @@ SELECT * FROM users LIMIT 10;"></textarea>
                 // Generate rows
                 body.innerHTML = records.map(record => {
                     const pkValue = this.primaryKey ? record[this.primaryKey] : null;
-                    const cells = columns.map(col => `<td class="p-3 border-b border-slate-100">${record[col] || ''}</td>`).join('');
+                    const cells = columns.map(col => {
+                        const colDef = this.tableStructure.find(c => c.name === col);
+                        let displayValue = record[col] || '';
+                        if (colDef && colDef.type.toLowerCase() === 'boolean') {
+                            displayValue = record[col] === true || record[col] === 'true' ? '✓' : '✗';
+                        }
+                        return `<td class="p-3 border-b border-slate-100">${displayValue}</td>`;
+                    }).join('');
                     const actions = pkValue ? `
                         <td class="p-3 border-b border-slate-100">
                             <button onclick="app.editRecord('${pkValue}')" class="text-blue-600 hover:underline mr-2">Редактировать</button>
@@ -674,11 +683,35 @@ SELECT * FROM users LIMIT 10;"></textarea>
                 
                 // Generate form fields based on table structure
                 form.innerHTML = this.tableStructure.map(col => {
-                    const value = isEdit && this.editingRecord ? '' : ''; // We'll need to load the record data
+                    const value = isEdit && this.editingRecord ? '' : '';
+                    let inputHtml = '';
+                    
+                    if (col.type.toLowerCase() === 'boolean') {
+                        inputHtml = `<input type="checkbox" name="${col.name}" class="w-4 h-4 text-blue-600 rounded focus:ring-blue-500">`;
+                    } else if (col.type.toLowerCase().includes('json')) {
+                        inputHtml = `<textarea name="${col.name}" rows="3" class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none" placeholder='{"key": "value"}'></textarea>`;
+                    } else {
+                        let inputType = 'text';
+                        let step = '';
+                        
+                        if (col.type.toLowerCase().includes('int')) {
+                            inputType = 'number';
+                        } else if (col.type.toLowerCase().includes('decimal') || col.type.toLowerCase().includes('numeric')) {
+                            inputType = 'number';
+                            step = 'step="0.01"';
+                        } else if (col.type.toLowerCase() === 'date') {
+                            inputType = 'date';
+                        } else if (col.type.toLowerCase().includes('timestamp')) {
+                            inputType = 'datetime-local';
+                        }
+                        
+                        inputHtml = `<input type="${inputType}" name="${col.name}" value="${value}" ${step} class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none" placeholder="${col.type}">`;
+                    }
+                    
                     return `
                         <div>
-                            <label class="block text-sm font-medium text-slate-700 mb-1">${col.name}</label>
+                            <label class="block text-sm font-medium text-slate-700 mb-1">${col.name} (${col.type})</label>
-                            <input type="text" name="${col.name}" value="${value}" class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none" placeholder="${col.type}">
+                            ${inputHtml}
                         </div>
                     `;
                 }).join('');
@@ -701,9 +734,13 @@ SELECT * FROM users LIMIT 10;"></textarea>
                     const record = data.data.find(r => r[this.primaryKey] == pkValue);
                     if (record) {
                         this.tableStructure.forEach(col => {
-                            const input = document.querySelector(`input[name="${col.name}"]`);
+                            const input = document.querySelector(`[name="${col.name}"]`);
                             if (input) {
-                                input.value = record[col.name] || '';
+                                if (col.type.toLowerCase() === 'boolean') {
+                                    input.checked = record[col.name] === true || record[col.name] === 'true';
+                                } else {
+                                    input.value = record[col.name] || '';
+                                }
                             }
                         });
                     }
@@ -713,12 +750,18 @@ SELECT * FROM users LIMIT 10;"></textarea>
             }
 
             async saveRecord() {
-                const formData = new FormData(document.getElementById('recordForm'));
                 const data = {};
                 
-                for (let [key, value] of formData.entries()) {
+                this.tableStructure.forEach(col => {
-                    data[key] = value;
+                    const input = document.querySelector(`[name="${col.name}"]`);
-                }
+                    if (input) {
+                        if (col.type.toLowerCase() === 'boolean') {
+                            data[col.name] = input.checked;
+                        } else {
+                            data[col.name] = input.value;
+                        }
+                    }
+                });
                 
                 try {
                     let response;
@@ -743,7 +786,7 @@ SELECT * FROM users LIMIT 10;"></textarea>
                         this.loadTableData();
                         this.editingRecord = null;
                     } else {
-                        this.showToast('Ошибка сохранения', 'error');
+                        this.showToast(result.error || 'Ошибка сохранения', 'error');
                     }
                 } catch (err) {
                     this.showToast('Ошибка сохранения', 'error');
@@ -884,6 +927,9 @@ SELECT * FROM users LIMIT 10;"></textarea>
                         <option value="BOOLEAN">BOOLEAN</option>
                         <option value="DATE">DATE</option>
                         <option value="TIMESTAMP">TIMESTAMP</option>
+                        <option value="UUID">UUID</option>
+                        <option value="JSON">JSON</option>
+                        <option value="JSONB">JSONB</option>
                     </select>
                     <label class="flex items-center gap-1 text-sm">
                         <input type="checkbox" class="w-4 h-4 text-blue-600 rounded focus:ring-blue-500"> PK