Skip to content

Commit 2d26496

Browse files
riclolsenriclolsen
committed
Tag edit dialog added.
1 parent f9d4898 commit 2d26496

File tree

1 file changed

+228
-55
lines changed

1 file changed

+228
-55
lines changed

‎src/htdocs-admin/src/components/Tags.vue‎

Lines changed: 228 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1,64 +1,190 @@
11
<template>
2-
<div>
3-
<v-container class="grey lighten-5">
4-
<v-row no-gutters>
5-
<v-col
6-
cols="12"
7-
sm="2"
8-
>
9-
<v-card
10-
class="pa-2"
11-
outlined
12-
tile
13-
>
14-
<v-spacer></v-spacer>
15-
<v-text-field
16-
dense
17-
@change="fetchTags"
18-
v-model="searchTag"
19-
append-icon="mdi-magnify"
20-
label="Search Tag"
21-
hide-details
22-
></v-text-field>
23-
</v-card>
24-
</v-col>
25-
<v-col
26-
cols="12"
27-
sm="2"
28-
>
29-
<v-card
30-
class="pa-2"
31-
outlined
32-
tile
33-
>
34-
<v-spacer></v-spacer>
35-
<v-text-field
36-
dense
37-
@change="fetchTags"
38-
v-model="searchDescription"
39-
append-icon="mdi-magnify"
40-
label="Description"
41-
hide-details
42-
></v-text-field>
43-
</v-card>
44-
</v-col>
45-
</v-row>
46-
</v-container>
2+
<div>
473

