Home Explore Help
Sign In
yeungalan
/
Photo_React
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

update

yeungalan 4 years ago
parent
c0b344ac0a
commit
83e9ec7b52
21 changed files with 146 additions and 33 deletions
Split View Show Diff Stats
  1. BIN
      .DS_Store
  2. BIN
      photo/.DS_Store
  3. 59 0
      photo/public/backend/listFile.js
  4. 32 0
      photo/public/backend/listFolder.js
  5. 2 0
      photo/public/backend/search.js
  6. BIN
      photo/public/images/Q12.jpeg
  7. BIN
      photo/public/images/Q1234.jpeg
  8. BIN
      photo/public/images/Q1_PHYS.jpeg
  9. BIN
      photo/public/img/desktop_icon.png
  10. BIN
      photo/public/img/module_icon.png
  11. BIN
      photo/public/img/pwa/128.png
  12. BIN
      photo/public/img/pwa/192.png
  13. BIN
      photo/public/img/pwa/256.png
  14. BIN
      photo/public/img/pwa/512.png
  15. 17 12
      photo/public/index.html
  16. 23 0
      photo/public/init.agi
  17. 0 10
      photo/public/listFile
  18. 0 1
      photo/public/listFolder
  19. 4 3
      photo/src/FolderList.js
  20. 5 3
      photo/src/ImageList.js
  21. 4 4
      photo/src/SearchAppMenu.js

BIN
.DS_Store
View File


BIN
photo/.DS_Store
View File


+ 59 - 0
photo/public/backend/listFile.js
View File 

@@ -0,0 +1,59 @@
 
+/* 
+What to implemetenation
 
+-thumbnail
 
+-search
 
+*/
 
+//Help function for converting byte to human readable format
 
+function bytesToSize(bytes) {
 
+    var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
 
+    if (bytes == 0) return '0 Byte';
 
+    var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
 
+    return Math.round(bytes / Math.pow(1024, i), 2) + ' ' + sizes[i];
 
+}
 
+
 
+var loadedImage = requirelib("imagelib");
 
+if (!loadedImage) {
 
+    console.log("Failed to load lib imagelib, terminated.");
 
+}
 
+
 
+var loadedfile = requirelib("filelib");
 
+if (!loadedfile) {
 
+    console.log("Failed to load lib filelib, terminated.");
 
+}
 
+
 
+//Get all the files filesize on desktop
 
+//folder = "user:/Photo/Photo/uploads/"
 
+folder = JSON.parse(POST_data)["folder"];
 
+var fileList = filelib.glob(folder + "*.*");
 
+var results = [];
 
+for (var i = 0; i < fileList.length; i++) {
 
+    if (!filelib.isDir(fileList[i])) { //Well I don't had isFile, then use !isDir have same effect.
 
+        var subFilename = fileList[i].split(".").pop().toLowerCase();
 
+        if (["jpg", "jpeg", "gif", "png"].indexOf(subFilename) >= 0) {
 
+            //imagelib.resizeImage(src, dest, width, height)
 
+            var filename = fileList[i].split("/").pop();
 
+            var fileSize = filelib.filesize(fileList[i]);
 
+            var dimension = imagelib.getImageDimension(folder + filename);
 
+            filelib.mkdir(folder + "thumbnails/");
 
+            var thumbnailsPath = folder + "thumbnails/" + filename;
 
+
 
+            if (!filelib.fileExists(thumbnailsPath)) {
 
+                var success = imagelib.resizeImage(fileList[i], thumbnailsPath, 200, 0);
 
+                if (success) {} else {
 
+                    sendResp("Failed to resize image");
 
+                }
 
+            }
 
+
 
+
 
+            results.push({
 
+                src: "/media/?file=" + folder + filename,
 
+                caption: filename,
 
+                Size: bytesToSize(fileSize),
 
+                thumbnail: "/media/?file=" + thumbnailsPath,
 
+                thumbnailHeight: dimension[1],
 
+                thumbnailWidth: dimension[0]
 
+            });
 
+        }
 
+    }
 
+}
 
+sendJSONResp(JSON.stringify(results));

+ 32 - 0
photo/public/backend/listFolder.js
View File 

@@ -0,0 +1,32 @@
 
+var loadedfile = requirelib("filelib");
 
