From 38ed2f1bf9ccb12d6139113e01154f27d143ccba Mon Sep 17 00:00:00 2001 From: Todd Burnside Date: Thu, 1 Aug 2024 10:10:23 -0400 Subject: [PATCH 1/2] add Now button to obs time --- .../explore/components/ui/ExploreStyles.scala | 1 + common/src/main/webapp/sass/explore.scss | 16 +++++ .../scala/explore/config/ObsTimeEditor.scala | 62 +++++++++++++++++++ .../scala/explore/config/VizTimeEditor.scala | 51 --------------- .../explore/tabs/AsterismEditorTile.scala | 4 +- .../explore/targeteditor/AsterismEditor.scala | 4 +- 6 files changed, 83 insertions(+), 55 deletions(-) create mode 100644 explore/src/main/scala/explore/config/ObsTimeEditor.scala delete mode 100644 explore/src/main/scala/explore/config/VizTimeEditor.scala diff --git a/common/src/main/scala/explore/components/ui/ExploreStyles.scala b/common/src/main/scala/explore/components/ui/ExploreStyles.scala index bfc748cf54..e262919a71 100644 --- a/common/src/main/scala/explore/components/ui/ExploreStyles.scala +++ b/common/src/main/scala/explore/components/ui/ExploreStyles.scala @@ -331,6 +331,7 @@ object ExploreStyles: val PAConfigurationAngle: Css = Css("explore-pa-configuration-angle") val AveragePA: Css = Css("explore-average-pa") val ObsInstantTileTitle: Css = Css("explore-obs-instant-tile-title") + val DatePickerWithNowButton: Css = Css("explore-datepicker-with-now-button") val ConfigurationGrid: Css = Css("explore-configuration-grid") val BasicConfigurationGrid: Css = Css("explore-basic-configuration-grid") val BasicConfigurationForm: Css = Css("explore-basic-configuration-form") diff --git a/common/src/main/webapp/sass/explore.scss b/common/src/main/webapp/sass/explore.scss index f692bea22b..2b2b13307e 100644 --- a/common/src/main/webapp/sass/explore.scss +++ b/common/src/main/webapp/sass/explore.scss @@ -799,6 +799,22 @@ thead tr th.sticky-header { } } +.explore-datepicker-with-now-button { + .react-datepicker__children-container { + position: absolute; + bottom: 0; + text-align: right; + pointer-events: none; // Let clicks pass through to the time selector. + + .p-button { + padding-top: 5px; + padding-bottom: 6px; + margin-bottom: 3px; + pointer-events: all; // Capture clicks again. + } + } +} + .explore-obs-instant-tile-title { @include small-tile-title; @include react-datepicker-input; diff --git a/explore/src/main/scala/explore/config/ObsTimeEditor.scala b/explore/src/main/scala/explore/config/ObsTimeEditor.scala new file mode 100644 index 0000000000..b211422eea --- /dev/null +++ b/explore/src/main/scala/explore/config/ObsTimeEditor.scala @@ -0,0 +1,62 @@ +// Copyright (c) 2016-2023 Association of Universities for Research in Astronomy, Inc. (AURA) +// For license information see LICENSE or https://opensource.org/licenses/BSD-3-Clause + +package explore.config + +import cats.syntax.all.* +import crystal.react.View +import explore.components.HelpIcon +import explore.components.ui.ExploreStyles +import explore.utils.* +import japgolly.scalajs.react.* +import japgolly.scalajs.react.vdom.html_<^.* +import lucuma.react.common.ReactFnProps +import lucuma.react.datepicker.* +import lucuma.react.primereact.Button +import lucuma.refined.* +import lucuma.typed.reactDatepicker.mod.ReactDatePicker +import lucuma.ui.syntax.all.given + +import java.time.Instant + +import scalajs.js + +case class ObsTimeEditor(vizTimeView: View[Option[Instant]]) + extends ReactFnProps(ObsTimeEditor.component) + +object ObsTimeEditor { + private type Props = ObsTimeEditor + + private val component = + ScalaFnComponent + .withHooks[Props] + .useRef[Option[ReactDatePicker[Any, Any]]](none) + // .useRefToJsComponentWithMountedFacade[js.Object, js.Object, js.Object] + .render: (props, ref) => + <.div(ExploreStyles.ObsInstantTileTitle)( + React.Fragment( + <.label( + dataAbbrv := "Time", + <.span("Observation time"), + HelpIcon("configuration/obstime.md".refined) + ), + Datepicker(onChange = + (newValue, _) => + newValue.fromDatePickerToInstantOpt.foldMap { i => + props.vizTimeView.set(i.some) + } + ) + .calendarClassName(ExploreStyles.DatePickerWithNowButton.htmlClass) + .showTimeInput(true) + .selected(props.vizTimeView.get.getOrElse(Instant.now).toDatePickerJsDate) + .dateFormat("yyyy-MM-dd HH:mm")( + Button(onClick = + props.vizTimeView.set(Instant.now.some) >> + ref.value.map(r => Callback(r.setOpen(false))).orEmpty + )("Now") + ) + .withRef(r => ref.set(r.some).runNow()), + <.label("UTC") + ) + ) +} diff --git a/explore/src/main/scala/explore/config/VizTimeEditor.scala b/explore/src/main/scala/explore/config/VizTimeEditor.scala deleted file mode 100644 index ccee53c4ea..0000000000 --- a/explore/src/main/scala/explore/config/VizTimeEditor.scala +++ /dev/null @@ -1,51 +0,0 @@ -// Copyright (c) 2016-2023 Association of Universities for Research in Astronomy, Inc. (AURA) -// For license information see LICENSE or https://opensource.org/licenses/BSD-3-Clause - -package explore.config - -import cats.syntax.all.* -import crystal.react.View -import explore.components.HelpIcon -import explore.components.ui.ExploreStyles -import explore.utils.* -import japgolly.scalajs.react.* -import japgolly.scalajs.react.vdom.html_<^.* -import lucuma.react.common.ReactFnProps -import lucuma.react.datepicker.* -import lucuma.refined.* -import lucuma.ui.syntax.all.given - -import java.time.Instant - -import scalajs.js - -case class VizTimeEditor(vizTimeView: View[Option[Instant]]) - extends ReactFnProps(VizTimeEditor.component) - -object VizTimeEditor { - private type Props = VizTimeEditor - - private val component = - ScalaFnComponent[Props] { props => - <.div(ExploreStyles.ObsInstantTileTitle)( - React.Fragment( - <.label( - dataAbbrv := "Time", - <.span("Observation time"), - HelpIcon("configuration/obstime.md".refined) - ), - Datepicker(onChange = - (newValue, _) => - newValue.fromDatePickerToInstantOpt.foldMap { i => - props.vizTimeView.set(i.some) - } - ) - .showTimeInput(true) - .selected(props.vizTimeView.get.getOrElse(Instant.now).toDatePickerJsDate) - .dateFormat("yyyy-MM-dd HH:mm"), - <.label("UTC") - ) - ) - } - -} diff --git a/explore/src/main/scala/explore/tabs/AsterismEditorTile.scala b/explore/src/main/scala/explore/tabs/AsterismEditorTile.scala index cecf7fe1b3..3c501a0375 100644 --- a/explore/src/main/scala/explore/tabs/AsterismEditorTile.scala +++ b/explore/src/main/scala/explore/tabs/AsterismEditorTile.scala @@ -10,7 +10,7 @@ import crystal.* import crystal.react.* import explore.components.Tile import explore.components.ui.ExploreStyles -import explore.config.VizTimeEditor +import explore.config.ObsTimeEditor import explore.model.AsterismIds import explore.model.GlobalPreferences import explore.model.ObsConfiguration @@ -63,7 +63,7 @@ object AsterismEditorTile: vizTime.withOnMod(t => ObsQueries.updateVisualizationTime[IO](obsIds.toList, t).runAsync) val control: VdomNode = - <.div(ExploreStyles.JustifiedEndTileControl, VizTimeEditor(vizTimeView)) + <.div(ExploreStyles.JustifiedEndTileControl, ObsTimeEditor(vizTimeView)) Tile( ObsTabTilesIds.TargetId.id, diff --git a/explore/src/main/scala/explore/targeteditor/AsterismEditor.scala b/explore/src/main/scala/explore/targeteditor/AsterismEditor.scala index e8d46d7521..653e65b38d 100644 --- a/explore/src/main/scala/explore/targeteditor/AsterismEditor.scala +++ b/explore/src/main/scala/explore/targeteditor/AsterismEditor.scala @@ -9,7 +9,7 @@ import crystal.react.* import crystal.react.hooks.* import explore.components.Tile import explore.components.ui.ExploreStyles -import explore.config.VizTimeEditor +import explore.config.ObsTimeEditor import explore.model.AladinFullScreen import explore.model.AppContext import explore.model.Asterism @@ -114,7 +114,7 @@ object AsterismEditor extends AsterismModifier: ExploreStyles.AddTargetButton ) ), - props.renderInTitle(VizTimeEditor(vizTimeView)), + props.renderInTitle(ObsTimeEditor(vizTimeView)), TargetTable( props.userId.some, props.programId, From 2f99e555d8d841de92b10bceaa4998e1cd4751e8 Mon Sep 17 00:00:00 2001 From: Todd Burnside Date: Thu, 1 Aug 2024 10:35:48 -0400 Subject: [PATCH 2/2] address pr comments --- common/src/main/webapp/sass/explore.scss | 1 + explore/src/main/scala/explore/config/ObsTimeEditor.scala | 4 +--- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/common/src/main/webapp/sass/explore.scss b/common/src/main/webapp/sass/explore.scss index 2b2b13307e..acf904b2f8 100644 --- a/common/src/main/webapp/sass/explore.scss +++ b/common/src/main/webapp/sass/explore.scss @@ -800,6 +800,7 @@ thead tr th.sticky-header { } .explore-datepicker-with-now-button { + /* stylelint-disable-next-line selector-class-pattern */ .react-datepicker__children-container { position: absolute; bottom: 0; diff --git a/explore/src/main/scala/explore/config/ObsTimeEditor.scala b/explore/src/main/scala/explore/config/ObsTimeEditor.scala index b211422eea..002824f8ca 100644 --- a/explore/src/main/scala/explore/config/ObsTimeEditor.scala +++ b/explore/src/main/scala/explore/config/ObsTimeEditor.scala @@ -31,7 +31,6 @@ object ObsTimeEditor { ScalaFnComponent .withHooks[Props] .useRef[Option[ReactDatePicker[Any, Any]]](none) - // .useRefToJsComponentWithMountedFacade[js.Object, js.Object, js.Object] .render: (props, ref) => <.div(ExploreStyles.ObsInstantTileTitle)( React.Fragment( @@ -42,9 +41,8 @@ object ObsTimeEditor { ), Datepicker(onChange = (newValue, _) => - newValue.fromDatePickerToInstantOpt.foldMap { i => + newValue.fromDatePickerToInstantOpt.foldMap: i => props.vizTimeView.set(i.some) - } ) .calendarClassName(ExploreStyles.DatePickerWithNowButton.htmlClass) .showTimeInput(true)