Add some missing translations and make backup target name editable

This commit is contained in:
Johannes Zellner
2025-08-10 19:36:37 +02:00
parent 537a904a49
commit 69d0790484
5 changed files with 77 additions and 46 deletions
@@ -257,8 +257,7 @@ defineExpose({
<input style="display: none;" type="submit"/>
<FormGroup>
<!-- TODO translate -->
<label for="nameInput">Name</label>
<label for="nameInput">{{ $t('backups.configureBackupStorage.name') }}</label>
<TextInput id="nameInput" v-model="name" required/>
</FormGroup>
@@ -336,7 +335,7 @@ defineExpose({
</FormGroup>
<FormGroup>
<!-- TODO translate -->
<label for="encryptionPassswordHintInput">Encryption Password Hint</label>
<label for="encryptionPassswordHintInput">{{ $t('backups.configureBackupStorage.encryptionHint') }}</label>
<TextInput id="encryptionPassswordHintInput" v-model="encryptionPasswordHint" />
</FormGroup>
<Checkbox v-if="format === 'rsync'" v-model="encryptedFilenames" :label="$t('backups.configureBackupStorage.encryptFilenames')"/>
@@ -1,7 +1,7 @@
<script setup>
import { ref, useTemplateRef } from 'vue';
import { Dialog, FormGroup } from '@cloudron/pankow';
import { Dialog, FormGroup, TextInput } from '@cloudron/pankow';
import { prettyBinarySize } from '@cloudron/pankow/utils';
import { mountlike, s3like } from '../utils.js';
import BackupTargetsModel from '../models/BackupTargetsModel.js';
@@ -19,6 +19,7 @@ const dialog = useTemplateRef('dialog');
const target = ref({});
const formError = ref({});
const busy = ref(false);
const name = ref('');
const memoryLimit = ref(0);
const uploadPartSize = ref(0);
const syncConcurrency = ref(0);
@@ -28,6 +29,13 @@ const copyConcurrency = ref(0);
async function onSubmit() {
busy.value = true;
let [error] = await backupTargetsModel.setName(target.value.id, name.value);
if (error) {
formError.value.generic = error.body ? error.body.message : 'Internal error';
busy.value = false;
return console.error(error);
}
const limits = {
memoryLimit: parseInt(memoryLimit.value),
uploadPartSize: parseInt(uploadPartSize.value),
@@ -36,7 +44,7 @@ async function onSubmit() {
copyConcurrency: parseInt(copyConcurrency.value),
};
const [error] = await backupTargetsModel.setLimits(target.value.id, limits);
[error] = await backupTargetsModel.setLimits(target.value.id, limits);
if (error) {
formError.value.generic = error.body ? error.body.message : 'Internal error';
busy.value = false;
@@ -61,6 +69,7 @@ defineExpose({
busy.value = false;
target.value = t;
name.value = t.name || '';
memoryLimit.value = t.limits.memoryLimit || 1024 * 1024 * 1024; // 1 GB
uploadPartSize.value = t.limits.uploadPartSize || 10 * 1024 * 1024;
syncConcurrency.value = t.limits.syncConcurrency || 10;
@@ -113,50 +122,66 @@ defineExpose({
<div class="info-value">{{ target.config.endpoint || target.config.region }}</div>
</div>
<div class="info-row" v-if="target.encrypted">
<!-- TODO translate -->
<div class="info-label">Encryption Password Hint</div>
<div class="info-label">{{ $t('backups.configureBackupStorage.encryptionHint') }}</div>
<div class="info-value">{{ target.encryptionPasswordHint }}</div>
</div>
<FormGroup>
<label for="memoryLimitInput">{{ $t('backups.configureBackupStorage.memoryLimit') }}: <b>{{ prettyBinarySize(memoryLimit, '1024 MB') }}</b></label>
<div class="small">{{ $t('backups.configureBackupStorage.memoryLimitDescription') }}</div>
<input type="range" id="memoryLimitInput" v-model="memoryLimit" :step="256*1024*1024" :min="minMemoryLimit" :max="maxMemoryLimit" />
</FormGroup>
<form @submit.prevent="onSubmit()" autocomplete="off" ref="form">
<fieldset :disabled="busy">
<input style="display: none;" type="submit"/>
<FormGroup v-if="s3like(target.provider)">
<label for="uploadPartSizeInput">{{ $t('backups.configureBackupStorage.uploadPartSize') }}: <b>{{ prettyBinarySize(uploadPartSize, 'Default (50 MiB)') }}</b></label>
<p class="small">{{ $t('backups.configureBackupStorage.uploadPartSizeDescription') }}</p>
<input type="range" id="uploadPartSizeInput" v-model="uploadPartSize" list="uploadPartSizeTicks" :step="1024*1024" :min="10*1024*1024" :max="1024*1024*1024" />
<datalist id="uploadPartSizeTicks">
<option :value="1024*1024*10"></option>
<option :value="1024*1024*64"></option>
<option :value="1024*1024*128"></option>
<option :value="1024*1024*256"></option>
<option :value="1024*1024*512"></option>
<option :value="1024*1024*1024"></option>
</datalist>
</FormGroup>
<FormGroup>
<label for="nameInput">{{ $t('backups.configureBackupStorage.name') }}</label>
<TextInput id="nameInput" v-model="name" required/>
</FormGroup>
<FormGroup v-if="target.format === 'rsync' && target.provider !== 'noop'">
<label for="syncConcurrencyInput">{{ $t('backups.configureBackupStorage.uploadConcurrency') }}: <b>{{ syncConcurrency }}</b></label>
<div class="small">{{ $t('backups.configureBackupStorage.uploadConcurrencyDescription') }}</div>
<input type="range" id="syncConcurrencyInput" v-model="syncConcurrency" step="10" min="10" max="200" />
</FormGroup>
<FormGroup>
<label for="memoryLimitInput">{{ $t('backups.configureBackupStorage.memoryLimit') }}: <b>{{ prettyBinarySize(memoryLimit, '1024 MB') }}</b></label>
<div class="small">{{ $t('backups.configureBackupStorage.memoryLimitDescription') }}</div>
<input type="range" id="memoryLimitInput" v-model="memoryLimit" :step="256*1024*1024" :min="minMemoryLimit" :max="maxMemoryLimit" />
</FormGroup>
<FormGroup v-if="target.format === 'rsync' && (s3like(target.provider) || target.provider === 'gcs')">
<label for="downloadConcurrencyInput">{{ $t('backups.configureBackupStorage.downloadConcurrency') }}: <b>{{ downloadConcurrency }}</b></label>
<div class="small">{{ $t('backups.configureBackupStorage.downloadConcurrencyDescription') }}</div>
<input type="range" id="downloadConcurrencyInput" v-model="downloadConcurrency" step="10" min="10" max="200" />
</FormGroup>
<FormGroup>
<label for="memoryLimitInput">{{ $t('backups.configureBackupStorage.memoryLimit') }}: <b>{{ prettyBinarySize(memoryLimit, '1024 MB') }}</b></label>
<div class="small">{{ $t('backups.configureBackupStorage.memoryLimitDescription') }}</div>
<input type="range" id="memoryLimitInput" v-model="memoryLimit" :step="256*1024*1024" :min="minMemoryLimit" :max="maxMemoryLimit" />
</FormGroup>
<FormGroup v-if="target.format === 'rsync' && (s3like(target.provider) || target.provider === 'gcs')">
<label for="copyConcurrencyInput">{{ $t('backups.configureBackupStorage.copyConcurrency') }}: <b>{{ copyConcurrency }}</b></label>
<div class="small">{{ $t('backups.configureBackupStorage.copyConcurrencyDescription') }}
<span v-show="target.provider === 'digitalocean-spaces'">{{ $t('backups.configureBackupStorage.copyConcurrencyDigitalOceanNote') }}</span>
</div>
<input type="range" id="copyConcurrencyInput" v-model="copyConcurrency" step="10" min="10" max="500" />
</FormGroup>
<FormGroup v-if="s3like(target.provider)">
<label for="uploadPartSizeInput">{{ $t('backups.configureBackupStorage.uploadPartSize') }}: <b>{{ prettyBinarySize(uploadPartSize, 'Default (50 MiB)') }}</b></label>
<p class="small">{{ $t('backups.configureBackupStorage.uploadPartSizeDescription') }}</p>
<input type="range" id="uploadPartSizeInput" v-model="uploadPartSize" list="uploadPartSizeTicks" :step="1024*1024" :min="10*1024*1024" :max="1024*1024*1024" />
<datalist id="uploadPartSizeTicks">
<option :value="1024*1024*10"></option>
<option :value="1024*1024*64"></option>
<option :value="1024*1024*128"></option>
<option :value="1024*1024*256"></option>
<option :value="1024*1024*512"></option>
<option :value="1024*1024*1024"></option>
</datalist>
</FormGroup>
<FormGroup v-if="target.format === 'rsync' && target.provider !== 'noop'">
<label for="syncConcurrencyInput">{{ $t('backups.configureBackupStorage.uploadConcurrency') }}: <b>{{ syncConcurrency }}</b></label>
<div class="small">{{ $t('backups.configureBackupStorage.uploadConcurrencyDescription') }}</div>
<input type="range" id="syncConcurrencyInput" v-model="syncConcurrency" step="10" min="10" max="200" />
</FormGroup>
<FormGroup v-if="target.format === 'rsync' && (s3like(target.provider) || target.provider === 'gcs')">
<label for="downloadConcurrencyInput">{{ $t('backups.configureBackupStorage.downloadConcurrency') }}: <b>{{ downloadConcurrency }}</b></label>
<div class="small">{{ $t('backups.configureBackupStorage.downloadConcurrencyDescription') }}</div>
<input type="range" id="downloadConcurrencyInput" v-model="downloadConcurrency" step="10" min="10" max="200" />
</FormGroup>
<FormGroup v-if="target.format === 'rsync' && (s3like(target.provider) || target.provider === 'gcs')">
<label for="copyConcurrencyInput">{{ $t('backups.configureBackupStorage.copyConcurrency') }}: <b>{{ copyConcurrency }}</b></label>
<div class="small">{{ $t('backups.configureBackupStorage.copyConcurrencyDescription') }}
<span v-show="target.provider === 'digitalocean-spaces'">{{ $t('backups.configureBackupStorage.copyConcurrencyDigitalOceanNote') }}</span>
</div>
<input type="range" id="copyConcurrencyInput" v-model="copyConcurrency" step="10" min="10" max="500" />
</FormGroup>
</fieldset>
</form>
</div>
</div>
</Dialog>