From ad3c09fda0c05d94444c8e046f7a6ecd60a417e3 Mon Sep 17 00:00:00 2001
From: Denis Donici <skryonline@gmail.com>
Date: Sat, 8 Mar 2025 20:11:08 +0200
Subject: [PATCH] Better logic for comparison

---
 src/lib/db/queries.ts   | 16 ++++++++++++++--
 src/lib/types.ts        |  1 -
 src/routes/+page.svelte | 25 +++++++++++++++++++------
 3 files changed, 33 insertions(+), 9 deletions(-)

diff --git a/src/lib/db/queries.ts b/src/lib/db/queries.ts
index b3bc79b..d69212f 100644
--- a/src/lib/db/queries.ts
+++ b/src/lib/db/queries.ts
@@ -32,6 +32,19 @@ export const insertCityTemperatureData = db.query(`
     INSERT INTO meteo_data (city_id, min, max, date)
     VALUES ($id, $min, $max, $date)
 `);
+export const getAllCitiesInCountryByTemp = db.query(`
+    SELECT 
+        c.id as city_id,
+        c.city as city_name,
+        md.max as max_temp,
+        md.min as min_temp,
+        md.date
+    FROM cities c
+    JOIN meteo_data md ON c.id = md.city_id 
+    WHERE c.country_id = $country_id
+    AND md.date = $date
+    ORDER BY md.max DESC
+`);
 
 export const getHottestAndColdestCityInCountry = db.query(`
     WITH city_temps AS (
@@ -40,10 +53,9 @@ export const getHottestAndColdestCityInCountry = db.query(`
             c.city as city_name,
             c.country_id,
             md.max as max_temp,
-            md.min as min_temp,
             md.date,
             ROW_NUMBER() OVER (PARTITION BY c.country_id ORDER BY md.max DESC) as hottest_rank,
-            ROW_NUMBER() OVER (PARTITION BY c.country_id ORDER BY md.min ASC) as coldest_rank
+            ROW_NUMBER() OVER (PARTITION BY c.country_id ORDER BY md.max ASC) as coldest_rank
         FROM cities c
         JOIN meteo_data md ON c.id = md.city_id
         WHERE md.date = $date
diff --git a/src/lib/types.ts b/src/lib/types.ts
index 5072cdd..8940ef4 100644
--- a/src/lib/types.ts
+++ b/src/lib/types.ts
@@ -27,7 +27,6 @@ export type HotColdCity = {
   country_id: number;
   country_name: string;
   max_temp: number;
-  min_temp: number;
   date: string;
   hottest_rank: number;
   coldest_rank: number;
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 5164970..63fcba2 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -18,6 +18,9 @@
 
 	let { data, form }: PageProps = $props();
 	let temperatureData: HotColdCity[] | null = $state(data.temperatureData);
+	let tempDiff: number | null = $derived(
+		temperatureData ? Number((Math.abs(temperatureData[0].max_temp - temperatureData[1].max_temp)).toFixed(2)) : null
+	);
 	let selectedCountryId: number | null = $state(data.country_id);
 	let countryForm: HTMLFormElement;
 	let submitButton: HTMLButtonElement;
@@ -86,19 +89,29 @@
 					<div class="my-8 flex flex-col justify-evenly gap-12 md:flex-row">
 						{#each temperatureData as temperature}
 							<dl class="flex flex-col gap-2">
+								{#if temperature.coldest_rank === 1}
+									<dt class="text-center text-lg text-blue-600">❄️ Coldest City</dt>
+								{:else}
+									<dt class="text-center text-lg text-red-600">🌡️ Hottest City</dt>
+								{/if}
 								<dt class="text-center text-3xl font-medium">{temperature.city_name}</dt>
 								<dd>
 									Max: {$units == UnitsEnum.IMPERIAL
 										? celsiusToFahrenheit(temperature.max_temp)
-										: temperature.min_temp}{$unitsSymbol}
-								</dd>
-								<dd>
-									Min: {$units == UnitsEnum.IMPERIAL
-										? celsiusToFahrenheit(temperature.min_temp)
-										: temperature.min_temp}{$unitsSymbol}
+										: temperature.max_temp}{$unitsSymbol}
 								</dd>
 							</dl>
 						{/each}
+						{#if tempDiff}
+							<div class="text-center">
+								<p class="text-lg font-medium">Temperature Difference</p>
+								<p class="text-2xl">
+									{$units == UnitsEnum.IMPERIAL
+										? celsiusToFahrenheit(tempDiff)
+										: tempDiff}{$unitsSymbol}
+								</p>
+							</div>
+						{/if}
 					</div>
 				{/if}
 				<!-- Add badges top  7 popular countries -->