summaryrefslogtreecommitdiffstats
path: root/webapp/src/components/BackendModuleSync.vue
diff options
context:
space:
mode:
Diffstat (limited to 'webapp/src/components/BackendModuleSync.vue')
-rw-r--r--webapp/src/components/BackendModuleSync.vue199
1 files changed, 199 insertions, 0 deletions
diff --git a/webapp/src/components/BackendModuleSync.vue b/webapp/src/components/BackendModuleSync.vue
new file mode 100644
index 0000000..1df3354
--- /dev/null
+++ b/webapp/src/components/BackendModuleSync.vue
@@ -0,0 +1,199 @@
+<i18n>
+{
+ "en": {
+ "syncOptions": "Synchronise Settings",
+ "syncType": "Sync type",
+ "noResultsCombobox": "No results matching \" {search} \". Press <kbd>enter</kbd> to create a new one"
+ },
+ "de": {
+ "syncOptions": "Synchronisierungseinstellungen",
+ "syncType": "Synchronisierungstyp",
+ "noResultsCombobox": "Kein resultat für \" {search} \" gefunden. Drücke <kbd>enter</kbd>, um ein neues zu erstellen"
+ }
+}
+</i18n>
+<template>
+ <v-dialog
+ :value="$store.state.backends.sync"
+ @input="$store.commit('backends/setSync', $event)"
+ max-width="500px"
+ scrollable
+ >
+ <v-card>
+ <v-card-title class="elevation-3">
+ <div class="headline">{{ $t('syncOptions') }}</div>
+ </v-card-title>
+ <v-card-text style="height: 500px; padding: 40px">
+ <v-select
+ v-model="syncType"
+ :items="syncTypes"
+ :label="$t('syncType')"
+ 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="device_hub"
+ >
+ <template slot="no-data">
+ <v-list-tile>
+ <v-list-tile-content>
+ <v-list-tile-title>
+ <p v-html="$t('noResultsCombobox', { search: searchGroups })"></p>
+ </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="device_hub"
+ ></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="computer"
+ >
+ <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="computer"
+ ></v-autocomplete>
+ </v-card-text>
+ <v-divider></v-divider>
+ <v-card-actions>
+ <v-flex xl10 offset-xl2 lg12 text-xs-right>
+ <v-btn flat @click.native="$store.commit('backends/setSync', false)">{{ $t('cancel') }}</v-btn>
+ <v-btn @click.native="save" class="primary" raised>{{ $t('save') }}</v-btn>
+ </v-flex>
+ </v-card-actions>
+ </v-card>
+ </v-dialog>
+</template>
+
+<script>
+
+export default {
+ props: ['backendId'],
+ components: {
+ },
+ data () {
+ return {
+ objectTypes: [],
+ searchGroups: '',
+ searchClients: '',
+ cbxGroups: null,
+ cbxClients: null,
+ syncTypes: [],
+ syncType: ''
+ }
+ },
+ methods: {
+ save (event) {
+ this.$http.post('/api/backends/saveSyncSettings', {
+ id: this.backendId,
+ groups: this.cbxGroups,
+ clients: this.cbxClients,
+ sync: this.syncType
+ }).then(response => {
+ // TODO: Add saved successfull msg.
+ this.$store.commit('backends/setSync', false)
+ }).catch(error => {
+ console.log(error)
+ })
+ }
+ },
+ computed: {
+ groupFilteredTypes () {
+ var types = this.objectTypes
+ types = types.filter(e => {
+ const g = this.cbxGroups.find(x => x.id === e.id && x.title === e.title)
+ return !g
+ })
+ return types
+ },
+ clientFilteredTypes () {
+ var types = this.objectTypes
+ types = types.filter(e => {
+ const c = this.cbxClients.find(y => y.id === e.id && y.title === e.title)
+ return !c
+ })
+ return types
+ },
+ sync: function () {
+ return this.$store.state.backends.sync
+ }
+ },
+ watch: {
+ sync: function (value) {
+ if (value) {
+ // Load the sync types from the backend.
+ this.$http('/api/backends/getSyncTypes?id=' + this.backendId).then(response => {
+ this.syncTypes = response.data
+ })
+ // 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/getSyncSettings?id=' + this.backendId).then(response => {
+ this.cbxGroups = response.data.groups
+ this.cbxClients = response.data.clients
+ this.syncType = response.data.sync
+ })
+ }
+ }
+ }
+}
+
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+</style>