Now displays segment data under drives tab
parent
ea80c8bfae
commit
7300c65273
|
@ -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>
|
||||
);
|
||||
|
|
|
@ -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) {
|
||||
|
|
|
@ -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 })
|
||||
})
|
||||
|
||||
|
|
|
@ -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)}>
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Reference in New Issue