Skip to content

Commit

Permalink
feat: npm updates
Browse files Browse the repository at this point in the history
  • Loading branch information
@GoliathLabs
GoliathLabs committed Apr 27, 2024
1 parent 85943e5 commit 9890516
Show file tree
Hide file tree
Showing 10 changed files with 1,225 additions and 4,509 deletions.
5,328 changes: 1,014 additions & 4,314 deletions website/package-lock.json
View file

Large diffs are not rendered by default.

38 changes: 19 additions & 19 deletions website/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,45 +9,45 @@
},
"dependencies": {
"@emotion/react": "^11.11.4",
"@emotion/styled": "^11.11.0",
"@mui/icons-material": "^5.15.11",
"@emotion/styled": "^11.11.5",
"@mui/icons-material": "^5.15.15",
"@mui/lab": "^5.0.0-alpha.166",
"@mui/material": "^5.15.11",
"@mui/styles": "^5.15.11",
"@mui/material": "^5.15.15",
"@mui/styles": "^5.15.15",
"common-tags": "^1.8.2",
"date-fns": "^3.3.1",
"google-protobuf": "^4.0.0-rc.2",
"mobx": "^6.12.0",
"mobx-react": "^9.1.0",
"date-fns": "^3.6.0",
"google-protobuf": "^3.21.2",
"mobx": "^6.12.3",
"mobx-react": "^9.1.1",
"mobx-utils": "^6.0.8",
"numeral": "^2.0.6",
"qrcode": "^1.5.3",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.22.1",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-router-dom": "^6.23.0",
"tweetnacl-ts": "^1.0.3",
"vite-tsconfig-paths": "^4.3.1"
"vite-tsconfig-paths": "^4.3.2"
},
"devDependencies": {
"@types/common-tags": "^1.8.4",
"@types/numeral": "^2.0.5",
"@types/qrcode": "^1.5.5",
"@types/react": "^18.2.60",
"@types/react-dom": "^18.2.19",
"@types/react": "^18.3.1",
"@types/react-dom": "^18.3.0",
"@types/react-router-dom": "^5.3.3",
"@vitejs/plugin-react": "^4.2.1",
"@vitejs/plugin-react-swc": "^3.6.0",
"fork-ts-checker-webpack-plugin": "^9.0.2",
"grpc-ts-web": "^0.2.0",
"prettier": "^3.2.5",
"typescript": "^5.3.3",
"vite": "^5.1.4",
"typescript": "^5.4.5",
"vite": "^5.2.10",
"vite-plugin-svgr": "^4.2.0"
},
"overrides": {
"typescript": "^5.3.3",
"react": "^18.2.0",
"react-dom": "^18.2.0"
"typescript": "^5.4.5",
"react": "^18.3.1",
"react-dom": "^18.3.1"
},
"browserslist": {
"production": [
Expand Down
129 changes: 66 additions & 63 deletions website/src/components/AddDeviceSkeleton.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,69 +1,72 @@
import { Accordion, AccordionDetails, AccordionSummary, Box, Button, Card, CardContent, CardHeader, Checkbox, FormControl, FormControlLabel, FormHelperText, Input, InputLabel, Skeleton, Typography } from "@mui/material";
import {
Accordion,
AccordionDetails,
AccordionSummary,
Box,
Button,
Card,
CardContent,
CardHeader,
Checkbox,
FormControl,
FormControlLabel,
FormHelperText,
Input,
InputLabel,
Skeleton,
Typography,
} from '@mui/material';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import AddIcon from '@mui/icons-material/Add';


export function AddDeviceSkeleton() {
return(
<Card>
<CardHeader title="Add A Device" />
<CardContent>
<FormControl fullWidth>
<InputLabel htmlFor="device-name">
<Skeleton variant="text" width={100} />
</InputLabel>
<Input
id="device-name"
aria-describedby="device-name-text"
return (
<Card>
<CardHeader title="Add A Device" />
<CardContent>
<FormControl fullWidth>
<InputLabel htmlFor="device-name">
<Skeleton variant="text" width={100} />
</InputLabel>
<Input id="device-name" aria-describedby="device-name-text" />
</FormControl>
<Box mt={2} mb={2}>
<Accordion>
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="advanced-options-content"
id="advanced-options-header"
>
<Typography>
<Skeleton variant="text" width={80} />
</Typography>
</AccordionSummary>
<AccordionDetails>
<FormControl fullWidth>
<InputLabel htmlFor="device-publickey">
<Skeleton variant="text" width={180} />
</InputLabel>
<Input id="device-publickey" aria-describedby="device-publickey-text" />
<FormHelperText id="device-publickey-text">
<Skeleton variant="text" width="80%" />
</FormHelperText>
</FormControl>
<FormControlLabel
control={<Checkbox id="device-presharedkey" value={<Skeleton variant="text" width={20} />} />}
label={<Skeleton variant="text" width={100} />}
/>
</FormControl>
<Box mt={2} mb={2}>
<Accordion>
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="advanced-options-content"
id="advanced-options-header"
>
<Typography>
<Skeleton variant="text" width={80} />
</Typography>
</AccordionSummary>
<AccordionDetails>
<FormControl fullWidth>
<InputLabel htmlFor="device-publickey">
<Skeleton variant="text" width={180} />
</InputLabel>
<Input
id="device-publickey"
aria-describedby="device-publickey-text"
/>
<FormHelperText id="device-publickey-text">
<Skeleton variant="text" width="80%" />
</FormHelperText>
</FormControl>
<FormControlLabel
control={
<Checkbox
id="device-presharedkey"
value={<Skeleton variant="text" width={20} />}

/>
}
label={<Skeleton variant="text" width={100} />}
/>
</AccordionDetails>
</Accordion>
</Box>
<Typography component="div" align="right">
<Button color="secondary" type="button" >
Cancel
</Button>
<Button color="primary" variant="contained" endIcon={<AddIcon />} type="submit">
Add
</Button>
</Typography>
</CardContent>
</Card>

);
</AccordionDetails>
</Accordion>
</Box>
<Typography component="div" align="right">
<Button color="secondary" type="button">
Cancel
</Button>
<Button color="primary" variant="contained" endIcon={<AddIcon />} type="submit">
Add
</Button>
</Typography>
</CardContent>
</Card>
);
}
15 changes: 5 additions & 10 deletions website/src/components/DeviceListItem.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,30 +34,25 @@ export const DeviceListItem = observer(
window.alert('api request failed');
}
}

};

