Spaces:

abeea
/

Supa-back

Running

App Files Files Community

Supa-back / index.html

abeea

Upload index.html

f30d436 verified about 2 months ago

raw

history blame contribute delete

8.33 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Supabase Backup Visualizer</title>
	<style>
	:root {
	--bg-color: #0f172a;
	--surface-color: #1e293b;
	--text-color: #f8fafc;
	--text-muted: #94a3b8;
	--border-color: #334155;
	--primary: #3b82f6;
	--primary-hover: #2563eb;
	}

	body {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	background-color: var(--bg-color);
	color: var(--text-color);
	margin: 0;
	padding: 20px;
	display: flex;
	flex-direction: column;
	height: 100vh;
	box-sizing: border-box;
	}

	.header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--border-color);
	margin-bottom: 20px;
	}

	.controls {
	display: flex;
	gap: 15px;
	align-items: center;
	}

	input[type="file"] {
	background: var(--surface-color);
	padding: 10px;
	border-radius: 6px;
	border: 1px solid var(--border-color);
	color: var(--text-color);
	cursor: pointer;
	}

	select {
	background: var(--surface-color);
	color: var(--text-color);
	padding: 10px;
	border-radius: 6px;
	border: 1px solid var(--border-color);
	min-width: 200px;
	cursor: pointer;
	}

	.main-content {
	flex-grow: 1;
	background: var(--surface-color);
	border-radius: 8px;
	border: 1px solid var(--border-color);
	overflow: auto;
	position: relative;
	}

	table {
	width: 100%;
	border-collapse: collapse;
	text-align: left;
	}

	th, td {
	padding: 12px 16px;
	border-bottom: 1px solid var(--border-color);
	border-right: 1px solid var(--border-color);
	white-space: nowrap;
	}

	th {
	background-color: #0f172a;
	position: sticky;
	top: 0;
	z-index: 10;
	font-weight: 600;
	color: var(--primary);
	}

	tr:hover {
	background-color: #2c3e50;
	}

	.null-value {
	color: var(--text-muted);
	font-style: italic;
	font-size: 0.9em;
	}

	#status {
	color: var(--text-muted);
	font-size: 0.9em;
	}
	</style>
	</head>
	<body>

	<div class="header">
	<h2>Supabase Backup Visualizer</h2>
	<div class="controls">
	<input type="file" id="fileInput" accept=".backup,.sql,.txt" />
	<select id="tableSelect" disabled>
	<option value="">Select a table to view...</option>
	</select>
	<span id="status">Waiting for file...</span>
	</div>
	</div>

	<div class="main-content">
	<table id="dataTable">
	<thead id="tableHead"></thead>
	<tbody id="tableBody"></tbody>
	</table>
	</div>

	<script>
	const fileInput = document.getElementById('fileInput');
	const tableSelect = document.getElementById('tableSelect');
	const tableHead = document.getElementById('tableHead');
	const tableBody = document.getElementById('tableBody');
	const statusText = document.getElementById('status');

	let database = {}; // Format: { "public.messages": { columns: [], rows: [] } }

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

	statusText.innerText = "Parsing file... this might take a moment for large files.";
	tableSelect.disabled = true;
	database = {};
	tableSelect.innerHTML = '<option value="">Select a table to view...</option>';
	tableHead.innerHTML = '';
	tableBody.innerHTML = '';

	const reader = new FileReader();

	reader.onload = function(event) {
	const text = event.target.result;
	const lines = text.split('\n');

	let currentTable = null;

	for (let i = 0; i < lines.length; i++) {
	const line = lines[i].trimEnd(); // Remove trailing newline characters

	// Look for the COPY statement
	if (line.startsWith('COPY ')) {
	// Regex to extract table name and columns
	// Matches: COPY public.messages (id, created_at) FROM stdin;
	const match = line.match(/^COPY\s+([a-zA-Z0-9_."]+)\s*$([^)]+)$\s+FROM\s+stdin;/i);

	if (match) {
	currentTable = match[1];
	const columns = match[2].split(',').map(c => c.trim());

	database[currentTable] = {
	columns: columns,
	rows: []
	};
	}
	}
	// If we are currently inside a table's data block
	else if (currentTable) {
	if (line === '\\.') {
	// End of table data
	currentTable = null;
	} else if (line.length > 0) {
	// Postgres COPY separates columns with Tabs (\t)
	const rowData = line.split('\t');
	database[currentTable].rows.push(rowData);
	}
	}
	}

	// Populate the dropdown
	const tables = Object.keys(database);
	if (tables.length === 0) {
	statusText.innerText = "No tables found in this file.";
	return;
	}

	tables.forEach(table => {
	const option = document.createElement('option');
	option.value = table;
	option.innerText = `${table} (${database[table].rows.length} rows)`;
	tableSelect.appendChild(option);
	});

	tableSelect.disabled = false;
	statusText.innerText = `Loaded ${tables.length} tables successfully.`;
	};

	reader.readAsText(file);
	});

	// When a user selects a table from the dropdown
	tableSelect.addEventListener('change', function(e) {
	const tableName = e.target.value;
	if (!tableName) return;

	const tableData = database[tableName];

	// Render Headers
	let headerHTML = '<tr>';
	tableData.columns.forEach(col => {
	headerHTML += `<th>${col}</th>`;
	});
	headerHTML += '</tr>';
	tableHead.innerHTML = headerHTML;

	// Render Rows
	let rowsHTML = '';
	tableData.rows.forEach(row => {
	rowsHTML += '<tr>';
	row.forEach(cell => {
	// Postgres represents NULL as \N in COPY statements
	if (cell === '\\N') {
	rowsHTML += `<td class="null-value">null</td>`;
	} else {
	// Sanitize HTML to prevent rendering issues with < or > in content
	const sanitizedCell = cell.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
	rowsHTML += `<td>${sanitizedCell}</td>`;
	}
	});
	rowsHTML += '</tr>';
	});
	tableBody.innerHTML = rowsHTML;
	});
	</script>
	</body>
	</html>