Reduced unused imports, cleaned up warnings
AdamSBlack
parent
4597a904f5
commit
bc026e55f3
44
src/App.js
44
src/App.js
|
|
@ -1,27 +1,14 @@
|
|||
import logo from './logo.svg';
|
||||
import React, { useEffect, useState, useContext } from 'react';
|
||||
|
||||
import Login from "./components/views/login"
|
||||
import Home from "./components/views/home"
|
||||
import UserAdmin from "./components/views/useradmin"
|
||||
import Tabs from '@mui/material/Tabs';
|
||||
import Tab from '@mui/material/Tab';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import Box from '@mui/material/Box';
|
||||
import {
|
||||
BrowserRouter as Router,
|
||||
Switch,
|
||||
Route,
|
||||
Link
|
||||
} from "react-router-dom";
|
||||
|
||||
import { UserProvider, UserContext } from "./context/users"
|
||||
import DeviceStore from "./context/devices"
|
||||
import ToastStore from "./context/toast"
|
||||
import GlobalSnack from './components/widgets/globalSnack'
|
||||
import useMediaQuery from '@mui/material/useMediaQuery';
|
||||
import { createTheme, ThemeProvider } from '@mui/material/styles';
|
||||
import CssBaseline from '@mui/material/CssBaseline';
|
||||
import { createTheme, ThemeProvider } from '@mui/material/styles';
|
||||
import React, { useState } from 'react';
|
||||
import Login from "./components/views/login";
|
||||
import UserAdmin from "./components/views/useradmin";
|
||||
import GlobalSnack from './components/widgets/globalSnack';
|
||||
import DeviceStore from "./context/devices";
|
||||
import ToastStore from "./context/toast";
|
||||
import { UserProvider } from "./context/users";
|
||||
import * as authenticationController from "./controllers/authentication";
|
||||
|
||||
|
||||
|
||||
// Connection opened
|
||||
|
|
@ -32,6 +19,15 @@ import CssBaseline from '@mui/material/CssBaseline';
|
|||
function App() {
|
||||
|
||||
|
||||
const [session, setSession] = useState(false)
|
||||
|
||||
authenticationController.getSession().then((res) => {
|
||||
setSession(res.data.authenticated)
|
||||
|
||||
})
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
const theme = React.useMemo(
|
||||
|
|
@ -56,7 +52,7 @@ function App() {
|
|||
|
||||
<GlobalSnack />
|
||||
|
||||
<UserAdmin />
|
||||
{session ? <UserAdmin/> : <Login />}
|
||||
|
||||
</ToastStore>
|
||||
</DeviceStore>
|
||||
|
|
|
|||
|
|
@ -1,93 +1,15 @@
|
|||
import React, { useEffect, useState, useContext } from 'react';
|
||||
import Avatar from '@mui/material/Avatar';
|
||||
import LoadingButton from '@mui/lab/LoadingButton';
|
||||
import CssBaseline from '@mui/material/CssBaseline';
|
||||
import TextField from '@mui/material/TextField';
|
||||
import FormControlLabel from '@mui/material/FormControlLabel';
|
||||
import Checkbox from '@mui/material/Checkbox';
|
||||
import Grid from '@mui/material/Grid';
|
||||
import Paper from '@mui/material/Paper';
|
||||
import Box from '@mui/material/Box';
|
||||
import CircularProgress from '@mui/material/CircularProgress';
|
||||
import LockOutlinedIcon from '@mui/icons-material/LockOutlined';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import Container from '@mui/material/Container';
|
||||
import { createTheme, ThemeProvider } from '@mui/material/styles';
|
||||
import {context as DeviceContext} from "./../../context/devices"
|
||||
import { Link } from "react-router-dom";
|
||||
import PropTypes from 'prop-types';
|
||||
import Tabs from '@mui/material/Tabs';
|
||||
import Tab from '@mui/material/Tab';
|
||||
import Chip from '@mui/material/Chip';
|
||||
import OutlinedInput from '@mui/material/OutlinedInput';
|
||||
import IconButton from '@mui/material/IconButton';
|
||||
import InputAdornment from '@mui/material/InputAdornment';
|
||||
import Done from '@mui/icons-material/Done';
|
||||
import GoogleMapReact from 'google-map-react';
|
||||
import React from 'react';
|
||||
import { Scrollbars } from 'react-custom-scrollbars';
|
||||
import DrivesTable from './tabPane';
|
||||
|
||||
import { Scrollbars } from 'react-custom-scrollbars';
|
||||
import { makeStyles } from '@mui/styles';
|
||||
import GoogleMapReact from 'google-map-react';
|
||||
import axios from "axios"
|
||||
import {context as SnackbarContext} from "./../../context/toast"
|
||||
|
||||
|
||||
|
||||
const useStyles = makeStyles({
|
||||
controlsButton: {
|
||||
margin: "0 3px"
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
function DeviceControls() {
|
||||
const classes = useStyles();
|
||||
const [ state, dispatch ] = useContext(DeviceContext);
|
||||
|
||||
const [ notifState, notifdispatch ] = useContext(SnackbarContext)
|
||||
|
||||
|
||||
|
||||
|
||||
async function refreshDongleStatus() {
|
||||
}
|
||||
|
||||
async function athenaReboot() {
|
||||
|
||||
}
|
||||
|
||||
return (
|
||||
|
||||
<div style={{ padding: '10px' }}>
|
||||
<Typography className={classes.controlsButton} style={{display: 'inline'}} variant="h6">c8321a</Typography>
|
||||
<LoadingButton className={classes.controlsButton} size="small" loadingIndicator="Loading..." variant="contained">
|
||||
Unpair
|
||||
</LoadingButton>
|
||||
|
||||
<LoadingButton className={classes.controlsButton} size="small" loadingIndicator="Loading..." variant="contained">
|
||||
Ping
|
||||
</LoadingButton>
|
||||
|
||||
<LoadingButton className={classes.controlsButton} size="small" loadingIndicator="Loading..." variant="contained" onClick={athenaReboot}>
|
||||
Reboot
|
||||
</LoadingButton>
|
||||
|
||||
<LoadingButton className={classes.controlsButton} size="small" loadingIndicator="Loading..." variant="contained" onClick={()=>{notifdispatch({type: 'NEW_TOAST', message: 'TIDDY', open: true})}}>
|
||||
Get GPS
|
||||
</LoadingButton>
|
||||
|
||||
<LoadingButton className={classes.controlsButton} size="small" loadingIndicator="Loading..." variant="contained" onClick={refreshDongleStatus}>
|
||||
Refresh
|
||||
</LoadingButton>
|
||||
|
||||
</div>
|
||||
|
||||
)
|
||||
}
|
||||
|
||||
function DeviceLastSeenMap() {
|
||||
console.log("api key", process.env)
|
||||
return (
|
||||
<div style={{ height: "500px", width: 'calc(100%)' }}>
|
||||
|
||||
|
|
@ -188,8 +110,6 @@ function DeviceLastSeenMap() {
|
|||
|
||||
|
||||
export default function SignIn(props) {
|
||||
const classes = useStyles();
|
||||
const [ state, dispatch ] = useContext(DeviceContext)
|
||||
|
||||
|
||||
|
||||
|
|
@ -200,26 +120,18 @@ export default function SignIn(props) {
|
|||
width: "100%",
|
||||
}}>
|
||||
|
||||
|
||||
<Scrollbars autoHeightMin="100%" autoHeightMax="100%">
|
||||
|
||||
<Grid container style={{padding: 30}}>
|
||||
|
||||
|
||||
|
||||
|
||||
<Grid container style={{padding: 30}}>
|
||||
<Grid item xs={12}>
|
||||
<DeviceLastSeenMap />
|
||||
</Grid>
|
||||
|
||||
|
||||
<Grid item xs={12}>
|
||||
<DrivesTable dongleId={props.device.dongle_id}/>
|
||||
</Grid>
|
||||
|
||||
</Grid>
|
||||
</Scrollbars>
|
||||
|
||||
</div>
|
||||
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,31 +1,10 @@
|
|||
import React, { useState, useContext, useEffect } from 'react';
|
||||
import Avatar from '@mui/material/Avatar';
|
||||
import LoadingButton from '@mui/lab/LoadingButton';
|
||||
import CssBaseline from '@mui/material/CssBaseline';
|
||||
import TextField from '@mui/material/TextField';
|
||||
import FormControlLabel from '@mui/material/FormControlLabel';
|
||||
import Checkbox from '@mui/material/Checkbox';
|
||||
import Grid from '@mui/material/Grid';
|
||||
import Paper from '@mui/material/Paper';
|
||||
import Box from '@mui/material/Box';
|
||||
import CircularProgress from '@mui/material/CircularProgress';
|
||||
import LockOutlinedIcon from '@mui/icons-material/LockOutlined';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import Container from '@mui/material/Container';
|
||||
import { createTheme, ThemeProvider } from '@mui/material/styles';
|
||||
import { UserContext } from "./../../context/users"
|
||||
import { Link } from "react-router-dom";
|
||||
import PropTypes from 'prop-types';
|
||||
import Tabs from '@mui/material/Tabs';
|
||||
import Tab from '@mui/material/Tab';
|
||||
import ButtonBase from '@mui/material/ButtonBase';
|
||||
import Chip from '@mui/material/Chip';
|
||||
import OutlinedInput from '@mui/material/OutlinedInput';
|
||||
import IconButton from '@mui/material/IconButton';
|
||||
import InputAdornment from '@mui/material/InputAdornment';
|
||||
import Done from '@mui/icons-material/Done';
|
||||
import ButtonBase from '@mui/material/ButtonBase'
|
||||
|
||||
import Divider from '@mui/material/Divider';
|
||||
import Grid from '@mui/material/Grid';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import React, { useEffect } from 'react';
|
||||
|
||||
|
||||
|
||||
const stylezz = {
|
||||
|
|
@ -76,7 +55,7 @@ export default function SignIn(props) {
|
|||
<ButtonBase style={{ padding: '10px' }}>
|
||||
<Grid container spacing={2}>
|
||||
<Grid item xs={4}>
|
||||
<img src="/c3.webp" style={{ width: "100%" }} />
|
||||
<img src="/c3.webp" style={{ width: "100%" }} alt="device icon"/>
|
||||
</Grid>
|
||||
<Grid item xs={8} style={{ textAlign: 'left' }}>
|
||||
{/* <TextField
|
||||
|
|
|
|||
|
|
@ -1,119 +1,28 @@
|
|||
import React, { useState, useContext, useEffect } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { alpha } from '@mui/material/styles';
|
||||
import DeleteIcon from '@mui/icons-material/Delete';
|
||||
import FavoriteBorderIcon from '@mui/icons-material/FavoriteBorder';
|
||||
import OpenInNewIcon from '@mui/icons-material/OpenInNew';
|
||||
import { Skeleton } from '@mui/material';
|
||||
import Box from '@mui/material/Box';
|
||||
import IconButton from '@mui/material/IconButton';
|
||||
import Paper from '@mui/material/Paper';
|
||||
import Table from '@mui/material/Table';
|
||||
import TableBody from '@mui/material/TableBody';
|
||||
import TableCell from '@mui/material/TableCell';
|
||||
import TableContainer from '@mui/material/TableContainer';
|
||||
import TableHead from '@mui/material/TableHead';
|
||||
import TablePagination from '@mui/material/TablePagination';
|
||||
import TableRow from '@mui/material/TableRow';
|
||||
import TableSortLabel from '@mui/material/TableSortLabel';
|
||||
import Toolbar from '@mui/material/Toolbar';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import Paper from '@mui/material/Paper';
|
||||
import Checkbox from '@mui/material/Checkbox';
|
||||
import IconButton from '@mui/material/IconButton';
|
||||
import Tooltip from '@mui/material/Tooltip';
|
||||
import FormControlLabel from '@mui/material/FormControlLabel';
|
||||
import Switch from '@mui/material/Switch';
|
||||
import FilterListIcon from '@mui/icons-material/FilterList';
|
||||
import { visuallyHidden } from '@mui/utils';
|
||||
import { context as DeviceContext } from "./../../../context/devices"
|
||||
import * as deviceController from "./../../../controllers/devices"
|
||||
import { Skeleton, ToolTip } from '@mui/material';
|
||||
|
||||
import DeleteIcon from '@mui/icons-material/Delete';
|
||||
import FavoriteBorderIcon from '@mui/icons-material/FavoriteBorder';
|
||||
import FavoriteIcon from '@mui/icons-material/Favorite';
|
||||
import OpenInNewIcon from '@mui/icons-material/OpenInNew';
|
||||
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";
|
||||
|
||||
|
||||
const rows = [
|
||||
|
||||
];
|
||||
|
||||
const headCells = [
|
||||
{
|
||||
id: 'identifier',
|
||||
numeric: false,
|
||||
disablePadding: true,
|
||||
label: 'Identifier',
|
||||
},
|
||||
{
|
||||
id: 'car',
|
||||
numeric: false,
|
||||
disablePadding: false,
|
||||
label: 'Car',
|
||||
},
|
||||
{
|
||||
id: 'version',
|
||||
numeric: false,
|
||||
disablePadding: false,
|
||||
label: 'Version',
|
||||
},
|
||||
{
|
||||
id: 'filesize',
|
||||
numeric: false,
|
||||
disablePadding: false,
|
||||
label: 'Filesize',
|
||||
},
|
||||
{
|
||||
id: 'duration',
|
||||
numeric: false,
|
||||
disablePadding: false,
|
||||
label: 'Duration',
|
||||
},
|
||||
{
|
||||
id: 'distance_meters',
|
||||
numeric: false,
|
||||
disablePadding: false,
|
||||
label: 'Distance',
|
||||
},
|
||||
{
|
||||
id: 'upload_complete',
|
||||
numeric: false,
|
||||
disablePadding: false,
|
||||
label: 'Uploaded',
|
||||
},
|
||||
{
|
||||
id: 'is_processed',
|
||||
numeric: false,
|
||||
disablePadding: false,
|
||||
label: 'Processed',
|
||||
},
|
||||
{
|
||||
id: 'upload_date',
|
||||
numeric: false,
|
||||
disablePadding: false,
|
||||
label: 'Uploaded at',
|
||||
},
|
||||
|
||||
];
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -130,27 +39,23 @@ function loading() {
|
|||
|
||||
|
||||
export default function EnhancedTable(props) {
|
||||
console.log("HELLO", props.dongleId)
|
||||
const [state, dispatch] = useContext(DeviceContext)
|
||||
const [ notifState, notifdispatch ] = useContext(SnackbarContext)
|
||||
|
||||
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
deviceController.getBootlogs('53331425').then((res) => {
|
||||
console.log("me result:", res)
|
||||
setTimeout(() => {
|
||||
dispatch({ type: "update_dongle_bootlogs", dongle_id: props.dongleId, bootlogs: res.data })
|
||||
}, 1)
|
||||
}).catch((err) => {
|
||||
notifdispatch({type: "NEW_TOAST", msg: 'Failed to load bootlogs'})
|
||||
})
|
||||
|
||||
}, []);
|
||||
|
||||
console.log("drives", state.dongles[props.dongleId])
|
||||
console.log("drives", typeof state.dongles[props.dongleId])
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<Box sx={{ width: '100%' }}>
|
||||
<Paper sx={{ width: '100%', mb: 2 }}>
|
||||
|
|
@ -211,16 +116,7 @@ export default function EnhancedTable(props) {
|
|||
|
||||
}) :
|
||||
|
||||
[1, 1, 1, 1, 1].map((v) => (
|
||||
<TableRow
|
||||
>
|
||||
|
||||
<TableCell ><Skeleton animation="wave" /></TableCell>
|
||||
<TableCell ><Skeleton animation="wave" /></TableCell>
|
||||
<TableCell ><Skeleton animation="wave" /></TableCell>
|
||||
<TableCell ><Skeleton animation="wave" /></TableCell>
|
||||
</TableRow>
|
||||
))
|
||||
[1, 1, 1, 1, 1].map(loading)
|
||||
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,25 +1,16 @@
|
|||
import React, { useState, useContext } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { alpha } from '@mui/material/styles';
|
||||
import Box from '@mui/material/Box';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import Paper from '@mui/material/Paper';
|
||||
|
||||
/*import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
|
||||
import Accordion from '@mui/material/Accordion';
|
||||
import AccordionSummary from '@mui/material/AccordionSummary';
|
||||
import AccordionDetails from '@mui/material/AccordionDetails';
|
||||
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
|
||||
|
||||
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 { context as DeviceContext } from "./../../../context/devices"
|
||||
|
||||
|
||||
const JsonStyle = {
|
||||
propertyStyle: { color: 'red' },
|
||||
stringStyle: { color: 'green' },
|
||||
numberStyle: { color: 'darkorange' }
|
||||
}
|
||||
|
||||
/*
|
||||
function RichContent(props) {
|
||||
|
||||
const content = props.content;
|
||||
|
|
@ -38,18 +29,15 @@ function RichContent(props) {
|
|||
<Typography>{`Picture - ${key}`} </Typography>
|
||||
</AccordionSummary>
|
||||
<AccordionDetails>
|
||||
<img src={`data:image/gif;base64,${content.data.return.result.jpegBack}`} />
|
||||
<img src={`data:image/gif;base64,${content.data.return.result.jpegFront}`} />
|
||||
<img src={`data:image/gif;base64,${content.data.return.result.jpegBack}`} alt="athena road"/>
|
||||
<img src={`data:image/gif;base64,${content.data.return.result.jpegFront}`} alt="athena DM"/>
|
||||
</AccordionDetails>
|
||||
</Accordion>
|
||||
)
|
||||
|
||||
|
||||
} else {
|
||||
console.log("props:", props)
|
||||
console.log("key:",key)
|
||||
console.log( "ls", localStorage.getItem(`ATH-${key}`))
|
||||
console.log("content:", content);
|
||||
|
||||
return (
|
||||
<Accordion TransitionProps={{ unmountOnExit: true }} >
|
||||
<AccordionSummary
|
||||
|
|
@ -60,24 +48,17 @@ function RichContent(props) {
|
|||
<Typography>{`${content} - ${key}`} </Typography>
|
||||
</AccordionSummary>
|
||||
<AccordionDetails>
|
||||
{/*<JsonFormatter json={JSON.stringify(localStorage.getItem(`ATH-${key}`))} tabWith='4' JsonStyle={JsonStyle} />*/}
|
||||
{<JsonFormatter json={JSON.stringify(localStorage.getItem(`ATH-${key}`))} tabWith='4' JsonStyle={JsonStyle} />}
|
||||
</AccordionDetails>
|
||||
</Accordion>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
*/
|
||||
|
||||
|
||||
export default function Console() {
|
||||
|
||||
const [state, dispatch] = useContext(DeviceContext);
|
||||
|
||||
return (
|
||||
<Box sx={{ width: '100%' }}>
|
||||
|
|
@ -93,7 +74,7 @@ export default function Console() {
|
|||
*/}
|
||||
|
||||
|
||||
|
||||
|
||||
</Paper>
|
||||
</Box>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,118 +1,27 @@
|
|||
import React, { useState, useContext, useEffect } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { alpha } from '@mui/material/styles';
|
||||
import DeleteIcon from '@mui/icons-material/Delete';
|
||||
import FavoriteBorderIcon from '@mui/icons-material/FavoriteBorder';
|
||||
import OpenInNewIcon from '@mui/icons-material/OpenInNew';
|
||||
import { Skeleton } from '@mui/material';
|
||||
import Box from '@mui/material/Box';
|
||||
import IconButton from '@mui/material/IconButton';
|
||||
import Paper from '@mui/material/Paper';
|
||||
import Table from '@mui/material/Table';
|
||||
import TableBody from '@mui/material/TableBody';
|
||||
import TableCell from '@mui/material/TableCell';
|
||||
import TableContainer from '@mui/material/TableContainer';
|
||||
import TableHead from '@mui/material/TableHead';
|
||||
import TablePagination from '@mui/material/TablePagination';
|
||||
import TableRow from '@mui/material/TableRow';
|
||||
import TableSortLabel from '@mui/material/TableSortLabel';
|
||||
import Toolbar from '@mui/material/Toolbar';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import Paper from '@mui/material/Paper';
|
||||
import Checkbox from '@mui/material/Checkbox';
|
||||
import FormControlLabel from '@mui/material/FormControlLabel';
|
||||
import Switch from '@mui/material/Switch';
|
||||
import FilterListIcon from '@mui/icons-material/FilterList';
|
||||
import { visuallyHidden } from '@mui/utils';
|
||||
import { context as DeviceContext } from "./../../../context/devices"
|
||||
import * as deviceController from "./../../../controllers/devices"
|
||||
import { Skeleton, ToolTip } from '@mui/material';
|
||||
|
||||
import Tooltip from '@mui/material/Tooltip';
|
||||
import IconButton from '@mui/material/IconButton';
|
||||
|
||||
import DeleteIcon from '@mui/icons-material/Delete';
|
||||
import FavoriteBorderIcon from '@mui/icons-material/FavoriteBorder';
|
||||
import FavoriteIcon from '@mui/icons-material/Favorite';
|
||||
import OpenInNewIcon from '@mui/icons-material/OpenInNew';
|
||||
import React, { useContext, useEffect } from 'react';
|
||||
import { context as DeviceContext } from "./../../../context/devices";
|
||||
import * as deviceController from "./../../../controllers/devices";
|
||||
|
||||
|
||||
const rows = [
|
||||
|
||||
];
|
||||
|
||||
const headCells = [
|
||||
{
|
||||
id: 'identifier',
|
||||
numeric: false,
|
||||
disablePadding: true,
|
||||
label: 'Identifier',
|
||||
},
|
||||
{
|
||||
id: 'car',
|
||||
numeric: false,
|
||||
disablePadding: false,
|
||||
label: 'Car',
|
||||
},
|
||||
{
|
||||
id: 'version',
|
||||
numeric: false,
|
||||
disablePadding: false,
|
||||
label: 'Version',
|
||||
},
|
||||
{
|
||||
id: 'filesize',
|
||||
numeric: false,
|
||||
disablePadding: false,
|
||||
label: 'Filesize',
|
||||
},
|
||||
{
|
||||
id: 'duration',
|
||||
numeric: false,
|
||||
disablePadding: false,
|
||||
label: 'Duration',
|
||||
},
|
||||
{
|
||||
id: 'distance_meters',
|
||||
numeric: false,
|
||||
disablePadding: false,
|
||||
label: 'Distance',
|
||||
},
|
||||
{
|
||||
id: 'upload_complete',
|
||||
numeric: false,
|
||||
disablePadding: false,
|
||||
label: 'Uploaded',
|
||||
},
|
||||
{
|
||||
id: 'is_processed',
|
||||
numeric: false,
|
||||
disablePadding: false,
|
||||
label: 'Processed',
|
||||
},
|
||||
{
|
||||
id: 'upload_date',
|
||||
numeric: false,
|
||||
disablePadding: false,
|
||||
label: 'Uploaded at',
|
||||
},
|
||||
|
||||
];
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
function buildContent(row) {
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -1,36 +1,16 @@
|
|||
import React, { useState, useContext } from 'react';
|
||||
import Avatar from '@mui/material/Avatar';
|
||||
import LoadingButton from '@mui/lab/LoadingButton';
|
||||
import CssBaseline from '@mui/material/CssBaseline';
|
||||
import TextField from '@mui/material/TextField';
|
||||
import FormControlLabel from '@mui/material/FormControlLabel';
|
||||
import Checkbox from '@mui/material/Checkbox';
|
||||
import Grid from '@mui/material/Grid';
|
||||
import Paper from '@mui/material/Paper';
|
||||
import Box from '@mui/material/Box';
|
||||
import CircularProgress from '@mui/material/CircularProgress';
|
||||
import LockOutlinedIcon from '@mui/icons-material/LockOutlined';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import Container from '@mui/material/Container';
|
||||
import { createTheme, ThemeProvider } from '@mui/material/styles';
|
||||
import { Link } from "react-router-dom";
|
||||
import PropTypes from 'prop-types';
|
||||
import Tabs from '@mui/material/Tabs';
|
||||
import Tab from '@mui/material/Tab';
|
||||
|
||||
import DrivesLogTable from "./drives";
|
||||
import CrashLogsTable from "./crash";
|
||||
import BootLogsTable from "./boot";
|
||||
import { context as DeviceContext } from "./../../../context/devices"
|
||||
|
||||
import Tooltip from '@mui/material/Tooltip';
|
||||
import IconButton from '@mui/material/IconButton';
|
||||
|
||||
import ContentCopyIcon from '@mui/icons-material/ContentCopy';
|
||||
import {context as SnackbarContext} from "./../../../context/toast"
|
||||
import Grid from '@mui/material/Grid';
|
||||
import IconButton from '@mui/material/IconButton';
|
||||
import Skeleton from "@mui/material/Skeleton";
|
||||
import Tooltip from '@mui/material/Tooltip';
|
||||
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";
|
||||
|
||||
|
||||
|
||||
|
||||
const theme = createTheme();
|
||||
function formatDate(timestampMs) {
|
||||
return new Date(timestampMs).toISOString().replace(/T/, ' ').replace(/\..+/, '');
|
||||
}
|
||||
|
|
@ -42,20 +22,17 @@ function formatDate(timestampMs) {
|
|||
|
||||
export default function SignIn(props) {
|
||||
|
||||
const [value, setValue] = React.useState(0);
|
||||
const [state, dispatch] = useContext(DeviceContext)
|
||||
|
||||
const [ notifState, notifdispatch ] = useContext(SnackbarContext)
|
||||
|
||||
const [state] = useContext(DeviceContext)
|
||||
const [notifState, notifdispatch] = useContext(SnackbarContext)
|
||||
|
||||
function pubKeyClipboard(newClip) {
|
||||
navigator.clipboard.writeText(newClip).then(function() {
|
||||
navigator.clipboard.writeText(newClip).then(function () {
|
||||
notifdispatch({
|
||||
type: "NEW_TOAST",
|
||||
open: true,
|
||||
msg: "Successfully copied to clipboard!"
|
||||
})
|
||||
}, function() {
|
||||
}, function () {
|
||||
notifdispatch({
|
||||
type: "NEW_TOAST",
|
||||
open: true,
|
||||
|
|
@ -63,15 +40,25 @@ export default function SignIn(props) {
|
|||
})
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
const handleChange = (event, newValue) => {
|
||||
setValue(newValue);
|
||||
};
|
||||
|
||||
if (!state.dongles[props.dongleId]) { return (<p>no</p>) }
|
||||
const dongle = state.dongles[props.dongleId];
|
||||
// <span style={{maxWidth: "100%", overflow: "scroll", whiteSpace:"nowrap" }}> {dongle.public_key.split(/\r?\n|\r/g).map((key) => (<p style={{margin: 0}}>{key}</p>))}</span>
|
||||
|
||||
|
||||
if (!dongle) {
|
||||
return (
|
||||
<Grid container>
|
||||
<Grid item xs={3}>
|
||||
<Skeleton animation="wave" />
|
||||
<Skeleton animation="wave" />
|
||||
<Skeleton animation="wave" />
|
||||
</Grid>
|
||||
|
||||
</Grid>
|
||||
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="wrapper" style={{ marginTop: '10px' }}>
|
||||
|
|
@ -80,31 +67,23 @@ export default function SignIn(props) {
|
|||
<Grid container>
|
||||
<Grid item xs={3}>
|
||||
|
||||
<div >
|
||||
|
||||
<b>Nickname:</b> {dongle.nick_name ? dongle.nick_name : `My ${dongle.device_type}`}<br></br>
|
||||
<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>Public Key:</b> -----BEGIN PUBLIC KEY-----
|
||||
<Tooltip title="Copy public key">
|
||||
<IconButton onClick={() => pubKeyClipboard(dongle.public_key)}>
|
||||
<ContentCopyIcon />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<br></br>
|
||||
|
||||
|
||||
<b>Quota Storage: </b>{dongle.storage_used} MB / 200000 MB
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<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>Public Key:</b> -----BEGIN PUBLIC KEY-----
|
||||
<Tooltip title="Copy public key">
|
||||
<IconButton onClick={() => pubKeyClipboard(dongle.public_key)}>
|
||||
<ContentCopyIcon />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<br></br>
|
||||
|
||||
|
||||
<b>Quota Storage: </b>{dongle.storage_used} MB / 200000 MB
|
||||
</Grid>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,96 +1,23 @@
|
|||
import React, { useState, useContext, useEffect } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { alpha } from '@mui/material/styles';
|
||||
import DeleteIcon from '@mui/icons-material/Delete';
|
||||
import FavoriteBorderIcon from '@mui/icons-material/FavoriteBorder';
|
||||
import OpenInNewIcon from '@mui/icons-material/OpenInNew';
|
||||
import { Skeleton } from '@mui/material';
|
||||
import Box from '@mui/material/Box';
|
||||
import IconButton from '@mui/material/IconButton';
|
||||
import Paper from '@mui/material/Paper';
|
||||
import Table from '@mui/material/Table';
|
||||
import TableBody from '@mui/material/TableBody';
|
||||
import TableCell from '@mui/material/TableCell';
|
||||
import TableContainer from '@mui/material/TableContainer';
|
||||
import TableHead from '@mui/material/TableHead';
|
||||
import TablePagination from '@mui/material/TablePagination';
|
||||
import TableRow from '@mui/material/TableRow';
|
||||
import TableSortLabel from '@mui/material/TableSortLabel';
|
||||
import Toolbar from '@mui/material/Toolbar';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import Paper from '@mui/material/Paper';
|
||||
import Checkbox from '@mui/material/Checkbox';
|
||||
import IconButton from '@mui/material/IconButton';
|
||||
import Tooltip from '@mui/material/Tooltip';
|
||||
import FormControlLabel from '@mui/material/FormControlLabel';
|
||||
import Switch from '@mui/material/Switch';
|
||||
import FilterListIcon from '@mui/icons-material/FilterList';
|
||||
import { visuallyHidden } from '@mui/utils';
|
||||
import { context as DeviceContext } from "./../../../context/devices"
|
||||
import * as deviceController from "./../../../controllers/devices"
|
||||
import { Skeleton, ToolTip } from '@mui/material';
|
||||
|
||||
import DeleteIcon from '@mui/icons-material/Delete';
|
||||
import FavoriteBorderIcon from '@mui/icons-material/FavoriteBorder';
|
||||
import FavoriteIcon from '@mui/icons-material/Favorite';
|
||||
import OpenInNewIcon from '@mui/icons-material/OpenInNew';
|
||||
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";
|
||||
|
||||
|
||||
const rows = [
|
||||
|
||||
];
|
||||
|
||||
const headCells = [
|
||||
{
|
||||
id: 'identifier',
|
||||
numeric: false,
|
||||
disablePadding: true,
|
||||
label: 'Identifier',
|
||||
},
|
||||
{
|
||||
id: 'car',
|
||||
numeric: false,
|
||||
disablePadding: false,
|
||||
label: 'Car',
|
||||
},
|
||||
{
|
||||
id: 'version',
|
||||
numeric: false,
|
||||
disablePadding: false,
|
||||
label: 'Version',
|
||||
},
|
||||
{
|
||||
id: 'filesize',
|
||||
numeric: false,
|
||||
disablePadding: false,
|
||||
label: 'Filesize',
|
||||
},
|
||||
{
|
||||
id: 'duration',
|
||||
numeric: false,
|
||||
disablePadding: false,
|
||||
label: 'Duration',
|
||||
},
|
||||
{
|
||||
id: 'distance_meters',
|
||||
numeric: false,
|
||||
disablePadding: false,
|
||||
label: 'Distance',
|
||||
},
|
||||
{
|
||||
id: 'upload_complete',
|
||||
numeric: false,
|
||||
disablePadding: false,
|
||||
label: 'Uploaded',
|
||||
},
|
||||
{
|
||||
id: 'is_processed',
|
||||
numeric: false,
|
||||
disablePadding: false,
|
||||
label: 'Processed',
|
||||
},
|
||||
{
|
||||
id: 'upload_date',
|
||||
numeric: false,
|
||||
disablePadding: false,
|
||||
label: 'Uploaded at',
|
||||
},
|
||||
|
||||
];
|
||||
|
||||
function formatDate(timestampMs) {
|
||||
return new Date(timestampMs).toISOString().replace(/T/, ' ').replace(/\..+/, '');
|
||||
|
|
@ -115,27 +42,20 @@ function formatDuration(durationSeconds) {
|
|||
|
||||
|
||||
export default function EnhancedTable(props) {
|
||||
console.log("HELLO", props.dongleId)
|
||||
const [state, dispatch] = useContext(DeviceContext)
|
||||
|
||||
|
||||
|
||||
const [ notifState, notifdispatch ] = useContext(SnackbarContext)
|
||||
|
||||
useEffect(() => {
|
||||
deviceController.getDrives('53331425').then((res) => {
|
||||
console.log("me result:", res)
|
||||
deviceController.getDrives(props.dongleId).then((res) => {
|
||||
setTimeout(() => {
|
||||
dispatch({ type: "update_dongle_drive", dongle_id: props.dongleId, drives: res.data })
|
||||
}, 1)
|
||||
}).catch((err) => {
|
||||
notifdispatch({type: "NEW_TOAST", msg: 'Failed to load drives'})
|
||||
})
|
||||
|
||||
}, []);
|
||||
|
||||
console.log("drives", state.dongles[props.dongleId])
|
||||
console.log("drives", typeof state.dongles[props.dongleId])
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<Box sx={{ width: '100%' }}>
|
||||
<Paper sx={{ width: '100%', mb: 2 }}>
|
||||
|
|
@ -147,16 +67,16 @@ export default function EnhancedTable(props) {
|
|||
>
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableCell >Identifier</TableCell>
|
||||
<TableCell >Car</TableCell>
|
||||
<TableCell >Version</TableCell>
|
||||
<TableCell >File size</TableCell>
|
||||
<TableCell >Duration</TableCell>
|
||||
<TableCell >Distance</TableCell>
|
||||
<TableCell >uploaded</TableCell>
|
||||
<TableCell >Processed</TableCell>
|
||||
<TableCell >Date</TableCell>
|
||||
<TableCell >Actions</TableCell>
|
||||
<TableCell>Identifier</TableCell>
|
||||
<TableCell>Car</TableCell>
|
||||
<TableCell>Version</TableCell>
|
||||
<TableCell>File size</TableCell>
|
||||
<TableCell>Duration</TableCell>
|
||||
<TableCell>Distance</TableCell>
|
||||
<TableCell>uploaded</TableCell>
|
||||
<TableCell>Processed</TableCell>
|
||||
<TableCell>Date</TableCell>
|
||||
<TableCell>Actions</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
|
||||
|
|
@ -173,7 +93,6 @@ export default function EnhancedTable(props) {
|
|||
<TableRow
|
||||
hover
|
||||
>
|
||||
|
||||
<TableCell
|
||||
scope="row"
|
||||
>{row.identifier}</TableCell>
|
||||
|
|
@ -187,31 +106,30 @@ export default function EnhancedTable(props) {
|
|||
<TableCell >{row.is_processed.toString()}</TableCell>
|
||||
<TableCell >{formatDate(row.drive_date)}</TableCell>
|
||||
|
||||
|
||||
<TableCell>
|
||||
<Tooltip title="Open in new window">
|
||||
<IconButton size="small">
|
||||
<OpenInNewIcon fontSize="inherit"/>
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip title="Preserve">
|
||||
<IconButton size="small">
|
||||
<FavoriteBorderIcon fontSize="inherit"/>
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip title="Delete">
|
||||
<IconButton size="small">
|
||||
<DeleteIcon fontSize="inherit"/>
|
||||
<Tooltip title="Open in new window">
|
||||
<IconButton size="small">
|
||||
<OpenInNewIcon fontSize="inherit" />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip title="Preserve">
|
||||
<IconButton size="small">
|
||||
<FavoriteBorderIcon fontSize="inherit" />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip title="Delete">
|
||||
<IconButton size="small">
|
||||
<DeleteIcon fontSize="inherit" />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
)
|
||||
|
||||
}) :
|
||||
}) :
|
||||
|
||||
[1, 1, 1, 1, 1].map((v) => (
|
||||
<TableRow
|
||||
|
|
@ -239,16 +157,9 @@ export default function EnhancedTable(props) {
|
|||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
|
||||
</Paper>
|
||||
</Box>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,31 +1,15 @@
|
|||
import React, { useState, useContext } from 'react';
|
||||
import Avatar from '@mui/material/Avatar';
|
||||
import LoadingButton from '@mui/lab/LoadingButton';
|
||||
import CssBaseline from '@mui/material/CssBaseline';
|
||||
import TextField from '@mui/material/TextField';
|
||||
import FormControlLabel from '@mui/material/FormControlLabel';
|
||||
import Checkbox from '@mui/material/Checkbox';
|
||||
import Grid from '@mui/material/Grid';
|
||||
import Paper from '@mui/material/Paper';
|
||||
import Box from '@mui/material/Box';
|
||||
import CircularProgress from '@mui/material/CircularProgress';
|
||||
import LockOutlinedIcon from '@mui/icons-material/LockOutlined';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import Container from '@mui/material/Container';
|
||||
import { createTheme, ThemeProvider } from '@mui/material/styles';
|
||||
import { Link } from "react-router-dom";
|
||||
import PropTypes from 'prop-types';
|
||||
import Tabs from '@mui/material/Tabs';
|
||||
import Tab from '@mui/material/Tab';
|
||||
|
||||
import DrivesLogTable from "./drives";
|
||||
import CrashLogsTable from "./crash";
|
||||
import Tabs from '@mui/material/Tabs';
|
||||
import React from 'react';
|
||||
import BootLogsTable from "./boot";
|
||||
import DeviceInfo from './device'
|
||||
import Console from './console'
|
||||
import Console from './console';
|
||||
import CrashLogsTable from "./crash";
|
||||
import DeviceInfo from './device';
|
||||
import DrivesLogTable from "./drives";
|
||||
|
||||
|
||||
|
||||
const theme = createTheme();
|
||||
|
||||
function TabPanel(props) {
|
||||
const { children, value, index, ...other } = props;
|
||||
|
|
@ -61,7 +45,8 @@ export default function SignIn(props) {
|
|||
<div className="wrapper">
|
||||
|
||||
<Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
|
||||
<Tabs value={value} onChange={handleChange} aria-label="basic tabs example">
|
||||
<Tabs value={value} onChange={handleChange} aria-label="basic tabs example" variant="scrollable"
|
||||
scrollButtons="auto">
|
||||
<Tab label="Device" />
|
||||
<Tab label="Drives" />
|
||||
<Tab label="Crashes" />
|
||||
|
|
@ -84,6 +69,11 @@ export default function SignIn(props) {
|
|||
<TabPanel value={value} index={4}>
|
||||
<Console dongleId={props.dongleId} />
|
||||
</TabPanel>
|
||||
|
||||
{
|
||||
|
||||
|
||||
}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,20 +1,7 @@
|
|||
import React, {useState, useContext} from 'react';
|
||||
import Avatar from '@mui/material/Avatar';
|
||||
import LoadingButton from '@mui/lab/LoadingButton';
|
||||
import CssBaseline from '@mui/material/CssBaseline';
|
||||
import TextField from '@mui/material/TextField';
|
||||
import FormControlLabel from '@mui/material/FormControlLabel';
|
||||
import Checkbox from '@mui/material/Checkbox';
|
||||
import Grid from '@mui/material/Grid';
|
||||
import Paper from '@mui/material/Paper';
|
||||
import Box from '@mui/material/Box';
|
||||
import CircularProgress from '@mui/material/CircularProgress';
|
||||
import LockOutlinedIcon from '@mui/icons-material/LockOutlined';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import Container from '@mui/material/Container';
|
||||
import { createTheme, ThemeProvider } from '@mui/material/styles';
|
||||
import { UserContext } from "./../../context/users"
|
||||
import React, { useContext, useState } from 'react';
|
||||
import { Link } from "react-router-dom";
|
||||
import { UserContext } from "./../../context/users";
|
||||
|
||||
const theme = createTheme();
|
||||
|
||||
|
|
|
|||
|
|
@ -1,25 +1,17 @@
|
|||
import React, {useState, useContext} from 'react';
|
||||
import Avatar from '@mui/material/Avatar';
|
||||
import LoadingButton from '@mui/lab/LoadingButton';
|
||||
import CssBaseline from '@mui/material/CssBaseline';
|
||||
import TextField from '@mui/material/TextField';
|
||||
import FormControlLabel from '@mui/material/FormControlLabel';
|
||||
import Checkbox from '@mui/material/Checkbox';
|
||||
import Link from '@mui/material/Link';
|
||||
import Grid from '@mui/material/Grid';
|
||||
import Paper from '@mui/material/Paper';
|
||||
import Box from '@mui/material/Box';
|
||||
import CircularProgress from '@mui/material/CircularProgress';
|
||||
import LockOutlinedIcon from '@mui/icons-material/LockOutlined';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import Container from '@mui/material/Container';
|
||||
import { createTheme, ThemeProvider } from '@mui/material/styles';
|
||||
import { UserContext } from "./../../context/users"
|
||||
const theme = createTheme();
|
||||
import Grid from '@mui/material/Grid';
|
||||
import Link from '@mui/material/Link';
|
||||
import Paper from '@mui/material/Paper';
|
||||
import TextField from '@mui/material/TextField';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import React, { useContext, useState } from 'react';
|
||||
import { UserContext } from "./../../context/users";
|
||||
|
||||
export default function SignIn() {
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [ state, dispatch ] = useContext(UserContext)
|
||||
const [state, dispatch] = useContext(UserContext)
|
||||
console.log("component", state)
|
||||
const handleSubmit = (event) => {
|
||||
dispatch({ type: "toggle_button" })
|
||||
|
|
@ -33,69 +25,79 @@ export default function SignIn() {
|
|||
});
|
||||
|
||||
setLoading(true)
|
||||
|
||||
|
||||
};
|
||||
|
||||
return (
|
||||
<ThemeProvider theme={theme}>
|
||||
<Container component="main" maxWidth="xs">
|
||||
<CssBaseline />
|
||||
<Paper
|
||||
sx={{
|
||||
marginTop: 8,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
style={{
|
||||
padding: '15px'
|
||||
}}
|
||||
>
|
||||
|
||||
<Typography component="h1" variant="h5">
|
||||
Sign in
|
||||
</Typography>
|
||||
<Box component="form" onSubmit={handleSubmit} noValidate sx={{ mt: 1 }}>
|
||||
<TextField
|
||||
margin="normal"
|
||||
required
|
||||
fullWidth
|
||||
id="email"
|
||||
label="Email Address"
|
||||
name="email"
|
||||
autoComplete="email"
|
||||
autoFocus
|
||||
/>
|
||||
|
||||
<TextField
|
||||
margin="normal"
|
||||
required
|
||||
fullWidth
|
||||
name="password"
|
||||
label="Password"
|
||||
type="password"
|
||||
id="password"
|
||||
autoComplete="current-password"
|
||||
/>
|
||||
<Container component="main" maxWidth="xs" style={{ height: '100vh' }}>
|
||||
|
||||
<LoadingButton
|
||||
type="submit"
|
||||
fullWidth
|
||||
variant="contained"
|
||||
sx={{ mt: 3, mb: 2 }}
|
||||
loading={loading}
|
||||
>
|
||||
Sign In
|
||||
</LoadingButton>
|
||||
|
||||
<Link href="#" variant="body2">
|
||||
{"New Here or Forgotten password?"}
|
||||
</Link>
|
||||
</Box>
|
||||
</Paper>
|
||||
</Container>
|
||||
</ThemeProvider>
|
||||
<Grid container direction="row" justifyContent="center" alignItems="center" style={{ height: '100vh' }}>
|
||||
|
||||
<Grid item xs={12}>
|
||||
|
||||
<Paper
|
||||
sx={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
style={{
|
||||
padding: '15px'
|
||||
}}
|
||||
>
|
||||
|
||||
|
||||
|
||||
|
||||
<Typography component="h1" variant="h5" align="left">
|
||||
Sign in
|
||||
</Typography>
|
||||
<Box component="form" onSubmit={handleSubmit} noValidate sx={{ mt: 1 }}>
|
||||
<TextField
|
||||
margin="normal"
|
||||
required
|
||||
fullWidth
|
||||
id="email"
|
||||
label="Email Address"
|
||||
name="email"
|
||||
autoComplete="email"
|
||||
autoFocus
|
||||
/>
|
||||
|
||||
<TextField
|
||||
margin="normal"
|
||||
required
|
||||
fullWidth
|
||||
name="password"
|
||||
label="Password"
|
||||
type="password"
|
||||
id="password"
|
||||
autoComplete="current-password"
|
||||
/>
|
||||
|
||||
<LoadingButton
|
||||
type="submit"
|
||||
fullWidth
|
||||
variant="contained"
|
||||
sx={{ mt: 3, mb: 2 }}
|
||||
loading={loading}
|
||||
>
|
||||
Sign In
|
||||
</LoadingButton>
|
||||
|
||||
<Link href="#" variant="body2">
|
||||
{"New Here or Forgotten password?"}
|
||||
</Link>
|
||||
</Box>
|
||||
</Paper>
|
||||
|
||||
|
||||
|
||||
</Grid>
|
||||
|
||||
|
||||
</Grid>
|
||||
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,48 +1,24 @@
|
|||
import React, { useState, useContext } from 'react';
|
||||
import Avatar from '@mui/material/Avatar';
|
||||
import LoadingButton from '@mui/lab/LoadingButton';
|
||||
import CssBaseline from '@mui/material/CssBaseline';
|
||||
import TextField from '@mui/material/TextField';
|
||||
import FormControlLabel from '@mui/material/FormControlLabel';
|
||||
import Checkbox from '@mui/material/Checkbox';
|
||||
import Grid from '@mui/material/Grid';
|
||||
import Paper from '@mui/material/Paper';
|
||||
import Box from '@mui/material/Box';
|
||||
import CircularProgress from '@mui/material/CircularProgress';
|
||||
import LockOutlinedIcon from '@mui/icons-material/LockOutlined';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import Container from '@mui/material/Container';
|
||||
import { createTheme, ThemeProvider } from '@mui/material/styles';
|
||||
import { UserContext } from "./../../context/users"
|
||||
import { Link } from "react-router-dom";
|
||||
import PropTypes from 'prop-types';
|
||||
import Tabs from '@mui/material/Tabs';
|
||||
import Tab from '@mui/material/Tab';
|
||||
import DeviceData from './../device/deviceData';
|
||||
|
||||
import DeviceOverview from "./../device/overview"
|
||||
import { Scrollbars } from 'rc-scrollbars';
|
||||
import { context as DeviceContext } from "./../../context/devices"
|
||||
|
||||
|
||||
const theme = createTheme();
|
||||
import React, { useContext } from 'react';
|
||||
import { context as DeviceContext } from "./../../context/devices";
|
||||
import DeviceData from './../device/deviceData';
|
||||
import DeviceOverview from "./../device/overview";
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
export default function SignIn() {
|
||||
|
||||
const [value, setValue] = React.useState(0);
|
||||
|
||||
const handleChange = (event, newValue) => {
|
||||
setValue(newValue);
|
||||
};
|
||||
const [deviceState, deviceDispatch] = useContext(DeviceContext);
|
||||
|
||||
console.log("USER ADMIN STATE", deviceState)
|
||||
|
||||
|
||||
let ok = [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1];
|
||||
const [deviceState] = useContext(DeviceContext);
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<div className="wrapper">
|
||||
|
||||
|
|
|
|||
|
|
@ -1,14 +1,10 @@
|
|||
import React, { useEffect, useState, useContext } from 'react';
|
||||
|
||||
|
||||
import {context as DeviceContext} from "./../../context/toast"
|
||||
|
||||
|
||||
import Snackbar from '@mui/material/Snackbar';
|
||||
import Slide from '@mui/material/Slide';
|
||||
import Collapse from '@mui/material/Collapse';
|
||||
import Button from '@mui/material/Button';
|
||||
import CloseIcon from '@mui/icons-material/Close';
|
||||
import React, { useContext } from 'react';
|
||||
import { context as DeviceContext } from "./../../context/toast";
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
export default function Toast(props) {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import React, { createContext, useReducer, useEffect, useRef } from "react";
|
||||
import * as deviceController from "./../../controllers/devices"
|
||||
import React, { createContext, useEffect, useReducer } from "react";
|
||||
import * as deviceController from "./../../controllers/devices";
|
||||
|
||||
function process(state, action) {
|
||||
if (action.type !== "ADD_DATA") { return state }
|
||||
|
|
@ -7,7 +7,6 @@ function process(state, action) {
|
|||
switch (action.data.command) {
|
||||
|
||||
case "dongle_status":
|
||||
console.log("dongle:", action.data.data.dongle_id)
|
||||
return {
|
||||
...state,
|
||||
dongles: {
|
||||
|
|
@ -19,14 +18,7 @@ function process(state, action) {
|
|||
dongle_id: action.data.data.dongle_id
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
case "get_drives": {
|
||||
|
||||
|
||||
|
||||
}
|
||||
default:
|
||||
return state;
|
||||
}
|
||||
|
|
@ -42,14 +34,12 @@ export const Reducer = (state, action) => {
|
|||
return process(state, action);
|
||||
case "fetch_all_dongles":
|
||||
console.log("fetch", action)
|
||||
|
||||
return {
|
||||
...state,
|
||||
dongles: action.data
|
||||
}
|
||||
|
||||
case "update_dongle_drive":
|
||||
|
||||
return {
|
||||
...state,
|
||||
dongles: {
|
||||
|
|
@ -85,9 +75,17 @@ export const Reducer = (state, action) => {
|
|||
}
|
||||
}
|
||||
|
||||
case "user_authentication":
|
||||
return {
|
||||
...state,
|
||||
user: action.user
|
||||
}
|
||||
|
||||
default:
|
||||
return state;
|
||||
|
||||
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -116,7 +114,6 @@ const Store = ({ children }) => {
|
|||
deviceController.getAllDevices().then((devices) => {
|
||||
console.log("store", devices)
|
||||
|
||||
|
||||
dispatch({ type: "fetch_all_dongles", data: devices })
|
||||
})
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,4 @@
|
|||
import { tableBodyClasses } from "@mui/material";
|
||||
import axios from "axios";
|
||||
import {context as DeviceContext} from "./../context/devices"
|
||||
|
||||
|
||||
|
||||
|
|
@ -27,9 +25,9 @@ export async function getAllDevices() {
|
|||
|
||||
if (responseData.success === true) {
|
||||
|
||||
responseData.data.map((object)=>{
|
||||
responseData.data.map((object) => {
|
||||
|
||||
dongles = {
|
||||
return dongles = {
|
||||
...dongles,
|
||||
[object.dongle_id]: {
|
||||
...object,
|
||||
|
|
|
|||
Loading…
Reference in New Issue