diff --git a/aspnetapp/WINGS/ClientApp/src/components/telemetry/view_display/OpenPacketTimeHistoryTabDialog.tsx b/aspnetapp/WINGS/ClientApp/src/components/telemetry/view_display/OpenPacketTimeHistoryTabDialog.tsx new file mode 100644 index 00000000..9b868c3b --- /dev/null +++ b/aspnetapp/WINGS/ClientApp/src/components/telemetry/view_display/OpenPacketTimeHistoryTabDialog.tsx @@ -0,0 +1,119 @@ +import React from 'react'; +import { createStyles, makeStyles } from '@material-ui/core/styles'; +import { Button, TextField } from '@material-ui/core'; +import DialogTitle from '@material-ui/core/DialogTitle'; +import DialogContent from '@material-ui/core/DialogContent'; +import DialogActions from '@material-ui/core/DialogActions'; +import Dialog from '@material-ui/core/Dialog'; +import FormControlLabel from '@material-ui/core/FormControlLabel'; +import RadioGroup from '@material-ui/core/RadioGroup'; +import Radio from '@material-ui/core/Radio'; +import { useSelector, useDispatch } from 'react-redux'; +import { RootState } from '../../../redux/store/RootState'; +import { SelectOption } from '../../common/SelectBox'; +import { TelemetryViewIndex } from '../../../models'; +import { getTelemetryHistories } from '../../../redux/telemetries/selectors'; +import { selectTelemetryAction } from '../../../redux/views/actions'; + +const useStyles = makeStyles( + createStyles({ + paper: { + height: '80vh', + width: 500 + } +})); + +export interface OpenPacketTimeHistoryTabDialogProps { + blockNum: number, + classes: Record<'paper', string>; + keepMounted: boolean; + open: boolean; + setTimeId: (id: string) => void; + tab: TelemetryViewIndex; + onClose: () => void; +} + +const OpenPacketTimeHistoryTabDialog = (props: OpenPacketTimeHistoryTabDialogProps) => { + const {tab, setTimeId, onClose, blockNum, open } = props; + const classes = useStyles(); + const selector = useSelector((state: RootState) => state); + const dispatch = useDispatch(); + const [text, setText] = React.useState(""); + + const [value, setValue] = React.useState(""); + const radioGroupRef = React.useRef(null); + + const telemetryHistory = getTelemetryHistories(selector)[tab.compoName][tab.name]; + const timeHistoryOptions = (telemetryHistory[0].telemetryValues.length == 0) ? [{id: '0', time: "null"}] : telemetryHistory[0].telemetryValues.map((tlmHitory, index) => ({ id: String(index), time: tlmHitory.time })); + + const handleEntering = () => { + if (radioGroupRef.current != null) { + radioGroupRef.current.focus(); + } + }; + + const handleCancel = () => { + onClose(); + setValue(""); + }; + + const handleOk = () => { + setTimeId(value); + onClose(); + }; + + const handleChange = (event: React.ChangeEvent) => { + setValue((event.target as HTMLInputElement).value); + }; + + const handleChangeText = (e: any) => { + setText(() => e.target.value) + }; + + return ( + + + + + + + {timeHistoryOptions.length > 0 && ( + timeHistoryOptions.map(telemetryOption => { + if (telemetryOption.time.toUpperCase().includes(text.toUpperCase())) { + return } label={telemetryOption.time} /> + } + }) + )} + + + + + + + + ) +}; + +export default OpenPacketTimeHistoryTabDialog; \ No newline at end of file diff --git a/aspnetapp/WINGS/ClientApp/src/components/telemetry/view_display/PacketTabPanel.tsx b/aspnetapp/WINGS/ClientApp/src/components/telemetry/view_display/PacketTabPanel.tsx index dd12c460..9d65e19b 100644 --- a/aspnetapp/WINGS/ClientApp/src/components/telemetry/view_display/PacketTabPanel.tsx +++ b/aspnetapp/WINGS/ClientApp/src/components/telemetry/view_display/PacketTabPanel.tsx @@ -4,7 +4,7 @@ import Grid from '@material-ui/core/Grid'; import { useSelector, useDispatch } from 'react-redux'; import { Telemetry, TelemetryViewIndex } from '../../../models'; import { RootState } from '../../../redux/store/RootState'; -import { getTelemetryColor, getLatestTelemetries } from '../../../redux/telemetries/selectors'; +import { getTelemetryColor, getLatestTelemetries, getTelemetryHistories } from '../../../redux/telemetries/selectors'; import Toolbar from '@material-ui/core/Toolbar'; import Radio from '@material-ui/core/Radio'; import RadioGroup from '@material-ui/core/RadioGroup'; @@ -14,8 +14,10 @@ import FormLabel from '@material-ui/core/FormLabel'; import Button from '@material-ui/core/Button'; import { setTelemetryTypePacketAction } from '../../../redux/views/actions'; import CenterFocusStrongIcon from '@material-ui/icons/CenterFocusStrong'; +import { AlarmAddOutlined, ArrowLeft, ArrowRight } from '@material-ui/icons'; import IconButtonInTabs from '../../common/IconButtonInTabs'; import OpenPacketTabDialog from './OpenPacketTabDialog'; +import OpenPacketTimeHistoryTabDialog from './OpenPacketTimeHistoryTabDialog'; const useStyles = makeStyles((theme: Theme) => createStyles({ @@ -92,6 +94,13 @@ const useStyles = makeStyles((theme: Theme) => color: 'white', fontSize: 12, paddingRight: 20 + }, + iconField: { + padding: 0 + }, + leftRightIconField: { + paddingTop: 2, + paddingBottom: 2 } })); @@ -106,6 +115,7 @@ const PacketTabPanel = (props: PacketTabPanelProps) => { const classes = useStyles(); const dispatch = useDispatch(); const tlms = getLatestTelemetries(selector)[tab.compoName][tab.name]; + const tlmHistory = getTelemetryHistories(selector)[tab.compoName][tab.name]; const selectedTelemetries = tab.selectedTelemetries; const tlmClassList: string[] = [tab.name]; const tlmColor = getTelemetryColor(selector); @@ -119,24 +129,55 @@ const PacketTabPanel = (props: PacketTabPanelProps) => { const num = tlmsDisplayed.length; const [dataType, setDataType] = React.useState(tab.dataType); + const [packetType, setPacketType] = React.useState(tab.packetType); + const [packetHistoryTimeId, setPacketHistoryTimeId] = React.useState(""); const [dialogOpen, setDialogOpen] = React.useState(false); + const [timeHistoryDialogOpen, setTimeHistoryDialogOpen] = React.useState(false); - const handleChange = (event: React.ChangeEvent) => { + const handleChangeDataType = (event: React.ChangeEvent) => { setDataType((event.target as HTMLInputElement).value); }; + const handleChangePacketType = (event: React.ChangeEvent) => { + setPacketType((event.target as HTMLInputElement).value); + }; + const handleOk = () => { - dispatch(setTelemetryTypePacketAction(blockNum, dataType)); + dispatch(setTelemetryTypePacketAction(blockNum, dataType, packetType)); }; const handleDialogOpen = () => { setDialogOpen(true); } + const handleSetTimeId = (id: string) => { + setPacketHistoryTimeId(id); + } + + const handleTimeHistoryDialogOpen = () => { + setTimeHistoryDialogOpen(true); + } + const handleDialogClose = () => { setDialogOpen(false); }; + const handleTimeHistoryDialogClose = () => { + setTimeHistoryDialogOpen(false); + }; + + const handleTimeHistoryNext = () => { + if (Number(packetHistoryTimeId) != tlmHistory[0].telemetryValues.length - 1 ) { + setPacketHistoryTimeId(String(Number(packetHistoryTimeId) + 1)); + } + } + + const handleTimeHistoryBack = () => { + if (Number(packetHistoryTimeId) != 0) { + setPacketHistoryTimeId(String(Number(packetHistoryTimeId) - 1)); + } + } + const setTlmTagColor = (i: number) => { if (i <= 2) { return classes.tlmLayer; @@ -162,6 +203,21 @@ const PacketTabPanel = (props: PacketTabPanelProps) => { const showTlmData = (tlm: Telemetry) => { const tlmClasses = tlm.telemetryInfo.name.split('.'); const tlmClassesDisplayed: JSX.Element[] = []; + let tlmValue = ""; + if (tab.dataType == "Raw") { + if (packetType == "RealTime") { + tlmValue = tlm.telemetryValue.rawValue; + } else { + tlmValue = (packetHistoryTimeId == "") ? "" : String(tlmHistory.find(tlmhistory => tlmhistory.telemetryInfo.name == tlm.telemetryInfo.name)?.telemetryValues[Number(packetHistoryTimeId)].rawValue); + } + } else { + if (packetType == "RealTime") { + tlmValue = tlm.telemetryValue.value; + } else { + tlmValue = (packetHistoryTimeId == "") ? "" : String(tlmHistory.find(tlmhistory => tlmhistory.telemetryInfo.name == tlm.telemetryInfo.name)?.telemetryValues[Number(packetHistoryTimeId)].value); + } + } + if (tlmClasses.length == 1){ tlmClassesDisplayed.push(
  • @@ -175,9 +231,9 @@ const PacketTabPanel = (props: PacketTabPanelProps) => { let tlmClassesTmp = (i == 0)? tlmName :tlmClasses.slice(0,i+1).join("."); if (i == tlmClasses.length - 1) { tlmClassesDisplayed.push( -
  • - {} - {tlmName} : {(tab.dataType != "Raw")? tlm.telemetryValue.value: tlm.telemetryValue.rawValue} +
  • + {} + {tlmName} : {tlmValue}
    • ) } else if (!tlmClassList.includes(tlmClassesTmp)) { @@ -202,29 +258,57 @@ const PacketTabPanel = (props: PacketTabPanelProps) => { return (
    - - +
    +
    + Name : {tab.name} +
    +
    + Apid : 0x{Number(tab.tlmApid).toString(16)} +
    +
    + Packet Id : 0x{Number(tab.packetId).toString(16)} +
    +
    + Time : {((packetType == "History" && packetHistoryTimeId != "") ? + String(tlmHistory[0].telemetryValues[Number(packetHistoryTimeId)].time) : + String(tlms[0].telemetryValue.time))} +
    +
    + Data Type - - + + } label="Default" /> } label="Raw" /> - -
    - Name : {tab.name} -
    -
    - Apid : 0x{Number(tab.tlmApid).toString(16)} -
    -
    - Packet Id : 0x{Number(tab.packetId).toString(16)} -
    + + Packet Type + + + } label="RealTime" /> + } label="History" /> + + + + {(packetType == "History") ? +
    + + + + + + + + + +
    : + <> + } @@ -237,6 +321,15 @@ const PacketTabPanel = (props: PacketTabPanelProps) => { tab={tab} onClose={handleDialogClose} /> + { if (resTlms.status == 200) { const jsonTlms = await resTlms.json(); const tlmPackets = jsonTlms.data as TelemetryPacket[]; - const packetIndexes: TelemetryViewIndex[] = tlmPackets.map(packet => ({ id: packet.packetInfo.name + "_packet", name: packet.packetInfo.name, filePath: "", tlmApid: packet.packetInfo.tlmApid, packetId: packet.packetInfo.id, compoName: packet.packetInfo.compoName, type: "packet", selectedTelemetries: [], dataType: "Default", dataLength: "500", ylabelMin: "", ylabelMax: "" })); + const packetIndexes: TelemetryViewIndex[] = tlmPackets.map(packet => ({ id: packet.packetInfo.name + "_packet", name: packet.packetInfo.name, filePath: "", tlmApid: packet.packetInfo.tlmApid, packetId: packet.packetInfo.id, compoName: packet.packetInfo.compoName, type: "packet", selectedTelemetries: [], dataType: "Default", packetType: "RealTime", dataLength: "500", ylabelMin: "", ylabelMax: "" })); const graphIndexes: TelemetryViewIndex[] = tlmPackets.map(packet => ({ id: packet.packetInfo.name + "_graph", name: packet.packetInfo.name, filePath: "", tlmApid: packet.packetInfo.tlmApid, packetId: packet.packetInfo.id, compoName: packet.packetInfo.compoName, type: "graph", selectedTelemetries: [], dataType: "Default", dataLength: "500", ylabelMin: "", ylabelMax: "" })); const viewIndexes = [...packetIndexes, ...graphIndexes]; dispatch(fetchViewIndexesAction(viewIndexes)); diff --git a/aspnetapp/WINGS/ClientApp/src/redux/views/actions.ts b/aspnetapp/WINGS/ClientApp/src/redux/views/actions.ts index d736879b..2808b9eb 100644 --- a/aspnetapp/WINGS/ClientApp/src/redux/views/actions.ts +++ b/aspnetapp/WINGS/ClientApp/src/redux/views/actions.ts @@ -87,12 +87,13 @@ export const selectTelemetryAction = (block: number, tlmname:string[]) => { } }; -export const setTelemetryTypePacketAction = (block: number, dataType:string) => { +export const setTelemetryTypePacketAction = (block: number, dataType:string, packetType:string|undefined) => { return { type: SET_TELEMETRY_TYPE_PACKET, payload: { block: block, - dataType: dataType + dataType: dataType, + packetType: packetType } } }; diff --git a/aspnetapp/WINGS/ClientApp/src/redux/views/reducers.ts b/aspnetapp/WINGS/ClientApp/src/redux/views/reducers.ts index 07d3c268..bef395f8 100644 --- a/aspnetapp/WINGS/ClientApp/src/redux/views/reducers.ts +++ b/aspnetapp/WINGS/ClientApp/src/redux/views/reducers.ts @@ -151,7 +151,7 @@ export const ViewsReducer = (state = initialState.views, action: Actions) => { } case Actions.SET_TELEMETRY_TYPE_PACKET: { - const { block, dataType } = action.payload; + const { block, dataType, packetType } = action.payload; return { ...state, currentView:{ @@ -163,7 +163,8 @@ export const ViewsReducer = (state = initialState.views, action: Actions) => { tabs: [...state.currentView.blocks[block].tabs.slice(0, state.currentView.blocks[block].activeTab), { ...state.currentView.blocks[block].tabs[state.currentView.blocks[block].activeTab], - dataType: dataType + dataType: dataType, + packetType: packetType }, ...state.currentView.blocks[block].tabs.slice(state.currentView.blocks[block].activeTab+1)] },