add storage quota display
This commit is contained in:
marlon-erler
Vendored
+90
-8
@@ -306,12 +306,13 @@
|
||||
applyButton: "Apply",
|
||||
backButton: "Back",
|
||||
cancelButton: "Cancel",
|
||||
confirmButton: "Confirm",
|
||||
continueButton: "Continue",
|
||||
closeButton: "Close",
|
||||
deleteButton: "Delete",
|
||||
exitButton: "Exit",
|
||||
fullscreenButton: "Fullscreen",
|
||||
continueButton: "Continue",
|
||||
confirmButton: "Confirm",
|
||||
refreshButton: "Refresh",
|
||||
saveButton: "Save",
|
||||
setButton: "Set",
|
||||
filterOrCreateLabel: "Search or create",
|
||||
@@ -424,6 +425,8 @@
|
||||
noItemSelected: "No item selected",
|
||||
notAFile: "(not a file)",
|
||||
contentEmpty: "(empty)",
|
||||
usageLabel: "Usage",
|
||||
usageVauleLabel: (used, max) => `${used} of ${max} MB`,
|
||||
path: "Path",
|
||||
content: "Content",
|
||||
deleteItem: "Delete item",
|
||||
@@ -551,12 +554,13 @@
|
||||
applyButton: "Anwenden",
|
||||
backButton: "Zur\xFCck",
|
||||
cancelButton: "Abbrechen",
|
||||
continueButton: "Weiter",
|
||||
confirmButton: "Best\xE4tigen",
|
||||
closeButton: "Schlie\xDFen",
|
||||
deleteButton: "L\xF6schen",
|
||||
exitButton: "Schlie\xDFen",
|
||||
fullscreenButton: "Vollbild",
|
||||
continueButton: "Weiter",
|
||||
confirmButton: "Best\xE4tigen",
|
||||
refreshButton: "Aktualisieren",
|
||||
saveButton: "Speichern",
|
||||
setButton: "OK",
|
||||
filterOrCreateLabel: "Suchen oder erstellen",
|
||||
@@ -661,6 +665,8 @@
|
||||
noItemSelected: "Kein Element ausgew\xE4hlt",
|
||||
notAFile: "(keine Datei)",
|
||||
contentEmpty: "(leer)",
|
||||
usageLabel: "Speicher",
|
||||
usageVauleLabel: (used, max) => `${used} von ${max} MB belegt`,
|
||||
path: "Pfad",
|
||||
content: "Inhalt",
|
||||
deleteItem: "Element l\xF6schen",
|
||||
@@ -776,12 +782,13 @@
|
||||
applyButton: "Guardar",
|
||||
backButton: "Atr\xE1s",
|
||||
cancelButton: "Cancelar",
|
||||
continueButton: "Continuar",
|
||||
confirmButton: "Confirmar",
|
||||
closeButton: "Cerrar",
|
||||
deleteButton: "Borrar",
|
||||
exitButton: "Salir",
|
||||
fullscreenButton: "Pantalla completa",
|
||||
continueButton: "Continuar",
|
||||
confirmButton: "Confirmar",
|
||||
refreshButton: "Actualizar",
|
||||
saveButton: "Guardar",
|
||||
setButton: "OK",
|
||||
filterOrCreateLabel: "Buscar o crear",
|
||||
@@ -886,6 +893,8 @@
|
||||
noItemSelected: "Ning\xFAn elemento seleccionado",
|
||||
notAFile: "(no es un archivo)",
|
||||
contentEmpty: "(vac\xEDo)",
|
||||
usageLabel: "Almacenamiento",
|
||||
usageVauleLabel: (used, max) => `${used} de ${max} MB en uso`,
|
||||
path: "Ruta",
|
||||
content: "Contenido",
|
||||
deleteItem: "Eliminar elemento",
|
||||
@@ -1121,6 +1130,9 @@
|
||||
if (value != null) localStorage.setItem(`_${key}`, value);
|
||||
return value;
|
||||
}
|
||||
function bytesToMB(bytes) {
|
||||
return bytes / (1024 * 1024);
|
||||
}
|
||||
function stringify(data) {
|
||||
return JSON.stringify(data, null, 4);
|
||||
}
|
||||
@@ -1607,13 +1619,41 @@
|
||||
if (object == null) return null;
|
||||
return object;
|
||||
};
|
||||
// cleaning
|
||||
// cleaning & usage
|
||||
this.removeJunk = () => {
|
||||
this.recurse([], (path) => {
|
||||
if (path[0] == DATA_VERSION) return;
|
||||
this.remove(path);
|
||||
});
|
||||
};
|
||||
this.determineCapacity = () => {
|
||||
const KEY = "storage-capacity-check";
|
||||
let chunk = "0";
|
||||
for (let i = 0; i < 1024 * 256; i++) {
|
||||
chunk += "0";
|
||||
}
|
||||
localStorage.setItem(KEY, "");
|
||||
while (true) {
|
||||
try {
|
||||
const current = localStorage.getItem(KEY);
|
||||
console.log(current);
|
||||
localStorage.setItem(KEY, current + chunk);
|
||||
} catch (e) {
|
||||
const capacity = this.calculateUsage();
|
||||
localStorage.removeItem(KEY);
|
||||
return capacity;
|
||||
}
|
||||
}
|
||||
};
|
||||
this.calculateUsage = () => {
|
||||
let data = JSON.stringify(localStorage);
|
||||
const encoder = new TextEncoder();
|
||||
const encoded = encoder.encode(data);
|
||||
const bytes = encoded.byteLength;
|
||||
const mb = bytesToMB(bytes);
|
||||
const rounded = Math.round(mb * 100) / 100;
|
||||
return rounded;
|
||||
};
|
||||
// tree
|
||||
this.initializeTree = () => {
|
||||
console.log("initializing tree");
|
||||
@@ -1721,6 +1761,8 @@
|
||||
PATH_COMPONENT_SEPARATOR
|
||||
);
|
||||
this.didMakeChanges = new State(false);
|
||||
this.occupiedSpaceMB = new State(0);
|
||||
this.maximumSpaceMB = new State(0);
|
||||
this.lastDeletedItemPath = new State("");
|
||||
// methods
|
||||
this.getSelectedItemContent = () => {
|
||||
@@ -1742,10 +1784,16 @@
|
||||
this.coreViewModel.storageModel.removeJunk();
|
||||
this.selectedPath.value = PATH_COMPONENT_SEPARATOR;
|
||||
};
|
||||
this.calculateUsage = () => {
|
||||
this.occupiedSpaceMB.value = this.coreViewModel.storageModel.calculateUsage();
|
||||
this.maximumSpaceMB.value = this.coreViewModel.storageModel.determineCapacity();
|
||||
console.log(this.occupiedSpaceMB.value, this.maximumSpaceMB.value);
|
||||
};
|
||||
// view
|
||||
this.showStorageModal = () => {
|
||||
this.coreViewModel.context = this;
|
||||
this.isShowingStorageModal.value = true;
|
||||
this.calculateUsage();
|
||||
};
|
||||
// exit
|
||||
this.close = () => {
|
||||
@@ -7125,13 +7173,47 @@
|
||||
));
|
||||
}
|
||||
|
||||
// src/View/Components/usageBar.tsx
|
||||
function UsageBar(label, valueLabel, value, maximum) {
|
||||
const style = createProxyState([value, maximum], () => `width: ${100 * (value.value / maximum.value)}%`);
|
||||
return /* @__PURE__ */ createElement(
|
||||
"div",
|
||||
{
|
||||
class: "surface flex-column padding gap"
|
||||
},
|
||||
/* @__PURE__ */ createElement("b", null, label),
|
||||
/* @__PURE__ */ createElement(
|
||||
"div",
|
||||
{
|
||||
class: "width-100 surface-alt",
|
||||
style: "height: 18px"
|
||||
},
|
||||
/* @__PURE__ */ createElement(
|
||||
"div",
|
||||
{
|
||||
class: "height-100 background-primary",
|
||||
"set:style": style
|
||||
}
|
||||
)
|
||||
),
|
||||
/* @__PURE__ */ createElement(
|
||||
"span",
|
||||
{
|
||||
class: "secondary",
|
||||
"subscribe:innerText": valueLabel
|
||||
}
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
// src/View/Modals/storageModal.tsx
|
||||
function StorageModal(coreViewModel2, storageViewModel2) {
|
||||
const usageValueLabel = createProxyState([storageViewModel2.occupiedSpaceMB, storageViewModel2.maximumSpaceMB], () => coreViewModel2.translations.storage.usageVauleLabel(storageViewModel2.occupiedSpaceMB.value, storageViewModel2.maximumSpaceMB.value));
|
||||
const detailView = createProxyState(
|
||||
[storageViewModel2.selectedPath],
|
||||
() => {
|
||||
if (storageViewModel2.selectedPath.value == PATH_COMPONENT_SEPARATOR)
|
||||
return /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", { class: "secondary" }, coreViewModel2.translations.storage.noItemSelected), /* @__PURE__ */ createElement("hr", null), DangerousActionButton(
|
||||
return /* @__PURE__ */ createElement("div", { class: "flex-column gap" }, /* @__PURE__ */ createElement("span", { class: "secondary" }, coreViewModel2.translations.storage.noItemSelected), /* @__PURE__ */ createElement("hr", null), UsageBar(coreViewModel2.translations.storage.usageLabel, usageValueLabel, storageViewModel2.occupiedSpaceMB, storageViewModel2.maximumSpaceMB), /* @__PURE__ */ createElement("hr", null), DangerousActionButton(
|
||||
coreViewModel2,
|
||||
coreViewModel2.translations.storage.removeJunkButton,
|
||||
"delete_forever",
|
||||
|
||||
Vendored
+4
@@ -145,6 +145,10 @@ a {
|
||||
color: var(--link);
|
||||
}
|
||||
|
||||
.background-primary {
|
||||
background: var(--primary);
|
||||
}
|
||||
|
||||
/* text */
|
||||
|
||||
.success {
|
||||
|
||||
Vendored
+1
-1
@@ -1,4 +1,4 @@
|
||||
const VERSION = "2610 Beta 1"
|
||||
const VERSION = "2610 Beta 2"
|
||||
|
||||
function processUrl(event) {
|
||||
const url = event.request.url;
|
||||
|
||||
Vendored
+1
-1
@@ -1 +1 @@
|
||||
2610 Beta 1
|
||||
2610 Beta 2
|
||||
|
||||
Binary file not shown.
@@ -1,6 +1,5 @@
|
||||
// cleanup: Phase A
|
||||
|
||||
import { localeCompare, parseValidObject, stringify } from "../Utility/utility";
|
||||
import { bytesToMB, localeCompare, parseValidObject, stringify } from "../Utility/utility";
|
||||
import { DATA_VERSION, ValidObject } from "../Utility/typeSafety";
|
||||
|
||||
export const PATH_COMPONENT_SEPARATOR = "\\";
|
||||
@@ -144,7 +143,7 @@ export default class StorageModel {
|
||||
return object;
|
||||
};
|
||||
|
||||
// cleaning
|
||||
// cleaning & usage
|
||||
readonly removeJunk = (): void => {
|
||||
this.recurse([], (path: string[]) => {
|
||||
if (path[0] == DATA_VERSION) return;
|
||||
@@ -152,6 +151,38 @@ export default class StorageModel {
|
||||
});
|
||||
};
|
||||
|
||||
readonly determineCapacity = (): number => {
|
||||
const KEY = "storage-capacity-check";
|
||||
|
||||
let chunk = "0";
|
||||
for (let i = 0; i < 1024*256; i++) {
|
||||
chunk += "0";
|
||||
}
|
||||
|
||||
localStorage.setItem(KEY, "");
|
||||
while (true) {
|
||||
try {
|
||||
const current = localStorage.getItem(KEY);
|
||||
console.log(current);
|
||||
localStorage.setItem(KEY, current + chunk);
|
||||
} catch (e) {
|
||||
const capacity = this.calculateUsage();
|
||||
localStorage.removeItem(KEY);
|
||||
return capacity;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
readonly calculateUsage = (): number => {
|
||||
let data = JSON.stringify(localStorage);
|
||||
const encoder = new TextEncoder();
|
||||
const encoded = encoder.encode(data);
|
||||
const bytes = encoded.byteLength;
|
||||
const mb = bytesToMB(bytes);
|
||||
const rounded = Math.round(mb * 100)/100;
|
||||
return rounded;
|
||||
}
|
||||
|
||||
// tree
|
||||
readonly initializeTree = (): void => {
|
||||
console.log("initializing tree");
|
||||
|
||||
@@ -177,6 +177,10 @@ export function getLocalStorageItemAndClear(key: string): string | null {
|
||||
return value;
|
||||
}
|
||||
|
||||
export function bytesToMB(bytes: number): number {
|
||||
return bytes / (1024*1024);
|
||||
}
|
||||
|
||||
// string & parsing
|
||||
export function stringify(data: any): string {
|
||||
return JSON.stringify(data, null, 4);
|
||||
|
||||
@@ -0,0 +1,26 @@
|
||||
import * as React from "../../react";
|
||||
|
||||
export function UsageBar(label: string, valueLabel: React.State<string>, value: React.State<number>, maximum: React.State<number>) {
|
||||
const style = React.createProxyState([value, maximum], ()=>`width: ${100*(value.value/maximum.value)}%`)
|
||||
|
||||
return (
|
||||
<div
|
||||
class="surface flex-column padding gap"
|
||||
>
|
||||
<b>{label}</b>
|
||||
<div
|
||||
class="width-100 surface-alt"
|
||||
style="height: 18px"
|
||||
>
|
||||
<div
|
||||
class="height-100 background-primary"
|
||||
set:style={style}
|
||||
></div>
|
||||
</div>
|
||||
<span
|
||||
class="secondary"
|
||||
subscribe:innerText={valueLabel}
|
||||
></span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -5,82 +5,90 @@ import * as React from "../../react";
|
||||
import StorageViewModel from "../../ViewModel/Global/storageViewModel";
|
||||
import CoreViewModel from "../../ViewModel/Global/coreViewModel";
|
||||
import { PATH_COMPONENT_SEPARATOR } from "../../Model/Global/storageModel";
|
||||
import {UsageBar} from "../Components/usageBar";
|
||||
|
||||
export function StorageModal(
|
||||
coreViewModel: CoreViewModel,
|
||||
storageViewModel: StorageViewModel,
|
||||
) {
|
||||
const usageValueLabel = React.createProxyState([storageViewModel.occupiedSpaceMB, storageViewModel.maximumSpaceMB], ()=>
|
||||
coreViewModel.translations.storage.usageVauleLabel(storageViewModel.occupiedSpaceMB.value, storageViewModel.maximumSpaceMB.value));
|
||||
|
||||
const detailView = React.createProxyState(
|
||||
[storageViewModel.selectedPath],
|
||||
() => {
|
||||
if (storageViewModel.selectedPath.value == PATH_COMPONENT_SEPARATOR)
|
||||
return (
|
||||
<div>
|
||||
<span class="secondary">
|
||||
{coreViewModel.translations.storage.noItemSelected}
|
||||
</span>
|
||||
[storageViewModel.selectedPath],
|
||||
() => {
|
||||
if (storageViewModel.selectedPath.value == PATH_COMPONENT_SEPARATOR)
|
||||
return (
|
||||
<div class="flex-column gap">
|
||||
<span class="secondary">
|
||||
{coreViewModel.translations.storage.noItemSelected}
|
||||
</span>
|
||||
|
||||
<hr></hr>
|
||||
<hr></hr>
|
||||
|
||||
{DangerousActionButton(
|
||||
coreViewModel,
|
||||
coreViewModel.translations.storage.removeJunkButton,
|
||||
"delete_forever",
|
||||
storageViewModel.removeJunk,
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
{UsageBar(coreViewModel.translations.storage.usageLabel, usageValueLabel, storageViewModel.occupiedSpaceMB, storageViewModel.maximumSpaceMB)}
|
||||
|
||||
return (
|
||||
<div class="flex-column gap">
|
||||
<div class="tile flex-no">
|
||||
<div>
|
||||
<b>{coreViewModel.translations.storage.path}</b>
|
||||
<span
|
||||
class="break-all"
|
||||
subscribe:innerText={
|
||||
storageViewModel.selectedPath
|
||||
}
|
||||
></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tile flex-no">
|
||||
<div>
|
||||
<b>{coreViewModel.translations.storage.content}</b>
|
||||
<code
|
||||
subscribe:innerText={
|
||||
storageViewModel.selectedFileContent
|
||||
}
|
||||
></code>
|
||||
</div>
|
||||
</div>
|
||||
<hr></hr>
|
||||
|
||||
{DangerousActionButton(
|
||||
coreViewModel,
|
||||
coreViewModel.translations.storage.deleteItem,
|
||||
"delete_forever",
|
||||
storageViewModel.deleteSelectedItem,
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
{DangerousActionButton(
|
||||
coreViewModel,
|
||||
coreViewModel.translations.storage.removeJunkButton,
|
||||
"delete_forever",
|
||||
storageViewModel.removeJunk,
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div class="flex-column gap">
|
||||
<div class="tile flex-no">
|
||||
<div>
|
||||
<b>{coreViewModel.translations.storage.path}</b>
|
||||
<span
|
||||
class="break-all"
|
||||
subscribe:innerText={
|
||||
storageViewModel.selectedPath
|
||||
}
|
||||
></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tile flex-no">
|
||||
<div>
|
||||
<b>{coreViewModel.translations.storage.content}</b>
|
||||
<code
|
||||
subscribe:innerText={
|
||||
storageViewModel.selectedFileContent
|
||||
}
|
||||
></code>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{DangerousActionButton(
|
||||
coreViewModel,
|
||||
coreViewModel.translations.storage.deleteItem,
|
||||
"delete_forever",
|
||||
storageViewModel.deleteSelectedItem,
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
);
|
||||
return (
|
||||
<div class="modal" toggle:open={storageViewModel.isShowingStorageModal}>
|
||||
<div>
|
||||
<main class="padding-0">
|
||||
{SplitModal(
|
||||
coreViewModel,
|
||||
new React.State(DirectoryItemList(storageViewModel)),
|
||||
detailView,
|
||||
true,
|
||||
)}
|
||||
</main>
|
||||
<button on:click={storageViewModel.close}>
|
||||
{coreViewModel.translations.general.closeButton}
|
||||
<span class="icon">close</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal" toggle:open={storageViewModel.isShowingStorageModal}>
|
||||
<div>
|
||||
<main class="padding-0">
|
||||
{SplitModal(
|
||||
coreViewModel,
|
||||
new React.State(DirectoryItemList(storageViewModel)),
|
||||
detailView,
|
||||
true,
|
||||
)}
|
||||
</main>
|
||||
<button on:click={storageViewModel.close}>
|
||||
{coreViewModel.translations.general.closeButton}
|
||||
<span class="icon">close</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
+251
-242
@@ -1,338 +1,341 @@
|
||||
const englishTranslations = {
|
||||
updater: {
|
||||
migrated: "Migrated",
|
||||
migrated: "Migrated",
|
||||
},
|
||||
|
||||
general: {
|
||||
deleteItemButtonAudioLabel: "delete item",
|
||||
searchButtonAudioLabel: "search",
|
||||
searchButtonClearAudioLabel: "clear search query",
|
||||
deleteItemButtonAudioLabel: "delete item",
|
||||
searchButtonAudioLabel: "search",
|
||||
searchButtonClearAudioLabel: "clear search query",
|
||||
|
||||
abortButton: "Abort",
|
||||
applyButton: "Apply",
|
||||
backButton: "Back",
|
||||
cancelButton: "Cancel",
|
||||
closeButton: "Close",
|
||||
deleteButton: "Delete",
|
||||
exitButton: "Exit",
|
||||
fullscreenButton: "Fullscreen",
|
||||
|
||||
continueButton: "Continue",
|
||||
confirmButton: "Confirm",
|
||||
saveButton: "Save",
|
||||
setButton: "Set",
|
||||
abortButton: "Abort",
|
||||
applyButton: "Apply",
|
||||
backButton: "Back",
|
||||
cancelButton: "Cancel",
|
||||
confirmButton: "Confirm",
|
||||
continueButton: "Continue",
|
||||
closeButton: "Close",
|
||||
deleteButton: "Delete",
|
||||
exitButton: "Exit",
|
||||
fullscreenButton: "Fullscreen",
|
||||
refreshButton: "Refresh",
|
||||
saveButton: "Save",
|
||||
setButton: "Set",
|
||||
|
||||
filterOrCreateLabel: "Search or create",
|
||||
createLabel: (query: string) => `Create "${query}"`,
|
||||
|
||||
reloadAppButton: "Reload App",
|
||||
reloadAppButton: "Reload App",
|
||||
|
||||
fileVersionLabel: "Version",
|
||||
searchLabel: "Search",
|
||||
searchSuggestionsLabel: "Recent searches",
|
||||
waitingLabel: "Waiting...",
|
||||
fileVersionLabel: "Version",
|
||||
searchLabel: "Search",
|
||||
searchSuggestionsLabel: "Recent searches",
|
||||
waitingLabel: "Waiting...",
|
||||
|
||||
restoreConnection: "Restore connection",
|
||||
restoreConnection: "Restore connection",
|
||||
|
||||
noPageSelected: "No page selected",
|
||||
noPageSelected: "No page selected",
|
||||
},
|
||||
|
||||
regional: {
|
||||
weekdays: {
|
||||
full: [
|
||||
"Sunday",
|
||||
"Monday",
|
||||
"Tuesday",
|
||||
"Wednesday",
|
||||
"Thursday",
|
||||
"Friday",
|
||||
"Saturday",
|
||||
],
|
||||
abbreviated: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
|
||||
},
|
||||
weekdays: {
|
||||
full: [
|
||||
"Sunday",
|
||||
"Monday",
|
||||
"Tuesday",
|
||||
"Wednesday",
|
||||
"Thursday",
|
||||
"Friday",
|
||||
"Saturday",
|
||||
],
|
||||
abbreviated: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
|
||||
},
|
||||
},
|
||||
|
||||
homePage: {
|
||||
appName: "Comms",
|
||||
appName: "Comms",
|
||||
|
||||
///
|
||||
///
|
||||
|
||||
overviewHeadline: "Overview",
|
||||
overviewHeadline: "Overview",
|
||||
|
||||
serverAddress: "Server address",
|
||||
serverAddressPlaceholder: "wss://192.168.0.69:3000",
|
||||
connectAudioLabel: "connect to server",
|
||||
disconnectAudioLabel: "disconnect from server",
|
||||
manageConnectionsAudioLabel: "manage connections",
|
||||
serverAddress: "Server address",
|
||||
serverAddressPlaceholder: "wss://192.168.0.69:3000",
|
||||
connectAudioLabel: "connect to server",
|
||||
disconnectAudioLabel: "disconnect from server",
|
||||
manageConnectionsAudioLabel: "manage connections",
|
||||
|
||||
yourNameLabel: "Your name",
|
||||
yourNamePlaceholder: "Jane Doe",
|
||||
setNameButtonAudioLabel: "set name",
|
||||
yourNameLabel: "Your name",
|
||||
yourNamePlaceholder: "Jane Doe",
|
||||
setNameButtonAudioLabel: "set name",
|
||||
|
||||
settingsButton: "Settings",
|
||||
manageStorageButton: "Manage storage",
|
||||
transferDataButton: "Transfer or export data",
|
||||
settingsButton: "Settings",
|
||||
manageStorageButton: "Manage storage",
|
||||
transferDataButton: "Transfer or export data",
|
||||
|
||||
updateButton: (version: string) => `Update to ${version}`,
|
||||
|
||||
scrollToChatButton: "Chats",
|
||||
scrollToChatButton: "Chats",
|
||||
|
||||
///
|
||||
///
|
||||
|
||||
backToOverviewAudioLabel: "go back to overview",
|
||||
chatsHeadline: "Chats",
|
||||
backToOverviewAudioLabel: "go back to overview",
|
||||
chatsHeadline: "Chats",
|
||||
|
||||
addChatAudioLabel: "name of new chat",
|
||||
addChatPlaceholder: "Add chat",
|
||||
addChatButton: "Add chat",
|
||||
addChatAudioLabel: "name of new chat",
|
||||
addChatPlaceholder: "Add chat",
|
||||
addChatButton: "Add chat",
|
||||
},
|
||||
|
||||
settings: {
|
||||
pages: {
|
||||
appearance: "Appearance",
|
||||
regional: "Language & Region",
|
||||
info: "About Comms",
|
||||
},
|
||||
themes: {
|
||||
dynamic: "Dynamic",
|
||||
dark: "Dark",
|
||||
light: "Light",
|
||||
system: "Device theme",
|
||||
},
|
||||
pages: {
|
||||
appearance: "Appearance",
|
||||
regional: "Language & Region",
|
||||
info: "About Comms",
|
||||
},
|
||||
themes: {
|
||||
dynamic: "Dynamic",
|
||||
dark: "Dark",
|
||||
light: "Light",
|
||||
system: "Device theme",
|
||||
},
|
||||
|
||||
version: "Version",
|
||||
language: "Language",
|
||||
version: "Version",
|
||||
language: "Language",
|
||||
|
||||
firstDayOfWeekLabel: "First day of week",
|
||||
firstDayOfWeekLabel: "First day of week",
|
||||
},
|
||||
|
||||
connectionModal: {
|
||||
connectionModalHeadline: "Manage Connections",
|
||||
connectionModalHeadline: "Manage Connections",
|
||||
|
||||
///
|
||||
///
|
||||
|
||||
connectButtonAudioLabel: "connect",
|
||||
connectButtonAudioLabel: "connect",
|
||||
},
|
||||
|
||||
dataTransferModal: {
|
||||
transferDataHeadline: "Data Transfer",
|
||||
sendHeadline: "Transfer to other device",
|
||||
receiveHeadline: "Transfer to This Device",
|
||||
exportHeadline: "Export Data",
|
||||
importHeadline: "Import Data",
|
||||
selectionDescription: "Select the data that you want to transfer.",
|
||||
exportSelectionDescription: "Select the data that you want to export.",
|
||||
dataEntryDescription: "Enter this data on the other device.",
|
||||
dataEntryInputDescription:
|
||||
"Enter the data displayed on the other device.",
|
||||
transferDataHeadline: "Data Transfer",
|
||||
sendHeadline: "Transfer to other device",
|
||||
receiveHeadline: "Transfer to This Device",
|
||||
exportHeadline: "Export Data",
|
||||
importHeadline: "Import Data",
|
||||
selectionDescription: "Select the data that you want to transfer.",
|
||||
exportSelectionDescription: "Select the data that you want to export.",
|
||||
dataEntryDescription: "Enter this data on the other device.",
|
||||
dataEntryInputDescription:
|
||||
"Enter the data displayed on the other device.",
|
||||
|
||||
///
|
||||
///
|
||||
|
||||
fromThisDeviceButton: "Send to other device",
|
||||
toThisDeviceButton: "Send to this device",
|
||||
exportButton: "Export to file",
|
||||
importButton: "Import from file",
|
||||
fromThisDeviceButton: "Send to other device",
|
||||
toThisDeviceButton: "Send to this device",
|
||||
exportButton: "Export to file",
|
||||
importButton: "Import from file",
|
||||
|
||||
///
|
||||
///
|
||||
|
||||
generalHeadline: "General",
|
||||
generalHeadline: "General",
|
||||
|
||||
connectionData: "Connection Data",
|
||||
settingsData: "Settings Data",
|
||||
connectionData: "Connection Data",
|
||||
settingsData: "Settings Data",
|
||||
|
||||
chatsHeadline: "Chats",
|
||||
chatsHeadline: "Chats",
|
||||
|
||||
///
|
||||
///
|
||||
|
||||
transferChannelHeadline: "Transfer Chanel",
|
||||
transferKeyHeadline: "Transfer Encryption Key",
|
||||
transferChannelHeadline: "Transfer Chanel",
|
||||
transferKeyHeadline: "Transfer Encryption Key",
|
||||
|
||||
sendButton: "Send",
|
||||
sendAgainButton: "Send again",
|
||||
sendButton: "Send",
|
||||
sendAgainButton: "Send again",
|
||||
|
||||
///
|
||||
///
|
||||
|
||||
filesSentCount: (count: number) => `Files sent: ${count}.`,
|
||||
allFilesSent: "Done.",
|
||||
filesSentCount: (count: number) => `Files sent: ${count}.`,
|
||||
allFilesSent: "Done.",
|
||||
|
||||
filesReceivedCount: (count: number) => `Files processed: ${count}.`,
|
||||
filesReceivedCount: (count: number) => `Files processed: ${count}.`,
|
||||
|
||||
//
|
||||
//
|
||||
|
||||
exportKey: "Encryption key",
|
||||
exportKeyConfirmation: "Confirm",
|
||||
downloadFileButton: "Download",
|
||||
importFileButton: "Import",
|
||||
decryptImportButton: "Decrypt",
|
||||
incorrectPassphraseError: "The encryption key is incorrect",
|
||||
exportKey: "Encryption key",
|
||||
exportKeyConfirmation: "Confirm",
|
||||
downloadFileButton: "Download",
|
||||
importFileButton: "Import",
|
||||
decryptImportButton: "Decrypt",
|
||||
incorrectPassphraseError: "The encryption key is incorrect",
|
||||
},
|
||||
|
||||
storage: {
|
||||
noItemSelected: "No item selected",
|
||||
notAFile: "(not a file)",
|
||||
contentEmpty: "(empty)",
|
||||
noItemSelected: "No item selected",
|
||||
notAFile: "(not a file)",
|
||||
contentEmpty: "(empty)",
|
||||
|
||||
path: "Path",
|
||||
content: "Content",
|
||||
usageLabel: "Usage",
|
||||
usageVauleLabel: (used: number, max: number) => `${used} of ${max} MB`,
|
||||
|
||||
deleteItem: "Delete item",
|
||||
path: "Path",
|
||||
content: "Content",
|
||||
|
||||
removeJunkButton: "Delete junk files",
|
||||
deleteItem: "Delete item",
|
||||
|
||||
removeJunkButton: "Delete junk files",
|
||||
},
|
||||
|
||||
chatPage: {
|
||||
closeChatAudioLabe: "close chat",
|
||||
chatSettingsAudioLabel: "chat settings",
|
||||
closeChatAudioLabe: "close chat",
|
||||
chatSettingsAudioLabel: "chat settings",
|
||||
|
||||
pages: {
|
||||
settings: "Settings",
|
||||
messages: "Messages",
|
||||
tasks: "Tasks",
|
||||
calendar: "Calendar",
|
||||
},
|
||||
pages: {
|
||||
settings: "Settings",
|
||||
messages: "Messages",
|
||||
tasks: "Tasks",
|
||||
calendar: "Calendar",
|
||||
},
|
||||
|
||||
settings: {
|
||||
settingsHeadline: "Settings",
|
||||
settings: {
|
||||
settingsHeadline: "Settings",
|
||||
|
||||
primaryChannelLabel: "Primary channel",
|
||||
setPrimaryChannelButtonAudioLabel: "set primary channel",
|
||||
primaryChannelLabel: "Primary channel",
|
||||
setPrimaryChannelButtonAudioLabel: "set primary channel",
|
||||
|
||||
namespaceLabel: "Namespace",
|
||||
namespacePlaceholder: "No namespace",
|
||||
setNamespaceButtonAudioLabel: "set namespace",
|
||||
namespaceLabel: "Namespace",
|
||||
namespacePlaceholder: "No namespace",
|
||||
setNamespaceButtonAudioLabel: "set namespace",
|
||||
|
||||
newSecondaryChannelPlaceholder: "Add secondary channel",
|
||||
newSecondaryChannelAudioLabel: "name of new secondary channel",
|
||||
addSecondaryChannelButtonAudioLabel: "add secondary channel",
|
||||
newSecondaryChannelPlaceholder: "Add secondary channel",
|
||||
newSecondaryChannelAudioLabel: "name of new secondary channel",
|
||||
addSecondaryChannelButtonAudioLabel: "add secondary channel",
|
||||
|
||||
encryptionKeyLabel: "Encryption key",
|
||||
setEncryptionKeyButtonAudioLabel: "set encryption key",
|
||||
showEncryptionKey: "Show encryption key",
|
||||
encryptionKeyLabel: "Encryption key",
|
||||
setEncryptionKeyButtonAudioLabel: "set encryption key",
|
||||
showEncryptionKey: "Show encryption key",
|
||||
|
||||
deleteChatButton: "Delete entire chat",
|
||||
},
|
||||
deleteChatButton: "Delete entire chat",
|
||||
},
|
||||
|
||||
message: {
|
||||
messagesHeadline: "Messages",
|
||||
message: {
|
||||
messagesHeadline: "Messages",
|
||||
|
||||
messageFilterHeadline: "Filter messages",
|
||||
messageFilterReactionsHadline: "Reactions",
|
||||
messageFilterAllReactionsButton: "Show all",
|
||||
messageFilterHeadline: "Filter messages",
|
||||
messageFilterReactionsHadline: "Reactions",
|
||||
messageFilterAllReactionsButton: "Show all",
|
||||
|
||||
///
|
||||
///
|
||||
|
||||
composerInputPlaceholder: "Type a message...",
|
||||
sendMessageButtonAudioLabel: "send message",
|
||||
filterMessagesButtonAudioLabel: "filter messages",
|
||||
composerInputPlaceholder: "Type a message...",
|
||||
sendMessageButtonAudioLabel: "send message",
|
||||
filterMessagesButtonAudioLabel: "filter messages",
|
||||
|
||||
///
|
||||
///
|
||||
|
||||
showMessageInfoButtonAudioLabel: "show message info",
|
||||
messageInfoHeadline: "Message Info",
|
||||
cancelReplyAudioLabel: "cancel reply",
|
||||
showMessageInfoButtonAudioLabel: "show message info",
|
||||
messageInfoHeadline: "Message Info",
|
||||
cancelReplyAudioLabel: "cancel reply",
|
||||
|
||||
sentBy: "Sent by",
|
||||
timeSent: "Time sent",
|
||||
channel: "Channel",
|
||||
messageContent: "Message content",
|
||||
sentBy: "Sent by",
|
||||
timeSent: "Time sent",
|
||||
channel: "Channel",
|
||||
messageContent: "Message content",
|
||||
|
||||
copyMessageButton: "Copy message",
|
||||
resendMessageButton: "Resend message",
|
||||
decryptMessageButton: "Decrypt message",
|
||||
replyToMessageButton: "Reply to message",
|
||||
deleteMessageButton: "Delete message",
|
||||
copyMessageButton: "Copy message",
|
||||
resendMessageButton: "Resend message",
|
||||
decryptMessageButton: "Decrypt message",
|
||||
replyToMessageButton: "Reply to message",
|
||||
deleteMessageButton: "Delete message",
|
||||
|
||||
//
|
||||
//
|
||||
|
||||
thumbsUpReaction: "Reaction: thumbs up",
|
||||
checkReaction: "Reaction: check",
|
||||
stopReaction: "Reaction: stop sign",
|
||||
attentionReaction: "Reaction: exclamation mark",
|
||||
doubleAttentionReaction: "Reaction: double exclamation mark",
|
||||
questionReaction: "Reaction: question mark",
|
||||
thumbsUpReaction: "Reaction: thumbs up",
|
||||
checkReaction: "Reaction: check",
|
||||
stopReaction: "Reaction: stop sign",
|
||||
attentionReaction: "Reaction: exclamation mark",
|
||||
doubleAttentionReaction: "Reaction: double exclamation mark",
|
||||
questionReaction: "Reaction: question mark",
|
||||
|
||||
//
|
||||
|
||||
replyPrefixLabel: "Replies: ",
|
||||
replyHeaderLabel: (message: string) => `Replies to "${message}"`,
|
||||
},
|
||||
},
|
||||
|
||||
task: {
|
||||
noBoardSelected: "No board selected",
|
||||
boardNotFound: "Board not found",
|
||||
task: {
|
||||
noBoardSelected: "No board selected",
|
||||
boardNotFound: "Board not found",
|
||||
|
||||
///
|
||||
///
|
||||
|
||||
closeBoardButtonAudioLabel: "close board",
|
||||
toggleBoardButtonAudioLabel: "toggle board list",
|
||||
showBoardSettingsButtonAudioLabel: "show board settigns",
|
||||
closeBoardButtonAudioLabel: "close board",
|
||||
toggleBoardButtonAudioLabel: "toggle board list",
|
||||
showBoardSettingsButtonAudioLabel: "show board settigns",
|
||||
|
||||
listViewButtonAudioLabel: "list view",
|
||||
kanbanViewButtonAudioLabel: "kanban view",
|
||||
statusViewButtonAudioLabel: "status grid view",
|
||||
listViewButtonAudioLabel: "list view",
|
||||
kanbanViewButtonAudioLabel: "kanban view",
|
||||
statusViewButtonAudioLabel: "status grid view",
|
||||
|
||||
filterTasksButtonAudioLabel: "filter tasks",
|
||||
createTaskButtonAudioLabel: "create new task",
|
||||
filterTasksButtonAudioLabel: "filter tasks",
|
||||
createTaskButtonAudioLabel: "create new task",
|
||||
|
||||
///
|
||||
///
|
||||
|
||||
boardSettingsHeadline: "Board Settings",
|
||||
boardNameInputLabel: "Board name",
|
||||
deleteBoardButton: "Delete board and all tasks",
|
||||
boardSettingsHeadline: "Board Settings",
|
||||
boardNameInputLabel: "Board name",
|
||||
deleteBoardButton: "Delete board and all tasks",
|
||||
|
||||
///
|
||||
///
|
||||
|
||||
taskSettingsHeadline: "Edit Task",
|
||||
taskSettingsHeadline: "Edit Task",
|
||||
|
||||
taskNameLabel: "Title",
|
||||
taskBoardLabel: "Board",
|
||||
taskNameLabel: "Title",
|
||||
taskBoardLabel: "Board",
|
||||
|
||||
taskCategoryLabel: "Category",
|
||||
taskStatusLabel: "Status",
|
||||
taskPriorityLabel: "Priority",
|
||||
taskCategoryLabel: "Category",
|
||||
taskStatusLabel: "Status",
|
||||
taskPriorityLabel: "Priority",
|
||||
|
||||
taskDescriptionLabel: "Description",
|
||||
taskDescriptionLabel: "Description",
|
||||
|
||||
taskDateLabel: "Date",
|
||||
taskTimeLabel: "Time",
|
||||
taskDateLabel: "Date",
|
||||
taskTimeLabel: "Time",
|
||||
|
||||
deleteTaskButton: "Delete task",
|
||||
deleteTaskButton: "Delete task",
|
||||
|
||||
///
|
||||
///
|
||||
|
||||
filterTasksHeadline: "Filter Tasks",
|
||||
filterTasksHeadline: "Filter Tasks",
|
||||
|
||||
///
|
||||
///
|
||||
|
||||
renameCategoryInputPlaceholder: "Rename category",
|
||||
renameStatusInputPlaceholder: "Rename status",
|
||||
},
|
||||
renameCategoryInputPlaceholder: "Rename category",
|
||||
renameStatusInputPlaceholder: "Rename status",
|
||||
},
|
||||
|
||||
calendar: {
|
||||
eventsBoard: "Events",
|
||||
calendar: {
|
||||
eventsBoard: "Events",
|
||||
|
||||
///
|
||||
///
|
||||
|
||||
todayButtonAudioLabel: "go to today",
|
||||
todayButtonAudioLabel: "go to today",
|
||||
|
||||
previousMonthButtonAudioLabel: "previous month",
|
||||
nextMonthButtonAudioLabel: "next month",
|
||||
previousMonthButtonAudioLabel: "previous month",
|
||||
nextMonthButtonAudioLabel: "next month",
|
||||
|
||||
yearInputAudioLabel: "year",
|
||||
monthInputAudioLabel: "month",
|
||||
yearInputAudioLabel: "year",
|
||||
monthInputAudioLabel: "month",
|
||||
|
||||
yearInputPlaceholder: "2000",
|
||||
monthInputPlaceholder: "01",
|
||||
yearInputPlaceholder: "2000",
|
||||
monthInputPlaceholder: "01",
|
||||
|
||||
///
|
||||
///
|
||||
|
||||
searchEventsHeadline: "Search Events",
|
||||
searchEventsHeadline: "Search Events",
|
||||
|
||||
///
|
||||
///
|
||||
|
||||
events: "Events",
|
||||
noEvents: "No events",
|
||||
},
|
||||
events: "Events",
|
||||
noEvents: "No events",
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
@@ -342,28 +345,28 @@ export const allTranslations: {
|
||||
en: englishTranslations,
|
||||
|
||||
de: {
|
||||
updater: {
|
||||
migrated: "Migriert",
|
||||
},
|
||||
updater: {
|
||||
migrated: "Migriert",
|
||||
},
|
||||
|
||||
general: {
|
||||
deleteItemButtonAudioLabel: "element löschen",
|
||||
searchButtonAudioLabel: "suchen",
|
||||
searchButtonClearAudioLabel: "suche zurücksetzen",
|
||||
general: {
|
||||
deleteItemButtonAudioLabel: "element löschen",
|
||||
searchButtonAudioLabel: "suchen",
|
||||
searchButtonClearAudioLabel: "suche zurücksetzen",
|
||||
|
||||
abortButton: "Abbrechen",
|
||||
applyButton: "Anwenden",
|
||||
backButton: "Zurück",
|
||||
cancelButton: "Abbrechen",
|
||||
closeButton: "Schließen",
|
||||
deleteButton: "Löschen",
|
||||
exitButton: "Schließen",
|
||||
fullscreenButton: "Vollbild",
|
||||
|
||||
continueButton: "Weiter",
|
||||
confirmButton: "Bestätigen",
|
||||
saveButton: "Speichern",
|
||||
setButton: "OK",
|
||||
abortButton: "Abbrechen",
|
||||
applyButton: "Anwenden",
|
||||
backButton: "Zurück",
|
||||
cancelButton: "Abbrechen",
|
||||
continueButton: "Weiter",
|
||||
confirmButton: "Bestätigen",
|
||||
closeButton: "Schließen",
|
||||
deleteButton: "Löschen",
|
||||
exitButton: "Schließen",
|
||||
fullscreenButton: "Vollbild",
|
||||
refreshButton: "Aktualisieren",
|
||||
saveButton: "Speichern",
|
||||
setButton: "OK",
|
||||
|
||||
filterOrCreateLabel: "Suchen oder erstellen",
|
||||
createLabel: (query: string) => `"${query}" erstellen`,
|
||||
@@ -502,6 +505,9 @@ export const allTranslations: {
|
||||
notAFile: "(keine Datei)",
|
||||
contentEmpty: "(leer)",
|
||||
|
||||
usageLabel: "Speicher",
|
||||
usageVauleLabel: (used: number, max: number) => `${used} von ${max} MB belegt`,
|
||||
|
||||
path: "Pfad",
|
||||
content: "Inhalt",
|
||||
|
||||
@@ -662,13 +668,13 @@ export const allTranslations: {
|
||||
applyButton: "Guardar",
|
||||
backButton: "Atrás",
|
||||
cancelButton: "Cancelar",
|
||||
continueButton: "Continuar",
|
||||
confirmButton: "Confirmar",
|
||||
closeButton: "Cerrar",
|
||||
deleteButton: "Borrar",
|
||||
exitButton: "Salir",
|
||||
fullscreenButton: "Pantalla completa",
|
||||
|
||||
continueButton: "Continuar",
|
||||
confirmButton: "Confirmar",
|
||||
refreshButton: "Actualizar",
|
||||
saveButton: "Guardar",
|
||||
setButton: "OK",
|
||||
|
||||
@@ -808,6 +814,9 @@ export const allTranslations: {
|
||||
notAFile: "(no es un archivo)",
|
||||
contentEmpty: "(vacío)",
|
||||
|
||||
usageLabel: "Almacenamiento",
|
||||
usageVauleLabel: (used: number, max: number) => `${used} de ${max} MB en uso`,
|
||||
|
||||
path: "Ruta",
|
||||
content: "Contenido",
|
||||
|
||||
|
||||
@@ -13,6 +13,9 @@ export default class StorageViewModel extends Context {
|
||||
);
|
||||
didMakeChanges: React.State<boolean> = new React.State(false);
|
||||
|
||||
occupiedSpaceMB: React.State<number> = new React.State(0);
|
||||
maximumSpaceMB: React.State<number> = new React.State(0);
|
||||
|
||||
selectedFileName: React.State<string>;
|
||||
selectedFileContent: React.State<string>;
|
||||
|
||||
@@ -46,10 +49,17 @@ export default class StorageViewModel extends Context {
|
||||
this.selectedPath.value = PATH_COMPONENT_SEPARATOR;
|
||||
};
|
||||
|
||||
calculateUsage = (): void => {
|
||||
this.occupiedSpaceMB.value = this.coreViewModel.storageModel.calculateUsage();
|
||||
this.maximumSpaceMB.value = this.coreViewModel.storageModel.determineCapacity();
|
||||
console.log(this.occupiedSpaceMB.value, this.maximumSpaceMB.value);
|
||||
}
|
||||
|
||||
// view
|
||||
showStorageModal = (): void => {
|
||||
this.coreViewModel.context = this;
|
||||
this.isShowingStorageModal.value = true;
|
||||
this.calculateUsage();
|
||||
};
|
||||
|
||||
// exit
|
||||
|
||||
Reference in New Issue
Block a user