-
Notifications
You must be signed in to change notification settings - Fork 8
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #104 from soaringmeteo/no-popups
Don’t show the location details in a popup
- Loading branch information
Showing
21 changed files
with
482 additions
and
411 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
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,24 @@ | ||
| import {LocationForecasts} from "./data/LocationForecasts"; | ||
|
|
||
| export type DetailedView = Meteogram | Sounding | Summary | ||
| export type DetailedViewType = 'meteogram' | 'sounding' | 'summary' | ||
|
|
||
| export type Meteogram = { | ||
| viewType: 'meteogram' | ||
| locationForecasts: LocationForecasts | ||
| latitude: number | ||
| longitude: number | ||
| } | ||
|
|
||
| export type Sounding = { | ||
| viewType: 'sounding' | ||
| locationForecasts: LocationForecasts | ||
| latitude: number | ||
| longitude: number | ||
| } | ||
|
|
||
| type Summary = { | ||
| viewType: 'summary' | ||
| latitude: number | ||
| longitude: number | ||
| } |
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 |
|---|---|---|
| @@ -1,109 +1,20 @@ | ||
| import {Domain} from "./State"; | ||
| import {Accessor, createEffect, createResource, JSX, Show} from "solid-js"; | ||
| import {toLonLat} from "ol/proj"; | ||
| import {surfaceOverMap} from "./styles/Styles"; | ||
| import {showCoordinates, showDate} from "./shared"; | ||
| import {MapBrowserEvent} from "ol"; | ||
| import {JSX} from "solid-js"; | ||
|
|
||
| export const LayerKeys = (props: { | ||
| domain: Domain | ||
| popupRequest: Accessor<undefined | MapBrowserEvent<any>> | ||
| openLocationDetailsPopup: (latitude: number, longitude: number, content: HTMLElement) => void | ||
| closeLocationDetailsPopup: () => void | ||
| }): JSX.Element => { | ||
| const primaryLayerComponents = () => props.domain.primaryLayerReactiveComponents(); | ||
| const windLayerComponents = () => props.domain.windLayerReactiveComponents(); | ||
|
|
||
| const layerKeyEl = | ||
| <div style={{ | ||
| return <div style={{ | ||
| position: 'absolute', | ||
| bottom: '40px', | ||
| left: '5px', | ||
| 'background-color': 'rgba(255, 255, 255, 0.5', | ||
| 'font-size': '11px', | ||
| 'padding': '5px', | ||
| 'text-align': 'center' | ||
| bottom: '3rem', | ||
| right: '.5rem', | ||
| 'background-color': 'rgba(255, 255, 255, 0.5', | ||
| 'font-size': '11px', | ||
| 'padding': '5px', | ||
| 'text-align': 'center' | ||
| }}> | ||
| {primaryLayerComponents().mapKey} | ||
| </div>; | ||
|
|
||
| // Show a popup with a summary when the user clicks on the map (TODO move to another file) | ||
| createEffect(() => { | ||
| const event = props.popupRequest(); | ||
| if (event === undefined) { | ||
| return | ||
| } | ||
|
|
||
| const state = props.domain.state; | ||
| const [eventLng, eventLat] = toLonLat(event.coordinate); | ||
| const maybePoint = | ||
| state.forecastMetadata.closestPoint(state.zone, eventLng, eventLat); | ||
| if (maybePoint === undefined) { | ||
| return | ||
| } | ||
|
|
||
| const [longitude, latitude] = | ||
| state.forecastMetadata.toLonLat(state.zone, maybePoint); | ||
|
|
||
| const summaryPromise = | ||
| state.windLayerEnabled ? | ||
| Promise.all([ | ||
| primaryLayerComponents().summarizer().summary(latitude, longitude), | ||
| windLayerComponents().summarizer().summary(latitude, longitude) | ||
| ]) | ||
| .then(([primarySummary, windSummary]) => primarySummary?.concat(windSummary || [])) : | ||
| primaryLayerComponents().summarizer().summary(latitude, longitude); | ||
| const [summaryResource] = | ||
| createResource(() => summaryPromise.then(summary => | ||
| summary !== undefined && summary.length !== 0 ? summary : undefined | ||
| )); | ||
| const content = | ||
| <div style={{ ...surfaceOverMap, background: 'white', padding: '.7em', 'font-size': '0.8125rem', 'text-align': 'left', 'border-radius': '5px' }}> | ||
| <span | ||
| style={{ position: 'absolute', top: '2px', right: '8px', cursor: 'pointer', 'font-weight': 'bold' }} | ||
| onClick={ () => props.closeLocationDetailsPopup() } | ||
| title="Close" | ||
| > | ||
| × | ||
| </span> | ||
| <div>Grid point: { showCoordinates(longitude, latitude, props.domain.state.model) }</div> | ||
| <div>Forecast for {showDate(state.forecastMetadata.dateAtHourOffset(state.hourOffset), { showWeekDay: true, timeZone: props.domain.timeZone() })}</div> | ||
| <Show when={ summaryResource() }> | ||
| { summary => table(summary) } | ||
| </Show> | ||
| <div style={{ display: 'flex', 'align-items': 'center', 'justify-content': 'space-around' }}> | ||
| <button | ||
| onClick={ () => props.domain.showLocationForecast(eventLat, eventLng, 'meteogram') } | ||
| title="Meteogram for this location" | ||
| > | ||
| Meteogram | ||
| </button> | ||
| <button | ||
| onClick={ () => props.domain.showLocationForecast(eventLat, eventLng, 'sounding') } | ||
| title="Sounding for this time and location" | ||
| > | ||
| Sounding | ||
| </button> | ||
| </div> | ||
| </div> as HTMLElement; | ||
| props.openLocationDetailsPopup(latitude, longitude, content); | ||
| }); | ||
|
|
||
| return layerKeyEl | ||
| }; | ||
|
|
||
| const table = (data: Array<[string, JSX.Element]>): JSX.Element => { | ||
| const rows = | ||
| data.map(([label, value]) => { | ||
| return <tr><th>{label}:</th><td>{value}</td></tr> | ||
| }); | ||
| if (rows.length === 0) { | ||
| return <div></div> | ||
| } else { | ||
| return <table> | ||
| <tbody> | ||
| { rows } | ||
| </tbody> | ||
| </table>; | ||
| } | ||
| </div> | ||
| }; |
Oops, something went wrong.