Browse Source

Added WIP Photo module

Toby Chui 3 years ago
parent
commit
4028babb51

+ 6 - 0
mod/agi/agi.go

@@ -1,6 +1,7 @@
 package agi
 
 import (
+	"encoding/json"
 	"errors"
 	"io/ioutil"
 	"log"
@@ -251,6 +252,11 @@ func (g *Gateway) ExecuteAGIScript(scriptContent string, scriptFile string, scri
 	if strings.Contains(contentType, "application/json") {
 		//For shitty people who use Angular
 		body, _ := ioutil.ReadAll(r.Body)
+		fields := map[string]interface{}{}
+		json.Unmarshal(body, &fields)
+		for k, v := range fields {
+			vm.Set(k, v)
+		}
 		vm.Set("POST_data", string(body))
 	} else {
 		r.ParseForm()

+ 4 - 4
system/auth/register.system

@@ -16,15 +16,15 @@
     <body>
         <br><br><br>
         <div class="ui container" align="center">
-            <div class="ui teal segment" style="max-width:400px;" align="left">
+            <div class="ui basic segment" style="max-width:400px;" align="left">
                 <div class="imageRight" align="center">
                     <img class="ui small image" src="data:image/png;base64, {{vendor_logo}}"></img>
                 </div>
-                <br>
+                <div class="ui divider"></div>
                 <div class="ui text container">
                     <p>Register your account on {{host_name}}</p>
                 </div>
-                <br>
+                <div class="ui divider"></div>
                 <form class="ui form" onsubmit="handleFormSubmit(event, this);">
                     <div class="field">
                         <label>Email</label>
@@ -54,7 +54,7 @@
                 <div id="errmsg" class="ui red inverted segment" style="display:none;">
                     <i class="remove icon"></i> Internal Server Error
                 </div>  
-                <br>
+                <div class="ui divider"></div>
                 <p>Back to <a href="../../">Login</a></p>
             </div>
         </div>

+ 4 - 4
system/reset/resetCodeTemplate.html

@@ -15,15 +15,15 @@
     <body> 
     <br><br><br>
     <div class="ui container" align="center">
-        <div class="ui pink segment" style="max-width:400px;" align="left">
+        <div class="ui basic segment" style="max-width:400px;" align="left">
             <div class="imageRight" align="center">
                 <img class="ui small image" src="data:image/png;base64, {{vendor_logo}}"></img>
             </div>
-            <br>
+            <div class="ui divider"></div>
             <div class="ui text container">
                 <p>Reset your account password on {{host_name}}</p>
             </div>
-            <br>
+            <div class="ui divider"></div>
             <form class="ui form" onsubmit="handleFormSubmit(event, this);">
                 <div class="field">
                     <label>Username</label>
@@ -39,7 +39,7 @@
             <div id="errmsg" class="ui red inverted segment" style="display:none;">
                 <i class="remove icon"></i> <span id="errtext">Internal Server Error</span>
             </div>  
-            <br>
+            <div class="ui divider"></div>
             <p>Back to <a href="../index.html">Login</a></p>
         </div>
     </div>

+ 4 - 4
system/reset/resetPasswordTemplate.html

@@ -3,7 +3,7 @@
     <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <title>ArozOS - Reset Password</title>
+    <title>{{host_name}} - Reset Password</title>
     <link rel="stylesheet" href="script/semantic/semantic.css">
     <link rel="stylesheet" href="script/ao.css">
     <script type="application/javascript" src="script/jquery.min.js"></script>
@@ -15,15 +15,15 @@
     <body> 
     <br><br><br>
     <div class="ui container" align="center">
-        <div class="ui pink segment" style="max-width:400px;" align="left">
+        <div class="ui basic segment" style="max-width:400px;" align="left">
             <div class="imageRight" align="center">
                 <img class="ui small image" src="data:image/png;base64, {{vendor_logo}}"></img>
             </div>
-            <br>
+            <div class="ui divider"></div>
             <div class="ui text container">
                 <p>Reset your account password on {{host_name}}</p>
             </div>
-            <br>
+            <div class="ui divider"></div>
             <form class="ui form" onsubmit="handleFormSubmit(event, this);">
                 <div class="disabled field">
                     <label>Username</label>

+ 0 - 25
web/Photo/asset-manifest.json

@@ -1,25 +0,0 @@
-{
-  "files": {
-    "main.css": "/Photo/static/css/main.5ecd60fb.chunk.css",
-    "main.js": "/Photo/static/js/main.dba51531.chunk.js",
-    "main.js.map": "/Photo/static/js/main.dba51531.chunk.js.map",
-    "runtime-main.js": "/Photo/static/js/runtime-main.f6bee5bd.js",
-    "runtime-main.js.map": "/Photo/static/js/runtime-main.f6bee5bd.js.map",
-    "static/css/2.c301f1a7.chunk.css": "/Photo/static/css/2.c301f1a7.chunk.css",
-    "static/js/2.09744fc4.chunk.js": "/Photo/static/js/2.09744fc4.chunk.js",
-    "static/js/2.09744fc4.chunk.js.map": "/Photo/static/js/2.09744fc4.chunk.js.map",
-    "index.html": "/Photo/index.html",
-    "precache-manifest.d3a7041c695a5d6712b5464105f686a9.js": "/Photo/precache-manifest.d3a7041c695a5d6712b5464105f686a9.js",
-    "service-worker.js": "/Photo/service-worker.js",
-    "static/css/2.c301f1a7.chunk.css.map": "/Photo/static/css/2.c301f1a7.chunk.css.map",
-    "static/css/main.5ecd60fb.chunk.css.map": "/Photo/static/css/main.5ecd60fb.chunk.css.map",
-    "static/js/2.09744fc4.chunk.js.LICENSE.txt": "/Photo/static/js/2.09744fc4.chunk.js.LICENSE.txt"
-  },
-  "entrypoints": [
-    "static/js/runtime-main.f6bee5bd.js",
-    "static/css/2.c301f1a7.chunk.css",
-    "static/js/2.09744fc4.chunk.js",
-    "static/css/main.5ecd60fb.chunk.css",
-    "static/js/main.dba51531.chunk.js"
-  ]
-}

+ 0 - 22
web/Photo/backend/config.js

@@ -1,22 +0,0 @@
-var results = {};
-results["username"] = USERNAME;
-results["usericon"] = USERICON;
-results["unlimited"] = false;
-
-if (USERQUOTA_TOTAL == -1) {
-    results["unlimited"] = true;
-    results["quota"] = 0;
-    results["quota_human"] = bytesToSize(USERQUOTA_USED);
-} else {
-    results["quota"] = USERQUOTA_USED / USERQUOTA_TOTAL * 100;
-}
-sendJSONResp(JSON.stringify(results));
-
-//From stackoverflow.com
-//https://stackoverflow.com/questions/15900485/correct-way-to-convert-size-in-bytes-to-kb-mb-gb-in-javascript
-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];
-}

+ 0 - 60
web/Photo/backend/listFile.js

@@ -1,60 +0,0 @@
-/* 
-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/"
-var 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({
-                vsrc: folder + filename,
-                src: "/media/?file=" + folder + filename,
-                caption: filename,
-                Size: bytesToSize(fileSize),
-                thumbnail: "/media/?file=" + thumbnailsPath,
-                thumbnailHeight: dimension[1],
-                thumbnailWidth: dimension[0]
-            });
-        }
-    }
-}
-sendJSONResp(JSON.stringify(results));

+ 13 - 30
web/Photo/backend/listFolder.js

@@ -1,33 +1,16 @@
-var loadedfile = requirelib("filelib");
-if (!loadedfile) {
-    console.log("Failed to load lib filelib, terminated.");
-}
-
-var folderList = filelib.glob("user:/Photo/*");
-var arr = [];
-//add main folder
-var img = ChooseFirstImage("user:/Photo/");
-arr.push({ VPath: "user:/Photo/", Foldername: "Root folder", img: img })
-
-for (var i = 0; i < folderList.length; i++) {
-    var fldname = folderList[i].split("/")
-    if (filelib.isDir(folderList[i]) && folderList[i] != "user:/Photo/thumbnails" && fldname[fldname.length - 1].substring(0, 1) != ".") {
-        var img = ChooseFirstImage(folderList[i]);
-        arr.push({ VPath: folderList[i] + "/", Foldername: folderList[i].split("/").pop(), img: img })
-    }
-}
+requirelib("filelib")
+//Scan the folder
+var results = filelib.aglob(folder, "user");
 
-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];
-            }
-        }
+//Sort the files
+var files = [];
+var folders = [];
+for (var i = 0; i < results.length; i++){
+    var thisFile = results[i];
+    if (filelib.isDir(thisFile)){
+        folders.push(thisFile);
+    }else{
+        files.push(thisFile);
     }
-    return "/Photo/img/desktop_icon.png";
 }
-
-sendJSONResp(JSON.stringify(arr))
+sendJSONResp(JSON.stringify([folders, files]));	

+ 0 - 2
web/Photo/backend/search.js

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

BIN
web/Photo/img/banner.png


BIN
web/Photo/img/banner.psd


BIN
web/Photo/img/desktop_icon.png


BIN
web/Photo/img/desktop_icon.psd


BIN
web/Photo/img/module_icon.png


BIN
web/Photo/img/module_icon.psd


BIN
web/Photo/img/pwa/128.png


BIN
web/Photo/img/pwa/192.png


BIN
web/Photo/img/pwa/256.png


BIN
web/Photo/img/pwa/2f772464-d2e6-4e31-9b2a-7ee56d757181.png


BIN
web/Photo/img/pwa/512.png


+ 54 - 96
web/Photo/index.html

@@ -1,114 +1,72 @@
 <!doctype html>
 <html lang="en">
-
 <head>
     <meta charset="utf-8" />
     <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="/Photo/logo192.png" />
-    <link rel="manifest" href="/Photo/manifest.json" />
+    <meta name="description" content="ArozOS Photo" />
     <title>Photo</title>
+    <link rel="stylesheet" href="../script/semantic/semantic.min.css">
+    <script src="../script/alpine.min.js"></script>
     <script src="../script/jquery.min.js"></script>
+    <script src="../script/semantic/semantic.min.js"></script>
+    <script src="../script/ao_module.js"></script>
+    <script src="photo.js"></script>
     <style>
-        body {
-            background-color: #fff
-        }
-        
-        figcaption {
-            word-break: break-all;
-        }
+ 
     </style>
-    <link href="/Photo/static/css/2.c301f1a7.chunk.css" rel="stylesheet">
-    <link href="/Photo/static/css/main.5ecd60fb.chunk.css" rel="stylesheet">
-    <script src="../script/ao_module.js"></script>
+    
 </head>
+<body>
 
-<body><noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-    <script>
-        //Check if there are file dropped into this interface. If yes, redirect to embedded
-        var infile = ao_module_loadInputFiles();
-        if (infile != null) {
-            window.location.href = "embedded.html" + window.location.hash;
-        }
+    <div class="ui left vertical menu" id="menu">
+        <div class="item">
+            <img class="ui fluid image" src="img/banner.png">
+        </div>
+        <div class="item">
+            Browse Photos
+            <div class="menu">
+                <a class="active item">user:/</a>
+            </div>
+        </div>
 
-        ! function(e) {
-            function t(t) {
-                for (var n, l, p = t[0], f = t[1], i = t[2], c = 0, s = []; c < p.length; c++) l = p[c], Object.prototype.hasOwnProperty.call(o, l) && o[l] && s.push(o[l][0]), o[l] = 0;
-                for (n in f) Object.prototype.hasOwnProperty.call(f, n) && (e[n] = f[n]);
-                for (a && a(t); s.length;) s.shift()();
-                return u.push.apply(u, i || []), r()
-            }
-
-            function r() {
-                for (var e, t = 0; t < u.length; t++) {
-                    for (var r = u[t], n = !0, p = 1; p < r.length; p++) {
-                        var f = r[p];
-                        0 !== o[f] && (n = !1)
-                    }
-                    n && (u.splice(t--, 1), e = l(l.s = r[0]))
-                }
-                return e
-            }
-            var n = {},
-                o = {
-                    1: 0
-                },
-                u = [];
+        <div class="item">
+            Tags by AI
+            <div class="menu">
+                <a class="active item">#a</a>
+                <a class="item">#b</a>
+                <a class="item">#c</a>
+                <a class="item">See More</a>
+            </div>
+        </div>
+       
+        
+    </div>
 
-            function l(t) {
-                if (n[t]) return n[t].exports;
-                var r = n[t] = {
-                    i: t,
-                    l: !1,
-                    exports: {}
-                };
-                return e[t].call(r.exports, r, r.exports, l), r.l = !0, r.exports
+    <div class="ui segment" x-data='folderObject()' x-init="init()">
+        <div class="ui six cards viewbox">
+            <template x-for="image in images">
+                <div class="ui small card" x-on:click="showImage($el);" :filedata="encodeURIComponent(JSON.stringify({'filename':image.split('/').pop(),'filepath':image}))"> 
+                    <a class="image" >
+                        <img :src="'../system/file_system/loadThumbnail?bytes=true&vpath=' + image">
+                    </a>
+                </div>
+            </template>
+        </div>
+        <button x-on:click="updateRenderingPath('user:/Photo/油圖/*.jpg');">Click Me</button>
+    </div>
+    <script>
+        $(window).on("resize", function(){
+            if (window.innerWidth < 500){
+                $(".viewbox").attr("class", "ui three cards viewbox");
+            }else if (window.innerWidth < 800){
+                $(".viewbox").attr("class", "ui four cards viewbox");
+            }else if (window.innerWidth < 1200){
+                $(".viewbox").attr("class", "ui six cards viewbox");
+            }else{
+                $(".viewbox").attr("class", "ui ten cards viewbox");
             }
-            l.m = e, l.c = n, l.d = function(e, t, r) {
-                l.o(e, t) || Object.defineProperty(e, t, {
-                    enumerable: !0,
-                    get: r
-                })
-            }, l.r = function(e) {
-                "undefined" != typeof Symbol && Symbol.toStringTag && Object.defineProperty(e, Symbol.toStringTag, {
-                    value: "Module"
-                }), Object.defineProperty(e, "__esModule", {
-                    value: !0
-                })
-            }, l.t = function(e, t) {
-                if (1 & t && (e = l(e)), 8 & t) return e;
-                if (4 & t && "object" == typeof e && e && e.__esModule) return e;
-                var r = Object.create(null);
-                if (l.r(r), Object.defineProperty(r, "default", {
-                        enumerable: !0,
-                        value: e
-                    }), 2 & t && "string" != typeof e)
-                    for (var n in e) l.d(r, n, function(t) {
-                        return e[t]
-                    }.bind(null, n));
-                return r
-            }, l.n = function(e) {
-                var t = e && e.__esModule ? function() {
-                    return e.default
-                } : function() {
-                    return e
-                };
-                return l.d(t, "a", t), t
-            }, l.o = function(e, t) {
-                return Object.prototype.hasOwnProperty.call(e, t)
-            }, l.p = "/Photo/";
-            var p = this.webpackJsonpphoto = this.webpackJsonpphoto || [],
-                f = p.push.bind(p);
-            p.push = t, p = p.slice();
-            for (var i = 0; i < p.length; i++) t(p[i]);
-            var a = f;
-            r()
-        }([])
+        });
     </script>
-    <script src="/Photo/static/js/2.09744fc4.chunk.js"></script>
-    <script src="/Photo/static/js/main.dba51531.chunk.js"></script>
 </body>
-
 </html>

+ 2 - 2
web/Photo/manifest.json

@@ -1,6 +1,6 @@
 {
-  "short_name": "React App",
-  "name": "Create React App Sample",
+  "short_name": "Photo",
+  "name": "ArozOS Photo",
   "icons": [
     {
       "src": "favicon.ico",

+ 59 - 0
web/Photo/photo.js

@@ -0,0 +1,59 @@
+/*
+    Photo.js
+
+    Author: tobychui
+    This is a complete rewrite of the legacy Photo module for ArozOS
+
+*/
+
+let photoList = [];
+
+function sideBarObject(){
+    return {
+        tags: [],
+
+    }
+}
+
+function folderObject() {
+    return {
+        // data
+        pathWildcard: "user:/Photo/*.jpg",
+        images: [],
+        folders: [],
+        
+        // init
+        init() {
+            this.getFolderInfo()
+        },
+        
+        updateRenderingPath(newWidlcard){
+            this.pathWildcard = newWidlcard;
+            this.getFolderInfo();
+        },
+
+        getFolderInfo() {
+            fetch(ao_root + "system/ajgi/interface?script=Photo/backend/listFolder.js", {
+                method: 'POST',
+                cache: 'no-cache',
+                headers: {
+                  'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({
+                    "folder": this.pathWildcard
+                })
+            }).then(resp => {
+                resp.json().then(data => {
+                    console.log(data);
+                    this.folders = data[0];
+                    this.images = data[1];
+                });
+            });
+        }
+    }
+}
+
+function showImage(object){
+    var fd = JSON.parse(decodeURIComponent($(object).attr("filedata")));
+    console.log(fd);
+}

