summaryrefslogtreecommitdiffstats
path: root/webapp/src/components/BackendEditComponent.vue
diff options
context:
space:
mode:
Diffstat (limited to 'webapp/src/components/BackendEditComponent.vue')
-rw-r--r--webapp/src/components/BackendEditComponent.vue191
1 files changed, 191 insertions, 0 deletions
diff --git a/webapp/src/components/BackendEditComponent.vue b/webapp/src/components/BackendEditComponent.vue
new file mode 100644
index 0000000..0dcbd9b
--- /dev/null
+++ b/webapp/src/components/BackendEditComponent.vue
@@ -0,0 +1,191 @@
+<i18n>
+{
+ "en": {
+ "select_backend_type": "Select a backend type.",
+ "input_credentials": "Fill in the backend credentials.",
+ "backend_name": "Backend name",
+ "backend_empty_error": "This field can not be empty.",
+ "backendtype_empty_error": "Please choose a backend type."
+ },
+ "de": {
+ "select_backend_type": "Wähle einen Backend typ aus.",
+ "input_credentials": "Gib die benötigten Backend Daten ein.",
+ "backend_name": "Backend Name",
+ "backend_empty_error": "Dieses Feld darf nicht leer sein.",
+ "backendtype_empty_error": "Bitte wähle einen Backendtyp aus."
+ }
+}
+</i18n>
+
+<template>
+ <v-container>
+ <v-layout>
+ <v-flex md8 offset-md2 sm10 offset-sm1>
+ <v-form class="edit-backend-form" ref="form" v-model="valid" @submit.prevent="submit" lazy-validation>
+ <v-stepper v-model="step" vertical>
+ <v-stepper-step
+ :complete="stepCompleted >= 1"
+ step="1"
+ :editable="stepCompleted >= 1"
+ edit-icon="check"
+ :rules="[() => true]"
+ >{{ $t('select_backend_type') }}</v-stepper-step>
+ <v-stepper-content step="1">
+ <v-text-field solo
+ class="backend-select"
+ v-model="backendName"
+ :label="$t('backend_name')"
+ :rules="[() => !!backendName || $t('backend_empty_error')]"
+ ref="backendName"
+ ></v-text-field>
+ <v-select
+ solo
+ offset-y
+ class="backend-select"
+ v-model="backendType"
+ :items="backendChoices"
+ :rules="[() => !!backendType || $t('backendtype_empty_error')]"
+ @change="loadInputFields"
+ ></v-select>
+ <v-btn color="primary" @click.native="completeStepOne();">{{ $t('continue') }}</v-btn>
+ <v-btn flat @click.native="$emit('cancel-edit')">{{ $t('cancel') }}</v-btn>
+ </v-stepper-content>
+ <v-stepper-step
+ :complete="stepCompleted >= 2"
+ step="2"
+ :editable="stepCompleted >= 2"
+ edit-icon="check"
+ >{{ $t('input_credentials') }}</v-stepper-step>
+ <v-stepper-content step="2">
+ <template v-for="element in elements">
+ <v-text-field
+ solo
+ v-if="element.type == 'text'"
+ label="Regular"
+ :key="element.name"
+ v-model="element.value"
+ ></v-text-field>
+ <v-text-field
+ solo
+ v-if="element.type == 'password'"
+ label="Regular"
+ :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"
+ ></v-switch>
+ <v-select
+ solo
+ offset-y
+ v-if="element.type == 'select'"
+ :items="element.items"
+ label="Standard"
+ :key="element.name"
+ v-model="element.value"
+ ></v-select>
+ </template>
+ <!--<v-btn color="primary" @click.native="step = 3; stepCompleted = Math.max(2, stepCompleted)">{{ $t('continue') }}</v-btn>-->
+ <v-btn type="submit" class="primary" raised>{{ $t('submit') }}</v-btn>
+ <v-btn flat @click.native="$emit('cancel-edit')">{{ $t('cancel') }}</v-btn>
+ </v-stepper-content>
+ <!--<v-stepper-step :complete="stepCompleted >= 3" step="3" :editable="stepCompleted >= 3" edit-icon="check">Select an ad format and name ad unit</v-stepper-step>-->
+ </v-stepper>
+ </v-form>
+ </v-flex>
+ </v-layout>
+ </v-container>
+</template>
+
+<script>
+
+export default {
+ name: 'BackendEditComponent',
+ props: ['backendId'],
+ data () {
+ return {
+ valid: true,
+ step: 1,
+ stepCompleted: 0,
+ backendType: '',
+ backendChoices: [],
+ elements: [],
+ show: false,
+ backendName: '',
+ loadData: false
+ }
+ },
+ methods: {
+ submit (event) {
+ if (this.$refs.form.validate()) {
+ this.$http.post('/api/backends/saveBackend', {
+ backendId: this.backendId,
+ backendName: this.backendName,
+ backendType: this.backendType,
+ backendCredentials: this.elements
+ }).then(response => {
+ // TODO: Add backend saved successfull msg.
+ console.log('TODO: Implement snackbar and print backend added successfully msg.')
+ this.$emit('cancel-edit')
+ }).catch(error => {
+ console.log(error)
+ // if (error.response.data.status === '') {
+ // }
+ // this.$refs.form.validate()
+ })
+ }
+ },
+ loadBackendTypes () {
+ this.$http('/api/backends/getBackendTypes').then(response => {
+ this.backendChoices = response.data
+ })
+ },
+ loadInputFields () {
+ if (!this.loadData) {
+ this.$http('/api/backends/getCredentialsByType?type=' + this.backendType).then(response => {
+ this.elements = response.data
+ })
+ }
+ },
+ loadBackend (backendId) {
+ this.$http('/api/backends/getBackendInfoById?id=' + this.backendId).then(response => {
+ this.backendName = response.data.backendName
+ this.loadData = true
+ this.backendType = response.data.backendType
+ this.elements = JSON.parse(response.data.backendCredentials)
+ })
+ },
+ completeStepOne () {
+ // Error handling
+ if (this.backendName !== '' && this.backendType !== '') {
+ this.step = 2
+ this.stepCompleted = Math.max(1, this.stepCompleted)
+ } else {
+ this.$refs.form.validate()
+ }
+ }
+ },
+ computed: {
+ },
+ beforeMount () {
+ this.loadBackendTypes()
+ if (this.backendId !== 0) {
+ this.loadBackend(this.backendId)
+ }
+ }
+}
+
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+.backend-select {
+ margin: 6px;
+}
+</style>