Minor Fixes

src/lib/components/ComboBox.svelte

@@ -69,11 +69,11 @@
 	});
 </script>
 
-<div class="dropdown my-2 py-2">
+<div class="dropdown my-2 py-2 w-full">
-	<label class="input !outline-none focus:ring-0">
+	<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}

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
+// `);

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
         }
     }
 }

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 {
+			if (response.data) {
-				ok: true,
+				return {
-				data: response,
+					ok: true,
-				error: null
+					data: response.data,
-			};
+					error: null
+				};
+			} else {
+				return errorObject;
+			}
 		} catch (error) {
 			console.log(error);
-			return {
+			return errorObject;
-				ok: false,
-				data: null,
-				error: 'Failed to fetch temperature'
-			}
 		}
 
 	}

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>
-
+		<!-- TODO: Add tabs to select between countries select or two cities  -->
-		<section>
+		<section class="mx-auto my-8 flex w-full justify-center">
-			<ComboBox
+			<div class="flex flex-col gap-2 w-full">
-				options={data.countries}
+				<div class="w-full max-w-md mx-auto">
-				onSelect={onCountrySelect}
+					<ComboBox
-				onClear={() => setCountryCities(null)}
+					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} /> -->
+		<section>
-
+			<!-- <TwoCities cities={data.cities} /> -->
-		<button class="btn btn-lg btn-soft btn-primary"> Hi </button>
+		</section>
-		<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>
 	</div>
 	<Footer />
 </main>