summaryrefslogtreecommitdiffstats
path: root/webapp
diff options
context:
space:
mode:
authorUdo Walter2019-02-26 00:17:17 +0100
committerUdo Walter2019-02-26 00:17:17 +0100
commit67f6dd188b2dbbfa60e28ee020a784bcf021a509 (patch)
treea93fc09728c7178f083b2a0f0114273ba6b96e28 /webapp
parent[webapp/groups] ipranges design change; add icons to some tabs (diff)
downloadbas-67f6dd188b2dbbfa60e28ee020a784bcf021a509.tar.gz
bas-67f6dd188b2dbbfa60e28ee020a784bcf021a509.tar.xz
bas-67f6dd188b2dbbfa60e28ee020a784bcf021a509.zip
[webapp] small ui fixes
Diffstat (limited to 'webapp')
-rw-r--r--webapp/src/components/AccountModule.vue2
-rw-r--r--webapp/src/components/BackendModule.vue2
-rw-r--r--webapp/src/components/ConfiguratorModule.vue14
-rw-r--r--webapp/src/components/ConfiguratorModuleAssign.vue110
-rw-r--r--webapp/src/components/ConfiguratorModuleConfig.vue5
-rw-r--r--webapp/src/components/ConfiguratorModuleDelete.vue5
-rw-r--r--webapp/src/components/ConfiguratorModuleEntry.vue5
-rw-r--r--webapp/src/components/GroupModuleDialog.vue2
-rw-r--r--webapp/src/components/PermissionModule.vue2
-rw-r--r--webapp/src/components/RegistrationModuleDelete.vue5
-rw-r--r--webapp/src/components/RegistrationModuleEdit.vue2
-rw-r--r--webapp/src/components/UserModuleDelete.vue2
-rw-r--r--webapp/src/components/UserModuleEdit.vue2
-rw-r--r--webapp/src/store/groups.js1
14 files changed, 137 insertions, 22 deletions
diff --git a/webapp/src/components/AccountModule.vue b/webapp/src/components/AccountModule.vue
index 3b3b2e4..22ad287 100644
--- a/webapp/src/components/AccountModule.vue
+++ b/webapp/src/components/AccountModule.vue
@@ -230,7 +230,7 @@
:fullscreen="$vuetify.breakpoint.smAndDown"
>
<v-card>
- <v-card-title primary-title class="elevation-3">
+ <v-card-title class="elevation-3">
<div class="headline">{{ $t('deleteAccount') }}</div>
</v-card-title>
<v-card-text>
diff --git a/webapp/src/components/BackendModule.vue b/webapp/src/components/BackendModule.vue
index 874110c..c48c20d 100644
--- a/webapp/src/components/BackendModule.vue
+++ b/webapp/src/components/BackendModule.vue
@@ -43,7 +43,7 @@
scrollable
>
<v-card>
- <v-card-title primary-title class="elevation-3">
+ <v-card-title class="elevation-3">
<div>
<div class="headline">{{ $tc('removeBackend', selected.length, [selected.length]) }}</div>
</div>
diff --git a/webapp/src/components/ConfiguratorModule.vue b/webapp/src/components/ConfiguratorModule.vue
index 597ff30..9682dc0 100644
--- a/webapp/src/components/ConfiguratorModule.vue
+++ b/webapp/src/components/ConfiguratorModule.vue
@@ -41,6 +41,7 @@
<v-card>
<data-table v-model="selectedConfigs" :headers="configHeaders" :items="configs" min-width="600px" @dblclick="editConfig($event)">
<div slot="actions" slot-scope="row" style="text-align: right">
+ <v-btn icon @click.stop="assignConfig(row.item)"><v-icon>device_hub</v-icon></v-btn>
<v-btn icon @click.stop="editConfig(row.item)"><v-icon color="primary">edit</v-icon></v-btn>
</div>
</data-table>
@@ -74,7 +75,7 @@
<v-dialog
:value="dialog.show"
@input="setDialog({ show: $event })"
- :max-width="dialog.type === 'delete' ? '500px' : '1200px'"
+ :max-width="dialog.type === 'delete' || dialog.type === 'assign' ? '500px' : '1200px'"
scrollable
:persistent="dialog.type !== 'delete'"
:fullscreen="$vuetify.breakpoint.smAndDown"
@@ -82,6 +83,7 @@
<configurator-module-delete v-if="dialog.type === 'delete'" />
<configurator-module-config v-else-if="dialog.type === 'config'"/>
<configurator-module-entry v-else-if="dialog.type === 'entry'" />
+ <configurator-module-assign v-else-if="dialog.type === 'assign'" />
</v-dialog>
</v-container>
</template>
@@ -91,6 +93,7 @@ import DataTable from '@/components/DataTable'
import ConfiguratorModuleDelete from '@/components/ConfiguratorModuleDelete'
import ConfiguratorModuleConfig from '@/components/ConfiguratorModuleConfig'
import ConfiguratorModuleEntry from '@/components/ConfiguratorModuleEntry'
+import ConfiguratorModuleAssign from '@/components/ConfiguratorModuleAssign'
import { mapState, mapGetters, mapMutations } from 'vuex'
export default {
@@ -99,7 +102,8 @@ export default {
DataTable,
ConfiguratorModuleDelete,
ConfiguratorModuleConfig,
- ConfiguratorModuleEntry
+ ConfiguratorModuleEntry,
+ ConfiguratorModuleAssign
},
data () {
return {
@@ -116,7 +120,7 @@ export default {
{ key: 'id', text: this.$t('id'), width: '50px' },
{ key: 'name', text: this.$t('name') },
{ key: 'description', text: this.$t('description') },
- { key: 'actions', width: '60px' }
+ { key: 'actions', width: '120px' }
]
},
entryHeaders () {
@@ -145,6 +149,9 @@ export default {
createEntry () {
this.setDialog({ show: true, type: 'entry', info: {} })
},
+ assignConfig (item) {
+ this.setDialog({ show: true, type: 'assign', info: item })
+ },
editConfig (item) {
this.setDialog({ show: true, type: 'config', info: item })
},
@@ -154,6 +161,7 @@ export default {
},
created () {
this.$store.dispatch('configurator/loadData')
+ this.$store.dispatch('groups/loadLists')
}
}
</script>
diff --git a/webapp/src/components/ConfiguratorModuleAssign.vue b/webapp/src/components/ConfiguratorModuleAssign.vue
new file mode 100644
index 0000000..6f6e61f
--- /dev/null
+++ b/webapp/src/components/ConfiguratorModuleAssign.vue
@@ -0,0 +1,110 @@
+<i18n>
+{
+ "en": {
+ "name": "Name",
+ "description": "Description",
+ "ip": "IP Address",
+ "title": "Assign groups and clients",
+ "assign": "Assign"
+ },
+ "de": {
+ "name": "Name",
+ "description": "Beschreibung",
+ "ip": "IP Adresse",
+ "title": "Gruppen und Clienten zuweisen",
+ "assign": "Zuweisen"
+ }
+}
+</i18n>
+
+<template>
+ <v-card style="overflow: hidden">
+ <v-card-title class="dialog-title elevation-3">
+ <div class="headline">{{ $t('title') }}</div>
+ <v-subheader>asdf</v-subheader>
+ </v-card-title>
+ <v-card-text style="height: 100%;">
+ <v-text-field prepend-icon="label" :label="$t('name')" color="primary" v-model="name"></v-text-field>
+ <div class="body-1 script-heading"><v-icon>code</v-icon><span>{{ $t('script') }}</span></div>
+ <codemirror class="script-editor" ref="editor" v-model="script"></codemirror>
+ </v-card-text>
+ <v-divider></v-divider>
+ <v-card-actions>
+ <v-spacer></v-spacer>
+ <v-btn flat="flat" @click="setDialog({ show: false })">{{ $t('cancel') }}</v-btn>
+ <v-btn :color="dialog.info.id ? 'primary' : 'success'" @click="saveEntry">{{ dialog.info.id ? $t('save') : $t('create') }}</v-btn>
+ </v-card-actions>
+ </v-card>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+
+export default {
+ name: 'ConfiguratorModuleEntry',
+ data () {
+ return {
+ selectedGroups: [],
+ selectedClients: []
+ }
+ },
+ computed: {
+ ...mapState('configurator', ['dialog']),
+ ...mapState('groups', ['groupList', 'clientList'])
+ },
+ watch: {
+ dialog: {
+ immediate: true,
+ deep: true,
+ handler (value) {
+ if (value.type === 'entry' && value.show) {
+ this.name = value.info.name || ''
+ this.script = value.info.script || ''
+ this.interval.id = setInterval(this.refreshEditor, 50)
+ this.interval.counter = 0
+ }
+ }
+ }
+ },
+ methods: {
+ setDialog (data) {
+ this.$store.commit('configurator/setDialog', data)
+ },
+ async saveEntry () {
+ let url = '/api/configurator/entries'
+ if (this.dialog.info.id !== undefined) url += '/' + this.dialog.info.id
+ await this.$http.post(url, {
+ name: this.name,
+ script: this.script
+ })
+ this.$store.dispatch('configurator/loadData')
+ this.setDialog({ show: false })
+ },
+ refreshEditor () {
+ this.interval.counter++
+ if (this.$refs.editor) this.$refs.editor.codemirror.refresh()
+ if (this.interval.counter >= 15) clearInterval(this.interval.id)
+ }
+ }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+.dialog-title {
+ z-index: 1;
+}
+
+.script-heading {
+ display: flex;
+ align-items: center;
+}
+
+.script-heading > span {
+ margin-left: 9px;
+}
+
+.script-editor {
+ margin-top: 8px;
+}
+</style>
diff --git a/webapp/src/components/ConfiguratorModuleConfig.vue b/webapp/src/components/ConfiguratorModuleConfig.vue
index 0cd31e4..45dc352 100644
--- a/webapp/src/components/ConfiguratorModuleConfig.vue
+++ b/webapp/src/components/ConfiguratorModuleConfig.vue
@@ -35,7 +35,7 @@
<template>
<v-card style="overflow: hidden">
- <v-card-title primary-title class="dialog-title elevation-3">
+ <v-card-title class="dialog-title elevation-3">
<div class="headline">{{ dialog.info.id ? $t('titleExisting') : $t('titleNew') }}</div>
</v-card-title>
<v-card-text style="height: 100%">
@@ -97,7 +97,6 @@
</template>
<script>
-import axios from 'axios'
import draggable from 'vuedraggable'
import ComponentSearchTable from '@/components/ComponentSearchTable'
import { mapState } from 'vuex'
@@ -174,7 +173,7 @@ export default {
async saveConfig () {
let url = '/api/configurator/configs'
if (this.dialog.info.id !== undefined) url += '/' + this.dialog.info.id
- await axios.post(url, {
+ await this.$http.post(url, {
data: {
name: this.name,
description: this.description,
diff --git a/webapp/src/components/ConfiguratorModuleDelete.vue b/webapp/src/components/ConfiguratorModuleDelete.vue
index 4ef59ec..2d5a81d 100644
--- a/webapp/src/components/ConfiguratorModuleDelete.vue
+++ b/webapp/src/components/ConfiguratorModuleDelete.vue
@@ -11,7 +11,7 @@
<template>
<v-card>
- <v-card-title primary-title class="dialog-title elevation-3">
+ <v-card-title class="dialog-title elevation-3">
<div class="headline">{{ $tc('title', dialog.info.selected.length, [dialog.info.selected.length]) }}</div>
</v-card-title>
<v-card-text style="height: 100%">
@@ -27,7 +27,6 @@
</template>
<script>
-import axios from 'axios'
import { mapState } from 'vuex'
export default {
@@ -44,7 +43,7 @@ export default {
this.$store.commit('configurator/setDialog', data)
},
async deleteItems () {
- await axios.post('/api/configurator/' + this.dialog.info.itemType + '/?delete', {
+ await this.$http.post('/api/configurator/' + this.dialog.info.itemType + '/?delete', {
ids: this.dialog.info.selected.map(x => x.id)
})
this.$store.dispatch('configurator/loadData')
diff --git a/webapp/src/components/ConfiguratorModuleEntry.vue b/webapp/src/components/ConfiguratorModuleEntry.vue
index bd6f4e9..3eeebc4 100644
--- a/webapp/src/components/ConfiguratorModuleEntry.vue
+++ b/webapp/src/components/ConfiguratorModuleEntry.vue
@@ -17,7 +17,7 @@
<template>
<v-card style="overflow: hidden">
- <v-card-title primary-title class="dialog-title elevation-3">
+ <v-card-title class="dialog-title elevation-3">
<div class="headline">{{ dialog.info.id ? $t('titleExisting') : $t('titleNew') }}</div>
</v-card-title>
<v-card-text style="height: 100%;">
@@ -35,7 +35,6 @@
</template>
<script>
-import axios from 'axios'
import { mapState } from 'vuex'
export default {
@@ -74,7 +73,7 @@ export default {
async saveEntry () {
let url = '/api/configurator/entries'
if (this.dialog.info.id !== undefined) url += '/' + this.dialog.info.id
- await axios.post(url, {
+ await this.$http.post(url, {
name: this.name,
script: this.script
})
diff --git a/webapp/src/components/GroupModuleDialog.vue b/webapp/src/components/GroupModuleDialog.vue
index 1cf89e3..4328830 100644
--- a/webapp/src/components/GroupModuleDialog.vue
+++ b/webapp/src/components/GroupModuleDialog.vue
@@ -99,7 +99,7 @@
:fullscreen="$vuetify.breakpoint.smAndDown"
>
<v-card>
- <v-card-title primary-title class="dialog-title elevation-3">
+ <v-card-title class="dialog-title elevation-3">
<div class="headline">{{ title }}</div>
<v-spacer></v-spacer>
<v-btn v-if="action === 'add'" class="new-button" flat color="success" @click="newItem">
diff --git a/webapp/src/components/PermissionModule.vue b/webapp/src/components/PermissionModule.vue
index b80dbaa..9d6d77a 100644
--- a/webapp/src/components/PermissionModule.vue
+++ b/webapp/src/components/PermissionModule.vue
@@ -54,7 +54,7 @@
scrollable
>
<v-card>
- <v-card-title primary-title class="elevation-3">
+ <v-card-title class="elevation-3">
<div>
<div class="headline">{{ $tc('delete-role', selectedRoles.length, [selectedRoles.length]) }}</div>
</div>
diff --git a/webapp/src/components/RegistrationModuleDelete.vue b/webapp/src/components/RegistrationModuleDelete.vue
index aaf8d57..1b0d42c 100644
--- a/webapp/src/components/RegistrationModuleDelete.vue
+++ b/webapp/src/components/RegistrationModuleDelete.vue
@@ -11,7 +11,7 @@
<template>
<v-card>
- <v-card-title primary-title class="dialog-title elevation-3">
+ <v-card-title class="dialog-title elevation-3">
<div class="headline">{{ $t('title') }}</div>
</v-card-title>
<v-card-text>
@@ -27,7 +27,6 @@
</template>
<script>
-import axios from 'axios'
import { mapState } from 'vuex'
export default {
@@ -44,7 +43,7 @@ export default {
this.$store.commit('registration/setDialog', data)
},
async deleteItems () {
- await axios.delete('/api/registration/hooks/' + this.dialog.info.id)
+ await this.$http.delete('/api/registration/hooks/' + this.dialog.info.id)
this.$store.dispatch('registration/loadHooks')
this.setDialog({ show: false })
}
diff --git a/webapp/src/components/RegistrationModuleEdit.vue b/webapp/src/components/RegistrationModuleEdit.vue
index 829a605..9709f86 100644
--- a/webapp/src/components/RegistrationModuleEdit.vue
+++ b/webapp/src/components/RegistrationModuleEdit.vue
@@ -23,7 +23,7 @@
<template>
<v-card style="overflow: hidden">
- <v-card-title primary-title class="dialog-title elevation-3">
+ <v-card-title class="dialog-title elevation-3">
<div class="headline">{{ dialog.info.id ? $t('titleExisting') : $t('titleNew') }}</div>
</v-card-title>
<v-card-text style="height: 100%;">
diff --git a/webapp/src/components/UserModuleDelete.vue b/webapp/src/components/UserModuleDelete.vue
index d35b755..1487be7 100644
--- a/webapp/src/components/UserModuleDelete.vue
+++ b/webapp/src/components/UserModuleDelete.vue
@@ -13,7 +13,7 @@
<template>
<v-card :color="doIDeleteMyself ? 'error' : ''">
- <v-card-title primary-title class="dialog-title elevation-3" >
+ <v-card-title class="dialog-title elevation-3" >
<div class="headline">{{ $tc('title', dialog.info.selected.length, [dialog.info.selected.length]) }}</div>
</v-card-title>
<v-card-text style="height: 100%">
diff --git a/webapp/src/components/UserModuleEdit.vue b/webapp/src/components/UserModuleEdit.vue
index 77be879..924a109 100644
--- a/webapp/src/components/UserModuleEdit.vue
+++ b/webapp/src/components/UserModuleEdit.vue
@@ -15,7 +15,7 @@
<template>
<v-card>
- <v-card-title primary-title class="dialog-title elevation-3">
+ <v-card-title class="dialog-title elevation-3">
<div class="headline">{{ dialog.info.id ? $t('titleExisting') : $t('titleNew') }}</div>
</v-card-title>
<v-card-text style="height: 100%;">
diff --git a/webapp/src/store/groups.js b/webapp/src/store/groups.js
index df00bcd..0dea3e5 100644
--- a/webapp/src/store/groups.js
+++ b/webapp/src/store/groups.js
@@ -97,6 +97,7 @@ export default {
}
},
reload (context) {
+ context.dispatch('loadConfigs')
context.dispatch('loadLists')
context.state.tabChain.forEach((item, index) => {
if (item.id === 'create') return