render() {
const device = this.props.device;
return (
<Card>
<CardHeader
title={
<Typography style={{ wordBreak: "break-word" }}>
{device.name}
</Typography>
}
subheader={"Last seen: " + lastSeen(device.lastHandshakeTime)}
<CardHeader
title={<Typography style={{ wordBreak: 'break-word' }}>{device.name}</Typography>}
subheader={'Last seen: ' + lastSeen(device.lastHandshakeTime)}
avatar={
<Avatar style={{ backgroundColor: device.connected ? '#76de8a' : '#bdbdbd' }}>
{/* <DonutSmallIcon /> */}
{device.connected ? <WifiIcon /> : <WifiOffIcon />}
</Avatar>
}
action={
<IconButton sx={{ "&:hover": { color: "red" } }} onClick={this.removeDevice}>
<IconButton sx={{ '&:hover': { color: 'red' } }} onClick={this.removeDevice}>
<DeleteIcon />
</IconButton>
</IconButton>
}
/>
<CardContent>
Expand Down
54 changes: 31 additions & 23 deletions website/src/components/DeviceListItemSkeleton.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,42 +1,50 @@
import { Card, CardContent, CardHeader, Skeleton } from "@mui/material";
import { Card, CardContent, CardHeader, Skeleton } from '@mui/material';

export function DeviceListItemSkeleton() {
return(

<Card>
<CardHeader
return (
<Card>
<CardHeader
title={<Skeleton variant="text" width={100} />}
subheader={<Skeleton variant="text" width={50} />}
avatar={<Skeleton variant="circular" width={40} height={40} />}
action={<Skeleton variant="text" width={50} />}
/>
<CardContent>
/>
<CardContent>
<table cellPadding="5">
<tbody>
<tbody>
<tr>
<td>Endpoint</td>
<td><Skeleton variant="text" width={100} /></td>
<td>Endpoint</td>
<td>
<Skeleton variant="text" width={100} />
</td>
</tr>
<tr>
<td>Download</td>
<td><Skeleton variant="text" width={100} /></td>
<td>Download</td>
<td>
<Skeleton variant="text" width={100} />
</td>
</tr>
<tr>
<td>Upload</td>
<td><Skeleton variant="text" width={100} /></td>
<td>Upload</td>
<td>
<Skeleton variant="text" width={100} />
</td>
</tr>
<tr>
<td>Public key</td>
<td><Skeleton variant="text" width={100} /></td>
<td>Public key</td>
<td>
<Skeleton variant="text" width={100} />
</td>
</tr>
<tr>
<td>Pre-shared key</td>
<td><Skeleton variant="text" width={100} /></td>
<td>Pre-shared key</td>
<td>
<Skeleton variant="text" width={100} />
</td>
</tr>
</tbody>
</tbody>
</table>
</CardContent>
</Card>
)

</CardContent>
</Card>
);
}
26 changes: 13 additions & 13 deletions website/src/components/Devices.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,13 +16,13 @@ import { AddDeviceSkeleton } from './AddDeviceSkeleton';
export const Devices = observer(
class Devices extends React.Component {
devices = autorefresh(30, async () => {
try{
const res = await grpc.devices.listDevices({});
return res.items
} catch (error: any){
console.log('An error occurred:', error)
AppState.loadingError = error.message
return null
try {
const res = await grpc.devices.listDevices({});
return res.items;
} catch (error: any) {
console.log('An error occurred:', error);
AppState.loadingError = error.message;
return null;
}
});

Expand All @@ -39,8 +39,8 @@ export const Devices = observer(
}

render() {
if(AppState.loadingError){
return <Error message={AppState.loadingError} />
if (AppState.loadingError) {
return <Error message={AppState.loadingError} />;
}
if (!this.devices.current) {
return (
Expand All @@ -49,15 +49,15 @@ export const Devices = observer(
<Grid container spacing={3}>
{Array.from({ length: 4 }).map((_, i) => (
<Grid key={i} item xs={12} sm={6} md={4} lg={3}>
<DeviceListItemSkeleton />
<DeviceListItemSkeleton />
</Grid>
))}
))}
</Grid>
</Grid>
</Grid>
<Grid item xs={12} sm={10} md={10} lg={6}>
<AddDeviceSkeleton />
</Grid>
</Grid>
</Grid>
);
}
return (
Expand Down
Loading

0 comments on commit 9890516

Please sign in to comment.