Better Activity panel layout

2020-11-12 21:57:28 -05:00
parent 08399c4854
commit b3f373cdb4
2 changed files with 47 additions and 20 deletions
@@ -0,0 +1,123 @@
+import React, { useState, useEffect } from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+import { fetchUtils } from 'react-admin'
+import {
+  Popover,
+  Badge,
+  CircularProgress,
+  IconButton,
+  makeStyles,
+  Tooltip,
+  Card,
+  CardContent,
+  CardActions,
+  Divider,
+  Box,
+} from '@material-ui/core'
+import { FiActivity } from 'react-icons/fi'
+import { VscSync } from 'react-icons/vsc'
+import { GiMagnifyingGlass } from 'react-icons/gi'
+import subsonic from '../subsonic'
+import { scanStatusUpdate } from '../actions'
+
+const useStyles = makeStyles((theme) => ({
+  wrapper: {
+    position: 'relative',
+  },
+  progress: {
+    color: theme.palette.primary.light,
+    position: 'absolute',
+    top: 10,
+    left: 10,
+    zIndex: 1,
+  },
+  button: {
+    color: 'inherit',
+    zIndex: 2,
+  },
+  counterStatus: {
+    minWidth: '16em',
+  },
+}))
+
+const ActivityPanel = () => {
+  const classes = useStyles()
+  const [anchorEl, setAnchorEl] = useState(null)
+  const open = Boolean(anchorEl)
+  const scanStatus = useSelector((state) => state.activity.scanStatus)
+  const dispatch = useDispatch()
+
+  const handleMenuOpen = (event) => setAnchorEl(event.currentTarget)
+  const handleMenuClose = () => setAnchorEl(null)
+  const triggerScan = (full) => () =>
+    fetch(subsonic.url('startScan', null, { fullScan: full }))
+
+  // Get updated status on component mount
+  useEffect(() => {
+    fetchUtils
+      .fetchJson(subsonic.url('getScanStatus'))
+      .then((resp) => resp.json['subsonic-response'])
+      .then((data) => {
+        if (data.status === 'ok') {
+          dispatch(scanStatusUpdate(data.scanStatus))
+        }
+      })
+  }, [dispatch])
+
+  return (
+    <div className={classes.wrapper}>
+      <Tooltip title={'Activity'}>
+        <IconButton className={classes.button} onClick={handleMenuOpen}>
+          <Badge badgeContent={null} color="secondary">
+            <FiActivity size={'20'} />
+          </Badge>
+        </IconButton>
+      </Tooltip>
+      {scanStatus.scanning && (
+        <CircularProgress size={24} className={classes.progress} />
+      )}
+      <Popover
+        id="panel-activity"
+        anchorEl={anchorEl}
+        anchorOrigin={{
+          vertical: 'bottom',
+          horizontal: 'right',
+        }}
+        transformOrigin={{
+          vertical: 'top',
+          horizontal: 'right',
+        }}
+        open={open}
+        onClose={handleMenuClose}
+      >
+        <Card>
+          <CardContent>
+            <Box display="flex" className={classes.counterStatus}>
+              <Box component="span" flex={2}>
+                Total Folders Scanned:
+              </Box>
+              <Box component="span" flex={1}>
+                {scanStatus.count}
+              </Box>
+            </Box>
+          </CardContent>
+          <Divider />
+          <CardActions>
+            <Tooltip title={'Quick Scan'}>
+              <IconButton onClick={triggerScan(false)}>
+                <VscSync />
+              </IconButton>
+            </Tooltip>
+            <Tooltip title={'Full Scan'}>
+              <IconButton onClick={triggerScan(true)}>
+                <GiMagnifyingGlass />
+              </IconButton>
+            </Tooltip>
+          </CardActions>
+        </Card>
+      </Popover>
+    </div>
+  )
+}
+
+export default ActivityPanel