Added: Create new refuel record

app/views/refuel/create.php

@@ -13,7 +13,7 @@
         <label for="vehicle">Vehicle</label>
         <select name="vehicle" id="vehicle">
         <?php foreach ($this->get('vehicles') as $vehicle): ?>
-            <option value="<?= $vehicle['id'] ?>"><?= $vehicle['name'] . " | " . $vehicle['registration_plate'] ?> </option>
+            <option value="<?= $vehicle['id'] ?>"><?= $vehicle['name'] . " | " . $vehicle['registration_plate'] ?></option>
         <?php endforeach; ?>
         </select>
 
@@ -29,15 +29,13 @@
         </select>
 
         <label for="liters">Liters</label>
-        <input type="number" name="liters" id="liters" value="<?= htmlspecialchars($_POST['liters'] ?? '') ?>">
+        <input type="number" name="liters" id="liters" min="0" step=".01" value="<?= htmlspecialchars($_POST['liters'] ?? '0.0') ?>">
 
-        <!-- TODO: name and id -->
+        <label for="price_per_liter">Price per liter</label>
+        <input type="number" name="price_per_liter" id="price_per_liter" min="0" step=".01" value="<?= htmlspecialchars($_POST['price_per_liter'] ?? '0.0') ?>">
 
-        <label for="liters">Price per liter</label>
-        <input type="number" name="price_per_liter" id="price_per_liter" value="<?= htmlspecialchars($_POST['liters'] ?? '') ?>">
-
-        <label for="liters">Total price</label>
-        <input type="number" name="liters" id="liters" value="<?= htmlspecialchars($_POST['liters'] ?? '') ?>">
+        <label for="total_price">Total price</label>
+        <input type="number" name="total_price" id="total_price" min="0" step=".01" value="<?= htmlspecialchars($_POST['total_price'] ?? '0.0') ?>">
 
         <label for="note">Note</label>
         <input type="text" name="note" id="note" value="<?= htmlspecialchars($_POST['note'] ?? '') ?>">
@@ -47,6 +45,40 @@
 </section>
 
 <script>
+    const inp_lit = document.querySelector("input#liters") 
+    const inp_ppl = document.querySelector("input#price_per_liter")
+    const inp_tot = document.querySelector("input#total_price")
+
+    const rnd = (num) => Math.round((num + Number.EPSILON) * 100) / 100
+
+    function calculate(){
+        let liters = Number(inp_lit.value)
+        let price_per_liter = Number(inp_ppl.value)
+        let total_price = Number(inp_tot.value)
+
+        if(price_per_liter > 0 && liters > 0) {
+            total_price = liters * price_per_liter
+        }
+
+        if(price_per_liter > 0 && total_price > 0) {
+            liters = total_price / price_per_liter
+        }
+
+        if(liters > 0 && total_price > 0) {
+            price_per_liter = total_price / liters
+        }
+
+        inp_lit.value = liters
+        inp_ppl.value = price_per_liter
+        inp_tot.value = total_price
+    }
+
+    [inp_lit, inp_ppl, inp_tot].forEach(inp => {
+        inp.addEventListener("change", () => {
+            calculate()
+        })
+    })
+
     const vehicles = <?= json_encode($data['vehicles']); ?>;
     const fuel_sel = document.querySelector("#fuel_type")
     const vehic_sel = document.querySelector("#vehicle")
@@ -66,6 +98,4 @@
     vehic_sel.addEventListener("change", () => {
         selectFuel()
     })
-
-    // TODO: function for auto calculation price/price_per_liter/liters
 </script>