summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorJannik Schönartz2018-07-26 15:13:43 +0200
committerJannik Schönartz2018-07-26 15:13:43 +0200
commit1e44db2c427913e807166e183616819f08d05eca (patch)
tree78c5518134cf1d79a65a9a9b060f47c9c3a19809
parent[server/backends] Added iDoII Backend. Implemented a checkConnection method f... (diff)
downloadbas-1e44db2c427913e807166e183616819f08d05eca.tar.gz
bas-1e44db2c427913e807166e183616819f08d05eca.tar.xz
bas-1e44db2c427913e807166e183616819f08d05eca.zip
[webapp/backends] Reworked Dynamic fields to work with the new recursive structure. Added the third step in the stepper which tests the connection (optional).
-rw-r--r--webapp/src/components/BackendModuleEdit.vue254
-rw-r--r--webapp/src/components/BackendModuleEditDynamicFields.vue73
-rw-r--r--webapp/src/components/BackendModuleTable.vue6
3 files changed, 272 insertions, 61 deletions
diff --git a/webapp/src/components/BackendModuleEdit.vue b/webapp/src/components/BackendModuleEdit.vue
index 90045f4..87d97a2 100644
--- a/webapp/src/components/BackendModuleEdit.vue
+++ b/webapp/src/components/BackendModuleEdit.vue
@@ -1,26 +1,31 @@
<i18n>
{
"en": {
- "select_backend_type": "Select a backend type.",
- "input_credentials": "Fill in the backend details.",
+ "input_credentials": "Login credentials",
"backend_name": "Backend name",
"backend_empty_error": "This field can not be empty.",
"backend_type": "Backend type",
"backendtype_empty_error": "Please choose a backend type.",
- "stepper_optional": "optional"
+ "stepper_optional": "optional",
+ "pending": "pending",
+ "progress": "in progress ...",
+ "success": "success",
+ "error": "error"
},
"de": {
- "select_backend_type": "Wähle einen Backend typ aus.",
- "input_credentials": "Gib die benötigten Backend Daten ein.",
+ "input_credentials": "Anmeldedaten",
"backend_name": "Backend Name",
"backend_empty_error": "Dieses Feld darf nicht leer sein.",
"backend_type": "Backend Typ",
"backendtype_empty_error": "Bitte wähle einen Backendtyp aus.",
- "stepper_optional": "Optional"
+ "stepper_optional": "Optional",
+ "pending": "Nicht getestet",
+ "progress": "Test läuft ...",
+ "success": "Erfolgreich",
+ "error": "Fehler"
}
}
</i18n>
-
<template>
<v-form class="edit-backend-form" ref="form" v-model="valid" @submit.prevent="submit" lazy-validation>
<v-stepper v-model="step" horizontal>
@@ -28,23 +33,20 @@
<v-stepper-step
:complete="stepCompleted >= 1"
step="1"
- :editable="stepCompleted >= 1"
- edit-icon="check"
+ :editable="stepCompleted >= 1 && !loadData"
:rules="[() => true]"
- >{{ $t('select_backend_type') }}</v-stepper-step>
+ >{{ $t('backend_type') }}</v-stepper-step>
<v-divider></v-divider>
<v-stepper-step
:complete="stepCompleted >= 2"
step="2"
:editable="stepCompleted >= 2"
- edit-icon="check"
>{{ $t('input_credentials') }}</v-stepper-step>
<v-divider></v-divider>
<v-stepper-step
:complete="stepCompleted >= 3"
step="3"
:editable="stepCompleted >= 3"
- edit-icon="check"
>{{ $t('test_connection') }}
<small>{{ $t('stepper_optional') }}</small>
</v-stepper-step>
@@ -58,6 +60,7 @@
:label="$t('backend_type')"
:rules="[() => !!backendType || $t('backendtype_empty_error')]"
@change="loadInputFields"
+ prepend-icon="view_list"
></v-select>
</v-stepper-content>
<v-stepper-content step="2" class="stepper-content">
@@ -66,43 +69,27 @@
:label="$t('backend_name')"
:rules="[() => !!backendName || $t('backend_empty_error')]"
ref="backendName"
+ prepend-icon="assignment_ind"
></v-text-field>
- <template v-for="element in elements">
- <v-text-field
- v-if="element.type == 'text'"
- label="TODO:"
- :key="element.name"
- v-model="element.value"
- :prepend-icon="element.icon"
- ></v-text-field>
- <v-text-field
- v-if="element.type == 'password'"
- label="TODOOO yoo"
- :key="element.name"
- :append-icon="element.show ? 'visibility_off' : 'visibility'"
- :type="element.show ? 'text' : 'password'"
- @click:append="element.show = !element.show"
- v-model="element.value"
- ></v-text-field>
- <v-switch
- v-if="element.type == 'switch'"
- v-model="element.value"
- :label="element.name"
- :key="element.name"
- color="primary"
- ></v-switch>
- <v-select
- offset-y
- v-if="element.type == 'select'"
- :items="element.items"
- label="Standard"
- :key="element.name"
- v-model="element.value"
- ></v-select>
- </template>
+ <backend-module-edit-dynamic-fields :elements="elements"/>
</v-stepper-content>
<v-stepper-content step="3" class="stepper-content">
- <v-btn color="primary">{{ $t('work_in_progress') }}</v-btn>
+ <v-container>
+ <v-layout align-center justify-center column>
+ <v-btn
+ fab
+ dark
+ icon
+ :loading="loading"
+ :disabled="loading"
+ @click.stop="checkConnection"
+ large
+ >
+ <v-icon x-large color="primary">cached</v-icon>
+ </v-btn>
+ <div class="display-1">{{ $t('status') }}: <strong :class="statusColor">{{ statusLabel }}</strong></div>
+ </v-layout>
+ </v-container>
</v-stepper-content>
</v-stepper-items>
@@ -118,38 +105,123 @@
</v-stepper>
</v-form>
</template>
+<!--
+<template>
+<v-form class="edit-backend-form" ref="form" v-model="valid" @submit.prevent="submit" lazy-validation>
+ <v-card>
+ <v-stepper v-model="step" horizontal>
+ <v-stepper-header>
+ <v-stepper-step
+ :complete="stepCompleted >= 1"
+ step="1"
+ :editable="stepCompleted >= 1 && !loadData"
+ :rules="[() => true]"
+ >{{ $t('backend_type') }}</v-stepper-step>
+ <v-divider></v-divider>
+ <v-stepper-step
+ :complete="stepCompleted >= 2"
+ step="2"
+ :editable="stepCompleted >= 2"
+ >{{ $t('input_credentials') }}</v-stepper-step>
+ <v-divider></v-divider>
+ <v-stepper-step
+ :complete="stepCompleted >= 3"
+ step="3"
+ :editable="stepCompleted >= 3"
+ >{{ $t('test_connection') }}
+ <small>{{ $t('stepper_optional') }}</small>
+ </v-stepper-step>
+ </v-stepper-header>
+ <v-card-text style="height: 500px;">
+<v-stepper-items>
+ <v-stepper-content step="1" class="stepper-content">
+ <v-select
+ offset-y
+ v-model="backendType"
+ :items="backendChoices"
+ :label="$t('backend_type')"
+ :rules="[() => !!backendType || $t('backendtype_empty_error')]"
+ @change="loadInputFields"
+ prepend-icon="view_list"
+ ></v-select>
+ </v-stepper-content>
+ <v-stepper-content step="2" class="stepper-content">
+ <v-text-field
+ v-model="backendName"
+ :label="$t('backend_name')"
+ :rules="[() => !!backendName || $t('backend_empty_error')]"
+ ref="backendName"
+ prepend-icon="assignment_ind"
+ ></v-text-field>
+ <backend-module-edit-dynamic-fields :elements="elements"/>
+ </v-stepper-content>
+ <v-stepper-content step="3" class="stepper-content">
+ <v-container>
+ <v-layout align-center justify-center column>
+ <v-btn
+ fab
+ dark
+ icon
+ :loading="loading"
+ :disabled="loading"
+ @click.stop="checkConnection"
+ large
+ >
+ <v-icon x-large color="primary">cached</v-icon>
+ </v-btn>
+ <div class="display-1">{{ $t('status') }}: <strong :class="statusColor">{{ statusLabel }}</strong></div>
+ </v-layout>
+ </v-container>
+ </v-stepper-content>
+ </v-stepper-items>
+ </v-card-text>
+ <v-divider></v-divider>
+ <v-card-actions>
+ <v-flex xl10 offset-xl1 lg12 text-xs-right>
+ <v-btn flat @click.native="$store.commit('backends/setDialog', { show: false })">{{ $t('cancel') }}</v-btn>
+ <v-btn color="primary" v-show="step == 1" @click.native="completeStepOne()">{{ $t('continue') }}</v-btn>
+ <v-btn color="primary" v-show="step == 2" @click.native="completeStepTwo()">{{ $t('continue') }}</v-btn>
+ <v-btn type="submit" v-show="step == 3" class="primary" raised>{{ $t('submit') }}</v-btn>
+ </v-flex>
+ </v-card-actions>
+ </v-stepper>
+ </v-card>
+</v-form>
+</template>
+-->
<script>
+import BackendModuleEditDynamicFields from '@/components/BackendModuleEditDynamicFields'
export default {
name: 'BackendModuleEdit',
props: ['backendId'],
+ components: {
+ BackendModuleEditDynamicFields
+ },
data () {
return {
valid: true,
step: 1,
stepCompleted: 0,
backendChoices: [],
- elements: [],
backendType: '',
backendName: '',
- loadData: false
+ elements: [],
+ loadData: false,
+ loading: false,
+ statusColor: 'primary--text',
+ statusLabel: this.$t('pending')
}
},
methods: {
submit (event) {
if (this.$refs.form.validate()) {
- var credentials = []
- this.elements.forEach(function (element) {
- const e = { id: element.id, value: element.value }
- credentials.push(e)
- })
-
this.$http.post('/api/backends/saveBackend', {
backendId: this.backendId,
backendName: this.backendName,
backendType: this.backendType,
- backendCredentials: credentials
+ backendCredentials: this.credentials
}).then(response => {
// TODO: Add backend saved successfull msg.
console.log('TODO: Implement snackbar and print backend added successfully msg.')
@@ -185,7 +257,8 @@ export default {
var credentials = res.data
// Make an array merge to combine the credentials with the values.
- var mergedCredentials = credentials.map(x => Object.assign(x, credentialValues.find(y => y.id === x.id)))
+ // var mergedCredentials = credentials.map(x => Object.assign(x, credentialValues.find(y => y.id === x.id)))
+ var mergedCredentials = mergeObjects(credentials, credentialValues)
this.elements = mergedCredentials
})
})
@@ -207,9 +280,39 @@ export default {
} else {
this.$refs.form.validate()
}
+ },
+ checkConnection () {
+ // Start the loading animation and reset the label colors.
+ this.loading = true
+ this.statusColor = 'primary--text'
+ this.statusLabel = this.$t('progress')
+
+ // Test the credential connection.
+ this.$http.post('/api/backends/checkConnection', {
+ backendName: this.backendName,
+ backendType: this.backendType,
+ backendCredentials: this.credentials,
+ headers: {
+ 'Cache-Control': 'no-cache'
+ }
+ }).then(response => {
+ if (response.data.success) {
+ this.statusColor = 'success--text'
+ this.statusLabel = this.$t('success')
+ } else {
+ this.statusColor = 'error--text'
+ this.statusLabel = this.$t('error')
+ this.$store.commit('newSnackbar', response.data.msg)
+ }
+ // Set item.loading = false to end the loading animation.
+ this.loading = false
+ })
}
},
computed: {
+ credentials: function () {
+ return filterData(this.elements)
+ }
},
beforeMount () {
this.loadBackendTypes()
@@ -222,12 +325,47 @@ export default {
watch: {
}
}
+
+function filterData (obj) {
+ var result = []
+ obj.forEach(function (element) {
+ const e = { id: element.id, value: element.value }
+ if (element.elements) {
+ e.elements = filterData(element.elements)
+ }
+ result.push(e)
+ })
+ return result
+}
+
+function mergeObjects (obj1, obj2) {
+ var tmp = []
+ var merged = obj1.map(x => Object.assign(x, obj2.find(y => {
+ if (y.id === x.id) {
+ if (x.elements && y.elements) {
+ var tmp2 = { id: x.id, elements: mergeObjects(x.elements, y.elements) }
+ tmp.push(tmp2)
+ }
+ }
+ return y.id === x.id
+ })))
+
+ // Is there a cleaner way?
+ tmp.forEach(function (e) {
+ merged.forEach(function (r) {
+ if (e.id === r.id) {
+ r.elements = e.elements
+ }
+ })
+ })
+ return merged
+}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.stepper-content {
- height: 600px;
- overflow: auto;
+ /*height: 600px;*/
+ /*overflow: auto;*/
}
</style>
diff --git a/webapp/src/components/BackendModuleEditDynamicFields.vue b/webapp/src/components/BackendModuleEditDynamicFields.vue
new file mode 100644
index 0000000..eae6357
--- /dev/null
+++ b/webapp/src/components/BackendModuleEditDynamicFields.vue
@@ -0,0 +1,73 @@
+<i18n>
+{
+ "en": {
+ },
+ "de": {
+ }
+}
+</i18n>
+<template>
+ <div>
+ <template v-for="element in elements">
+ <v-text-field
+ v-if="element.type == 'text'"
+ :label="element.name"
+ :key="element.name"
+ v-model="element.value"
+ :prepend-icon="element.icon"
+ ></v-text-field>
+ <v-text-field
+ v-else-if="element.type == 'password'"
+ :label="element.name"
+ :key="element.name"
+ :append-icon="element.show ? 'visibility_off' : 'visibility'"
+ :type="element.show ? 'text' : 'password'"
+ @click:append="element.show = !element.show"
+ v-model="element.value"
+ :prepend-icon="element.icon"
+ ></v-text-field>
+ <div v-else-if="element.type == 'switch'" :key="element.name">
+ <v-switch
+ v-model="element.value"
+ :label="element.name"
+ :key="element.name"
+ color="primary"
+ :prepend-icon="element.icon"
+ ></v-switch>
+ <backend-module-edit-dynamic-fields :elements="element.elements" v-if="element.value"/>
+ </div>
+ <v-select
+ offset-y
+ v-else-if="element.type == 'select'"
+ :items="element.items"
+ :label="element.name"
+ :key="element.name"
+ v-model="element.value"
+ ></v-select>
+ </template>
+ </div>
+</template>
+
+<script>
+import BackendModuleEditDynamicFields from '@/components/BackendModuleEditDynamicFields'
+
+export default {
+ props: ['elements'],
+ data () {
+ return {
+ }
+ },
+ methods: {
+ },
+ computed: {
+ },
+ created () {
+ this.$options.components['BackendModuleEditDynamicFields'] = BackendModuleEditDynamicFields
+ }
+}
+
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+</style>
diff --git a/webapp/src/components/BackendModuleTable.vue b/webapp/src/components/BackendModuleTable.vue
index 2ca15b3..a0e59e4 100644
--- a/webapp/src/components/BackendModuleTable.vue
+++ b/webapp/src/components/BackendModuleTable.vue
@@ -104,15 +104,15 @@ export default {
// Set to start the loading animation.
item.loading = true
// Test the credential connection.
- this.$http('/api/backends/checkConnection?id=' + this.backendId, {
+ this.$http('/api/backends/checkConnection?id=' + item.id, {
headers: {
'Cache-Control': 'no-cache'
}
}).then(response => {
- if (response.data.status === 'success') {
+ if (response.data.success) {
// Set the button color to green if success.
item.connection = 'success'
- } else if (response.data.status === 'error') {
+ } else {
// Set the button color to red if error.
item.connection = 'error'
this.$store.commit('newSnackbar', response.data.msg)