diff --git a/components/timeshift-spreadsheet.tsx b/components/timeshift-spreadsheet.tsx index 99f6478..c666ec1 100644 --- a/components/timeshift-spreadsheet.tsx +++ b/components/timeshift-spreadsheet.tsx @@ -68,7 +68,7 @@ export function TimeshiftSpreadsheet({ teamId: _teamId, teamName }: TimeshiftSpr const dayName = ["Neděle", "Pondělí", "Úterý", "Středa", "Čtvrtek", "Pátek", "Sobota"][currentDate.getDay()] titleRow.push("", "") - dayNameRow.push(dayName, "") + dayNameRow.push(dayName, "") // Day name in first column, empty in second (for merging) yearRow.push(currentDate.getFullYear().toString(), "") monthRow.push((currentDate.getMonth() + 1).toString(), "") dateRow.push(currentDate.getDate().toString(), "") @@ -232,24 +232,38 @@ export function TimeshiftSpreadsheet({ teamId: _teamId, teamName }: TimeshiftSpr // Generate styles for day/night shifts based on the Excel pattern const styles: Record = {} if (selectedMonth && selectedYear) { + // Make day names row (row 2) taller + for (let col = 0; col < (data[0]?.length || 0); col++) { + const colLetter = getExcelColumnName(col) + styles[`${colLetter}2`] = "height: 50px;" + } + // Style header rows for (let col = 1; col < (data[0]?.length || 0); col++) { const colLetter = getExcelColumnName(col) if (col % 2 === 1) { // Day shifts (odd columns after first) - styles[`${colLetter}6`] = "background-color: #ffff00; font-weight: bold;" // Yellow for day + styles[`${colLetter}6`] = "background-color: #ffff00; font-weight: normal;" // Yellow for day, not bold } else { // Night shifts (even columns after first) - styles[`${colLetter}6`] = "background-color: #00b0f0; font-weight: bold;" // Blue for night + styles[`${colLetter}6`] = "background-color: #00b0f0; font-weight: normal;" // Blue for night, not bold } } - // Style weekend days (Saturday/Sunday in day name row) + // Style weekend days (Saturday/Sunday in day name row and date rows below) for (let col = 1; col < (data[0]?.length || 0); col += 2) { const dayName = data[1]?.[col] if (dayName === "Sobota" || dayName === "Neděle") { const colLetter = getExcelColumnName(col) const nextColLetter = getExcelColumnName(col + 1) - styles[`${colLetter}2`] = "background-color: #ffd966;" // Weekend day name - styles[`${nextColLetter}2`] = "background-color: #ffd966;" + + // Weekend day name row (row 2) - merged cells + styles[`${colLetter}2`] = "background-color: #ffd966; height: 50px;" // Weekend day name with height + styles[`${nextColLetter}2`] = "background-color: #ffd966; height: 50px;" + + // Weekend date columns (rows 3, 4, 5 - year, month, day) + for (let row = 3; row <= 5; row++) { + styles[`${colLetter}${row}`] = "background-color: #ffd966;" // Weekend date values + styles[`${nextColLetter}${row}`] = "background-color: #ffd966;" // Weekend date values + } } } } @@ -278,6 +292,26 @@ export function TimeshiftSpreadsheet({ teamId: _teamId, teamName }: TimeshiftSpr console.log("jspreadsheet initialized:", !!jspreadsheetInstance.current) + // Apply cell merges for header rows after initialization + if (jspreadsheetInstance.current && selectedMonth && selectedYear) { + const instance = jspreadsheetInstance.current as any + if (instance.setMerge) { + // Merge all pairs in rows 2, 3, 4, 5 (day names, year, month, day) + for (let row = 2; row <= 5; row++) { + for (let col = 1; col < (data[0]?.length || 0); col += 2) { + const colLetter = getExcelColumnName(col) + try { + // Correct syntax: setMerge(cellAddress, colspan, rowspan) + instance.setMerge(`${colLetter}${row}`, 2, 1) // 2 columns, 1 row + console.log(`Merged ${colLetter}${row} with 2 columns`) + } catch (error) { + console.error(`Failed to merge ${colLetter}${row}:`, error) + } + } + } + } + } + // Apply counter-clockwise rotation to data values only (exclude second column which contains field labels) setTimeout(() => { const table = spreadsheetRef.current?.querySelector('.jexcel tbody') @@ -292,7 +326,8 @@ export function TimeshiftSpreadsheet({ teamId: _teamId, teamName }: TimeshiftSpr // Skip first two columns (row numbers and field labels) if (cellIndex > 1) { const originalText = cell.textContent - cell.innerHTML = `
${originalText}
` + // Use 12px font for all rotated values (date values, day names, and shifts) + cell.innerHTML = `
${originalText}
` } }) } diff --git a/screenshots/Snímek obrazovky 2025-07-28 203857.png b/screenshots/Snímek obrazovky 2025-07-28 203857.png new file mode 100644 index 0000000..02eca82 Binary files /dev/null and b/screenshots/Snímek obrazovky 2025-07-28 203857.png differ