Cond clean rubbish

photo/src/ImageList.js

@@ -12,15 +12,27 @@ class imageList extends React.Component {
 
         this.state = {
             images: this.props.images,
+            currentImage: 0,
 
             error: null,
             isLoaded: false,
             items: [],
         };
 
+        this.onCurrentImageChange = this.onCurrentImageChange.bind(this);
+        this.deleteImage = this.deleteImage.bind(this);
     }
 
+    onCurrentImageChange(index) {
+        this.setState({ currentImage: index });
+    }
 
+    deleteImage() {
+        if (window.confirm(`Are you sure you want to delete image number ${this.state.currentImage}?`)) {
+            //"/system/file_system/share/new?path="
+            console.log(this.state.images[this.state.currentImage].src);
+        }
+    }
 
 
     componentDidMount() {
@@ -74,7 +86,8 @@ class imageList extends React.Component {
             return ( < Gallery images = { this.state.images }
                 enableLightbox = { true }
                 enableImageSelection={false}
-                
+                currentImageWillChange={this.onCurrentImageChange}
+
                 customControls={[
                     <Button
                         variant="contained"
@@ -82,6 +95,7 @@ class imageList extends React.Component {
                         size="large"
                         style={theme}
                         startIcon={<ShareIcon />}
+                        onClick={this.deleteImage}
                     >Share</Button>
                 ]}
                 />

photo/src/MainPanel.new

@@ -1,430 +0,0 @@
-import React, { Component } from "react";
-import { render } from "react-dom";
-import { makeStyles, useTheme, withStyles } from '@material-ui/core/styles';
-import AppBar from '@material-ui/core/AppBar';
-import Toolbar from '@material-ui/core/Toolbar';
-import Typography from '@material-ui/core/Typography';
-import Button from '@material-ui/core/Button';
-import IconButton from '@material-ui/core/IconButton';
-import MenuIcon from '@material-ui/icons/Menu';
-import clsx from 'clsx';
-import Drawer from '@material-ui/core/Drawer';
-import List from '@material-ui/core/List';
-import CssBaseline from '@material-ui/core/CssBaseline';
-import Divider from '@material-ui/core/Divider';
-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 InboxIcon from '@material-ui/icons/MoveToInbox';
-import MailIcon from '@material-ui/icons/Mail';
-import ImageList from './imageList';
-import PhotoIcon from '@material-ui/icons/Photo';
-import ShareIcon from '@material-ui/icons/Share';
-import PhotoAlbumIcon from '@material-ui/icons/PhotoAlbum';
-import LibraryAddCheckIcon from '@material-ui/icons/LibraryAddCheck';
-import Grid from '@material-ui/core/Grid';
-import DeleteIcon from '@material-ui/icons/Delete';
-import CloudUploadIcon from '@material-ui/icons/CloudUpload';
-import HelpOutlineIcon from '@material-ui/icons/HelpOutline';
-import SettingsIcon from '@material-ui/icons/Settings';
-import Avatar from '@material-ui/core/Avatar';
-import Icon from '@material-ui/core/Icon';
-import AddCircle from '@material-ui/icons/AddCircle';
-import CloudIcon from '@material-ui/icons/Cloud';
-import LinearProgress from '@material-ui/core/LinearProgress';
-import Modal from '@material-ui/core/Modal';
-import Backdrop from '@material-ui/core/Backdrop';
-import Fade from '@material-ui/core/Fade';
-import ListItemAvatar from '@material-ui/core/ListItemAvatar';
-import ImageIcon from '@material-ui/icons/Image';
-import WorkIcon from '@material-ui/icons/Work';
-import BeachAccessIcon from '@material-ui/icons/BeachAccess';
-import Paper from '@material-ui/core/Paper';
-import TodayIcon from '@material-ui/icons/Today';
-import CropOriginalIcon from '@material-ui/icons/CropOriginal';
-import CameraIcon from '@material-ui/icons/Camera';
-import LocationOnIcon from '@material-ui/icons/LocationOn';
-import CloseIcon from '@material-ui/icons/Close';
-import ListSubheader from '@material-ui/core/ListSubheader';
-import Fab from '@material-ui/core/Fab';
-import AddIcon from '@material-ui/icons/Add';
-import ArrowBackIosIcon from '@material-ui/icons/ArrowBackIos';
-import ArrowForwardIosIcon from '@material-ui/icons/ArrowForwardIos';
-import GridList from '@material-ui/core/GridList';
-import GridListTile from '@material-ui/core/GridListTile';
-
-const drawerWidth = 240;
-
-const BorderLinearProgress = withStyles((theme) => ({
-    colorPrimary: {
-        backgroundColor: theme.palette.grey[theme.palette.type === 'light' ? 200 : 700],
-    },
-    bar: {
-        borderRadius: 5,
-        backgroundColor: '#1a90ff',
-    },
-}))(LinearProgress);
-
-const useStyles = makeStyles((theme) => ({
-    root: {
-        flexGrow: 1,
-    },
-    menuButton: {
-        marginRight: theme.spacing(2),
-    },
-    title: {
-        flexGrow: 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,
-    },
-    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),
-    },
-    modal: {
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-    },
-    paper: {
-        backgroundColor: theme.palette.background.paper,
-        width: '100%',
-        height: '100%',
-        //boxShadow: theme.shadows[5],
-        //padding: theme.spacing(2, 4, 3),
-    },
-    fabL: {
-        position: 'absolute',
-        bottom: '50%',
-        left: theme.spacing(2),
-    },
-    fabR: {
-        position: 'absolute',
-        bottom: '50%',
-        //left: `calc(95% - ${theme.spacing(2)}px)`,
-        //right: theme.spacing(2),
-        right: `calc(${theme.spacing(2)}px + ( 100vw / 4 ))`,
-        Mcontainer: {
-            display: "flex",
-            flexWrap: "wrap",
-            position: "absolute",
-            top: 0,
-            left: 0,
-            height: "100%",
-            width: "100%",
-            alignItems: "center"
-        },
-    },
-}));
-
-class MainPanel extends Component {
-    constructor() {
-        super();
-        this.state = {
-            name: "React",
-            showHideDemo1: false,
-            showHideDemo2: false,
-            showHideDemo3: false
-        };
-        this.hideComponent = this.hideComponent.bind(this);
-    }
-
-
-    hideComponent(name) {
-        console.log(name);
-        switch (name) {
-            case "showHideDemo1":
-                this.setState({ showHideDemo1: !this.state.showHideDemo1 });
-                break;
-            case "showHideDemo2":
-                this.setState({ showHideDemo2: !this.state.showHideDemo2 });
-                break;
-            case "showHideDemo3":
-                this.setState({ showHideDemo3: !this.state.showHideDemo3 });
-                break;
-        }
-    }
-
-    render() {
-        
-//const classes = useStyles();
-//const theme = useTheme();
-        const { classes } = this.props;
-        const { theme } = this.props;
-const [open, setOpen] = this.useState(false);
-        const { showHideDemo1, showHideDemo2, showHideDemo3 } = this.state;
-
-        const handleDrawerOpen = () => {
-            setOpen(true);
-        };
-
-        const handleDrawerClose = () => {
-            setOpen(false);
-        };
-
-        const [Imageopen, setImageOpen] = React.useState(false);
-
-        const handleImageOpen = () => {
-            setImageOpen(true);
-        };
-
-        const handleImageClose = () => {
-            setImageOpen(false);
-        };
-
-        return (
-            <div className={classes.root}>
-                <AppBar position="fixed" style={{ background: '#2196f3' }} className={
-                    clsx(classes.appBar, {
-                        [classes.appBarShift]: open,
-                    })
-                }>
-                    <Toolbar >
-                        <IconButton edge="start" onClick={handleDrawerOpen} className={
-                            clsx(classes.menuButton, {
-                                [classes.hide]: open,
-                            })
-                        } className={classes.menuButton} color="inherit" aria-label="menu">
-                            <MenuIcon />
-                        </IconButton>
-                        <Typography variant="h6" className={classes.title}>
-                            谷狗相薄
-                    </Typography>
-                        <Button variant="contained" startIcon={<CloudUploadIcon />} type="button" onClick={handleImageOpen}>上載</Button>
-                        <IconButton style={{ color: '#ffffff' }} aria-label="delete">
-                            <HelpOutlineIcon />
-                        </IconButton>
-                        <IconButton style={{ color: '#ffffff' }} aria-label="delete">
-                            <SettingsIcon />
-                        </IconButton>
-                        <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
-                    </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 === 'ltr' ? <ChevronLeftIcon /> : <ChevronRightIcon />}
-                        </IconButton>
-                    </div>
-                    <Divider />
-                    <List>
-                        {['相片', '共享', '相簿', '實用工具'].map((text, index) => (
-                            <ListItem button key={text} onClick={() => this.hideComponent("showHideDemo1")}>
-                                <ListItemIcon>{index == 0 ? < PhotoIcon /> : index == 1 ? < ShareIcon /> : index == 2 ? < PhotoAlbumIcon /> : < LibraryAddCheckIcon />}</ListItemIcon>
-                                <ListItemText primary={text} />
-                            </ListItem>
-                        ))}
-                    </List>
-                    <Divider />
-                    <List>
-                        {['儲存空間'].map((text, index) => (
-                            <ListItem button key={text}>
-                                <ListItemIcon>{< CloudIcon />}</ListItemIcon>
-                                <ListItemText primary={text} secondary={<BorderLinearProgress variant="determinate" value={50} />} />
-                            </ListItem>
-                        ))}
-                    </List>
-                </Drawer>
-                <main className={classes.content}>
-                    <div className={classes.toolbar} />
-                    {showHideDemo1 && <ImageList />}
-                    <hr />
-                    {showHideDemo2 && <ImageList />}
-                    <hr />
-                    {showHideDemo3 && <ImageList />}
-                    <hr />
-                    <div>
-                        <button onClick={() => this.hideComponent("showHideDemo1")}>
-                            Click to hide Demo1 component
-          </button>
-                        <button onClick={() => this.hideComponent("showHideDemo2")}>
-                            Click to hide Demo2 component
-          </button>
-                        <button onClick={() => this.hideComponent("showHideDemo3")}>
-                            Click to hide Demo3 component
-          </button>
-                    </div>
-                </main>
-                <Modal
-                    aria-labelledby="transition-modal-title"
-                    aria-describedby="transition-modal-description"
-                    className={classes.modal}
-                    open={Imageopen}
-                    onClose={handleImageClose}
-                    closeAfterTransition
-                    BackdropComponent={Backdrop}
-                    BackdropProps={{
-                        timeout: 500,
-                    }}
-                >
-                    <Fade in={Imageopen}>
-                        <div className={classes.paper}>
-                            <Grid container spacing={0}>
-                                <Grid item xs={9}
-                                    style={{
-                                        alignItems: 'center',
-                                        alignContent: 'center',
-                                        backgroundColor: 'black',
-                                        height: '100vh',
-                                    }}
-                                    align="center"
-                                    justify="center"
-                                    direction="column"
-                                >
-                                    <Grid
-                                        container
-                                        spacing={0}
-                                        direction="column"
-                                        alignItems="center"
-                                        justify="center"
-                                        style={{ minHeight: '100vh' }}
-                                    >
-                                        <Grid item xs={12}>
-                                            <img src="./images/Q1_PHYS.jpeg"
-                                                style={{
-                                                    margin: "auto",
-                                                    maxHeight: "100vh",
-                                                    maxWidth: "100%",
-                                                }}
-
-                                            ></img>
-                                        </Grid>
-
-                                    </Grid>
-
-
-                                    <Fab color="inherit" aria-label="add" className={classes.fabL}>
-                                        <ArrowBackIosIcon />
-                                    </Fab>
-                                    <Fab color="inherit" aria-label="add" className={classes.fabR}>
-                                        <ArrowForwardIosIcon />
-                                    </Fab>
-                                </Grid>
-                                <Grid item xs={3}>
-                                    <Typography component="h5">
-                                        <IconButton aria-label="delete" type="button" onClick={handleImageClose}>
-                                            <CloseIcon />
-                                        </IconButton>
-                                    資訊
-                                </Typography>
-                                    <List
-                                        subheader={
-                                            <ListSubheader component="div" id="nested-list-subheader">
-                                                詳細資料
-                                         </ListSubheader>
-                                        }
-                                    >
-                                        <ListItem>
-                                            <ListItemIcon>
-                                                <TodayIcon />
-                                            </ListItemIcon>
-                                            <ListItemText primary="2016年7月14日" secondary="週六 下午5:43 GMT+08:00" />
-                                        </ListItem>
-                                        <ListItem>
-                                            <ListItemIcon>
-                                                <CropOriginalIcon />
-                                            </ListItemIcon>
-                                            <ListItemText primary="IMG_20160716_174348.jpg" secondary="12.8MP 3096×4128 1.6MB" />
-                                        </ListItem>
-                                        <ListItem>
-                                            <ListItemIcon>
-                                                <CameraIcon />
-                                            </ListItemIcon>
-                                            <ListItemText primary="Samsung GT-I9505" secondary="ƒ/2.2 1/33 4.2mm ISO125" />
-                                        </ListItem>
-                                        <ListItem>
-                                            <ListItemIcon>
-                                                <LocationOnIcon />
-                                            </ListItemIcon>
-                                            <ListItemText primary="中國广东省廣州市" secondary="概估位置" />
-                                        </ListItem>
-                                    </List>
-                                </Grid>
-                            </Grid>
-                        </div>
-                    </Fade>
-                </Modal>
-            </div>
-        );
-    }
-}
-
-export default MainPanel;

photo/src/SearchAppMenu.js

@@ -257,10 +257,10 @@ export default function Main(props) {
                 setFolderlistOpen(true);
                 setImagelistOpen(false);
                 break;
-            case "Sharing":
-                setAlertOpen(true);
-            case "Utilities":
-                setAlertOpen(true);
+            //case "Sharing":
+                //setAlertOpen(true);
+            //case "Utilities":
+                //setAlertOpen(true);
         }
     }
 
