summaryrefslogtreecommitdiffstats
path: root/webapp/src/components/GroupModuleGroupView.vue
diff options
context:
space:
mode:
authorUdo Walter2019-02-23 09:35:27 +0100
committerUdo Walter2019-02-23 09:35:27 +0100
commit461549c117c9760392debae54bb8c7a1ed66b807 (patch)
treea45beb1d249d364a83bf8d1685d9bc7fda7d5915 /webapp/src/components/GroupModuleGroupView.vue
parent[Account] Add password change functionality (diff)
downloadbas-461549c117c9760392debae54bb8c7a1ed66b807.tar.gz
bas-461549c117c9760392debae54bb8c7a1ed66b807.tar.xz
bas-461549c117c9760392debae54bb8c7a1ed66b807.zip
[groups] add iprange functionality to groups; add refresh button
Diffstat (limited to 'webapp/src/components/GroupModuleGroupView.vue')
-rw-r--r--webapp/src/components/GroupModuleGroupView.vue103
1 files changed, 89 insertions, 14 deletions
diff --git a/webapp/src/components/GroupModuleGroupView.vue b/webapp/src/components/GroupModuleGroupView.vue
index 7418928..5403b61 100644
--- a/webapp/src/components/GroupModuleGroupView.vue
+++ b/webapp/src/components/GroupModuleGroupView.vue
@@ -8,8 +8,11 @@
"clients": "Clients",
"name": "Name",
"description": "Description",
+ "ipranges": "IP Ranges",
"config": "iPXE Config",
- "parents": "Parents"
+ "parents": "Parents",
+ "startIp": "Start IP",
+ "endIp": "End IP"
},
"de": {
"info": "Info",
@@ -19,8 +22,11 @@
"clients": "Clienten",
"name": "Name",
"description": "Beschreibung",
+ "ipranges": "IP Bereiche",
"config": "iPXE Konfiguration",
- "parents": "Übergruppen"
+ "parents": "Übergruppen",
+ "startIp": "Start IP",
+ "endIp": "End IP"
}
}
</i18n>
@@ -31,7 +37,7 @@
<v-card v-if="group.id !== 0">
<v-card-text>
<v-layout wrap>
- <v-flex lg4 md6 xs12 order-lg1 order-xs2>
+ <v-flex lg4 sm6 xs12 order-lg1 order-xs2>
<v-layout column>
<v-flex>
<v-text-field prepend-icon="label" v-if="editMode" class="info-input" :label="$t('name')" color="primary" v-model="info.name"></v-text-field>
@@ -46,13 +52,14 @@
v-if="editMode"
class="info-input"
:items="$store.state.groups.groupList"
- v-model="parentIds"
+ v-model="parents"
:menu-props="{ offsetY: '' }"
:label="$t('parents')"
color="primary"
multiple
item-value="id"
item-text="name"
+ return-object
small-chips
deletable-chips
>
@@ -78,11 +85,39 @@
</v-flex>
</v-layout>
</v-flex>
- <v-flex lg4 md6 xs12 order-lg2 order-xs3>
+ <v-flex lg4 sm6 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>
- <div class="info-text">{{ group.description || '-' }}</div>
+ <pre class="info-text">{{ group.description || '-' }}</pre>
+ </div>
+
+ <div v-if="editMode" class="info-input">
+ <div class="body-2 info-heading">
+ <v-icon>settings_ethernet</v-icon><span>{{ $t('ipranges') }}</span>
+ <v-btn small icon @click="addIprange"><v-icon>add</v-icon></v-btn>
+ </div>
+ <div>
+ <div v-for="(iprange, index) in ipranges" class="iprange" :key="index">
+ <v-btn small icon class="remove-iprange" @click="removeIprange(index)"><v-icon>remove</v-icon></v-btn>
+ <v-text-field :label="$t('startIp')" color="primary" v-model="iprange.startIp"></v-text-field>
+ <span>-</span>
+ <v-text-field :label="$t('endIp')" color="primary" v-model="iprange.endIp"></v-text-field>
+ </div>
+ </div>
+ </div>
+ <div v-else class="info-input">
+ <div class="body-2 info-heading"><v-icon>settings_ethernet</v-icon><span>{{ $t('ipranges') }}</span></div>
+ <div class="info-text ipranges-nonedit">
+ <table>
+ <tr v-for="(iprange, index) in group.ipranges" :key="index">
+ <td class="text-xs-right">{{ iprange.startIp }}</td>
+ <td class="ip-seperator">-</td>
+ <td>{{ iprange.endIp }}</td>
+ </tr>
+ </table>
+ <div v-if="group.ipranges.length === 0">-</div>
+ </div>
</div>
</v-flex>
<v-flex lg4 xs12 order-lg3 order-xs1 class="text-xs-right">
@@ -114,9 +149,9 @@
></v-switch></div>
</v-layout>
<v-subheader>{{ group.id > 0 ? $t('subgroups') : $t('groups') }}</v-subheader>
- <group-module-group-list :tabIndex="tabIndex" :groupId="group.id" :groups="group.subgroups" />
+ <group-module-group-list :tabIndex="tabIndex" :groupId="group.id" :groups="group.subgroups || []" />
<v-subheader>{{ $t('clients') }}</v-subheader>
- <group-module-client-list :tabIndex="tabIndex" :groupId="group.id" :clients="group.clients" />
+ <group-module-client-list :tabIndex="tabIndex" :groupId="group.id" :clients="group.clients || []" />
</template>
</div>
</template>
@@ -140,7 +175,8 @@ export default {
description: '',
configId: null
},
- parentIds: []
+ parents: [],
+ ipranges: [{ startIp: '', endIp: '' }]
}
},
computed: {
@@ -162,15 +198,19 @@ export default {
this.$store.commit('groups/setShowAll', { index: this.tabIndex, value })
this.$store.dispatch('groups/loadGroup', { id: this.group.id, tabIndex: this.tabIndex, reload: true })
},
- removeParent (id) {
- this.parentIds.splice(this.parentIds.indexOf(id), 1)
+ removeIprange (index) {
+ this.ipranges.splice(index, 1)
+ },
+ addIprange () {
+ this.ipranges.push({ startIp: '', endIp: '' })
},
editInfo () {
this.editMode = true
this.info.name = this.group.name
this.info.description = this.group.description
this.info.configId = this.group.configId
- this.parentIds = this.group.parents ? this.group.parents.map(x => x.id) : []
+ this.parents = this.group.parents.slice(0) || []
+ this.ipranges = this.group.ipranges.slice(0) || [{ startIp: '', endIp: '' }]
},
cancelEdit () {
this.editMode = false
@@ -184,7 +224,8 @@ export default {
this.$store.dispatch('groups/saveGroup', {
id: this.group.id,
data: this.info,
- parentIds: this.parentIds,
+ parents: this.parents,
+ ipranges: this.ipranges,
tabIndex: this.tabIndex,
callback: this.updateUrl
})
@@ -208,21 +249,55 @@ export default {
.info-buttons {
margin: 0;
}
+
+.iprange {
+ display: flex;
+ align-items: center;
+}
+
+.ipranges-nonedit {
+ overflow-x: auto;
+}
+
+.ipranges-nonedit .ip-seperator {
+ padding: 0 10px;
+}
+
+.iprange > .remove-iprange {
+ margin: 0 8px 0 -2px;
+}
+
+.iprange >>> input {
+ font-size: 14px;
+}
+
+.iprange > span {
+ margin: 0 10px;
+}
+
.info-input {
- margin: 20px;
+ padding: 10px 20px;
}
+
+.info-input >>> input, .info-input >>> textarea {
+ font-family: 'Roboto Mono';
+}
+
.info-heading {
display: flex;
align-items: center;
margin-bottom: 10px;
}
+
.info-heading > span {
margin-left: 10px;
}
+
.info-text {
margin-left: 34px;
font-family: 'Roboto Mono';
}
+
.show-toggle {
margin-top: 20px;
margin-right: 20px;