Follow upstream recommendation to have html templates below script in .vue files
This commit is contained in:
Johannes Zellner
@@ -1,115 +1,3 @@
|
||||
<template>
|
||||
<div class="content">
|
||||
<InputDialog ref="inputDialog" />
|
||||
|
||||
<Dialog ref="volumeDialog"
|
||||
:title="volumeDialogData.mode === 'edit' ? $t('volumes.editVolumeDialog.title', { name: volumeDialogData.name }) : $t('volumes.addVolumeDialog.title')"
|
||||
:reject-label="$t('main.dialog.cancel')"
|
||||
:confirm-label="$t('main.dialog.save')"
|
||||
confirm-style="success"
|
||||
:confirm-active="volumeDialogValid"
|
||||
:confirm-busy="volumeDialogData.busy"
|
||||
@confirm="submitVolumeDialog()"
|
||||
>
|
||||
<form @submit="submitVolumeDialog()" autocomplete="off">
|
||||
<fieldset :disabled="volumeDialogData.busy">
|
||||
<input style="display: none;" type="submit" :disabled="!volumeDialogValid" />
|
||||
|
||||
<p class="has-error" v-show="volumeDialogData.error">{{ volumeDialogData.error }}</p>
|
||||
|
||||
<FormGroup v-if="volumeDialogData.mode === 'new'">
|
||||
<label for="volumeName">{{ $t('volumes.name') }}</label>
|
||||
<TextInput id="volumeName" v-model="volumeDialogData.name" />
|
||||
</FormGroup>
|
||||
|
||||
<FormGroup>
|
||||
<label for="volumeMountType">{{ $t('volumes.mountType') }}</label>
|
||||
<Dropdown id="volumeMountType" v-model="volumeDialogData.mountType" :options="mountTypeOptions" option-label="name" option-key="value" :disabled="volumeDialogData.mode === 'edit'"/>
|
||||
</FormGroup>
|
||||
|
||||
<FormGroup v-if="volumeDialogData.mountType === 'filesystem' || volumeDialogData.mountType === 'mountpoint'">
|
||||
<label for="volumeHostPath">{{ $t('volumes.localDirectory') }}</label>
|
||||
<TextInput id="volumeHostPath" v-model="volumeDialogData.hostPath" :placeholder="volumeDialogData.mountType === 'filesystem' ? '/srv/shared' : '/mnt/data'" />
|
||||
</FormGroup>
|
||||
|
||||
<FormGroup v-if="volumeDialogData.mountType === 'ext4' || volumeDialogData.mountType === 'xfs'">
|
||||
<label for="volumeDiskPath">{{ $t('volumes.addVolumeDialog.diskPath') }}</label>
|
||||
<Dropdown id="volumeMountType" v-if="volumeDialogData.mountType === 'ext4'" v-model="volumeDialogData.diskPath" :options="volumeDialogData.ext4BlockDevices" option-label="label" option-key="path" :disabled="volumeDialogData.mode === 'edit'"/>
|
||||
<Dropdown id="volumeMountType" v-if="volumeDialogData.mountType === 'xfs'" v-model="volumeDialogData.diskPath" :options="volumeDialogData.xfsBlockDevices" option-label="label" option-key="path" :disabled="volumeDialogData.mode === 'edit'"/>
|
||||
</FormGroup>
|
||||
|
||||
<FormGroup v-if="volumeDialogData.mountType === 'cifs' || volumeDialogData.mountType === 'nfs' || volumeDialogData.mountType === 'sshfs'">
|
||||
<label for="volumeHost">{{ $t('volumes.addVolumeDialog.server') }}</label>
|
||||
<TextInput v-model="volumeDialogData.host" id="volumeHost"/>
|
||||
</FormGroup>
|
||||
|
||||
<Checkbox v-if="volumeDialogData.mountType === 'cifs'" v-model="volumeDialogData.seal" :label="$t('backups.configureBackupStorage.cifsSealSupport')" />
|
||||
|
||||
<FormGroup v-if="volumeDialogData.mountType === 'sshfs'">
|
||||
<label for="volumePort">{{ $t('volumes.addVolumeDialog.port') }}</label>
|
||||
<NumberInput v-model="volumeDialogData.port" id="volumePort" min="0"/>
|
||||
</FormGroup>
|
||||
|
||||
<FormGroup v-if="volumeDialogData.mountType === 'cifs' || volumeDialogData.mountType === 'nfs' || volumeDialogData.mountType === 'sshfs'">
|
||||
<label for="volumeRemoteDir">{{ $t('volumes.addVolumeDialog.remoteDirectory') }}</label>
|
||||
<TextInput v-model="volumeDialogData.remoteDir" id="volumeRemoteDir" placeholder="/share" />
|
||||
</FormGroup>
|
||||
|
||||
<FormGroup v-if="volumeDialogData.mountType === 'cifs'">
|
||||
<label for="volumeUsername">{{ $t('volumes.addVolumeDialog.username') }}</label>
|
||||
<TextInput v-model="volumeDialogData.username" id="volumeUsername" />
|
||||
</FormGroup>
|
||||
|
||||
<FormGroup v-if="volumeDialogData.mountType === 'cifs'">
|
||||
<label for="volumePassword">{{ $t('volumes.addVolumeDialog.password') }}</label>
|
||||
<PasswordInput v-model="volumeDialogData.password" id="volumePassword" />
|
||||
</FormGroup>
|
||||
|
||||
<FormGroup v-if="volumeDialogData.mountType === 'sshfs'">
|
||||
<label for="volumeUser">{{ $t('volumes.addVolumeDialog.user') }}</label>
|
||||
<TextInput v-model="volumeDialogData.user" id="volumeAddUser" />
|
||||
</FormGroup>
|
||||
|
||||
<FormGroup v-if="volumeDialogData.mountType === 'sshfs'">
|
||||
<label for="volumePrivateKey">{{ $t('volumes.addVolumeDialog.privateKey') }}</label>
|
||||
<textarea v-model="volumeDialogData.privateKey" id="volumePrivateKey"></textarea>
|
||||
</FormGroup>
|
||||
|
||||
</fieldset>
|
||||
</form>
|
||||
</Dialog>
|
||||
|
||||
<Section :title="$t('volumes.title')">
|
||||
<template #header-buttons>
|
||||
<Button @click="openVolumeDialog()" icon="fa fa-plus">{{ $t('volumes.addVolumeAction') }}</Button>
|
||||
</template>
|
||||
|
||||
<div v-html="$t('volumes.description')"></div>
|
||||
<br/>
|
||||
<TableView :columns="columns" :model="volumes" :busy="busy">
|
||||
<template #target="slotProps">
|
||||
{{ (slotProps.mountType === 'mountpoint' || slotProps.mountType === 'filesystem') ? slotProps.hostPath : (slotProps.mountOptions.host || slotProps.mountOptions.diskPath || slotProps.hostPath) + (slotProps.mountOptions.remoteDir || '') }}
|
||||
</template>
|
||||
<template #status="slotProps">
|
||||
<div style="text-align: center;" v-tooltip="slotProps.message">
|
||||
<i class="fa fa-circle" :style="{ color: slotProps.state === 'active' ? '#27CE65' : '#d9534f' }"></i>
|
||||
</div>
|
||||
</template>
|
||||
<template #actions="slotProps">
|
||||
<div class="table-actions">
|
||||
<ButtonGroup>
|
||||
<Button tool secondary outline small icon="fa fa-sync-alt" v-if="slotProps.mountType === 'sshfs' || slotProps.mountType === 'cifs' || slotProps.mountType === 'nfs' || slotProps.mountType === 'ext4' || slotProps.mountType === 'xfs'" v-tooltip="$t('volumes.remountActionTooltip')" @click="remount(slotProps)"></Button>
|
||||
<Button tool secondary outline small icon="fa fa-pencil-alt" v-if="slotProps.mountType === 'sshfs' || slotProps.mountType === 'cifs' || slotProps.mountType === 'nfs'" v-tooltip="$t('volumes.editActionTooltip')" @click="openVolumeDialog(slotProps)"></Button>
|
||||
<Button tool secondary outline small icon="fas fa-folder" v-tooltip="$t('volumes.openFileManagerActionTooltip')" :href="'/filemanager.html#/home/volume/' + slotProps.id" target="_blank"></Button>
|
||||
</ButtonGroup>
|
||||
<Button tool danger outline small icon="far fa-trash-alt" v-tooltip="$t('volumes.removeVolumeActionTooltip')" @click="onRemove(slotProps)"></Button>
|
||||
</div>
|
||||
</template>
|
||||
</TableView>
|
||||
</Section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import { Button, ButtonGroup, Checkbox, Dialog, Dropdown, FormGroup, InputDialog, NumberInput, PasswordInput, TableView, TextInput } from 'pankow';
|
||||
@@ -312,3 +200,115 @@ export default {
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="content">
|
||||
<InputDialog ref="inputDialog" />
|
||||
|
||||
<Dialog ref="volumeDialog"
|
||||
:title="volumeDialogData.mode === 'edit' ? $t('volumes.editVolumeDialog.title', { name: volumeDialogData.name }) : $t('volumes.addVolumeDialog.title')"
|
||||
:reject-label="$t('main.dialog.cancel')"
|
||||
:confirm-label="$t('main.dialog.save')"
|
||||
confirm-style="success"
|
||||
:confirm-active="volumeDialogValid"
|
||||
:confirm-busy="volumeDialogData.busy"
|
||||
@confirm="submitVolumeDialog()"
|
||||
>
|
||||
<form @submit="submitVolumeDialog()" autocomplete="off">
|
||||
<fieldset :disabled="volumeDialogData.busy">
|
||||
<input style="display: none;" type="submit" :disabled="!volumeDialogValid" />
|
||||
|
||||
<p class="has-error" v-show="volumeDialogData.error">{{ volumeDialogData.error }}</p>
|
||||
|
||||
<FormGroup v-if="volumeDialogData.mode === 'new'">
|
||||
<label for="volumeName">{{ $t('volumes.name') }}</label>
|
||||
<TextInput id="volumeName" v-model="volumeDialogData.name" />
|
||||
</FormGroup>
|
||||
|
||||
<FormGroup>
|
||||
<label for="volumeMountType">{{ $t('volumes.mountType') }}</label>
|
||||
<Dropdown id="volumeMountType" v-model="volumeDialogData.mountType" :options="mountTypeOptions" option-label="name" option-key="value" :disabled="volumeDialogData.mode === 'edit'"/>
|
||||
</FormGroup>
|
||||
|
||||
<FormGroup v-if="volumeDialogData.mountType === 'filesystem' || volumeDialogData.mountType === 'mountpoint'">
|
||||
<label for="volumeHostPath">{{ $t('volumes.localDirectory') }}</label>
|
||||
<TextInput id="volumeHostPath" v-model="volumeDialogData.hostPath" :placeholder="volumeDialogData.mountType === 'filesystem' ? '/srv/shared' : '/mnt/data'" />
|
||||
</FormGroup>
|
||||
|
||||
<FormGroup v-if="volumeDialogData.mountType === 'ext4' || volumeDialogData.mountType === 'xfs'">
|
||||
<label for="volumeDiskPath">{{ $t('volumes.addVolumeDialog.diskPath') }}</label>
|
||||
<Dropdown id="volumeMountType" v-if="volumeDialogData.mountType === 'ext4'" v-model="volumeDialogData.diskPath" :options="volumeDialogData.ext4BlockDevices" option-label="label" option-key="path" :disabled="volumeDialogData.mode === 'edit'"/>
|
||||
<Dropdown id="volumeMountType" v-if="volumeDialogData.mountType === 'xfs'" v-model="volumeDialogData.diskPath" :options="volumeDialogData.xfsBlockDevices" option-label="label" option-key="path" :disabled="volumeDialogData.mode === 'edit'"/>
|
||||
</FormGroup>
|
||||
|
||||
<FormGroup v-if="volumeDialogData.mountType === 'cifs' || volumeDialogData.mountType === 'nfs' || volumeDialogData.mountType === 'sshfs'">
|
||||
<label for="volumeHost">{{ $t('volumes.addVolumeDialog.server') }}</label>
|
||||
<TextInput v-model="volumeDialogData.host" id="volumeHost"/>
|
||||
</FormGroup>
|
||||
|
||||
<Checkbox v-if="volumeDialogData.mountType === 'cifs'" v-model="volumeDialogData.seal" :label="$t('backups.configureBackupStorage.cifsSealSupport')" />
|
||||
|
||||
<FormGroup v-if="volumeDialogData.mountType === 'sshfs'">
|
||||
<label for="volumePort">{{ $t('volumes.addVolumeDialog.port') }}</label>
|
||||
<NumberInput v-model="volumeDialogData.port" id="volumePort" min="0"/>
|
||||
</FormGroup>
|
||||
|
||||
<FormGroup v-if="volumeDialogData.mountType === 'cifs' || volumeDialogData.mountType === 'nfs' || volumeDialogData.mountType === 'sshfs'">
|
||||
<label for="volumeRemoteDir">{{ $t('volumes.addVolumeDialog.remoteDirectory') }}</label>
|
||||
<TextInput v-model="volumeDialogData.remoteDir" id="volumeRemoteDir" placeholder="/share" />
|
||||
</FormGroup>
|
||||
|
||||
<FormGroup v-if="volumeDialogData.mountType === 'cifs'">
|
||||
<label for="volumeUsername">{{ $t('volumes.addVolumeDialog.username') }}</label>
|
||||
<TextInput v-model="volumeDialogData.username" id="volumeUsername" />
|
||||
</FormGroup>
|
||||
|
||||
<FormGroup v-if="volumeDialogData.mountType === 'cifs'">
|
||||
<label for="volumePassword">{{ $t('volumes.addVolumeDialog.password') }}</label>
|
||||
<PasswordInput v-model="volumeDialogData.password" id="volumePassword" />
|
||||
</FormGroup>
|
||||
|
||||
<FormGroup v-if="volumeDialogData.mountType === 'sshfs'">
|
||||
<label for="volumeUser">{{ $t('volumes.addVolumeDialog.user') }}</label>
|
||||
<TextInput v-model="volumeDialogData.user" id="volumeAddUser" />
|
||||
</FormGroup>
|
||||
|
||||
<FormGroup v-if="volumeDialogData.mountType === 'sshfs'">
|
||||
<label for="volumePrivateKey">{{ $t('volumes.addVolumeDialog.privateKey') }}</label>
|
||||
<textarea v-model="volumeDialogData.privateKey" id="volumePrivateKey"></textarea>
|
||||
</FormGroup>
|
||||
|
||||
</fieldset>
|
||||
</form>
|
||||
</Dialog>
|
||||
|
||||
<Section :title="$t('volumes.title')">
|
||||
<template #header-buttons>
|
||||
<Button @click="openVolumeDialog()" icon="fa fa-plus">{{ $t('volumes.addVolumeAction') }}</Button>
|
||||
</template>
|
||||
|
||||
<div v-html="$t('volumes.description')"></div>
|
||||
<br/>
|
||||
<TableView :columns="columns" :model="volumes" :busy="busy">
|
||||
<template #target="slotProps">
|
||||
{{ (slotProps.mountType === 'mountpoint' || slotProps.mountType === 'filesystem') ? slotProps.hostPath : (slotProps.mountOptions.host || slotProps.mountOptions.diskPath || slotProps.hostPath) + (slotProps.mountOptions.remoteDir || '') }}
|
||||
</template>
|
||||
<template #status="slotProps">
|
||||
<div style="text-align: center;" v-tooltip="slotProps.message">
|
||||
<i class="fa fa-circle" :style="{ color: slotProps.state === 'active' ? '#27CE65' : '#d9534f' }"></i>
|
||||
</div>
|
||||
</template>
|
||||
<template #actions="slotProps">
|
||||
<div class="table-actions">
|
||||
<ButtonGroup>
|
||||
<Button tool secondary outline small icon="fa fa-sync-alt" v-if="slotProps.mountType === 'sshfs' || slotProps.mountType === 'cifs' || slotProps.mountType === 'nfs' || slotProps.mountType === 'ext4' || slotProps.mountType === 'xfs'" v-tooltip="$t('volumes.remountActionTooltip')" @click="remount(slotProps)"></Button>
|
||||
<Button tool secondary outline small icon="fa fa-pencil-alt" v-if="slotProps.mountType === 'sshfs' || slotProps.mountType === 'cifs' || slotProps.mountType === 'nfs'" v-tooltip="$t('volumes.editActionTooltip')" @click="openVolumeDialog(slotProps)"></Button>
|
||||
<Button tool secondary outline small icon="fas fa-folder" v-tooltip="$t('volumes.openFileManagerActionTooltip')" :href="'/filemanager.html#/home/volume/' + slotProps.id" target="_blank"></Button>
|
||||
</ButtonGroup>
|
||||
<Button tool danger outline small icon="far fa-trash-alt" v-tooltip="$t('volumes.removeVolumeActionTooltip')" @click="onRemove(slotProps)"></Button>
|
||||
</div>
|
||||
</template>
|
||||
</TableView>
|
||||
</Section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user