time.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <title>Time Tracking | Track Your Working Hours</title>
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
  <style>
    /* [Original CSS remains unchanged] */
    :root {
      --primary-color: #556B2F;
      --secondary-color: #6B8E23;
      --accent-color: #8F9779;
      --background-color: #f9f6f2;
      --text-color: #333;
      --success-color: #4CAF50;
      --error-color: #F44336;
    }
    body.dark-mode {
      --background-color: #333;
      --text-color: #f9f6f2;
      --primary-color: #8F9779;
      --secondary-color: #6B8E23;
      --accent-color: #556B2F;
      --success-color: #66bb6a;
      --error-color: #ef5350;
    }
    body {
      font-family: 'Roboto', sans-serif;
      background-color: var(--background-color);
      color: var(--text-color);
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      min-height: 100vh;
    }
    header {
      background-color: var(--primary-color);
      color: white;
      padding: 1rem;
      text-align: center;
    }
    .logo {
      font-size: 1.5rem;
      font-weight: 700;
    }
    h1 {
      margin: 0.5rem 0;
      font-size: 2rem;
    }
    h2 {
      margin: 0;
      font-size: 1.2rem;
      font-weight: 400;
    }
    .container {
      background-color: white;
      max-width: 800px;
      margin: 2rem auto;
      padding: 2rem;
      border-radius: 10px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      flex: 1;
    }
    body.dark-mode .container {
      background-color: #444;
    }
    .form-group {
      margin-bottom: 1.5rem;
    }
    label {
      display: block;
      margin-bottom: 0.5rem;
      font-weight: 500;
    }
    input,
    select,
    textarea {
      width: 100%;
      padding: 0.75rem;
      border: 1px solid #ddd;
      border-radius: 5px;
      font-size: 1rem;
      box-sizing: border-box;
    }
    body.dark-mode input,
    body.dark-mode select,
    body.dark-mode textarea {
      background-color: #555;
      color: var(--text-color);
      border-color: #666;
    }
    textarea {
      height: 100px;
      resize: vertical;
    }
    button {
      background-color: var(--accent-color);
      color: white;
      padding: 0.75rem 1.5rem;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      font-size: 1rem;
      transition: background-color 0.3s;
    }
    button:hover {
      background-color: var(--primary-color);
    }
    .error-message {
      color: var(--error-color);
      font-size: 0.875rem;
      margin-top: 0.25rem;
      display: block;
    }
    .success-message,
    .error-message:not(.field-error) {
      padding: 1rem;
      margin: 1rem 0;
      border-radius: 5px;
      display: none;
    }
    .success-message {
      background-color: var(--success-color);
      color: white;
    }
    .error-message:not(.field-error) {
      background-color: var(--error-color);
      color: white;
    }
    .history {
      margin-top: 2rem;
    }
    .history h3 {
      margin-bottom: 1rem;
      font-size: 1.5rem;
    }
    .history-list {
      border: 1px solid #ddd;
      border-radius: 5px;
      padding: 1rem;
      max-height: 300px;
      overflow-y: auto;
    }
    body.dark-mode .history-list {
      background-color: #444;
      border-color: #666;
    }
    .history-item {
      padding: 1rem;
      border-bottom: 1px solid #eee;
    }
    .history-item:last-child {
      border-bottom: none;
    }
    footer {
      text-align: center;
      padding: 1rem;
      background-color: var(--secondary-color);
      color: white;
    }
    @media (max-width: 600px) {
      .container {
        margin: 1rem;
        padding: 1rem;
      }
      button {
        width: 100%;
        margin-bottom: 0.5rem;
      }
    }
  </style>
