119 lines
4.0 KiB
JavaScript
119 lines
4.0 KiB
JavaScript
function updateTimes() {
|
|
const travelTime = 1; // in hours
|
|
|
|
const now = new Date();
|
|
const currentHours = now.getHours();
|
|
const currentMinutes = now.getMinutes();
|
|
const currentSeconds = now.getSeconds();
|
|
|
|
const currentTimeElement = document.getElementById('currentTime');
|
|
currentTimeElement.textContent = `${currentHours.toString().padStart(2, '0')}:${currentMinutes.toString().padStart(2, '0')}:${currentSeconds.toString().padStart(2, '0')}`;
|
|
|
|
const targetTimesElement = document.getElementById('targetTimes');
|
|
const leaveTimesElement = document.getElementById('leaveTimes');
|
|
const timeDifferencesElement = document.getElementById('timeDifferences');
|
|
|
|
targetTimesElement.innerHTML = '';
|
|
leaveTimesElement.innerHTML = '';
|
|
timeDifferencesElement.innerHTML = '';
|
|
|
|
const ttBlock = document.createElement('span');
|
|
ttBlock.className = 'time-block label-block';
|
|
ttBlock.textContent = 'TT';
|
|
targetTimesElement.appendChild(ttBlock);
|
|
|
|
const ltBlock = document.createElement('span');
|
|
ltBlock.className = 'time-block label-block';
|
|
ltBlock.textContent = 'LT';
|
|
leaveTimesElement.appendChild(ltBlock);
|
|
|
|
const tdBlock = document.createElement('span');
|
|
tdBlock.className = 'time-block label-block';
|
|
tdBlock.textContent = 'TD';
|
|
timeDifferencesElement.appendChild(tdBlock);
|
|
|
|
const targetTimeBlocks = [];
|
|
const leaveTimeBlocks = [];
|
|
const diffTimeBlocks = [];
|
|
|
|
for (let hour = 13; hour <= 22; hour++) {
|
|
let leaveHour = hour - travelTime;
|
|
|
|
const timeBlock = document.createElement('span');
|
|
timeBlock.className = 'time-block';
|
|
timeBlock.textContent = `${hour.toString().padStart(2, '0')}:00`;
|
|
targetTimeBlocks.push(timeBlock);
|
|
|
|
const leaveTimeBlock = document.createElement('span');
|
|
leaveTimeBlock.className = 'time-block';
|
|
leaveTimeBlock.textContent = `${(leaveHour).toString().padStart(2, '0')}:00`;
|
|
leaveTimeBlocks.push(leaveTimeBlock);
|
|
|
|
const targetTime = new Date();
|
|
targetTime.setHours(leaveHour, 0, 0, 0);
|
|
|
|
const diffBlock = document.createElement('span');
|
|
diffBlock.className = 'time-block';
|
|
|
|
const diffMs = targetTime - now;
|
|
if (diffMs < 0) {
|
|
const diffHours = -1 * Math.ceil(diffMs / (1000 * 60 * 60));
|
|
const diffMinutes = -1 * Math.ceil((diffMs % (1000 * 60 * 60)) / (1000 * 60));
|
|
diffBlock.textContent = `-${diffHours.toString().padStart(2, '0')}:${diffMinutes.toString().padStart(2, '0')}`;
|
|
} else {
|
|
const diffHours = Math.floor(diffMs / (1000 * 60 * 60));
|
|
const diffMinutes = Math.ceil((diffMs % (1000 * 60 * 60)) / (1000 * 60));
|
|
diffBlock.textContent = `${diffHours.toString().padStart(2, '0')}:${diffMinutes.toString().padStart(2, '0')}`;
|
|
}
|
|
|
|
diffTimeBlocks.push(diffBlock);
|
|
}
|
|
|
|
distributeBlocks(targetTimesElement, targetTimeBlocks);
|
|
distributeBlocks(leaveTimesElement, leaveTimeBlocks);
|
|
distributeBlocks(timeDifferencesElement, diffTimeBlocks);
|
|
}
|
|
|
|
|
|
function distributeBlocks(container, blocks) {
|
|
const screenWidth = window.innerWidth;
|
|
const blockWidth = 120;
|
|
const labelWidth = 40;
|
|
|
|
const availableWidth = screenWidth - labelWidth;
|
|
const blocksPerRow = Math.floor(availableWidth / blockWidth);
|
|
|
|
if (blocksPerRow > blocks.length) {
|
|
blocks.forEach(block => container.appendChild(block));
|
|
return;
|
|
}
|
|
|
|
const totalBlocks = blocks.length;
|
|
const halfBlocks = Math.ceil(totalBlocks / 2);
|
|
|
|
const rowsContainer = document.createElement('div');
|
|
rowsContainer.className = 'multi-rows-container';
|
|
|
|
const topRow = document.createElement('div');
|
|
topRow.className = 'time-row';
|
|
for (let i = 0; i < halfBlocks; i++) {
|
|
topRow.appendChild(blocks[i]);
|
|
}
|
|
rowsContainer.appendChild(topRow);
|
|
|
|
const bottomRow = document.createElement('div');
|
|
bottomRow.className = 'time-row';
|
|
for (let i = halfBlocks; i < totalBlocks; i++) {
|
|
bottomRow.appendChild(blocks[i]);
|
|
}
|
|
rowsContainer.appendChild(bottomRow);
|
|
|
|
const label = container.firstChild;
|
|
container.appendChild(rowsContainer);
|
|
}
|
|
|
|
|
|
updateTimes();
|
|
setInterval(updateTimes, 200);
|
|
window.addEventListener('resize', updateTimes);
|