fix batch tags dialogue box #6971

Signed-off-by: si458 <simonsmith5521@gmail.com>

translate/translate.json

@@ -29883,7 +29883,7 @@
       "zh-cht": "編輯裝置標籤",
       "xloc": [
         "default.handlebars->47->776",
-        "default3.handlebars->35->773"
+        "default3.handlebars->35->772"
       ]
     },
     {
@@ -81445,7 +81445,7 @@
         "default.handlebars->47->1380",
         "default.handlebars->47->775",
         "default3.handlebars->35->1366",
-        "default3.handlebars->35->772"
+        "default3.handlebars->35->773"
       ]
     },
     {

views/default3.handlebars

@@ -6628,17 +6628,29 @@
             } else if (op == 107) {
                 // Edit tags
                 var x = "Perform batch device tag operation" + '<br /><br />';
-                x += addHtmlFormFloating("Operation", '<select id=d2deviceop class="form-select-sm me-2"><option value=1>' + "Add tags" + '</option><option value=2>' + "Set tags" + '</option><option value=3>' + "Remove tags" + '</option></select>');
+                x += addHtmlFormFloating("Operation", '<select id=d2deviceop class="form-select"><option value=1>' + "Add tags" + '</option><option value=2>' + "Set tags" + '</option><option value=3>' + "Remove tags" + '</option></select>');
-                x += addHtmlFormFloating("Tags", '<input id=dp10devicevalue class="form-control" maxlength=4096 placeholder="' + "Tag1, Tag2, Tag3" + '" />');
+                x += addHtmlFormFloating("Tags", '<select id=dp10devicevalue multiple class="form-control" maxlength=4096>');
                 // Get a list of all possible device tags
                 var allTags = [], y = '';
                 for (var i in nodes) { if (nodes[i].tags) { for (var j in nodes[i].tags) { if (allTags.indexOf(nodes[i].tags[j]) == -1) { allTags.push(nodes[i].tags[j]); } } } }
                 if (allTags.length > 0) {
                     allTags.sort();
-                    for (var i in allTags) { y += '<span style=padding:4px;background-color:#BBB;border-radius:3px;cursor:pointer onclick=showEditNodeValueDialogAddTag("' + encodeURIComponentEx(allTags[i]) + '")>' + EscapeHtml(allTags[i]) + '</span> '; }
+                    for (var i in allTags) {
-                    x += '<div style=margin-top:8px;width:370px;line-height:26px;max-height:160px;overflow-y:auto>' + y + '</div>';
+                        var tag = EscapeHtml(allTags[i]);
+                        y += '<option>' + EscapeHtml(allTags[i]) + '</option>';
+                    }
                 }
+                x += y + '</select>'
                 setModalContent('xxAddAgent', "Edit Device Tags", x);
+                $('#dp10devicevalue').select2({
+                    theme: 'bootstrap-5',
+                    width: $( this ).data( 'width' ) ? $( this ).data( 'width' ) : $( this ).hasClass( 'w-100' ) ? '100%' : 'style',
+                    placeholder: "Tag1, Tag2, Tag3",
+                    closeOnSelect: false,
+                    allowClear: true,
+                    tokenSeparators: [','],
+                    tags: true
+                });
                 showModal('xxAddAgentModal', 'idx_dlgOkButton', () => d2groupActionFunctionTagsExec());
             } else if (op == 108) {
                 // Device notification
@@ -6718,12 +6730,13 @@
         }
 
         function d2groupActionFunctionTagsExec() {
-            var chkNodeIds = getCheckedDevices(), op = Q('d2deviceop').value, optags = Q('dp10devicevalue').value;
+            var chkNodeIds = getCheckedDevices(), op = Q('d2deviceop').value, optags = [];
+            var tt = $('#dp10devicevalue').select2('data');
+            for (var i in tt) { optags.push(tt[i]['text'].trim()); }
             if (op == 2) { // Set tags
-                for (var i in chkNodeIds) { meshserver.send({ action: 'changedevice', nodeid: chkNodeIds[i], tags: optags }); }
+                for (var i in chkNodeIds) { meshserver.send({ action: 'changedevice', nodeid: chkNodeIds[i], tags: optags.join(',') }); }
             } else {
                 var taggroup = [];
-                optags = optags.split(',');
                 for (var i in optags) { var tname = optags[i].trim(); if ((tname.length > 0) && (tname.length < 64) && (taggroup.indexOf(tname) == -1)) { taggroup.push(tname); } }
                 for (var i in chkNodeIds) {
                     var nodeTags = null, tagChanges = false, n = getNodeFromId(chkNodeIds[i]);
@@ -9826,13 +9839,12 @@
             if (v == null) v = '';
             if (mode == 3) {
                 // Get a list of all possible device tags
-                x = '<select id=dp10devicevalue multiple class="form-control" maxlength=' + showEditNodeValueDialog_modes4[mode] + ' class=form-control>';
+                x = '<select id=dp10devicevalue multiple maxlength=' + showEditNodeValueDialog_modes4[mode] + ' class=form-control>';
                 var allTags = [];
                 for (var i in nodes) { if (nodes[i].tags) { for (var j in nodes[i].tags) { if (allTags.indexOf(nodes[i].tags[j]) == -1) { allTags.push(nodes[i].tags[j]); } } } }
                 if (allTags.length > 0) {
                     allTags.sort();
                     for (var i in allTags) {
-                        var tag = EscapeHtml(allTags[i]);
                         y += Array.isArray(v) && v.indexOf(allTags[i]) !== -1 ? '<option selected=selected>' + EscapeHtml(allTags[i]) + '</option>' : '<option>' + EscapeHtml(allTags[i]) + '</option>';
                     }
                 }
@@ -9852,24 +9864,12 @@
                 setModalContent('xxAddAgent', "Edit Device", x);
                 if (Array.isArray(v)) { v = v.join(', '); }
                 Q('dp10devicevalue').value = v;
-                showModal('xxAddAgentModal', 'idx_dlgOkButton', function () {
-                    showEditNodeValueDialogEx(3, mode);
-                });
             }
             p10editdevicevalueValidate();
             showModal('xxAddAgentModal', 'idx_dlgOkButton', function () { showEditNodeValueDialogEx(3, mode); });
             Q('dp10devicevalue').focus();
         }
 
-        function showEditNodeValueDialogAddTag(t) {
-            var tt = Q('dp10devicevalue').value.split(','), t2 = [];
-            for (var i in tt) { t2.push(tt[i].trim()); }
-            if (t2.indexOf(t) >= 0) return;
-            Q('dp10devicevalue').value += ((Q('dp10devicevalue').value.length == 0) ? '' : ', ') + decodeURIComponent(t);
-            setTimeout(function () { Q('dp10devicevalue').selectionStart = Q('dp10devicevalue').selectionEnd = 90000; }, 0);
-            p10editdevicevalueValidate();
-        }
-
         function showEditNodeValueDialogEx(button, mode) {
             var tags = '';
             var x = { action: 'changedevice', nodeid: currentNode._id };