48-
<v-data-table
4+
<v-data-table
495
:headers="headers"
506
:items="tags"
517
:options.sync="options"
528
:server-items-length="totalTags"
539
:loading="loading"
54-
:search="search"
5510
multi-sort
5611
class="elevation-1"
5712
dense
58-
:items-per-page="15"
13+
:items-per-page="15"
5914
>
15+
<template v-slot:top>
16+
<v-toolbar
17+
flat
18+
>
19+
<v-toolbar-title>Tags</v-toolbar-title>
20+
<v-divider
21+
class="mx-4"
22+
inset
23+
vertical
24+
></v-divider>
25+
<v-text-field
26+
dense
27+
@change="fetchTags"
28+
v-model="searchTag"
29+
append-icon="mdi-magnify"
30+
label="Search Tag"
31+
hide-details
32+
></v-text-field>
33+
<v-spacer></v-spacer>
34+
35+
<v-text-field
36+
dense
37+
@change="fetchTags"
38+
v-model="searchDescription"
39+
append-icon="mdi-magnify"
40+
label="Description"
41+
hide-details
42+
></v-text-field>
43+
<v-spacer></v-spacer>
44+
<v-divider
45+
class="mx-4"
46+
inset
47+
vertical
48+
></v-divider>
49+
50+
<v-dialog v-model="dialog" max-width="500px">
51+
<template v-slot:activator="{ on, attrs }">
52+
<v-btn color="primary" dark class="mb-2" v-bind="attrs" v-on="on">
53+
New Tag
54+
</v-btn>
55+
</template>
56+
<v-card>
57+
<v-card-title>
58+
<span class="headline">Edit Tag</span>
59+
</v-card-title>
60+
61+
<v-card-text>
62+
<v-container>
63+
<v-row dense>
64+
<v-col cols="12" sm="6" md="12">
65+
<v-text-field dense
66+
v-model="editedItem.tag"
67+
label="Tag name"
68+
></v-text-field>
69+
<v-text-field dense
70+
v-model="editedItem.description"
71+
label="Description"
72+
></v-text-field>
73+
<v-text-field dense
74+
v-model="editedItem.group1"
75+
label="Group 1 (e.g.Installation/Plant)"
76+
></v-text-field>
77+
<v-text-field dense
78+
v-model="editedItem.group2"
79+
label="Group 2 (e.g.Area/Bay)"
80+
></v-text-field>
81+
<v-text-field dense
82+
v-model="editedItem.group3"
83+
label="Group 3 (e.g.Equipment/Device)"
84+
></v-text-field>
85+
<v-select
86+
:items="['supervised', 'command', 'calculated', 'manual' ]"
87+
label="Origin"
88+
v-model="editedItem.origin"
89+
class="ma-0"
90+
></v-select>
91+
<v-select
92+
:items="['digital', 'analog', 'string' ]"
93+
label="Type"
94+
v-model="editedItem.type"
95+
class="ma-0"
96+
></v-select>
97+
<v-text-field dense v-if="editedItem.type=='digital'"
98+
v-model="editedItem.stateTextFalse"
99+
label="State Text False"
100+
></v-text-field>
101+
<v-text-field dense v-if="editedItem.type=='digital'"
102+
v-model="editedItem.stateTextTrue"
103+
label="State Text True"
104+
></v-text-field>
105+
<v-text-field dense v-if="editedItem.type=='digital'"
106+
v-model="editedItem.eventTextFalse"
107+
label="Event Text False"
108+
></v-text-field>
109+
<v-text-field dense v-if="editedItem.type=='digital'"
110+
v-model="editedItem.eventTextTrue"
111+
label="Event Text True"
112+
></v-text-field>
113+
<v-text-field dense v-if="editedItem.type=='analog'"
114+
v-model="editedItem.unit"
115+
label="Unit"
116+
></v-text-field>
117+
118+
<v-text-field dense type='number' v-if="['supervised'].includes(editedItem.origin)"
119+
v-model="editedItem.commandOfSupervised"
120+
label="Command point of supervised (use zero for none)"
121+
></v-text-field>
122+
<v-text-field dense type='number' v-if="['command'].includes(editedItem.origin)"
123+
v-model="editedItem.supervisedOfCommand"
124+
label="Supervised point of command (use zero for none)"
125+
></v-text-field>
126+
127+
<v-text-field dense type='number' v-if="['supervised','command'].includes(editedItem.origin)"
128+
v-model="editedItem.protocolSourceConnectionNumber"
129+
label="Protocol Source Connection Number"
130+
></v-text-field>
131+
<v-text-field dense v-if="['supervised','command'].includes(editedItem.origin)"
132+
v-model="editedItem.protocolSourceASDU"
133+
label="protocolSourceASDU"
134+
></v-text-field>
135+
<v-text-field dense v-if="['supervised','command'].includes(editedItem.origin)"
136+
v-model="editedItem.protocolSourceCommonAddress"
137+
label="protocolSourceCommonAddress"
138+
></v-text-field>
139+
<v-text-field dense v-if="['supervised','command'].includes(editedItem.origin)"
140+
v-model="editedItem.protocolSourceObjectAddress"
141+
label="protocolSourceObjectAddress"
142+
></v-text-field>
143+
144+
<v-text-field dense v-if="['command'].includes(editedItem.origin)"
145+
v-model="editedItem.protocolSourceCommandDuration"
146+
label="protocolSourceCommandDuration"
147+
></v-text-field>
148+
149+
<v-switch dense v-if="['command'].includes(editedItem.origin)"
150+
v-model="editedItem.protocolSourceCommandUseSBO"
151+
inset
152+
color="primary"
153+
:label="`Use SBO: ${editedItem.protocolSourceCommandUseSBO?'true':'false'}`"
154+
class="mt-0"
155+
></v-switch>
156+
157+
158+
<v-switch dense
159+
v-model="editedItem.isEvent"
160+
inset
161+
color="primary"
162+
:label="`Is event: ${editedItem.isEvent?'true':'false'}`"
163+
class="mt-0"
164+
></v-switch>
165+
166+
167+
</v-col>
168+
</v-row>
169+
</v-container>
170+
</v-card-text>
171+
172+
<v-card-actions>
173+
<v-spacer></v-spacer>
174+
<v-btn color="blue darken-1" text @click="close"> Cancel </v-btn>
175+
<v-btn color="blue darken-1" text @click="save"> Save </v-btn>
176+
</v-card-actions>
177+
</v-card>
178+
</v-dialog>
179+
</v-toolbar>
180+
</template>
181+
182+
<template v-slot:item.Actions="{ item }">
183+
<v-icon small class="mr-2" @click="editItem(item)"> mdi-pencil </v-icon>
184+
<v-icon small @click="deleteItem(item)"> mdi-delete </v-icon>
185+
</template>
60186
</v-data-table>
61-
</div>
187+
</div>
62188
</template>
63189
<script>
64190
// const pause = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
@@ -68,6 +194,7 @@ export default {
68194
69195
data: () => ({
70196
dialog: false,
197+
dialogDelete: false,
71198
active: [],
72199
open: [],
73200
tags: [],
@@ -87,7 +214,19 @@ export default {
87214
{ text: "Group1", sortable: true, value: "group1" },
88215
{ text: "Description", sortable: true, value: "description" },
89216
{ text: "Value", value: "value" },
217+
{ text: "Actions", value: "Actions", sortable: false },
90218
],
219+
editedIndex: -1,
220+
editedItem: {
221+
tag: "",
222+
description: "",
223+
group1: "",
224+
},
225+
defaultItem: {
226+
tag: "",
227+
description: "",
228+
group1: "",
229+
},
91230
}),
92231
93232
computed: {
@@ -122,14 +261,48 @@ export default {
122261
},
123262
124263
methods: {
264+
editItem(item) {
265+
console.log(item);
266+
this.editedIndex = this.tags.indexOf(item);
267+
this.editedItem = Object.assign({}, item);
268+
this.dialog = true;
269+
},
270+
271+
deleteItem(item) {
272+
this.editedIndex = this.tags.indexOf(item);
273+
this.editedItem = Object.assign({}, item);
274+
this.dialogDelete = true;
275+
},
276+
close() {
277+
this.dialog = false;
278+
this.$nextTick(() => {
279+
this.editedItem = Object.assign({}, this.defaultItem);
280+
this.editedIndex = -1;
281+
});
282+
},
283+
closeDelete() {
284+
this.dialogDelete = false;
285+
this.$nextTick(() => {
286+
this.editedItem = Object.assign({}, this.defaultItem);
287+
this.editedIndex = -1;
288+
});
289+
},
290+
save() {
291+
if (this.editedIndex > -1) {
292+
Object.assign(this.tags[this.editedIndex], this.editedItem);
293+
} else {
294+
// this.tags.push(this.editedItem);
295+
}
296+
this.close();
297+
},
125298
async fetchTags() {
126299
const { sortBy, sortDesc, page, itemsPerPage } = this.options;
127-
let filter = {}
300+
let filter = {};
128301
129-
if (this.searchTag.trim()!="")
130-
filter.tag = {'$regex': this.searchTag, '$options': 'i'}
131-
if (this.searchDescription.trim()!="")
132-
filter.description = {'$regex': this.searchDescription, '$options': 'i'}
302+
if (this.searchTag.trim() != "")
303+
filter.tag = { $regex: this.searchTag, $options: "i" };
304+
if (this.searchDescription.trim() != "")
305+
filter.description = { $regex: this.searchDescription, $options: "i" };
133306
134307
this.loading = true;
135308
return await fetch("/Invoke/auth/listTags", {
@@ -143,7 +316,7 @@ export default {
143316
sortBy: sortBy,
144317
sortDesc: sortDesc,
145318
page: page,
146-
filter: filter
319+
filter: filter,
147320
}),
148321
})
149322
.then((res) => res.json())

0 commit comments

Comments
 (0)