@@ -345,9 +345,10 @@ export default function Main(props) {
                     </div>
                     <Divider />
                     <List>
-                        {['Photos', 'Sharing', 'Albums', 'Utilities'].map((text, index) => (
+                        {['Photos', /* 'Sharing', */ 'Albums', /* 'Utilities' */].map((text, index) => (
                             <ListItem button key={text} onClick={handleClick(text)}>
-                                <ListItemIcon>{index == 0 ? < PhotoIcon /> : index == 1 ? < ShareIcon /> : index == 2 ? < PhotoAlbumIcon /> : < LibraryAddCheckIcon />}</ListItemIcon>
+                                { /* index == 0 ? < PhotoIcon /> : index == 1 ? < ShareIcon /> : index == 2 ? < PhotoAlbumIcon /> : < LibraryAddCheckIcon /> */}
+                                <ListItemIcon>{index == 0 ? < PhotoIcon /> : < PhotoAlbumIcon />}</ListItemIcon>
                                 <ListItemText primary={text} />
                             </ListItem>
                         ))}

photo/src/SearchAppMenu.js_bk

@@ -1,382 +0,0 @@
-import React from 'react';
-import { makeStyles, useTheme, withStyles } from '@material-ui/core/styles';
-import AppBar from '@material-ui/core/AppBar';
-import Toolbar from '@material-ui/core/Toolbar';
-import Typography from '@material-ui/core/Typography';
-import Button from '@material-ui/core/Button';
-import IconButton from '@material-ui/core/IconButton';
-import MenuIcon from '@material-ui/icons/Menu';
-import clsx from 'clsx';
-import Drawer from '@material-ui/core/Drawer';
-import List from '@material-ui/core/List';
-import CssBaseline from '@material-ui/core/CssBaseline';
-import Divider from '@material-ui/core/Divider';
-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 InfoIcon from '@material-ui/icons/Info';
-import InboxIcon from '@material-ui/icons/MoveToInbox';
-import MailIcon from '@material-ui/icons/Mail';
-import ImageList from './imageList';
-import PhotoIcon from '@material-ui/icons/Photo';
-import ShareIcon from '@material-ui/icons/Share';
-import PhotoAlbumIcon from '@material-ui/icons/PhotoAlbum';
-import LibraryAddCheckIcon from '@material-ui/icons/LibraryAddCheck';
-import Grid from '@material-ui/core/Grid';
-import DeleteIcon from '@material-ui/icons/Delete';
-import CloudUploadIcon from '@material-ui/icons/CloudUpload';
-import HelpOutlineIcon from '@material-ui/icons/HelpOutline';
-import SettingsIcon from '@material-ui/icons/Settings';
-import Avatar from '@material-ui/core/Avatar';
-import Icon from '@material-ui/core/Icon';
-import AddCircle from '@material-ui/icons/AddCircle';
-import CloudIcon from '@material-ui/icons/Cloud';
-import LinearProgress from '@material-ui/core/LinearProgress';
-import Modal from '@material-ui/core/Modal';
-import Backdrop from '@material-ui/core/Backdrop';
-import Fade from '@material-ui/core/Fade';
-import ListItemAvatar from '@material-ui/core/ListItemAvatar';
-import ImageIcon from '@material-ui/icons/Image';
-import WorkIcon from '@material-ui/icons/Work';
-import BeachAccessIcon from '@material-ui/icons/BeachAccess';
-import Paper from '@material-ui/core/Paper';
-import TodayIcon from '@material-ui/icons/Today';
-import CropOriginalIcon from '@material-ui/icons/CropOriginal';
-import CameraIcon from '@material-ui/icons/Camera';
-import LocationOnIcon from '@material-ui/icons/LocationOn';
-import CloseIcon from '@material-ui/icons/Close';
-import ListSubheader from '@material-ui/core/ListSubheader';
-import Fab from '@material-ui/core/Fab';
-import AddIcon from '@material-ui/icons/Add';
-import ArrowBackIosIcon from '@material-ui/icons/ArrowBackIos';
-import ArrowForwardIosIcon from '@material-ui/icons/ArrowForwardIos';
-import GridList from '@material-ui/core/GridList';
-import GridListTile from '@material-ui/core/GridListTile';
-import MiddlePanel from './MiddlePanel';
-import FolderList from './FolderList';
-import Snackbar from '@material-ui/core/Snackbar';
-import MuiAlert from '@material-ui/lab/Alert';
-
-const drawerWidth = 240;
-
-const BorderLinearProgress = withStyles((theme) => ({
-    colorPrimary: {
-        backgroundColor: theme.palette.grey[theme.palette.type === 'light' ? 200 : 700],
-    },
-    bar: {
-        borderRadius: 5,
-        backgroundColor: '#1a90ff',
-    },
-}))(LinearProgress);
-
-const useStyles = makeStyles((theme) => ({
-    root: {
-        flexGrow: 1,
-    },
-    menuButton: {
-        marginRight: theme.spacing(2),
-    },
-    title: {
-        flexGrow: 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,
-    },
-    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),
-    },
-    modal: {
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-    },
-    paper: {
-        backgroundColor: theme.palette.background.paper,
-        width: '100%',
-        height: '100%',
-        //boxShadow: theme.shadows[5],
-        //padding: theme.spacing(2, 4, 3),
-    },
-    fabL: {
-        position: 'absolute',
-        bottom: '50%',
-        left: theme.spacing(2),
-    },
-    fabR: {
-        position: 'absolute',
-        bottom: '50%',
-        //left: `calc(95% - ${theme.spacing(2)}px)`,
-        //right: theme.spacing(2),
-        right: `calc(${theme.spacing(2)}px + ( 100vw / 4 ))`,
-        Mcontainer: {
-                display: "flex",
-                flexWrap: "wrap",
-                position: "absolute",
-                top: 0,
-                left: 0,
-                height: "100%",
-                width: "100%",
-                alignItems: "center"
-        },
-    },
-}));
-
-function Alert(props) {
-    return <MuiAlert elevation={6} variant="filled" {...props} />;
-}
-
-export default function ButtonAppBar() {
-    const classes = useStyles();
-    const theme = useTheme();
-    const [open, setOpen] = React.useState(false);
-
-    const handleDrawerOpen = () => {
-        setOpen(true);
-    };
-
-    const handleDrawerClose = () => {
-        setOpen(false);
-    };
-
-    const [Settingopen, setSettingOpen] = React.useState(false);
-
-    const handleSettingOpen = () => {
-        setSettingOpen(true);
-    };
-
-    const handleSettingClose = () => {
-        setSettingOpen(false);
-    };
-
-    const [Alertopen, setAlertOpen] = React.useState(false);
-
-    const handleAlertClick = () => {
-        setAlertOpen(true);
-    };
-
-    const handleAlertClose = (event, reason) => {
-        if (reason === 'clickaway') {
-            return;
-        }
-
-        setAlertOpen(false);
-    };
-
-    const [Imagelistopen, setImagelistOpen] = React.useState(true);
-    const [Folderlistopen, setFolderlistOpen] = React.useState(false);
-
-    const [folderName, setFolderName] = React.useState('user:/Photo/Photo/uploads/');
-
-    
-    const setFolderNameF = (folderN) => {
-        setFolderName(folderN);
-        console.log("3" + folderName);
-        setImagelistOpen(true);
-        setFolderlistOpen(false);
-    }
-
-    const handleClick = value => () => {
-        console.log(value);
-        switch (value) {
-            case "Photos":
-                setImagelistOpen(true);
-                setFolderlistOpen(false);
-                break;
-            case "Albums":
-                setFolderlistOpen(true);
-                setImagelistOpen(false);
-                break;
-            case "Sharing":
-                setAlertOpen(true);
-            case "Utilities":
-                setAlertOpen(true);
-        }
-    }
-    //1
-    return (
-       
-    
-        <div className={classes.root}>
-            <AppBar position="fixed" style={{ background: '#2196f3' }} className={
-                clsx(classes.appBar, {
-                    [classes.appBarShift]: open,
-                })
-            }>
-                <Toolbar >
-                    <IconButton edge="start" onClick={handleDrawerOpen} className={
-                        clsx(classes.menuButton, {
-                            [classes.hide]: open,
-                        })
-                    } className={classes.menuButton} color="inherit" aria-label="menu">
-                        <MenuIcon />
-                    </IconButton>
-                    <Typography variant="h6" className={classes.title}>
-                        ArOZ Photo
-                    </Typography>
-                    <Button variant="contained" startIcon={<CloudUploadIcon />} type="button" onClick={handleAlertClick}>Upload</Button>
-                    <IconButton style={{ color: '#ffffff' }} aria-label="help" onClick={handleAlertClick}>
-                        <HelpOutlineIcon />
-                    </IconButton>
-                    <IconButton style={{ color: '#ffffff' }} aria-label="settings" onClick={handleSettingOpen}>
-                        <SettingsIcon />
-                    </IconButton>
-                    <Avatar alt="ArOZ Admin" src="/static/images/avatar/1.jpg" />
-                </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 === 'ltr' ? <ChevronLeftIcon /> : <ChevronRightIcon />}
-                        </IconButton>
-                    </div>
-                    <Divider />
-                    <List>
-                        {['Photos', 'Sharing', 'Albums', 'Utilities'].map((text, index) => (
-                            <ListItem button key={text} onClick={handleClick(text)}>
-                                <ListItemIcon>{index == 0 ? < PhotoIcon /> : index == 1 ? < ShareIcon /> : index == 2 ? < PhotoAlbumIcon /> : < LibraryAddCheckIcon />}</ListItemIcon>
-                                <ListItemText primary={text} />
-                            </ListItem>
-                        ))}
-                    </List>
-                    <Divider />
-                    <List>
-                        {['Storage'].map((text, index) => (
-                            <ListItem button key={text}>
-                                <ListItemIcon>{< CloudIcon />}</ListItemIcon>
-                                <ListItemText primary={text} secondary={<BorderLinearProgress variant="determinate" value={0} />} />
-                            </ListItem>
-                        ))}
-                    </List>
-            </Drawer>
-            <main className={classes.content}>
-                <div className={classes.toolbar} />
-                {Imagelistopen && <ImageList path={folderName}/>}
-                {Folderlistopen && <FolderList onChange={setFolderNameF} folderName={setFolderNameF}/>}
-            </main>
-            <Snackbar open={Alertopen} autoHideDuration={6000} onClose={handleAlertClose}>
-                <Alert onClose={handleAlertClose} severity="error">
-                    This function has not been implemented on this platform (aCloud 0x0)
-        </Alert>
-            </Snackbar>
-
-                <Modal
-                    aria-labelledby="transition-modal-title"
-                    aria-describedby="transition-modal-description"
-                    className={classes.modal}
-                    open={Settingopen}
-                    onClose={handleSettingClose}
-                    closeAfterTransition
-                    BackdropComponent={Backdrop}
-                    BackdropProps={{
-                        timeout: 500,
-                    }}
-                >
-                    <Fade in={Settingopen}>
-                    <div className={classes.paper}>
-                        <Grid container alignItems="flex-start" justify="flex-end" direction="row">
-                            <IconButton color="primary" aria-label="close" onClick={handleSettingClose}>
-                                <CloseIcon />
-                            </IconButton>
-                        </Grid>
-                        <List>
-                            <ListItem button>
-                                <ListItemAvatar>
-                                    <Avatar>
-                                        <InfoIcon />
-                                    </Avatar>
-                                </ListItemAvatar>
-                                <ListItemText primary="Version" secondary="v1.0.0-alpha" />
-                            </ListItem>
-                            <ListItem button>
-                                <ListItemAvatar>
-                                    <Avatar>
-                                        <InfoIcon />
-                                    </Avatar>
-                                </ListItemAvatar>
-                                <ListItemText primary="Developer" secondary="Alanyeung.co" />
-                            </ListItem>
-                        </List>
-                        </div>
-                    </Fade>
-                </Modal>
-        </div>
-    );
-}

photo/src/imageList.old

@@ -1,246 +0,0 @@
-import React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import GridList from '@material-ui/core/GridList';
-import GridListTile from '@material-ui/core/GridListTile';
-import GridListTileBar from '@material-ui/core/GridListTileBar';
-import ListSubheader from '@material-ui/core/ListSubheader';
-import IconButton from '@material-ui/core/IconButton';
-import InfoIcon from '@material-ui/icons/Info';
-import tileData from './tileData';
-import Modal from '@material-ui/core/Modal';
-import Backdrop from '@material-ui/core/Backdrop';
-import Fade from '@material-ui/core/Fade';
-import Grid from '@material-ui/core/Grid';
-import Fab from '@material-ui/core/Fab';
-import AddIcon from '@material-ui/icons/Add';
-import ArrowBackIosIcon from '@material-ui/icons/ArrowBackIos';
-import ArrowForwardIosIcon from '@material-ui/icons/ArrowForwardIos';
-import CloseIcon from '@material-ui/icons/Close';
-import TodayIcon from '@material-ui/icons/Today';
-import CropOriginalIcon from '@material-ui/icons/CropOriginal';
-import CameraIcon from '@material-ui/icons/Camera';
-import LocationOnIcon from '@material-ui/icons/LocationOn'
-import Typography from '@material-ui/core/Typography';
-import ListItem from '@material-ui/core/ListItem';
-import ListItemIcon from '@material-ui/core/ListItemIcon';
-import ListItemText from '@material-ui/core/ListItemText';
-import List from '@material-ui/core/List';
-import Paper from '@material-ui/core/Paper';
-import Lightbox from 'react-image-lightbox';
-import 'react-image-lightbox/style.css'; // This only needs to be imported once in your app
-
-const useStyles = makeStyles((theme) => ({
-    root: {
-        display: 'flex',
-        flexWrap: 'wrap',
-        justifyContent: 'space-around',
-        overflow: 'hidden',
-    },
-    gridList: {
-        width: '100%',
-        height: '100%',
-    },
-    icon: {
-        color: 'rgba(255, 255, 255, 0.54)',
-    },
-    modal: {
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-    },
-    paper: {
-        backgroundColor: theme.palette.background.paper,
-        width: '100%',
-        height: '100%',
-        //boxShadow: theme.shadows[5],
-        //padding: theme.spacing(2, 4, 3),
-    },
-    fabL: {
-        position: 'absolute',
-        bottom: '50%',
-        left: theme.spacing(2),
-    },
-    fabR: {
-        position: 'absolute',
-        bottom: '50%',
-        //left: `calc(95% - ${theme.spacing(2)}px)`,
-        //right: theme.spacing(2),
-        right: `calc(${theme.spacing(2)}px + ( 100vw / 4 ))`,
-        Mcontainer: {
-            display: "flex",
-            flexWrap: "wrap",
-            position: "absolute",
-            top: 0,
-            left: 0,
-            height: "100%",
-            width: "100%",
-            alignItems: "center"
-        },
-    },
-}));
-var Imagesrc = 0;
-var FabL = false;
-var FabR = false;
-var Open = false;
-
-export default function TitlebarGridList() {
-    const classes = useStyles();
-
-    const [Imageopen, setImageOpen] = React.useState(false);
-
-    const TDLength = tileData.length;
-
-    //const { photoIndex, isOpen } = this.state;
-
-    const handleClick = (index) => () => {
-        Imagesrc = index;
-        if (index == 0) {
-            FabL = false;
-        } else {
-            FabL = true;
-        }
-        if (TDLength == index + 1) {
-            FabR = false;
-        } else {
-            FabR = true;
-        }
-        console.log(FabL + " " + FabR);
-        setImageOpen(true);
-    }
-
-    const moveFw = () => {
-        Imagesrc++;
-        setImageOpen(false);
-        setImageOpen(true);
-    }
-
-    const moveBw = () => {
-        Imagesrc--;
-        setImageOpen(false);
-        setImageOpen(true);
-    }
-
-    const handleImageClose = () => {
-        setImageOpen(false);
-    };
-
-
-
-    return (
-       
-
-
-
-        <div className={classes.root}>
-            <GridList cellHeight={180} cols={5} className={classes.gridList}>
-                <GridListTile key="Subheader" cols={5} style={{ height: 'auto' }}>
-                    <ListSubheader component="div">December</ListSubheader>
-                </GridListTile>
-                {tileData.map((tile, index) => (
-                    <GridListTile key={tile.img} onClick={handleClick(index)}>
-                        <img src={tile.img} alt={tile.title} />
-                    </GridListTile>
-                ))}
-            </GridList>
-            <Modal
-                aria-labelledby="transition-modal-title"
-                aria-describedby="transition-modal-description"
-                className={classes.modal}
-                open={Imageopen}
-                onClose={handleImageClose}
-                closeAfterTransition
-                BackdropComponent={Backdrop}
-                BackdropProps={{
-                    timeout: 500,
-                }}
-            >
-                <Fade in={Imageopen}>
-                    <div className={classes.paper}>
-                        <Grid container spacing={0}>
-                            <Grid item xs={9}
-                                style={{
-                                    alignItems: 'center',
-                                    alignContent: 'center',
-                                    backgroundColor: 'black',
-                                    height: '100vh',
-                                }}
-                                align="center"
-                                justify="center"
-                                direction="column"
-                            >
-                                <Grid
-                                    container
-                                    spacing={0}
-                                    direction="column"
-                                    alignItems="center"
-                                    justify="center"
-                                    style={{ minHeight: '100vh' }}
-                                >
-                                    <Grid item xs={12}>
-                                        <img src={tileData[this.state.Imagesrc].img}
-                                            style={{
-                                                margin: "auto",
-                                                maxHeight: "100vh",
-                                                maxWidth: "100%",
-                                            }}
-                                        ></img>
-                                    </Grid>
-
-                                </Grid>
-                                {FabL === true ? <Fab color="inherit" aria-label="add" onClick={moveBw} className={classes.fabL}>
-                                    <ArrowBackIosIcon />
-                                </Fab> : ""}
-                                {console.log(FabL + " " + FabR)}
-                                
-                                {FabR === true ? <Fab color="inherit" aria-label="add" onClick={moveFw} className={classes.fabR}>
-                                    <ArrowForwardIosIcon />
-                                </Fab> : ""}
-                            </Grid>
-                            <Grid item xs={3}>
-                                <Typography component="h5">
-                                    <IconButton aria-label="delete" type="button" onClick={handleImageClose}>
-                                        <CloseIcon />
-                                    </IconButton>
-                                    資訊
-                                </Typography>
-                                <List
-                                    subheader={
-                                        <ListSubheader component="div" id="nested-list-subheader">
-                                            詳細資料
-                                         </ListSubheader>
-                                    }
-                                >
-                                    <ListItem>
-                                        <ListItemIcon>
-                                            <TodayIcon />
-                                        </ListItemIcon>
-                                        <ListItemText primary="2016年7月14日" secondary="週六 下午5:43 GMT+08:00" />
-                                    </ListItem>
-                                    <ListItem>
-                                        <ListItemIcon>
-                                            <CropOriginalIcon />
-                                        </ListItemIcon>
-                                        <ListItemText primary="IMG_20160716_174348.jpg" secondary="12.8MP 3096×4128 1.6MB" />
-                                    </ListItem>
-                                    <ListItem>
-                                        <ListItemIcon>
-                                            <CameraIcon />
-                                        </ListItemIcon>
-                                        <ListItemText primary="Samsung GT-I9505" secondary="ƒ/2.2 1/33 4.2mm ISO125" />
-                                    </ListItem>
-                                    <ListItem>
-                                        <ListItemIcon>
-                                            <LocationOnIcon />
-                                        </ListItemIcon>
-                                        <ListItemText primary="中國广东省廣州市" secondary="概估位置" />
-                                    </ListItem>
-                                </List>
-                            </Grid>
-                        </Grid>
-                    </div>
-                </Fade>
-            </Modal>
-        </div>
-        
-    );
-}