summaryrefslogtreecommitdiffstats
path: root/webapp/src/components/BackendModuleSync.vue
diff options
context:
space:
mode:
authorJannik Schönartz2018-08-03 03:03:24 +0200
committerJannik Schönartz2018-08-03 03:03:24 +0200
commit2c5aa5fa1cb08cc320805c777b16d996bfcde2f6 (patch)
tree5f7c12a5a8fa881804679b02ad64e5c875a6ca5d /webapp/src/components/BackendModuleSync.vue
parent[server/external-backends] Added sync settings for the backends. Groups and c... (diff)
downloadbas-2c5aa5fa1cb08cc320805c777b16d996bfcde2f6.tar.gz
bas-2c5aa5fa1cb08cc320805c777b16d996bfcde2f6.tar.xz
bas-2c5aa5fa1cb08cc320805c777b16d996bfcde2f6.zip
[server/external-backends] Fixed some design issues. Smaller dialogs, dialog animation, lang tags and padding in the sync options.
Diffstat (limited to 'webapp/src/components/BackendModuleSync.vue')
-rw-r--r--webapp/src/components/BackendModuleSync.vue196
1 files changed, 103 insertions, 93 deletions
diff --git a/webapp/src/components/BackendModuleSync.vue b/webapp/src/components/BackendModuleSync.vue
index 7d259be..7edd1a7 100644
--- a/webapp/src/components/BackendModuleSync.vue
+++ b/webapp/src/components/BackendModuleSync.vue
@@ -1,101 +1,107 @@
<i18n>
{
"en": {
+ "sync-options": "Synchronise Settings",
+ "sync-type": "Sync type"
},
"de": {
+ "sync-options": "Synchronisierungseinstellungen",
+ "sync-type": "Synchronisierungstyp"
}
}
</i18n>
<template>
<v-dialog
- v-if="$store.state.backends.sync"
:value="$store.state.backends.sync"
@input="$store.commit('backends/setSync', $event)"
- max-width="700px"
+ max-width="500px"
scrollable
>
<v-card>
<v-card-title class="elevation-3">
<div class="headline">{{ $t('sync-options') }}</div>
</v-card-title>
- <v-card-text style="height: 500px;">
- <v-select :items="[ 'todo' ]" :label="$t('sync-option')" offset-y></v-select>
- <v-layout row>
- <v-flex style="width: 50%">
- <v-combobox v-if="objectTypes.length === 0"
- v-model="cbxGroups"
- :items="clientFilteredTypes"
- item-text="title"
- item-value="id"
- small-chips
- multiple
- :label="$t('groups')"
- :search-input.sync="searchGroups"
- hide-selected
- deletable-chips
- return-object
- >
- <template slot="no-data">
- <v-list-tile>
- <v-list-tile-content>
- <v-list-tile-title>
- No results matching "<strong>{{ searchGroups }}</strong>". Press <kbd>enter</kbd> to create a new one
- </v-list-tile-title>
- </v-list-tile-content>
- </v-list-tile>
- </template>
- </v-combobox>
- <v-autocomplete v-else
- v-model="cbxGroups"
- :items="clientFilteredTypes"
- item-text="title"
- item-value="id"
- small-chips
- multiple
- :label="$t('groups')"
- :search-input.sync="searchGroups"
- hide-selected
- deletable-chips
- return-object
- ></v-autocomplete>
- </v-flex>
- <v-flex style="margin-left: 48px; width: 50%">
- <v-combobox v-if="objectTypes.length === 0"
- v-model="cbxClients"
- :items="groupFilteredTypes"
- item-text="title"
- item-value="id"
- small-chips
- multiple
- :label="$t('clients')"
- hide-selected
- deletable-chips
- return-object
- >
- <template slot="no-data">
- <v-list-tile>
- <v-list-tile-content>
- <v-list-tile-title>
- No results matching "<strong>{{ searchClients }}</strong>". Press <kbd>enter</kbd> to create a new one
- </v-list-tile-title>
- </v-list-tile-content>
- </v-list-tile>
- </template>
- </v-combobox>
- <v-autocomplete v-else
- v-model="cbxClients"
- :items="groupFilteredTypes"
- item-text="title"
- item-value="id"
- small-chips
- multiple
- :label="$t('clients')"
- hide-selected
- deletable-chips
- return-object
- ></v-autocomplete>
- </v-flex>
- </v-layout>
+ <v-card-text style="height: 500px; padding: 40px">
+ <v-select
+ :items="syncTypes"
+ :label="$t('sync-type')"
+ offset-y
+ prepend-icon="settings_ethernet"
+ ></v-select>
+ <v-combobox v-if="objectTypes.length === 0"
+ v-model="cbxGroups"
+ :items="clientFilteredTypes"
+ item-text="title"
+ item-value="id"
+ small-chips
+ multiple
+ :label="$t('groups')"
+ :search-input.sync="searchGroups"
+ hide-selected
+ deletable-chips
+ return-object
+ prepend-icon="group"
+ >
+ <template slot="no-data">
+ <v-list-tile>
+ <v-list-tile-content>
+ <v-list-tile-title>
+ No results matching "<strong>{{ searchGroups }}</strong>". Press <kbd>enter</kbd> to create a new one
+ </v-list-tile-title>
+ </v-list-tile-content>
+ </v-list-tile>
+ </template>
+ </v-combobox>
+ <v-autocomplete v-else
+ v-model="cbxGroups"
+ :items="clientFilteredTypes"
+ item-text="title"
+ item-value="id"
+ small-chips
+ multiple
+ :label="$t('groups')"
+ :search-input.sync="searchGroups"
+ hide-selected
+ deletable-chips
+ return-object
+ prepend-icon="group"
+ ></v-autocomplete>
+ <v-combobox v-if="objectTypes.length === 0"
+ v-model="cbxClients"
+ :items="groupFilteredTypes"
+ item-text="title"
+ item-value="id"
+ small-chips
+ multiple
+ :label="$t('clients')"
+ hide-selected
+ deletable-chips
+ return-object
+ prepend-icon="laptop"
+ >
+ <template slot="no-data">
+ <v-list-tile>
+ <v-list-tile-content>
+ <v-list-tile-title>
+ No results matching "<strong>{{ searchClients }}</strong>". Press <kbd>enter</kbd> to create a new one
+ </v-list-tile-title>
+ </v-list-tile-content>
+ </v-list-tile>
+ </template>
+ </v-combobox>
+ <v-autocomplete v-else
+ v-model="cbxClients"
+ :items="groupFilteredTypes"
+ item-text="title"
+ item-value="id"
+ small-chips
+ multiple
+ :label="$t('clients')"
+ hide-selected
+ deletable-chips
+ return-object
+ prepend-icon="laptop"
+ ></v-autocomplete>
</v-card-text>
<v-divider></v-divider>
<v-card-actions>
@@ -126,7 +132,8 @@ export default {
searchGroups: '',
searchClients: '',
cbxGroups: null,
- cbxClients: null
+ cbxClients: null,
+ syncTypes: [ 'Two-Way', 'Upload Only', 'Upload Then Delete', 'Upload Mirror', 'Download Only', 'Download Then Delete', 'Download Mirror']
}
},
methods: {
@@ -159,22 +166,25 @@ export default {
return !c
})
return types
+ },
+ sync: function () {
+ return this.$store.state.backends.sync
}
},
- beforeMount () {
- },
watch: {
- },
- created () {
- // Load the object types from the backend.
- this.$http('/api/backends/getObjectTypes?id=' + this.backendId).then(response => {
- this.objectTypes = response.data
- })
+ sync: function (value) {
+ if (value) {
+ // Load the object types from the backend.
+ this.$http('/api/backends/getObjectTypes?id=' + this.backendId).then(response => {
+ this.objectTypes = response.data
+ })
- this.$http('/api/backends/getObjectTypesById?id=' + this.backendId).then(response => {
- this.cbxGroups = response.data.groups
- this.cbxClients = response.data.clients
- })
+ this.$http('/api/backends/getObjectTypesById?id=' + this.backendId).then(response => {
+ this.cbxGroups = response.data.groups
+ this.cbxClients = response.data.clients
+ })
+ }
+ }
}
}