-
Notifications
You must be signed in to change notification settings - Fork 959
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* add all the flags * Add zoneFlag with hardcoded return * Change leftpanel styling * Add initial zoneHeader * Works for countries * Disable eslint
- Loading branch information
Markus Killendahl
authored
Nov 10, 2022
1 parent
710437d
commit 0485ce4
Showing
7 changed files
with
224 additions
and
47 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 <div>No flag</div>; | ||
| } | ||
|
|
||
| return <img src={flagUri} alt={zoneId} {...props} />; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 <CountryFlag zoneId={zoneId} flagSize={16} className="inline-flex" />; | ||
| } | ||
|
|
||
| return ( | ||
| <span className="inline-flex items-center gap-1 rounded-full bg-gray-200 px-2 py-0 text-xs"> | ||
| <CountryFlag zoneId={zoneId} flagSize={16} /> | ||
| <span>{countryName}</span> | ||
| </span> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 ( | ||
| <div className="mt-1 grid w-full gap-20 pr-4"> | ||
| <ZoneHeaderTitle | ||
| title="Western Area Power Administration Rocky Mountain Region " | ||
| formattedDate="November 9, 2022 at 8:00" | ||
| goBackPath="/" | ||
| labels={[ | ||
| <div | ||
| key="estimated" | ||
| className="w-18 rounded-full bg-yellow-400 px-2 text-center text-xs" | ||
| > | ||
| Estimated | ||
| </div>, | ||
| <div | ||
| key="estimated" | ||
| className="w-20 rounded-full bg-gray-400 px-2 text-center text-xs text-white" | ||
| > | ||
| Aggregated | ||
| </div>, | ||
| ]} | ||
| countryTag={<CountryTag zoneId={'US-NW-WACM'} />} | ||
| /> | ||
| <ZoneHeaderTitle | ||
| title="West Denmark" | ||
| formattedDate="November 9, 2022 at 8:00" | ||
| goBackPath="/" | ||
| labels={[ | ||
| <div | ||
| key="estimated" | ||
| className="w-18 rounded-full bg-yellow-400 px-2 text-center text-xs" | ||
| > | ||
| Estimated | ||
| </div>, | ||
| ]} | ||
| countryTag={<CountryTag zoneId={'DK-DK1'} />} | ||
| /> | ||
| <ZoneHeaderTitle | ||
| title="Spain " | ||
| formattedDate="November 9, 2022 at 8:00" | ||
| goBackPath="/" | ||
| countryTag={<CountryTag zoneId={'ES'} />} | ||
| /> | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 ( | ||
| <div className="flex flex-row pl-2"> | ||
| <Link className="mr-4 self-center text-3xl text-gray-400" to={goBackPath}> | ||
| {'❮'} | ||
| </Link> | ||
| <div> | ||
| <h2 className="text-md mb-1 text-base font-medium"> | ||
| <span>{title}</span> | ||
| <span> {countryTag}</span> | ||
| </h2> | ||
| <div className="flex flex-wrap items-center gap-1 text-center"> | ||
| {labels} | ||
| <p className="whitespace-nowrap text-xs">{formattedDate}</p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters