This commit is contained in:
Paul Bienkowski 2021-02-14 19:27:16 +01:00
parent 7614a6dfc5
commit 5f6aaae087
7 changed files with 52 additions and 37 deletions

View file

@ -23,7 +23,10 @@ class API {
async post(url, {body: body_, ...options}) {
const body = typeof body_ !== 'string' ? JSON.stringify(body_) : body_
return await this.fetch(url, {...options, body, method: 'post',
return await this.fetch(url, {
...options,
body,
method: 'post',
headers: {
...(options.headers || {}),
'Content-Type': 'application/json',

View file

@ -6,18 +6,21 @@ import OlTileLayer from 'ol/layer/Tile'
import OlVectorLayer from 'ol/layer/Vector'
import OlGroupLayer from 'ol/layer/Group'
import OSM from 'ol/source/OSM'
import proj4 from 'proj4';
import {register} from 'ol/proj/proj4';
import proj4 from 'proj4'
import {register} from 'ol/proj/proj4'
import OlLayerSwitcher from 'ol-layerswitcher'
// Import styles for open layers + addons
import 'ol/ol.css'
import "ol-layerswitcher/dist/ol-layerswitcher.css";
import 'ol-layerswitcher/dist/ol-layerswitcher.css'
// Prepare projection
proj4.defs('projLayer1', '+proj=merc +a=6378137 +b=6378137 +lat_ts=0.0 +lon_0=0.0 +x_0=0.0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +wktext +no_defs');
register(proj4);
proj4.defs(
'projLayer1',
'+proj=merc +a=6378137 +b=6378137 +lat_ts=0.0 +lon_0=0.0 +x_0=0.0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +wktext +no_defs'
)
register(proj4)
const MapContext = React.createContext()
const MapLayerContext = React.createContext()

View file

@ -24,4 +24,3 @@ ReactDOM.render(
</Provider>,
document.getElementById('root')
)

View file

@ -40,13 +40,19 @@ export default function TrackComments({comments, onSubmit, onDelete, login, hide
<FormattedDate date={comment.createdAt} relative />
</div>
</Comment.Metadata>
<Comment.Text><Markdown>{comment.body}</Markdown></Comment.Text>
<Comment.Text>
<Markdown>{comment.body}</Markdown>
</Comment.Text>
{login?.username === comment.author.username && (
<Comment.Actions>
<Comment.Action onClick={(e) => {
<Comment.Action
onClick={(e) => {
onDelete(comment.id)
e.preventDefault()
}}>Delete</Comment.Action>
}}
>
Delete
</Comment.Action>
</Comment.Actions>
)}
</Comment.Content>

View file

@ -1,9 +1,9 @@
import React from 'react'
import {Vector as VectorSource} from 'ol/source';
import {Geometry, LineString, Point} from 'ol/geom';
import Feature from 'ol/Feature';
import {fromLonLat} from 'ol/proj';
import {Fill, Stroke, Style, Text, Circle} from 'ol/style';
import {Vector as VectorSource} from 'ol/source'
import {Geometry, LineString, Point} from 'ol/geom'
import Feature from 'ol/Feature'
import {fromLonLat} from 'ol/proj'
import {Fill, Stroke, Style, Text, Circle} from 'ol/style'
import {Map} from 'components'
import type {TrackData, TrackPoint} from 'types'
@ -24,7 +24,6 @@ const evaluateDistanceColor = function (distance) {
}
}
const evaluateDistanceForFillColor = function (distance) {
const redFill = new Fill({color: 'rgba(255, 0, 0, 0.2)'})
const orangeFill = new Fill({color: 'rgba(245,134,0,0.2)'})
@ -82,7 +81,6 @@ function pointStyleFunction(feature, resolution) {
})
}
function PointLayer({features, title, visible}) {
return <Map.VectorLayer {...{title, visible}} style={pointStyleFunction} source={new VectorSource({features})} />
}
@ -137,7 +135,6 @@ export default function TrackMap({trackData, ...props}: {trackData: TrackData})
return {trackVectorSource, trackPointsD1, trackPointsD2, trackPointsUntaggedD1, trackPointsUntaggedD2, viewExtent}
}, [trackData?.points])
const trackLayerStyle = React.useMemo(
() =>
new Style({
@ -172,8 +169,7 @@ export default function TrackMap({trackData, ...props}: {trackData: TrackData})
<Map.View maxZoom={22} zoom={15} center={fromLonLat([9.1797, 48.7784])} />
<Map.FitView extent={viewExtent} />
<Map.LayerSwitcher groupSelectStyle='children' startActive activationMode='click' reverse={false} />
<Map.LayerSwitcher groupSelectStyle="children" startActive activationMode="click" reverse={false} />
</Map>
)
}

View file

@ -50,7 +50,7 @@ const TrackPage = connect((state) => ({login: state.login}))(function TrackPage(
const comments$ = concat(of(null), reloadComments$).pipe(
switchMap(() => slug$),
map((slug) => `/tracks/${slug}/comments`),
switchMap(url => api.get(url)),
switchMap((url) => api.get(url)),
pluck('comments'),
startWith(null) // show track infos before comments are loaded
)
@ -65,7 +65,7 @@ const TrackPage = connect((state) => ({login: state.login}))(function TrackPage(
const onSubmitComment = React.useCallback(async ({body}) => {
await api.post(`/tracks/${slug}/comments`, {
body: {comment: {body}}
body: {comment: {body}},
})
reloadComments()
}, [])
@ -107,12 +107,20 @@ const TrackPage = connect((state) => ({login: state.login}))(function TrackPage(
</Grid.Row>
</Grid>
{track?.description && <Segment basic>
<Header as="h2" dividing>Description</Header>
{track?.description && (
<Segment basic>
<Header as="h2" dividing>
Description
</Header>
<Markdown>{track.description}</Markdown>
</Segment>}
</Segment>
)}
<TrackComments {...{hideLoader: loading, comments, login}} onSubmit={onSubmitComment} onDelete={onDeleteComment} />
<TrackComments
{...{hideLoader: loading, comments, login}}
onSubmit={onSubmitComment}
onDelete={onDeleteComment}
/>
{/* <pre>{JSON.stringify(data, null, 2)}</pre> */}
</Page>

View file

@ -53,7 +53,7 @@ function TrackList({privateFeed}: {privateFeed: boolean}) {
return {url, query}
}),
distinctUntilChanged(_.isEqual),
switchMap((request) => concat(of(null), from(api.get(request.url, {query: request.query})))),
switchMap((request) => concat(of(null), from(api.get(request.url, {query: request.query}))))
),
null,
[page, privateFeed]