Merge pull request #558 from CodeForPhilly/492-update-admin-tab-ui

492: update admin tab UI

Author: c-simpson

src/client/src/pages/Admin.js

@@ -154,42 +154,46 @@ export default function Admin(props) {
 
                     <Grid container item spacing={5} direction="row" style={{padding: 20}}>
                         <Grid container item direction="column" spacing={3} sm={6}>
-                            <Grid item>
-                                <Typography variant="h5">Latest Files</Typography>
-                            </Grid>
-                            <Grid item>
-                                {_.isEmpty(fileListHtml) !== true &&
-                                    <TableContainer component={Paper}>
-                                        <Table aria-label="simple table">
-                                            <TableHead>
-                                                <TableRow>
-                                                    <TableCell><b>File Type</b></TableCell>
-                                                    <TableCell><b>Last Updated</b></TableCell>
-                                                </TableRow>
-                                            </TableHead>
-                                            <TableBody>
-                                                {_.map(fileListHtml, (file, index) => {
-                                                    const fileName = file.split("-")[0];
-                                                    let fileDate = file.split("-").slice(1).join().split(".")[0];
-                                                    let fileDateOnlyNumbers = fileDate.replaceAll(",", "");
-                                                    let fileDateFormatted = moment(fileDateOnlyNumbers, "YYYYMMDDhmmss").local().format("MMMM Do YYYY, h:mm:ss a");
-
-                                                    return (
-                                                        <TableRow key={index}>
-                                                            <TableCell>{fileName}</TableCell>
-                                                            <TableCell>{fileDateFormatted}</TableCell>
+                            {_.isEmpty(fileListHtml) !== true &&
+                                <>
+                                    <Grid item>
+                                        <Typography variant="h5">Latest Files</Typography>
+                                    </Grid>
+                                    <Grid item>
+                                            <TableContainer component={Paper}>
+                                                <Table aria-label="simple table">
+                                                    <TableHead>
+                                                        <TableRow>
+                                                            <TableCell><b>File Type</b></TableCell>
+                                                            <TableCell><b>Last Updated</b></TableCell>
                                                         </TableRow>
-                                                    )
-                                                })
-                                                }
-                                            </TableBody>
-                                        </Table>
-                                    </TableContainer>}
-                            </Grid>
+                                                    </TableHead>
+                                                    <TableBody>
+                                                        {_.map(fileListHtml, (file, index) => {
+                                                            const fileName = file.split("-")[0];
+                                                            let fileDate = file.split("-").slice(1).join().split(".")[0];
+                                                            let fileDateOnlyNumbers = fileDate.replaceAll(",", "");
+                                                            let fileDateFormatted = moment(fileDateOnlyNumbers, "YYYYMMDDhmmss").local().format("MMMM Do YYYY, h:mm:ss a");
+
+                                                            return (
+                                                                <TableRow key={index}>
+                                                                    <TableCell>{fileName}</TableCell>
+                                                                    <TableCell>{fileDateFormatted}</TableCell>
+                                                                </TableRow>
+                                                            )
+                                                        })
+                                                        }
+                                                    </TableBody>
+                                                </Table>
+                                            </TableContainer>
+                                    </Grid>
+                                </>
+                            }
                             <Grid item>
                                 <Paper>
                                     <CardContent>
                                         <Typography variant="h5">Upload Files</Typography>
+                                        <Typography variant="caption">Note: This upload feature now only accepts Volgistics data files. Other data is uploaded automatically.</Typography>
                                         <form onSubmit={handleUpload}>
                                             <input type="file" id="fileItemsID"
                                                    value={filesInput}
@@ -205,6 +209,19 @@ export default function Admin(props) {
                             </Grid>
                         </Grid>
                         <Grid container item direction="column" spacing={3} sm={6}>
+                            <Grid item>
+                                <Paper style={{ padding: 5 }}>
+                                    <CardContent>
+                                        <Typography variant="h5" styles={{paddingBottom: 5}}>Run New Analysis</Typography>
+                                        <form onSubmit={handleExecute}>
+                                            <Button type="submit" variant="contained" color="primary"
+                                                    disabled={statistics === 'Running'}>
+                                                Run Data Analysis
+                                            </Button>
+                                        </form>
+                                    </CardContent>
+                                </Paper>
+                            </Grid>
                             <Grid item>
                                 <Typography variant="h5">Last Match Analysis</Typography>
                             </Grid>
@@ -237,19 +254,6 @@ export default function Admin(props) {
                                     </TableContainer>
                                 }
                             </Grid>
-                            <Grid item>
-                                <Paper style={{padding: 5, marginTop: 10}}>
-                                    <CardContent>
-                                        <Typography variant="h5" styles={{paddingBottom: 5}}>Run New Analysis</Typography>
-                                        <form onSubmit={handleExecute}>
-                                            <Button type="submit" variant="contained" color="primary"
-                                                    disabled={statistics === 'Running'}>
-                                                Run Data Analysis
-                                            </Button>
-                                        </form>
-                                    </CardContent>
-                                </Paper>
-                            </Grid>
 
                         </Grid>
                     </Grid>