simple v1 version
This commit is contained in:
27
README.md
27
README.md
@ -1,3 +1,28 @@
|
||||
# work-timerer
|
||||
|
||||
Simple web app that shows time left to work and some more things
|
||||
Simple web app that shows time left to work and some more things
|
||||
|
||||
### Installation
|
||||
|
||||
You can run the app running just `index.html` or you using docker compose.
|
||||
|
||||
Just copy this compose.yml file:
|
||||
```yml
|
||||
services:
|
||||
work-timerer:
|
||||
image: git.frik.su/Beesquit/work-timerer:latest
|
||||
container_name: work-timerer
|
||||
ports:
|
||||
4000:80
|
||||
restart: unless stopped
|
||||
```
|
||||
|
||||
The application should be available at the `localhost:4000`
|
||||
|
||||
### Todo:
|
||||
-[ ] Make travel time customizable with env
|
||||
|
||||
### Limitations:
|
||||
- The app is linked to the system time
|
||||
- If you live in a different timezone than your office the app will not work correctly
|
||||
|
||||
|
||||
0
compose.yml
Normal file
0
compose.yml
Normal file
98
src/index.css
Normal file
98
src/index.css
Normal file
@ -0,0 +1,98 @@
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
background-color: #1f1f1f;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
H1 {
|
||||
text-align: center
|
||||
}
|
||||
|
||||
|
||||
.jetbrains-mono {
|
||||
font-family: 'JetBrains Mono Nerd Font', monospace;
|
||||
font-optical-sizing: auto;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
|
||||
.parent {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
overflow: auto;
|
||||
justify-content: space-between;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.vblock {
|
||||
display: flex;
|
||||
margin: auto;
|
||||
justify-content: space-between;
|
||||
flex-direction: row;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.hblock {
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.time-blocks {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.time-block {
|
||||
padding: 10px 15px;
|
||||
background-color: #2a2a2a;
|
||||
border-radius: 5px;
|
||||
min-width: 60px;
|
||||
text-align: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.label-block {
|
||||
background-color: #2a2a2a;
|
||||
min-width: 16px;
|
||||
flex-shrink: 0;
|
||||
font-weight: 450;
|
||||
}
|
||||
|
||||
.multi-rows-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.time-row {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#currentTime {
|
||||
font-size: 3em;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.time-blocks {
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.time-block {
|
||||
padding: 8px 12px;
|
||||
min-width: 50px;
|
||||
}
|
||||
}
|
||||
43
src/index.html
Normal file
43
src/index.html
Normal file
@ -0,0 +1,43 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>w-timerer</title>
|
||||
<link rel="stylesheet" type="text/css" href="index.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="parent">
|
||||
<div class="vblock">
|
||||
<div class="hblock">
|
||||
<h1 class="jetbrains-mono" id="currentTime">--:--</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="vblock">
|
||||
<div class="hblock">
|
||||
<div class="time-blocks jetbrains-mono" id="targetTimes"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="vblock">
|
||||
<div class="hblock">
|
||||
<div class="time-blocks jetbrains-mono" id="leaveTimes"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="vblock">
|
||||
<div class="hblock">
|
||||
<div class="time-blocks jetbrains-mono" id="timeDifferences"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="index.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
118
src/index.js
Normal file
118
src/index.js
Normal file
@ -0,0 +1,118 @@
|
||||
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);
|
||||
Reference in New Issue
Block a user