dddd

photo/package-lock.json

@@ -1420,6 +1420,18 @@
         "@babel/runtime": "^7.4.4"
       }
     },
+    "@material-ui/lab": {
+      "version": "4.0.0-alpha.56",
+      "resolved": "https://registry.npmjs.org/@material-ui/lab/-/lab-4.0.0-alpha.56.tgz",
+      "integrity": "sha512-xPlkK+z/6y/24ka4gVJgwPfoCF4RCh8dXb1BNE7MtF9bXEBLN/lBxNTK8VAa0qm3V2oinA6xtUIdcRh0aeRtVw==",
+      "requires": {
+        "@babel/runtime": "^7.4.4",
+        "@material-ui/utils": "^4.10.2",
+        "clsx": "^1.0.4",
+        "prop-types": "^15.7.2",
+        "react-is": "^16.8.0"
+      }
+    },
     "@material-ui/styles": {
       "version": "4.10.0",
       "resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.10.0.tgz",

photo/package.json

@@ -5,6 +5,7 @@
   "dependencies": {
     "@material-ui/core": "^4.11.0",
     "@material-ui/icons": "^4.9.1",
+    "@material-ui/lab": "^4.0.0-alpha.56",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.5.0",
     "@testing-library/user-event": "^7.2.1",

photo/public/listFile

@@ -0,0 +1,10 @@
+[
+    {
+        "thumbnail":"user:/Photo/Photo/uploads/thumbnails/CUSISlomo.png",
+        "caption":"CUSISlomo.png",
+        "thumbnailHeight":1536,
+        "Size":"184 KB",
+        "src":"user:/Photo/Photo/uploads/CUSISlomo.png",
+        "thumbnailWidth":1536
+        }
+]

photo/public/listFolder

@@ -0,0 +1 @@
+[{"Foldername":"DKLM","VPath":"user:/Photo/Photo/storage/DKLM/"}]

photo/src/FolderList.js

@@ -0,0 +1,107 @@
+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 { useEffect } from 'react';
+import imageList from './imageList.js';
+
+
+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)',
+    },
+}));
+
+/**
+ * The example data is structured as follows:
+ *
+ * import image from 'path/to/image.jpg';
+ * [etc...]
+ *
+ * const tileData = [
+ *   {
+ *     img: image,
+ *     title: 'Image',
+ *     author: 'author',
+ *   },
+ *   {
+ *     [etc...]
+ *   },
+ * ];
+ */
+export default function TitlebarGridList() {
+
+    const classes = useStyles();
+
+    const [error, setError] = React.useState(null);
+    const [isLoaded, setIsLoaded] = React.useState(false);
+    const [items, setItems] = React.useState([]);
+
+    const [folderName, setFolderName] = React.useState('');
+
+    const onChanageFolder = (folderN) => {
+        setFolderName(folderN);
+        console.log("1" + folderName);
+        this.props.folderName(folderName);   
+    }
+
+    useEffect(() => {
+        fetch("http://localhost:3000/listFolder")
+            .then(res => res.json())
+            .then(
+                (result) => {
+                    setIsLoaded(true);
+                    setItems(result);
+                },
+                // Note: it's important to handle errors here
+                // instead of a catch() block so that we don't swallow
+                // exceptions from actual bugs in components.
+                (error) => {
+                    setIsLoaded(true);
+                    setError(error);
+                }
+            )
+    }, [])
+
+    
+    if (error) {
+        return <div>Error: {error.message}</div>;
+    } else if (!isLoaded) {
+        return <div>Loading...</div>;
+    } else {
+        return (
+            <div className={classes.root}>
+                <GridList cellHeight={180} cols={5} className={classes.gridList}>
+                    {items.map((tile) => (
+                        <GridListTile key={tile.img}>
+                            <img src={tile.img} alt={tile.Foldername} />
+                            <GridListTileBar
+                                title={tile.Foldername}
+                                actionIcon={
+                                    <IconButton aria-label={`info about ${tile.Foldername}`} onClick={() => onChanageFolder(tile.Foldername)} className={classes.icon}>
+                                        <InfoIcon />
+                                    </IconButton>
+                                }
+                            />
+                        </GridListTile>
+                    ))}
+                </GridList>
+            </div>
+        );
+    }
+}

