TripFuelTracker/index.html at main · SWADlk/TripFuelTracker · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Running Record</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <style>
  body {
    font-family: "Inter", sans-serif;
  }

  /* Custom radio selection background and text color */
  .radio-label input:checked + div {
    background-color: #16a34a; /* Tailwind green-600 */
    color: white;
    box-shadow: 0 0 0 2px #16a34a44;
  }

  /* Custom highlight when selecting text */
  ::selection {
    background-color: #bbf7d0; /* Tailwind green-200 */
    color: #065f46;           /* Tailwind green-800 */
  }
</style>

</head>
<body class="bg-gray-100 py-8 px-4">
  <div class="max-w-xl mx-auto space-y-8">

    <!-- Trip Form -->
    <form id="tripForm" action="https://script.google.com/macros/s/AKfycbyCHY4hb4PTSiRpGpYYJPBRaYQZpUbI46zVOJSRf1pGdjV0yhxn7OrbM1cgUNvzMfzS/exec" method="POST" class="bg-white p-6 rounded-2xl shadow-lg space-y-6">
      <h1 class="text-2xl font-bold text-center text-gray-800">🚗 Running Record</h1>

      <div>
        <label for="tripIdentifier" class="text-sm font-medium block mb-1">Reading <span class="text-red-500">*</span></label>
        <input type="text" name="tripIdentifier" id="tripIdentifier" required placeholder="e.g., Trip #123" class="w-full px-4 py-3 border rounded-lg shadow-sm focus:ring-2 focus:ring-blue-500"/>
      </div>

      <div>
        <label class="text-sm font-medium block mb-2">Trip Type</label>
        <div class="space-y-2">
          <label class="radio-label flex items-center">
            <input type="radio" name="tripType" value="official" class="hidden" required/>
            <div class="w-full text-center py-3 px-4 rounded-lg bg-gray-200 text-gray-700 cursor-pointer">Official</div>
          </label>
          <label class="radio-label flex items-center">
            <input type="radio" name="tripType" value="private" class="hidden"/>
            <div class="w-full text-center py-3 px-4 rounded-lg bg-gray-200 text-gray-700 cursor-pointer">Private</div>
          </label>
        </div>
      </div>

      <div>
        <label class="text-sm font-medium block mb-2">Trip Status</label>
        <div class="space-y-2">
          <label class="radio-label flex items-center">
            <input type="radio" name="tripStatus" value="start" class="hidden" required/>
            <div class="w-full text-center py-3 px-4 rounded-lg bg-gray-200 text-gray-700 cursor-pointer">Start Trip</div>
          </label>
          <label class="radio-label flex items-center">
            <input type="radio" name="tripStatus" value="end" class="hidden"/>
            <div class="w-full text-center py-3 px-4 rounded-lg bg-gray-200 text-gray-700 cursor-pointer">End Trip</div>
          </label>
          <label class="radio-label flex items-center">
            <input type="radio" name="tripStatus" value="fueling" class="hidden"/>
            <div class="w-full text-center py-3 px-4 rounded-lg bg-gray-200 text-gray-700 cursor-pointer">Fueling</div>
          </label>
        </div>
      </div>

      <div id="fuelQuantityContainer" class="hidden">
        <label for="fuelQuantityLiters" class="text-sm font-medium block mb-1">Fuel Quantity (Liters) <span class="text-red-500">*</span></label>
        <input type="number" name="fuelQuantityLiters" id="fuelQuantityLiters" step="0.1" placeholder="e.g., 25.5" min="0" class="w-full px-4 py-3 border rounded-lg shadow-sm focus:ring-2 focus:ring-blue-500"/>
      </div>

      <div>
        <label for="remarks" class="text-sm font-medium block mb-1">Remarks (Optional)</label>
        <textarea name="remarks" id="remarks" rows="3" placeholder="Any notes..." class="w-full px-4 py-3 border rounded-lg shadow-sm focus:ring-2 focus:ring-blue-500 resize-y"></textarea>
      </div>

      <input type="hidden" name="submissionTimestamp" id="submissionTimestamp" />

      <button type="submit" class="w-full bg-blue-600 text-white text-lg font-semibold py-3 rounded-lg shadow-md hover:bg-blue-700 transition">Submit</button>
    </form>

    <!-- Trip Summary -->
    <div class="bg-white p-6 rounded-2xl shadow-lg space-y-4 text-center">
      <h2 class="text-xl font-bold text-gray-800">📊 Running Summary</h2>
      <div class="text-gray-700 space-y-2 text-left">
        <p class="flex justify-between"><span>Monthly Fuel (L):</span> <span id="monthlyFuel" class="text-blue-600 font-bold">0.00</span></p>
        <p class="flex justify-between"><span>Private Trips:</span> <span id="totalPrivateTrips" class="text-blue-600 font-bold">0</span></p>
        <p class="flex justify-between"><span>Official Trips:</span> <span id="totalOfficialTrips" class="text-blue-600 font-bold">0</span></p>
      </div>
      <p class="text-xs text-gray-500">Last Updated: <span id="lastUpdated">N/A</span></p>
    </div>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', function () {
      const tripStatusRadios = document.querySelectorAll('input[name="tripStatus"]');
      const fuelQuantityContainer = document.getElementById('fuelQuantityContainer');
      const fuelQuantityInput = document.getElementById('fuelQuantityLiters');
      const tripForm = document.getElementById('tripForm');
      const submissionTimestampInput = document.getElementById('submissionTimestamp');

      const monthlyFuelElem = document.getElementById('monthlyFuel');
      const totalPrivateTripsElem = document.getElementById('totalPrivateTrips');
      const totalOfficialTripsElem = document.getElementById('totalOfficialTrips');
      const lastUpdatedElem = document.getElementById('lastUpdated');

      function updateFuelVisibility() {
        let isFuelingSelected = Array.from(tripStatusRadios).some(radio => radio.checked && radio.value === 'fueling');
        fuelQuantityContainer.classList.toggle('hidden', !isFuelingSelected);
        isFuelingSelected ? fuelQuantityInput.setAttribute('required', 'true') : fuelQuantityInput.removeAttribute('required');
        if (!isFuelingSelected) fuelQuantityInput.value = '';
      }

      async function fetchAndDisplayReport() {
        const url = 'https://script.google.com/macros/s/AKfycbyCHY4hb4PTSiRpGpYYJPBRaYQZpUbI46zVOJSRf1pGdjV0yhxn7OrbM1cgUNvzMfzS/exec';
        try {
          const response = await fetch(url);
          if (!response.ok) throw new Error('Network error');

          const data = await response.json();
          let monthlyFuel = 0, privateCount = 0, officialCount = 0;
          const now = new Date();

          data.forEach(row => {
            const type = String(row['Trip Type']).toLowerCase().trim();
            const timestamp = new Date(row['Timestamp']);
            const fuel = parseFloat(row['Fuel Quantity (Liters)']);

            if (type === 'private') privateCount++;
            if (type === 'official') officialCount++;
            if (!isNaN(timestamp) && timestamp.getMonth() === now.getMonth() && timestamp.getFullYear() === now.getFullYear() && !isNaN(fuel)) {
              monthlyFuel += fuel;
            }
          });

          monthlyFuelElem.textContent = monthlyFuel.toFixed(2);
          totalPrivateTripsElem.textContent = privateCount;
          totalOfficialTripsElem.textContent = officialCount;
          lastUpdatedElem.textContent = now.toLocaleString();

        } catch (err) {
          console.error(err);
          monthlyFuelElem.textContent = 'Error';
          totalPrivateTripsElem.textContent = 'Error';
          totalOfficialTripsElem.textContent = 'Error';
          lastUpdatedElem.textContent = 'Failed to load';
        }
      }

      tripStatusRadios.forEach(r => r.addEventListener('change', updateFuelVisibility));
      tripForm.addEventListener('submit', () => {
        submissionTimestampInput.value = new Date().toISOString();
        setTimeout(fetchAndDisplayReport, 1000);
      });

      updateFuelVisibility();
      fetchAndDisplayReport();
    });
  </script>
</body>
</html>