</head>
<body>
  <header>
    <div class="logo">Rosewood Building Group</div>
    <h1>Time Tracking</h1>
    <h2>Track Your Working Hours</h2>
  </header>

  <main class="container">
    <form id="timeLogForm">
      <div class="form-group">
        <label for="employeeName">Your Name:</label>
        <input type="text" id="employeeName" placeholder="Enter your full name" required />
        <span class="error-message field-error" id="nameError"></span>
      </div>

      <div class="form-group">
        <label for="entryDate">Date:</label>
        <input type="date" id="entryDate" required />
        <span class="error-message field-error" id="dateError"></span>
      </div>

      <div class="form-group">
        <label for="jobName">Job Name or Address:</label>
        <input list="jobNameList" id="jobName" placeholder="Enter job name or address" required />
        <datalist id="jobNameList"></datalist>
        <span class="error-message field-error" id="jobError"></span>
      </div>

      <div class="form-group">
        <label for="hours">Hours Worked:</label>
        <select id="hours" required title="Select hours in 0.25 increments">
          <!-- Populated dynamically in JavaScript -->
        </select>
      </div>

      <div class="form-group">
        <label for="workNotes">Work Notes:</label>
        <textarea id="workNotes" placeholder="Brief description of work completed"></textarea>
      </div>

      <button type="submit" id="submitButton">Submit Time</button>
    </form>

    <div class="success-message" id="successMessage">Time entry successfully submitted!</div>
    <div class="error-message" id="errorMessage">Please fill out all required fields correctly.</div>

    <div class="history" id="historySection">
      <h3>Recent Entries</h3>
      <div class="history-list" id="historyList"></div>
    </div>
  </main>

  <footer class="footer">© 2025 Rosewood Building Group</footer>

  <script>
    document.addEventListener('DOMContentLoaded', () => {
      // Device ID Setup
      let deviceId = localStorage.getItem('deviceId');
      if (!deviceId) {
        // Use crypto.randomUUID() if available; otherwise, generate a fallback string.
        deviceId = (typeof crypto.randomUUID === 'function')
          ? crypto.randomUUID()
          : Math.random().toString(36).substring(2) + Date.now().toString(36);
        localStorage.setItem('deviceId', deviceId);
      }
  
      // DOM Elements
      const form = document.getElementById('timeLogForm');
      const employeeNameInput = document.getElementById('employeeName');
      const entryDateInput = document.getElementById('entryDate');
      const jobNameInput = document.getElementById('jobName');
      const hoursInput = document.getElementById('hours');
      const workNotesInput = document.getElementById('workNotes');
      const submitButton = document.getElementById('submitButton');
      const successMessage = document.getElementById('successMessage');
      const errorMessage = document.getElementById('errorMessage');
      const historySection = document.getElementById('historySection');
      const historyList = document.getElementById('historyList');
      const nameError = document.getElementById('nameError');
      const dateError = document.getElementById('dateError');
      const jobError = document.getElementById('jobError');
  
      // State variable to store all entries in a flat list
      let allEntries = [];
  
      // Initialize Form
      const today = new Date();
      const todayFormatted = today.toISOString().split('T')[0];
      entryDateInput.value = todayFormatted;
      employeeNameInput.value = localStorage.getItem('employeeName') || '';
  
      // Populate Hours Dropdown in 0.25 increments
      for (let i = 0.25; i <= 24; i += 0.25) {
        const option = document.createElement('option');
        option.value = i.toFixed(2);
        option.textContent = `${i.toFixed(2)} hours`;
        if (i === 8) option.selected = true;
        hoursInput.appendChild(option);
      }
  
      // Load Entries from localStorage and flatten into a single list
      const loadEntries = () => {
        allEntries = [];
        for (let i = 0; i < localStorage.length; i++) {
          const key = localStorage.key(i);
          if (key.startsWith('timeEntries_')) {
            const entries = JSON.parse(localStorage.getItem(key)) || [];
            allEntries = allEntries.concat(entries);
          }
        }
        // Sort entries by date (most recent first)
        allEntries.sort((a, b) => new Date(b.date) - new Date(a.date));
        updateHistoryDisplay();
        updateJobNameDatalist();
      };
  
      // Update the history display to show recent entries
      const updateHistoryDisplay = () => {
        historyList.innerHTML = '';
        if (allEntries.length > 0) {
          historySection.style.display = 'block';
          allEntries.forEach(entry => {
            const entryElement = document.createElement('div');
            entryElement.className = 'history-item';
            entryElement.innerHTML = `
              <div class="history-job"><strong>${entry.jobName}</strong> on ${entry.date}</div>
              <div class="history-time">${entry.hours} hours</div>
              <div>${entry.notes}</div>
              <div><small>Submitted at ${entry.timestamp}</small></div>
            `;
            historyList.appendChild(entryElement);
          });
        } else {
          historySection.style.display = 'none';
        }
      };
  
      // Update the job name datalist with unique job names from the past 2 weeks
      const updateJobNameDatalist = () => {
        const datalist = document.getElementById('jobNameList');
        datalist.innerHTML = '';
        const uniqueJobNames = new Set();
        let twoWeeksAgo = new Date();
        twoWeeksAgo.setDate(today.getDate() - 14);
        allEntries.forEach(entry => {
          const entryDate = new Date(entry.date);
          if (entryDate >= twoWeeksAgo) {
            uniqueJobNames.add(entry.jobName);
          }
        });
        uniqueJobNames.forEach(jobName => {
          const option = document.createElement('option');
          option.value = jobName;
          datalist.appendChild(option);
        });
      };
  
      // Validation Functions
      const validateName = () => {
        const name = employeeNameInput.value.trim();
        if (!name) {
          nameError.textContent = 'Please enter your name';
          return false;
        }
        nameError.textContent = '';
        return true;
      };
  
      const validateDate = () => {
        const date = entryDateInput.value;
        if (!date) {
          dateError.textContent = 'Please select a date';
          return false;
        }
        const todayStr = new Date().toISOString().split('T')[0];
        if (date > todayStr) {
          dateError.textContent = 'Date cannot be in the future';
          return false;
        }
        dateError.textContent = '';
        return true;
      };
  
      const validateJobName = () => {
        const jobName = jobNameInput.value.trim();
        if (!jobName) {
          jobError.textContent = 'Please enter a job name';
          return false;
        }
        jobError.textContent = '';
        return true;
      };
  
      const validateForm = () => {
        return validateName() && validateDate() && validateJobName();
      };
  
      employeeNameInput.addEventListener('blur', validateName);
      entryDateInput.addEventListener('blur', validateDate);
      jobNameInput.addEventListener('blur', validateJobName);
  
      // Form Submission with POST request and loading indicator
      form.addEventListener('submit', (e) => {
        e.preventDefault();
        if (!validateForm()) {
          errorMessage.style.display = 'block';
          successMessage.style.display = 'none';
          setTimeout(() => (errorMessage.style.display = 'none'), 3000);
          return;
        }
  
        // Disable submit button and change its text to indicate loading
        submitButton.disabled = true;
        const originalButtonText = submitButton.textContent;
        submitButton.textContent = 'Submitting...';
  
        const dateStr = entryDateInput.value;
        const entry = {
          jobName: jobNameInput.value.trim(),
          date: dateStr,
          employeeName: employeeNameInput.value.trim(),
          hours: parseFloat(hoursInput.value).toFixed(2),
          notes: workNotesInput.value.trim(),
          timestamp: new Date().toLocaleTimeString(),
          deviceId: deviceId  // Include the device ID in your entry
        };
  
        // Send POST request to App Script
        fetch('https://script.google.com/macros/s/AKfycbw5b0cyg4JD2b5uV_uImYVVizAN1igsSluGPM8uwatRwUYp784ATaGJaHfPH6p1qtdmKg/exec', {
          method: 'POST',
          redirect: "follow",
          headers: {
            'Content-Type': 'text/plain'
          },
          body: JSON.stringify(entry)
        })
        .then(response => response.json())
        .then(data => {
          if (data.status === 'success') {
            console.log('Data saved successfully');
            // Save entry to localStorage for the specific date
            const dateKey = `timeEntries_${dateStr}`;
            const existingEntries = JSON.parse(localStorage.getItem(dateKey)) || [];
            existingEntries.push(entry);
            localStorage.setItem(dateKey, JSON.stringify(existingEntries));
  
            localStorage.setItem('employeeName', employeeNameInput.value.trim());
            form.reset();
            entryDateInput.value = todayFormatted;
            employeeNameInput.value = localStorage.getItem('employeeName') || '';
            hoursInput.value = "8.00";
            successMessage.style.display = 'block';
            errorMessage.style.display = 'none';
            setTimeout(() => (successMessage.style.display = 'none'), 3000);
            loadEntries();
          } else {
            console.error('Error saving data:', data.message);
          }
        })
        .catch(error => {
          console.error('Error:', error);
        })
        .finally(() => {
          // Re-enable the submit button and reset its text
          submitButton.disabled = false;
          submitButton.textContent = originalButtonText;
        });
      });
  
      // Initial Load
      loadEntries();
    });
  </script>
  
</body>
</html>