+if (!loadedfile) {
 
+    console.log("Failed to load lib filelib, terminated.");
 
+}
 
+
 
+var folderList = filelib.glob("user:/Photo/Photo/storage/*");
 
+var arr = [];
 
+//add uploads folder
 
+var img = ChooseFirstImage("user:/Photo/Photo/uploads/");
 
+arr.push({ VPath: "user:/Photo/Photo/uploads/", Foldername: "uploads", img: img })
 
+
 
+for (var i = 0; i < folderList.length; i++) {
 
+    if (filelib.isDir(folderList[i])) {
 
+        img = ChooseFirstImage(folderList[i]);
 
+        arr.push({ VPath: folderList[i] + "/", Foldername: folderList[i].split("/").pop(), img: img })
 
+    }
 
+}
 
+
 
+function ChooseFirstImage(folder) {
 
+    var fileList = filelib.glob(folder + "/*.*");
 
+    for (var i = 0; i < fileList.length; i++) {
 
+        if (!filelib.isDir(fileList[i])) { //Well I don't had isFile, then use !isDir have same effect.
 
+            var subFilename = fileList[i].split(".").pop().toLowerCase();
 
+            if (["jpg", "jpeg", "gif", "png"].indexOf(subFilename) >= 0) {
 
+                return "/media/?file=" + fileList[i];
 
+            }
 
+        }
 
+    }
 
+    return "/Photo/img/desktop_icon.png";
 
+}
 
+
 
+sendJSONResp(JSON.stringify(arr))

+ 2 - 0
photo/public/backend/search.js
View File 

@@ -0,0 +1,2 @@
 
+var results = [{ "name": "File: " + q, "value": "file:" + q }];
 
+sendJSONResp(JSON.stringify(results));

BIN
photo/public/images/Q12.jpeg
View File


BIN
photo/public/images/Q1234.jpeg
View File


BIN
photo/public/images/Q1_PHYS.jpeg
View File


BIN
photo/public/img/desktop_icon.png
View File


BIN
photo/public/img/module_icon.png
View File


BIN
photo/public/img/pwa/128.png
View File


BIN
photo/public/img/pwa/192.png
View File


BIN
photo/public/img/pwa/256.png
View File


BIN
photo/public/img/pwa/512.png
View File


+ 17 - 12
photo/public/index.html
View File 

@@ -1,20 +1,18 @@
 
 <!DOCTYPE html>
 
 <html lang="en">
 
-  <head>
 
+
 
+<head>
 
     <meta charset="utf-8" />
 
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 
+    <link rel="icon" href="/Photo/favicon.ico" />
 
     <meta name="viewport" content="width=device-width, initial-scale=1" />
 
     <meta name="theme-color" content="#000000" />
 
-    <meta
 
-      name="description"
 
-      content="Web site created using create-react-app"
 
-    />
 
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
 
+    <meta name="description" content="Web site created using create-react-app" />
 
+    <link rel="apple-touch-icon" href="/Photo/logo192.png" />
 
     <!--
 
       manifest.json provides metadata used when your web app is installed on a
 
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
 
     -->
 
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
 
+    <link rel="manifest" href="/Photo/manifest.json" />
 
     <!--
 
       Notice the use of %PUBLIC_URL% in the tags above.
 
       It will be replaced with the URL of the `public` folder during the build.
 
@@ -25,8 +23,14 @@
 
       Learn how to configure a non-root public URL by running `npm run build`.
 
     -->
 
     <title>React App</title>
 
-  </head>
 
-  <body>
 
+    <style>
 
+        body {
 
+            background-color: white;
 
+        }
 
+    </style>
 
+</head>
 
+
 
+<body>
 
     <noscript>You need to enable JavaScript to run this app.</noscript>
 
     <div id="root"></div>
 
     <!--
 
@@ -39,5 +43,6 @@
 
       To begin the development, run `npm start` or `yarn start`.
 
       To create a production bundle, use `npm run build` or `yarn build`.
 
     -->
 
-  </body>
 
-</html>
 
+</body>
 
+
 
+</html>

+ 23 - 0
photo/public/init.agi
View File 

@@ -0,0 +1,23 @@
 
+/*
 
+	Photo Module Register Script
 
+*/
 
+
 
