diff --git a/package.json b/package.json index 0cc3fb837..894cf2952 100644 --- a/package.json +++ b/package.json @@ -37,6 +37,7 @@ "@sentry/node": "^6.5.1", "accept-language-parser": "^1.5.0", "autosuggest-highlight": "^3.1.1", + "date-fns": "^3.6.0", "isomorphic-unfetch": "^3.1.0", "isomorphic-xml2js": "^0.1.3", "jest": "^27.0.4", diff --git a/src/components/FeaturePanel/Climbing/RouteList/MyTicks.tsx b/src/components/FeaturePanel/Climbing/RouteList/MyTicks.tsx index 6fc7d9db9..467f5395d 100644 --- a/src/components/FeaturePanel/Climbing/RouteList/MyTicks.tsx +++ b/src/components/FeaturePanel/Climbing/RouteList/MyTicks.tsx @@ -1,8 +1,14 @@ import React from 'react'; import styled from 'styled-components'; import DeleteIcon from '@material-ui/icons/Delete'; -import { Button } from '@material-ui/core'; -import { findTicks, onTickDelete } from '../../../../services/ticks'; +import { Button, FormControl, MenuItem, Select } from '@material-ui/core'; +import { format } from 'date-fns'; +import { + findTicks, + onTickDelete, + onTickUpdate, + tickStyles, +} from '../../../../services/ticks'; import { PanelLabel } from '../PanelLabel'; const Container = styled.div` @@ -10,29 +16,59 @@ const Container = styled.div` `; const Item = styled.div` font-size: 12px; + display: flex; + gap: 8px; + align-items: center; `; +const Date = styled.div``; export const MyTicks = ({ osmId }) => { const ticks = findTicks(osmId); if (ticks.length === 0) return null; - const deleteAscent = (index) => { + const deleteTick = (index) => { onTickDelete({ osmId, index }); }; + const onTickStyleChange = (event, index) => { + // @TODO tickId vs osmId + onTickUpdate({ + osmId, + index, + updatedObject: { style: event.target.value }, + }); + }; + return ( Ticks: - {ticks.map((ascent, index) => ( - - {ascent.date} -