summaryrefslogtreecommitdiffstats
path: root/webapp/src
diff options
context:
space:
mode:
authorJannik Schönartz2018-07-17 00:22:55 +0200
committerJannik Schönartz2018-07-17 00:22:55 +0200
commite1d4375f741e5c67e0304c7fda36eda41df4b4c1 (patch)
treeff13e78bf7ae322923b2b6c4f371d41f7655752a /webapp/src
parent[server/ipxe] Building ipxe with external configs. (diff)
downloadbas-e1d4375f741e5c67e0304c7fda36eda41df4b4c1.tar.gz
bas-e1d4375f741e5c67e0304c7fda36eda41df4b4c1.tar.xz
bas-e1d4375f741e5c67e0304c7fda36eda41df4b4c1.zip
[external-backends] Added API and Frontend module external-backends.
Diffstat (limited to 'webapp/src')
-rw-r--r--webapp/src/components/BackendEditComponent.vue191
-rw-r--r--webapp/src/components/BackendModule.vue57
-rw-r--r--webapp/src/components/BackendTableComponent.vue133
-rw-r--r--webapp/src/main.js15
4 files changed, 358 insertions, 38 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>
diff --git a/webapp/src/components/BackendModule.vue b/webapp/src/components/BackendModule.vue
index 8774db4..46ac728 100644
--- a/webapp/src/components/BackendModule.vue
+++ b/webapp/src/components/BackendModule.vue
@@ -8,54 +8,37 @@
</i18n>
<template>
- <v-container>
- <v-layout>
- <v-flex md8 offset-md2 sm10 offset-sm1>
- <v-stepper v-model="step" vertical>
- <v-stepper-step :complete="stepCompleted >= 1" step="1" :editable="stepCompleted >= 1" edit-icon="check">
- Select an app
- <small>Summarize if needed</small>
- </v-stepper-step>
- <v-stepper-content step="1">
- <v-card color="grey lighten-1" class="mb-5" height="200px"></v-card>
- <v-btn color="primary" @click.native="step = 2; stepCompleted = Math.max(1, stepCompleted)">Continue</v-btn>
- <v-btn flat>Cancel</v-btn>
- </v-stepper-content>
- <v-stepper-step :complete="stepCompleted >= 2" step="2" :editable="stepCompleted >= 2" edit-icon="check">Configure analytics for this app</v-stepper-step>
- <v-stepper-content step="2">
- <v-card color="grey lighten-1" class="mb-5" height="200px"></v-card>
- <v-btn color="primary" @click.native="step = 3; stepCompleted = Math.max(2, stepCompleted)">Continue</v-btn>
- <v-btn flat>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-content step="3">
- <v-card color="grey lighten-1" class="mb-5" height="200px"></v-card>
- <v-btn color="primary" @click.native="step = 4; stepCompleted = Math.max(3, stepCompleted)">Continue</v-btn>
- <v-btn flat>Cancel</v-btn>
- </v-stepper-content>
- <v-stepper-step step="4" edit-icon="check">View setup instructions</v-stepper-step>
- <v-stepper-content step="4" :editable="step > 3">
- <v-card color="grey lighten-1" class="mb-5" height="200px"></v-card>
- <v-btn color="primary" @click.native="step = 1">Continue</v-btn>
- <v-btn flat>Cancel</v-btn>
- </v-stepper-content>
- </v-stepper>
- </v-flex>
- </v-layout>
- </v-container>
+ <component :is="component" @edit-backend="setEditComponent" @cancel-edit="setTableComponent" :backend-id="backendId"></component>
</template>
<script>
+import BackendTableComponent from '@/components/BackendTableComponent'
+import BackendEditComponent from '@/components/BackendEditComponent'
export default {
name: 'BackendModule',
+ components: {
+ BackendTableComponent,
+ BackendEditComponent
+ },
data () {
return {
- step: 1,
- stepCompleted: 0
+ component: 'BackendTableComponent',
+ backendId: 0
}
},
methods: {
+ setEditComponent (value) {
+ this.component = 'BackendEditComponent'
+ this.backendId = value
+ },
+ setTableComponent () {
+ this.component = 'BackendTableComponent'
+ }
+ },
+ computed: {
+ },
+ beforeMount () {
}
}
diff --git a/webapp/src/components/BackendTableComponent.vue b/webapp/src/components/BackendTableComponent.vue
new file mode 100644
index 0000000..6601672
--- /dev/null
+++ b/webapp/src/components/BackendTableComponent.vue
@@ -0,0 +1,133 @@
+<i18n>
+{
+ "en": {
+ "add-backend-btn": "Add Backend",
+ "delete-backend": "Delete",
+ "delete-are-you-sure": "Are you sure you want to delete this backend?",
+ "backend-id": "id",
+ "backend-name": "name",
+ "backend-type": "type"
+ },
+ "de": {
+ "add-backend-btn": "Backend hinzufügen",
+ "delete-backend": "Lösche",
+ "delete-are-you-sure": "Sind sie sicher, dass sie dieses Backend Löschen wollen?",
+ "backend-id": "id",
+ "backend-name": "name",
+ "backend-type": "typ"
+ }
+}
+</i18n>
+
+<template>
+ <v-container>
+ <v-layout>
+ <v-flex md8 offset-md2 sm10 offset-sm1>
+ <v-card>
+ <v-list>
+ <template v-for="item in items">
+ <v-list-tile :key="item.name" avatar @click="">
+
+ <v-list-tile-avatar>
+ <v-list-tile-title v-text="item.id"></v-list-tile-title>
+ </v-list-tile-avatar>
+
+ <v-list-tile-content>
+ <v-list-tile-title v-text="item.name"></v-list-tile-title>
+ <v-list-tile-sub-title v-text="item.type"></v-list-tile-sub-title>
+ </v-list-tile-content>
+
+ <v-list-tile-action>
+ <v-btn flat icon color="blue" @click="editBackend(item.id)">
+ <v-icon>edit</v-icon>
+ </v-btn>
+ </v-list-tile-action>
+
+ <v-list-tile-action>
+ <v-btn flat icon color="red" @click.stop="clickOnBackend(item.id, item.name, item.type); dialog = true">
+ <v-icon>delete</v-icon>
+ </v-btn>
+ </v-list-tile-action>
+
+ </v-list-tile>
+ </template>
+ </v-list>
+
+ </v-card>
+ </v-flex>
+ </v-layout>
+ <v-layout>
+ <v-flex md8 offset-md2 sm10 offset-sm1 text-xs-right>
+ <v-btn color="success" flat @click="$emit('edit-backend', 0)">
+ <v-icon left>add_circle_outline</v-icon>{{ $t('add-backend-btn') }}
+ </v-btn>
+ </v-flex>
+ </v-layout>
+
+ <v-dialog v-model="dialog" max-width="290">
+ <v-card>
+
+ <v-card-title primary-title>
+ <div>
+ <div class="headline">{{ $t('delete-backend') }} "{{ backendName }}"</div>
+ <span class="grey--text">{{ $t('backend-id') }}: {{ backendId }}, {{ $t('backend-type') }}: {{ backendType }}</span>
+ </div>
+ </v-card-title>
+
+ <v-card-text>
+ {{ $t('delete-are-you-sure') }}
+ </v-card-text>
+ <v-card-actions>
+ <v-spacer></v-spacer>
+ <v-btn flat="flat" @click="dialog = false">{{ $t('cancel') }}</v-btn>
+ <v-btn color="error" @click="dialog = false; deleteBackend()">{{ $t('delete') }}</v-btn>
+ </v-card-actions>
+ </v-card>
+ </v-dialog>
+
+ </v-container>
+</template>
+<script>
+export default {
+ name: 'BackendTableComponent',
+ data () {
+ return {
+ items: [],
+ dialog: false,
+ backendName: '',
+ backendId: '',
+ backendType: ''
+ }
+ },
+ methods: {
+ loadData () {
+ this.$http('/api/backends/getBackendList').then(response => {
+ this.items = response.data
+ })
+ },
+ deleteBackend () {
+ this.$http.post('/api/backends/deleteBackendById', {
+ id: this.backendId
+ }).then(response => {
+ this.loadData()
+ })
+ },
+ editBackend (backendId) {
+ this.$emit('edit-backend', backendId)
+ },
+ clickOnBackend (id, name, type) {
+ this.backendId = id
+ this.backendName = name
+ this.backendType = type
+ }
+ },
+ computed: {
+ },
+ beforeMount () {
+ this.loadData()
+ }
+}
+</script>
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+</style>
diff --git a/webapp/src/main.js b/webapp/src/main.js
index 4a553aa..5d4f494 100644
--- a/webapp/src/main.js
+++ b/webapp/src/main.js
@@ -21,7 +21,20 @@ Vue.use(VueTouch)
Vue.use(VueI18n)
const i18n = new VueI18n({
- locale: store.state.locale
+ locale: store.state.locale,
+ silentTranslationWarn: true,
+ messages: {
+ 'en': {
+ 'continue': 'Continue',
+ 'cancel': 'Cancel',
+ 'delete': 'Delete'
+ },
+ 'de': {
+ 'continue': 'Weiter',
+ 'cancel': 'Abbrechen',
+ 'delete': 'Löschen'
+ }
+ }
})
axios.interceptors.response.use(null, error => {