diff --git a/src/app.css b/src/app.css index 18badc7..0b4804c 100644 --- a/src/app.css +++ b/src/app.css @@ -2,6 +2,61 @@ @plugin '@tailwindcss/typography'; @plugin '@tailwindcss/forms'; +@plugin "daisyui/theme" { + name: "hotcold"; + default: true; + prefersdark: false; + color-scheme: "light"; + --color-base-100: oklch(98% 0.019 200.873); + --color-base-200: oklch(95% 0.045 203.388); + --color-base-300: oklch(91% 0.08 205.041); + --color-base-content: oklch(39% 0.07 227.392); + --color-primary: oklch(60% 0.25 292.717); + --color-primary-content: oklch(96% 0.016 293.756); + --color-secondary: oklch(62% 0.214 259.815); + --color-secondary-content: oklch(97% 0.014 254.604); + --color-accent: oklch(71% 0.143 215.221); + --color-accent-content: oklch(98% 0.019 200.873); + --color-neutral: oklch(52% 0.105 223.128); + --color-neutral-content: oklch(98% 0.019 200.873); + --color-info: oklch(62% 0.214 259.815); + --color-info-content: oklch(97% 0.014 254.604); + --color-success: oklch(70% 0.14 182.503); + --color-success-content: oklch(98% 0.014 180.72); + --color-warning: oklch(79% 0.184 86.047); + --color-warning-content: oklch(98% 0.026 102.212); + --color-error: oklch(65% 0.241 354.308); + --color-error-content: oklch(97% 0.014 343.198); + --radius-selector: 0.5rem; + --radius-field: 0.5rem; + --radius-box: 0.5rem; + --size-selector: 0.25rem; + --size-field: 0.25rem; + --border: 1px; + --depth: 1; + --noise: 1; + } + + @plugin "daisyui" { - themes: winter --default; + themes: hotcold --default; } + +html, body { + height: 100%; + padding: 0; + margin: 0; + background-color: #fff; +} + +.no-scrollbar::-webkit-scrollbar { + display: none; +} + +/* Hide scrollbar for IE, Edge and Firefox */ +.no-scrollbar { + -ms-overflow-style: none; + /* IE and Edge */ + scrollbar-width: none; + /* Firefox */ +} \ No newline at end of file diff --git a/src/lib/components/ComboBox.svelte b/src/lib/components/ComboBox.svelte index 3b8d83a..1df4128 100644 --- a/src/lib/components/ComboBox.svelte +++ b/src/lib/components/ComboBox.svelte @@ -1,36 +1,38 @@
-
- - diff --git a/src/lib/components/Footer.svelte b/src/lib/components/Footer.svelte new file mode 100644 index 0000000..15e5336 --- /dev/null +++ b/src/lib/components/Footer.svelte @@ -0,0 +1,58 @@ + \ No newline at end of file diff --git a/src/lib/components/TwoCities.svelte b/src/lib/components/TwoCities.svelte new file mode 100644 index 0000000..997e401 --- /dev/null +++ b/src/lib/components/TwoCities.svelte @@ -0,0 +1,51 @@ + +
+
+ (selectedFirstCity = null)} + /> +
+
+ selectedSecondCity = null} + /> +
+
\ No newline at end of file diff --git a/src/lib/db/queries.ts b/src/lib/db/queries.ts index 0881fe9..8cdbf54 100644 --- a/src/lib/db/queries.ts +++ b/src/lib/db/queries.ts @@ -10,4 +10,4 @@ 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, country_id FROM cities WHERE capital IN ('capital', 'admin') OR (population >= 100000 AND population != '')"); +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 != '')"); diff --git a/src/lib/server/meteoService.ts b/src/lib/server/meteoService.ts new file mode 100644 index 0000000..b5dd25f --- /dev/null +++ b/src/lib/server/meteoService.ts @@ -0,0 +1,56 @@ +// 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 + + const url = new URL(meteoEndpoint); + url.searchParams.set('latitude', latitude); + url.searchParams.set('longitude', longitude); + url.searchParams.set('daily', 'temperature_2m_max,temperature_2m_min'); + url.searchParams.set('format', 'json'); + url.searchParams.set('forecast_days', '1'); + + + try { + const response = await fetch(url); + if (response.ok) { + const data = await response.json(); + console.log('DATA >>>>', data); + } + // 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 + } + } +} \ No newline at end of file diff --git a/src/lib/types.ts b/src/lib/types.ts index ca02240..621daa0 100644 --- a/src/lib/types.ts +++ b/src/lib/types.ts @@ -7,12 +7,15 @@ export type CountryBasic = { export type CityBasic = { id: number; - city: string; + name: string; country_id: number; + latitude: number; + longitude: number; }; export type ComboOption = { id: number; name: string; emoji?: string; + country_id?: number; } diff --git a/src/routes/+page.server.ts b/src/routes/+page.server.ts index 1a27252..4083277 100644 --- a/src/routes/+page.server.ts +++ b/src/routes/+page.server.ts @@ -1,5 +1,7 @@ import { allCities, allCountries } from '$lib/db/queries'; import type { CityBasic, CountryBasic } from '$lib/types'; +import { error, type Actions } from '@sveltejs/kit'; +import { getLocationTemperature } from '$lib/server/meteoService'; import type { PageServerLoad } from './$types'; export const load: PageServerLoad = () => { @@ -18,3 +20,28 @@ export const load: PageServerLoad = () => { }; } }; + +export const actions: Actions = { + fetchTemperature: async ({ request }) => { + try { + const formData = await request.formData(); + const latitude = formData.get('latitude') as string; + const longitude = formData.get('longitude') as string; + const response = await getLocationTemperature(latitude, longitude); + console.log('RESPONSE >>>>', response); + return { + ok: true, + data: response, + error: null + }; + } catch (error) { + console.log(error); + return { + ok: false, + data: null, + error: 'Failed to fetch temperature' + } + } + + } +} diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 2d464e6..1779c50 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -1,14 +1,14 @@ -
-

HotColdCities

-

- Compare the hottest 🌡️ and coldest ❄️ cities in any region to plan 📅, move 🚚, or explore 🌍 - with ease! 🎉✨ -

+ + HotColdCities + -
- setCountryCities(null)} /> -
+
+
+

HotColdCities

+

+ Compare the hottest 🌡️ and coldest ❄️ cities in any region to plan 📅, move 🚚, or explore 🌍 + with ease! 🎉✨ +

- -
- -
    - {#each filteredCities as city (city.id)} -
  • {city.city}
    • - {/each} -
- +
+ setCountryCities(null)} + /> +
+ + + + + +
+
    + {#each filteredCities as city (city.id)} +
  • + {city.name} +
    + + + +
    +
    • + {/each} +
+ +
+
diff --git a/src/server/meteoService.ts b/src/server/meteoService.ts deleted file mode 100644 index e69de29..0000000