+ 0 - 30
web/Photo/precache-manifest.d3a7041c695a5d6712b5464105f686a9.js

@@ -1,30 +0,0 @@
-self.__precacheManifest = (self.__precacheManifest || []).concat([
-  {
-    "revision": "b66a4d418e754e81111a2d31d7d539b2",
-    "url": "/Photo/index.html"
-  },
-  {
-    "revision": "5fde3124becd4b35f85f",
-    "url": "/Photo/static/css/2.c301f1a7.chunk.css"
-  },
-  {
-    "revision": "138294f0aac0f2e76a14",
-    "url": "/Photo/static/css/main.5ecd60fb.chunk.css"
-  },
-  {
-    "revision": "5fde3124becd4b35f85f",
-    "url": "/Photo/static/js/2.09744fc4.chunk.js"
-  },
-  {
-    "revision": "8b282241ff9a902c33d4eaa13d8e6903",
-    "url": "/Photo/static/js/2.09744fc4.chunk.js.LICENSE.txt"
-  },
-  {
-    "revision": "138294f0aac0f2e76a14",
-    "url": "/Photo/static/js/main.dba51531.chunk.js"
-  },
-  {
-    "revision": "974649fc032a02fdbb8f",
-    "url": "/Photo/static/js/runtime-main.f6bee5bd.js"
-  }
-]);

