klas/tkb_timeshift
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Auto-save: Updated app/layout.tsx

Browse Source 
Auto-saved at 2025-07-30 10:08:28

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Docker Config Backup
2025-07-30 10:08:28 +02:00
parent da6bd84a45
commit d139072aed
4 changed files with 114 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

116
components/timeshift-spreadsheet.tsx
View File

@@ -386,21 +386,23 @@ export function TimeshiftSpreadsheet({ teamId, teamName }: TimeshiftSpreadsheetP
tableHeight: "500px",
style: styles,
onchange: (instance: any, cell: HTMLElement, x: number, y: number, value: string) => {
console.log("onChange triggered:", { x, y, value, isMerging: isMergingRef.current })
// Skip onChange events during merging process to prevent infinite loops
if (isMergingRef.current) {
console.log("Skipping onChange during merge:", { x, y, value })
return
}
console.log("onChange triggered:", { x, y, value })
// Only process if component is still active
if (!isActiveRef.current || !jspreadsheetInstance.current) return
// Apply rotation to first row (y === 0) when text is entered
if (y === 0 && value !== undefined) {
if (y === 0 || y === '0') {
console.log("First row change detected, applying rotation...", { x, y, value })
setTimeout(() => {
// Use requestAnimationFrame for better DOM timing
requestAnimationFrame(() => {
if (!isActiveRef.current || !spreadsheetRef.current) return
try {
@@ -410,32 +412,118 @@ export function TimeshiftSpreadsheet({ teamId, teamName }: TimeshiftSpreadsheetP
if (rows[0]) {
const cells = rows[0].querySelectorAll('td')
const targetCell = cells[x + 1] as HTMLElement // +1 because first cell is row number
console.log("Target cell found:", !!targetCell, "Cell content:", targetCell?.textContent)
console.log("Target cell found:", !!targetCell, "Target cell:", targetCell)
if (targetCell) {
// Apply rotation even for empty values to maintain consistent styling
const displayValue = value && value.trim() ? value.trim() : ''
const displayValue = value !== undefined && value !== null ? String(value).trim() : ''
console.log("Processing value:", displayValue)
if (displayValue) {
targetCell.innerHTML = `<div style="transform: rotate(-90deg); font-size: 12px; height: 20px; display: flex; align-items: center; justify-content: center; white-space: nowrap; width: 100%;">${displayValue}</div>`
console.log("Rotation applied to cell with value:", displayValue)
// Apply rotation with improved styling
targetCell.innerHTML = `<div style="
transform: rotate(-90deg);
font-size: 12px;
height: 80px;
width: 20px;
display: flex;
align-items: center;
justify-content: center;
white-space: nowrap;
margin: 0 auto;
transform-origin: center center;
">${displayValue}</div>`
console.log("✅ Rotation applied successfully to cell with value:", displayValue)
} else {
// Clear rotation for empty cells
// Clear cell content but maintain structure
targetCell.innerHTML = ''
targetCell.style.transform = 'none'
console.log("Cleared rotation for empty cell")
console.log("✅ Cleared cell content")
}
} else {
console.warn("❌ Target cell not found at index:", x + 1)
}
} else {
console.warn("❌ First row not found")
}
} else {
console.warn("❌ Table not found")
}
} catch (error) {
console.error("Error applying rotation:", error)
console.error("❌ Error applying rotation:", error)
}
}, 50) // Reduced timeout for faster response
})
}
}
})
console.log("jspreadsheet initialized:", !!jspreadsheetInstance.current)
// Additional event listener for first row rotation as fallback
setTimeout(() => {
if (!isActiveRef.current || !spreadsheetRef.current) return
const table = spreadsheetRef.current?.querySelector('.jexcel tbody')
if (table) {
// Add input event listeners to first row cells
const firstRow = table.querySelector('tr:first-child')
if (firstRow) {
const cells = firstRow.querySelectorAll('td')
cells.forEach((cell, index) => {
if (index > 0) { // Skip row number cell
// Listen for input events on the cell
cell.addEventListener('input', (e) => {
const target = e.target as HTMLElement
const value = target.textContent || target.innerText || ''
console.log("🎯 Direct input event on first row cell:", { index, value })
if (value.trim()) {
requestAnimationFrame(() => {
target.innerHTML = `<div style="
transform: rotate(-90deg);
font-size: 12px;
height: 80px;
width: 20px;
display: flex;
align-items: center;
justify-content: center;
white-space: nowrap;
margin: 0 auto;
transform-origin: center center;
">${value.trim()}</div>`
console.log("🎯 Direct rotation applied via input event")
})
}
})
// Also listen for blur events
cell.addEventListener('blur', (e) => {
const target = e.target as HTMLElement
const value = target.textContent || target.innerText || ''
console.log("🎯 Blur event on first row cell:", { index, value })
if (value.trim()) {
requestAnimationFrame(() => {
target.innerHTML = `<div style="
transform: rotate(-90deg);
font-size: 12px;
height: 80px;
width: 20px;
display: flex;
align-items: center;
justify-content: center;
white-space: nowrap;
margin: 0 auto;
transform-origin: center center;
">${value.trim()}</div>`
console.log("🎯 Direct rotation applied via blur event")
})
}
})
}
})
}
}
}, 500)
// DISABLED: Mutation observer for first row rotation
// This was causing popup issues when switching tabs
// TODO: Implement a different approach for first row rotation if needed