From e86eb7798fccc396f0a3f1de1bd9d8534157e65b Mon Sep 17 00:00:00 2001 From: "Thomas \"ajnart\" Camlong" Date: Sun, 15 May 2022 13:53:47 +0200 Subject: [PATCH 01/13] :construction: Set up the structure for the weather module --- src/components/modules/index.ts | 1 + .../modules/weather/WeatherModule.tsx | 41 +++++++++++++++++++ src/components/modules/weather/index.ts | 1 + 3 files changed, 43 insertions(+) create mode 100644 src/components/modules/weather/WeatherModule.tsx create mode 100644 src/components/modules/weather/index.ts diff --git a/src/components/modules/index.ts b/src/components/modules/index.ts index 134be155c..4b85fa930 100644 --- a/src/components/modules/index.ts +++ b/src/components/modules/index.ts @@ -2,3 +2,4 @@ export * from './date'; export * from './calendar'; export * from './search'; export * from './ping'; +export * from './weather'; diff --git a/src/components/modules/weather/WeatherModule.tsx b/src/components/modules/weather/WeatherModule.tsx new file mode 100644 index 000000000..bb157fda9 --- /dev/null +++ b/src/components/modules/weather/WeatherModule.tsx @@ -0,0 +1,41 @@ +import { Group, Text, Title } from '@mantine/core'; +import dayjs from 'dayjs'; +import { useEffect, useState } from 'react'; +import { Clock, Cloud } from 'tabler-icons-react'; +import { IModule } from '../modules'; + +export const WeatherModule: IModule = { + title: 'Weather', + description: 'Look up the current weather in your location', + icon: Cloud, + component: WeatherComponent, +}; + +export default function WeatherComponent(props: any) { + const [date, setDate] = useState(new Date()); + const hours = date.getHours(); + const minutes = date.getMinutes(); + + // Change date on minute change + // Note: Using 10 000ms instead of 1000ms to chill a little :) + useEffect(() => { + setInterval(() => { + setDate(new Date()); + }, 10000); + }, []); + + return ( + + + {hours < 10 ? `0${hours}` : hours}:{minutes < 10 ? `0${minutes}` : minutes} + + + { + // Use dayjs to format the date + // https://day.js.org/en/getting-started/installation/ + dayjs(date).format('dddd, MMMM D') + } + + + ); +} diff --git a/src/components/modules/weather/index.ts b/src/components/modules/weather/index.ts new file mode 100644 index 000000000..e8817394b --- /dev/null +++ b/src/components/modules/weather/index.ts @@ -0,0 +1 @@ +export { WeatherModule } from './WeatherModule'; From 31deb5010f4fb3a845f7aed1502ecd4e8a9448e0 Mon Sep 17 00:00:00 2001 From: "Thomas \"ajnart\" Camlong" Date: Sun, 15 May 2022 13:54:25 +0200 Subject: [PATCH 02/13] :lipstick: Improve styling of modules --- src/components/layout/Navbar.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/layout/Navbar.tsx b/src/components/layout/Navbar.tsx index fba3ecec1..5e243c8dc 100644 --- a/src/components/layout/Navbar.tsx +++ b/src/components/layout/Navbar.tsx @@ -1,4 +1,5 @@ import { Group, Navbar as MantineNavbar } from '@mantine/core'; +import { WeatherModule } from '../modules'; import { DateModule } from '../modules/date/DateModule'; import ModuleWrapper from '../modules/moduleWrapper'; @@ -16,6 +17,7 @@ export default function Navbar() { > + ); From 49d57024b944cce2cc52d9703071573d0e091685 Mon Sep 17 00:00:00 2001 From: "Thomas \"ajnart\" Camlong" Date: Sun, 15 May 2022 18:52:29 +0200 Subject: [PATCH 03/13] Advancement on the weather widget --- .../modules/weather/WeatherInterface.ts | 236 ++++++++++++++++++ .../modules/weather/WeatherModule.story.tsx | 22 ++ .../modules/weather/WeatherModule.tsx | 141 +++++++++-- src/components/modules/weather/mockdata.json | 58 +++++ 4 files changed, 442 insertions(+), 15 deletions(-) create mode 100644 src/components/modules/weather/WeatherInterface.ts create mode 100644 src/components/modules/weather/WeatherModule.story.tsx create mode 100644 src/components/modules/weather/mockdata.json diff --git a/src/components/modules/weather/WeatherInterface.ts b/src/components/modules/weather/WeatherInterface.ts new file mode 100644 index 000000000..d6b728a75 --- /dev/null +++ b/src/components/modules/weather/WeatherInterface.ts @@ -0,0 +1,236 @@ +// To parse this data: +// +// import { Convert, WeatherResponse } from "./file"; +// +// const weatherResponse = Convert.toWeatherResponse(json); +// +// These functions will throw an error if the JSON doesn't +// match the expected interface, even if the JSON is valid. + +export interface WeatherResponse { + current_weather: CurrentWeather; + utc_offset_seconds: number; + latitude: number; + elevation: number; + longitude: number; + generationtime_ms: number; + daily_units: DailyUnits; + daily: Daily; +} + +export interface CurrentWeather { + winddirection: number; + windspeed: number; + time: string; + weathercode: number; + temperature: number; +} + +export interface Daily { + temperature_2m_max: number[]; + time: Date[]; + temperature_2m_min: number[]; + weathercode: number[]; +} + +export interface DailyUnits { + temperature_2m_max: string; + temperature_2m_min: string; + time: string; + weathercode: string; +} + +// Converts JSON strings to/from your types +// and asserts the results of JSON.parse at runtime +export class Convert { + public static toWeatherResponse(json: string): WeatherResponse { + return cast(JSON.parse(json), r('WeatherResponse')); + } + + public static weatherResponseToJson(value: WeatherResponse): string { + return JSON.stringify(uncast(value, r('WeatherResponse')), null, 2); + } +} + +function invalidValue(typ: any, val: any, key: any = ''): never { + if (key) { + throw Error( + `Invalid value for key "${key}". Expected type ${JSON.stringify( + typ + )} but got ${JSON.stringify(val)}` + ); + } + throw Error(`Invalid value ${JSON.stringify(val)} for type ${JSON.stringify(typ)}`); +} + +function jsonToJSProps(typ: any): any { + if (typ.jsonToJS === undefined) { + const map: any = {}; + typ.props.forEach((p: any) => (map[p.json] = { key: p.js, typ: p.typ })); + typ.jsonToJS = map; + } + return typ.jsonToJS; +} + +function jsToJSONProps(typ: any): any { + if (typ.jsToJSON === undefined) { + const map: any = {}; + typ.props.forEach((p: any) => (map[p.js] = { key: p.json, typ: p.typ })); + typ.jsToJSON = map; + } + return typ.jsToJSON; +} + +function transform(val: any, typ: any, getProps: any, key: any = ''): any { + function transformPrimitive(typ: string, val: any): any { + if (typeof typ === typeof val) return val; + return invalidValue(typ, val, key); + } + + function transformUnion(typs: any[], val: any): any { + // val must validate against one typ in typs + const l = typs.length; + for (let i = 0; i < l; i++) { + const typ = typs[i]; + try { + return transform(val, typ, getProps); + } catch (_) {} + } + return invalidValue(typs, val); + } + + function transformEnum(cases: string[], val: any): any { + if (cases.indexOf(val) !== -1) return val; + return invalidValue(cases, val); + } + + function transformArray(typ: any, val: any): any { + // val must be an array with no invalid elements + if (!Array.isArray(val)) return invalidValue('array', val); + return val.map((el) => transform(el, typ, getProps)); + } + + function transformDate(val: any): any { + if (val === null) { + return null; + } + const d = new Date(val); + if (isNaN(d.valueOf())) { + return invalidValue('Date', val); + } + return d; + } + + function transformObject(props: { [k: string]: any }, additional: any, val: any): any { + if (val === null || typeof val !== 'object' || Array.isArray(val)) { + return invalidValue('object', val); + } + const result: any = {}; + Object.getOwnPropertyNames(props).forEach((key) => { + const prop = props[key]; + const v = Object.prototype.hasOwnProperty.call(val, key) ? val[key] : undefined; + result[prop.key] = transform(v, prop.typ, getProps, prop.key); + }); + Object.getOwnPropertyNames(val).forEach((key) => { + if (!Object.prototype.hasOwnProperty.call(props, key)) { + result[key] = transform(val[key], additional, getProps, key); + } + }); + return result; + } + + if (typ === 'any') return val; + if (typ === null) { + if (val === null) return val; + return invalidValue(typ, val); + } + if (typ === false) return invalidValue(typ, val); + while (typeof typ === 'object' && typ.ref !== undefined) { + typ = typeMap[typ.ref]; + } + if (Array.isArray(typ)) return transformEnum(typ, val); + if (typeof typ === 'object') { + return typ.hasOwnProperty('unionMembers') + ? transformUnion(typ.unionMembers, val) + : typ.hasOwnProperty('arrayItems') + ? transformArray(typ.arrayItems, val) + : typ.hasOwnProperty('props') + ? transformObject(getProps(typ), typ.additional, val) + : invalidValue(typ, val); + } + // Numbers can be parsed by Date but shouldn't be. + if (typ === Date && typeof val !== 'number') return transformDate(val); + return transformPrimitive(typ, val); +} + +function cast(val: any, typ: any): T { + return transform(val, typ, jsonToJSProps); +} + +function uncast(val: T, typ: any): any { + return transform(val, typ, jsToJSONProps); +} + +function a(typ: any) { + return { arrayItems: typ }; +} + +function u(...typs: any[]) { + return { unionMembers: typs }; +} + +function o(props: any[], additional: any) { + return { props, additional }; +} + +function m(additional: any) { + return { props: [], additional }; +} + +function r(name: string) { + return { ref: name }; +} + +const typeMap: any = { + WeatherResponse: o( + [ + { json: 'current_weather', js: 'current_weather', typ: r('CurrentWeather') }, + { json: 'utc_offset_seconds', js: 'utc_offset_seconds', typ: 0 }, + { json: 'latitude', js: 'latitude', typ: 3.14 }, + { json: 'elevation', js: 'elevation', typ: 3.14 }, + { json: 'longitude', js: 'longitude', typ: 3.14 }, + { json: 'generationtime_ms', js: 'generationtime_ms', typ: 3.14 }, + { json: 'daily_units', js: 'daily_units', typ: r('DailyUnits') }, + { json: 'daily', js: 'daily', typ: r('Daily') }, + ], + false + ), + CurrentWeather: o( + [ + { json: 'winddirection', js: 'winddirection', typ: 0 }, + { json: 'windspeed', js: 'windspeed', typ: 3.14 }, + { json: 'time', js: 'time', typ: '' }, + { json: 'weathercode', js: 'weathercode', typ: 0 }, + { json: 'temperature', js: 'temperature', typ: 3.14 }, + ], + false + ), + Daily: o( + [ + { json: 'temperature_2m_max', js: 'temperature_2m_max', typ: a(3.14) }, + { json: 'time', js: 'time', typ: a(Date) }, + { json: 'temperature_2m_min', js: 'temperature_2m_min', typ: a(3.14) }, + { json: 'weathercode', js: 'weathercode', typ: a(0) }, + ], + false + ), + DailyUnits: o( + [ + { json: 'temperature_2m_max', js: 'temperature_2m_max', typ: '' }, + { json: 'temperature_2m_min', js: 'temperature_2m_min', typ: '' }, + { json: 'time', js: 'time', typ: '' }, + { json: 'weathercode', js: 'weathercode', typ: '' }, + ], + false + ), +}; diff --git a/src/components/modules/weather/WeatherModule.story.tsx b/src/components/modules/weather/WeatherModule.story.tsx new file mode 100644 index 000000000..2681443ec --- /dev/null +++ b/src/components/modules/weather/WeatherModule.story.tsx @@ -0,0 +1,22 @@ +import withMock from 'storybook-addon-mock'; +import WeatherComponent from './WeatherModule'; +import mockdata from './mockdata.json'; + +export default { + title: 'Weather module', + decorators: [withMock], +}; + +export const Default = (args: any) => ; +Default.parameters = { + mockData: [ + { + url: 'https://api.open-meteo.com/v1/forecast', + method: 'GET', + status: 200, + response: { + data: mockdata, + }, + }, + ], +}; diff --git a/src/components/modules/weather/WeatherModule.tsx b/src/components/modules/weather/WeatherModule.tsx index bb157fda9..536f33387 100644 --- a/src/components/modules/weather/WeatherModule.tsx +++ b/src/components/modules/weather/WeatherModule.tsx @@ -1,8 +1,19 @@ -import { Group, Text, Title } from '@mantine/core'; +import { Group, Text, Title, Tooltip } from '@mantine/core'; +import axios from 'axios'; import dayjs from 'dayjs'; import { useEffect, useState } from 'react'; -import { Clock, Cloud } from 'tabler-icons-react'; +import { + Cloud, + CloudFog, + CloudRain, + CloudSnow, + CloudStorm, + QuestionMark, + Snowflake, + Sun, +} from 'tabler-icons-react'; import { IModule } from '../modules'; +import { WeatherResponse, Convert } from './WeatherInterface'; export const WeatherModule: IModule = { title: 'Weather', @@ -11,29 +22,129 @@ export const WeatherModule: IModule = { component: WeatherComponent, }; +// 0 Clear sky +// 1, 2, 3 Mainly clear, partly cloudy, and overcast +// 45, 48 Fog and depositing rime fog +// 51, 53, 55 Drizzle: Light, moderate, and dense intensity +// 56, 57 Freezing Drizzle: Light and dense intensity +// 61, 63, 65 Rain: Slight, moderate and heavy intensity +// 66, 67 Freezing Rain: Light and heavy intensity +// 71, 73, 75 Snow fall: Slight, moderate, and heavy intensity +// 77 Snow grains +// 80, 81, 82 Rain showers: Slight, moderate, and violent +// 85, 86 Snow showers slight and heavy +// 95 * Thunderstorm: Slight or moderate +// 96, 99 * Thunderstorm with slight and heavy hail +export function WeatherIcon(props: any) { + const { code } = props; + let data: { icon: any; name: string }; + switch (code) { + case 0: { + data = { icon: , name: 'Clear' }; + break; + } + case 1: + case 2: + case 3: { + data = { icon: , name: 'Mainly clear' }; + break; + } + case 45: + case 48: { + data = { icon: , name: 'Fog' }; + break; + } + case 51: + case 53: + case 55: { + data = { icon: , name: 'Drizzle' }; + break; + } + case 56: + case 57: { + data = { icon: , name: 'Freezing drizzle' }; + break; + } + case 61: + case 63: + case 65: { + data = { icon: , name: 'Rain' }; + break; + } + case 66: + case 67: { + data = { icon: , name: 'Freezing rain' }; + break; + } + case 71: + case 73: + case 75: { + data = { icon: , name: 'Snow fall' }; + break; + } + case 77: { + data = { icon: , name: 'Snow grains' }; + break; + } + case 80: + case 81: + case 82: { + data = { icon: , name: 'Rain showers' }; + + break; + } + case 85: + case 86: { + data = { icon: , name: 'Snow showers' }; + break; + } + case 95: { + data = { icon: , name: 'Thunderstorm' }; + break; + } + case 96: + case 99: { + data = { icon: , name: 'Thunderstorm with hail' }; + break; + } + default: { + data = { icon: , name: 'Unknown' }; + } + } + return {data.icon}; +} + export default function WeatherComponent(props: any) { - const [date, setDate] = useState(new Date()); - const hours = date.getHours(); - const minutes = date.getMinutes(); + // Get location from browser + const [location, setLocation] = useState({ lat: 0, lng: 0 }); + const [weather, setWeather] = useState({} as WeatherResponse); + if ('geolocation' in navigator && location.lat === 0 && location.lng === 0) { + navigator.geolocation.getCurrentPosition((position) => { + setLocation({ lat: position.coords.latitude, lng: position.coords.longitude }); + }); + } - // Change date on minute change - // Note: Using 10 000ms instead of 1000ms to chill a little :) useEffect(() => { - setInterval(() => { - setDate(new Date()); - }, 10000); + axios + .get( + `https://api.open-meteo.com/v1/forecast?latitude=${location.lat}&longitude=${location.lng}&daily=weathercode,temperature_2m_max,temperature_2m_min¤t_weather=true&timezone=Europe%2FLondon` + ) + .then((res) => { + setWeather(res.data); + }); }, []); - + if (!weather.current_weather) { + return null; + } + console.log(weather.current_weather); return ( - - {hours < 10 ? `0${hours}` : hours}:{minutes < 10 ? `0${minutes}` : minutes} - + {weather.current_weather.temperature}°C + { // Use dayjs to format the date // https://day.js.org/en/getting-started/installation/ - dayjs(date).format('dddd, MMMM D') } diff --git a/src/components/modules/weather/mockdata.json b/src/components/modules/weather/mockdata.json new file mode 100644 index 000000000..b9e3795b1 --- /dev/null +++ b/src/components/modules/weather/mockdata.json @@ -0,0 +1,58 @@ +{ + "current_weather": { + "winddirection": 121, + "windspeed": 12.7, + "time": "2022-05-15T14:00", + "weathercode": 3, + "temperature": 28.7 + }, + "utc_offset_seconds": 3600, + "latitude": 48.86, + "elevation": 46.1875, + "longitude": 2.3599997, + "generationtime_ms": 0.36406517028808594, + "daily_units": { + "temperature_2m_max": "°C", + "temperature_2m_min": "°C", + "time": "iso8601", + "weathercode": "wmo code" + }, + "daily": { + "temperature_2m_max": [ + 29.1, + 25.4, + 28.2, + 29.7, + 24.6, + 27.1, + 22.9 + ], + "time": [ + "2022-05-15", + "2022-05-16", + "2022-05-17", + "2022-05-18", + "2022-05-19", + "2022-05-20", + "2022-05-21" + ], + "temperature_2m_min": [ + 14.3, + 16.9, + 17.2, + 17.7, + 19.2, + 19.1, + 14 + ], + "weathercode": [ + 95, + 3, + 3, + 3, + 3, + 80, + 3 + ] + } +} \ No newline at end of file From 73d06e15fbf6b9997f2b2330f3486e0903c934ad Mon Sep 17 00:00:00 2001 From: "Thomas \"ajnart\" Camlong" Date: Sun, 15 May 2022 18:53:41 +0200 Subject: [PATCH 04/13] :white_check_mark: Update tests for storybook --- .storybook/main.js | 1 + 1 file changed, 1 insertion(+) diff --git a/.storybook/main.js b/.storybook/main.js index 6449361d8..80bc56834 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -3,6 +3,7 @@ module.exports = { addons: [ 'storybook-dark-mode', '@storybook/addon-links', + 'storybook-addon-mock/register', '@storybook/addon-essentials', { name: 'storybook-addon-turbo-build', From ab860eeea17cab64898813528a39402bdb0b3a34 Mon Sep 17 00:00:00 2001 From: Aj - Thomas Date: Mon, 16 May 2022 00:23:49 +0200 Subject: [PATCH 05/13] =?UTF-8?q?=EF=BF=BD=20Weather=20module=20improvemen?= =?UTF-8?q?ts?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/modules/date/DateModule.tsx | 2 +- .../modules/weather/WeatherModule.tsx | 74 +++++++++---------- 2 files changed, 38 insertions(+), 38 deletions(-) diff --git a/src/components/modules/date/DateModule.tsx b/src/components/modules/date/DateModule.tsx index ba653f862..d53c160ee 100644 --- a/src/components/modules/date/DateModule.tsx +++ b/src/components/modules/date/DateModule.tsx @@ -25,7 +25,7 @@ export default function DateComponent(props: any) { }, []); return ( - + {hours < 10 ? `0${hours}` : hours}:{minutes < 10 ? `0${minutes}` : minutes} diff --git a/src/components/modules/weather/WeatherModule.tsx b/src/components/modules/weather/WeatherModule.tsx index 536f33387..8a3dcba2c 100644 --- a/src/components/modules/weather/WeatherModule.tsx +++ b/src/components/modules/weather/WeatherModule.tsx @@ -1,6 +1,5 @@ -import { Group, Text, Title, Tooltip } from '@mantine/core'; +import { Center, Group, Text, Title, Tooltip } from '@mantine/core'; import axios from 'axios'; -import dayjs from 'dayjs'; import { useEffect, useState } from 'react'; import { Cloud, @@ -13,105 +12,109 @@ import { Sun, } from 'tabler-icons-react'; import { IModule } from '../modules'; -import { WeatherResponse, Convert } from './WeatherInterface'; +import { WeatherResponse } from './WeatherInterface'; export const WeatherModule: IModule = { title: 'Weather', description: 'Look up the current weather in your location', - icon: Cloud, + icon: Sun, component: WeatherComponent, }; // 0 Clear sky // 1, 2, 3 Mainly clear, partly cloudy, and overcast // 45, 48 Fog and depositing rime fog -// 51, 53, 55 Drizzle: Light, moderate, and dense intensity -// 56, 57 Freezing Drizzle: Light and dense intensity -// 61, 63, 65 Rain: Slight, moderate and heavy intensity -// 66, 67 Freezing Rain: Light and heavy intensity -// 71, 73, 75 Snow fall: Slight, moderate, and heavy intensity +// 51, 53, 55 Drizzle: Light, moderate, and dense intensity +// 56, 57 Freezing Drizzle: Light and dense intensity +// 61, 63, 65 Rain: Slight, moderate and heavy intensity +// 66, 67 Freezing Rain: Light and heavy intensity +// 71, 73, 75 Snow fall: Slight, moderate, and heavy intensity // 77 Snow grains -// 80, 81, 82 Rain showers: Slight, moderate, and violent -// 85, 86 Snow showers slight and heavy -// 95 * Thunderstorm: Slight or moderate -// 96, 99 * Thunderstorm with slight and heavy hail +// 80, 81, 82 Rain showers: Slight, moderate, and violent +// 85, 86Snow showers slight and heavy +// 95 *Thunderstorm: Slight or moderate +// 96, 99 *Thunderstorm with slight and heavy hail export function WeatherIcon(props: any) { const { code } = props; let data: { icon: any; name: string }; switch (code) { case 0: { - data = { icon: , name: 'Clear' }; + data = { icon: Sun, name: 'Clear' }; break; } case 1: case 2: case 3: { - data = { icon: , name: 'Mainly clear' }; + data = { icon: Cloud, name: 'Mainly clear' }; break; } case 45: case 48: { - data = { icon: , name: 'Fog' }; + data = { icon: CloudFog, name: 'Fog' }; break; } case 51: case 53: case 55: { - data = { icon: , name: 'Drizzle' }; + data = { icon: Cloud, name: 'Drizzle' }; break; } case 56: case 57: { - data = { icon: , name: 'Freezing drizzle' }; + data = { icon: Snowflake, name: 'Freezing drizzle' }; break; } case 61: case 63: case 65: { - data = { icon: , name: 'Rain' }; + data = { icon: CloudRain, name: 'Rain' }; break; } case 66: case 67: { - data = { icon: , name: 'Freezing rain' }; + data = { icon: CloudRain, name: 'Freezing rain' }; break; } case 71: case 73: case 75: { - data = { icon: , name: 'Snow fall' }; + data = { icon: CloudSnow, name: 'Snow fall' }; break; } case 77: { - data = { icon: , name: 'Snow grains' }; + data = { icon: CloudSnow, name: 'Snow grains' }; break; } case 80: case 81: case 82: { - data = { icon: , name: 'Rain showers' }; + data = { icon: CloudRain, name: 'Rain showers' }; break; } case 85: case 86: { - data = { icon: , name: 'Snow showers' }; + data = { icon: CloudSnow, name: 'Snow showers' }; break; } case 95: { - data = { icon: , name: 'Thunderstorm' }; + data = { icon: CloudStorm, name: 'Thunderstorm' }; break; } case 96: case 99: { - data = { icon: , name: 'Thunderstorm with hail' }; + data = { icon: CloudStorm, name: 'Thunderstorm with hail' }; break; } default: { - data = { icon: , name: 'Unknown' }; + data = { icon: QuestionMark, name: 'Unknown' }; } } - return {data.icon}; + return ( + + + + ); } export default function WeatherComponent(props: any) { @@ -136,17 +139,14 @@ export default function WeatherComponent(props: any) { if (!weather.current_weather) { return null; } - console.log(weather.current_weather); + return ( - + {weather.current_weather.temperature}°C - - - { - // Use dayjs to format the date - // https://day.js.org/en/getting-started/installation/ - } - + + + {weather.daily.temperature_2m_max[0]}°C / {weather.daily.temperature_2m_min[0]}°C + ); } From bdf871b4768d3ea2fa288c0b44b786cd76580a2e Mon Sep 17 00:00:00 2001 From: Aj - Thomas Date: Mon, 16 May 2022 12:36:35 +0200 Subject: [PATCH 06/13] =?UTF-8?q?=F0=9F=92=84=20=EF=BF=BD=20Update=20weath?= =?UTF-8?q?er=20module=20styling?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/modules/weather/WeatherModule.tsx | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/src/components/modules/weather/WeatherModule.tsx b/src/components/modules/weather/WeatherModule.tsx index 8a3dcba2c..3c3b218e7 100644 --- a/src/components/modules/weather/WeatherModule.tsx +++ b/src/components/modules/weather/WeatherModule.tsx @@ -1,7 +1,9 @@ -import { Center, Group, Text, Title, Tooltip } from '@mantine/core'; +import { Group, Space, Title, Tooltip } from '@mantine/core'; import axios from 'axios'; import { useEffect, useState } from 'react'; import { + ArrowDownRight, + ArrowUpRight, Cloud, CloudFog, CloudRain, @@ -139,13 +141,17 @@ export default function WeatherComponent(props: any) { if (!weather.current_weather) { return null; } - return ( {weather.current_weather.temperature}°C - + - {weather.daily.temperature_2m_max[0]}°C / {weather.daily.temperature_2m_min[0]}°C + + {weather.daily.temperature_2m_max[0]}°C + + + {weather.daily.temperature_2m_min[0]}°C + ); From 471a9f740743c32e2e8377360536c613958a1b7a Mon Sep 17 00:00:00 2001 From: Aj - Thomas Date: Mon, 16 May 2022 12:46:27 +0200 Subject: [PATCH 07/13] Update page title --- src/pages/_app.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index 3b2271307..610e21ad4 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -24,7 +24,7 @@ export default function App(props: AppProps & { colorScheme: ColorScheme }) { return ( <> - Homarr - A homepage for your server! + Homarr 🦞 From 2ba9d517a85bffd802547fdd912321c37ea9c274 Mon Sep 17 00:00:00 2001 From: "Thomas \"ajnart\" Camlong" Date: Tue, 17 May 2022 21:22:14 +0200 Subject: [PATCH 08/13] :zap: Improve weather module --- src/components/layout/Aside.tsx | 5 ++--- src/components/layout/Navbar.tsx | 7 +++---- src/components/modules/index.ts | 1 + src/components/modules/moduleWrapper.tsx | 2 +- src/components/modules/weather/WeatherModule.tsx | 2 +- 5 files changed, 8 insertions(+), 9 deletions(-) diff --git a/src/components/layout/Aside.tsx b/src/components/layout/Aside.tsx index 912b231ac..c68c36a78 100644 --- a/src/components/layout/Aside.tsx +++ b/src/components/layout/Aside.tsx @@ -1,7 +1,5 @@ import { Aside as MantineAside, Group } from '@mantine/core'; -import { DateModule } from '../modules'; -import { CalendarModule } from '../modules/calendar/CalendarModule'; -import ModuleWrapper from '../modules/moduleWrapper'; +import { WeatherModule, DateModule, ModuleWrapper, CalendarModule } from '../modules'; export default function Aside(props: any) { return ( @@ -18,6 +16,7 @@ export default function Aside(props: any) { + ); diff --git a/src/components/layout/Navbar.tsx b/src/components/layout/Navbar.tsx index 5e243c8dc..f9fe7b28f 100644 --- a/src/components/layout/Navbar.tsx +++ b/src/components/layout/Navbar.tsx @@ -1,7 +1,5 @@ import { Group, Navbar as MantineNavbar } from '@mantine/core'; -import { WeatherModule } from '../modules'; -import { DateModule } from '../modules/date/DateModule'; -import ModuleWrapper from '../modules/moduleWrapper'; +import { WeatherModule, DateModule, ModuleWrapper } from '../modules'; export default function Navbar() { return ( @@ -17,8 +15,9 @@ export default function Navbar() { > - + + ); } diff --git a/src/components/modules/index.ts b/src/components/modules/index.ts index 4b85fa930..65051904a 100644 --- a/src/components/modules/index.ts +++ b/src/components/modules/index.ts @@ -1,3 +1,4 @@ +export * from './moduleWrapper'; export * from './date'; export * from './calendar'; export * from './search'; diff --git a/src/components/modules/moduleWrapper.tsx b/src/components/modules/moduleWrapper.tsx index 55b421a5e..64a648eef 100644 --- a/src/components/modules/moduleWrapper.tsx +++ b/src/components/modules/moduleWrapper.tsx @@ -2,7 +2,7 @@ import { Card, useMantineTheme } from '@mantine/core'; import { useConfig } from '../../tools/state'; import { IModule } from './modules'; -export default function ModuleWrapper(props: any) { +export function ModuleWrapper(props: any) { const { module }: { module: IModule } = props; const { config } = useConfig(); const enabledModules = config.settings.enabledModules ?? []; diff --git a/src/components/modules/weather/WeatherModule.tsx b/src/components/modules/weather/WeatherModule.tsx index 3c3b218e7..3a54a37b2 100644 --- a/src/components/modules/weather/WeatherModule.tsx +++ b/src/components/modules/weather/WeatherModule.tsx @@ -17,7 +17,7 @@ import { IModule } from '../modules'; import { WeatherResponse } from './WeatherInterface'; export const WeatherModule: IModule = { - title: 'Weather', + title: 'Weather (beta)', description: 'Look up the current weather in your location', icon: Sun, component: WeatherComponent, From 64923b03d9fdeb61e305340e71cd7379ca92f2f4 Mon Sep 17 00:00:00 2001 From: "Thomas \"ajnart\" Camlong" Date: Tue, 17 May 2022 21:36:07 +0200 Subject: [PATCH 09/13] :art: Fix architecture for CI --- src/components/AppShelf/AddAppShelfItem.tsx | 9 +- src/components/Settings/SettingsMenu.tsx | 1 - src/components/layout/Aside.tsx | 3 +- src/components/layout/Layout.tsx | 6 +- src/components/layout/Navbar.tsx | 7 +- src/components/modules/index.ts | 1 - .../modules/weather/WeatherInterface.ts | 195 ------------------ 7 files changed, 15 insertions(+), 207 deletions(-) diff --git a/src/components/AppShelf/AddAppShelfItem.tsx b/src/components/AppShelf/AddAppShelfItem.tsx index d6101b223..ccc6569f2 100644 --- a/src/components/AppShelf/AddAppShelfItem.tsx +++ b/src/components/AppShelf/AddAppShelfItem.tsx @@ -154,7 +154,14 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } & return ( <>
- Placeholder + Placeholder
{ diff --git a/src/components/Settings/SettingsMenu.tsx b/src/components/Settings/SettingsMenu.tsx index cbd30c987..9e9853e3a 100644 --- a/src/components/Settings/SettingsMenu.tsx +++ b/src/components/Settings/SettingsMenu.tsx @@ -2,7 +2,6 @@ import { ActionIcon, Group, Modal, - Switch, Title, Text, Tooltip, diff --git a/src/components/layout/Aside.tsx b/src/components/layout/Aside.tsx index c68c36a78..6cef6eb4e 100644 --- a/src/components/layout/Aside.tsx +++ b/src/components/layout/Aside.tsx @@ -1,5 +1,6 @@ import { Aside as MantineAside, Group } from '@mantine/core'; -import { WeatherModule, DateModule, ModuleWrapper, CalendarModule } from '../modules'; +import { WeatherModule, DateModule, CalendarModule } from '../modules'; +import { ModuleWrapper } from '../modules/moduleWrapper'; export default function Aside(props: any) { return ( diff --git a/src/components/layout/Layout.tsx b/src/components/layout/Layout.tsx index 8b82b4a74..ac2c3c742 100644 --- a/src/components/layout/Layout.tsx +++ b/src/components/layout/Layout.tsx @@ -10,11 +10,7 @@ const useStyles = createStyles((theme) => ({ export default function Layout({ children, style }: any) { const { classes, cx } = useStyles(); return ( - } - header={
} - footer={