summaryrefslogtreecommitdiffstats
path: root/webapp/src
diff options
context:
space:
mode:
authorUdo Walter2019-02-24 03:41:35 +0100
committerUdo Walter2019-02-24 03:41:35 +0100
commit40dc6c93cbb64ce85a5f56085772bcd44e2eebda (patch)
tree24f093e62d683cb6c4067b6fc649c68a0fb0442a /webapp/src
parent[account] Add editable user info, change statuscodes, delete account (diff)
downloadbas-40dc6c93cbb64ce85a5f56085772bcd44e2eebda.tar.gz
bas-40dc6c93cbb64ce85a5f56085772bcd44e2eebda.tar.xz
bas-40dc6c93cbb64ce85a5f56085772bcd44e2eebda.zip
[webapp/configurator] switch from old table to the new data table
Diffstat (limited to 'webapp/src')
-rw-r--r--webapp/src/components/ConfiguratorModule.vue65
-rw-r--r--webapp/src/components/ConfiguratorModuleConfig.vue44
-rw-r--r--webapp/src/components/GroupModuleClientView.vue2
-rw-r--r--webapp/src/components/GroupModuleGroupView.vue2
-rw-r--r--webapp/src/main.js8
5 files changed, 58 insertions, 63 deletions
diff --git a/webapp/src/components/ConfiguratorModule.vue b/webapp/src/components/ConfiguratorModule.vue
index 5121fcf..62a9534 100644
--- a/webapp/src/components/ConfiguratorModule.vue
+++ b/webapp/src/components/ConfiguratorModule.vue
@@ -39,25 +39,11 @@
<v-tab-item>
<v-subheader>{{ $t('configs') }}</v-subheader>
<v-card>
- <component-search-table v-model="selectedConfigs" :headers="configHeaders" :items="configs" select-all>
- <template slot="items" slot-scope="row">
- <tr :style="row.color" @click="row.data.selected = !row.data.selected" @dblclick="editConfig(row.data.item)">
- <td style="width: 10px">
- <v-checkbox
- color="primary"
- v-model="row.data.selected"
- hide-details
- ></v-checkbox>
- </td>
- <td class="narrow-td">{{ row.data.item.id }}</td>
- <td>{{ row.data.item.name }}</td>
- <td>{{ row.data.item.description }}</td>
- <td class="narrow-td">
- <v-btn icon @click.stop="editConfig(row.data.item)"><v-icon color="primary">edit</v-icon></v-btn>
- </td>
- </tr>
- </template>
- </component-search-table>
+ <data-table v-model="selectedConfigs" :headers="configHeaders" :items="configs" min-width="600px">
+ <div slot="actions" slot-scope="row" style="text-align: right">
+ <v-btn icon @click.stop="editConfig(row.item)"><v-icon color="primary">edit</v-icon></v-btn>
+ </div>
+ </data-table>
</v-card>
<div class="text-xs-right">
<v-btn flat color="error" @click="deleteSelectedConfigs" :disabled="selectedConfigs.length === 0">
@@ -69,24 +55,11 @@
<v-tab-item>
<v-subheader>{{ $t('entries') }}</v-subheader>
<v-card>
- <component-search-table v-model="selectedEntries" :headers="entryHeaders" :items="entries" select-all>
- <template slot="items" slot-scope="row">
- <tr :style="row.color" @click="row.data.selected = !row.data.selected" @dblclick="editEntry(row.data.item)">
- <td style="width: 10px">
- <v-checkbox
- color="primary"
- v-model="row.data.selected"
- hide-details
- ></v-checkbox>
- </td>
- <td class="narrow-td">{{ row.data.item.id }}</td>
- <td>{{ row.data.item.name }}</td>
- <td class="narrow-td">
- <v-btn icon @click.stop="editEntry(row.data.item)"><v-icon color="primary">edit</v-icon></v-btn>
- </td>
- </tr>
- </template>
- </component-search-table>
+ <data-table v-model="selectedEntries" :headers="entryHeaders" :items="entries" min-width="600px">
+ <div slot="actions" slot-scope="row" style="text-align: right">
+ <v-btn icon @click.stop="editEntry(row.item)"><v-icon color="primary">edit</v-icon></v-btn>
+ </div>
+ </data-table>
</v-card>
<div class="text-xs-right">
<v-btn flat color="error" @click="deleteSelectedEntries" :disabled="selectedEntries.length === 0">
@@ -114,7 +87,7 @@
</template>
<script>
-import ComponentSearchTable from '@/components/ComponentSearchTable'
+import DataTable from '@/components/DataTable'
import ConfiguratorModuleDelete from '@/components/ConfiguratorModuleDelete'
import ConfiguratorModuleConfig from '@/components/ConfiguratorModuleConfig'
import ConfiguratorModuleEntry from '@/components/ConfiguratorModuleEntry'
@@ -123,7 +96,7 @@ import { mapState, mapGetters, mapMutations } from 'vuex'
export default {
name: 'ConfiguratorModule',
components: {
- ComponentSearchTable,
+ DataTable,
ConfiguratorModuleDelete,
ConfiguratorModuleConfig,
ConfiguratorModuleEntry
@@ -140,17 +113,17 @@ export default {
...mapState('configurator', ['configs', 'entries', 'dialog']),
configHeaders () {
return [
- { text: this.$t('id'), value: 'id' },
- { text: this.$t('name'), value: 'name' },
- { text: this.$t('description'), value: 'description' },
- { sortable: false }
+ { key: 'id', text: this.$t('id'), width: '50px' },
+ { key: 'name', text: this.$t('name') },
+ { key: 'description', text: this.$t('description') },
+ { key: 'actions', width: '60px' }
]
},
entryHeaders () {
return [
- { text: this.$t('id'), value: 'id' },
- { text: this.$t('name'), value: 'name' },
- { sortable: false }
+ { key: 'id', text: this.$t('id'), width: '50px' },
+ { key: 'name', text: this.$t('name') },
+ { key: 'actions', width: '60px' }
]
}
},
diff --git a/webapp/src/components/ConfiguratorModuleConfig.vue b/webapp/src/components/ConfiguratorModuleConfig.vue
index a00f345..0cd31e4 100644
--- a/webapp/src/components/ConfiguratorModuleConfig.vue
+++ b/webapp/src/components/ConfiguratorModuleConfig.vue
@@ -73,10 +73,10 @@
<span>{{ $t('defaultEntry') }}</span></v-tooltip>
</v-list-tile-action>
<v-list-tile-content class="item-content">
- <v-select return-object style="max-width: 280px" item-text="name" menu-props="offsetY" :label="$t('entry')" color="primary" v-model="item.entry"
- :items="item.entry.id ? [item.entry, ...availableEntries] : availableEntries"></v-select>
- <v-text-field v-if="item.entry.id" class="custom-name-input" :label="$t('customName')" color="primary" v-model="item.customName"></v-text-field>
- <v-text-field v-if="item.entry.id" style="max-width: 60px" prepend-inner-icon="keyboard" color="primary" v-model="item.keyBind" maxlength="1"></v-text-field>
+ <v-select return-object class="entry-input" item-text="name" menu-props="offsetY" :label="$t('entry')" color="primary" v-model="item.entry"
+ :items="item.entry.id ? [item.entry, ...availableEntries] : availableEntries" hide-details single-line></v-select>
+ <v-text-field v-if="item.entry.id" class="custom-name-input" :label="$t('customName')" color="primary" v-model="item.customName" hide-details single-line></v-text-field>
+ <v-text-field v-if="item.entry.id" class="keybind-input" prepend-icon="keyboard" color="primary" v-model="item.keyBind" maxlength="1" hide-details single-line></v-text-field>
</v-list-tile-content>
<v-list-tile-action>
<v-btn @click="removeItem(item)" icon><v-icon>clear</v-icon></v-btn>
@@ -134,7 +134,7 @@ export default {
dialog: {
immediate: true,
deep: true,
- async handler (value) {
+ handler (value) {
if (value.type === 'config' && value.show) {
this.name = value.info.name || ''
this.description = value.info.description || ''
@@ -144,12 +144,17 @@ export default {
if (this.script) this.expertMode = true
else this.expertMode = false
this.items = []
- var result = await axios.get('/api/configurator/configs/' + value.info.id + '/entries')
- this.items = result.data.map(x => ({
- entry: { id: x.id, name: x.name, script: x.script },
- customName: x.config_x_entry.customName,
- keyBind: x.config_x_entry.keyBind
- }))
+ if (value.info.id) {
+ this.$http.get('/api/configurator/configs/' + value.info.id + '/entries').then(response => {
+ this.items = response.data.map(entry => ({
+ entry: { id: entry.id, name: entry.name },
+ customName: entry.config_x_entry.customName,
+ keyBind: entry.config_x_entry.keyBind
+ }))
+ })
+ } else {
+ this.items = []
+ }
this.interval.id = setInterval(this.refreshEditor, 50)
this.interval.counter = 0
}
@@ -204,10 +209,23 @@ export default {
display: flex;
flex-direction: row;
justify-content: flex-start;
+ align-items: center;
}
.custom-name-input {
- margin-left: 20px;
- margin-right: 20px;
+ margin: 0 20px;
+ padding: 0;
+}
+
+.entry-input {
+ width: 280px;
+ margin: 0;
+ padding: 0;
+}
+
+.keybind-input {
+ width: 60px;
+ margin: 0;
+ padding: 0;
}
.script-heading {
diff --git a/webapp/src/components/GroupModuleClientView.vue b/webapp/src/components/GroupModuleClientView.vue
index e47273b..c9e7355 100644
--- a/webapp/src/components/GroupModuleClientView.vue
+++ b/webapp/src/components/GroupModuleClientView.vue
@@ -61,7 +61,7 @@
>
{{ group.name || group.id }}
</v-chip>
- <span v-if="groupChips.length > 5" class="and-more-chip">...</span>
+ <span v-if="groupChips && groupChips.length > 5" class="and-more-chip">...</span>
<span v-if="groupChips && groupChips.length === 0">-</span>
</div>
</div>
diff --git a/webapp/src/components/GroupModuleGroupView.vue b/webapp/src/components/GroupModuleGroupView.vue
index 41bff09..e8a8b82 100644
--- a/webapp/src/components/GroupModuleGroupView.vue
+++ b/webapp/src/components/GroupModuleGroupView.vue
@@ -73,7 +73,7 @@
>
{{ parent.name || parent.id }}
</v-chip>
- <span v-if="parentChips.length > 5" class="and-more-chip">...</span>
+ <span v-if="parentChips && parentChips.length > 5" class="and-more-chip">...</span>
<span v-if="parentChips && parentChips.length === 0">-</span>
</div>
</div>
diff --git a/webapp/src/main.js b/webapp/src/main.js
index 2665c0a..5b921e0 100644
--- a/webapp/src/main.js
+++ b/webapp/src/main.js
@@ -59,12 +59,16 @@ Vue.use(VueCodemirror, {
Vue.use(VueTouch)
axios.interceptors.response.use(null, error => {
- if (error && (error.response.data.status === 'TOKEN_INVALID' || error.response.data.status === 'TOKEN_MISSING')) {
- axios.post('/api/authentication/logout').then(response => { router.push('/login') })
+ if (error && error.response.status === 401) {
+ axios.post('/api/authentication/logout').then(response => {
+ router.push('/login')
+ socket.close()
+ })
}
return Promise.reject(error)
})
+
const socket = io({
autoConnect: false,
transports: ['websocket']