Work Time Tracker ⏱️

A simple yet powerful web application built with Flask to calculate your work end time based on your start time, standard work duration (including Fridays), and any extended breaks taken. Features a dynamic interface with AJAX updates, dark mode, progress bar, and basic PWA capabilities.

✨ Features

• Dynamic End Time Calculation: Calculates when you should leave based on start time and day of the week (configurable work hours for regular days vs. Fridays).
• Break Adjustment: Allows inputting total break duration if it exceeds the standard 30 minutes, adjusting the leave time accordingly.
• Real-time Status: Shows remaining work time or overtime accrued.
• AJAX Updates: Calculates and updates results instantly without full page reloads.
• Auto-Refresh: Optional auto-refresh (every 60 seconds) to update status.
• AM/PM Display: Optional switch to show calculated leave times in 12-hour format.
• End-of-Day Notifications: Optional browser notification when the calculated workday ends while the page remains open.
• Timezone Aware: Uses pytz for accurate timezone handling (configurable via environment variable).
• Work Progress Bar: Visual indicator of how much of the required work time has been completed.
• Dark/Light Mode: User-toggleable theme for comfort.
• Installable PWA: Can be installed to the home screen on supported devices (via Manifest).
• Basic Offline Support: App interface (shell) loads when offline (via Service Worker caching). (Note: Calculations still require network connection).
• Dockerized: Ready for deployment via Docker.
• CI/CD Ready: Includes GitHub Actions workflow to automatically build and push multi-arch Docker image to GHCR on commits to main.

💻 Technologies Used

• Backend: Python 3, Flask, Gunicorn, Pytz
• Frontend: HTML5, CSS3 (with CSS Variables), JavaScript (Fetch API, Service Workers), Bootstrap 5, Font Awesome, Google Fonts (Poppins)
• PWA: Web App Manifest
• Containerization: Docker
• CI/CD: GitHub Actions

⚙️ Setup & Configuration

1. Clone the repository:

   git clone [https://github.com/bifr0est/worktimeweb.git](https://github.com/bifr0est/worktimeweb.git)
   cd worktimeweb

2. Environment Variables: The application uses environment variables for configuration. You can set these directly in your system or use a .env file with python-dotenv for local development.

   • FLASK_SECRET_KEY: Required for Flask sessions/security. Generate a strong random key.
   • TIMEZONE: Optional (defaults to Europe/Vienna). Olson timezone name (e.g., America/New_York).
   • STANDARD_BREAK_MINUTES: Optional (defaults to 30).
   • WORK_HOURS_REGULAR: Optional (defaults to 8). Base hours Mon-Thu.
   • WORK_MINUTES_REGULAR: Optional (defaults to 0). Base minutes Mon-Thu.
   • WORK_HOURS_FRIDAY: Optional (defaults to 6). Base hours Fri.
   • WORK_MINUTES_FRIDAY: Optional (defaults to 30). Base minutes Fri.
   • FLASK_DEBUG: Optional (defaults to 0 or False). Set to 1 or True ONLY for local development.

🚀 Running Locally (Development)

1. Install Dependencies:

   uv sync

2. Set Environment Variables: (Example for Linux/macOS)

   export FLASK_APP=app:app
   export FLASK_DEBUG=1 # Enable debug mode for development ONLY
   export FLASK_SECRET_KEY='a_very_strong_random_secret_key_local'
   # Optional: export TIMEZONE='Your/Timezone'

3. Run the Flask Development Server:

   uv run flask run

4. Access the app at http://127.0.0.1:5000.

🐳 Running with Docker

1. Build the Docker image:

   docker build -t worktimeweb .

   Alternatively, pull the pre-built image from GHCR:

   docker pull ghcr.io/bifr0est/worktimeweb:latest

2. Run the Docker container: (Pass necessary environment variables)

   docker run -d -p 5000:5000 \
     -e FLASK_SECRET_KEY='your_production_secret_key' \
     -e TIMEZONE='Europe/Vienna' \
     --name worktimeweb-container \
     ghcr.io/bifr0est/worktimeweb:latest
     # Or use the locally built image name: worktimeweb

   Access the app at http://localhost:5000 (or your server's IP).

🔄 CI/CD

This repository uses GitHub Actions to automatically build a multi-arch Docker image (amd64, arm64) and push it to GitHub Container Registry (ghcr.io) whenever code is pushed to the main branch.

• Workflow File: .github/workflows/docker-image.yml
• Image Name: ghcr.io/bifr0est/worktimeweb:latest

You can configure your server (e.g., Unraid Docker) to pull and run this image.

📝 To-Do / Future Improvements

• Client-side input validation (e.g., for break minutes).
• Add a "Clear Form" button.
• Enhance PWA features:
  • Offline calculation functionality (requires JS rewrite of logic or more advanced service worker caching).
  • Add screenshots to manifest.json for richer install UI.
  • Background notifications when the app is fully closed.
• Add automated tests (unit/integration).
• More comprehensive server-side logging.

---

Happy Tracking!