add react web project

2025-12-19 21:46:11 +05:00 · 2020-12-24 12:59:16 +03:00
parent 4e816f2cae
commit a404545133
26 changed files with 20515 additions and 2 deletions
--- a/web/src/components/Appbar.js
+++ b/web/src/components/Appbar.js
@@ -0,0 +1,191 @@
+import React, { useEffect } from 'react'
+import clsx from 'clsx'
+import { makeStyles, useTheme } from '@material-ui/core/styles'
+import Drawer from '@material-ui/core/Drawer'
+import AppBar from '@material-ui/core/AppBar'
+import Toolbar from '@material-ui/core/Toolbar'
+import List from '@material-ui/core/List'
+import CssBaseline from '@material-ui/core/CssBaseline'
+import Typography from '@material-ui/core/Typography'
+import Divider from '@material-ui/core/Divider'
+import IconButton from '@material-ui/core/IconButton'
+import MenuIcon from '@material-ui/icons/Menu'
+import ChevronLeftIcon from '@material-ui/icons/ChevronLeft'
+import ChevronRightIcon from '@material-ui/icons/ChevronRight'
+import ListItem from '@material-ui/core/ListItem'
+import ListItemIcon from '@material-ui/core/ListItemIcon'
+import ListItemText from '@material-ui/core/ListItemText'
+
+import ListIcon from '@material-ui/icons/List'
+import PowerSettingsNewIcon from '@material-ui/icons/PowerSettingsNew'
+
+import TorrentList from './TorrentList'
+import { Box } from '@material-ui/core'
+
+import AddDialog from './Add'
+import RemoveAll from './RemoveAll'
+import SettingsDialog from './Settings'
+import { playlistAllHost, shutdownHost, torrserverHost } from '../utils/Hosts'
+import DonateDialog from './Donate'
+import UploadDialog from './Upload'
+
+const drawerWidth = 240
+
+const useStyles = makeStyles((theme) => ({
+    root: {
+        display: 'flex',
+    },
+    appBar: {
+        zIndex: theme.zIndex.drawer + 1,
+        transition: theme.transitions.create(['width', 'margin'], {
+            easing: theme.transitions.easing.sharp,
+            duration: theme.transitions.duration.leavingScreen,
+        }),
+    },
+    appBarShift: {
+        marginLeft: drawerWidth,
+        width: `calc(100% - ${drawerWidth}px)`,
+        transition: theme.transitions.create(['width', 'margin'], {
+            easing: theme.transitions.easing.sharp,
+            duration: theme.transitions.duration.enteringScreen,
+        }),
+    },
+    menuButton: {
+        marginRight: 36,
+    },
+    hide: {
+        display: 'none',
+    },
+    drawer: {
+        width: drawerWidth,
+        flexShrink: 0,
+        whiteSpace: 'nowrap',
+    },
+    drawerOpen: {
+        width: drawerWidth,
+        transition: theme.transitions.create('width', {
+            easing: theme.transitions.easing.sharp,
+            duration: theme.transitions.duration.enteringScreen,
+        }),
+    },
+    drawerClose: {
+        transition: theme.transitions.create('width', {
+            easing: theme.transitions.easing.sharp,
+            duration: theme.transitions.duration.leavingScreen,
+        }),
+        overflowX: 'hidden',
+        width: theme.spacing(7) + 1,
+        [theme.breakpoints.up('sm')]: {
+            width: theme.spacing(9) + 1,
+        },
+    },
+    toolbar: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'flex-end',
+        padding: theme.spacing(0, 1),
+        // necessary for content to be below app bar
+        ...theme.mixins.toolbar,
+    },
+    content: {
+        flexGrow: 1,
+        padding: theme.spacing(3),
+    },
+}))
+
+export default function MiniDrawer() {
+    const classes = useStyles()
+    const theme = useTheme()
+    const [open, setOpen] = React.useState(false)
+    const [tsVersion, setTSVersion] = React.useState('')
+
+    const handleDrawerOpen = () => {
+        setOpen(true)
+    }
+
+    const handleDrawerClose = () => {
+        setOpen(false)
+    }
+
+    useEffect(() => {
+        fetch(torrserverHost + '/echo')
+            .then((resp) => resp.text())
+            .then((txt) => {
+                if (!txt.startsWith('<!DOCTYPE html>')) setTSVersion(txt)
+            })
+    }, [open])
+
+    return (
+        <div className={classes.root}>
+            <CssBaseline />
+            <AppBar
+                position="fixed"
+                className={clsx(classes.appBar, {
+                    [classes.appBarShift]: open,
+                })}
+            >
+                <Toolbar>
+                    <IconButton
+                        color="inherit"
+                        aria-label="open drawer"
+                        onClick={handleDrawerOpen}
+                        edge="start"
+                        className={clsx(classes.menuButton, {
+                            [classes.hide]: open,
+                        })}
+                    >
+                        <MenuIcon />
+                    </IconButton>
+                    <Typography variant="h6" noWrap>
+                        TorrServer {tsVersion}
+                    </Typography>
+                </Toolbar>
+            </AppBar>
+            <Drawer
+                variant="permanent"
+                className={clsx(classes.drawer, {
+                    [classes.drawerOpen]: open,
+                    [classes.drawerClose]: !open,
+                })}
+                classes={{
+                    paper: clsx({
+                        [classes.drawerOpen]: open,
+                        [classes.drawerClose]: !open,
+                    }),
+                }}
+            >
+                <div className={classes.toolbar}>
+                    <IconButton onClick={handleDrawerClose}>{theme.direction === 'rtl' ? <ChevronRightIcon /> : <ChevronLeftIcon />}</IconButton>
+                </div>
+                <Divider />
+                <List>
+                    <AddDialog />
+                    <UploadDialog />
+                    <RemoveAll />
+                    <DonateDialog />
+                </List>
+                <Divider />
+                <List>
+                    <ListItem button key="Playlist all torrents" onClick={() => window.open(playlistAllHost(), '_blank')}>
+                        <ListItemIcon>
+                            <ListIcon />
+                        </ListItemIcon>
+                        <ListItemText primary="Playlist all torrents" />
+                    </ListItem>
+                    <SettingsDialog />
+                    <ListItem button key="Close server" onClick={() => fetch(shutdownHost())}>
+                        <ListItemIcon>
+                            <PowerSettingsNewIcon />
+                        </ListItemIcon>
+                        <ListItemText primary="Close server" />
+                    </ListItem>
+                </List>
+                <Divider />
+            </Drawer>
+            <main className={classes.content}>
+                <Box m="5em" />
+                <TorrentList />
+            </main>
+        </div>
+    )
+}