Files
Tempest/imports/ui/pages/Home.jsx

80 lines
2.3 KiB
JavaScript

import { Meteor } from 'meteor/meteor';
import React, { useState, useEffect } from 'react';
import { useTracker } from 'meteor/react-meteor-data';
import { useTheme } from '@mui/material/styles';
import _ from 'lodash';
import TextField from "@mui/material/TextField";
import Button from "@mui/material/Button";
import MenuItem from '@mui/material/MenuItem';
import {InputLabel, List, ListItem, ListItemButton, ListItemText} from "@mui/material";
import Box from "@mui/material/Box";
import ToggleButton from '@mui/material/ToggleButton';
import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
import Dialog from '@mui/material/Dialog';
import DialogActions from '@mui/material/DialogActions';
import DialogContent from '@mui/material/DialogContent';
import DialogContentText from '@mui/material/DialogContentText';
import DialogTitle from '@mui/material/DialogTitle';
import {Assets, conditions} from "/imports/api/assets";
import {AssetTypes} from "/imports/api/asset-types";
import {Students} from "/imports/api/students";
import {Staff} from "/imports/api/staff";
import {Link} from "react-router-dom";
const cssTwoColumnContainer = {
display: 'grid',
gridTemplateColumns: "1fr 1fr",
columnGap: '1rem',
rowGap: '0.4rem',
}
const cssEditorField = {
minWidth: '10rem'
}
const Statistics = () => {
const [selectedMissingAsset, setSelectedMissingAsset] = useState("")
const {missingAssets} = useTracker(() => {
let missingAssets = [];
missingAssets = Assets.find({condition: 'Missing'}).fetch();
for(let next of missingAssets) {
next.assetType = AssetTypes.findOne({_id: next.assetTypeId})
}
return {missingAssets}
});
const getListItemStyle = (item) => {
return {
backgroundColor: selectedMissingAsset === item ? '#EECFA6' : 'white'
}
}
return (
<>
<h1>Missing Equipment</h1>
<List>
{missingAssets.map((next, i) => {
return (
<ListItemButton key={next._id} style={getListItemStyle(next)} selected={selectedMissingAsset === next} onClick={(e) => {setSelectedMissingAsset(next)}}>
<ListItemText primary={next.assetId} secondary={next.assetType.name}/>
</ListItemButton>
)
})}
</List>
</>
)
}
export default () => {
// Meteor.subscribe('students');
// Meteor.subscribe('staff');
Meteor.subscribe('assetTypes');
Meteor.subscribe('assets');
return (
<Statistics/>
)
}