Fixed: data validation in offline refuel create form

Updated:
- DashboardController now fetches latest refuel record only for the default vehicle
- VehicleController - first created vehicle is now set as default automatically
- Refuel model - latest_one() now accepts vehicle_id instead of user_id
- Dashboard view - improved handling when no vehicles or refuel records exist
- CSS styles - adjusted dashboard layout and global action padding

app/controllers/DashboardController.php

@@ -3,8 +3,7 @@ class DashboardController extends Controller {
     public function index() {
         $vehicle = new Vehicle();
         $vehicles = $vehicle->getVehiclesByUser($_SESSION['user']['id']);
-
+        $default_car = $vehicle->getDefaultVehicle($_SESSION['user']['id']) ?? null;
-        $default_car = $vehicle->getDefaultVehicle($_SESSION['user']['id']);
 
         $refuel = new Refuel();
         $data = [
@@ -13,7 +12,7 @@ class DashboardController extends Controller {
             "mileage" => [],
             "liters" => []
         ];
-        $raw_data = $refuel->latest_data($default_car['id'], 5);
+        $raw_data = $default_car ? $refuel->latest_data($default_car['id'], 0) : [];
         foreach($raw_data as $one) {
             array_push($data['date'], date('d. m.', strtotime($one['created_at'])));
             array_push($data['price'], $one['price_per_liter']);
@@ -21,7 +20,8 @@ class DashboardController extends Controller {
             array_push($data['liters'], $one['liters']);
         }
 
-        $latest_record = $refuel->latest_one($_SESSION['user']['id'])[0];
+        $latest_data = $default_car ? $refuel->latest_one($default_car['id']) : [];
+        $latest_record = !empty($latest_data) ? $latest_data[0] : null;
 
         $this->view('dashboard/index', [
             'title' => 'Dashboard',

app/controllers/RefuelController.php

@@ -46,6 +46,7 @@ class RefuelController extends Controller {
                     'validationErrors' => $validator->errors() ?: [],
                     'vehicles' => $vehicles,
                     'title' => 'New refuel record',
+                    'status' => '400'
                 ]);
                 return;
             }

app/controllers/VehicleController.php

@@ -30,17 +30,21 @@ class VehicleController extends Controller {
             }
 
             $vehicle = new Vehicle();
+            $default_vehicle = $vehicle->getDefaultVehicle($_SESSION['user']['id']);
+            $is_default = $default_vehicle ? 0 : 1;
+
             $result = $vehicle->create([
                 'name' => $name,
                 'registration_plate' => strtoupper($registration_plate),
                 'fuel_type' => $fuel_type,
                 'note' => $note,
                 'user_id' => $_SESSION['user']['id'],
+                'is_default' => $is_default
             ]);
 
 
             if ($result === true) {
-                $this->redirect('/vehicles');
+                $this->redirect('/');
             } else {
                 $this->view('vehicles/create', ['title' => 'Create vehicle', 'error' => $result, 'validationErrors' => []] );
             }
@@ -72,7 +76,7 @@ class VehicleController extends Controller {
             return;
         }
 
-        $this->view('vehicles/index', ['title' => 'Vehicles', 'vehicles' => $vehicles]);
+        header("Location: /vehicles");
     }
 
     public function setDefault() {
@@ -84,7 +88,7 @@ class VehicleController extends Controller {
             return;
         }
 
-        $this->view('vehicles/index', ['title' => 'Vehicles', 'vehicles' => $vehicles]);
+        header("Location: /");
     }
 
     public function api_get() {

app/models/Refuel.php

@@ -38,15 +38,24 @@ class Refuel {
 
     public function latest_data($vehicle_id, $record_count) {
         try {
-            $stmt = $this->db->prepare("
+            $sql = "
                 SELECT `liters`, `price_per_liter`, `total_price`, `mileage`, `created_at`
                 FROM `refueling_records`
                 WHERE `vehicle_id` = ?
-                ORDER BY created_at DESC
+                ORDER BY created_at DESC";
-                LIMIT ?;
+
-            ");
+            if ($record_count > 0) {
+                $sql .= " LIMIT ?";
+            }
+
+            $stmt = $this->db->prepare($sql);
+
+            if ($record_count > 0) {
+                $stmt->bind_param("ii", $vehicle_id, $record_count);
+            } else {
+                $stmt->bind_param("i", $vehicle_id);
+            }
 
-            $stmt->bind_param("ii", $vehicle_id, $record_count);
             if ($stmt->execute()) {
                 $result = $stmt->get_result();
                 $data = $result->fetch_all(MYSQLI_ASSOC);
@@ -60,9 +69,9 @@ class Refuel {
         }
     }
 
-    public function latest_one($user_id, $record_count = 1) {
+    public function latest_one($vehicle_id, $record_count = 1) {
         try {
-            $stmt = $this->db->prepare("
+            $sql = "
                 SELECT 
                     `r`.`vehicle_id`, 
                     `v`.`name` AS `vehicle_name`, 
@@ -70,15 +79,25 @@ class Refuel {
                     `r`.`price_per_liter`, 
                     `r`.`total_price`, 
                     `r`.`mileage`, 
+                    `r`.`note`, 
                     `r`.`created_at`
                 FROM `refueling_records` AS `r`
                 JOIN `vehicles` AS `v` ON `r`.`vehicle_id` = `v`.`id`
-                WHERE `r`.`user_id` = ?
+                WHERE `r`.`vehicle_id` = ?
-                ORDER BY `r`.`created_at` DESC
+                ORDER BY `r`.`created_at` DESC";
-                LIMIT ?;
+
-            ");
+            if ($record_count > 0) {
+                $sql .= " LIMIT ?";
+            }
+
+            $stmt = $this->db->prepare($sql);
+
+            if ($record_count > 0) {
+                $stmt->bind_param("ii", $vehicle_id, $record_count);
+            } else {
+                $stmt->bind_param("i", $vehicle_id);
+            }
 
-            $stmt->bind_param("ii", $user_id, $record_count);
             if ($stmt->execute()) {
                 $result = $stmt->get_result();
                 $data = $result->fetch_all(MYSQLI_ASSOC);

app/models/Vehicle.php

@@ -10,17 +10,18 @@ class Vehicle {
     public function create($data) {
         try{
             $stmt = $this->db->prepare("
-                INSERT INTO vehicles (user_id, name, registration_plate, fuel_type, note, created_at)
+                INSERT INTO vehicles (user_id, name, registration_plate, fuel_type, note, is_default, created_at)
-                VALUES (?, ?, ?, ?, ?, NOW())
+                VALUES (?, ?, ?, ?, ?, ?, NOW())
             ");
 
             $stmt->bind_param(
-                "issss",
+                "issssi",
                 $data['user_id'],
                 $data['name'],
                 $data['registration_plate'],
                 $data['fuel_type'],
                 $data['note'],
+                $data['is_default'],
             );
 
             if ($stmt->execute()) {
@@ -34,7 +35,7 @@ class Vehicle {
     }
 
     public function getVehiclesByUser($user_id) {
-        $stmt = $this->db->prepare("SELECT id, name, registration_plate, fuel_type, note, created_at FROM vehicles WHERE user_id = ?");
+        $stmt = $this->db->prepare("SELECT id, name, registration_plate, fuel_type, note, is_default, created_at FROM vehicles WHERE user_id = ?");
         $stmt->bind_param("i", $user_id);
         $stmt->execute();
         $result = $stmt->get_result();

app/views/dashboard/index.php

@@ -5,8 +5,15 @@
 
 <section class="dashboard">
     <h1>Welcome, <?= htmlspecialchars($_SESSION['user']['username']) ?>!</h1>
+    <?php if(!isset($data['default_car'])): ?>
+    
+    <div id="intro">
+        <a href="/vehicles/create">Create your first vehicle</a>
+    </div>
+    <?php elseif (isset($data['latest_record'])): ?>
+
     <div id="actions">
-        <a href="/refuel/create" class="btn-green">Add new refuel record!</a>
+        <a href="/refuel/create" class="btn-green">Add new refuel record</a>
         <a href="/vehicles" class="btn-primary">List all vehicles</a>
         <a class="btn-warning" id="btn-offline-add">Add new offline refuel record</a>
     </div>
@@ -25,6 +32,10 @@
                 <p><?= $data['latest_record']['total_price'] ?>,-</p>
                 <b>Mileage:</b>
                 <p><?= $data['latest_record']['mileage'] ?> km</p>
+                <?php if (isset($data['latest_record']['note'])): ?>
+                <b>Note:</b>
+                <p><?= $data['latest_record']['note'] ?></p>
+                <?php endif; ?>
             </div>
         </section>
 
@@ -55,6 +66,17 @@
             <b id="avg-fl-cnsmp"></b>
         </section>
     </div>
+    <?php else: ?>
+    <div id="actions">
+        <a href="/refuel/create" class="btn-green">Add new refuel record</a>
+        <a href="/vehicles" class="btn-primary">List all vehicles</a>
+        <a class="btn-warning" id="btn-offline-add">Add new offline refuel record</a>
+    </div>
+    <div class="alert-warning">
+        <p>Default vehicle <b><i><?= $data['default_car']['name'] ?></i></b> doesn't have any refuel record yet.</p>
+        <p>Select another vehicle or create first refuel record.</p>
+    </div>
+    <?php endif; ?>
 </section>
 <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
 <script>
@@ -75,26 +97,27 @@
 </script>
 
 <script>
-    const data2 = <?= json_encode($data['date_price_data']); ?>;
+	const data2 = <?= json_encode($data['date_price_data']); ?>;
-    let cnt_ltr = 0
+	let cnt_ltr = 0;
-    let cnt_km = 0
+    let last_ltr = 0;
-    let first_km = 0
+    let last_km = 0;
+	let first_km = 0;
 
-    console.log(data2)
+	for (let i = 0; i < data2['liters'].length; i++) {
+		if(i === 0) {
+			first_km = data2['mileage'][i]
+			continue; // skip bcs were expecting that this was first full tank refuel so this is base value
+		}
+		cnt_ltr += data2['liters'][i]
+        last_ltr = data2['liters'][i]
+        last_km = data2['mileage'][i]
+	}
 
-    for(let i = 0; i < data2['liters'].length; i++) {
+    // cnt_ltr -= last_ltr // this would be used if we would track consumption from 0km
-        if(i == 0) {
+	last_km -= first_km
-            first_km = data2['mileage'][i]
-        }
-        cnt_ltr += data2['liters'][i]
-        cnt_km =+ data2['mileage'][i]
-    }
 
-    console.log("Liters", cnt_ltr, cnt_km, first_km)
+    document.querySelector("#avg-fl-cnsmp").textContent =
-    console.log("Avg", (cnt_km - first_km) / cnt_ltr)
+		(cnt_ltr/last_km*100).toFixed(1) + " l/100km";
-
-    document.querySelector("#avg-fl-cnsmp").textContent = Math.floor((cnt_km - first_km) / cnt_ltr) + " l/100km"
 </script>
 
-
 <script defer src="/js/offline-records.js"></script>

app/views/vehicles/index.php

@@ -4,7 +4,7 @@
         <p>No vehicles yet. <a href="/vehicles/create">Add your first vehicle</a>.</p>
     <?php else: ?>
         <div class="btn-wrapper">
-            <a href="/vehicles/create" class="btn-green">Add new vehicle!</a>
+            <a href="/vehicles/create" class="btn-green">Add new vehicle</a>
         </div>
         <div class="vehicle-wrapper">
         <?php foreach ($this->get('vehicles') as $vehicle): ?>
@@ -13,16 +13,21 @@
                 <p><?= htmlspecialchars($vehicle['registration_plate']) ?></p>
                 <p><?= htmlspecialchars($vehicle['fuel_type']) ?></p>
                 <p><?= htmlspecialchars($vehicle['note'] ?? "") ?></p>
-                <div class="actions">
+
+                <div class="vehicle-actions">
+                    <br>
                     <form method="POST" action="/vehicles/delete">
                         <input type="number" name="vehicle_id" value="<?= $vehicle['id'] ?>" style="display: none">
                         <input type="submit" value="Delete vehicle" class="btn-danger">
                     </form>
 
+                    <?php if(!$vehicle['is_default']): ?>
+                    <br>
                     <form method="POST" action="/vehicles/default">
                         <input type="number" name="vehicle_id" value="<?= $vehicle['id'] ?>" style="display: none">
-                        <input type="submit" value="Set default" class="btn-primary">
+                        <input type="submit" value="Set as default" class="btn-primary">
                     </form>
+                    <?php endif; ?>
                 </div>
             </div>
         <?php endforeach; ?>

core/View.php

@@ -7,6 +7,11 @@ class View
         // Store the data 
         $this->data = $data;
 
+        // check for status code in data
+        if(isset($this->data['status'])){
+            http_response_code($this->data['status']);
+        }
+
         // Capture the view content
         ob_start();
         require_once views . $view . '.php';

docker-compose.yaml

@@ -6,6 +6,10 @@ services:
       MARIADB_ROOT_PASSWORD: root
     ports:
       - 3306:3306
+    volumes:
+      - fuelstats_mariadb_data:/var/lib/mysql
+    networks:
+      - fuelstats-network
     profiles: ["prod", "dev"]
 
   phpmyadmin:
@@ -15,6 +19,11 @@ services:
       - 8080:80
     environment:
       - PMA_ARBITRARY=1
+      - PMA_HOST=mariadb
+    depends_on:
+      - mariadb
+    networks:
+      - fuelstats-network
     profiles: ["dev"]
 
   fuelstats:
@@ -28,4 +37,13 @@ services:
     depends_on:
       - mariadb
     restart: on-failure:2
+    networks:
+      - fuelstats-network
     profiles: ["prod"]
+
+networks:
+  fuelstats-network:
+    driver: bridge
+
+volumes:
+  fuelstats_mariadb_data:

public/css/dashboard.css

@@ -9,7 +9,6 @@
   flex-wrap: wrap;
   gap: 1rem;
   justify-content: center;
-  margin-top: 2rem;
 }
 
 .card {

public/css/global.css

@@ -52,3 +52,8 @@ h1 {
 	background-color: var(--clr-warning-muted);
 	border: var(--borderWidth-thin) solid var(--clr-border-danger);
 }
+
+#actions {
+	padding-top: 1rem;
+	padding-bottom: 2rem;
+}

public/css/vehicles.css

@@ -27,3 +27,10 @@
 	align-items: center;
 	margin-bottom: 1rem;
 }
+
+.vehicle-actions {
+	display: flex;
+	flex-direction: row;
+	gap: .5rem;
+	margin-top: 1rem;
+}

public/js/offline-records.js

@@ -45,11 +45,15 @@ setInterval(async () => {
 				showDashboard();
 			});
 		}
+	}
 
-		if (localStorage.getItem("refuelOfflineData")) {
+	if (localStorage.getItem("refuelOfflineData")) {
-			btnOffline.textContent = "Sync data";
+		Array.from(divActions.children).forEach(
-			btnOffline.setAttribute("disabled", "disabled");
+			(el) => (el.style.display = "none"),
-		}
+		);
+		btnOffline.style.display = "block";
+		btnOffline.textContent = "Sync data";
+		btnOffline.setAttribute("disabled", "disabled");
 	}
 
 	if (isOnline && !visible) {
@@ -107,7 +111,18 @@ btnOffline.addEventListener("click", async (e) => {
 			});
 
 			if (!res.ok) {
-				throw new Error(`Server error: ${res.statusText}`);
+				if (res.status == 400) {
+					const html = await res.text();
+
+					document.open();
+					document.write(html);
+					document.close();
+
+					localStorage.removeItem("refuelOfflineData");
+					return;
+				} else {
+					throw new Error(`Server error: ${res.statusText}`);
+				}
 			}
 
 			localStorage.removeItem("refuelOfflineData");
@@ -150,11 +165,6 @@ btnOffline.addEventListener("click", async (e) => {
     </div>
     <section class="form">
         <h1 class="header-form">Create offline record</h1>
-        <!-- <?php if ($this->get('error')): ?> -->
-        <!--     <div class="error" style="color: red; margin-bottom: 1rem;"> -->
-        <!--         <?= htmlspecialchars($this->get('error')) ?> -->
-        <!--     </div> -->
-        <!-- <?php endif; ?> -->
         <form id="offline_refuel_add">
             <label for="vehicle">Vehicle</label>
             <select name="vehicle" id="vehicle">
@@ -164,13 +174,7 @@ btnOffline.addEventListener("click", async (e) => {
 									`<option value="${el.id}">${el.name} | ${el.registration_plate}</option>`,
 							)
 							.join("")}
-            <!-- <?php foreach ($this->get('vehicles') as $vehicle): ?> -->
-            <!--     <option value="<?= $vehicle['id'] ?>"><?= $vehicle['name'] . " | " . $vehicle['registration_plate'] ?></option> -->
-            <!-- <?php endforeach; ?> -->
             </select>
-            <!-- <?php if (isset($this->get('validationErrors')['vehicle'])): ?> -->
-            <!--     <small class="error"><?= $this->get('validationErrors')['vehicle'] ?></small> -->
-            <!-- <?php endif; ?> -->
 
             <label for="fuel_type">Fuel type</label>
             <select name="fuel_type" id="fuel_type">
@@ -182,45 +186,67 @@ btnOffline.addEventListener("click", async (e) => {
                 <option value="Premium Gasoline 98">Premium Gasoline 98</option>
                 <option value="Other">Other</option>
             </select>
-            <!-- <?php if (isset($this->get('validationErrors')['fuel_type'])): ?> -->
-            <!--     <small class="error"><?= $this->get('validationErrors')['fuel_type'] ?></small> -->
-            <!-- <?php endif; ?> -->
 
             <label for="liters">Liters</label>
             <input type="number" name="liters" id="liters" min="0" step=".01" value="0.0">
-            <!-- <?php if (isset($this->get('validationErrors')['liters'])): ?> -->
+            <!-- <small class="error"><?= $this->get('validationErrors')['liters'] ?></small> -->
-            <!--     <small class="error"><?= $this->get('validationErrors')['liters'] ?></small> -->
-            <!-- <?php endif; ?> -->
 
             <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="0.0">
-            <!-- <?php if (isset($this->get('validationErrors')['price_per_liter'])): ?> -->
+            <!-- <small class="error"><?= $this->get('validationErrors')['price_per_liter'] ?></small> -->
-            <!--     <small class="error"><?= $this->get('validationErrors')['price_per_liter'] ?></small> -->
-            <!-- <?php endif; ?> -->
 
             <label for="total_price">Total price</label>
             <input type="number" name="total_price" id="total_price" min="0" step=".01" value="0.0">
-            <!-- <?php if (isset($this->get('validationErrors')['total_price'])): ?> -->
+            <!-- <small class="error"><?= $this->get('validationErrors')['total_price'] ?></small> -->
-            <!--     <small class="error"><?= $this->get('validationErrors')['total_price'] ?></small> -->
-            <!-- <?php endif; ?> -->
 
         		<label for="mileage">Mileage</label>
         		<input type="number" name="mileage" id="mileage" min="0" step="1" value="0">
-        		<!-- <?php if (isset($this->get('validationErrors')['mileage'])): ?> -->
+         		<!-- <small class="error"><?= $this->get('validationErrors')['mileage'] ?></small> -->
-         		<!--    	<small class="error"><?= $this->get('validationErrors')['mileage'] ?></small> -->
-        		<!-- <?php endif; ?> -->
 
             <label for="note">Note</label>
             <input type="text" name="note" id="note">
-            <!-- <?php if (isset($this->get('validationErrors')['note'])): ?> -->
+            <!-- <small class="error"><?= $this->get('validationErrors')['note'] ?></small> -->
-            <!--     <small class="error"><?= $this->get('validationErrors')['note'] ?></small> -->
-            <!-- <?php endif; ?> -->
 
             <input type="submit" id="btn-offline-submit" value="Create fuel record">
         </form>
     </section>
   `;
 	document.querySelector("main").appendChild(offline);
+
+	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 = rnd(liters * price_per_liter);
+		}
+
+		if (price_per_liter > 0 && total_price > 0) {
+			liters = rnd(total_price / price_per_liter);
+		}
+
+		if (liters > 0 && total_price > 0) {
+			price_per_liter = rnd(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 btnSubmit = document.querySelector("#btn-offline-submit");
 	btnSubmit.addEventListener("click", (e) => {
 		e.preventDefault();