+//Setup the module information
 
+var moduleLaunchInfo = {
 
+    Name: "Photo",
 
+	Desc: "The worst photo webapp",
 
+	Group: "Media",
 
+	IconPath: "Photo/img/module_icon.png",
 
+	Version: "0.0.1",
 
+	StartDir: "Photo/index.html",
 
+	SupportFW: true,
 
+	LaunchFWDir: "Photo/index.html",
 
+	SupportEmb: true,
 
+	LaunchEmb: "Photo/embedded.html",
 
+	InitFWSize: [900, 550],
 
+	InitEmbSize: [900, 500],
 
+	SupportedExt: [".jpg",".jpeg",".gif",".png"]
 
+}
 
+
 
+//Register the module
 
+registerModule(JSON.stringify(moduleLaunchInfo));

+ 0 - 10
photo/public/listFile
View File 

@@ -1,10 +0,0 @@
 
-[
 
-    {
 
-        "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
 
-        }
 
-]

+ 0 - 1
photo/public/listFolder
View File 

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

+ 4 - 3
photo/src/FolderList.js
View File 

@@ -10,6 +10,7 @@ import tileData from './tileData';
 
 import { useEffect } from 'react';
 
 import imageList from './imageList.js';
 
 import LinearProgress from '@material-ui/core/LinearProgress';
 
+import ArrowForwardIcon from '@material-ui/icons/ArrowForward';
 
 
 const useStyles = makeStyles((theme) => ({
 
     root: {
 
@@ -84,7 +85,7 @@ export default function TitlebarGridList(props) {
 
 
     
     if (error) {
 
-        return <div>Error: {error.message}</div>;
 
+        return <div>Error: {error.message} (FolderList.js)</div>;
 
     } else if (!isLoaded) {
 
         return <div><LinearProgress /></div>;
 
     } else {
 
@@ -92,13 +93,13 @@ export default function TitlebarGridList(props) {
 
             <div className={classes.root}>
 
                 <GridList cellHeight={180} cols={5} className={classes.gridList}>
 
                     {items.map((tile) => (
 
-                        <GridListTile key={tile.img}>
 
+                        <GridListTile key={tile.img} onClick={() => onChanageFolder(tile.VPath)}>
 
                             <img src={tile.img} alt={tile.Foldername} />
 
                             <GridListTileBar
 
                                 title={tile.Foldername}
 
                                 actionIcon={
 
                                     <IconButton aria-label={`info about ${tile.Foldername}`} onClick={() => onChanageFolder(tile.VPath)} className={classes.icon}>
 
-                                        <InfoIcon />
 
+                                        <ArrowForwardIcon />
 
                                     </IconButton>
 
                                 }
 
                             />

+ 5 - 3
photo/src/ImageList.js
View File 

@@ -41,7 +41,7 @@ class imageList extends React.Component {
 
                 (error) => {
 
                     this.setState({
 
                         isLoaded: true,
 
-                        error
 
+                        error: error
 
                     });
 
                 }
 
             )
 
@@ -52,8 +52,10 @@ class imageList extends React.Component {
 
     }
 
 
     render() {
 
-        const { isLoaded, items } = this.state;
 
-        if (!isLoaded) {
 
+        const { isLoaded, items, error } = this.state;
 
+        if (error) {
 
+            return <div>Error: {error.message} (imageList.js)</div>;
 
+        }else if(!isLoaded) {
 
             return <div><LinearProgress /></div>;
 
         } else {
 
             return ( < Gallery images = { this.state.images }

+ 4 - 4
photo/src/SearchAppMenu.js
View File 

@@ -241,17 +241,17 @@ export default function ButtonAppBar() {
 
     const handleClick = value => () => {
 
         console.log(value);
 
         switch (value) {
 
-            case "相片":
 
+            case "Photos":
 
                 setImagelistOpen(true);
 
                 setFolderlistOpen(false);
 
                 break;
 
-            case "相簿":
 
+            case "Albums":
 
                 setFolderlistOpen(true);
 
                 setImagelistOpen(false);
 
                 break;
 
-            case "共享":
 
+            case "Sharing":
 
                 setAlertOpen(true);
 
-            case "實用工具":
 
+            case "Utilities":
 
                 setAlertOpen(true);
 
         }
 
     }