photo/src/ImageList.js

@@ -3,23 +3,53 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import Gallery from 'react-grid-gallery';
 
-
 class imageList extends React.Component {
     constructor(props) {
         super(props);
 
         this.state = {
-            images: this.props.images
+            images: this.props.images,
+
+            error: null,
+            isLoaded: false,
+            items: [],
+            path: "",
         };
 
     }
 
+    componentDidMount() {
+        fetch("http://localhost:3000/listFile?path=" + this.state.path)
+            .then(res => res.json())
+            .then(
+                (result) => {
+                    this.setState({
+                        isLoaded: true,
+                        images: result
+                    });
+                },
+                // Note: it's important to handle errors here
+                // instead of a catch() block so that we don't swallow
+                // exceptions from actual bugs in components.
+                (error) => {
+                    this.setState({
+                        isLoaded: true,
+                        error
+                    });
+                }
+            )
+    }
+
+    setPath() {
+        this.setState({ path: "123" });
+    }
+
     render() {
-        return (
-                <Gallery
-                    images={this.state.images}
-                    enableLightbox={true}
-                    enableImageSelection={false} />
+        const { isLoaded, items } = this.state;
+        return ( < Gallery images = { this.state.images }
+            enableLightbox = { true }
+            enableImageSelection = { false }
+            />
         );
     }
 }
@@ -40,64 +70,9 @@ imageList.propTypes = {
     ).isRequired
 };
 
+
 imageList.defaultProps = {
-    images: [
-        {
-            src: "https://c2.staticflickr.com/9/8817/28973449265_07e3aa5d2e_b.jpg",
-            thumbnail: "https://c2.staticflickr.com/9/8817/28973449265_07e3aa5d2e_n.jpg",
-            thumbnailWidth: 320,
-            thumbnailHeight: 174,
-            caption: "After Rain (Jeshu John - designerspics.com)"
-        },
-        {
-            src: "https://c6.staticflickr.com/9/8890/28897154101_a8f55be225_b.jpg",
-            thumbnail: "https://c6.staticflickr.com/9/8890/28897154101_a8f55be225_n.jpg",
-            thumbnailWidth: 320,
-            thumbnailHeight: 183,
-            caption: "37H (gratispgraphy.com)"
-        },
-        {
-            src: "https://c7.staticflickr.com/9/8106/28941228886_86d1450016_b.jpg",
-            thumbnail: "https://c7.staticflickr.com/9/8106/28941228886_86d1450016_n.jpg",
-            thumbnailWidth: 271,
-            thumbnailHeight: 320,
-            caption: "Orange Macro (Tom Eversley - isorepublic.com)"
-        },
-        {
-            src: "https://c6.staticflickr.com/9/8342/28897193381_800db6419e_b.jpg",
-            thumbnail: "https://c6.staticflickr.com/9/8342/28897193381_800db6419e_n.jpg",
-            thumbnailWidth: 320,
-            thumbnailHeight: 213,
-            caption: "201H (gratisography.com)"
-        },
-        {
-            src: "https://c8.staticflickr.com/9/8104/28973555735_ae7c208970_b.jpg",
-            thumbnail: "https://c8.staticflickr.com/9/8104/28973555735_ae7c208970_n.jpg",
-            thumbnailWidth: 320,
-            thumbnailHeight: 213,
-            caption: "Flower Interior Macro (Tom Eversley - isorepublic.com)"
-        },
-        {
-            src: "https://c1.staticflickr.com/9/8707/28868704912_cba5c6600e_b.jpg",
-            thumbnail: "https://c1.staticflickr.com/9/8707/28868704912_cba5c6600e_n.jpg",
-            thumbnailWidth: 320,
-            thumbnailHeight: 213,
-            caption: "Man on BMX (Tom Eversley - isorepublic.com)"
-        },
-        {
-            src: "https://c4.staticflickr.com/9/8578/28357117603_97a8233cf5_b.jpg",
-            thumbnail: "https://c4.staticflickr.com/9/8578/28357117603_97a8233cf5_n.jpg",
-            thumbnailWidth: 320,
-            thumbnailHeight: 213,
-            caption: "Ropeman - Thailand (Tom Eversley - isorepublic.com)"
-        },
-        {
-            src: "https://c1.staticflickr.com/9/8056/28354485944_148d6a5fc1_b.jpg",
-            thumbnail: "https://c1.staticflickr.com/9/8056/28354485944_148d6a5fc1_n.jpg",
-            thumbnailWidth: 257,
-            thumbnailHeight: 320,
-            caption: "A photo by 贝莉儿 NG. (unsplash.com)"
-        }
-    ]
+    images: []
 };
