diff --git a/web/src/components/Flag.tsx b/web/src/components/Flag.tsx new file mode 100644 index 0000000000..16be6b4b04 --- /dev/null +++ b/web/src/components/Flag.tsx @@ -0,0 +1,42 @@ +import { resolvePath } from 'react-router-dom'; + +const DEFAULT_FLAG_SIZE = 48; + +const getFlagFileName = (zoneId: string) => { + // Return (zonesConfig[zoneId.toUpperCase()] || {}).flag_file_name; TODO: enable when config setup + if (zoneId === 'DK-DK1') { + return 'dk.png'; + } + + if (zoneId === 'ES') { + return 'es.png'; + } + + return 'us.png'; +}; + +const getFlagUri = function (zoneId: string, flagSize = DEFAULT_FLAG_SIZE) { + if (!zoneId) { + return; + } + const flagFile = getFlagFileName(zoneId); + return resolvePath(`flags_iso/${flagSize}/${flagFile}`).pathname; +}; + +export function CountryFlag({ + zoneId, + flagSize = DEFAULT_FLAG_SIZE, + ...props +}: { + zoneId: string; + flagSize?: number; + className?: string; +}) { + const flagUri = getFlagUri(zoneId, flagSize); + + if (flagUri === undefined) { + return
No flag
; + } + + return {zoneId}; +} diff --git a/web/src/features/panels/LeftPanel.tsx b/web/src/features/panels/LeftPanel.tsx index 1cb44260a3..bd2c35e31b 100644 --- a/web/src/features/panels/LeftPanel.tsx +++ b/web/src/features/panels/LeftPanel.tsx @@ -37,11 +37,11 @@ function OuterPanel({ children }: { children: React.ReactNode }) { return ( ); @@ -55,45 +55,60 @@ export default function LeftPanel() { path="/" element={

- Ranking Panel Cillum aute occaecat in pariatur duis aliquip sint sunt excepteur Lorem. Incididunt quis id - sit consequat reprehenderit officia adipisicing ipsum. Esse anim excepteur do laboris do. Nulla magna sit - adipisicing incididunt proident tempor velit fugiat reprehenderit aute cillum est consectetur officia. - Culpa aliquip esse sint laborum minim reprehenderit enim proident commodo duis pariatur officia ut. - Laboris deserunt excepteur mollit elit amet quis cillum veniam ad laborum sit. Deserunt elit in nostrud - magna ipsum nulla sunt ea ut reprehenderit velit consequat do. Nulla consequat elit non amet aliqua sunt - aute nostrud magna dolor labore. Veniam eiusmod aliqua culpa id do incididunt incididunt in incididunt. - Esse incididunt ipsum et deserunt Lorem non aute ut culpa qui enim sit enim esse. Quis laboris nostrud - veniam duis tempor irure sint consequat reprehenderit excepteur ex ullamco. Do et cupidatat pariatur - nostrud occaecat laboris laborum ex. Cillum aliqua incididunt tempor officia adipisicing excepteur - reprehenderit magna quis cupidatat. Voluptate occaecat laboris ad ad ad irure quis est duis id adipisicing - et laboris. Dolor non aliqua laborum enim cillum eu consequat est anim est magna velit voluptate. Sint - dolor pariatur dolore ut in sint anim ipsum. Et ullamco veniam Lorem incididunt fugiat eiusmod aute aliqua - elit. Magna Lorem eu ad do enim excepteur eiusmod dolor dolore adipisicing laborum ad. Duis sunt pariatur - eu sit esse tempor pariatur consectetur anim aliqua laborum mollit culpa aliqua. Qui aliqua voluptate - fugiat incididunt excepteur consequat ea adipisicing est deserunt incididunt. Cupidatat sit sint sunt - voluptate minim. Culpa aliquip officia voluptate ad nostrud. Ut qui ipsum ipsum eiusmod nostrud fugiat in - incididunt mollit ea. Non veniam sunt in minim ea. Id dolor nisi excepteur culpa pariatur cillum ullamco - proident incididunt. Tempor irure aute deserunt nisi. Consequat aute Lorem ea et quis cupidatat aliqua - officia laborum ad est quis ex sunt. Reprehenderit proident mollit aliqua ea magna elit. Officia sint - consectetur duis sint non consectetur ad reprehenderit ullamco do enim. Nisi incididunt eiusmod enim enim - est. Nisi non commodo qui fugiat exercitation sunt incididunt sit et. Nulla aliquip reprehenderit sint - duis occaecat ipsum quis dolore aliqua aute ea quis Lorem deserunt. Pariatur ex aliquip velit dolore - cillum. Commodo minim deserunt id deserunt anim aliquip. Sint fugiat duis laboris culpa voluptate officia - sint pariatur consequat proident culpa. Veniam aliquip ut occaecat ad ut sint et fugiat aliquip sunt sit - enim dolor minim. Sunt excepteur cillum ut minim in laboris occaecat eu voluptate sint et est. Ad anim - irure dolore et incididunt enim ut nulla quis consequat culpa esse cillum in. Magna amet occaecat aute - sunt adipisicing mollit sunt velit aliqua duis magna ad. Irure velit proident velit excepteur et elit - officia ut consequat ut. Cupidatat labore id nisi elit commodo minim ut labore Lorem cupidatat nisi amet - do. Voluptate ipsum incididunt quis qui dolore voluptate aliqua. Ut mollit fugiat qui nulla nulla amet est - enim et laboris enim duis esse. Qui minim Lorem adipisicing eu cillum. Velit laboris dolore excepteur - voluptate deserunt excepteur do. Aliquip ipsum enim veniam deserunt veniam ut nisi occaecat. Cupidatat - magna pariatur pariatur laborum eu elit incididunt magna ea cupidatat velit sit enim officia. Ex labore - nulla do excepteur consequat duis exercitation voluptate cillum incididunt deserunt. Elit excepteur - voluptate pariatur ut tempor id veniam commodo sint laborum deserunt est irure. Officia fugiat ea qui - nisi. Laboris sunt in qui labore voluptate ea consequat aliquip sit exercitation ipsum. Quis magna cillum - ex adipisicing. Anim eiusmod amet consectetur eiusmod do pariatur excepteur eu pariatur ullamco nostrud - irure sit. Eiusmod pariatur labore voluptate excepteur commodo occaecat officia anim et magna id culpa - reprehenderit. + Ranking Panel Cillum aute occaecat in pariatur duis aliquip sint sunt + excepteur Lorem. Incididunt quis id sit consequat reprehenderit officia + adipisicing ipsum. Esse anim excepteur do laboris do. Nulla magna sit + adipisicing incididunt proident tempor velit fugiat reprehenderit aute + cillum est consectetur officia. Culpa aliquip esse sint laborum minim + reprehenderit enim proident commodo duis pariatur officia ut. Laboris + deserunt excepteur mollit elit amet quis cillum veniam ad laborum sit. + Deserunt elit in nostrud magna ipsum nulla sunt ea ut reprehenderit velit + consequat do. Nulla consequat elit non amet aliqua sunt aute nostrud magna + dolor labore. Veniam eiusmod aliqua culpa id do incididunt incididunt in + incididunt. Esse incididunt ipsum et deserunt Lorem non aute ut culpa qui + enim sit enim esse. Quis laboris nostrud veniam duis tempor irure sint + consequat reprehenderit excepteur ex ullamco. Do et cupidatat pariatur + nostrud occaecat laboris laborum ex. Cillum aliqua incididunt tempor officia + adipisicing excepteur reprehenderit magna quis cupidatat. Voluptate occaecat + laboris ad ad ad irure quis est duis id adipisicing et laboris. Dolor non + aliqua laborum enim cillum eu consequat est anim est magna velit voluptate. + Sint dolor pariatur dolore ut in sint anim ipsum. Et ullamco veniam Lorem + incididunt fugiat eiusmod aute aliqua elit. Magna Lorem eu ad do enim + excepteur eiusmod dolor dolore adipisicing laborum ad. Duis sunt pariatur eu + sit esse tempor pariatur consectetur anim aliqua laborum mollit culpa + aliqua. Qui aliqua voluptate fugiat incididunt excepteur consequat ea + adipisicing est deserunt incididunt. Cupidatat sit sint sunt voluptate + minim. Culpa aliquip officia voluptate ad nostrud. Ut qui ipsum ipsum + eiusmod nostrud fugiat in incididunt mollit ea. Non veniam sunt in minim ea. + Id dolor nisi excepteur culpa pariatur cillum ullamco proident incididunt. + Tempor irure aute deserunt nisi. Consequat aute Lorem ea et quis cupidatat + aliqua officia laborum ad est quis ex sunt. Reprehenderit proident mollit + aliqua ea magna elit. Officia sint consectetur duis sint non consectetur ad + reprehenderit ullamco do enim. Nisi incididunt eiusmod enim enim est. Nisi + non commodo qui fugiat exercitation sunt incididunt sit et. Nulla aliquip + reprehenderit sint duis occaecat ipsum quis dolore aliqua aute ea quis Lorem + deserunt. Pariatur ex aliquip velit dolore cillum. Commodo minim deserunt id + deserunt anim aliquip. Sint fugiat duis laboris culpa voluptate officia sint + pariatur consequat proident culpa. Veniam aliquip ut occaecat ad ut sint et + fugiat aliquip sunt sit enim dolor minim. Sunt excepteur cillum ut minim in + laboris occaecat eu voluptate sint et est. Ad anim irure dolore et + incididunt enim ut nulla quis consequat culpa esse cillum in. Magna amet + occaecat aute sunt adipisicing mollit sunt velit aliqua duis magna ad. Irure + velit proident velit excepteur et elit officia ut consequat ut. Cupidatat + labore id nisi elit commodo minim ut labore Lorem cupidatat nisi amet do. + Voluptate ipsum incididunt quis qui dolore voluptate aliqua. Ut mollit + fugiat qui nulla nulla amet est enim et laboris enim duis esse. Qui minim + Lorem adipisicing eu cillum. Velit laboris dolore excepteur voluptate + deserunt excepteur do. Aliquip ipsum enim veniam deserunt veniam ut nisi + occaecat. Cupidatat magna pariatur pariatur laborum eu elit incididunt magna + ea cupidatat velit sit enim officia. Ex labore nulla do excepteur consequat + duis exercitation voluptate cillum incididunt deserunt. Elit excepteur + voluptate pariatur ut tempor id veniam commodo sint laborum deserunt est + irure. Officia fugiat ea qui nisi. Laboris sunt in qui labore voluptate ea + consequat aliquip sit exercitation ipsum. Quis magna cillum ex adipisicing. + Anim eiusmod amet consectetur eiusmod do pariatur excepteur eu pariatur + ullamco nostrud irure sit. Eiusmod pariatur labore voluptate excepteur + commodo occaecat officia anim et magna id culpa reprehenderit.

} /> diff --git a/web/src/features/panels/Zone/CountryTag.tsx b/web/src/features/panels/Zone/CountryTag.tsx new file mode 100644 index 0000000000..a32b0d31a2 --- /dev/null +++ b/web/src/features/panels/Zone/CountryTag.tsx @@ -0,0 +1,29 @@ +import { CountryFlag } from 'components/Flag'; + +// TODO: move to translations when config is added +const getCountryName = (zoneId: string) => { + if (zoneId === 'DK-DK1') { + return 'Denmark'; + } + if (zoneId === 'ES') { + return 'Spain'; + } + return 'USA'; +}; + +export function CountryTag({ zoneId }: { zoneId: string }) { + const countryName = getCountryName(zoneId); + // eslint-disable-next-line @typescript-eslint/no-magic-numbers + const isACountry = zoneId.length === 2; // TODO: set up proper method to check if zoneId is a country + + if (isACountry) { + return ; + } + + return ( + + + {countryName} + + ); +} diff --git a/web/src/features/panels/Zone/ZoneDetails.tsx b/web/src/features/panels/Zone/ZoneDetails.tsx index 9c2f9bd581..4c97bf5fb8 100644 --- a/web/src/features/panels/Zone/ZoneDetails.tsx +++ b/web/src/features/panels/Zone/ZoneDetails.tsx @@ -3,6 +3,7 @@ import LoadingOrError from 'components/LoadingOrError'; import { useAtom } from 'jotai'; import { Navigate, useParams } from 'react-router-dom'; import { timeAverageAtom } from 'utils/state'; +import { ZoneHeader } from './ZoneHeader'; export default function ZoneDetails(): JSX.Element { const { zoneId } = useParams(); @@ -19,13 +20,11 @@ export default function ZoneDetails(): JSX.Element { return ; } + console.log('I should do something with all this data', data); + return (
- {data.zoneStates.map((x) => ( -
- {x.stateDatetime} : {x.co2intensity} -
- ))}{' '} +
); } diff --git a/web/src/features/panels/Zone/ZoneHeader.tsx b/web/src/features/panels/Zone/ZoneHeader.tsx new file mode 100644 index 0000000000..464b5f395c --- /dev/null +++ b/web/src/features/panels/Zone/ZoneHeader.tsx @@ -0,0 +1,56 @@ +import { CountryTag } from './CountryTag'; +import ZoneHeaderTitle from './ZoneHeaderTitle'; + +interface ZoneHeaderProps { + zoneId: string; +} + +export function ZoneHeader(props: ZoneHeaderProps) { + const { zoneId } = props; + // TODO: use correct zoneId + + return ( +
+ + Estimated +
, +
+ Aggregated +
, + ]} + countryTag={} + /> + + Estimated + , + ]} + countryTag={} + /> + } + /> + + ); +} diff --git a/web/src/features/panels/Zone/ZoneHeaderTitle.tsx b/web/src/features/panels/Zone/ZoneHeaderTitle.tsx new file mode 100644 index 0000000000..03fcd78144 --- /dev/null +++ b/web/src/features/panels/Zone/ZoneHeaderTitle.tsx @@ -0,0 +1,36 @@ +import { Link } from 'react-router-dom'; + +interface ZoneHeaderTitleProps { + title: string; + goBackPath: string; + labels?: React.ReactElement[]; + countryTag?: React.ReactElement; + formattedDate: string; +} + +export default function ZoneHeaderTitle({ + title, + goBackPath, + labels, + formattedDate, + countryTag, +}: ZoneHeaderTitleProps) { + // TODO: add correct icon + return ( +
+ + {'❮'} + +
+

+ {title} + {countryTag} +

+
+ {labels} +

{formattedDate}

+
+
+
+ ); +} diff --git a/web/src/main.tsx b/web/src/main.tsx index ed6536921c..be220e493e 100644 --- a/web/src/main.tsx +++ b/web/src/main.tsx @@ -36,7 +36,7 @@ if (container) { - + );