Update form

developmentseed · Jan 22, 2024 · faf63c2 · faf63c2
1 parent 1f820e0
commit faf63c2
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 13 deletions.
diff --git a/...pts/components/project/prime-panel/tabs/predict/mosaic-selector/sections/create-mosaic.js b/...pts/components/project/prime-panel/tabs/predict/mosaic-selector/sections/create-mosaic.js
@@ -5,7 +5,7 @@ import styled from 'styled-components';
 import { MapContainer, TileLayer } from 'react-leaflet';
 
 import { Heading } from '@devseed-ui/typography';
-import { formatTimestampToSimpleUTC } from '../../../../../../../utils/dates';
+import { formatTimestampToSimpleUTCDate } from '../../../../../../../utils/dates';
 import { ProjectMachineContext } from '../../../../../../../fsm/project';
 import selectors from '../../../../../../../fsm/project/selectors';
 import toasts from '../../../../../../common/toasts';
@@ -58,28 +58,29 @@ const CreateMosaicForm = ({ setNewMosaic, handleMosaicCreation }) => {
   return (
     <PanelWrapper>
       <Heading size='small' as='h4'>
-        Create a new mosaic
+        Custom mosaic filters
       </Heading>
+
       <div>
-        Selected date:{' '}
+        Start date:{' '}
         <input
           type='date'
           value={selectedDate}
           max={format(maxDate, 'yyyy-MM-dd')}
           onChange={handleDateChange}
         />
       </div>
-      <div>
-        Start timestamp:{' '}
-        {selectedTimeframe?.start
-          ? formatTimestampToSimpleUTC(selectedTimeframe.start)
-          : '-'}
-      </div>
       <div>
         End date:{' '}
-        {selectedTimeframe?.end
-          ? formatTimestampToSimpleUTC(selectedTimeframe.end)
-          : '-'}
+        <input
+          type='date'
+          value={
+            selectedTimeframe?.end
+              ? formatTimestampToSimpleUTCDate(selectedTimeframe.end)
+              : ''
+          }
+          disabled
+        />
       </div>
       <div>
         <button type='button' onClick={handleMosaicCreation}>
@@ -122,7 +123,7 @@ const MosaicPreviewMap = ({
 };
 
 MosaicPreviewMap.propTypes = {
-  mosaicTileUrl: PropTypes.object,
+  mosaicTileUrl: PropTypes.string,
   initialMapZoom: PropTypes.number,
   initialMapCenter: PropTypes.array,
 };

diff --git a/app/assets/scripts/utils/dates.js b/app/assets/scripts/utils/dates.js
@@ -8,3 +8,9 @@ export function formatTimestampToSimpleUTC(timestamp) {
   const timePart = isoString.split('T')[1].slice(0, 5);
   return `${datePart} ${timePart} UTC`;
 }
+
+export function formatTimestampToSimpleUTCDate(timestamp) {
+  const isoString = new Date(timestamp).toISOString();
+  const datePart = isoString.split('T')[0];
+  return `${datePart}`;
+}