-export default imageList;
+
+export default imageList;

photo/src/SearchAppMenu.js

@@ -54,6 +54,9 @@ 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;
 
@@ -180,6 +183,10 @@ const useStyles = makeStyles((theme) => ({
     },
 }));
 
+function Alert(props) {
+    return <MuiAlert elevation={6} variant="filled" {...props} />;
+}
+
 export default function ButtonAppBar() {
     const classes = useStyles();
     const theme = useTheme();
@@ -203,22 +210,46 @@ export default function ButtonAppBar() {
         setImageOpen(false);
     };
 
-    const [Imagelistopen, setImagelistOpen] = React.useState(false);
+    const [Alertopen, setAlertOpen] = React.useState(false);
 
-    const handleImagelistOpen = () => {
-        setImagelistOpen(true);
+    const handleAlertClick = () => {
+        setAlertOpen(true);
     };
 
-    const handleImagelistClose = () => {
-        setImagelistOpen(false);
+    const handleAlertClose = (event, reason) => {
+        if (reason === 'clickaway') {
+            return;
+        }
+
+        setAlertOpen(false);
     };
 
+    const [Imagelistopen, setImagelistOpen] = React.useState(false);
+    const [Folderlistopen, setFolderlistOpen] = React.useState(false);
+
+    const [folderName, setFolderName] = React.useState('');
+
+    const setFolderNameF = (folderN) => {
+        setFolderName(folderN);
+        console.log("3" + folderN);
+    }
+
+
     const handleClick = value => () => {
         console.log(value);
         switch (value) {
             case "相片":
                 setImagelistOpen(true);
+                setFolderlistOpen(false);
+                break;
+            case "相簿":
+                setFolderlistOpen(true);
+                setImagelistOpen(false);
                 break;
+            case "共享":
+                setAlertOpen(true);
+            case "實用工具":
+                setAlertOpen(true);
         }
     }
     //1
@@ -242,11 +273,11 @@ export default function ButtonAppBar() {
                     <Typography variant="h6" className={classes.title}>
                         谷狗相薄
                     </Typography>
-                    <Button variant="contained" startIcon={<CloudUploadIcon />} type="button" onClick={handleImageOpen}>上載</Button>
-                    <IconButton style={{ color: '#ffffff' }} aria-label="delete">
+                    <Button variant="contained" startIcon={<CloudUploadIcon />} type="button" onClick={handleAlertClick}>上載</Button>
+                    <IconButton style={{ color: '#ffffff' }} aria-label="delete" onClick={handleAlertClick}>
                         <HelpOutlineIcon />
                     </IconButton>
-                    <IconButton style={{ color: '#ffffff' }} aria-label="delete">
+                    <IconButton style={{ color: '#ffffff' }} aria-label="delete" onClick={handleAlertClick}>
                         <SettingsIcon />
                     </IconButton>
                     <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
@@ -294,9 +325,15 @@ export default function ButtonAppBar() {
             </Drawer>
             <main className={classes.content}>
                 <div className={classes.toolbar} />
-                <MiddlePanel />
-                {Imagelistopen && <ImageList />}
+                {Imagelistopen && <ImageList folder={folderName}/>}
+                {Folderlistopen && <FolderList 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"