Skip to content
Snippets Groups Projects
Commit 2055b7e2 authored by Fanna Lautenbach's avatar Fanna Lautenbach
Browse files

finish DateTimeNavigation component with tests and add related constants + fix layouts

parent 2305aa1c
No related branches found
No related tags found
1 merge request!1153New Week View
Hide whitespace changes
Inline Side-by-side
Showing
with 140 additions and 127 deletions
SAS/TMSS/frontend/tmss_webapp/src/layout/sass/_timeline.scss
+ 3
− 0
View file @ 2055b7e2
......@@ -142,6 +142,9 @@
.week-changer {
margin-top: 0.25rem;
width: 90%;
display: flex;
justify-content: space-between;
label {
padding: 0 0.25rem;
......
SAS/TMSS/frontend/tmss_webapp/src/routes/Timeline/components/toolbar/DateTimeInfo.js
+ 0
− 2
View file @ 2055b7e2
......@@ -20,7 +20,6 @@ export default function DateTimeInfo() {
useEffect(() => { // initializer
if (!currentUTC) {
async function fetchUTC() {
console.log("fetching utc")
let utc = await UtilService.getUTC()
setCurrentUTC(moment(utc))
}
......@@ -31,7 +30,6 @@ export default function DateTimeInfo() {
useEffect(() => { //get LST after current utc is retrieved
async function fetchLST(currentUTC) {
console.log("fetching lst")
let lst = await UtilService.getLST(currentUTC.format(UIConstants.UTC_DATE_TIME_FORMAT))
const hoursMinutesSeconds = lst.split(".")[0].split(":").map(stringTimeElement => parseInt(stringTimeElement))
setCurrentLST(moment().set({
......
SAS/TMSS/frontend/tmss_webapp/src/routes/Timeline/components/toolbar/DateTimeNavigator.js
+ 53
− 125
View file @ 2055b7e2
import {Checkbox} from "primereact/checkbox";
import Flatpickr from "react-flatpickr";
import {Button} from "primereact/button";
import {Dropdown} from "primereact/dropdown";
import React, {useState} from "react";
import React from "react";
import DateTimeInfo from "./DateTimeInfo";
function getMoveWithTimeCheckbox(allowLive, isLive, setIsLive) { //TODO: make sure it updates the timeline
if (!allowLive || !setIsLive) {
return null
}
return <div className="p-col-1 timeline-filters" style={{paddingTop: "5px"}}>
<Checkbox checked={isLive} onChange={(e) => setIsLive(e.checked)}
title="Move the timeline every 5 seconds a little to the right" style={{paddingRight: "3px"}}/>
<label style={{marginBottom: "0px"}}>Move with time</label>
</div>
}
import moment from "moment";
import UIConstants from "../../../../utils/ui.constants";
function getDateSelector(isRange, currentDateValue, onChangeDateCallback, onCloseDateCallback, onClickDateResetButtonCallback) {
if (!currentDateValue || !onCloseDateCallback || !onClickDateResetButtonCallback) {
function getDateSelector(isRange, startTime, setStartAndEndTimeCallback) {
if (!startTime) {
return null;
}
const title = isRange ? "Showing Date Range" : "Showing week of";
const title = isRange ? "Showing Date Range" : "Showing week from";
const mode = isRange ? "range" : "single"
const options = {
"allowInput": true,
"enableSeconds": isRange,
"enableTime": isRange,
"time_24hr": isRange,
"mode": mode,
"minuteIncrement": 1,
......@@ -35,21 +25,32 @@ function getDateSelector(isRange, currentDateValue, onChangeDateCallback, onClos
const calenderButtonTitle = isRange ? "Click to change the date range" : "Click to select the date of the week"
const resetButtonTitle = isRange ? "Reset to the default date range" : "Reset to the current week"
return <div>
return <div data-testid="nav-datetime-selector">
<label>{title}</label>
<Flatpickr data-enable-time={isRange}
data-input
value={currentDateValue}
value={startTime.format(UIConstants.CALENDAR_DEFAULTDATE_FORMAT)}
options={options}
onChange={value => onChangeDateCallback(value)}
onClose={value => onCloseDateCallback(value)}>
onClose={value => {
const chosenDate = moment(value[0]);
const newStartTime = moment(chosenDate.startOf('day'))
const newEndTime = moment(chosenDate.add(UIConstants.WEEKVIEW_SHOW_NUMBER_OF_DAYS, 'days').endOf('day'))
setStartAndEndTimeCallback(newStartTime, newEndTime)
}}>
<input type="text" data-input className="p-inputtext p-component calendar-input"/>
<button className="p-button p-component p-button-icon-only calendar-button"
title={calenderButtonTitle} data-toggle>
title={calenderButtonTitle} data-toggle data-testid="nav-calendar-button">
<i className="fas fa-calendar"></i>
</button>
<button className="p-button p-component p-button-icon-only calendar-reset"
onClick={() => onClickDateResetButtonCallback()}
data-testid="nav-reset-button"
onClick={() => {
const now = moment(moment.now())
const newStartTime = moment(now.startOf('day'));
const newEndTime = moment(now.add(UIConstants.WEEKVIEW_SHOW_NUMBER_OF_DAYS, 'days').endOf('day'));
setStartAndEndTimeCallback(newStartTime, newEndTime)
}}
title={resetButtonTitle}>
<i className="fas fa-sync-alt"></i>
</button>
......@@ -57,126 +58,53 @@ function getDateSelector(isRange, currentDateValue, onChangeDateCallback, onClos
</div>
}
function getWeekChanger(isRange, onWeekChangeCallback) {
if (isRange || !onWeekChangeCallback) {
function getWeekChanger(isRange, startTime, endTime, setStartAndEndTimeCallback) {
if (isRange || startTime === undefined || endTime === undefined) {
return null
}
return <div className="week-changer">
<Button icon="pi pi-angle-double-left" title="Previous Week" onClick={() => onWeekChangeCallback(-1)}/>
<label>Week</label>
<Button icon="pi pi-angle-double-right" title="Next Week" onClick={() => onWeekChangeCallback(1)}/>
</div>
}
const weekNumbers = startTime.week() === endTime.week() ? startTime.week() : startTime.week() + "&" + endTime.week()
function getResetButton(onClickTimeZoomResetButtonCallback) {
return <div>
<label>Reset:</label>
<div>
<Button icon="pi pi-undo"
className="p-button p-button-primary"
onClick={onClickTimeZoomResetButtonCallback}
title="Reset Zoom & Move to Current Time"/>
</div>
</div>
}
return <div className="week-changer" data-testid="nav-week-changer">
<Button data-testid="nav-week-previous" icon="pi pi-angle-double-left" title="Previous 7 days" onClick={() => {
const newStartTime = moment(startTime).subtract(1, 'weeks');
const newEndTIme = moment(endTime).subtract(1, 'weeks');
setStartAndEndTimeCallback(newStartTime, newEndTIme)
function getIconButton(title, onClickCallback, iconClassName, disabled = false) {
return <button className="p-link"
title={title}
onClick={onClickCallback}
disabled={disabled}>
<i className={`pi ${iconClassName}`}/>
</button>
}
function getZoomAndMoveActions(moveLeftCallback, moveRightCallback, zoomOutCallback, zoomInCallback, zoomLevel = "") {
return <div className="move-container">
<label>Move:</label>
<div>
{getIconButton("Move Left", moveLeftCallback, "pi-angle-left")}
{getIconButton("Zoom out", zoomOutCallback, "pi-minus-circle", zoomLevel.startsWith("Custom"))}
{getIconButton("Zoom in", zoomInCallback, "pi-plus-circle", zoomLevel.startsWith("Custom"))}
{getIconButton("Move Right", moveRightCallback, "pi-angle-right")}
</div>
}}/>
<label> Week <span>{weekNumbers}</span> </label>
<Button data-testid="nav-week-next" icon="pi pi-angle-double-right" title="Next 7 days" onClick={() => {
const newStartTime = moment(startTime).add(1, 'weeks');
const newEndTIme = moment(endTime).add(1, 'weeks');
setStartAndEndTimeCallback(newStartTime, newEndTIme)
}}/>
</div>
}
function getZoomSelect(zoomLevel, allZoomLevels, onChangeZoomLevelCallback) {
return <div className="zoom-selector-container">
<label>Span:</label>
<div>
<Dropdown optionLabel="name" optionValue="name"
value={zoomLevel}
options={allZoomLevels}
filter
showClear={false}
filterBy="name"
onChange={(e) => onChangeZoomLevelCallback(e.value, false)}
placeholder="Zoom"/>
</div>
</div>
function changeStartAndEndTimeCallback(setStartTime, setEndTime) {
return (newStartTime, newEndTime) => {
setStartTime(newStartTime);
setEndTime(newEndTime);
};
}
export default function DateTimeNavigator(props) {
const {
allowLive,
timelineStore,
timelineCommonUtils,
isRange,
currentDateValue,
onChangeDateCallback,
onCloseDateCallback,
onClickDateResetButtonCallback,
onWeekChangeCallback,
onClickTimeZoomResetButtonCallback,
moveLeftCallback,
moveRightCallback,
zoomOutCallback,
zoomInCallback,
zoomLevel,
allZoomLevels,
onChangeZoomLevelCallback
startTime,
endTime,
setStartTime,
setEndTime
} = props
const [isLive, setIsLive] = useState(false)
// setInterval(() => { //TODO: fix clock
// if (currentUTC && currentLST) {
// console.log("updating times", currentLST, currentUTC)
// setCurrentUTC(currentUTC.add(1, 'seconds'));
// setCurrentLST(currentLST.add(1, 'seconds'));
// }
// }, 1000);
//
// useEffect(() => {
// if (timelineStore) {
// isLive ? timelineStore.isLive = isLive : delete timelineStore["isLive"];
// timelineCommonUtils.storeUIAttributes(timelineStore);
// }
// }, [isLive])
return <div className=" p-grid timeline-datetime-navigator">
return <div className="p-grid timeline-datetime-navigator">
<div className="section">
<div className="header">Navigation</div>
<div className="group">
<DateTimeInfo/>
{/*<div className=" selector-container">*/}
{/* {getDateSelector(isRange, currentDateValue, onChangeDateCallback, onCloseDateCallback, onClickDateResetButtonCallback)}*/}
{/* {getMoveWithTimeCheckbox(allowLive, isLive, setIsLive)}*/}
{/* {getWeekChanger(isRange, onWeekChangeCallback)}*/}
{/*</div>*/}
<div className="selector-container">
{getDateSelector(false, startTime, changeStartAndEndTimeCallback(setStartTime, setEndTime))}
{getWeekChanger(false, startTime, endTime, changeStartAndEndTimeCallback(setStartTime, setEndTime))}
</div>
</div>
</div>
{/*<div className=" section">*/}
{/* <div className=" header">Zoom</div>*/}
{/* <div className=" group group--row">*/}
{/* {getZoomSelect(zoomLevel, allZoomLevels, onChangeZoomLevelCallback)}*/}
{/* {getZoomAndMoveActions(moveLeftCallback, moveRightCallback, zoomOutCallback, zoomInCallback, zoomLevel)}*/}
{/* {getResetButton(onClickTimeZoomResetButtonCallback)}*/}
{/* </div>*/}
{/*</div>*/}
</div>
}
\ No newline at end of file
SAS/TMSS/frontend/tmss_webapp/src/routes/Timeline/components/toolbar/DateTimeNavigator.test.js 0 → 100644
+ 83
− 0
View file @ 2055b7e2
import moment from "moment";
import DateTimeNavigator from "./DateTimeNavigator";
import {render} from "@testing-library/react";
import {clickItem, removeReact18ConsoleErrors} from "../../../../utils/test.helper";
removeReact18ConsoleErrors()
describe('DateTimeNavigator', () => {
const mockSetStartTime = jest.fn();
const mockSetEndTime = jest.fn();
it('renders date selector and week changer correctly', () => {
const pageContent = render(
<DateTimeNavigator
startTime={moment()}
endTime={moment()}
setStartTime={mockSetStartTime}
setEndTime={mockSetEndTime}
/>
);
const dateSelector = pageContent.getByTestId('nav-datetime-selector');
const dateSelectorInput = pageContent.getByTestId('nav-calendar-button');
const resetButton = pageContent.getByTestId('nav-reset-button');
const nextWeekButton = pageContent.getByTestId('nav-week-next');
const previousWeekButton = pageContent.getByTestId('nav-week-previous');
expect(dateSelector).toBeInTheDocument();
expect(dateSelector.textContent).toBe("Showing week from");
expect(dateSelectorInput).toBeInTheDocument();
expect(dateSelectorInput.title).toBe("Click to select the date of the week");
expect(resetButton).toBeInTheDocument();
expect(resetButton.title).toBe("Reset to the current week");
expect(nextWeekButton).toBeInTheDocument();
expect(nextWeekButton.title).toBe("Next 7 days");
expect(previousWeekButton).toBeInTheDocument();
expect(previousWeekButton.title).toBe("Previous 7 days");
});
it('Clicks buttons; reset, previous+next week', () => {
const mockStartTime = moment('2023-08-15');
const mockEndTime = moment('2023-08-22');
const pageContent = render(
<DateTimeNavigator
startTime={mockStartTime}
endTime={mockEndTime}
setStartTime={mockSetStartTime}
setEndTime={mockSetEndTime}
/>
);
const resetButton = pageContent.getByTestId('nav-reset-button');
const nextWeekButton = pageContent.getByTestId('nav-week-next');
const previousWeekButton = pageContent.getByTestId('nav-week-previous');
clickItem(resetButton)
expect(mockSetStartTime).toHaveBeenCalledTimes(1);
expect(mockSetEndTime).toHaveBeenCalledTimes(1);
clickItem(previousWeekButton)
expect(mockSetStartTime).toHaveBeenCalledTimes(2);
expect(mockSetEndTime).toHaveBeenCalledTimes(2);
clickItem(nextWeekButton)
expect(mockSetStartTime).toHaveBeenCalledTimes(3);
expect(mockSetEndTime).toHaveBeenCalledTimes(3);
});
it('does not render week changer or date selector when startTime is not provided', () => {
const pageContent = render(
<DateTimeNavigator
startTime={undefined}
endTime={moment()}
setStartTime={mockSetStartTime}
setEndTime={mockSetEndTime}
/>
);
expect(pageContent.queryByTestId('nav-datetime-selector')).not.toBeInTheDocument()
expect(pageContent.queryByTestId('nav-week-changer')).not.toBeInTheDocument()
});
});
\ No newline at end of file
SAS/TMSS/frontend/tmss_webapp/src/utils/ui.constants.js
+ 1
− 0
View file @ 2055b7e2
......@@ -72,6 +72,7 @@ const UIConstants = {
SU_NOT_STARTED_STATUSES: ['defined', 'schedulable', 'scheduled', 'unschedulable'],
SU_ACTIVE_STATUSES: ['started', 'observing', 'observed', 'processing', 'processed', 'ingesting', 'ingested'],
STORE_KEY_TIMELINE: "TIMELINE_UI_ATTR",
WEEKVIEW_SHOW_NUMBER_OF_DAYS: 6,
ALL_ZOOM_LEVELS_WEEK: [{name: '30 Minutes', days: 0, hours: 0, minutes: 30},
{name: '1 Hour', days: 0, hours: 1, minutes: 0},
{name: '3 Hours', days: 0, hours: 3, minutes: 0},
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment