111 lines
3.5 KiB
JavaScript
111 lines
3.5 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, functionalConditions} 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 = async () => {
|
|
const [selectedMissingAsset, setSelectedMissingAsset] = useState("")
|
|
|
|
const {assetStatistics} = useTracker(async () => {
|
|
let assetStatistics = []
|
|
const assetTypes = await AssetTypes.find({}, {year: 1}).fetchAsync()
|
|
|
|
for(let type of assetTypes) {
|
|
let count = await Assets.find({assetTypeId: type._id, condition: {$in: functionalConditions}}).countAsync()
|
|
|
|
if(count > 0) {
|
|
assetStatistics.push({name: type.name, count})
|
|
}
|
|
}
|
|
|
|
return {assetStatistics}
|
|
})
|
|
|
|
const {missingAssets} = useTracker(async () => {
|
|
let missingAssets = [];
|
|
|
|
missingAssets = await Assets.find({condition: 'Missing'}).fetchAsync();
|
|
|
|
for(let next of missingAssets) {
|
|
next.assetType = await AssetTypes.findOneAsync({_id: next.assetTypeId})
|
|
}
|
|
|
|
return {missingAssets}
|
|
});
|
|
|
|
const getListItemStyle = (item) => {
|
|
return {
|
|
backgroundColor: selectedMissingAsset === item ? '#EECFA6' : 'white'
|
|
}
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<div style={{display: 'flex', flexFlow: 'row wrap', justifyContent: 'center', alignItems: 'flex-start', columnGap: '1rem'}}>
|
|
<div>
|
|
<h1>Equipment Counts</h1>
|
|
<List sx={{overflow: "auto", maxHeight: "30rem", position: "relative", width: "30rem", border: "1px solid #999", marginBottom: "2rem"}}>
|
|
{assetStatistics.map((next, i) => {
|
|
return (
|
|
<ListItem key={next.name} style={getListItemStyle(next)}>
|
|
<ListItemText primary={next.name} secondary={next.count}/>
|
|
</ListItem>
|
|
)
|
|
})}
|
|
</List>
|
|
</div>
|
|
<div>
|
|
<h1>Missing Equipment</h1>
|
|
<List sx={{overflow: "auto", maxHeight: "30rem", position: "relative", width: "30rem", border: "1px solid #999", marginBottom: "2rem"}}>
|
|
{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>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default () => {
|
|
// Meteor.subscribe('students');
|
|
// Meteor.subscribe('staff');
|
|
Meteor.subscribe('assetTypes');
|
|
Meteor.subscribe('assets');
|
|
|
|
return (
|
|
<Statistics/>
|
|
)
|
|
} |