Rodrigo Rodriguez (Pragmatismo)
73805c4a98
- Changed default feature to include 'desktop' in Cargo.toml - Replaced --noui flag with --desktop flag in launch.json - Added Tauri desktop mode implementation in main.rs - Simplified command line argument handling - Cleaned up code formatting in main.rs The changes introduce a new mode for running the application as a desktop app using Tauri framework, while maintaining the existing server functionality. The desktop mode loads a webview window with a specific HTML interface.
589 lines
16 KiB
HTML
589 lines
16 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Tables - Excel Clone</title>
|
||
<style>
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
body {
|
||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||
background: #f0f0f0;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.app-container {
|
||
height: 100vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
background: white;
|
||
}
|
||
|
||
.header {
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
color: white;
|
||
padding: 15px 20px;
|
||
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
||
}
|
||
|
||
.header h1 {
|
||
font-size: 24px;
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.header .subtitle {
|
||
font-size: 12px;
|
||
opacity: 0.9;
|
||
}
|
||
|
||
.toolbar {
|
||
display: flex;
|
||
gap: 10px;
|
||
padding: 10px;
|
||
background: #fafafa;
|
||
border-bottom: 1px solid #ddd;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.toolbar button {
|
||
padding: 8px 15px;
|
||
border: 1px solid #ccc;
|
||
background: white;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
font-size: 13px;
|
||
transition: all 0.2s;
|
||
}
|
||
|
||
.toolbar button:hover {
|
||
background: #f0f0f0;
|
||
border-color: #999;
|
||
}
|
||
|
||
.toolbar button:active {
|
||
transform: scale(0.98);
|
||
}
|
||
|
||
.formula-bar {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 8px 10px;
|
||
background: white;
|
||
border-bottom: 2px solid #ddd;
|
||
gap: 10px;
|
||
}
|
||
|
||
.cell-ref {
|
||
font-weight: bold;
|
||
min-width: 60px;
|
||
padding: 6px 10px;
|
||
background: #f0f0f0;
|
||
border-radius: 4px;
|
||
font-family: monospace;
|
||
}
|
||
|
||
.formula-input {
|
||
flex: 1;
|
||
padding: 6px 10px;
|
||
border: 1px solid #ccc;
|
||
border-radius: 4px;
|
||
font-family: monospace;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.spreadsheet-container {
|
||
flex: 1;
|
||
overflow: auto;
|
||
position: relative;
|
||
background: #fff;
|
||
}
|
||
|
||
.spreadsheet {
|
||
display: inline-block;
|
||
border-collapse: collapse;
|
||
background: white;
|
||
}
|
||
|
||
.spreadsheet th,
|
||
.spreadsheet td {
|
||
border: 1px solid #d0d0d0;
|
||
min-width: 100px;
|
||
height: 25px;
|
||
padding: 4px 8px;
|
||
text-align: left;
|
||
position: relative;
|
||
}
|
||
|
||
.spreadsheet th {
|
||
background: #f0f0f0;
|
||
font-weight: 600;
|
||
text-align: center;
|
||
position: sticky;
|
||
z-index: 10;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.spreadsheet thead th {
|
||
top: 0;
|
||
}
|
||
|
||
.spreadsheet tbody th {
|
||
left: 0;
|
||
min-width: 50px;
|
||
background: #f0f0f0;
|
||
}
|
||
|
||
.spreadsheet td {
|
||
cursor: cell;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.spreadsheet td.selected {
|
||
outline: 2px solid #667eea;
|
||
outline-offset: -2px;
|
||
background: #e8eaf6;
|
||
}
|
||
|
||
.spreadsheet td.editing {
|
||
padding: 0;
|
||
}
|
||
|
||
.cell-editor {
|
||
width: 100%;
|
||
height: 100%;
|
||
border: none;
|
||
padding: 4px 8px;
|
||
font-family: inherit;
|
||
font-size: inherit;
|
||
outline: 2px solid #667eea;
|
||
}
|
||
|
||
.status-bar {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 6px 15px;
|
||
background: #f8f8f8;
|
||
border-top: 1px solid #ddd;
|
||
font-size: 12px;
|
||
color: #666;
|
||
}
|
||
|
||
.status-bar .stats {
|
||
display: flex;
|
||
gap: 20px;
|
||
}
|
||
|
||
@keyframes fadeIn {
|
||
from { opacity: 0; transform: translateY(-10px); }
|
||
to { opacity: 1; transform: translateY(0); }
|
||
}
|
||
|
||
.header {
|
||
animation: fadeIn 0.5s ease;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="app-container">
|
||
<div class="header">
|
||
<h1>📊 Tables</h1>
|
||
<div class="subtitle">Excel Clone - Celebrating Lotus 1-2-3 Legacy 🎉</div>
|
||
</div>
|
||
|
||
<div class="toolbar">
|
||
<button onclick="app.bold()">📝 Bold</button>
|
||
<button onclick="app.addRow()">➕ Add Row</button>
|
||
<button onclick="app.addColumn()">➕ Add Column</button>
|
||
<button onclick="app.deleteRow()">➖ Delete Row</button>
|
||
<button onclick="app.deleteColumn()">➖ Delete Column</button>
|
||
<button onclick="app.sort()">🔽 Sort A-Z</button>
|
||
<button onclick="app.sum()">Σ Sum</button>
|
||
<button onclick="app.average()">📊 Average</button>
|
||
<button onclick="app.clearCell()">🗑️ Clear</button>
|
||
<button onclick="app.exportData()">💾 Export</button>
|
||
</div>
|
||
|
||
<div class="formula-bar">
|
||
<div class="cell-ref" id="cellRef">A1</div>
|
||
<input type="text" class="formula-input" id="formulaInput" placeholder="Enter value or formula (=SUM, =AVERAGE, etc.)">
|
||
</div>
|
||
|
||
<div class="spreadsheet-container" id="spreadsheetContainer">
|
||
<table class="spreadsheet" id="spreadsheet">
|
||
<thead id="tableHead"></thead>
|
||
<tbody id="tableBody"></tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<div class="status-bar">
|
||
<div class="stats">
|
||
<span>Rows: <strong id="rowCount">0</strong></span>
|
||
<span>Cols: <strong id="colCount">0</strong></span>
|
||
<span>Selected: <strong id="selectedCell">None</strong></span>
|
||
</div>
|
||
<div>Ready | Lotus 1-2-3 Mode Active ✨</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
class TablesApp {
|
||
constructor() {
|
||
this.data = this.generateMockData(100, 26);
|
||
this.selectedCell = null;
|
||
this.cols = 26;
|
||
this.rows = 100;
|
||
this.visibleRows = 30;
|
||
this.rowOffset = 0;
|
||
|
||
this.init();
|
||
}
|
||
|
||
generateMockData(rows, cols) {
|
||
const data = [];
|
||
const products = ['Laptop', 'Mouse', 'Keyboard', 'Monitor', 'Headphones', 'Webcam', 'Desk', 'Chair'];
|
||
const regions = ['North', 'South', 'East', 'West'];
|
||
|
||
for (let i = 0; i < rows; i++) {
|
||
const row = {};
|
||
for (let j = 0; j < cols; j++) {
|
||
const col = this.getColumnName(j);
|
||
if (i === 0) {
|
||
if (j === 0) row[col] = 'Product';
|
||
else if (j === 1) row[col] = 'Region';
|
||
else if (j === 2) row[col] = 'Q1';
|
||
else if (j === 3) row[col] = 'Q2';
|
||
else if (j === 4) row[col] = 'Q3';
|
||
else if (j === 5) row[col] = 'Q4';
|
||
else if (j === 6) row[col] = 'Total';
|
||
else row[col] = `Col ${col}`;
|
||
} else {
|
||
if (j === 0) row[col] = products[i % products.length];
|
||
else if (j === 1) row[col] = regions[i % regions.length];
|
||
else if (j >= 2 && j <= 5) row[col] = Math.floor(Math.random() * 10000) + 1000;
|
||
else if (j === 6) {
|
||
row[col] = `=C${i+1}+D${i+1}+E${i+1}+F${i+1}`;
|
||
}
|
||
else row[col] = Math.random() > 0.5 ? Math.floor(Math.random() * 1000) : '';
|
||
}
|
||
}
|
||
data.push(row);
|
||
}
|
||
return data;
|
||
}
|
||
|
||
getColumnName(index) {
|
||
let name = '';
|
||
while (index >= 0) {
|
||
name = String.fromCharCode(65 + (index % 26)) + name;
|
||
index = Math.floor(index / 26) - 1;
|
||
}
|
||
return name;
|
||
}
|
||
|
||
init() {
|
||
this.renderTable();
|
||
this.setupEventListeners();
|
||
this.updateStats();
|
||
}
|
||
|
||
renderTable() {
|
||
const thead = document.getElementById('tableHead');
|
||
const tbody = document.getElementById('tableBody');
|
||
|
||
let headerHTML = '<tr><th></th>';
|
||
for (let i = 0; i < this.cols; i++) {
|
||
headerHTML += `<th>${this.getColumnName(i)}</th>`;
|
||
}
|
||
headerHTML += '</tr>';
|
||
thead.innerHTML = headerHTML;
|
||
|
||
let bodyHTML = '';
|
||
const endRow = Math.min(this.rowOffset + this.visibleRows, this.rows);
|
||
|
||
for (let i = this.rowOffset; i < endRow; i++) {
|
||
bodyHTML += `<tr><th>${i + 1}</th>`;
|
||
for (let j = 0; j < this.cols; j++) {
|
||
const col = this.getColumnName(j);
|
||
const value = this.data[i][col] || '';
|
||
const displayValue = this.calculateCell(value, i, j);
|
||
bodyHTML += `<td data-row="${i}" data-col="${j}" data-cell="${col}${i+1}">${displayValue}</td>`;
|
||
}
|
||
bodyHTML += '</tr>';
|
||
}
|
||
tbody.innerHTML = bodyHTML;
|
||
}
|
||
|
||
calculateCell(value, row, col) {
|
||
if (typeof value === 'string' && value.startsWith('=')) {
|
||
try {
|
||
const formula = value.substring(1).toUpperCase();
|
||
|
||
if (formula.includes('SUM')) {
|
||
const match = formula.match(/SUM\(([A-Z]+\d+):([A-Z]+\d+)\)/);
|
||
if (match) {
|
||
const sum = this.calculateRange(match[1], match[2], 'sum');
|
||
return sum.toFixed(2);
|
||
}
|
||
}
|
||
|
||
if (formula.includes('AVERAGE')) {
|
||
const match = formula.match(/AVERAGE\(([A-Z]+\d+):([A-Z]+\d+)\)/);
|
||
if (match) {
|
||
const avg = this.calculateRange(match[1], match[2], 'avg');
|
||
return avg.toFixed(2);
|
||
}
|
||
}
|
||
|
||
let expression = formula;
|
||
const cellRefs = expression.match(/[A-Z]+\d+/g);
|
||
if (cellRefs) {
|
||
cellRefs.forEach(ref => {
|
||
const val = this.getCellValue(ref);
|
||
expression = expression.replace(ref, val);
|
||
});
|
||
return eval(expression).toFixed(2);
|
||
}
|
||
} catch (e) {
|
||
return '#ERROR';
|
||
}
|
||
}
|
||
return value;
|
||
}
|
||
|
||
getCellValue(cellRef) {
|
||
const col = cellRef.match(/[A-Z]+/)[0];
|
||
const row = parseInt(cellRef.match(/\d+/)[0]) - 1;
|
||
const value = this.data[row][col];
|
||
|
||
if (typeof value === 'string' && value.startsWith('=')) {
|
||
return this.calculateCell(value, row, this.getColIndex(col));
|
||
}
|
||
return parseFloat(value) || 0;
|
||
}
|
||
|
||
getColIndex(colName) {
|
||
let index = 0;
|
||
for (let i = 0; i < colName.length; i++) {
|
||
index = index * 26 + (colName.charCodeAt(i) - 64);
|
||
}
|
||
return index - 1;
|
||
}
|
||
|
||
calculateRange(start, end, operation) {
|
||
const startCol = start.match(/[A-Z]+/)[0];
|
||
const startRow = parseInt(start.match(/\d+/)[0]) - 1;
|
||
const endCol = end.match(/[A-Z]+/)[0];
|
||
const endRow = parseInt(end.match(/\d+/)[0]) - 1;
|
||
|
||
let values = [];
|
||
for (let r = startRow; r <= endRow; r++) {
|
||
for (let c = this.getColIndex(startCol); c <= this.getColIndex(endCol); c++) {
|
||
const col = this.getColumnName(c);
|
||
const val = parseFloat(this.data[r][col]) || 0;
|
||
values.push(val);
|
||
}
|
||
}
|
||
|
||
if (operation === 'sum') {
|
||
return values.reduce((a, b) => a + b, 0);
|
||
} else if (operation === 'avg') {
|
||
return values.reduce((a, b) => a + b, 0) / values.length;
|
||
}
|
||
return 0;
|
||
}
|
||
|
||
setupEventListeners() {
|
||
const container = document.getElementById('spreadsheetContainer');
|
||
const formulaInput = document.getElementById('formulaInput');
|
||
|
||
container.addEventListener('scroll', () => {
|
||
const scrollPercentage = (container.scrollTop + container.clientHeight) / container.scrollHeight;
|
||
if (scrollPercentage > 0.8 && this.rowOffset + this.visibleRows < this.rows) {
|
||
this.rowOffset += 10;
|
||
this.renderTable();
|
||
}
|
||
});
|
||
|
||
document.getElementById('tableBody').addEventListener('click', (e) => {
|
||
if (e.target.tagName === 'TD') {
|
||
this.selectCell(e.target);
|
||
}
|
||
});
|
||
|
||
document.getElementById('tableBody').addEventListener('dblclick', (e) => {
|
||
if (e.target.tagName === 'TD') {
|
||
this.editCell(e.target);
|
||
}
|
||
});
|
||
|
||
formulaInput.addEventListener('keypress', (e) => {
|
||
if (e.key === 'Enter' && this.selectedCell) {
|
||
this.updateCellValue(formulaInput.value);
|
||
}
|
||
});
|
||
}
|
||
|
||
selectCell(cell) {
|
||
if (this.selectedCell) {
|
||
this.selectedCell.classList.remove('selected');
|
||
}
|
||
this.selectedCell = cell;
|
||
cell.classList.add('selected');
|
||
|
||
const cellRef = cell.dataset.cell;
|
||
document.getElementById('cellRef').textContent = cellRef;
|
||
document.getElementById('selectedCell').textContent = cellRef;
|
||
|
||
const row = parseInt(cell.dataset.row);
|
||
const col = this.getColumnName(parseInt(cell.dataset.col));
|
||
const value = this.data[row][col] || '';
|
||
document.getElementById('formulaInput').value = value;
|
||
}
|
||
|
||
editCell(cell) {
|
||
const row = parseInt(cell.dataset.row);
|
||
const col = this.getColumnName(parseInt(cell.dataset.col));
|
||
const value = this.data[row][col] || '';
|
||
|
||
cell.classList.add('editing');
|
||
cell.innerHTML = `<input type="text" class="cell-editor" value="${value}" />`;
|
||
const input = cell.querySelector('.cell-editor');
|
||
input.focus();
|
||
input.select();
|
||
|
||
input.addEventListener('blur', () => {
|
||
this.updateCellValue(input.value);
|
||
});
|
||
|
||
input.addEventListener('keypress', (e) => {
|
||
if (e.key === 'Enter') {
|
||
this.updateCellValue(input.value);
|
||
}
|
||
});
|
||
}
|
||
|
||
updateCellValue(value) {
|
||
if (!this.selectedCell) return;
|
||
|
||
const row = parseInt(this.selectedCell.dataset.row);
|
||
const col = this.getColumnName(parseInt(this.selectedCell.dataset.col));
|
||
|
||
this.data[row][col] = value;
|
||
this.renderTable();
|
||
|
||
const newCell = document.querySelector(`td[data-row="${row}"][data-col="${this.selectedCell.dataset.col}"]`);
|
||
if (newCell) this.selectCell(newCell);
|
||
}
|
||
|
||
bold() {
|
||
if (this.selectedCell) {
|
||
this.selectedCell.style.fontWeight = this.selectedCell.style.fontWeight === 'bold' ? 'normal' : 'bold';
|
||
}
|
||
}
|
||
|
||
addRow() {
|
||
const newRow = {};
|
||
for (let i = 0; i < this.cols; i++) {
|
||
newRow[this.getColumnName(i)] = '';
|
||
}
|
||
this.data.push(newRow);
|
||
this.rows++;
|
||
this.renderTable();
|
||
this.updateStats();
|
||
}
|
||
|
||
addColumn() {
|
||
const newCol = this.getColumnName(this.cols);
|
||
this.data.forEach(row => row[newCol] = '');
|
||
this.cols++;
|
||
this.renderTable();
|
||
this.updateStats();
|
||
}
|
||
|
||
deleteRow() {
|
||
if (this.selectedCell && this.rows > 1) {
|
||
const row = parseInt(this.selectedCell.dataset.row);
|
||
this.data.splice(row, 1);
|
||
this.rows--;
|
||
this.renderTable();
|
||
this.updateStats();
|
||
}
|
||
}
|
||
|
||
deleteColumn() {
|
||
if (this.selectedCell && this.cols > 1) {
|
||
const col = this.getColumnName(parseInt(this.selectedCell.dataset.col));
|
||
this.data.forEach(row => delete row[col]);
|
||
this.cols--;
|
||
this.renderTable();
|
||
this.updateStats();
|
||
}
|
||
}
|
||
|
||
sort() {
|
||
if (this.selectedCell) {
|
||
const col = this.getColumnName(parseInt(this.selectedCell.dataset.col));
|
||
const header = this.data[0];
|
||
const dataRows = this.data.slice(1);
|
||
|
||
dataRows.sort((a, b) => {
|
||
const aVal = a[col] || '';
|
||
const bVal = b[col] || '';
|
||
return aVal.toString().localeCompare(bVal.toString());
|
||
});
|
||
|
||
this.data = [header, ...dataRows];
|
||
this.renderTable();
|
||
}
|
||
}
|
||
|
||
sum() {
|
||
if (this.selectedCell) {
|
||
const col = this.getColumnName(parseInt(this.selectedCell.dataset.col));
|
||
document.getElementById('formulaInput').value = `=SUM(${col}2:${col}${this.rows})`;
|
||
}
|
||
}
|
||
|
||
average() {
|
||
if (this.selectedCell) {
|
||
const col = this.getColumnName(parseInt(this.selectedCell.dataset.col));
|
||
document.getElementById('formulaInput').value = `=AVERAGE(${col}2:${col}${this.rows})`;
|
||
}
|
||
}
|
||
|
||
clearCell() {
|
||
if (this.selectedCell) {
|
||
this.updateCellValue('');
|
||
}
|
||
}
|
||
|
||
exportData() {
|
||
const csv = this.data.map(row => {
|
||
return Object.values(row).join(',');
|
||
}).join('\n');
|
||
|
||
const blob = new Blob([csv], { type: 'text/csv' });
|
||
const url = URL.createObjectURL(blob);
|
||
const a = document.createElement('a');
|
||
a.href = url;
|
||
a.download = 'tables_export.csv';
|
||
a.click();
|
||
}
|
||
|
||
updateStats() {
|
||
document.getElementById('rowCount').textContent = this.rows;
|
||
document.getElementById('colCount').textContent = this.cols;
|
||
}
|
||
}
|
||
|
||
const app = new TablesApp();
|
||
</script>
|
||
</body>
|
||
</html>
|