lfss 0.7.14__py3-none-any.whl → 0.8.0__py3-none-any.whl

frontend/scripts.js

@@ -1,18 +1,18 @@
-import Connector from './api.js';
-import { permMap } from './api.js';
+import { permMap, listPath } from './api.js';
 import { showFloatingWindowLineInput, showPopup } from './popup.js';
 import { formatSize, decodePathURI, ensurePathURI, getRandomString, cvtGMT2Local, debounce, encodePathURI, asHtmlText } from './utils.js';
 import { showInfoPanel, showDirInfoPanel } from './info.js';
 import { makeThumbHtml } from './thumb.js';
+import { store } from './state.js';
+import { maybeShowLoginPanel } from './login.js';
 
-const conn = new Connector();
+/** @type {import('./api.js').UserRecord}*/
 let userRecord = null;
+
 const ensureSlashEnd = (path) => {
     return path.endsWith('/') ? path : path + '/';
 }
 
-const endpointInput = document.querySelector('input#endpoint');
-const tokenInput = document.querySelector('input#token');
 const pathInput = document.querySelector('input#path');
 const pathBackButton = document.querySelector('span#back-btn');
 const pathHintDiv = document.querySelector('#position-hint');
@@ -23,53 +23,49 @@ const uploadFileSelector = document.querySelector('#file-selector');
 const uploadFileNameInput = document.querySelector('#file-name');
 const uploadButton = document.querySelector('#upload-btn');
 const randomizeFnameButton = document.querySelector('#randomize-fname-btn');
+const pageLimitSelect = document.querySelector('#page-limit-sel');
+const pageNumInput = document.querySelector('#page-num-input');
+const pageCountLabel = document.querySelector('#page-count-lbl');
 const sortBySelect = document.querySelector('#sort-by-sel');
 const sortOrderSelect = document.querySelector('#sort-order-sel');
 
-conn.config.endpoint = endpointInput.value;
-conn.config.token = tokenInput.value;
+const conn = store.conn;
 
 {
-    const endpoint = window.localStorage.getItem('endpoint');
-    if (endpoint){
-        endpointInput.value = endpoint;
-        conn.config.endpoint = endpoint;
-    }
-    const token = window.localStorage.getItem('token');
-    if (token){
-        tokenInput.value = token;
-        conn.config.token = token;
-    }
-    const path = window.localStorage.getItem('path');
-    if (path){
-        pathInput.value = path;
-    }
+    // initialization
+    store.init();
+    pathInput.value = store.dirpath;
     uploadFilePrefixLabel.textContent = pathInput.value;
-    maybeRefreshUserRecord().then(
-        () => maybeRefreshFileList()
-    );
+    sortBySelect.value = store.orderby;
+    sortOrderSelect.value = store.sortorder;
+    pageLimitSelect.value = store.pagelim;
+    pageNumInput.value = store.pagenum;
+
+    maybeShowLoginPanel(store,).then(
+        (user) => {
+            console.log("User record", user);
+            userRecord = user;
+            maybeRefreshFileList();
+        }
+    )
 }
 
+pathHintDiv.addEventListener('click', () => {
+    maybeShowLoginPanel(store, true).then(
+        (user) => {
+            console.log("User record", user);
+            userRecord = user;
+            maybeRefreshFileList();
+        }
+    );
+});
+
 function onPathChange(){
     uploadFilePrefixLabel.textContent = pathInput.value;
-    window.localStorage.setItem('path', pathInput.value);
+    store.dirpath = pathInput.value;
     maybeRefreshFileList();
 }
 
-endpointInput.addEventListener('blur', () => {
-    conn.config.endpoint = endpointInput.value;
-    window.localStorage.setItem('endpoint', endpointInput.value);
-    maybeRefreshUserRecord().then(
-        () => maybeRefreshFileList()
-    );
-});
-tokenInput.addEventListener('blur', () => {
-    conn.config.token = tokenInput.value;
-    window.localStorage.setItem('token', tokenInput.value);
-    maybeRefreshUserRecord().then(
-        () => maybeRefreshFileList()
-    );
-});
 pathInput.addEventListener('input', () => {
     onPathChange();
 });
