summaryrefslogtreecommitdiffstats
path: root/webapp/src/components/BackendTableComponent.vue
diff options
context:
space:
mode:
Diffstat (limited to 'webapp/src/components/BackendTableComponent.vue')
-rw-r--r--webapp/src/components/BackendTableComponent.vue133
1 files changed, 133 insertions, 0 deletions
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>