Skip to content

Commit

Permalink
Added payload maps
Browse files Browse the repository at this point in the history
  • Loading branch information
robertsLando committed Apr 24, 2019
1 parent 081f9e8 commit 010b388
Show file tree
Hide file tree
Showing 6 changed files with 195 additions and 11 deletions.
6 changes: 5 additions & 1 deletion src/App.vue
Original file line number Diff line number Diff line change
Expand Up @@ -198,7 +198,8 @@ export default {
return {
pages: [
{ icon: 'wifi', title: 'MQTT Clients', path: '/clients' },
{ icon: 'local_offer', title: 'Values', path: '/' }
{ icon: 'local_offer', title: 'Values', path: '/' },
{ icon: 'settings_ethernet', title: 'Payload Maps', path: '/payload_maps' }
],
drawer: false,
topbar: [],
Expand Down Expand Up @@ -253,6 +254,9 @@ export default {
case 'Values':
this.title = 'Values';
break;
case 'PayloadMaps':
this.title = 'Payload Maps';
break;
default:
this.title = '';
}
Expand Down
162 changes: 162 additions & 0 deletions src/components/PayloadMaps.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,162 @@
/* eslint-disable */

<template>
<v-container fluid>
<v-card>
<v-card-text>
<v-data-table
:headers="headers"
:items="maps"
:rows-per-page-items="[10, 20, {'text':'All','value':-1}]"
class="elevation-0"
>
<template slot="items" slot-scope="props">
<td>{{ props.item.name }}</td>
<td>{{ props.item.wildecard }}</td>
<td style="white-space:pre-wrap; word-wrap:break-word">{{ getMap(props.item.payloadMap) }}</td>
<td class="justify-center">
<v-btn icon class="mx-0" @click="editItem(props.item)">
<v-icon color="teal">edit</v-icon>
</v-btn>
<v-btn icon class="mx-0" @click="deleteItem(props.item)">
<v-icon color="pink">delete</v-icon>
</v-btn>
<v-btn icon class="mx-0" @click="cloneItem(props.item)">
<v-icon>content_copy</v-icon>
</v-btn>
</td>
</template>
</v-data-table>
</v-card-text>
</v-card>

<!--FAB-->
<v-speed-dial light fab fixed bottom right v-model="fab">
<template v-slot:activator>
<v-btn slot="activator" color="blue darken-2" dark fab hover v-model="fab">
<v-icon>add</v-icon>
<v-icon>close</v-icon>
</v-btn>
</template>

<v-btn fab dark small color="green" @click.stop="dialogValue = true">
<v-icon>add_box</v-icon>
</v-btn>

<!-- <v-btn
v-if="selected && selected.length > 0"
fab
dark
small
color="red"
@click.stop="deleteSelected()"
>
<v-icon>delete</v-icon>
</v-btn>
<v-btn
v-if="selected && selected.length > 0"
fab
dark
small
color="yellow"
@click.stop="cloneSelected()"
>
<v-icon>content_copy</v-icon>
</v-btn>-->
</v-speed-dial>

<DialogMap
@save="saveValue"
@close="closeDialog"
v-model="dialogValue"
:title="dialogTitle"
:editedValue="editedValue"
/>
</v-container>
</template>

<script>
import { mapGetters } from "vuex";
import DialogMap from '@/components/dialogs/Payload_map'
import uniqid from 'uniqid'
export default {
name: "Settings",
components:{
DialogMap
},
computed: {
dialogTitle () {
return this.editedIndex === -1 ? 'New Item' : 'Edit Item'
},
...mapGetters(["maps"])
},
watch: {
dialogValue (val) {
val || this.closeDialog()
}
},
data() {
return {
dialogValue: false,
editedValue: {payloadMap: []},
editedIndex: -1,
defaultValue: {payloadMap: []},
headers: [
{ text: "Name", value: "name" },
{ text: "Wildecard", value: "wildecard" },
{ text: "Payload Map", value: "payloadMap" },
{ text: "Actions", sortable: false }
],
fab: false,
};
},
methods: {
showSnackbar(text) {
this.$emit("showSnackbar", text);
},
getMap(payloadMap){
var result = ""
payloadMap.forEach(m => {
result += m.from + ": " + m.to + '\n';
});
return result;
},
editItem (item) {
this.editedIndex = this.maps.indexOf(item)
this.editedValue = Object.assign({}, item)
this.dialogValue = true
},
deleteItem (item) {
const index = this.maps.indexOf(item)
confirm('Are you sure you want to delete this item?') && this.maps.splice(index, 1)
},
cloneItem (item) {
var copy = JSON.parse(JSON.stringify(item)); // need to deep copy
copy._id = uniqid();
this.maps.push(copy)
},
closeDialog () {
this.dialogValue = false
setTimeout(() => {
this.editedValue = Object.assign({}, this.defaultValue)
this.editedIndex = -1
}, 300)
},
saveValue () {
if (this.editedIndex > -1) {
Object.assign(this.maps[this.editedIndex], this.editedValue)
} else {
this.editedValue._id = uniqid(); //assign an unique id to the client
this.maps.push(this.editedValue)
}
this.closeDialog()
}
}
};
</script>
13 changes: 11 additions & 2 deletions src/components/dialogs/Payload_map.vue
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,16 @@
required
></v-text-field>
</v-flex>
<v-flex xs12>
<v-text-field
v-model.trim="editedValue.wildecard"
label="Wildecard Topic"
hint="If incoming packets match this wildecard this map is used. Ex: if '#/set', 'a/b/set' and 'c/d/f/e/set' are valid"
required
></v-text-field>
</v-flex>
<v-container fluid grid-list-xs pa-1>
<v-layout v-for="(prop, index) in editedValue.getMap" :key="index" wrap>
<v-layout v-for="(prop, index) in editedValue.payloadMap" :key="index" wrap>
<v-flex xs6>
<v-text-field
v-model.trim="prop.from"
Expand All @@ -36,7 +44,7 @@
></v-text-field>
</v-flex>
</v-layout>
<v-layout v-if="editedValue.getMap.length == 0" justify-center>
<v-layout v-if="editedValue.payloadMap.length == 0" justify-center>
<p>Press '+' to add a property map</p>
</v-layout>
<v-layout justify-center>
Expand Down Expand Up @@ -69,6 +77,7 @@ export default {
},
watch: {
value(val) {
if(!this.editedValue.payloadMap) this.editedValue.payloadMap = [];
this.$refs.form.resetValidation();
}
},
Expand Down
11 changes: 5 additions & 6 deletions src/components/dialogs/Value.vue
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@
label="Custom topic"
></v-switch>
</v-flex>
<v-flex xs12 v-bind="{[`sm-${topicEdited.customTopic ? 6 : 12}`]: true}">
<v-flex xs12 v-bind="{[`sm${topicEdited.customTopic ? 6 : 12}`]: true}">
<v-text-field
v-model.trim="topicEdited.from"
label="Topic"
Expand Down Expand Up @@ -74,7 +74,7 @@
:items="optionsQoS"
></v-select>
</v-flex>
<v-flex xs12 sm6>
<v-flex xs12 v-bind="{[`sm${topicEdited.payload == '3' ? 6 : 12}`]: true}">
<v-select
v-model="topicEdited.payload"
label="Payload"
Expand All @@ -84,17 +84,16 @@
:items="optionsPayload"
></v-select>
</v-flex>
<v-flex xs12 sm6>
<v-flex v-if="topicEdited.payload == '3'" xs12 sm6>
<v-autocomplete
v-model="topicEdited.map_id"
label="Payload map"
:disabled="topicEdited.payload != '3'"
hint="Select the map function"
persistent-hint
required
item-text="name"
item-value="_id"
:items="clients"
:items="maps"
></v-autocomplete>
</v-flex>
</v-layout>
Expand Down Expand Up @@ -140,7 +139,7 @@ export default {
}
},
computed: {
...mapGetters(["clients"])
...mapGetters(["clients", "maps"])
},
methods: {
clearTopic(){
Expand Down
7 changes: 7 additions & 0 deletions src/router/index.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import Vue from 'vue'
import Router from 'vue-router'
import MqttClients from '@/components/MqttClients'
import PayloadMaps from '@/components/PayloadMaps'
import Values from '@/components/Values'

Vue.use(Router)
Expand All @@ -19,6 +20,12 @@ export default new Router({
name: 'MqttClients',
component: MqttClients,
props: true
},
{
path: '/payload_maps',
name: 'PayloadMaps',
component: PayloadMaps,
props: true
}
]
})
7 changes: 5 additions & 2 deletions src/store/mutations.js
Original file line number Diff line number Diff line change
@@ -1,11 +1,13 @@
export const state = {
clients: [],
values: []
values: [],
maps: []
}

export const getters = {
clients: state => state.clients,
values: values => state.values
values: state => state.values,
maps: state => state.maps
}

export const actions = {
Expand All @@ -20,5 +22,6 @@ export const mutations = {
initSettings(state, data){
state.clients = data.clients || [];
state.values = data.values || [];
state.maps = data.maps || [];
}
}

0 comments on commit 010b388

Please sign in to comment.