+
@@ -81,6 +81,7 @@ import Languages from "./Languages.vue";
import Permissions from "./Permissions.vue";
import Commands from "./Commands.vue";
import { enableExec } from "@/utils/constants";
+import { state } from "@/store";
export default {
name: "UserForm",
@@ -119,6 +120,9 @@ export default {
},
},
computed: {
+ stateUser() {
+ return state.user;
+ },
passwordPlaceholder() {
return this.isNew ? "" : this.$t("settings.avoidChanges");
},
diff --git a/frontend/src/components/sidebar/General.vue b/frontend/src/components/sidebar/General.vue
index 9d797583..a11e4889 100644
--- a/frontend/src/components/sidebar/General.vue
+++ b/frontend/src/components/sidebar/General.vue
@@ -154,8 +154,8 @@ export default {
}
let usage = await filesApi.usage("default");
usageStats = {
- used: getHumanReadableFilesize(usage.used / 1024),
- total: getHumanReadableFilesize(usage.total / 1024),
+ used: getHumanReadableFilesize(usage.used),
+ total: getHumanReadableFilesize(usage.total),
usedPercentage: Math.round((usage.used / usage.total) * 100),
};
diff --git a/frontend/src/components/sidebar/Sidebar.vue b/frontend/src/components/sidebar/Sidebar.vue
index 4e54c98b..90b5eafa 100644
--- a/frontend/src/components/sidebar/Sidebar.vue
+++ b/frontend/src/components/sidebar/Sidebar.vue
@@ -12,7 +12,7 @@
{{ item.text }}
- {{ name }}
+ {{ name }}
diff --git a/frontend/src/css/listing.css b/frontend/src/css/listing.css
index 22f1deaf..b60601f1 100644
--- a/frontend/src/css/listing.css
+++ b/frontend/src/css/listing.css
@@ -90,7 +90,7 @@ body.rtl #listingView {
#listingView {
padding-top: 1em;
- padding-bottom: 1em;
+ padding-bottom: 30em;
}
#listingView.gallery .item,
diff --git a/frontend/src/notify/index.ts b/frontend/src/notify/index.ts
index 9bf4d090..f4d482c1 100644
--- a/frontend/src/notify/index.ts
+++ b/frontend/src/notify/index.ts
@@ -1,5 +1,9 @@
+import * as messageFunctions from "./message.js";
+import * as loadingSpinnerFunctions from "./loadingSpinner.js";
-import * as notify from "./message.js";
-export {
- notify,
-};
\ No newline at end of file
+const notify = {
+ ...messageFunctions,
+ ...loadingSpinnerFunctions
+};
+
+export { notify };
\ No newline at end of file
diff --git a/frontend/src/notify/loadingSpinner.js b/frontend/src/notify/loadingSpinner.js
new file mode 100644
index 00000000..fc8e4c90
--- /dev/null
+++ b/frontend/src/notify/loadingSpinner.js
@@ -0,0 +1,87 @@
+export function startLoading (from, to) {
+ if (from == to) {
+ return
+ }
+
+ console.log('startLoading', from, to)
+ // Get the spinner canvas element
+ let spinner = document.querySelector('.notification-spinner')
+ if (!spinner) {
+ console.error('Spinner canvas element not found')
+ return
+ }
+ spinner.classList.remove('hidden')
+
+ // Get the 2D context of the canvas
+ let ctx = spinner.getContext('2d')
+ if (!ctx) {
+ console.error('Could not get 2D context')
+ return
+ }
+
+ // Set canvas dimensions
+ let width = spinner.width
+ let height = spinner.height
+
+ // Initialize variables
+ let degrees = from * 3.6 // Convert percentage to degrees
+ let new_degrees = to * 3.6 // Convert percentage to degrees
+ let difference = new_degrees - degrees
+ let color = spinner.style.color || '#666'
+ let bgcolor = '#fff'
+ let animation_loop
+
+ // Clear any existing animation loop
+ if (animation_loop !== undefined) clearInterval(animation_loop)
+
+ // Calculate the increment per 10ms
+ let duration = 300 // Duration of the animation in ms
+ let increment = difference / (duration / 10)
+
+ // Start the animation loop
+ animation_loop = setInterval(function () {
+ // Check if the animation should stop
+ if (
+ (increment > 0 && degrees >= new_degrees) ||
+ (increment < 0 && degrees <= new_degrees)
+ ) {
+ clearInterval(animation_loop)
+ return
+ }
+
+ // Update the degrees
+ degrees += increment
+
+ // Clear the canvas
+ ctx.clearRect(0, 0, width, height)
+
+ // Draw the background circle
+ ctx.beginPath()
+ ctx.strokeStyle = bgcolor
+ ctx.lineWidth = 10
+ ctx.arc(width / 2, height / 2, height / 3, 0, Math.PI * 2, false)
+ ctx.stroke()
+
+ // Draw the foreground circle
+ let radians = (degrees * Math.PI) / 180
+ ctx.beginPath()
+ ctx.strokeStyle = color
+ ctx.lineWidth = 10
+ ctx.arc(
+ width / 2,
+ height / 2,
+ height / 3,
+ 0 - (90 * Math.PI) / 180,
+ radians - (90 * Math.PI) / 180,
+ false
+ )
+ ctx.stroke()
+
+ // Draw the text
+ ctx.fillStyle = '#fff'
+ ctx.font = '1.2em Roboto'
+ let text = Math.floor((degrees / 360) * 100) + '%'
+ let text_width = ctx.measureText(text).width
+ ctx.fillText(text, width / 2 - text_width / 2, height / 2 + 8)
+ }, 10) // Update every 10ms
+}
diff --git a/frontend/src/notify/message.js b/frontend/src/notify/message.js
index 5282d4bd..137600d4 100644
--- a/frontend/src/notify/message.js
+++ b/frontend/src/notify/message.js
@@ -1,78 +1,96 @@
-import { mutations, state } from "@/store";
+import { mutations, state } from '@/store'
-export function showPopup(type, message) {
- const [popup, popupContent] = getElements();
- if (popup === undefined) {
- return;
+let active = false
+let closeTimeout // Store timeout ID
+
+export function showPopup(type, message, autoclose = true) {
+ if (active) {
+ clearTimeout(closeTimeout) // Clear the existing timeout
+ }
+
+ const [popup, popupContent] = getElements()
+ if (popup === undefined) {
+ return
+ }
+ popup.classList.remove('success', 'error') // Clear previous types
+ popup.classList.add(type)
+ active = true
+
+ let apiMessage
+
+ try {
+ apiMessage = JSON.parse(message)
+ if (
+ apiMessage &&
+ Object.prototype.hasOwnProperty.call(apiMessage, 'status') &&
+ Object.prototype.hasOwnProperty.call(apiMessage, 'message')
+ ) {
+ popupContent.textContent =
+ 'Error ' + apiMessage.status + ': ' + apiMessage.message
}
- popup.classList.remove('success', 'error'); // Clear previous types
- popup.classList.add(type);
+ } catch (error) {
+ popupContent.textContent = message
+ }
- let apiMessage;
+ popup.style.right = '0em'
- try {
- apiMessage = JSON.parse(message);
- // Check if 'apiMessage' has 'status' and 'message' properties
- if (apiMessage &&
- Object.prototype.hasOwnProperty.call(apiMessage, "status") &&
- Object.prototype.hasOwnProperty.call(apiMessage, "message")) {
- popupContent.textContent = "Error " + apiMessage.status + ": " + apiMessage.message;
- }
- } catch (error) {
- popupContent.textContent = message;
+ // Don't auto-hide for 'action' type popups
+ if (type === 'action') {
+ popup.classList.add('success')
+ return
+ }
+
+ if (!autoclose || !active) {
+ return
+ }
+
+ // Set a new timeout for closing
+ closeTimeout = setTimeout(() => {
+ if (active) {
+ closePopUp()
}
-
- popup.style.right = '1em';
-
- // don't hide for actions
- if (type === "action") {
- popup.classList.add("success");
- return;
- }
-
- // Start animation: bring the popup into view
- // Automatically hide after 10 seconds
- setTimeout(() => {
- closePopUp();
- }, 10000);
+ }, 5000)
}
-
export function closePopUp() {
- const [popup, popupContent] = getElements();
- if (popupContent == undefined) {
- return
- }
- if (popupContent.textContent == "Multiple Selection Enabled" && state.multiple) {
- mutations.setMultiple(false)
- }
- popup.style.right = '-50em'; // Slide out
- popupContent.textContent = "no content";
+ active = false
+ const [popup, popupContent] = getElements()
+ if (popupContent == undefined) {
+ return
+ }
+ if (
+ popupContent.textContent == 'Multiple Selection Enabled' &&
+ state.multiple
+ ) {
+ mutations.setMultiple(false)
+ }
+ popup.style.right = '-50em' // Slide out
+ popupContent.textContent = 'no content'
}
function getElements() {
- const popup = document.getElementById('popup-notification');
- if (!popup) {
- return [null, null];
- }
+ const popup = document.getElementById('popup-notification')
+ if (!popup) {
+ return [null, null]
+ }
- const popupContent = popup.querySelector('#popup-notification-content');
- if (!popupContent) {
- return [null, null];
- }
+ const popupContent = popup.querySelector('#popup-notification-content')
+ if (!popupContent) {
+ return [null, null]
+ }
- return [popup, popupContent];
+ return [popup, popupContent]
}
export function showSuccess(message) {
- showPopup('success', message);
+ showPopup('success', message)
}
export function showError(message) {
- showPopup('error', message);
- console.error(message)
+ showPopup('error', message)
+ console.error(message)
}
export function showMultipleSelection() {
- showPopup("action", "Multiple Selection Enabled");
-}
\ No newline at end of file
+ showPopup('action', 'Multiple Selection Enabled')
+}
diff --git a/frontend/src/store/state.js b/frontend/src/store/state.js
index dfbdadea..f441a703 100644
--- a/frontend/src/store/state.js
+++ b/frontend/src/store/state.js
@@ -23,7 +23,7 @@ export const state = reactive({
perm: {},
rules: [], // Default to an empty array
permissions: {}, // Default to an empty object for permissions
- darkMode: false, // Default to false, assuming this is a boolean
+ darkMode: true, // Default to false, assuming this is a boolean
profile: { // Example of additional user properties
username: '', // Default to an empty string
email: '', // Default to an empty string
diff --git a/frontend/src/utils/constants.js b/frontend/src/utils/constants.js
index e796fbf5..8faf492a 100644
--- a/frontend/src/utils/constants.js
+++ b/frontend/src/utils/constants.js
@@ -12,7 +12,6 @@ const version = window.FileBrowser.Version;
const commitSHA = window.FileBrowser.CommitSHA;
const logoURL = `${staticURL}/img/logo.png`;
const noAuth = window.FileBrowser.NoAuth;
-const authMethod = window.FileBrowser.AuthMethod;
const loginPage = window.FileBrowser.LoginPage;
const enableThumbs = window.FileBrowser.EnableThumbs;
const resizePreview = window.FileBrowser.ResizePreview;
@@ -43,7 +42,6 @@ export {
version,
commitSHA,
noAuth,
- authMethod,
loginPage,
enableThumbs,
resizePreview,
diff --git a/frontend/src/utils/filesizes.test.js b/frontend/src/utils/filesizes.test.js
new file mode 100644
index 00000000..0341f8fd
--- /dev/null
+++ b/frontend/src/utils/filesizes.test.js
@@ -0,0 +1,21 @@
+import { describe, it, expect } from 'vitest';
+import { getHumanReadableFilesize } from './filesizes.js';
+
+describe('testSort', () => {
+
+ it('validate human readable sizes', () => {
+ const tests = [
+ {input: 1, expected:"1.0 bytes"},
+ {input: 1150, expected:"1.1 KB"},
+ {input: 5105650, expected:"4.9 MB"},
+ {input: 156518899684, expected:"145.8 GB"},
+ {input: 1020993183744, expected:"950.9 GB"},
+ {input: 4891498498488, expected:"4.4 TB"},
+ {input: 11991498498488488, expected:"10.7 PB"},
+ ]
+ for (let i in tests) {
+ expect(getHumanReadableFilesize(tests[i].input)).toEqual(tests[i].expected);
+ }
+ });
+
+});
diff --git a/frontend/src/utils/upload.js b/frontend/src/utils/upload.js
index 4c54229d..4ef1e0d4 100644
--- a/frontend/src/utils/upload.js
+++ b/frontend/src/utils/upload.js
@@ -1,6 +1,7 @@
import { state } from "@/store";
import url from "@/utils/url.js";
import { filesApi } from "@/api";
+import { notify } from "@/notify";
export function checkConflict(files, items) {
if (typeof items === "undefined" || items === null) {
@@ -102,7 +103,11 @@ export function scanFiles(dt) {
}
export async function handleFiles(files, base, overwrite = false) {
+ let blockUpdates = false;
+ let c = 0
+ let count = files.length
for (const file of files) {
+ c += 1
const id = state.upload.id;
let path = base;
@@ -122,15 +127,39 @@ export async function handleFiles(files, base, overwrite = false) {
file: file.file, // Ensure `file.file` is the Blob or File
overwrite,
};
-
- await filesApi.post(item.path, item.file, item.overwrite, (event) => {
- console.log(`Upload progress: ${Math.round((event.loaded / event.total) * 100)}%`);
- })
+ let last = 0;
+ notify.showPopup("success",`(${c} of ${count}) Uploading ${file.name}`,false);
+ await filesApi.post(
+ item.path,
+ item.file,
+ item.overwrite,
+ (percentComplete) => {
+ if (blockUpdates) {
+ return;
+ }
+ blockUpdates = true;
+ // Set a timeout to reset blockUpdates after 500ms
+ notify.startLoading(last, percentComplete);
+ last = percentComplete;
+ setTimeout(() => {
+ blockUpdates = false;
+ }, 200);
+ }
+ )
.then(response => {
- console.log("Upload successful:", response);
+ let spinner = document.querySelector('.notification-spinner')
+ if (spinner) {
+ spinner.classList.add('hidden')
+ }
+ console.log("Upload successful!",response);
+ notify.showSuccess("Upload successful!");
})
.catch(error => {
- console.error("Upload error:", error);
+ let spinner = document.querySelector('.notification-spinner')
+ if (spinner) {
+ spinner.classList.add('hidden')
+ }
+ notify.showError("Error uploading file: "+error);
});
}
}
\ No newline at end of file
diff --git a/frontend/src/views/Layout.vue b/frontend/src/views/Layout.vue
index 95a97620..a6239e75 100644
--- a/frontend/src/views/Layout.vue
+++ b/frontend/src/views/Layout.vue
@@ -30,11 +30,7 @@
-
-