Now displays segment data under drives tab

main
AdamSBlack 2022-01-07 02:07:52 +00:00
parent ea80c8bfae
commit 7300c65273
6 changed files with 36 additions and 79 deletions

View File

@ -16,14 +16,7 @@ import React, { useContext, useEffect } from 'react';
import { context as DeviceContext } from "./../../../context/devices";
import { context as SnackbarContext } from "./../../../context/toast";
import * as deviceController from "./../../../controllers/devices";
function formatDate(timestampMs) {
return new Date(timestampMs).toISOString().replace(/T/, ' ').replace(/\..+/, '');
}
import * as helpers from "./../../../controllers/helpers"
function loading() {
@ -42,11 +35,8 @@ export default function EnhancedTable(props) {
const [state, dispatch] = useContext(DeviceContext)
const [ notifState, notifdispatch ] = useContext(SnackbarContext)
useEffect(() => {
deviceController.getBootlogs('53331425').then((res) => {
deviceController.getBootlogs(props.dongleId).then((res) => {
setTimeout(() => {
dispatch({ type: "update_dongle_bootlogs", dongle_id: props.dongleId, bootlogs: res.data })
}, 1)
@ -78,21 +68,15 @@ export default function EnhancedTable(props) {
{/* if you don't need to support IE11, you can replace the `stableSort` call with:
rows.slice().sort(getComparator(order, orderBy)) */}
{state.dongles[props.dongleId].boot ? state.dongles[props.dongleId].boot.map((row) => {
return (
<TableRow
hover
>
<TableCell >{formatDate(row.date)}</TableCell>
<TableRow hover>
<TableCell >{helpers.formatDate(row.date)}</TableCell>
<TableCell >{row.name}</TableCell>
<TableCell >{Math.round(row.size / 1024) + ' MiB'}</TableCell>
<TableCell>
<Tooltip title="Open in new window">
<IconButton size="small" onClick={() => window.open(row.permalink, "_blank")}>
<OpenInNewIcon fontSize="inherit"/>
</IconButton>
@ -114,23 +98,10 @@ export default function EnhancedTable(props) {
</TableRow>
)
}) :
[1, 1, 1, 1, 1].map(loading)
}
}) : [1, 1, 1, 1, 1].map(loading) }
</TableBody>
</Table>
</TableContainer>
</Paper>
</Box>
);

View File

@ -1,14 +1,16 @@
/*import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import Accordion from '@mui/material/Accordion';
import AccordionDetails from '@mui/material/AccordionDetails';
import AccordionSummary from '@mui/material/AccordionSummary';
import Typography from '@mui/material/Typography';*/
import Box from '@mui/material/Box';
import Paper from '@mui/material/Paper';
import React, { useContext } from 'react';
//import { JsonFormatter } from 'react-json-formatter'
/*
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import Accordion from '@mui/material/Accordion';
import AccordionDetails from '@mui/material/AccordionDetails';
import AccordionSummary from '@mui/material/AccordionSummary';
import Typography from '@mui/material/Typography';
*/
/*
function RichContent(props) {

View File

@ -15,12 +15,10 @@ import Tooltip from '@mui/material/Tooltip';
import React, { useContext, useEffect } from 'react';
import { context as DeviceContext } from "./../../../context/devices";
import * as deviceController from "./../../../controllers/devices";
import * as helpers from "./../../../controllers/helpers"
function formatDate(timestampMs) {
return new Date(timestampMs).toISOString().replace(/T/, ' ').replace(/\..+/, '');
}
function buildContent(row) {
@ -30,7 +28,7 @@ function buildContent(row) {
>
<TableCell >{formatDate(row.date)}</TableCell>
<TableCell >{helpers.formatDate(row.date)}</TableCell>
<TableCell >{row.name}</TableCell>
<TableCell >{Math.round(row.size / 1024) + ' MiB'}</TableCell>
@ -71,11 +69,10 @@ function loading() {
}
export default function EnhancedTable(props) {
console.log("HELLO", props.dongleId)
const [state, dispatch] = useContext(DeviceContext)
useEffect(() => {
deviceController.getCrashlogs('53331425').then((res) => {
deviceController.getCrashlogs(props.dongleId).then((res) => {
dispatch({ type: "update_dongle_bootlogs", dongle_id: props.dongleId, bootlogs: res.data })
})

View File

@ -7,15 +7,11 @@ import Typography from '@mui/material/Typography';
import React, { useContext } from 'react';
import { context as DeviceContext } from "./../../../context/devices";
import { context as SnackbarContext } from "./../../../context/toast";
import * as helpers from "./../../../controllers/helpers"
function formatDate(timestampMs) {
return new Date(timestampMs).toISOString().replace(/T/, ' ').replace(/\..+/, '');
}
@ -72,8 +68,8 @@ export default function SignIn(props) {
<b>Type:</b> {dongle.device_type}<br></br>
<b>Serial:</b> {dongle.serial}<br></br>
<b>IMEI:</b> {dongle.imei}<br></br>
<b>Registered:</b> {formatDate(dongle.created)}<br></br>
<b>Last Ping:</b> {formatDate(dongle.last_ping)}<br></br>
<b>Registered:</b> {helpers.formatDate(dongle.created)}<br></br>
<b>Last Ping:</b> {helpers.formatDate(dongle.last_ping)}<br></br>
<b>Public Key:</b> -----BEGIN PUBLIC KEY-----
<Tooltip title="Copy public key">
<IconButton onClick={() => pubKeyClipboard(dongle.public_key)}>

View File

@ -12,38 +12,21 @@ import TableContainer from '@mui/material/TableContainer';
import TableHead from '@mui/material/TableHead';
import TableRow from '@mui/material/TableRow';
import Tooltip from '@mui/material/Tooltip';
import React, { useContext, useEffect } from 'react';
import React, { useContext, useEffect, useState } from 'react';
import { context as DeviceContext } from "./../../../context/devices";
import { context as SnackbarContext } from "./../../../context/toast";
import * as deviceController from "./../../../controllers/devices";
import * as helpers from "./../../../controllers/helpers"
import ViewDrive from "./view_drive"
function formatDate(timestampMs) {
return new Date(timestampMs).toISOString().replace(/T/, ' ').replace(/\..+/, '');
}
function formatDuration(durationSeconds) {
durationSeconds = Math.round(durationSeconds);
const secs = durationSeconds % 60;
let mins = Math.floor(durationSeconds / 60);
let hours = Math.floor(mins / 60);
mins = mins % 60;
const days = Math.floor(hours / 24);
hours = hours % 24;
let response = '';
if (days > 0) response += days + 'd ';
if (hours > 0 || days > 0) response += hours + 'h ';
if (hours > 0 || days > 0 || mins > 0) response += mins + 'm ';
response += secs + 's';
return response;
}
export default function EnhancedTable(props) {
const [state, dispatch] = useContext(DeviceContext)
const [deviceState, dispatch] = useContext(DeviceContext)
const [ notifState, notifdispatch ] = useContext(SnackbarContext)
const [state, setState] = useState({selectedSegment: null})
useEffect(() => {
deviceController.getDrives(props.dongleId).then((res) => {
@ -83,7 +66,7 @@ export default function EnhancedTable(props) {
<TableBody>
{/* if you don't need to support IE11, you can replace the `stableSort` call with:
rows.slice().sort(getComparator(order, orderBy)) */}
{state.dongles[props.dongleId].drives ? state.dongles[props.dongleId].drives.map((row) => {
{deviceState.dongles[props.dongleId].drives ? deviceState.dongles[props.dongleId].drives.map((row, index) => {
let metadata;
try {
@ -92,6 +75,7 @@ export default function EnhancedTable(props) {
return (
<TableRow
hover
onClick={()=>{state.selectedSegment === index ? setState({...state, selectedSegment: null }) : setState({...state, selectedSegment: index })}}
>
<TableCell
scope="row"
@ -100,11 +84,11 @@ export default function EnhancedTable(props) {
<TableCell >{metadata.hasOwnProperty('CarParams1') ? metadata.CarParams['CarName'] : "Glorious Skoda"}</TableCell>
<TableCell >{metadata.hasOwnProperty('InitData1') ? metadata.InitData['Version'] : "Lemon boy"}</TableCell>
<TableCell >{Math.round(row.filesize / 1024) + ' MiB'}</TableCell>
<TableCell >{formatDuration(row.duration)}</TableCell>
<TableCell >{helpers.formatDuration(row.duration)}</TableCell>
<TableCell >{Math.round(row.distance_meters / 1000)}</TableCell>
<TableCell >{row.upload_complete.toString()}</TableCell>
<TableCell >{row.is_processed.toString()}</TableCell>
<TableCell >{formatDate(row.drive_date)}</TableCell>
<TableCell >{helpers.formatDate(row.drive_date)}</TableCell>
<TableCell>
<Tooltip title="Open in new window">
@ -161,6 +145,8 @@ export default function EnhancedTable(props) {
</Table>
</TableContainer>
</Paper>
{state.selectedSegment ? <ViewDrive dongleId={props.dongleId} drive={state.selectedSegment} /> : null }
</Box>
);
}

View File

@ -17,6 +17,11 @@ export async function getCrashlogs(dongleId) {
return req.data
}
export async function getDriveSegments(dongleId, drive_identifier) {
const req = await axios.get(`http://localhost/retropilot/0/device/${dongleId}/drives/${drive_identifier}/segment`, {withCredentials: true});
return req.data
}
export async function getAllDevices() {
const req = await axios.get(`http://localhost/retropilot/0/devices`, {withCredentials: true});
const responseData = req.data