summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--server/api/backends.js22
-rw-r--r--server/lib/external-backends/backends/another-backend.js2
-rw-r--r--server/lib/external-backends/backends/dummy-backend.js2
-rw-r--r--server/lib/external-backends/backends/template-backend.js2
-rw-r--r--server/router.js3
-rw-r--r--webapp/src/components/BackendModule.vue62
-rw-r--r--webapp/src/components/BackendModuleEdit.vue223
-rw-r--r--webapp/src/components/BackendModuleTable.vue198
-rw-r--r--webapp/src/components/DashboardPage.vue2
9 files changed, 327 insertions, 189 deletions
diff --git a/server/api/backends.js b/server/api/backends.js
index fd2657b..b744bd2 100644
--- a/server/api/backends.js
+++ b/server/api/backends.js
@@ -11,7 +11,6 @@ module.exports = {
if (instance === null) {
res.status(500).send({ auth: false, status: 'TYPE_INVALID', error_message: 'The provided backend type is invalid.' })
}
-
res.status(200).send(instance.getCredentials())
},
@@ -48,6 +47,21 @@ module.exports = {
})
},
+ checkConnection: function (req, res) {
+ var x = Math.floor(Math.random() * Math.floor(2))
+ var y = ''
+ if (x === 0) {
+ y = 'success'
+ } else {
+ y = 'error'
+ }
+ var w = 'Oh noes! An error occurred.'
+ var z = Math.floor(Math.random() * Math.floor(5000))
+
+
+ setTimeout(function() { res.status(200).send({ status: y, msg: w }) }, 0)
+ },
+
// POST REQUESTS
saveBackend: function (req, res) {
// Save credentials in the db.
@@ -66,10 +80,10 @@ module.exports = {
res.status(200).send('success')
},
- deleteBackendById: function (req, res) {
- const backendId = req.body.id
+ deleteBackends: function (req, res) {
+ const backendIds = req.body.id
- db.backend.destroy({ where: { id: backendId } }).then(function () {
+ db.backend.destroy({ where: { id: backendIds } }).then(function () {
res.status(200).send('success')
})
}
diff --git a/server/lib/external-backends/backends/another-backend.js b/server/lib/external-backends/backends/another-backend.js
index 5efc185..eb329ae 100644
--- a/server/lib/external-backends/backends/another-backend.js
+++ b/server/lib/external-backends/backends/another-backend.js
@@ -2,7 +2,7 @@ var ExternalBackends = require('../external-backends.js')
class AnotherBackend extends ExternalBackends {
getCredentials () {
- return [{ type: 'text', name: 'text 1' }, { type: 'text', name: 'text 2' }, { type: 'password', name: 'password 1', show: false }, { type: 'password', name: 'password 2', show: true }, { type: 'password', name: 'password 3', show: false }]
+ return [{ type: 'text', id: 1, name: 'text 1' }, { type: 'text', id: 2, name: 'text 2' }, { type: 'password', id: 3, name: 'password 1', show: false }, { type: 'password', id: 4, name: 'password 2', show: true }, { type: 'password', id: 5, name: 'password 3', show: false }]
}
}
diff --git a/server/lib/external-backends/backends/dummy-backend.js b/server/lib/external-backends/backends/dummy-backend.js
index a261af1..6052953 100644
--- a/server/lib/external-backends/backends/dummy-backend.js
+++ b/server/lib/external-backends/backends/dummy-backend.js
@@ -2,7 +2,7 @@ var ExternalBackends = require('../external-backends.js')
class DummyBackend extends ExternalBackends {
getCredentials () {
- return [{ type: 'switch', name: 'switch 1', value: false }, { type: 'switch', name: 'switch 2', value: false }, { type: 'switch', name: 'switch 3', value: true }, { type: 'select', name: 'selection 1', items: ['wasd', 'asdf', 'qwertz'] }, { type: 'select', name: 'selection 2', items: ['1', '2', '3'] }]
+ return [{ type: 'switch', id: 1, name: 'switch 1', value: false }, { type: 'switch', id: 2, name: 'switch 2', value: false }, { type: 'switch', id: 3, name: 'switch 3', value: true }, { type: 'select', id: 4, name: 'selection 1', items: ['wasd', 'asdf', 'qwertz'] }, { type: 'select', id: 5, name: 'selection 2', items: ['1', '2', '3'] }]
}
}
diff --git a/server/lib/external-backends/backends/template-backend.js b/server/lib/external-backends/backends/template-backend.js
index 9ce799d..19f1d76 100644
--- a/server/lib/external-backends/backends/template-backend.js
+++ b/server/lib/external-backends/backends/template-backend.js
@@ -2,7 +2,7 @@ var ExternalBackends = require('../external-backends.js')
class TemplateBackend extends ExternalBackends {
getCredentials () {
- return [{ type: 'text', name: 'text test' }, { type: 'password', name: 'password test', show: true }, { type: 'password', name: 'password test nr2', show: false }, { type: 'switch', name: 'bool test', value: false }, { type: 'select', name: 'selection test', items: ['wasd', 'asdf', 'qwertz'] }]
+ return [{ type: 'text', id: 1, name: 'text test', icon: 'bug_report' }, { type: 'password', id: 2, name: 'password test', show: true }, { type: 'password', id: 3, name: 'password test nr2', show: false }, { type: 'switch', id: 4, name: 'bool test', value: false }, { type: 'select', id: 5, name: 'selection test', items: ['wasd', 'asdf', 'qwertz'] }]
}
}
diff --git a/server/router.js b/server/router.js
index 7bffb92..bde35a8 100644
--- a/server/router.js
+++ b/server/router.js
@@ -43,8 +43,9 @@ router.get('/backends/getCredentialsByType', auth.verifyToken, backends.getCrede
router.get('/backends/getBackendInfoById', auth.verifyToken, backends.getBackendInfoById)
router.get('/backends/getBackendList', auth.verifyToken, backends.getBackendList)
router.get('/backends/getBackendTypes', backends.getBackendTypes)
+router.get('/backends/checkConnection', auth.verifyToken, backends.checkConnection)
router.post('/backends/saveBackend', auth.verifyToken, backends.saveBackend)
-router.post('/backends/deleteBackendById', auth.verifyToken, backends.deleteBackendById)
+router.post('/backends/deleteBackends', auth.verifyToken, backends.deleteBackends)
// Load ipxe scipts API
var ipxeloader = require(path.join(__dirname, 'api', 'ipxe-loader'))
diff --git a/webapp/src/components/BackendModule.vue b/webapp/src/components/BackendModule.vue
index 85a7a6f..32fef57 100644
--- a/webapp/src/components/BackendModule.vue
+++ b/webapp/src/components/BackendModule.vue
@@ -1,14 +1,52 @@
<i18n>
{
"en": {
+ "delete-are-you-sure": "Are you sure you want to delete this backend? | Are you sure you want to delete those backends?",
+ "delete-backend": "Delete {0} backend | Delete {0} backends"
},
"de": {
+ "delete-are-you-sure": "Sind sie sicher, dass sie dieses Backend Löschen wollen? | Sind sie sicher, dass sie diese Backends Löschen wollen?",
+ "delete-backend": "Lösche {0} Backend | Delete {0} Backends"
}
}
</i18n>
<template>
+ <!--
<component :is="component" @edit-backend="setEditComponent" @cancel-edit="setTableComponent" :backend-id="backendId"></component>
+ -->
+ <v-container>
+ <v-layout>
+ <v-flex xl10 offset-xl1 lg12>
+ <backend-module-table ref="backendTable" @edit-backend="editBackend" @delete-dialog="openDeleteDialog"/>
+ </v-flex>
+ </v-layout>
+
+ <v-dialog v-model="dialog" max-width="50%">
+ <backend-module-edit v-if="editDialog" :backendId="backendId" @cancel-edit="dialog = false; backendId = 0" @reload-table="$refs.backendTable.loadData()"/>
+
+ <v-card v-if="deleteDialog">
+ <v-card-title primary-title>
+ <div>
+ <div class="headline">{{ $tc('delete-backend', backendsDelete.length, [backendsDelete.length]) }}</div>
+ <template v-for="item in backendsDelete">
+ <span class="grey--text" :key="item.id">[{{ item.id }}] {{ item.name }} ({{ item.type }})</span><br :key="item.id">
+ </template>
+ </div>
+ </v-card-title>
+ <v-card-text>
+ {{ $tc('delete-are-you-sure', backendsDelete.length) }}
+ </v-card-text>
+ <v-card-actions>
+ <v-spacer></v-spacer>
+ <v-btn flat="flat" @click="dialog = false; delDialog = false">{{ $t('cancel') }}</v-btn>
+ <v-btn color="error" @click="dialog = false; delDialog = false; $refs.backendTable.deleteBackends()">{{ $t('delete') }}</v-btn>
+ </v-card-actions>
+ </v-card>
+
+ </v-dialog>
+
+ </v-container>
</template>
<script>
@@ -24,19 +62,30 @@ export default {
data () {
return {
component: 'BackendModuleTable',
- backendId: 0
+ backendId: 0,
+ dialog: false,
+ delDialog: false,
+ backendsDelete: []
}
},
methods: {
- setEditComponent (value) {
- this.component = 'BackendModuleEdit'
- this.backendId = value
+ editBackend (id) {
+ this.backendId = id
+ this.dialog = true
},
- setTableComponent () {
- this.component = 'BackendModuleTable'
+ openDeleteDialog (selected) {
+ this.dialog = true
+ this.delDialog = true
+ this.backendsDelete = selected
}
},
computed: {
+ deleteDialog: function () {
+ return this.dialog && this.delDialog
+ },
+ editDialog: function () {
+ return this.dialog && !this.delDialog
+ }
},
beforeMount () {
}
@@ -46,5 +95,4 @@ export default {
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
-
</style>
diff --git a/webapp/src/components/BackendModuleEdit.vue b/webapp/src/components/BackendModuleEdit.vue
index 49e48bb..663c6b0 100644
--- a/webapp/src/components/BackendModuleEdit.vue
+++ b/webapp/src/components/BackendModuleEdit.vue
@@ -2,105 +2,120 @@
{
"en": {
"select_backend_type": "Select a backend type.",
- "input_credentials": "Fill in the backend credentials.",
+ "input_credentials": "Fill in the backend details.",
"backend_name": "Backend name",
"backend_empty_error": "This field can not be empty.",
- "backendtype_empty_error": "Please choose a backend type."
+ "backend_type": "Backend type",
+ "backendtype_empty_error": "Please choose a backend type.",
+ "stepper_optional": "optional"
},
"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."
+ "backend_type": "Backend Typ",
+ "backendtype_empty_error": "Bitte wähle einen Backendtyp aus.",
+ "stepper_optional": "Optional"
}
}
</i18n>
<template>
- <v-container>
+ <v-form class="edit-backend-form" ref="form" v-model="valid" @submit.prevent="submit" lazy-validation>
+ <v-stepper v-model="step" horizontal>
+ <v-stepper-header>
+ <v-stepper-step
+ :complete="stepCompleted >= 1"
+ step="1"
+ :editable="stepCompleted >= 1"
+ edit-icon="check"
+ :rules="[() => true]"
+ >{{ $t('select_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>
+ </v-stepper-header>
+ <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"
+ ></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"
+ ></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"
+ ></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>
+ </v-stepper-content>
+ <v-stepper-content step="3" class="stepper-content">
+ <v-btn color="primary">{{ $t('work_in_progress') }}</v-btn>
+ </v-stepper-content>
+ </v-stepper-items>
+
+<v-divider></v-divider>
<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 xl10 offset-xl1 lg12 text-xs-right>
+ <v-btn flat @click.native="$emit('cancel-edit')">{{ $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-layout>
- </v-container>
+ </v-stepper>
+ </v-form>
</template>
<script>
@@ -113,10 +128,9 @@ export default {
valid: true,
step: 1,
stepCompleted: 0,
- backendType: '',
backendChoices: [],
elements: [],
- show: false,
+ backendType: '',
backendName: '',
loadData: false
}
@@ -124,14 +138,21 @@ export default {
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: this.elements
+ backendCredentials: credentials
}).then(response => {
// TODO: Add backend saved successfull msg.
console.log('TODO: Implement snackbar and print backend added successfully msg.')
+ this.$emit('reload-table')
this.$emit('cancel-edit')
}).catch(error => {
console.log(error)
@@ -158,17 +179,33 @@ export default {
this.backendName = response.data.backendName
this.loadData = true
this.backendType = response.data.backendType
- this.elements = JSON.parse(response.data.backendCredentials)
+ const credentialValues = JSON.parse(response.data.backendCredentials)
+ this.$http('/api/backends/getCredentialsByType?type=' + this.backendType).then(res => {
+ 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)))
+ this.elements = mergedCredentials
+ })
})
},
completeStepOne () {
// Error handling
- if (this.backendName !== '' && this.backendType !== '') {
+ if (this.backendType !== '') {
this.step = 2
this.stepCompleted = Math.max(1, this.stepCompleted)
} else {
this.$refs.form.validate()
}
+ },
+ completeStepTwo () {
+ // Error handling
+ if (this.backendName !== '') {
+ this.step = 3
+ this.stepCompleted = Math.max(2, this.stepCompleted)
+ } else {
+ this.$refs.form.validate()
+ }
}
},
computed: {
@@ -177,15 +214,19 @@ export default {
this.loadBackendTypes()
if (this.backendId !== 0) {
this.loadBackend(this.backendId)
+ this.step = 2
+ this.stepCompleted = 3
}
+ },
+ watch: {
}
}
-
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
-.backend-select {
- margin: 6px;
+.stepper-content {
+ height: 600px;
+ overflow: auto;
}
</style>
diff --git a/webapp/src/components/BackendModuleTable.vue b/webapp/src/components/BackendModuleTable.vue
index 4dcd028..af652fb 100644
--- a/webapp/src/components/BackendModuleTable.vue
+++ b/webapp/src/components/BackendModuleTable.vue
@@ -2,90 +2,84 @@
{
"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"
+ "backend-type": "type",
+ "delete-backend": "Delete {0} backend | Delete {0} backends",
+ "check-connection": "Check {0} connection | Check {0} connections"
},
"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"
+ "backend-type": "typ",
+ "delete-backend": "Lösche {0} Backend | Lösche {0} Backends",
+ "check-connection": "Überprüfe {0} Verbindung | Überprüfe {0} Verbindungen"
}
}
</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.prevent="">
+ <div>
+ <v-card>
+ <v-data-table
+ class="group-table"
+ :headers="headers"
+ :items="items"
+ item-key="id"
+ hide-actions
+ select-all
+ v-model="selected"
+ >
+ <template slot="items" slot-scope="props">
+ <tr @click="props.selected = !props.selected">
+ <td>
+ <v-checkbox
+ color="primary"
+ v-model="props.selected"
+ hide-details
+ @click.native.stop
+ ></v-checkbox>
+ </td>
+ <td>{{ props.item.id }}</td>
+ <td>{{ props.item.name }}</td>
+ <td>{{ props.item.type }}</td>
+ <td>
+ <v-layout>
+ <v-btn
+ flat
+ icon
+ :loading="props.item.loading"
+ :disabled="props.item.loading"
+ :color="props.item.connection"
+ @click.stop="checkConnection(props.item)"
+ >
+ <v-icon>cached</v-icon>
+ </v-btn>
+ <v-btn flat icon color="primary" @click.stop="$emit('edit-backend', props.item.id)">
+ <v-icon>edit</v-icon>
+ </v-btn>
+ </v-layout>
+ </td>
+ </tr>
+ </template>
+ </v-data-table>
+ </v-card>
- <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>
+ <v-layout>
+ <v-flex xl10 offset-xl1 lg12 text-xs-right>
+ <v-btn color="primary" flat @click="checkConnections(selected)">
+ <v-icon left>remove_circle_outline</v-icon>{{ $tc('check-connection', this.selected.length, [this.selected.length]) }}
+ </v-btn>
+ <v-btn color="error" flat @click="$emit('delete-dialog', selected)"><!-- @click="deleteBackends(selected)"-->
+ <v-icon left>remove_circle_outline</v-icon>{{ $tc('delete-backend', this.selected.length, [this.selected.length]) }}
+ </v-btn>
+ <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>
+ </div>
</template>
<script>
export default {
@@ -96,31 +90,71 @@ export default {
dialog: false,
backendName: '',
backendId: '',
- backendType: ''
+ backendType: '',
+ test: false,
+ headers: [
+ { text: 'ID', value: 'id' },
+ { text: 'Name', value: 'name', width: '10000px' },
+ { text: 'Type', value: 'type' },
+ { sortable: false }
+ ],
+ selected: []
}
},
methods: {
loadData () {
this.$http('/api/backends/getBackendList').then(response => {
- this.items = response.data
+ // Needed for initializing the diffrent dynamic loading buttons.
+ var tmpItems = response.data
+ tmpItems.forEach(function (item) {
+ // Variable for the loading animation.
+ item.loading = false
+ // Variable for the test connection color
+ item.connection = 'primary'
+ })
+ this.items = tmpItems
})
},
- deleteBackend () {
- this.$http.post('/api/backends/deleteBackendById', {
- id: this.backendId
+ deleteBackends () {
+ // Filter selected array to get a list of ids.
+ const filteredArray = this.selected.map(x => x.id)
+ this.$http.post('/api/backends/deleteBackends', {
+ id: filteredArray
}).then(response => {
this.loadData()
+ this.selected = []
})
},
- editBackend (backendId) {
- this.$emit('edit-backend', backendId)
+ checkConnection (item) {
+ // Set to start the loading animation.
+ item.loading = true
+ // Test the credential connection.
+ this.$http('/api/backends/checkConnection?id=' + this.backendId, {
+ headers: {
+ 'Cache-Control': 'no-cache'
+ }
+ }).then(response => {
+ if (response.data.status === 'success') {
+ // Set the button color to green if success.
+ item.connection = 'success'
+ } else if (response.data.status === 'error') {
+ // Set the button color to red if error.
+ item.connection = 'error'
+ this.$store.commit('newSnackbar', response.data.msg)
+ }
+ // Set item.loading = false to end the loading animation.
+ item.loading = false
+ })
},
- clickOnBackend (id, name, type) {
- this.backendId = id
- this.backendName = name
- this.backendType = type
+ checkConnections (items) {
+ const tmp = this
+ items.forEach(function (item) {
+ tmp.checkConnection(item)
+ })
}
},
+ watch: {
+ },
computed: {
},
beforeMount () {
diff --git a/webapp/src/components/DashboardPage.vue b/webapp/src/components/DashboardPage.vue
index 222ea5c..114df77 100644
--- a/webapp/src/components/DashboardPage.vue
+++ b/webapp/src/components/DashboardPage.vue
@@ -162,7 +162,7 @@ export default {
}
return style
},
- devMode () { return localStorage.getItem('dev') == 'true' }
+ devMode () { return localStorage.getItem('dev') === 'true' }
},
watch: {
showSnackbar (value) {