fix import JS preview

Author: vsergione

src/web/index.html

@@ -44,7 +44,7 @@
                             <a class="dropdown-item" role="button" data-toggle="modal" data-target="#importCsvModal">Import CSV</a>
                             <a class="dropdown-item" role="button" data-toggle="modal" data-target="#importXlsModal">Import XLS</a>
                             <a class="dropdown-item" role="button" onclick="req_modal('#importZbxForm','Import data from Zabbix',req_import_from_api,sheetManager.get_active(),{attrs:{style: 'width: 500px; height: 650px !important'}},false)">Import from Zabbix</a>
-                            <a class="dropdown-item" role="button" onclick="req_modal('#importJsForm','Import from JavaScript',req_import_js,sheetManager.get_active(),{attrs:{style: 'width: 500px; height: 650px !important'}},false)">Import from JavaScript</a>
+                            <a class="dropdown-item" role="button" onclick="req_modal('#importJsForm','Import from JavaScript',req_import_js,sheetManager.get_active(),{attrs:{style: 'width: 500px; height: 650px !important'}},false,preview_req_import_js)">Import from JavaScript</a>
 
                             <div class="dropdown-divider"></div>
                             <a class="dropdown-item" role="button"  href="#" onclick="prompt_save_data()">Export to CSV</a>
@@ -229,7 +229,7 @@
                 <button onclick='' style='width: 200px !important; display: inline-block  !important;' data-toggle='modal' data-target='#importCsvModal'>Import CSV</button>
                 <button onclick='' style='width: 200px !important; display: inline-block  !important;' data-toggle='modal' data-target='#importXlsModal'>Import Excel</button>
                 <button style='width: 200px !important; display: inline-block  !important;' onclick="req_modal('#importZbxForm','Import data from Zabbix',req_import_from_api,sheetManager.get_active(),{attrs:{style: 'width: 500px; height: 650px !important'}},false)">Import from Zabbix</button>
-                <button style='width: 200px !important; display: inline-block  !important;' onclick="req_modal('#importJsForm','Import from JavaScript',req_import_js,sheetManager.get_active(),{attrs:{style: 'width: 500px; height: 650px !important'}},false)">Import from JavaScript</button>
+                <button style='width: 200px !important; display: inline-block  !important;' onclick="req_modal('#importJsForm','Import from JavaScript',req_import_js,sheetManager.get_active(),{attrs:{style: 'width: 500px; height: 650px !important'}},false,preview_req_import_js)">Import from JavaScript</button>
             </div>
         </div>
     </div>

src/web/main.js

@@ -107,6 +107,20 @@ function req_import_from_api(sheet, resource, operation, template,success=new Fu
         .finally(()=>overlay.hide())
     success();
 }
+function preview_req_import_js(editor,template) {
+    let previewEl = $(editor.container.parentNode).find(".preview");
+
+    previewEl.addClass("alert-secondary").removeClass("alert-danger").removeClass("alert-success");
+    // log(editor);
+    try {
+        let tmpFunc = eval("()=>{"+ template + "}");
+        let data = tmpFunc();
+        previewEl.removeClass("alert-secondary").children().text(data);
+        previewEl.addClass("alert-success");
+    } catch (e) {
+        previewEl.addClass("alert-danger").children().text("Invalid JS template: "+e.message)
+    }
+}
 
 function req_import_js(sheet, resource,operation,template,success=new Function()) {
 
@@ -968,7 +982,7 @@ function load_templates(event,prefix) {
  * @param dialogOpts
  * @param rowContext
  */
-function req_modal(sel,title,action,sheet,dialogOpts={},rowContext=true){
+function req_modal(sel,title,action,sheet,dialogOpts={},rowContext=true,preview=preview_request){
     let lastSavedTpl = localStorage.getItem(sel+"_tpl");
     let lastSavedRes = localStorage.getItem(sel+"_res");
     let lastSavedReqType = localStorage.getItem(sel+"_reqtype");
@@ -994,15 +1008,15 @@ function req_modal(sel,title,action,sheet,dialogOpts={},rowContext=true){
             mode: 'code', onChange: () => {
                 let tpl = editor.getText();
                 localStorage.setItem(sel+"_tpl",tpl);
-                preview_request(editor,tpl,rowContext)
+                preview(editor,tpl,rowContext)
             }
         });
 
         if(lastSavedTpl) editor.setText(lastSavedTpl);
         if(lastSavedRes) form[0].resource.value = lastSavedRes;
         if(lastSavedReqType && form[0].operation) form[0].operation.value = lastSavedReqType;
         let tpl = editor.getText();
-        preview_request(editor,tpl,rowContext);
+        preview(editor,tpl,rowContext);
         $(item).data("editor",editor)
     })
         ;