From 45a9235e8247a91075b4a1e0173dde5ade02abe3 Mon Sep 17 00:00:00 2001 From: Steven Askwith Date: Wed, 29 May 2024 17:43:41 +0100 Subject: [PATCH 1/2] tweaked UX of old upload modal --- .../pages/model-management/components/carModelUploadModal.jsx | 3 +++ website/src/pages/timekeeper/timeKeeperWizard.jsx | 2 +- 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/website/src/pages/model-management/components/carModelUploadModal.jsx b/website/src/pages/model-management/components/carModelUploadModal.jsx index 7859d41b..49c996ca 100644 --- a/website/src/pages/model-management/components/carModelUploadModal.jsx +++ b/website/src/pages/model-management/components/carModelUploadModal.jsx @@ -194,6 +194,7 @@ const StatusModelContent = (props) => { { }} selectedItems={selectedCars} selectionType="single" + variant="embedded" // selectionType={modernToggleSelectionType} columnDefinitions={columnConfiguration.columnDefinitions} items={items} @@ -556,6 +558,7 @@ export const CarModelUploadModal = ({ modelsToUpload }) => { items={jobs} loadingText={t('carmodelupload.loading')} sortingDisabled + variant="embedded" empty={ {t('carmodelupload.please-wait')} diff --git a/website/src/pages/timekeeper/timeKeeperWizard.jsx b/website/src/pages/timekeeper/timeKeeperWizard.jsx index 48f40a03..bc5ffbca 100644 --- a/website/src/pages/timekeeper/timeKeeperWizard.jsx +++ b/website/src/pages/timekeeper/timeKeeperWizard.jsx @@ -82,7 +82,7 @@ export const TimekeeperWizard = () => { }, []); useEffect(() => { - dispatch('SIDE_NAV_IS_OPEN', true); + dispatch('SIDE_NAV_IS_OPEN', false); }, [dispatch]); // Find the fastest lap and fastest average window From 3583d0dce020c53012a74da2d653e65bd6422604 Mon Sep 17 00:00:00 2001 From: Steven Askwith Date: Wed, 29 May 2024 19:12:56 +0100 Subject: [PATCH 2/2] Delete Models on Car Modal --- .../timekeeper/components/modelSelector.jsx | 21 +++- .../src/pages/timekeeper/timeKeeperWizard.jsx | 105 ++++++++++++++---- 2 files changed, 106 insertions(+), 20 deletions(-) diff --git a/website/src/pages/timekeeper/components/modelSelector.jsx b/website/src/pages/timekeeper/components/modelSelector.jsx index f5439f87..5e08e13c 100644 --- a/website/src/pages/timekeeper/components/modelSelector.jsx +++ b/website/src/pages/timekeeper/components/modelSelector.jsx @@ -1,3 +1,4 @@ +import { Box, SpaceBetween, Toggle } from '@cloudscape-design/components'; import React, { useState } from 'react'; import { useTranslation } from 'react-i18next'; import { PageTable } from '../../../components/pageTable'; @@ -11,7 +12,9 @@ import { useStore } from '../../../store/store'; export const ModelSelector = ({ query = { tokens: [], operation: 'and' }, selectedModels, - setSelectedModels + setSelectedModels, + clearModelsOnCarToggle, + setClearModelsOnCarToggle }) => { const { t } = useTranslation([ 'translation', @@ -33,6 +36,21 @@ export const ModelSelector = ({ /> ); + let tabeleFooterContent = ( + + + { + setClearModelsOnCarToggle(detail.checked); + }} + checked={clearModelsOnCarToggle} + > + {t('carmodelupload.clear')} + + + + ); + const content = ( !['AVAILABLE', 'OPTIMIZED'].includes(item.status)} loadingText={t('models.loading-models')} diff --git a/website/src/pages/timekeeper/timeKeeperWizard.jsx b/website/src/pages/timekeeper/timeKeeperWizard.jsx index bc5ffbca..40b72bc5 100644 --- a/website/src/pages/timekeeper/timeKeeperWizard.jsx +++ b/website/src/pages/timekeeper/timeKeeperWizard.jsx @@ -1,10 +1,18 @@ import { + Box, + Button, Form, + Modal, + SpaceBetween, Wizard } from '@cloudscape-design/components'; +import { API } from 'aws-amplify'; import React, { useEffect, useState } from 'react'; import { useTranslation } from 'react-i18next'; +import * as mutations from '../../graphql/mutations'; import { useLocalStorage } from '../../hooks/useLocalStorage'; +// import * as queries from '../../graphql/queries'; +// import * as subscriptions from '../../graphql/subscriptions' import useMutation from '../../hooks/useMutation'; import { useSelectedEventContext, @@ -22,8 +30,8 @@ import { defaultRace } from './support-functions/raceDomain'; export const TimekeeperWizard = () => { const { t } = useTranslation(); - const [activeStepIndex, setActiveStepIndex] = useLocalStorage('DREM-timekeeper-state', 0); - const [previousStepIndex, setPreviousStepIndex] = useLocalStorage('DREM-timekeeper-state', 0); + const [activeStepIndex, setActiveStepIndex] = useLocalStorage('DREM-timekeeper-activeStepIndex', 0); + const [previousStepIndex, setPreviousStepIndex] = useLocalStorage('DREM-timekeeper-previousStepIndex', 0); const [raceConfig, setRaceConfig] = useLocalStorage('DREM-timekeeper-race-config', {}); const [race, setRace] = useLocalStorage('DREM-timekeeper-current-race', defaultRace); const [fastestLap, SetFastestLap] = useState([]); @@ -32,13 +40,25 @@ export const TimekeeperWizard = () => { const selectedTrack = useSelectedTrackContext(); const [eventSelectModalVisible, setEventSelectModalVisible] = useState(false); const [selectedModels, setSelectedModels] = useState([]); + const [clearModelsOnCarToggle, setClearModelsOnCarToggle] = useLocalStorage('DREM-timekeeper-clearModelsOnCarToggle', true); const [selectedCars, setSelectedCars] = useState([]); const [errorText, setErrorText] = useState(''); const [isLoadingNextStep, setIsLoadingNextStep] = useState(false); const [sendMutation, loading, errorMessage, data] = useMutation(); + const [isModalOpen, setIsModalOpen] = useState(false); const messageDisplayTime = 4000; const notificationId = ''; + // delete models from Cars + async function carDeleteAllModels() { + const InstanceIds = selectedCars.map((i) => i.InstanceId); + + const response = await API.graphql({ + query: mutations.carDeleteAllModels, + variables: { resourceIds: InstanceIds }, + }); + } + // check if active index is timekeeper and set isLoading to true if it is useEffect(() => { if (activeStepIndex === 4) { @@ -77,6 +97,7 @@ export const TimekeeperWizard = () => { setRaceConfig({}); setPreviousStepIndex(0); setActiveStepIndex(0); + setIsModalOpen(false); setRace(defaultRace); }; }, []); @@ -151,10 +172,12 @@ export const TimekeeperWizard = () => { setRaceConfig({}); SetFastestLap([]); setFastestAverageLap([]); - setErrorText(t("")); + setErrorText(""); setPreviousStepIndex(0); setActiveStepIndex(0); + setIsModalOpen(false); + setIsLoadingNextStep(false); }; async function handleOnNavigate(detail) { @@ -162,21 +185,24 @@ export const TimekeeperWizard = () => { if (activeStepIndex === 0 && race.username === null) { // console.log("race", race); setErrorText(t("timekeeper.wizard.select-racer-error")); - } else if (activeStepIndex === 1 && selectedModels.length === 0 && detail.reason === "next") { - setErrorText(t("timekeeper.wizard.no-models-selected-error")); - } else if (activeStepIndex === 2 && selectedCars.length === 0 && detail.reason === "next") { + } else if (activeStepIndex === 1 && selectedCars.length === 0 && detail.reason === "next") { setErrorText(t("timekeeper.wizard.no-car-selected-error")); - } else if (detail.reason === "previous") { + } else if (activeStepIndex === 2 && selectedModels.length === 0 && detail.reason === "next") { + setErrorText(t("timekeeper.wizard.no-models-selected-error")); + } else if (activeStepIndex === 2 && selectedModels.length > 0 && detail.reason === "next" && clearModelsOnCarToggle) { + setIsModalOpen(true); + } + else if (detail.reason === "previous") { console.log("previous"); setIsLoadingNextStep(false) setPreviousStepIndex(previousStepIndex - 1) setActiveStepIndex(previousStepIndex) - setErrorText(t("")); + setErrorText(""); } else { setIsLoadingNextStep(false) setPreviousStepIndex(activeStepIndex); setActiveStepIndex(detail.requestedStepIndex) - setErrorText(t("")); + setErrorText(""); } } @@ -231,6 +257,45 @@ export const TimekeeperWizard = () => { // const pageToDisplay = stateMachine(activeStepIndex); // JSX return <> + { + setIsModalOpen(false); + }} + visible={isModalOpen} + closeAriaLabel={t('carmodelupload.close-modal-ari-label')} + footer={ + + + + + + + } + header={t('carmodelupload.header-delete')} + > + {t('carmodelupload.header-delete-confirm')}:

{' '} + {selectedCars.map((selectedCars) => { + return selectedCars.ComputerName + ' '; + })} +
{ isOptional: false, }, { - title: t("timekeeper.wizard.select-models"), + title: t("timekeeper.wizard.select-car"), content: ( - + selectedCars={selectedCars} setSelectedCars={setSelectedCars}/> ), isOptional: true, }, { - title: t("timekeeper.wizard.select-car"), + title: t("timekeeper.wizard.select-models"), content: ( - + selectedModels={selectedModels} + setSelectedModels={setSelectedModels} + clearModelsOnCarToggle={clearModelsOnCarToggle} + setClearModelsOnCarToggle={setClearModelsOnCarToggle} + /> ), isOptional: true, },