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.
364 lines
11 KiB
HTML
364 lines
11 KiB
HTML
<template>
|
|
<div class="spreadsheet-container" id="spreadsheetContainer">
|
|
<table class="spreadsheet" id="spreadsheet">
|
|
<thead id="tableHead"></thead>
|
|
<tbody id="tableBody"></tbody>
|
|
</table>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
class TablesApp {
|
|
constructor() {
|
|
this.data = this.generateMockData(100, 26); // 100 rows, 26 columns (A-Z)
|
|
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) {
|
|
// Header row
|
|
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) {
|
|
// Calculate total (this will be formatted as formula)
|
|
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();
|
|
}
|
|
|
|
renderTable() {
|
|
const thead = document.getElementById('tableHead');
|
|
const tbody = document.getElementById('tableBody');
|
|
|
|
// Render header
|
|
let headerHTML = '<tr><th></th>';
|
|
for (let i = 0; i < this.cols; i++) {
|
|
headerHTML += `<th>${this.getColumnName(i)}</th>`;
|
|
}
|
|
headerHTML += '</tr>';
|
|
thead.innerHTML = headerHTML;
|
|
|
|
// Render visible rows
|
|
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();
|
|
|
|
// Handle SUM formula
|
|
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);
|
|
}
|
|
}
|
|
|
|
// Handle AVERAGE formula
|
|
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);
|
|
}
|
|
}
|
|
|
|
// Handle simple arithmetic (e.g., =C2+D2+E2+F2)
|
|
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');
|
|
|
|
// Infinite scroll
|
|
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();
|
|
}
|
|
});
|
|
|
|
// Cell selection
|
|
document.getElementById('tableBody').addEventListener('click', (e) => {
|
|
if (e.target.tagName === 'TD') {
|
|
this.selectCell(e.target);
|
|
}
|
|
});
|
|
|
|
// Cell editing
|
|
document.getElementById('tableBody').addEventListener('dblclick', (e) => {
|
|
if (e.target.tagName === 'TD') {
|
|
this.editCell(e.target);
|
|
}
|
|
});
|
|
|
|
// Formula bar
|
|
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();
|
|
|
|
// Reselect the cell
|
|
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();
|
|
}
|
|
|
|
addColumn() {
|
|
const newCol = this.getColumnName(this.cols);
|
|
this.data.forEach(row => row[newCol] = '');
|
|
this.cols++;
|
|
this.renderTable();
|
|
}
|
|
|
|
deleteRow() {
|
|
if (this.selectedCell && this.rows > 1) {
|
|
const row = parseInt(this.selectedCell.dataset.row);
|
|
this.data.splice(row, 1);
|
|
this.rows--;
|
|
this.renderTable();
|
|
}
|
|
}
|
|
|
|
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();
|
|
}
|
|
}
|
|
|
|
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();
|
|
}
|
|
}
|
|
|
|
const app = new TablesApp();
|
|
</script>
|