From d8fd9235ecbf0633fc2cb0dd026272d87bfc10c0 Mon Sep 17 00:00:00 2001
From: Artur Arseniev <artur.catch@hotmail.it>
Date: Thu, 5 Aug 2021 16:12:44 +0200
Subject: [PATCH] Remove _.template from DevicesView

---
 src/device_manager/view/DevicesView.js | 57 +++++++++++++-------------
 1 file changed, 29 insertions(+), 28 deletions(-)

diff --git a/src/device_manager/view/DevicesView.js b/src/device_manager/view/DevicesView.js
index e3ba72222..7c64125b6 100644
--- a/src/device_manager/view/DevicesView.js
+++ b/src/device_manager/view/DevicesView.js
@@ -1,22 +1,27 @@
-import { template } from 'underscore';
-import Backbone from 'backbone';
+import { View } from 'backbone';
+import html from 'utils/html';
 
-export default Backbone.View.extend({
-  template: template(`
-    <div class="<%= ppfx %>device-label"><%= deviceLabel %></div>
-    <div class="<%= ppfx %>field <%= ppfx %>select">
-      <span id="<%= ppfx %>input-holder">
-        <select class="<%= ppfx %>devices"></select>
-      </span>
-      <div class="<%= ppfx %>sel-arrow">
-        <div class="<%= ppfx %>d-s-arrow"></div>
+export default class DevicesView extends View {
+  template({ ppfx, label }) {
+    return html`
+      <div class="${ppfx}device-label">${label}</div>
+      <div class="${ppfx}field ${ppfx}select">
+        <span id="${ppfx}input-holder">
+          <select class="${ppfx}devices"></select>
+        </span>
+        <div class="${ppfx}sel-arrow">
+          <div class="${ppfx}d-s-arrow"></div>
+        </div>
       </div>
-    </div>
-    <button style="display:none" class="<%= ppfx %>add-trasp">+</button>`),
+      <button style="display:none" class="${ppfx}add-trasp">+</button>
+    `;
+  }
 
-  events: {
-    change: 'updateDevice'
-  },
+  events() {
+    return {
+      change: 'updateDevice'
+    };
+  }
 
   initialize(o) {
     this.config = o.config || {};
@@ -25,14 +30,14 @@ export default Backbone.View.extend({
     this.events['click .' + this.ppfx + 'add-trasp'] = this.startAdd;
     this.listenTo(this.em, 'change:device', this.updateSelect);
     this.delegateEvents();
-  },
+  }
 
   /**
    * Start adding new device
    * @return {[type]} [description]
    * @private
    */
-  startAdd() {},
+  startAdd() {}
 
   /**
    * Update device of the editor
@@ -45,7 +50,7 @@ export default Backbone.View.extend({
       var val = devEl ? devEl.val() : '';
       em.set('device', val);
     }
-  },
+  }
 
   /**
    * Update select value on device update
@@ -59,7 +64,7 @@ export default Backbone.View.extend({
       var name = device ? device.get('name') : '';
       devEl.val(name);
     }
-  },
+  }
 
   /**
    * Return devices options
@@ -77,19 +82,15 @@ export default Backbone.View.extend({
     });
 
     return result;
-  },
+  }
 
   render() {
     const { em, ppfx, $el, el } = this;
-    $el.html(
-      this.template({
-        ppfx,
-        deviceLabel: em && em.t && em.t('deviceManager.device')
-      })
-    );
+    const label = em && em.t && em.t('deviceManager.device');
+    $el.html(this.template({ ppfx, label }));
     this.devicesEl = $el.find(`.${ppfx}devices`);
     this.devicesEl.append(this.getOptions());
     el.className = `${ppfx}devices-c`;
     return this;
   }
-});
+}