fix: fixed calendar logic (February) and added some optimisations

feature: calendar
fixed compose yml
2026-07-22 14:05:02 +03:00 · 2026-02-24 16:15:59 +03:00 · 2025-10-16 14:02:47 +03:00
5 changed files with 350 additions and 94 deletions
@@ -10,12 +10,10 @@ Just copy this compose.yml file:
 ```yml
 services:
  work-timerer:
-    image: git.frik.su/Beesquit/work-timerer:latest
+    image: git.frik.su/beesquit/work-timerer:latest
    container_name: work-timerer
    ports:
      - 4000:80
-    volumes:
-      - ./src:/usr/share/nginx/html
    restart: unless-stopped
 ```

@@ -23,6 +21,7 @@ The application should be available at the `localhost:4000`

 ### Todo:
 - [ ] Make travel time customizable with env
+- [ ] Add mobile website adaptation

 ### Limitations:
 - The app is linked to the system time
@@ -4,6 +4,4 @@ services:
    container_name: work-timerer
    ports:
      - 4000:80
-    volumes:
-      - ./src:/usr/share/nginx/html
    restart: unless-stopped
@@ -76,8 +76,8 @@ H1 {

 .time-row {
  display: flex;
-  gap: 20px;
  justify-content: center;
+  gap: 20px;
 }

 #currentTime {
@@ -86,6 +86,91 @@ H1 {
 }


+.calendar-container {
+  margin-top: 30px;
+  display: flex;
+  justify-content: center;
+}
+
+.calendar-container .hblock {
+  display: flex;
+  flex-direction: column;
+}
+
+#currentDate {
+  font-size: 2em;
+  text-align: center;
+  margin-bottom: 20px;
+  color: #ffffff;
+  word-break: keep-all;
+}
+
+.calendar-table thead tr {
+  display: flex;
+  gap: 6px;
+  margin-bottom: 6px;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+.calendar-table tbody {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.calendar-table tbody tr {
+  display: flex;
+  justify-content: center;
+  gap: 6px;
+}
+
+.calendar-table th,
+.calendar-table td {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 65px;
+  height: 45px;
+  padding: 0;
+  background-color: #2a2a2a;
+  border-radius: 5px;
+  font-size: 1em;
+  border: none;
+  box-sizing: border-box;
+}
+
+.calendar-table th {
+  background-color: #3a3a3a;
+  font-weight: 400;
+  color: #e0e0e0;
+}
+
+.calendar-table td {
+  background-color: #2a2a2a;
+}
+
+.calendar-table th.weekend-text {
+  color: #6b9ac0;
+}
+
+.calendar-table td.weekend-text {
+  color: #6b9ac0;
+  background-color: #2a2a2a;
+}
+
+.calendar-table td.today-text {
+  color: #d4a017;
+  background-color: #2a2a2a;
+  font-weight: 700;
+  border: 2px solid #d4a017;
+}
+
+.calendar-table td.other-month {
+  opacity: 0.4;
+  background-color: #232323;
+}
+
@media (max-width: 768px) {
  .time-blocks {
    gap: 10px;
@@ -95,4 +180,24 @@ H1 {
    padding: 8px 12px;
    min-width: 50px;
  }
+
+  .calendar-container {
+    padding: 0 8px;
+  }
+
+  .calendar-table th,
+  .calendar-table td {
+    width: 50px;
+    height: 38px;
+    font-size: 0.85em;
+  }
+
+  .calendar-table {
+    border-spacing: 4px;
+  }
+
+  .calendar-table thead tr,
+  .calendar-table tbody tr {
+    gap: 4px;
+  }
 }
@@ -1,16 +1,11 @@
 <!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">
@@ -36,6 +31,13 @@
        <div class="time-blocks jetbrains-mono" id="timeDifferences"></div>
      </div>
    </div>
+
+    <div class="vblock calendar-container">
+      <div class="hblock">
+        <div class="jetbrains-mono" id="currentDate"></div>
+        <table class="jetbrains-mono calendar-table" id="calendar"></table>
+      </div>
+    </div>
  </div>

  <script src="index.js"></script>
@@ -1,80 +1,50 @@
-function updateTimes() {
-  const travelTime = 1;  // in hours
+const TRAVEL_TIME_HOURS = 1;
+const FIRST_HOUR = 13;
+const LAST_HOUR = 22;

-  const now = new Date();
-  const currentHours = now.getHours();
-  const currentMinutes = now.getMinutes();
-  const currentSeconds = now.getSeconds();
+let clockEl, dateEl;
+let diffNodes = [];
+let resizeTimer = null;
+let lastDayKey = "";

-  const currentTimeElement = document.getElementById('currentTime');
-  currentTimeElement.textContent = `${currentHours.toString().padStart(2, '0')}:${currentMinutes.toString().padStart(2, '0')}:${currentSeconds.toString().padStart(2, '0')}`;
+function pad2(n) {
+  return n < 10 ? "0" + n : "" + n;
+}

-  const targetTimesElement = document.getElementById('targetTimes');
-  const leaveTimesElement = document.getElementById('leaveTimes');
-  const timeDifferencesElement = document.getElementById('timeDifferences');
+function formatClock(d) {
+  return pad2(d.getHours()) + ":" + pad2(d.getMinutes()) + ":" + pad2(d.getSeconds());
+}

-  targetTimesElement.innerHTML = '';
-  leaveTimesElement.innerHTML = '';
-  timeDifferencesElement.innerHTML = '';
+function formatDate(d) {
+  return pad2(d.getDate()) + "." + pad2(d.getMonth() + 1) + "." + d.getFullYear();
+}

-  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;
+function diffText(targetMs, nowMs) {
+  const diffMs = targetMs - nowMs;
  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')}`;
+    const diffHours = -1 * Math.ceil(diffMs / 3600000);
+    const diffMinutes = -1 * Math.ceil((diffMs % 3600000) / 60000);
+    return "-" + pad2(diffHours) + ":" + pad2(diffMinutes);
+  }
+  const diffHours = Math.floor(diffMs / 3600000);
+  const diffMinutes = Math.ceil((diffMs % 3600000) / 60000);
+  return pad2(diffHours) + ":" + pad2(diffMinutes);
 }

-    diffTimeBlocks.push(diffBlock);
+function buildLabel(text) {
+  const span = document.createElement("span");
+  span.className = "time-block label-block";
+  span.textContent = text;
+  return span;
 }

-  distributeBlocks(targetTimesElement, targetTimeBlocks);
-  distributeBlocks(leaveTimesElement, leaveTimeBlocks);
-  distributeBlocks(timeDifferencesElement, diffTimeBlocks);
+function buildTimeBlock(text) {
+  const span = document.createElement("span");
+  span.className = "time-block";
+  span.textContent = text;
+  return span;
 }

-
 function distributeBlocks(container, blocks) {
  const screenWidth = window.innerWidth;
  const blockWidth = 120;
@@ -83,36 +53,218 @@ function distributeBlocks(container, blocks) {
  const availableWidth = screenWidth - labelWidth;
  const blocksPerRow = Math.floor(availableWidth / blockWidth);

+  while (container.childNodes.length > 1) {
+    container.removeChild(container.lastChild);
+  }
+
  if (blocksPerRow > blocks.length) {
-    blocks.forEach(block => container.appendChild(block));
+    blocks.forEach(function (b) { container.appendChild(b); });
    return;
  }

  const totalBlocks = blocks.length;
  const halfBlocks = Math.ceil(totalBlocks / 2);

-  const rowsContainer = document.createElement('div');
-  rowsContainer.className = 'multi-rows-container';
+  const rowsContainer = document.createElement("div");
+  rowsContainer.className = "multi-rows-container";

-  const topRow = document.createElement('div');
-  topRow.className = 'time-row';
+  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';
+  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);
 }

+function buildTargetBlocks() {
+  const targetTimesElement = document.getElementById("targetTimes");
+  const leaveTimesElement = document.getElementById("leaveTimes");
+  const timeDifferencesElement = document.getElementById("timeDifferences");

-updateTimes();
-setInterval(updateTimes, 200);
-window.addEventListener('resize', updateTimes);
+  targetTimesElement.appendChild(buildLabel("TT"));
+  leaveTimesElement.appendChild(buildLabel("LT"));
+  timeDifferencesElement.appendChild(buildLabel("TD"));
+
+  const targetBlocks = [];
+  const leaveBlocks = [];
+  const diffBlocks = [];
+
+  for (let hour = FIRST_HOUR; hour <= LAST_HOUR; hour++) {
+    const leaveHour = hour - TRAVEL_TIME_HOURS;
+
+    targetBlocks.push(buildTimeBlock(pad2(hour) + ":00"));
+    leaveBlocks.push(buildTimeBlock(pad2(leaveHour) + ":00"));
+    diffBlocks.push(buildTimeBlock(""));
+  }
+
+  distributeBlocks(targetTimesElement, targetBlocks);
+  distributeBlocks(leaveTimesElement, leaveBlocks);
+  distributeBlocks(timeDifferencesElement, diffBlocks);
+
+  diffNodes = diffBlocks;
+}
+
+function buildCalendar() {
+  const calendar = document.getElementById("calendar");
+  calendar.innerHTML = "";
+
+  const now = new Date();
+  const daysOfWeek = ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"];
+
+  const thead = document.createElement("thead");
+  const headerRow = document.createElement("tr");
+  daysOfWeek.forEach(function (day, index) {
+    const th = document.createElement("th");
+    th.textContent = day;
+    if (index === 5 || index === 6) {
+      th.classList.add("weekend-text");
+    }
+    headerRow.appendChild(th);
+  });
+  thead.appendChild(headerRow);
+  calendar.appendChild(thead);
+
+  const tbody = document.createElement("tbody");
+  const year = now.getFullYear();
+  const month = now.getMonth();
+  const firstDayOfMonth = new Date(year, month, 1);
+  let firstDayWeek = firstDayOfMonth.getDay();
+  firstDayWeek = firstDayWeek === 0 ? 7 : firstDayWeek;
+
+  const daysInMonth = new Date(year, month + 1, 0).getDate();
+  const daysInPrevMonth = new Date(year, month, 0).getDate();
+
+  let dayCounter = 1;
+  let nextMonthDayCounter = 1;
+  let startDay = daysInPrevMonth - firstDayWeek + 2;
+
+  const totalRows = Math.ceil((firstDayWeek - 1 + daysInMonth) / 7);
+  for (let row = 0; row < totalRows; row++) {
+    const tr = document.createElement("tr");
+    for (let col = 0; col < 7; col++) {
+      const td = document.createElement("td");
+
+      let cellDay;
+      let isCurrentMonth = true;
+
+      if (row === 0 && col < firstDayWeek - 1) {
+        cellDay = startDay + col;
+        isCurrentMonth = false;
+      } else if (dayCounter <= daysInMonth) {
+        cellDay = dayCounter;
+        dayCounter++;
+      } else {
+        cellDay = nextMonthDayCounter;
+        nextMonthDayCounter++;
+        isCurrentMonth = false;
+      }
+
+      td.textContent = cellDay;
+
+      if (isCurrentMonth && cellDay === now.getDate()) {
+        td.classList.add("today-text");
+      }
+      if (col === 5 || col === 6) {
+        td.classList.add("weekend-text");
+      }
+      if (!isCurrentMonth) {
+        td.classList.add("other-month");
+      }
+      tr.appendChild(td);
+    }
+    tbody.appendChild(tr);
+  }
+  calendar.appendChild(tbody);
+}
+
+function updateClock() {
+  const now = new Date();
+  clockEl.textContent = formatClock(now);
+  scheduleNextClockTick();
+}
+
+function scheduleNextClockTick() {
+  const delay = 1000 - new Date().getMilliseconds();
+  setTimeout(updateClock, delay);
+}
+
+function updateDiffs() {
+  const now = new Date();
+  for (let hour = FIRST_HOUR; hour <= LAST_HOUR; hour++) {
+    const target = new Date();
+    target.setHours(hour - TRAVEL_TIME_HOURS, 0, 0, 0);
+    diffNodes[hour - FIRST_HOUR].textContent = diffText(target.getTime(), now.getTime());
+  }
+  scheduleNextDiffTick();
+}
+
+function scheduleNextDiffTick() {
+  const now = new Date();
+  const msUntilNextMinute =
+    (60 - now.getSeconds()) * 1000 - now.getMilliseconds();
+  setTimeout(updateDiffs, msUntilNextMinute);
+}
+
+function checkDayChange() {
+  const now = new Date();
+  const key =
+    now.getFullYear() + "-" + (now.getMonth() + 1) + "-" + now.getDate();
+  if (key !== lastDayKey) {
+    lastDayKey = key;
+    dateEl.textContent = formatDate(now);
+    buildCalendar();
+  }
+}
+
+function init() {
+  clockEl = document.getElementById("currentTime");
+  dateEl = document.getElementById("currentDate");
+
+  buildTargetBlocks();
+  buildCalendar();
+
+  const now = new Date();
+  lastDayKey = now.getFullYear() + "-" + (now.getMonth() + 1) + "-" + now.getDate();
+  dateEl.textContent = formatDate(now);
+
+  updateClock();
+  updateDiffs();
+
+  setInterval(checkDayChange, 60000);
+}
+
+function onResize() {
+  if (resizeTimer !== null) clearTimeout(resizeTimer);
+  resizeTimer = setTimeout(function () {
+    resizeTimer = null;
+    const targetTimesElement = document.getElementById("targetTimes");
+    const leaveTimesElement = document.getElementById("leaveTimes");
+    const timeDifferencesElement = document.getElementById("timeDifferences");
+
+    const allBlocks = [].slice.call(
+      timeDifferencesElement.querySelectorAll(".time-block:not(.label-block)")
+    );
+    const targetBlocks = [].slice.call(
+      targetTimesElement.querySelectorAll(".time-block:not(.label-block)")
+    );
+    const leaveBlocks = [].slice.call(
+      leaveTimesElement.querySelectorAll(".time-block:not(.label-block)")
+    );
+
+    distributeBlocks(targetTimesElement, targetBlocks);
+    distributeBlocks(leaveTimesElement, leaveBlocks);
+    distributeBlocks(timeDifferencesElement, allBlocks);
+  }, 150);
+}
+
+init();
+window.addEventListener("resize", onResize);
Author	SHA1	Message	Date
Beesquit	ac2696d387	fix: fixed calendar logic (February) and added some optimisations Build and Push Docker Image / build-and-push (release) Failing after 1m25s Details	2026-07-22 14:05:02 +03:00
Beesquit	90069d9aa7	feature: calendar Build and Push Docker Image / build-and-push (release) Successful in 9m41s Details	2026-02-24 16:15:59 +03:00
Beesquit	bca07d4eb8	fixed compose yml	2025-10-16 14:02:47 +03:00