+ 0 - 3
web/Photo/robots.txt

@@ -1,3 +0,0 @@
-# https://www.robotstxt.org/robotstxt.html
-User-agent: *
-Disallow:

+ 0 - 39
web/Photo/service-worker.js

@@ -1,39 +0,0 @@
-/**
- * Welcome to your Workbox-powered service worker!
- *
- * You'll need to register this file in your web app and you should
- * disable HTTP caching for this file too.
- * See https://goo.gl/nhQhGp
- *
- * The rest of the code is auto-generated. Please don't update this file
- * directly; instead, make changes to your Workbox build configuration
- * and re-run your build process.
- * See https://goo.gl/2aRDsh
- */
-
-importScripts("https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js");
-
-importScripts(
-  "/Photo/precache-manifest.d3a7041c695a5d6712b5464105f686a9.js"
-);
-
-self.addEventListener('message', (event) => {
-  if (event.data && event.data.type === 'SKIP_WAITING') {
-    self.skipWaiting();
-  }
-});
-
-workbox.core.clientsClaim();
-
-/**
- * The workboxSW.precacheAndRoute() method efficiently caches and responds to
- * requests for URLs in the manifest.
- * See https://goo.gl/S9QRab
- */
-self.__precacheManifest = [].concat(self.__precacheManifest || []);
-workbox.precaching.precacheAndRoute(self.__precacheManifest, {});
-
-workbox.routing.registerNavigationRoute(workbox.precaching.getCacheKeyForURL("/Photo/index.html"), {
-  
-  blacklist: [/^\/_/,/\/[^/?]+\.[^/]+$/],
-});

+ 1 - 1
web/SystemAO/notfound.html

@@ -33,7 +33,7 @@
             <div>
                 <h3 class="">Page Not Found</h3>
                 <div class="ui divider"></div>
-                <p>The page you are looking for do not exists on this server. <br><a href="../">Back</a></p>
+                <p>The page or resource you are trying to access does not exist. <br><a href="../">Back</a></p>
                 <div class="ui divider"></div>
                 <div style="text-align: left;">
                     <small>Request time: <span id="reqtime"></span></small><br>