From bb5a94b63317b7bc3123444b70759c594e62d03a Mon Sep 17 00:00:00 2001
From: Denis Donici <skryonline@gmail.com>
Date: Thu, 6 Mar 2025 13:55:36 +0200
Subject: [PATCH] Minor Fixes

---
 database/data.db                   | Bin 10039296 -> 10039296 bytes
 src/lib/components/ComboBox.svelte |   6 ++--
 src/lib/db/queries.ts              |  39 +++++++++++++++++++++
 src/lib/server/meteoService.ts     |  36 +++-----------------
 src/routes/+page.server.ts         |  26 ++++++++------
 src/routes/+page.svelte            |  53 +++++++++++++++--------------
 6 files changed, 90 insertions(+), 70 deletions(-)

diff --git a/database/data.db b/database/data.db
index cda0a1ab1d80b749e94e2cb9bbf3b692eea29d8d..bea363adbaefe92ba6c372abfb47a61a78d0da82 100644
GIT binary patch
delta 1066
zcmZwFNmCPH5C-5$f*BKofTB?mnczkQcg1}PFu@2;AS4<@je(3BWl<6p+yKEBH-s1$
zj-LDj78QSn7ppwJ2g@VHPq3qwp-K-=)l`4|O?Q9Qqx@bpDrPFmqKe|kDvIrfq7-#2
zic*=W+q)*J?0~n}u}rb65ye@dMoPL|KODPVx%ijFtR>fWdCI@!Q$+o2u_{}#C64Nm
zv8zi}x5r~0cc<gsy=I@8HV0yfcsgGAvh_8FbYEE4!oG%9T`L@DHBLuQGCdqiCbWPN
z)|>T^W(32U5ov9$b2|Ex{r?TehYI15Lb?<+wXhzQ`-Na*(C7$<eDZhg%D|x66Hld6
zF{zm}Q!#&w<`0JSK(nE>=$%^4pH{qDNcZa@-DuQ1wBM;U$%NPGZMWIowYApHUxTJ@
z^(ND1EW6X$pjzBjRo0A|U2wTSO*?5Bx$RKhhdkD?ie!Jn94ZW)ubiJY7HEnVqPG4&
z?-MZs?GasuYto~Oo@wzdEodw{`P*|{et7T1psGqMmhpMl<h;uwtimRW#1df_s#q!<
z!YP)Ce15T5E=okHC=)BhN>MIWiPgd_)`+!Yov0A&MWxsvs)QyyqFQVeo5W_ZMQjx{
z!Yj6kT2UvqiydO8*d=z0Jz}reC-&#&UG;0T#n)tKzlpCRmn;8JzffgWO6Po;w0*8E
zW7_je>ap3KveN&C!Fuojcn~}U9tMwqN5Ny@aqt9q67+!$U?bQB>YyKN22X(j@HE&0
zwt{Cs0}O&~U^^HBJHRj)0ndWxz$n-Wo(H?Y3*bfY5*Pz7gK@AM>;V&?30?uOg4e(#
zcpba}_JVz2KR5v11aE<ZU<yowx4}E$U2q5-2JeCQ!3W?&@DVryj)G(0V{jat0H1&W
mC&8!SGw?b10(=Qhfv>=6a0bkPufZ(%27C*?1K)q-Y}-%g^RP((

delta 3795
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
I0MCj41EN!K00000

diff --git a/src/lib/components/ComboBox.svelte b/src/lib/components/ComboBox.svelte
index 1df4128..8ab28fc 100644
--- a/src/lib/components/ComboBox.svelte
+++ b/src/lib/components/ComboBox.svelte
@@ -69,11 +69,11 @@
 	});
 </script>
 
-<div class="dropdown my-2 py-2">
-	<label class="input !outline-none focus:ring-0">
+<div class="dropdown my-2 py-2 w-full">
+	<label class="input !outline-none focus:ring-0 input-lg w-full">
 		<input
 			type="text"
-			class="focus:ring-0 focus:outline-none"
+			class="w-full focus:ring-0 focus:outline-none"
 			onfocus={() => (focused = true)}
 			bind:this={inputElement}
 			bind:value={filterInput}
diff --git a/src/lib/db/queries.ts b/src/lib/db/queries.ts
index 8cdbf54..2a95564 100644
--- a/src/lib/db/queries.ts
+++ b/src/lib/db/queries.ts
@@ -10,4 +10,43 @@ export const allCountries = db.query(`
            WHERE capital IN('capital', 'admin') OR(population >= 100000 AND population IS NOT NULL)
     )
 `);
+
 export const allCities = db.query("SELECT id, city as name, country_id, lat as latitude, lng as longitude FROM cities WHERE capital IN ('capital', 'admin') OR (population >= 100000 AND population != '')");
+
+export const cityTemperatureToday = db.query(`
+    SELECT c.id, c.city as name, md.min, md.max
+    FROM cities as c
+    JOIN meteo_data as md ON c.id = md.city_id
+    WHERE c.id = $1
+    AND md.date = $2
+`);
+
+// export const countryExtremeTemperatures = db.query(`
+//     WITH city_temps AS (
+//         SELECT 
+//             c.id as city_id,
+//             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
+//         FROM cities c
+//         JOIN meteo_data md ON c.id = md.city_id
+//         WHERE md.date = $2
+//         AND c.country_id = $1
+//     )
+//     SELECT 
+//         hot.city_id as hottest_city_id,
+//         hot.city_name as hottest_city_name,
+//         hot.max_temp as hottest_temp,
+//         cold.city_id as coldest_city_id,
+//         cold.city_name as coldest_city_name, 
+//         cold.min_temp as coldest_temp,
+//         hot.date
+//     FROM city_temps hot
+//     JOIN city_temps cold ON hot.country_id = cold.country_id
+//     WHERE hot.hottest_rank = 1 
+//     AND cold.coldest_rank = 1
+// `);
diff --git a/src/lib/server/meteoService.ts b/src/lib/server/meteoService.ts
index b5dd25f..05f78cc 100644
--- a/src/lib/server/meteoService.ts
+++ b/src/lib/server/meteoService.ts
@@ -1,13 +1,5 @@
-// import { fetchWeatherApi } from 'openmeteo';
 
 export const getLocationTemperature = async (latitude: string, longitude: string) => {
-    const params = {
-        latitude,
-        longitude,
-        daily: ["temperature_2m_max", "temperature_2m_min"],
-        forecast_days: 1
-    };
-
     const meteoEndpoint = "https://api.open-meteo.com/v1/forecast";
     //   https://api.open-meteo.com/v1/forecast?latitude=48.0356&longitude=27.8129&hourly=temperature_2m&daily=temperature_2m_max,temperature_2m_min&forecast_days=1&format=json&timeformat=unixtime
 
@@ -23,34 +15,16 @@ export const getLocationTemperature = async (latitude: string, longitude: string
         const response = await fetch(url);
         if (response.ok) {
             const data = await response.json();
-            console.log('DATA >>>>', data);
+            console.log('Fetched DATA from open meteo >>>>');
+            return { data };
+        } else {
+            return { data: null };
         }
-        // const response = await fetchWeatherApi(url, params);
-        // Get the first location
-        // console.log('RESPONSES', responses)
 
-        // const response = responses[0];
-
-
-
-        // console.log('RESPONSE >>>>', response);
-
-
-        // Get daily data
-        // // const daily = response.daily();
-
-        // return {
-        //   max: daily.temperature_2m_max[0],
-        //   min: daily.temperature_2m_min[0],
-        //   unit: daily.temperature_2m_max_units
-        // };
-        return {
-            ok: true
-        }
     } catch (error) {
         console.log(error);
         return {
-            ok: false
+            data: null
         }
     }
 }
\ No newline at end of file
diff --git a/src/routes/+page.server.ts b/src/routes/+page.server.ts
index 4083277..743f889 100644
--- a/src/routes/+page.server.ts
+++ b/src/routes/+page.server.ts
@@ -4,6 +4,12 @@ import { error, type Actions } from '@sveltejs/kit';
 import { getLocationTemperature } from '$lib/server/meteoService';
 import type { PageServerLoad } from './$types';
 
+const errorObject = {
+	ok: false,
+	data: null,
+	error: 'Failed to fetch temperature'
+}
+
 export const load: PageServerLoad = () => {
 	try {
 		const countries = allCountries.all() as CountryBasic[];
@@ -29,18 +35,18 @@ export const actions: Actions = {
 			const longitude = formData.get('longitude') as string;
 			const response = await getLocationTemperature(latitude, longitude);
 			console.log('RESPONSE >>>>', response);
-			return {
-				ok: true,
-				data: response,
-				error: null
-			};
+			if (response.data) {
+				return {
+					ok: true,
+					data: response.data,
+					error: null
+				};
+			} else {
+				return errorObject;
+			}
 		} catch (error) {
 			console.log(error);
-			return {
-				ok: false,
-				data: null,
-				error: 'Failed to fetch temperature'
-			}
+			return errorObject;
 		}
 
 	}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 1779c50..0a4dee1 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -21,7 +21,6 @@
 	const onCountrySelect = (country: CountryBasic | ComboOption) => {
 		setCountryCities(country.id);
 	};
-
 </script>
 
 <svelte:head>
@@ -35,34 +34,36 @@
 			Compare the hottest 🌡️ and coldest ❄️ cities in any region to plan 📅, move 🚚, or explore 🌍
 			with ease! 🎉✨
 		</h2>
-
-		<section>
-			<ComboBox
-				options={data.countries}
-				onSelect={onCountrySelect}
-				onClear={() => setCountryCities(null)}
-			/>
+		<!-- TODO: Add tabs to select between countries select or two cities  -->
+		<section class="mx-auto my-8 flex w-full justify-center">
+			<div class="flex flex-col gap-2 w-full">
+				<div class="w-full max-w-md mx-auto">
+					<ComboBox
+					options={data.countries}
+					onSelect={onCountrySelect}
+					onClear={() => setCountryCities(null)}
+					/>
+				</div>
+				<!-- Add badges top  7 popular countries -->
+				<ul class="flex flex-col gap-1">
+					{#each filteredCities as city (city.id)}
+						<li class="flex gap-2">
+							{city.name}
+							<form action="?/fetchTemperature" method="POST" use:enhance>
+								<input type="text" class="hidden" name="latitude" value={city.latitude} />
+								<input type="text" class="hidden" name="longitude" value={city.longitude} />
+								<button type="submit" class="btn btn-soft btn-primary">Get</button>
+							</form>
+						</li>
+					{/each}
+				</ul>
+			</div>
 		</section>
 		<!-- TODO: Show max min temperatures in the country and its coresponding cities -->
 
-		<!-- <TwoCities cities={data.cities} /> -->
-
-		<button class="btn btn-lg btn-soft btn-primary"> Hi </button>
-		<div class="grid grid-cols-2 gap-5">
-			<ul class="flex flex-col gap-1">
-				{#each filteredCities as city (city.id)}
-					<li class="flex gap-2">
-						{city.name}
-						<form action="?/fetchTemperature" method="POST" use:enhance>
-							<input type="text" class="hidden" name="latitude" value={city.latitude} />
-							<input type="text" class="hidden" name="longitude" value={city.longitude} />
-							<button type="submit" class="btn btn-soft btn-primary">Get</button>
-						</form>
-					</li>
-				{/each}
-			</ul>
-			<!-- <code>{JSON.stringify(filteredCities, null, 2)}</code> -->
-		</div>
+		<section>
+			<!-- <TwoCities cities={data.cities} /> -->
+		</section>
 	</div>
 	<Footer />
 </main>