summaryrefslogtreecommitdiffstats
path: root/webapp
diff options
context:
space:
mode:
Diffstat (limited to 'webapp')
-rw-r--r--webapp/config/index.js2
-rw-r--r--webapp/src/assets/styles.css11
-rw-r--r--webapp/src/components/ComponentTemplate.vue2
-rw-r--r--webapp/src/components/GroupModule.vue61
-rw-r--r--webapp/src/components/GroupModuleClientList.vue70
-rw-r--r--webapp/src/components/GroupModuleEdit.vue79
-rw-r--r--webapp/src/components/GroupModuleGroupList.vue75
-rw-r--r--webapp/src/components/GroupModuleGroupView.vue62
8 files changed, 354 insertions, 8 deletions
diff --git a/webapp/config/index.js b/webapp/config/index.js
index 0c04bab..89dda2a 100644
--- a/webapp/config/index.js
+++ b/webapp/config/index.js
@@ -44,7 +44,7 @@ module.exports = {
proxyTable: {
// proxy all requests starting with /api to express server
'/api': {
- target: 'https://bas.stfu-kthx.net:8888/'
+ target: 'https://bas.stfu-kthx.net:8001/'
}
}
},
diff --git a/webapp/src/assets/styles.css b/webapp/src/assets/styles.css
index 3a7da9a..9bb1355 100644
--- a/webapp/src/assets/styles.css
+++ b/webapp/src/assets/styles.css
@@ -25,3 +25,14 @@ html {
::-webkit-scrollbar-button {
display: none;
}
+
+.tabs-wrapper {
+ display: flex;
+ flex-direction: column
+}
+
+.tabs-wrapper > .v-tabs__items {
+ padding: 0 5px;
+ margin: 0 -5px;
+ flex: 1
+} \ No newline at end of file
diff --git a/webapp/src/components/ComponentTemplate.vue b/webapp/src/components/ComponentTemplate.vue
index 3de9b36..9c0ebc6 100644
--- a/webapp/src/components/ComponentTemplate.vue
+++ b/webapp/src/components/ComponentTemplate.vue
@@ -8,7 +8,7 @@
</i18n>
<template>
-
+ <div></div>
</template>
<script>
diff --git a/webapp/src/components/GroupModule.vue b/webapp/src/components/GroupModule.vue
index 2e5070a..09e8050 100644
--- a/webapp/src/components/GroupModule.vue
+++ b/webapp/src/components/GroupModule.vue
@@ -8,22 +8,72 @@
</i18n>
<template>
- <div><v-btn color="primary" @click="newSnackbar">{{ count }}</v-btn></div>
+ <v-container fill-height>
+ <v-layout>
+ <v-flex class="tabs-wrapper" xl10 offset-xl1 lg12>
+ <v-card>
+ <v-tabs v-model="active" slider-color="primary">
+ <template v-for="(group, index) in groupChain">
+ <v-icon v-if="group.id !== 0" :key="2*index">keyboard_arrow_right</v-icon>
+ <v-tab :key="2*index+1" ripple>
+ <v-icon v-if="group.id === 0">home</v-icon>
+ <template v-else>{{ group.name ? group.name : group.id }}</template>
+ </v-tab>
+ </template>
+ </v-tabs>
+ </v-card>
+ <v-tabs-items v-model="active" touchless>
+ <template v-for="(group, index) in groupChain">
+ <v-tab-item :key="index">
+ <group-module-group-view
+ ref="groupViews"
+ :id="group.id"
+ @open-group="openGroup($event, index)"
+ @edit-group="editDialog = true; editClient = false; editId = $event"
+ />
+ </v-tab-item>
+ </template>
+ </v-tabs-items>
+ </v-flex>
+ </v-layout>
+ <v-dialog v-model="editDialog" max-width="600px">
+ <group-module-edit :id="editId" :client="editClient" @close="editDialog = false" @reload="reloadData" />
+ </v-dialog>
+ </v-container>
</template>
<script>
+import GroupModuleGroupView from '@/components/GroupModuleGroupView'
+import GroupModuleEdit from '@/components/GroupModuleEdit'
export default {
name: 'GroupModule',
+ components: {
+ GroupModuleGroupView,
+ GroupModuleEdit
+ },
data () {
return {
- count: 0
+ groupChain: [{ id: 0 }],
+ active: 0,
+ editDialog: false,
+ editId: null,
+ editClient: false
}
},
methods: {
- newSnackbar () {
- this.$store.commit('newSnackbar', this.count)
- this.count++
+ openGroup (group, index) {
+ if (this.groupChain.length <= (index + 1) || this.groupChain[index + 1].id !== group.id) {
+ this.groupChain = this.groupChain.slice(0, index + 1)
+ this.groupChain.push(group)
+ }
+ console.log(this.groupChain)
+ this.active = index + 1
+ },
+ reloadData () {
+ this.$refs.groupViews.forEach(groupView => {
+ groupView.loadData()
+ })
}
}
}
@@ -31,5 +81,4 @@ export default {
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
-
</style>
diff --git a/webapp/src/components/GroupModuleClientList.vue b/webapp/src/components/GroupModuleClientList.vue
new file mode 100644
index 0000000..c67362d
--- /dev/null
+++ b/webapp/src/components/GroupModuleClientList.vue
@@ -0,0 +1,70 @@
+<i18n>
+{
+ "en": {
+ },
+ "de": {
+ }
+}
+</i18n>
+
+<template>
+ <v-data-table stlye="width: 100px"
+ :headers="headers"
+ :items="clients"
+ item-key="id"
+ hide-actions
+ select-all
+ v-model="selected"
+ >
+ <template slot="items" slot-scope="props">
+ <tr @click="props.selected = !props.selected">
+ <td class="narrow-td">
+ <v-checkbox
+ color="primary"
+ v-model="props.selected"
+ hide-details
+ @click.native.stop
+ ></v-checkbox>
+ </td>
+ <td class="narrow-td">{{ props.item.id }}</td>
+ <td>{{ props.item.name }}</td>
+ <td>{{ props.item.ip }}</td>
+ <td>{{ props.item.mac }}</td>
+ <td>{{ props.item.uuid }}</td>
+ <td class="narrow-td">
+ <v-btn icon @click.stop><v-icon color="primary">edit</v-icon></v-btn>
+ </td>
+ </tr>
+ </template>
+ </v-data-table>
+</template>
+
+<script>
+
+export default {
+ name: 'GroupModuleClientList',
+ props: ['clients'],
+ data () {
+ return {
+ headers: [
+ { text: 'ID', value: 'id' },
+ { text: 'Name', value: 'name' },
+ { text: 'IP Address', value: 'ip' },
+ { text: 'MAC Address', value: 'mac' },
+ { text: 'UUID', value: 'uuid' },
+ { sortable: false }
+ ],
+ selected: []
+ }
+ },
+ methods: {
+ }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+.narrow-td {
+ width: 10px;
+}
+</style>
diff --git a/webapp/src/components/GroupModuleEdit.vue b/webapp/src/components/GroupModuleEdit.vue
new file mode 100644
index 0000000..4b91269
--- /dev/null
+++ b/webapp/src/components/GroupModuleEdit.vue
@@ -0,0 +1,79 @@
+<i18n>
+{
+ "en": {
+ },
+ "de": {
+ }
+}
+</i18n>
+
+<template>
+ <v-card>
+ <div class="input-fields">
+ <v-text-field v-model="name" label="Name" box color="primary"></v-text-field>
+ </div>
+ <div class="action-buttons text-xs-right">
+ <v-btn flat @click="$emit('close')">Cancel</v-btn>
+ <v-btn color="primary" @click="saveData">Save</v-btn>
+ </div>
+ </v-card>
+</template>
+
+<script>
+
+export default {
+ name: 'GroupModuleEdit',
+ props: ['id', 'client'],
+ data () {
+ return {
+ name: ''
+ }
+ },
+ watch: {
+ id () { this.loadData() }
+ },
+ methods: {
+ loadData () {
+ if (!this.id) return
+ if (this.client) {
+ // TODO
+ } else {
+ this.$http('/api/groups?action=getInfo&id=' + this.id).then(response => {
+ this.name = response.data.name
+ })
+ }
+ },
+ saveData () {
+ if (this.client) {
+ // TODO
+ } else {
+ this.$http.post('/api/groups', {
+ action: 'setInfo',
+ id: this.id,
+ name: this.name
+ }).then(response => {
+ console.log(response)
+ })
+ }
+ this.$emit('close')
+ this.$emit('reload')
+ }
+ },
+ created () {
+ this.loadData()
+ }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+.input-fields {
+ padding: 40px;
+ padding-bottom: 0;
+}
+
+.action-buttons {
+ padding: 10px;
+}
+
+</style>
diff --git a/webapp/src/components/GroupModuleGroupList.vue b/webapp/src/components/GroupModuleGroupList.vue
new file mode 100644
index 0000000..b6bcd9c
--- /dev/null
+++ b/webapp/src/components/GroupModuleGroupList.vue
@@ -0,0 +1,75 @@
+<i18n>
+{
+ "en": {
+ },
+ "de": {
+ }
+}
+</i18n>
+
+<template>
+ <div>
+ <v-data-table
+ class="group-table"
+ :headers="headers"
+ :items="groups"
+ item-key="id"
+ hide-actions
+ select-all
+ v-model="selected"
+ >
+ <template slot="items" slot-scope="props">
+ <tr @click="$emit('open-group', props.item)">
+ <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>
+ <v-layout>
+ <v-btn icon @click.stop="$emit('edit-group', props.item.id)"><v-icon color="primary">edit</v-icon></v-btn>
+ <v-btn class="next-arrow" icon @click.stop="$emit('open-group', props.item)"><v-icon>keyboard_arrow_right</v-icon></v-btn>
+ </v-layout>
+ </td>
+ </tr>
+ </template>
+ </v-data-table>
+ </div>
+</template>
+
+<script>
+import GroupModuleGroupView from '@/components/GroupModuleGroupView'
+
+export default {
+ name: 'GroupModuleGroupList',
+ components: {
+ GroupModuleGroupView
+ },
+ props: ['groups'],
+ data () {
+ return {
+ headers: [
+ { text: 'ID', value: 'id' },
+ { text: 'Name', value: 'name', width: '10000px' },
+ { sortable: false }
+ ],
+ selected: []
+ }
+ },
+ methods: {
+ }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+.next-arrow {
+ margin-left: 20px;
+ margin-right: -10px;
+}
+</style>
diff --git a/webapp/src/components/GroupModuleGroupView.vue b/webapp/src/components/GroupModuleGroupView.vue
new file mode 100644
index 0000000..24cbdd1
--- /dev/null
+++ b/webapp/src/components/GroupModuleGroupView.vue
@@ -0,0 +1,62 @@
+<i18n>
+{
+ "en": {
+ },
+ "de": {
+ }
+}
+</i18n>
+
+<template>
+ <div>
+ <v-subheader>Groups</v-subheader>
+ <v-card>
+ <group-module-group-list :groups="subGroups" @open-group="$emit('open-group', $event)" @edit-group="$emit('edit-group', $event)" />
+ </v-card>
+ <v-subheader>Clients</v-subheader>
+ <v-card>
+ <group-module-client-list :clients="clients" @edit-client="$emit('edit-client', $event)" />
+ </v-card>
+ </div>
+</template>
+
+<script>
+import GroupModuleGroupList from '@/components/GroupModuleGroupList'
+import GroupModuleClientList from '@/components/GroupModuleClientList'
+
+export default {
+ name: 'GroupModuleGroupView',
+ props: ['id'],
+ components: {
+ GroupModuleGroupList,
+ GroupModuleClientList
+ },
+ data () {
+ return {
+ subGroups: [],
+ clients: []
+ }
+ },
+ watch: {
+ id () { this.loadData() }
+ },
+ methods: {
+ loadData () {
+ var id = this.id ? this.id : ''
+ this.$http('/api/groups?action=getSubGroups&id=' + id).then(response => {
+ this.subGroups = response.data
+ })
+ this.$http('/api/groups?action=getClients&id=' + id).then(response => {
+ this.clients = response.data
+ })
+ }
+ },
+ created () {
+ this.loadData()
+ }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+</style>