Merge pull request #1240 from opentripplanner/connected-toggle-checkb…

…oxes Create Global Trip settings and variables
opentripplanner · Jul 3, 2024 · 69d70c6 · 69d70c6
2 parents 13edd96 + 077876d
commit 69d70c6
Show file tree

Hide file tree

Showing 2 changed files with 121 additions and 27 deletions.
diff --git a/lib/components/form/advanced-settings-panel.tsx b/lib/components/form/advanced-settings-panel.tsx
@@ -1,17 +1,13 @@
-import * as apiActions from '../../actions/api'
-import * as formActions from '../../actions/form'
 import {
   addSettingsToButton,
   AdvancedModeSubsettingsContainer,
+  ModeSettingRenderer,
   populateSettingWithValue
 } from '@opentripplanner/trip-form'
-import { AppReduxState } from '../../util/state-types'
-import { blue, getBaseColor } from '../util/colors'
 
+import { blue, getBaseColor } from '../util/colors'
 import { Close } from '@styled-icons/fa-solid'
 
-import { ComponentContext } from '../../util/contexts'
-
 import { connect } from 'react-redux'
 import { decodeQueryParams, DelimitedArrayParam } from 'serialize-query-params'
 import { FormattedMessage, useIntl } from 'react-intl'
@@ -24,9 +20,14 @@ import {
   ModeSettingValues
 } from '@opentripplanner/types'
 
+import * as apiActions from '../../actions/api'
+import * as formActions from '../../actions/form'
+import { AppReduxState } from '../../util/state-types'
+import { ComponentContext } from '../../util/contexts'
 import PageTitle from '../util/page-title'
 
 import React, { RefObject, useContext } from 'react'
+import styled from 'styled-components'
 
 import {
   addCustomSettingLabels,
@@ -36,9 +37,11 @@ import {
   populateSettingWithIcon,
   setModeButton
 } from './util'
-import { setModeButtonEnabled } from './batch-settings'
 
-import styled from 'styled-components'
+import { invisibleCss } from '@opentripplanner/trip-form/lib/MetroModeSelector'
+
+import { setModeButtonEnabled } from './batch-settings'
+import { styledCheckboxCss } from './styled'
 
 const PanelOverlay = styled.div`
   background-color: #fff;
@@ -52,6 +55,15 @@ const PanelOverlay = styled.div`
   overflow-y: scroll;
 `
 
+const GlobalSettingsContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin-bottom: 2em;
+
+  ${styledCheckboxCss}
+`
+
 const CloseButton = styled.button`
   background: transparent;
   border: none;
@@ -61,13 +73,11 @@ const HeaderContainer = styled.div`
   align-items: center;
   display: flex;
   justify-content: space-between;
+  margin-bottom: 2em;
 `
 
 const Subheader = styled.h2`
-  display: block;
-  font-size: 18px;
-  font-weight: 700;
-  margin: 1em 0;
+  ${invisibleCss}
 `
 const baseColor = getBaseColor()
 const accentColor = baseColor || blue[900]
@@ -100,14 +110,29 @@ const AdvancedSettingsPanel = ({
   // @ts-expect-error Context not typed
   const { ModeIcon } = useContext(ComponentContext)
 
-  const processedModeSettings = modeSettingDefinitions.map(
-    pipe(
-      populateSettingWithIcon(ModeIcon),
-      populateSettingWithValue(modeSettingValues),
-      addCustomSettingLabels(intl)
+  const processSettings = (settings: ModeSetting[]) =>
+    settings.map(
+      pipe(
+        populateSettingWithIcon(ModeIcon),
+        populateSettingWithValue(modeSettingValues),
+        addCustomSettingLabels(intl)
+      )
+    )
+
+  const globalSettings = modeSettingDefinitions.filter((x) => !x.applicableMode)
+  const processedGlobalSettings = processSettings(globalSettings)
+
+  const globalSettingsComponents = processedGlobalSettings.map(
+    (setting: ModeSetting) => (
+      <ModeSettingRenderer
+        key={setting.key}
+        onChange={onSettingsUpdate(setQueryParam)}
+        setting={setting}
+      />
     )
   )
 
+  const processedModeSettings = processSettings(modeSettingDefinitions)
   const processedModeButtons = modeButtonOptions.map(
     pipe(
       addModeButtonIcon(ModeIcon),
@@ -132,18 +157,19 @@ const AdvancedSettingsPanel = ({
       {/**
        * Date time selector goes here
        */}
-      <Subheader>
-        <FormattedMessage id="components.BatchSearchScreen.tripOptions" />
-      </Subheader>
-      {/**
-       * Trip options (walk speed, walk reluctance, accessible routing) go here
-       */}
+      {processedGlobalSettings.length > 0 && (
+        <>
+          <Subheader>
+            <FormattedMessage id="components.BatchSearchScreen.tripOptions" />
+          </Subheader>
+          <GlobalSettingsContainer>
+            {globalSettingsComponents}
+          </GlobalSettingsContainer>
+        </>
+      )}
       <Subheader>
         <FormattedMessage id="components.BatchSearchScreen.modeOptions" />
       </Subheader>
-      {/**
-       * AdvancedModeSubsettingsContainer (import from Otp-ui) goes here
-       */}
       <AdvancedModeSubsettingsContainer
         accentColor={accentColor}
         fillModeIcons

diff --git a/lib/components/form/styled.ts b/lib/components/form/styled.ts
@@ -1,4 +1,4 @@
-import { blue, grey } from '../util/colors'
+import { blue, getBaseColor, grey } from '../util/colors'
 import {
   DateTimeSelector,
   SettingsSelectorPanel,
@@ -235,6 +235,7 @@ export const StyledLocationField = styled(LocationField)`
 export const advancedPanelClassName = 'advanced-panel'
 export const mainPanelClassName = 'main-panel'
 export const transitionDuration = prefersReducedMotion ? 0 : 175
+const baseColor = getBaseColor()
 
 const wipeOffset = 7
 
@@ -287,3 +288,70 @@ export const TransitionStyles = styled.div`
     ${transitionMixin}
   }
 `
+
+const toggleTransition = css`
+  transition: all 150ms ease-in;
+`
+
+export const styledCheckboxCss = css`
+  & > div {
+    width: 100%;
+    margin-left: 0;
+  }
+  input[type='checkbox'] + label {
+    align-items: center;
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+    width: 100%;
+
+    &::after {
+      content: '';
+      position: relative;
+      width: 33px;
+      height: 22px;
+      background-color: ${grey[600]};
+      border-radius: 20px;
+      ${toggleTransition};
+      cursor: pointer;
+    }
+
+    &::before {
+      content: '';
+      position: absolute;
+      width: 18px;
+      height: 18px;
+      background-color: white;
+      border-radius: 100%;
+      right: 13px;
+      z-index: 99;
+      ${toggleTransition};
+      cursor: pointer;
+    }
+  }
+
+  input[type='checkbox'] {
+    clip: rect(0, 0, 0, 0);
+    height: 0;
+    overflow: hidden;
+    position: absolute;
+    width: 0;
+
+    &:checked + label {
+      &::after {
+        background-color: ${baseColor || blue[700]};
+        ${toggleTransition};
+      }
+
+      &::before {
+        right: 2px;
+        ${toggleTransition};
+        box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px;
+      }
+    }
+
+    &:focus-visible + label {
+      outline: 1px solid blue;
+    }
+  }
+`