summaryrefslogtreecommitdiffstats
path: root/webapp/src/components/GroupModuleClientView.vue
diff options
context:
space:
mode:
Diffstat (limited to 'webapp/src/components/GroupModuleClientView.vue')
-rw-r--r--webapp/src/components/GroupModuleClientView.vue199
1 files changed, 199 insertions, 0 deletions
diff --git a/webapp/src/components/GroupModuleClientView.vue b/webapp/src/components/GroupModuleClientView.vue
new file mode 100644
index 0000000..ab12ed0
--- /dev/null
+++ b/webapp/src/components/GroupModuleClientView.vue
@@ -0,0 +1,199 @@
+<i18n>
+{
+ "en": {
+ "name": "Name",
+ "description": "Description",
+ "groups": "Groups",
+ "ip": "IP Address",
+ "mac": "MAC Address",
+ "uuid": "UUID"
+ },
+ "de": {
+ "name": "Name",
+ "description": "Beschreibung",
+ "groups": "Gruppen",
+ "ip": "IP Adresse",
+ "mac": "MAC Adresse",
+ "uuid": "UUID"
+ }
+}
+</i18n>
+
+<template>
+ <div>
+ <v-subheader>Info</v-subheader>
+ <v-card>
+ <v-card-text>
+ <v-layout wrap>
+ <v-flex lg4 md6 xs12 order-lg1 order-xs2>
+ <v-layout column>
+ <v-flex>
+ <v-text-field v-if="editMode" prepend-icon="label" class="info-input" :label="$t('name')" color="primary" v-model="info.name"></v-text-field>
+ <div v-else class="info-input">
+ <div class="body-2 info-heading"><v-icon>label</v-icon><span>{{ $t('name') }}</span></div>
+ <div class="info-text">{{ client.name || '-' }}</div>
+ </div>
+ </v-flex>
+ <v-flex>
+ <v-autocomplete
+ prepend-icon="device_hub"
+ v-if="editMode"
+ class="info-input"
+ :items="$store.state.groups.groupList"
+ v-model="groupIds"
+ offset-y
+ :label="$t('groups')"
+ color="primary"
+ multiple
+ item-value="id"
+ item-text="name"
+ small-chips
+ deletable-chips
+ >
+ </v-autocomplete>
+ <div v-else class="info-input">
+ <div class="body-2 info-heading"><v-icon>device_hub</v-icon><span>{{ $t('groups') }}</span></div>
+ <div class="info-text">
+ <template v-if="client.groups && client.groups.length > 0">
+ <v-chip v-for="group in client.groups" :key="group.id" small>
+ {{ group.name || group.id }}
+ </v-chip>
+ </template>
+ <span v-else>-</span>
+ </div>
+ </div>
+ </v-flex>
+ </v-layout>
+ </v-flex>
+ <v-flex lg4 md6 xs12 order-lg2 order-xs3>
+ <v-textarea prepend-icon="description" v-if="editMode" rows="1" auto-grow class="info-input" :label="$t('description')" color="primary" v-model="info.description"></v-textarea>
+ <div v-else class="info-input">
+ <div class="body-2 info-heading"><v-icon>description</v-icon><span>{{ $t('description') }}</span></div>
+ <pre class="info-text">{{ client.description || '-' }}</pre>
+ </div>
+ </v-flex>
+ <v-flex lg4 xs12 order-lg3 order-xs1 class="text-xs-right">
+ <div class="info-input">
+ <v-btn v-if="!editMode" color="primary" flat @click="editInfo" class="info-buttons">
+ <v-icon left>create</v-icon>{{ $t('edit') }}
+ </v-btn>
+ <div v-else>
+ <v-btn color="primary" flat @click="cancelEdit" class="info-buttons">{{ $t('cancel') }}</v-btn>
+ <v-btn color="primary" @click="saveInfo" class="info-buttons">
+ <v-icon left>save</v-icon>{{ $t('save') }}
+ </v-btn>
+ </div>
+ </div>
+ </v-flex>
+ </v-layout>
+ <v-layout wrap>
+ <v-flex lg4 md6 xs12>
+ <v-text-field prepend-icon="language" v-if="editMode" class="info-input" :label="$t('ip')" color="primary" v-model="info.ip"></v-text-field>
+ <div v-else class="info-input">
+ <div class="body-2 info-heading"><v-icon>language</v-icon><span>{{ $t('ip') }}</span></div>
+ <div class="info-text">{{ client.ip || '-' }}</div>
+ </div>
+ </v-flex>
+ <v-flex lg4 md6 xs12>
+ <v-text-field prepend-icon="memory" v-if="editMode" class="info-input" :label="$t('mac')" color="primary" v-model="info.mac"></v-text-field>
+ <div v-else class="info-input">
+ <div class="body-2 info-heading"><v-icon>memory</v-icon><span>{{ $t('mac') }}</span></div>
+ <div class="info-text">{{ client.mac || '-' }}</div>
+ </div>
+ </v-flex>
+ <v-flex lg4 md6 xs12>
+ <v-text-field prepend-icon="fingerprint" v-if="editMode" class="info-input" :label="$t('uuid')" color="primary" v-model="info.uuid"></v-text-field>
+ <div v-else class="info-input">
+ <div class="body-2 info-heading"><v-icon>fingerprint</v-icon><span>{{ $t('uuid') }}</span></div>
+ <div class="info-text">{{ client.uuid || '-' }}</div>
+ </div>
+ </v-flex>
+ </v-layout>
+ </v-card-text>
+ </v-card>
+ </div>
+</template>
+
+<script>
+export default {
+ name: 'GroupModuleClientView',
+ props: ['tabIndex', 'client'],
+ data () {
+ return {
+ editMode: false,
+ info: {
+ name: '',
+ description: '',
+ ip: '',
+ mac: '',
+ uuid: ''
+ },
+ groupIds: []
+ }
+ },
+ created () {
+ if (!this.client.id) this.editInfo()
+ },
+ watch: {
+ client (newValue, oldValue) {
+ if (!newValue.id) this.editInfo()
+ else if (newValue.id !== oldValue.id) this.editMode = false
+ }
+ },
+ methods: {
+ removeGroup (id) {
+ this.groupIds.splice(this.groupIds.indexOf(id), 1)
+ },
+ editInfo () {
+ this.editMode = true
+ this.info.name = this.client.name
+ this.info.description = this.client.description
+ this.groupIds = this.client.groups ? this.client.groups.map(x => x.id) : []
+ },
+ cancelEdit () {
+ this.editMode = false
+ if (this.client.id) return
+ this.$store.commit('groups/deleteFromTabChain', { index: this.tabIndex, count: 1 })
+ this.$store.commit('groups/setActiveTab', this.tabIndex - 1)
+ },
+ saveInfo () {
+ this.$store.dispatch('groups/saveClient', {
+ id: this.client.id,
+ info: this.info,
+ groupIds: this.groupIds,
+ tabIndex: this.tabIndex,
+ callback: this.updateUrl
+ })
+ this.editMode = false
+ },
+ updateUrl (id) {
+ console.log(id)
+ this.$router.replace({
+ name: 'GroupModule.client',
+ params: { id, noReload: true }
+ })
+ }
+ }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+.info-buttons {
+ margin: 0;
+}
+.info-input {
+ margin: 20px;
+}
+.info-heading {
+ display: flex;
+ align-items: center;
+ margin-bottom: 10px;
+}
+.info-heading > span {
+ margin-left: 10px;
+}
+.info-text {
+ margin-left: 34px;
+}
+</style>