@@ -94,7 +90,7 @@ function onFileNameInpuChange(){
         uploadFileNameInput.classList.remove('duplicate');
     }
     else {
-        const p = ensurePathURI(pathInput.value + fileName);
+        const p = ensurePathURI(store.dirpath + fileName);
         conn.getMetadata(p).then(
             (data) => {
                 console.log("Got file meta", data);
@@ -126,7 +122,7 @@ uploadFileSelector.addEventListener('change', () => {
 });
 uploadButton.addEventListener('click', () => {
     const file = uploadFileSelector.files[0];
-    let path = pathInput.value;
+    let path = store.dirpath;
     let fileName = uploadFileNameInput.value;
     if (fileName.length === 0){
         throw new Error('File name cannot be empty');
@@ -172,7 +168,7 @@ uploadFileNameInput.addEventListener('input', debounce(onFileNameInpuChange, 500
             uploadFileNameInput.focus();
         }
         else if (files.length > 1){
-            let dstPath = pathInput.value + uploadFileNameInput.value;
+            let dstPath = store.dirpath + uploadFileNameInput.value;
             if (!dstPath.endsWith('/')){ dstPath += '/'; }
             if (!confirm(`
 You are trying to upload multiple files at once. 
@@ -216,62 +212,69 @@ Are you sure you want to proceed?
 
 function maybeRefreshFileList(){
     if (
-        pathInput.value && pathInput.value.length > 0 && pathInput.value.endsWith('/')
+        store.dirpath && store.dirpath.length > 0 && store.dirpath.endsWith('/')
     ){
         refreshFileList();
     }
 }
 
-let sortBy = sortBySelect.value;
-let sortOrder = sortOrderSelect.value;
-/** @param {import('./api.js').DirectoryRecord} dirs */
-function sortDirList(dirs){
-    if (sortBy === 'name'){
-        dirs.sort((a, b) => { return a.url.localeCompare(b.url); });
-    }
-    if (sortOrder === 'desc'){ dirs.reverse(); }
-}
-/** @param {import('./api.js').FileRecord} files */
-function sortFileList(files){
-    function timestr2num(timestr){
-        return new Date(timestr).getTime();
-    }
-    if (sortBy === 'name'){
-        files.sort((a, b) => { return a.url.localeCompare(b.url); });
-    }
-    if (sortBy === 'size'){
-        files.sort((a, b) => { return a.file_size - b.file_size; });
-    }
-    if (sortBy === 'access'){
-        files.sort((a, b) => { return timestr2num(a.access_time) - timestr2num(b.access_time); });
+sortBySelect.addEventListener('change', (elem) => {store.orderby = elem.target.value; refreshFileList();});
+sortOrderSelect.addEventListener('change', (elem) => {store.sortorder = elem.target.value; refreshFileList();});
+pageLimitSelect.addEventListener('change', (elem) => {store.pagelim = elem.target.value; refreshFileList();});
+pageNumInput.addEventListener('change', (elem) => {store.pagenum = elem.target.value; refreshFileList();});
+
+window.addEventListener('keydown', (e) => {
+    if (document.activeElement !== document.body){
+        return;
     }
-    if (sortBy === 'create'){
-        files.sort((a, b) => { return timestr2num(a.create_time) - timestr2num(b.create_time); });
+    if (e.key === 'ArrowLeft'){
+        const num = Math.max(store.pagenum - 1, 1);
+        pageNumInput.value = num;
+        store.pagenum = num;
+        refreshFileList();
     }
-    if (sortBy === 'mime'){
-        files.sort((a, b) => { return a.mime_type.localeCompare(b.mime_type); });
+    else if (e.key === 'ArrowRight'){
+        const num = Math.min(Math.max(store.pagenum + 1, 1), parseInt(pageCountLabel.textContent));
+        pageNumInput.value = num;
+        store.pagenum = num;
+        refreshFileList();
     }
-    if (sortOrder === 'desc'){ files.reverse(); }
-}
-sortBySelect.addEventListener('change', (elem) => {sortBy = elem.target.value; refreshFileList();});
-sortOrderSelect.addEventListener('change', (elem) => {sortOrder = elem.target.value; refreshFileList();});
+})
 
-function refreshFileList(){
-    conn.listPath(pathInput.value)
-        .then(data => {
+async function refreshFileList(){
+
+    listPath(conn, store.dirpath, {
+        offset: (store.pagenum - 1) * store.pagelim,
+        limit: store.pagelim,
+        orderBy: store.orderby,
+        orderDesc: store.sortorder === 'desc'
+    })
+        .then(async (res) => {
             pathHintDiv.classList.remove('disconnected');
             pathHintDiv.classList.add('connected');
-            pathHintLabel.textContent = pathInput.value;
+            pathHintLabel.textContent = `[${userRecord.username}] ${store.endpoint}/${store.dirpath.startsWith('/') ? store.dirpath.slice(1) : store.dirpath}`;
             tbody.innerHTML = '';
+            console.log("Got data", res);
+
+            const [data, count] = res;
 
-            console.log("Got data", data);
+            {
+                const total = count.dirs + count.files;
+                const pageCount = Math.max(Math.ceil(total / store.pagelim), 1);
+                pageCountLabel.textContent = pageCount;
+                if (store.pagenum > pageCount){
+                    store.pagenum = pageCount;
+                    pageNumInput.value = pageCount;
 
+                    await refreshFileList();
+                    return;
+                }
+            }
+
+            // maybe undefined
             if (!data.dirs){ data.dirs = []; }
             if (!data.files){ data.files = []; }
 
-            sortDirList(data.dirs);
-            sortFileList(data.files);
-
             data.dirs.forEach(dir => {
                 const tr = document.createElement('tr');
                 const sizeTd = document.createElement('td');
@@ -460,12 +463,6 @@ function refreshFileList(){
                     });
                     actContainer.appendChild(infoButton);
 
-                    const viewButton = document.createElement('a');
-                    viewButton.textContent = 'View';
-                    viewButton.href = conn.config.endpoint + '/' + file.url + '?token=' + conn.config.token;
-                    viewButton.target = '_blank';
-                    actContainer.appendChild(viewButton);
-
                     const moveButton = document.createElement('a');
                     moveButton.textContent = 'Move';
                     moveButton.style.cursor = 'pointer';
@@ -520,7 +517,7 @@ function refreshFileList(){
         (err) => {
             pathHintDiv.classList.remove('connected');
             pathHintDiv.classList.add('disconnected');
-            pathHintLabel.textContent = pathInput.value;
+            pathHintLabel.textContent = store.dirpath;
             tbody.innerHTML = '';
             console.log("Error");
             console.error(err);
@@ -528,27 +525,4 @@ function refreshFileList(){
     );
 }
 
-
-async function maybeRefreshUserRecord(){
-    if (endpointInput.value && tokenInput.value){
-        await refreshUserRecord();
-    }
-}
-
-async function refreshUserRecord(){
-    try{
-        userRecord = await conn.whoami();
-        console.log("User record: ", userRecord);
-    }
-    catch (err){
-        userRecord = null;
-        console.error("Failed to get user record");
-        return false;
-    }
-
-    // UI updates.
-
-    return true;
-}
-
 console.log("Hello World");

frontend/state.js

@@ -0,0 +1,72 @@
+
+import Connector from './api.js';
+
+function loadPersistedState(key, defaultValue) {
+    const persistedValue = window.localStorage.getItem(key);
+    return persistedValue ? persistedValue : defaultValue;
+}
+
+function setPersistedState(key, value) {
+    window.localStorage.setItem(key, value);
+}
+
+export const store = {
+    conn: new Connector(),
+
+    init() {
+        this.conn.config.token = this.token;
+        this.conn.config.endpoint = this.endpoint;
+    },
+
+    get token() {
+        return loadPersistedState('token', '');
+    },
+    set token(t) {
+        setPersistedState('token', t);
+        this.conn.config.token = t;
+    },
+
+    get endpoint() {
+        return loadPersistedState('endpoint', 'http://localhost:8000');
+    },
+    set endpoint(url) {
+        setPersistedState('endpoint', url);
+        this.conn.config.endpoint = url;
+    }, 
+
+    get dirpath() {
+        return loadPersistedState('dirpath', '/');
+    },
+    set dirpath(pth) {
+        setPersistedState('dirpath', pth);
+    },
+
+    get orderby () {
+        return loadPersistedState('orderby', 'none');
+    }, 
+    set orderby (sb) {
+        setPersistedState('orderby', sb);
+    }, 
+
+    get sortorder () {
+        return loadPersistedState('sortorder', 'asc');
+    },
+    set sortorder (so) {
+        setPersistedState('sortorder', so);
+    },
+
+    get pagenum () {
+        return parseInt(loadPersistedState('pagenum', '1'));
+    },
+    set pagenum (pn) {
+        setPersistedState('pagenum', pn.toString());
+    },
+
+    get pagelim () {
+        return parseInt(loadPersistedState('pagelim', '100'));
+    },
+    set pagelim (ps) {
+        setPersistedState('pagelim', ps.toString());
+    },
+
+};

frontend/styles.css

@@ -1,6 +1,12 @@
 @import "./popup.css";
 @import "./info.css";
 @import "./thumb.css";
+@import "./login.css"; 
+
+html {
+    overflow: -moz-scrollbars-vertical;
+    overflow-y: scroll;
+}
 
 body{
     font-family: Arial, sans-serif;
@@ -44,7 +50,9 @@ div.container.header, div.container.footer{
 
 div.container.header{
     top: 0;
-    height: 10rem;
+    height: 6.5rem;
+    justify-content: flex-end;
+    gap: 0.2rem;
 }
 div.container.footer{
     bottom: 0;
@@ -54,7 +62,7 @@ div.container.footer{
 div.container.content{
     width: 100%;
     padding-inline: 0.5rem;
-    margin-top: calc(10rem + 1rem);
+    margin-top: calc(6.5rem + 1rem);
     margin-bottom: calc(4rem + 0.5rem);
 }
 
@@ -122,13 +130,22 @@ input#path{
 }
 
 div#top-bar{
+    color: grey;
+    display: flex;
+    flex-direction: row;
+    width: calc(100% - 2rem);
+}
+div#settings-bar{
+    width: calc(100% - 2rem);
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
     gap: 1rem;
+    padding-bottom: 0.2rem;
 }
 div#position-hint{
+    cursor: pointer;
     color: rgb(138, 138, 138);
     border-radius: 0.5rem;
     display: flex;
@@ -137,8 +154,15 @@ div#position-hint{
     gap: 0.25rem;
     height: 1rem;
     margin-bottom: 0.25rem;
+    font-size: x-small;
 
     padding: 0.25rem;
+    transition: all 0.2s;
+}
+div#position-hint:hover{
+    background-color: rgb(240, 244, 246);
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+    color:rgb(91, 107, 116)
 }
 div#position-hint span{
     width: 0.75rem;
@@ -152,12 +176,6 @@ div#position-hint.connected span{
     background-color: rgb(0, 166, 0);
 }
 
-div#settings {
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-}
-
 label#bucket-label{
     color: #195f8b;
 }

frontend/thumb.css

@@ -7,4 +7,10 @@ img.thumb{
     width: 32px;
     object-fit: contain;
     border-radius: 0.1rem;
+    transition: all 0.2s;
+}
+img.thumb:hover{
+    cursor: pointer;
+    height: 48px;   /* smaller than backend */
+    width: 48px;
 }

frontend/thumb.js

@@ -24,25 +24,26 @@ function getIconSVGFromMimeType(mimeType){
     if (mimeType.startsWith('image/')){
         return ICON_IMAGE;
     }
-    switch (mimeType){
-        case 
-            'application/pdf' || 'application/x-pdf':
-            return ICON_PDF;
-        case 
-            'application/x-msdownload' || 'application/x-msdos-program' || 'application/x-msi' || 'application/x-ms-wim' || 'application/octet-stream' || 'application/x-apple-diskimage':
-            return ICON_EXE;
-        case 
-            'application/zip' || 'application/x-zip-compressed' || 'application/x-7z-compressed' || 'application/x-rar-compressed' || 'application/x-tar' || 'application/x-gzip':
-            return ICON_ZIP;
-        case 
-            "text/html" || "application/xhtml+xml" || "application/xml" || "text/css" || "application/javascript" || "text/javascript" || "application/json" || "text/x-python" || "text/x-java-source" || 
-            "application/x-httpd-php" || "text/x-ruby" || "text/x-perl" || "application/x-sh" || "application/sql" || "text/x-csrc" || "text/x-c++src" || "text/x-csharp" || "text/x-go" || "text/x-haskell" || 
-            "text/x-lua" || "text/x-markdown" || "application/wasm" || "application/x-tcl" || "text/x-yaml" || "application/x-latex" || "application/x-tex" || "text/x-scss" || "application/x-lisp" || 
-            "application/x-rustsrc" || "application/x-ruby" || "text/x-asm":
-            return ICON_CODE;
-        default: 
-            return ICON_FILE;
+
+    if (['application/pdf', 'application/x-pdf'].includes(mimeType)){
+        return ICON_PDF;
+    }
+    if (['application/x-msdownload', 'application/x-msdos-program', 'application/x-msi', 'application/x-ms-wim', 'application/octet-stream', 'application/x-apple-diskimage'].includes(mimeType)){
+        return ICON_EXE;
+    }
+    if (['application/zip', 'application/x-zip-compressed', 'application/x-7z-compressed', 'application/x-rar-compressed', 'application/x-tar', 'application/x-gzip'].includes(mimeType)){
+        return ICON_ZIP;
+    }
+    if ([
+        "text/html", "application/xhtml+xml", "application/xml", "text/css", "application/javascript", "text/javascript", "application/json", "text/x-python", "text/x-java-source",
+        "application/x-httpd-php", "text/x-ruby", "text/x-perl", "application/x-sh", "application/sql", "text/x-c", "text/x-c++", "text/x-csharp", "text/x-go", "text/x-haskell",
+        "text/x-lua", "text/x-markdown", "application/wasm", "application/x-tcl", "text/x-yaml", "application/x-latex", "application/x-tex", "text/x-scss", "application/x-lisp",
+        "application/x-rust", "application/x-ruby", "text/x-asm"
+    ].includes(mimeType)){
+        return ICON_CODE;
     }
+
+    return ICON_FILE;
 }
 
 function getSafeIconUrl(icon_str){
@@ -66,10 +67,24 @@ export function makeThumbHtml(c, r){
     const mtype = r.mime_type? r.mime_type : 'directory';
     const thumb_id = `thumb-${thumb_counter++}`;
     const url = mtype == 'directory'? ensureSlashEnd(r.url) : r.url;
-    return `
-<div class="thumb" id="${thumb_id}"> \
-    <img src="${c.config.endpoint}/${url}?token=${token}&thumb=true" alt="${r.url}" class="thumb" \
-    onerror="this.src='${getSafeIconUrl(getIconSVGFromMimeType(mtype))}';this.classList.add('thumb-svg');" \
-</div>
-`;
+
+    if (mtype.startsWith('image/')){
+        return `
+        <div class="thumb" id="${thumb_id}"> \
+            <img src="${c.config.endpoint}/${url}?token=${token}&thumb=true" alt="${r.url}" class="thumb" \
+            onerror="this.src='${getSafeIconUrl(getIconSVGFromMimeType(mtype))}';this.classList.add('thumb-svg');" \
+            onclick="window.open('${c.config.endpoint}/${url}?token=${token}', '_blank');" \
+            /> \
+        </div>
+        `;
+    }
+    else{
+        return `
+        <div class="thumb" id="${thumb_id}"> \
+            <img src="${getSafeIconUrl(getIconSVGFromMimeType(mtype))}" alt="${r.url}" class="thumb thumb-svg" \
+            onclick="window.open('${c.config.endpoint}/${url}?token=${token}', '_blank');" \
+            / > \
+        </div>
+        `;
+    }
 }