From 03f2a7befb40b90d38d623c3723a18abe481ed3f Mon Sep 17 00:00:00 2001
From: Leandro Roberto <leandroroberto.br@gmail.com>
Date: Thu, 24 Jan 2019 22:02:52 -0200
Subject: [PATCH] =?UTF-8?q?ajustes=20de=20eslint=20em=20compila=C3=A7?=
 =?UTF-8?q?=C3=A3o?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 sapl-frontend/.eslintrc.js                    |  14 +-
 sapl-frontend/package.json                    |  15 +-
 .../src/apps/compilacao/js/old/compilacao.js  | 529 +++++++++---------
 .../compilacao/js/old/compilacao_notas.js     | 243 ++++----
 .../apps/compilacao/js/old/compilacao_view.js | 155 +++--
 sapl-frontend/src/apps/compilacao/main.js     |  67 ++-
 .../src/apps/compilacao/scss/compilacao.scss  |   5 +-
 .../global/image_cropping/image_cropping.js   | 136 ++---
 .../src/global/image_cropping/index.js        |   8 +-
 sapl-frontend/src/global/jquery.runner.js     | 298 +++++-----
 sapl-frontend/src/global/main.js              |  20 +-
 sapl-frontend/src/hellow/main.js              |  12 +-
 sapl-frontend/src/hellow/router.js            |   8 +-
 sapl-frontend/src/hellow/store.js             |   6 +-
 sapl-frontend/src/hellow/views/Home.vue       |   4 +-
 sapl-frontend/vue.config.js                   |   2 +
 .../compilacao/dispositivo_form_search.html   |   2 +-
 17 files changed, 761 insertions(+), 763 deletions(-)

diff --git a/sapl-frontend/.eslintrc.js b/sapl-frontend/.eslintrc.js
index d9c7520df..36d51155e 100644
--- a/sapl-frontend/.eslintrc.js
+++ b/sapl-frontend/.eslintrc.js
@@ -1,20 +1,30 @@
 module.exports = {
   root: true,
   env: {
+    browser: true,
     node: true,
     jquery: true
   },
-  extends: ["plugin:vue/essential", "@vue/prettier"],
+  extends: [
+    "plugin:vue/essential",
+    'standard'
+    ],
   rules: {
+    'generator-star-spacing': 'off',
     "no-console": process.env.NODE_ENV === "production" ? "error" : "off",
     "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off"
   },
+  // required to lint *.vue files
+  plugins: [
+    'vue'
+  ],
   parserOptions: {
     parser: "babel-eslint"
   },
 
   globals: {
     "$": true,
-    "jQuery": true
+    "jQuery": true,
+    '_': true
   }
 };
diff --git a/sapl-frontend/package.json b/sapl-frontend/package.json
index a6929c5f2..93ba56c6d 100644
--- a/sapl-frontend/package.json
+++ b/sapl-frontend/package.json
@@ -32,13 +32,20 @@
     "@vue/cli-plugin-babel": "^3.3.0",
     "@vue/cli-plugin-eslint": "^3.3.0",
     "@vue/cli-service": "^3.3.0",
-    "@vue/eslint-config-prettier": "^4.0.1",
     "babel-eslint": "^10.0.1",
     "css-loader": "^2.1.0",
-    "eslint": "^5.8.0",
-    "eslint-plugin-vue": "^5.0.0",
     "node-sass": "^4.9.0",
     "sass-loader": "^7.0.1",
-    "vue-template-compiler": "^2.5.21"
+    "vue-template-compiler": "^2.5.21",
+
+    "eslint": "^5.12.0",
+    "eslint-config-standard": "^12.0.0",
+    "eslint-friendly-formatter": "^4.0.1",
+    "eslint-loader": "^2.1.1",
+    "eslint-plugin-import": "^2.14.0",
+    "eslint-plugin-node": "^8.0.1",
+    "eslint-plugin-promise": "^4.0.1",
+    "eslint-plugin-standard": "^4.0.0",
+    "eslint-plugin-vue": "^5.1.0"
   }
 }
diff --git a/sapl-frontend/src/apps/compilacao/js/old/compilacao.js b/sapl-frontend/src/apps/compilacao/js/old/compilacao.js
index 06712d7a8..5e363f2d3 100644
--- a/sapl-frontend/src/apps/compilacao/js/old/compilacao.js
+++ b/sapl-frontend/src/apps/compilacao/js/old/compilacao.js
@@ -1,287 +1,278 @@
-
-
-function SetCookie(cookieName,cookieValue,nDays) {
-    var today = new Date();
-    var expire = new Date();
-    if (nDays==null || nDays==0) nDays=1;
-    expire.setTime(today.getTime() + 3600000*24*nDays);
-    document.cookie = cookieName+"="+escape(cookieValue)
-    + ";expires="+expire.toGMTString();
-  }
-
-  function ReadCookie(cookieName) {
-    var theCookie=" "+document.cookie;
-    var ind=theCookie.indexOf(" "+cookieName+"=");
-    if (ind==-1) ind=theCookie.indexOf(";"+cookieName+"=");
-    if (ind==-1 || cookieName=="") return "";
-    var ind1=theCookie.indexOf(";",ind+1);
-    if (ind1==-1) ind1=theCookie.length;
-    return unescape(theCookie.substring(ind+cookieName.length+2,ind1));
-  }
-
-  function insertWaitAjax(element) {
-    //jQuery(element).append('<div style="text-align:center;"><img src="/static/img/ajax-loader.gif"></div>');
-    jQuery(element).append('<div style="text-align:center;"><i style="font-size: 200%;"class="fa fa-refresh fa-spin"></i></div>');
-  }
-
-  function DispositivoSearch(opts) {
-    $(function() {
-      let formData = {}
-      var container_ds = $('body').children("#container_ds");
-      if (container_ds.length > 0)
-        $(container_ds).remove();
-      container_ds = $('<div id="container_ds"/>');
-      $('body').prepend(container_ds);
-
-      var fields = $("[data-sapl-ta='DispositivoSearch']");
-      fields.each(function() {
-        var field = $(this);
-        var data_type_selection = field.attr('data-type-selection');
-        var data_field = field.attr('data-field');
-        var data_function = field.attr('data-function');
-
-        var onChangeFieldSelects = function(event) {
-          if (data_type_selection == 'checkbox') {
-            var tas = field.find('input[name="ta_select_all"]'); //tas - Textos Articulados
-            tas.off();
-
-            tas.on('change', function(event) {
-              $(this).closest('ul').find('input[name="'+data_field+'"]').prop("checked", this.checked);
-              //$(this).prop("checked", false);
-            });
-
-
-          }
-          else {
-            var dpts = field.find('input');
-            dpts.off()
-            dpts.attr('type', 'hidden');
-            $('<a class="text-danger">')
-              .insertBefore(dpts)
-              .append($('<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>'))
-              .on('click', function() {
-                if ($(this).closest('ul').find('li').length == 2)
-                  $(this).closest('ul').remove();
-                else
-                  $(this).closest('li').remove();
-              });
-          }
+function SetCookie (cookieName, cookieValue, nDays) {
+  let today = new Date()
+  let expire = new Date()
+  if (nDays === null || nDays === 0) nDays = 1
+  expire.setTime(today.getTime() + 3600000 * 24 * nDays)
+  document.cookie = cookieName + '=' + escape(cookieValue) +
+    ';expires=' + expire.toGMTString()
+}
+
+function ReadCookie (cookieName) {
+  let theCookie = ' ' + document.cookie
+  let ind = theCookie.indexOf(' ' + cookieName + '=')
+  if (ind === -1) ind = theCookie.indexOf(';' + cookieName + '=')
+  if (ind === -1 || cookieName === '') return ''
+  let ind1 = theCookie.indexOf(';', ind + 1)
+  if (ind1 === -1) ind1 = theCookie.length
+  return unescape(theCookie.substring(ind + cookieName.length + 2, ind1))
+}
+
+function insertWaitAjax (element) {
+  // jQuery(element).append('<div style="text-align:center;'><img src="/static/img/ajax-loader.gif'></div>')
+  jQuery(element).append('<div style="text-align:center;"><i style="font-size: 200%;" class="fa fa-refresh fa-spin"></i></div>')
+}
+
+function DispositivoSearch (opts) {
+  $(function () {
+    let formData = {}
+    let containerDs = $('body').children('#container_ds')
+    if (containerDs.length > 0) {
+      $(containerDs).remove()
+    }
+    containerDs = $('<div id="container_ds"/>')
+    $('body').prepend(containerDs)
+
+    let fields = $('[data-sapl-ta="DispositivoSearch"]')
+    fields.each(function () {
+      let field = $(this)
+      let dataTypeSelection = field.attr('data-type-selection')
+      let dataField = field.attr('data-field')
+      let dataFunction = field.attr('data-function')
+
+      let onChangeFieldSelects = function (event) {
+        if (dataTypeSelection === 'checkbox') {
+          let tas = field.find('input[name="ta_select_all"]') // tas - Textos Articulados
+          tas.off()
+
+          tas.on('change', function (event) {
+            $(this).closest('ul').find('input[name="' + dataField + '"]').prop('checked', this.checked)
+            // $(this).prop('checked', false)
+          })
+        } else {
+          let dpts = field.find('input')
+          dpts.off()
+          dpts.attr('type', 'hidden')
+          $('<a class="text-danger">')
+            .insertBefore(dpts)
+            .append($('<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>'))
+            .on('click', function () {
+              if ($(this).closest('ul').find('li').length === 2) {
+                $(this).closest('ul').remove()
+              } else {
+                $(this).closest('li').remove()
+              }
+            })
         }
-        onChangeFieldSelects();
-
-        var onChangeParamTA = function(event) {
-
-          var tipo_ta = $("select[name='tipo_ta']").val();
-          var tipo_model = $("select[name='tipo_model']").val();
-          var num_ta = $("input[name='num_ta']").val();
-          var ano_ta = $("input[name='ano_ta']").val();
-          var dispositivos_internos = $("input[name='dispositivos_internos']:checked").val();
-          var rotulo_dispositivo = $("input[name='rotulo_dispositivo']").val();
-          var texto_dispositivo = $("input[name='texto_dispositivo']").val();
-          var max_results = $("select[name='max_results']").val();
-          var url = '';
-
-          if (rotulo_dispositivo.length > 0 || texto_dispositivo.length > 0) {
-            $("input[name='dispositivos_internos']").prop('disabled', false);
-            $("input[name='dispositivos_internos']").each((idx, element) => {
-              element.parentElement.classList.remove('disabled')
-            });          
-            $("input[name='dispositivos_internos']").closest('#div_id_dispositivos_internos').css('opacity','1');
-          }
-          else {
-            $("input[name='dispositivos_internos']").filter('[value="False"]').prop('checked', true);
-            $("input[name='dispositivos_internos']").prop('disabled', true);
-
-            $("input[name='dispositivos_internos']").each((idx, element) => {
-              element.parentElement.classList.add('disabled')
-            });          
-            $("input[name='dispositivos_internos']").closest('#div_id_dispositivos_internos').css('opacity','0.3');
-            dispositivos_internos = 'False';
-          }
-          formData = {
-            'tipo_ta'         : tipo_ta,
-            'tipo_model'      : tipo_model,
-            'num_ta'        : num_ta,
-            'ano_ta'        : ano_ta,
-            'texto'         : texto_dispositivo,
-            'rotulo'        : rotulo_dispositivo,
-            'dispositivos_internos' : dispositivos_internos,
-            'max_results'       : max_results,
-            'data_type_selection'   : data_type_selection,
-            'data_field'      : data_field,
-            'data_function'     : data_function,
-          };
-
-          window.localStorage.setItem("dispositivo_search_form_data", JSON.stringify(formData))
-
-
-          url = '/ta/search_fragment_form';
-          $('.result-busca-dispositivo').html('');
-          insertWaitAjax('.result-busca-dispositivo')
-          $.get(url, formData).done(function( data ) {
-            $('.result-busca-dispositivo').html(data);
-            //OptionalCustomFrontEnd().init();
-            if (data_type_selection == 'checkbox') {
-              var tas = $('.result-busca-dispositivo').find('input[name="ta_select_all"]');
-              tas.off();
-              tas.on('change', function(event) {
-                $(this).closest('ul').find('input[name="'+data_field+'"]').prop("checked", this.checked);
-              });
-            }
+      }
+      onChangeFieldSelects()
+
+      let onChangeParamTA = function (event) {
+        let tipoTa = $('select[name="tipo_ta"]').val()
+        let tipoModel = $('select[name="tipo_model"]').val()
+        let numTa = $('input[name="num_ta"]').val()
+        let anoTa = $('input[name="ano_ta"]').val()
+        let dispositivosInternos = $('input[name="dispositivos_internos"]:checked').val()
+        let rotuloDispositivo = $('input[name="rotulo_dispositivo"]').val()
+        let textoDispositivo = $('input[name="texto_dispositivo"]').val()
+        let maxResults = $('select[name="max_results"]').val()
+        let url = ''
+
+        if (rotuloDispositivo.length > 0 || textoDispositivo.length > 0) {
+          $('input[name="dispositivos_internos"]').prop('disabled', false)
+          $('input[name="dispositivos_internos"]').each((idx, element) => {
+            element.parentElement.classList.remove('disabled')
+          })
+          $('input[name="dispositivos_internos"]').closest('#div_id_dispositivos_internos').css('opacity', '1')
+        } else {
+          $('input[name="dispositivos_internos"]').filter('[value="False"]').prop('checked', true)
+          $('input[name="dispositivos_internos"]').prop('disabled', true)
 
-          });
+          $('input[name="dispositivos_internos"]').each((idx, element) => {
+            element.parentElement.classList.add('disabled')
+          })
+          $('input[name="dispositivos_internos"]').closest('#div_id_dispositivos_internos').css('opacity', '0.3')
+          dispositivosInternos = 'False'
+        }
+        formData = {
+          'tipo_ta': tipoTa,
+          'tipo_model': tipoModel,
+          'num_ta': numTa,
+          'ano_ta': anoTa,
+          'texto': textoDispositivo,
+          'rotulo': rotuloDispositivo,
+          'dispositivos_internos': dispositivosInternos,
+          'max_results': maxResults,
+          'data_type_selection': dataTypeSelection,
+          'data_field': dataField,
+          'data_function': dataFunction
         }
 
-        var onKeyPressRotuloBuscaTextual = function(event) {
-          var rotulo_dispositivo = $("input[name='rotulo_dispositivo']").val();
-          var texto_dispositivo = $("input[name='texto_dispositivo']").val();
-          var dispositivos_internos = $("input[name='dispositivos_internos']:checked").val();
-
-          if (rotulo_dispositivo.length > 0 || texto_dispositivo.length > 0) {
-            $("input[name='dispositivos_internos']").prop('disabled', false);
-            $("input[name='dispositivos_internos']").each((idx, element) => {
-              element.parentElement.classList.remove('disabled')
-            });    
-            $("input[name='dispositivos_internos']").closest('#div_id_dispositivos_internos').css('opacity','1');
-          }
-          else {
-            $("input[name='dispositivos_internos']").filter('[value="False"]').prop('checked', true);
-            $("input[name='dispositivos_internos']").prop('disabled', true);
-            $("input[name='dispositivos_internos']").each((idx, element) => {
-              element.parentElement.classList.add('disabled')
-            });    
-            $("input[name='dispositivos_internos']").closest('#div_id_dispositivos_internos').css('opacity','0.3');
-            dispositivos_internos = 'False';
+        window.localStorage.setItem('dispositivo_search_form_data', JSON.stringify(formData))
+
+        url = '/ta/search_fragment_form'
+        $('.result-busca-dispositivo').html('')
+        insertWaitAjax('.result-busca-dispositivo')
+        $.get(url, formData).done(function (data) {
+          $('.result-busca-dispositivo').html(data)
+          // OptionalCustomFrontEnd().init()
+          if (dataTypeSelection === 'checkbox') {
+            let tas = $('.result-busca-dispositivo').find('input[name="ta_select_all"]')
+            tas.off()
+            tas.on('change', function (event) {
+              $(this).closest('ul').find('input[name="' + dataField + '"]').prop('checked', this.checked)
+            })
           }
+        })
+      }
+
+      let onKeyPressRotuloBuscaTextual = function (event) {
+        let rotuloDispositivo = $('input[name="rotulo_dispositivo"]').val()
+        let textoDispositivo = $('input[name="texto_dispositivo"]').val()
+        // let dispositivosInternos = $('input[name="dispositivos_internos"]:checked').val()
+
+        if (rotuloDispositivo.length > 0 || textoDispositivo.length > 0) {
+          $('input[name="dispositivos_internos"]').prop('disabled', false)
+          $('input[name="dispositivos_internos"]').each((idx, element) => {
+            element.parentElement.classList.remove('disabled')
+          })
+          $('input[name="dispositivos_internos"]').closest('#div_id_dispositivos_internos').css('opacity', '1')
+        } else {
+          $('input[name="dispositivos_internos"]').filter('[value="False"]').prop('checked', true)
+          $('input[name="dispositivos_internos"]').prop('disabled', true)
+          $('input[name="dispositivos_internos"]').each((idx, element) => {
+            element.parentElement.classList.add('disabled')
+          })
+          $('input[name="dispositivos_internos"]').closest('#div_id_dispositivos_internos').css('opacity', '0.3')
+          // dispositivosInternos = 'False'
         }
-
-        var button_ds = field.children("#button_ds");
-        if (button_ds.length > 0)
-          $(button_ds).remove();
-        button_ds = $('<div id="button_ds" class="clearfix"/>');
-        field.prepend(button_ds);
-
-        var btn_open_search = $('<button>')
-          .text(opts['text_button'])
-          .attr('type','button')
-          .attr('class','btn btn-sm btn-success btn-modal-open');
-        button_ds.append(btn_open_search);
-        btn_open_search.on('click', function() {
-          $.get(opts['url_form'], function(data) {
-            container_ds.html(data);
-            var modal_ds = $('#modal-ds');
-            //OptionalCustomFrontEnd().init();
-
-            modal_ds.find("select[name='tipo_ta']").change(function(event) {
-              var url = '';
-              url = '/ta/search_fragment_form?action=get_tipos&tipo_ta='+this.value;
-              modal_ds.find("label[for='id_tipo_model']").html('Tipos de ' + this.children[this.selectedIndex].innerHTML);
-
-              var select = modal_ds.find("select[name='tipo_model']");
-              select.empty();
-              $('<option value="">Carregando...</option>').appendTo(select);
-
-              $.get(url).done(function( data ) {
-                select.empty();
-                for(var item in data) {
-                  for (var i in data[item])
-                    select.append($("<option>").attr('value',i).text(data[item][i]));
-                }
-                setTimeout(function() {
-                  $("select[name='tipo_model']").val(formData.tipo_model);
-                }, 200)
-                //select.change(onChangeParamTA)
-              });
-            });
-
-            /*modal_ds.find("input[name='num_ta'], "
-              +"input[name='ano_ta'], "
-              +"select[name='tipo_model'], "
-              +"input[name='texto_dispositivo'], "
-              +"input[name='dispositivos_internos'], "
-              +"input[name='rotulo_dispositivo']"
-            ).change(onChangeParamTA);*/
-            modal_ds.find("input[name='texto_dispositivo'], "
-              +"input[name='rotulo_dispositivo']")
-              .on('keyup', onKeyPressRotuloBuscaTextual)
-
-            modal_ds.find(".btn-busca").click(onChangeParamTA);
-
-            modal_ds.find("#btn-modal-select").click(function() {
-              // limpar selecionados se o tipo é radio
-              var listas = field.find('ul');
-              if (data_type_selection == 'radio')
-                listas.remove();
-
-              // adicionar itens selecionados na caixa modal
-              var selecionados = modal_ds.find('[name="'+data_field+'"]:checked');
-
-              // com base nos selecionados, limpa seus ta's removendo os não selecionados
-              selecionados.closest('ul').find('input:not(:checked)').filter('[name!="ta_select_all"]').closest('li').remove();
-
-              selecionados.closest('ul').each(function() {
-                //insere na lista de selecionados os ta's não presentes
-                var ul_lista = field.find('#'+this.id);
-                if (ul_lista.length == 0) {
-                  field.append(this);
-                  return;
+      }
+
+      let buttonDs = field.children('#buttonDs')
+      if (buttonDs.length > 0) {
+        $(buttonDs).remove()
+      }
+      buttonDs = $('<div id="buttonDs" class="clearfix"/>')
+      field.prepend(buttonDs)
+
+      let btnOpenSearch = $('<button>')
+        .text(opts['text_button'])
+        .attr('type', 'button')
+        .attr('class', 'btn btn-sm btn-success btn-modal-open')
+      buttonDs.append(btnOpenSearch)
+      btnOpenSearch.on('click', function () {
+        $.get(opts['url_form'], function (data) {
+          containerDs.html(data)
+          let modalDs = $('#modal-ds')
+          // OptionalCustomFrontEnd().init()
+
+          modalDs.find('select[name="tipo_ta"]').change(function (event) {
+            let url = ''
+            url = '/ta/search_fragment_form?action=get_tipos&tipo_ta=' + this.value
+            modalDs.find('label[for="id_tipo_model"]').html('Tipos de ' + this.children[this.selectedIndex].innerHTML)
+
+            let select = modalDs.find('select[name="tipo_model"]')
+            select.empty()
+            $('<option value="">Carregando...</option>').appendTo(select)
+
+            $.get(url).done(function (data) {
+              select.empty()
+              for (let item in data) {
+                for (let i in data[item]) {
+                  select.append($('<option>').attr('value', i).text(data[item][i]))
                 }
+              }
+              setTimeout(function () {
+                $('select[name="tipo_model"]').val(formData.tipo_model)
+              }, 200)
+              // select.change(onChangeParamTA)
+            })
+          })
 
-                //insere os dispositivos não presentes
-                var inputs_for_this = $(this).find('input');
+          /* modalDs.find('input[name="num_ta"], '
+            +'input[name="ano_ta"], '
+            +'select[name="tipo_model"], '
+            +'input[name="texto_dispositivo"], '
+            +'input[name="dispositivos_internos"], '
+            +'input[name="rotulo_dispositivo"]'
+          ).change(onChangeParamTA); */
+          modalDs.find('input[name="texto_dispositivo"], ' +
+              'input[name="rotulo_dispositivo"]')
+            .on('keyup', onKeyPressRotuloBuscaTextual)
+
+          modalDs.find('.btn-busca').click(onChangeParamTA)
+
+          modalDs.find('#btn-modal-select').click(function () {
+            // limpar selecionados se o tipo é radio
+            let listas = field.find('ul')
+            if (dataTypeSelection === 'radio') {
+              listas.remove()
+            }
+            // adicionar itens selecionados na caixa modal
+            let selecionados = modalDs.find('[name="' + dataField + '"]:checked')
+
+            // com base nos selecionados, limpa seus ta's removendo os não selecionados
+            selecionados.closest('ul').find('input:not(:checked)').filter('[name!="ta_select_all"]').closest('li').remove()
+
+            selecionados.closest('ul').each(function () {
+              // insere na lista de selecionados os ta's não presentes
+              let ulLista = field.find('#' + this.id)
+              if (ulLista.length === 0) {
+                field.append(this)
+                return
+              }
 
-                inputs_for_this.each(function() {
-                  if (ul_lista.find("#"+this.id).length > 0)
-                    return;
-                  ul_lista.append($(this).closest('li'));
-                });
-              });
+              // insere os dispositivos não presentes
+              let inputForThis = $(this).find('input')
 
-              onChangeFieldSelects();
+              inputForThis.each(function () {
+                if (ulLista.find('#' + this.id).length > 0) {
+                  return
+                }
+                ulLista.append($(this).closest('li'))
+              })
+            })
 
-              modal_ds.modal('hide');
+            onChangeFieldSelects()
 
-              if ('post_selected' in opts)
-                opts['post_selected'](opts['params_post_selected'])
+            modalDs.modal('hide')
 
-            });
+            if ('post_selected' in opts) {
+              opts['post_selected'](opts['params_post_selected'])
+            }
+          })
 
+          try {
+            formData = JSON.parse(window.localStorage.getItem('dispositivo_search_form_data'))
+            $('input[name="num_ta"]').val(formData.num_ta)
+            $('input[name="ano_ta"]').val(formData.ano_ta)
+            $('input[name="rotulo_dispositivo"]').val(formData.rotulo)
+            $('input[name="texto_dispositivo"]').val(formData.texto)
+            $('select[name="max_results"]').val(formData.max_results)
+          } catch (e) {
+            console.log(e)
+          }
 
+          setTimeout(function () {
             try {
-              formData = JSON.parse(window.localStorage.getItem("dispositivo_search_form_data"))
-              $("input[name='num_ta']").val(formData.num_ta);
-              $("input[name='ano_ta']").val(formData.ano_ta);
-              $("input[name='rotulo_dispositivo']").val(formData.rotulo);
-              $("input[name='texto_dispositivo']").val(formData.texto);
-              $("select[name='max_results']").val(formData.max_results);
+              $('select[name="tipo_ta"]').val(formData.tipo_ta)
+              $('select[name="tipo_ta"]').trigger('change')
+              // modalDs.find('.btn-busca').trigger('click')
+              // onChangeParamTA()
             } catch (e) {
-
+              console.log(e)
             }
-
-            setTimeout(function() {
-              try {
-                $("select[name='tipo_ta']").val(formData.tipo_ta);
-                $("select[name='tipo_ta']").trigger('change')
-                //modal_ds.find(".btn-busca").trigger('click')
-                //onChangeParamTA();
-              } catch (e) {
-    
-              }
-    
-            }, 200)
-
-            modal_ds.modal('show');
-            
-          })
-        });
-      });
-    });
-  }
-
-
-  export default {
-      SetCookie,
-      ReadCookie,
-      insertWaitAjax,
-      DispositivoSearch
-  }
\ No newline at end of file
+          }, 200)
+
+          modalDs.modal('show')
+        })
+      })
+    })
+  })
+}
+
+export default {
+  SetCookie,
+  ReadCookie,
+  insertWaitAjax,
+  DispositivoSearch
+}
diff --git a/sapl-frontend/src/apps/compilacao/js/old/compilacao_notas.js b/sapl-frontend/src/apps/compilacao/js/old/compilacao_notas.js
index 85ad2b1ac..ee0a33947 100644
--- a/sapl-frontend/src/apps/compilacao/js/old/compilacao_notas.js
+++ b/sapl-frontend/src/apps/compilacao/js/old/compilacao_notas.js
@@ -1,145 +1,134 @@
 
-function onEventsDneExec(pk, model) {
-
-    $('html, body').animate({
-        scrollTop: $('#dne' + pk ).offset().top - window.innerHeight / 5
-    }, 300);
-
-    refreshDatePicker();
-
-    $('#dne'+pk+" #button-id-submit-form").click(onSubmitEditNVForm);
-    $('#dne'+pk+" .btn-close-container").click(function(){
-        $(this).closest('.dne-nota').removeClass('dne-nota');
-        $(this).closest('.dne-form').html('');
-    });
-
-    if (model == 'nota') {
-        $('#dne'+pk+" select[name='tipo']").change(function(event) {
-            var url = '';
-            url = 'text/'+pk+'/nota/create?action=modelo_nota&id_tipo='+this.value;
-            $.get(url).done(function( data ) {
-                $('#dne'+pk+" textarea[name='texto']").val(data);
-            });
-        });
-    }
-    else if (model == 'vide') {
-
-        DispositivoSearch({
-          'url_form': '/ta/search_form',
-          'text_button': 'Definir Dispositivo'
-        });
-    }
+function onEventsDneExec (pk, model) {
+  $('html, body').animate({
+    scrollTop: $('#dne' + pk).offset().top - window.innerHeight / 5
+  }, 300)
+
+  window.refreshDatePicker()
+
+  $('#dne' + pk + ' #button-id-submit-form').click(onSubmitEditNVForm)
+  $('#dne' + pk + ' .btn-close-container').click(function () {
+    $(this).closest('.dne-nota').removeClass('dne-nota')
+    $(this).closest('.dne-form').html('')
+  })
+
+  if (model === 'nota') {
+    $('#dne' + pk + ' select[name="tipo"]').change(function (event) {
+      let url = ''
+      url = 'text/' + pk + '/nota/create?action=modelo_nota&id_tipo=' + this.value
+      $.get(url).done(function (data) {
+        $('#dne' + pk + ' textarea[name="texto"]').val(data)
+      })
+    })
+  } else if (model === 'vide') {
+    window.DispositivoSearch({
+      'url_form': '/ta/search_form',
+      'text_button': 'Definir Dispositivo'
+    })
+  }
 }
 
-function onSubmitEditNVForm(event) {
-
-    var url = '';
-    var model = 'nota';
-    var id_edit = null;
-    var id_dispositivo = $('#id_dispositivo').val();
-
-    if (id_dispositivo == null) { // trata-se de um vide
-        //$('#id_dispositivo_ref').remove();
-        id_dispositivo = $('#id_dispositivo_base').val();
-        model='vide';
-    }
-
-    id_edit = $('#id_pk').val();
-    url = 'text/'+id_dispositivo+'/'+model+'/'
-    if (id_edit == null || id_edit == '')
-        url += 'create';
-    else
-        url += id_edit+'/edit';
-
-    console.log($('#dne'+id_dispositivo+" form").serialize());
-
-    $.post( url, $('#dne'+id_dispositivo+" form").serialize(), function(data) {
-
-            if (typeof data == "string") {
-                if (data.indexOf('<form') >= 0) {
-                    $('#dne'+id_dispositivo+' .dne-form').html(data);
-                    onEventsDneExec(id_dispositivo, model);
-                }
-                else {
-                    $('#dne'+id_dispositivo+' .dne-form').closest('.dpt').html(data)
-                    onReadyNotasVides();
-                    try {
-                        $('html, body').animate({
-                        scrollTop: $('#dne' + id_dispositivo ).offset().top - window.innerHeight / 3
-                        }, 300);
-                    }
-                    catch(err) {
-                    }
-                }
-            }
+function onSubmitEditNVForm (event) {
+  let url = ''
+  let model = 'nota'
+  let idEdit = null
+  let idDispositivo = $('#idDispositivo').val()
+
+  if (idDispositivo === null) { // trata-se de um vide
+    // $('#idDispositivo_ref').remove()
+    idDispositivo = $('#idDispositivo_base').val()
+    model = 'vide'
+  }
+
+  idEdit = $('#id_pk').val()
+  url = 'text/' + idDispositivo + '/' + model + '/'
+  if (idEdit === null || idEdit === '') {
+    url += 'create'
+  } else {
+    url += idEdit + '/edit'
+  }
+
+  console.log($('#dne' + idDispositivo + ' form').serialize())
+
+  $.post(url, $('#dne' + idDispositivo + ' form').serialize(), function (data) {
+    if (typeof data === 'string') {
+      if (data.indexOf('<form') >= 0) {
+        $('#dne' + idDispositivo + ' .dne-form').html(data)
+        onEventsDneExec(idDispositivo, model)
+      } else {
+        $('#dne' + idDispositivo + ' .dne-form').closest('.dpt').html(data)
+        onReadyNotasVides()
+        try {
+          $('html, body').animate({
+            scrollTop: $('#dne' + idDispositivo).offset().top - window.innerHeight / 3
+          }, 300)
+        } catch (err) {
         }
-    );
+      }
+    }
+  })
 }
-function onDelete(event) {
 
-    var model = $(event).attr('model');
+function onDelete (event) {
+  let model = $(event).attr('model')
 
-    var id_dispositivo =  $(event).closest('.dn').attr('pk');
-    var id_delete = $(event).attr('pk');
-    var url = 'text/'+id_dispositivo+'/'+model+'/'+id_delete+'/delete';
+  let idDispositivo = $(event).closest('.dn').attr('pk')
+  let idDelete = $(event).attr('pk')
+  let url = 'text/' + idDispositivo + '/' + model + '/' + idDelete + '/delete'
 
-    $.get( url, function(data) {
-        $('#dne'+id_dispositivo+' .dne-form').closest('.dpt').html(data)
-        onReadyNotasVides();
-        }
-    );
+  $.get(url, function (data) {
+    $('#dne' + idDispositivo + ' .dne-form').closest('.dpt').html(data)
+    onReadyNotasVides()
+  })
 }
 
-function getForm(_this) {
-
-    var url = '';
-    var model = $(_this).attr('model');
-    var id_dispositivo = $('.dne-nota .dne-form').closest('.dne').attr('pk');
-    if (id_dispositivo != null) {
-        $('#dne'+id_dispositivo).removeClass('dne-nota');
-        $('#dne'+id_dispositivo+' .dne-form').html('');
-    }
-
-    if (_this.className.indexOf('create') >= 0 ) {
-        id_dispositivo = $(_this).attr('pk');
-        url = 'text/'+id_dispositivo+'/'+model+'/create';
-    }
-    else if (_this.className.indexOf('edit') >= 0 ) {
-        var id_edit = $(_this).attr('pk');
-        id_dispositivo = $(_this).closest('.dn').attr('pk');
-        url = 'text/'+id_dispositivo+'/'+model+'/'+id_edit+'/edit'
-    }
-
-    $('#dne'+id_dispositivo).addClass('dne-nota');
-
-    $.get(url).done(function( data ) {
-        $('#dne'+id_dispositivo+' .dne-form').html(data);
-        onEventsDneExec(id_dispositivo, model);
-    }).fail(function() {
-        onReadyNotasVides();
-    });
+function getForm (_this) {
+  let url = ''
+  let model = $(_this).attr('model')
+  let idDispositivo = $('.dne-nota .dne-form').closest('.dne').attr('pk')
+  if (idDispositivo != null) {
+    $('#dne' + idDispositivo).removeClass('dne-nota')
+    $('#dne' + idDispositivo + ' .dne-form').html('')
+  }
+
+  if (_this.className.indexOf('create') >= 0) {
+    idDispositivo = $(_this).attr('pk')
+    url = 'text/' + idDispositivo + '/' + model + '/create'
+  } else if (_this.className.indexOf('edit') >= 0) {
+    let idEdit = $(_this).attr('pk')
+    idDispositivo = $(_this).closest('.dn').attr('pk')
+    url = 'text/' + idDispositivo + '/' + model + '/' + idEdit + '/edit'
+  }
+
+  $('#dne' + idDispositivo).addClass('dne-nota')
+
+  $.get(url).done(function (data) {
+    $('#dne' + idDispositivo + ' .dne-form').html(data)
+    onEventsDneExec(idDispositivo, model)
+  }).fail(function () {
+    onReadyNotasVides()
+  })
 }
 
-function onReadyNotasVides() {
+function onReadyNotasVides () {
+  $('.dne-nota').removeClass('dne-nota')
+  $('.dne-form').html('')
 
-    $('.dne-nota').removeClass('dne-nota');
-    $('.dne-form').html('');
+  $('.dne .btn-action').off()
+  $('.dn .btn-action').off()
 
-    $('.dne .btn-action').off();
-    $('.dn .btn-action').off();
+  $('.dne .btn-action, .dn .btn-action').not('.btn-nota-delete').not('.btn-vide-delete').click(function () {
+    getForm(this)
+  })
 
-    $('.dne .btn-action, .dn .btn-action').not('.btn-nota-delete').not('.btn-vide-delete').click(function(){
-        getForm(this);
-    });
-
-    $('.dn .btn-nota-delete, .dn .btn-vide-delete').click(function(){
-        onDelete(this);
-    });
+  $('.dn .btn-nota-delete, .dn .btn-vide-delete').click(function () {
+    onDelete(this)
+  })
 }
 
 export default {
-    onEventsDneExec,
-    onSubmitEditNVForm,
-    onDelete,
-    onReadyNotasVides
-}
\ No newline at end of file
+  onEventsDneExec,
+  onSubmitEditNVForm,
+  onDelete,
+  onReadyNotasVides
+}
diff --git a/sapl-frontend/src/apps/compilacao/js/old/compilacao_view.js b/sapl-frontend/src/apps/compilacao/js/old/compilacao_view.js
index 53200ac97..60dfd8e72 100644
--- a/sapl-frontend/src/apps/compilacao/js/old/compilacao_view.js
+++ b/sapl-frontend/src/apps/compilacao/js/old/compilacao_view.js
@@ -1,11 +1,11 @@
-let JsDiff = require("diff");
+let JsDiff = require('diff')
 
-function isElementInViewport(el) {
-  if (typeof jQuery === "function" && el instanceof jQuery) {
-    el = el[0];
+function isElementInViewport (el) {
+  if (typeof jQuery === 'function' && el instanceof jQuery) {
+    el = el[0]
   }
 
-  var rect = el.getBoundingClientRect();
+  let rect = el.getBoundingClientRect()
 
   return (
     rect.top >= 0 &&
@@ -13,92 +13,91 @@ function isElementInViewport(el) {
     rect.bottom <=
       (window.innerHeight || document.documentElement.clientHeight) &&
     rect.right <= (window.innerWidth || document.documentElement.clientWidth)
-  );
+  )
 }
 
-function textoMultiVigente(item, diff) {
-  var elv = null;
-  var ldpts = $(".dptt");
-  for (var i = 0; i < ldpts.length; i++) {
-    if ($(ldpts[i]).hasClass("displaynone")) continue;
+function textoMultiVigente (item, diff) {
+  let elv = null
+  let ldpts = $('.dptt')
+  for (let i = 0; i < ldpts.length; i++) {
+    if ($(ldpts[i]).hasClass('displaynone')) continue
     if (isElementInViewport(ldpts[i])) {
-      if (i + 1 < ldpts.length) elv = ldpts[i + 1];
+      if (i + 1 < ldpts.length) elv = ldpts[i + 1]
       else {
-        elv = ldpts[i];
+        elv = ldpts[i]
       }
-      break;
+      break
     }
   }
 
-  $(".cp .tipo-vigencias a").removeClass("selected");
-  $(item).addClass("selected");
-  $(".dptt.desativado").removeClass("displaynone");
-  $(".dtxt").removeClass("displaynone");
-  $(".dtxt.diff").remove();
-  $(".nota-alteracao").removeClass("displaynone");
+  $('.cp .tipo-vigencias a').removeClass('selected')
+  $(item).addClass('selected')
+  $('.dptt.desativado').removeClass('displaynone')
+  $('.dtxt').removeClass('displaynone')
+  $('.dtxt.diff').remove()
+  $('.nota-alteracao').removeClass('displaynone')
 
   if (diff) {
-    $(".dtxt[id^='da'").each(function() {
-      if (
-        $(this)
-          .html()
-          .search(/<\/\w+>/g) > 0
-      )
-        return;
+    $('.dtxt[id^="da"').each(function () {
+      if ($(this)
+        .html()
+        .search(/<\/\w+>/g) > 0) {
+        return
+      }
 
-      var pk = $(this).attr("pk");
-      var pks = $(this).attr("pks");
+      let pk = $(this).attr('pk')
+      let pks = $(this).attr('pks')
 
-      var a = $("#d" + pks)
+      let a = $('#d' + pks)
         .contents()
-        .filter(function() {
-          return this.nodeType === Node.TEXT_NODE;
-        });
-      var b = $("#da" + pk)
+        .filter(function () {
+          return this.nodeType === Node.TEXT_NODE
+        })
+      let b = $('#da' + pk)
         .contents()
-        .filter(function() {
-          return this.nodeType === Node.TEXT_NODE;
-        });
+        .filter(function () {
+          return this.nodeType === Node.TEXT_NODE
+        })
 
-      var diff = JsDiff.diffWordsWithSpace($(a).text(), $(b).text());
+      let diff = JsDiff.diffWordsWithSpace($(a).text(), $(b).text())
 
       if (diff.length > 0) {
-        $("#d" + pks)
-          .closest(".desativado")
-          .addClass("displaynone");
+        $('#d' + pks)
+          .closest('.desativado')
+          .addClass('displaynone')
 
-        var clone = $("#da" + pk).clone();
-        $("#da" + pk).after(clone);
-        $("#da" + pk).addClass("displaynone");
+        let clone = $('#da' + pk).clone()
+        $('#da' + pk).after(clone)
+        $('#da' + pk).addClass('displaynone')
         $(clone)
-          .addClass("diff")
-          .html("");
+          .addClass('diff')
+          .html('')
 
-        diff.forEach(function(part) {
-          //var color = part.added ? "#018" : part.removed ? "#faa" : "";
+        diff.forEach(function (part) {
+          // let color = part.added ? '#018' : part.removed ? '#faa' : ''
 
-          var span = document.createElement("span");
+          let span = document.createElement('span')
 
-          var value = part.value;
+          let value = part.value
 
           if (part.removed) {
-            $(span).addClass("desativado");
-            value += " ";
+            $(span).addClass('desativado')
+            value += ' '
           } else if (part.added) {
-            $(span).addClass("added");
+            $(span).addClass('added')
           }
 
-          span.appendChild(document.createTextNode(value));
-          $(clone).append(span);
-        });
+          span.appendChild(document.createTextNode(value))
+          $(clone).append(span)
+        })
       }
-    });
-    //textoVigente(item, true);
+    })
+    // textoVigente(item, true)
   }
 
   if (elv) {
     try {
-      $("html, body").animate(
+      $('html, body').animate(
         {
           scrollTop:
             $(elv)
@@ -106,37 +105,37 @@ function textoMultiVigente(item, diff) {
               .offset().top - 60
         },
         0
-      );
+      )
     } catch (err) {
-      console.log(err);
+      console.log(err)
     }
   }
 }
 
-function textoVigente(item, link) {
-  var elv = null;
-  var ldpts = $(".dptt");
-  for (var i = 0; i < ldpts.length; i++) {
-    if ($(ldpts[i]).hasClass("displaynone")) continue;
+function textoVigente (item, link) {
+  let elv = null
+  let ldpts = $('.dptt')
+  for (let i = 0; i < ldpts.length; i++) {
+    if ($(ldpts[i]).hasClass('displaynone')) continue
     if (isElementInViewport(ldpts[i])) {
-      if (i + 1 < ldpts.length) elv = ldpts[i + 1];
+      if (i + 1 < ldpts.length) elv = ldpts[i + 1]
       else {
-        elv = ldpts[i];
+        elv = ldpts[i]
       }
-      break;
+      break
     }
   }
 
-  $(".cp .tipo-vigencias a").removeClass("selected");
-  $(item).addClass("selected");
+  $('.cp .tipo-vigencias a').removeClass('selected')
+  $(item).addClass('selected')
 
-  $(".dptt.desativado").addClass("displaynone");
-  $(".nota-alteracao").removeClass("displaynone");
-  if (!link) $(".nota-alteracao").addClass("displaynone");
+  $('.dptt.desativado').addClass('displaynone')
+  $('.nota-alteracao').removeClass('displaynone')
+  if (!link) $('.nota-alteracao').addClass('displaynone')
 
   if (elv) {
     try {
-      $("html, body").animate(
+      $('html, body').animate(
         {
           scrollTop:
             $(elv)
@@ -144,9 +143,9 @@ function textoVigente(item, link) {
               .offset().top - 60
         },
         0
-      );
+      )
     } catch (err) {
-      console.log(err);
+      console.log(err)
     }
   }
 }
@@ -155,4 +154,4 @@ export default {
   isElementInViewport,
   textoMultiVigente,
   textoVigente
-};
+}
diff --git a/sapl-frontend/src/apps/compilacao/main.js b/sapl-frontend/src/apps/compilacao/main.js
index a7b8d5bd4..3dad801f3 100644
--- a/sapl-frontend/src/apps/compilacao/main.js
+++ b/sapl-frontend/src/apps/compilacao/main.js
@@ -1,50 +1,47 @@
 // TODO: migrar compilacao para VueJs
 
-import "./scss/compilacao.scss";
+import './scss/compilacao.scss'
 
-import compilacao from "./js/old/compilacao";
-import compilacao_view from "./js/old/compilacao_view";
-import compilacao_notas from "./js/old/compilacao_notas";
-import _ from "lodash";
+import 'bootstrap'
 
+import compilacao from './js/old/compilacao'
+import compilacaoView from './js/old/compilacao_view'
+import compilacaoNotas from './js/old/compilacao_notas'
 
+// import './js/compilacao_edit'
 
-//import "./js/compilacao_edit";
+_.forEach(_.merge(_.merge(compilacao, compilacaoNotas), compilacaoView), function (func, key) {
+  window[key] = func
+})
 
-_.forEach(_.merge(_.merge(compilacao, compilacao_notas),compilacao_view), function(func, key) {
-  window[key] = func;
-});
-
-$(document).ready(function() {
-  setTimeout(function() {
-    var href = location.href.split("#");
-    if (href.length == 2) {
+$(document).ready(function () {
+  setTimeout(function () {
+    var href = location.href.split('#')
+    if (href.length === 2) {
       try {
-        $("html, body").animate(
+        $('html, body').animate(
           {
             scrollTop:
-              $("#dptt" + href[1]).offset().top - window.innerHeight / 9
+              $('#dptt' + href[1]).offset().top - window.innerHeight / 9
           },
           0
-        );
+        )
       } catch (err) {
-        console.log(err);
+        console.log(err)
       }
     }
-  }, 100);
-
-  $("#btn_font_menos").click(function() {
-    $(".dpt").css("font-size", "-=1");
-  });
-  $("#btn_font_mais").click(function() {
-    $(".dpt").css("font-size", "+=1");
-  });
-
-  $(".dpt.bloco_alteracao .dpt").each(function() {
-    var nivel = parseInt($(this).attr("nivel"));
-    $(this).css("z-index", 15 - nivel);
-  });
-  
-  onReadyNotasVides();
-
-});
+  }, 100)
+
+  $('#btn_font_menos').click(function () {
+    $('.dpt').css('font-size', '-=1')
+  })
+  $('#btn_font_mais').click(function () {
+    $('.dpt').css('font-size', '+=1')
+  })
+
+  $('.dpt.bloco_alteracao .dpt').each(function () {
+    var nivel = parseInt($(this).attr('nivel'))
+    $(this).css('z-index', 15 - nivel)
+  })
+  window.onReadyNotasVides()
+})
diff --git a/sapl-frontend/src/apps/compilacao/scss/compilacao.scss b/sapl-frontend/src/apps/compilacao/scss/compilacao.scss
index 60500e24c..fed4b6bb1 100644
--- a/sapl-frontend/src/apps/compilacao/scss/compilacao.scss
+++ b/sapl-frontend/src/apps/compilacao/scss/compilacao.scss
@@ -306,6 +306,9 @@ a:link:after, a:visited:after {
       }
     }
 
+    .card-header {
+      font-size: 1.7rem;
+    }
 
     .dn { /* Notas de Dispositivo*/
       font-weight: normal;
@@ -464,7 +467,7 @@ a:link:after, a:visited:after {
         .dne-form {
           margin: 1em -2em 0em;
           text-align: left;
-          font-size: 1.6rem;
+          font-size: 1rem;
         }
       }
 
diff --git a/sapl-frontend/src/global/image_cropping/image_cropping.js b/sapl-frontend/src/global/image_cropping/image_cropping.js
index e2167c175..eb30eb1c2 100644
--- a/sapl-frontend/src/global/image_cropping/image_cropping.js
+++ b/sapl-frontend/src/global/image_cropping/image_cropping.js
@@ -1,6 +1,6 @@
 /* eslint-disable */ 
 var image_cropping = (function ($) {
-    var jcrop = {};
+    var jcrop = {}
     function init() {
       $('input.image-ratio').each(function() {
         var $this = $(this),
@@ -10,40 +10,40 @@ var image_cropping = (function ($) {
 
         // there should only be one file field we're referencing but in special cases
         // there can be several. Deal with it gracefully.
-            $image_input = $('input.crop-thumb[data-field-name=' + field + ']:first');
+            $image_input = $('input.crop-thumb[data-field-name=' + field + ']:first')
 
         // skip this image if it's empty and hide the whole field, within admin and by itself
         if (!$image_input.length || $image_input.data('thumbnail-url') === undefined) {
-          $this.hide().parents('div.form-row:first').hide();
-          return;
+          $this.hide().parents('div.form-row:first').hide()
+          return
         }
         // check if the image field should be hidden
         if ($image_input.data('hide-field')) {
-          $image_input.hide().parents('div.form-row:first').hide();
+          $image_input.hide().parents('div.form-row:first').hide()
         }
 
         var image_id = $this.attr('id') + '-image',
             org_width = $image_input.data('org-width'),
             org_height = $image_input.data('org-height'),
             min_width = $this.data('min-width'),
-            min_height = $this.data('min-height');
+            min_height = $this.data('min-height')
 
-        var is_image_portrait = (org_height > org_width);
-        var is_select_portrait = (min_height > min_width);
+        var is_image_portrait = (org_height > org_width)
+        var is_select_portrait = (min_height > min_width)
 
         if ($this.data('adapt-rotation') === true) {
             if (is_image_portrait != is_select_portrait) {
                 // cropping height/width need to be switched, picture is in portrait mode
-                var x = min_width;
-                min_width = min_height;
-                min_height = x;
+                var x = min_width
+                min_width = min_height
+                min_height = x
             }
         }
 
         var $image = $('<img>', {
           'id': image_id,
           'src': $image_input.data('thumbnail-url')
-        });
+        })
 
         var options = {
           minSize: [5, 5],
@@ -51,152 +51,152 @@ var image_cropping = (function ($) {
           trueSize: [org_width, org_height],
           onSelect: update_selection($this),
           addClass: ($this.data('size-warning') && ((org_width < min_width) || (org_height < min_height))) ? 'size-warning jcrop-image': 'jcrop-image'
-        };
+        }
         if ($this.data('ratio')) {
-          options['aspectRatio'] = $this.data('ratio');
+          options['aspectRatio'] = $this.data('ratio')
         }
         if ($this.data('box_max_width')) {
-          options['boxWidth'] = $this.data('box_max_width');
+          options['boxWidth'] = $this.data('box_max_width')
         }
         if ($this.data('box_max_height')) {
-          options['boxHeight'] = $this.data('box_max_height');
+          options['boxHeight'] = $this.data('box_max_height')
         }
 
-        var cropping_disabled = false;
+        var cropping_disabled = false
         if($this.val()[0] == "-"){
-          cropping_disabled = true;
-          $this.val($this.val().substr(1));
+          cropping_disabled = true
+          $this.val($this.val().substr(1))
         }
 
         // is the image bigger than the minimal cropping values?
         // otherwise lock cropping area on full image
-        var initial;
+        var initial
         if ($this.val()) {
-          initial = initial_cropping($this.val());
+          initial = initial_cropping($this.val())
         } else {
 
-          initial = max_cropping(min_width, min_height, org_width, org_height);
+          initial = max_cropping(min_width, min_height, org_width, org_height)
 
             // set cropfield to initial value
-          $this.val(initial.join(','));
+          $this.val(initial.join(','))
         }
 
-        $.extend(options, {setSelect: initial});
+        $.extend(options, {setSelect: initial})
 
         // hide the input field, show image to crop instead
-        $this.hide().after($image);
+        $this.hide().after($image)
 
-        $('#' + image_id).Jcrop(options, function(){jcrop[image_id]=this;});
+        $('#' + image_id).Jcrop(options, function(){jcrop[image_id]=this;})
 
         if ($this.data('allow-fullsize') === true) {
           if(cropping_disabled){
-            jcrop[image_id].release();
-            $this.val('-'+$this.val());
+            jcrop[image_id].release()
+            $this.val('-'+$this.val())
           }
-          var label = 'allow-fullsize-'+image_id;
-          var checked = cropping_disabled ? '' : ' checked="checked"';
+          var label = 'allow-fullsize-'+image_id
+          var checked = cropping_disabled ? '' : ' checked="checked"'
           var fullsize = $('<div class="field-box allow-fullsize">' +
-                           '<input type="checkbox" id="'+label+'" name="'+label+'"'+checked+'></div>');
+                           '<input type="checkbox" id="'+label+'" name="'+label+'"'+checked+'></div>')
 
           if ($this.parent().find('.help').length) {
-            fullsize.insertBefore($this.parent().find('.help'));
+            fullsize.insertBefore($this.parent().find('.help'))
           } else {
-            fullsize.appendTo($this.parent());
+            fullsize.appendTo($this.parent())
           }
 
           $('#'+label).click(function(){
             if (cropping_disabled === true){
-              $this.val($this.val().substr(1));
-              jcrop[image_id].setSelect($this.val().split(','));
-              cropping_disabled = false;
+              $this.val($this.val().substr(1))
+              jcrop[image_id].setSelect($this.val().split(','))
+              cropping_disabled = false
             } else {
-              $this.val('-'+$this.val());
-              jcrop[image_id].release();
-              cropping_disabled = true;
+              $this.val('-'+$this.val())
+              jcrop[image_id].release()
+              cropping_disabled = true
             }
-          });
+          })
           $this.parent().find('.jcrop-tracker').mousedown(function(){
               if (cropping_disabled){
-                $('#'+label).attr('checked','checked');
-                cropping_disabled = false;
+                $('#'+label).attr('checked','checked')
+                cropping_disabled = false
               }
-          });
+          })
         }
-      });
+      })
     }
 
     function max_cropping (width, height, image_width, image_height) {
-      var ratio = width/height;
-      var offset;
+      var ratio = width/height
+      var offset
 
       if (image_width < image_height * ratio) {
         // width fits fully, height needs to be cropped
-        offset = Math.round((image_height-(image_width/ratio))/2);
-        return [0, offset, image_width, image_height - offset];
+        offset = Math.round((image_height-(image_width/ratio))/2)
+        return [0, offset, image_width, image_height - offset]
       }
       // height fits fully, width needs to be cropped
-      offset = Math.round((image_width-(image_height * ratio))/2);
-      return [offset, 0, image_width - offset, image_height];
+      offset = Math.round((image_width-(image_height * ratio))/2)
+      return [offset, 0, image_width - offset, image_height]
     }
 
     function initial_cropping (val) {
       if (val === '') { return; }
-      var s = val.split(',');
+      var s = val.split(',')
       return [
         parseInt(s[0], 10),
         parseInt(s[1], 10),
         parseInt(s[2], 10),
         parseInt(s[3], 10)
-      ];
+      ]
     }
 
     function _update_selection (sel, $crop_field) {
       if ($crop_field.data('size-warning')) {
-        crop_indication(sel, $crop_field);
+        crop_indication(sel, $crop_field)
       }
       $crop_field.val(new Array(
         Math.round(sel.x),
         Math.round(sel.y),
         Math.round(sel.x2),
         Math.round(sel.y2)
-      ).join(','));
+      ).join(','))
     }
 
     function update_selection ($crop_field) {
-      return function(sel) { _update_selection(sel, $crop_field); };
+      return function(sel) { _update_selection(sel, $crop_field); }
     }
 
     function crop_indication (sel, $crop_field) {
       // indicate if cropped area gets smaller than the specified minimal cropping
-      var $jcrop_holder = $crop_field.siblings('.jcrop-holder');
-      var min_width = $crop_field.data("min-width");
-      var min_height = $crop_field.data("min-height");
+      var $jcrop_holder = $crop_field.siblings('.jcrop-holder')
+      var min_width = $crop_field.data("min-width")
+      var min_height = $crop_field.data("min-height")
       if ((sel.w < min_width) || (sel.h < min_height)) {
-        $jcrop_holder.addClass('size-warning');
+        $jcrop_holder.addClass('size-warning')
       } else {
-        $jcrop_holder.removeClass('size-warning');
+        $jcrop_holder.removeClass('size-warning')
       }
     }
 
     return {
       init: init,
       jcrop: jcrop
-    };
+    }
 
-})(jQuery);
+})(jQuery)
 
 jQuery(function() {
-  /*var image_cropping_jquery_url = jQuery('.image-ratio:first').data('jquery-url');
+  /*var image_cropping_jquery_url = jQuery('.image-ratio:first').data('jquery-url')
   if (image_cropping_jquery_url == "None") {
     // JQUERY_URL is set to `none`. We therefore use the existing version of
     // jQuery and leave it otherwise untouched.
-    jQ = jQuery;
+    jQ = jQuery
   } else {
     // JQUERY_URL is specified. Image Cropping's jQuery is included in no conflict mode,
-    jQ = jQuery.noConflict(true);
+    jQ = jQuery.noConflict(true)
   }
   jQ(function() {image_cropping.init();});*/
   $(function() {
-    image_cropping.init();
-  });
-});
+    image_cropping.init()
+  })
+})
diff --git a/sapl-frontend/src/global/image_cropping/index.js b/sapl-frontend/src/global/image_cropping/index.js
index e955974e3..ed6bfb7b9 100644
--- a/sapl-frontend/src/global/image_cropping/index.js
+++ b/sapl-frontend/src/global/image_cropping/index.js
@@ -1,6 +1,6 @@
 /* eslint-disable */ 
-import './css/jquery.Jcrop.min.css';
-import './css/image_cropping.css';
+import './css/jquery.Jcrop.min.css'
+import './css/image_cropping.css'
 
-import './js/jquery.Jcrop.min';
-import './image_cropping';
\ No newline at end of file
+import './js/jquery.Jcrop.min'
+import './image_cropping'
\ No newline at end of file
diff --git a/sapl-frontend/src/global/jquery.runner.js b/sapl-frontend/src/global/jquery.runner.js
index 329cd4b9c..9a6ef66f9 100644
--- a/sapl-frontend/src/global/jquery.runner.js
+++ b/sapl-frontend/src/global/jquery.runner.js
@@ -5,101 +5,101 @@
  * Copyright (c) 2014 Jyrki Laurila <https://github.com/jylauril>
  */
 (function() {
-  var Runner, formatTime, meta, pad, runners, uid, _$, _requestAnimationFrame, _uid;
+  var Runner, formatTime, meta, pad, runners, uid, _$, _requestAnimationFrame, _uid
 
   meta = {
     version: "2.3.3",
     name: "jQuery-runner"
-  };
+  }
 
-  _$ = $;
+  _$ = $
 
   if (!(_$ && _$.fn)) {
-    throw new Error('[' + meta.name + '] jQuery or jQuery-like library is required for this plugin to work');
+    throw new Error('[' + meta.name + '] jQuery or jQuery-like library is required for this plugin to work')
   }
 
-  runners = {};
+  runners = {}
 
   pad = function(num) {
-    return (num < 10 ? '0' : '') + num;
-  };
+    return (num < 10 ? '0' : '') + num
+  }
 
-  _uid = 1;
+  _uid = 1
 
   uid = function() {
-    return 'runner' + _uid++;
-  };
+    return 'runner' + _uid++
+  }
 
   _requestAnimationFrame = (function(win, raf) {
     return win['r' + raf] || win['webkitR' + raf] || win['mozR' + raf] || win['msR' + raf] || function(fn) {
-      return setTimeout(fn, 30);
-    };
-  })(this, 'equestAnimationFrame');
+      return setTimeout(fn, 30)
+    }
+  })(this, 'equestAnimationFrame')
 
   formatTime = function(time, settings) {
-    var i, len, ms, output, prefix, separator, step, steps, value, _i, _len;
-    settings = settings || {};
-    steps = [3600000, 60000, 1000, 10];
-    separator = ['', ':', ':', '.'];
-    prefix = '';
-    output = '';
-    ms = settings.milliseconds;
-    len = steps.length;
-    value = 0;
+    var i, len, ms, output, prefix, separator, step, steps, value, _i, _len
+    settings = settings || {}
+    steps = [3600000, 60000, 1000, 10]
+    separator = ['', ':', ':', '.']
+    prefix = ''
+    output = ''
+    ms = settings.milliseconds
+    len = steps.length
+    value = 0
     if (time < 0) {
-      time = Math.abs(time);
-      prefix = '-';
+      time = Math.abs(time)
+      prefix = '-'
     }
     for (i = _i = 0, _len = steps.length; _i < _len; i = ++_i) {
-      step = steps[i];
-      value = 0;
+      step = steps[i]
+      value = 0
       if (time >= step) {
-        value = Math.floor(time / step);
-        time -= value * step;
+        value = Math.floor(time / step)
+        time -= value * step
       }
       if ((value || i > 1 || output) && (i !== len - 1 || ms)) {
-        output += (output ? separator[i] : '') + pad(value);
+        output += (output ? separator[i] : '') + pad(value)
       }
     }
-    return prefix + output;
-  };
+    return prefix + output
+  }
 
   Runner = (function() {
     function Runner(items, options, start) {
-      var id;
+      var id
       if (!(this instanceof Runner)) {
-        return new Runner(items, options, start);
+        return new Runner(items, options, start)
       }
-      this.items = items;
-      id = this.id = uid();
-      this.settings = _$.extend({}, this.settings, options);
-      runners[id] = this;
+      this.items = items
+      id = this.id = uid()
+      this.settings = _$.extend({}, this.settings, options)
+      runners[id] = this
       items.each(function(index, element) {
-        _$(element).data('runner', id);
-      });
-      this.value(this.settings.startAt);
+        _$(element).data('runner', id)
+      })
+      this.value(this.settings.startAt)
       if (start || this.settings.autostart) {
-        this.start();
+        this.start()
       }
     }
 
-    Runner.prototype.running = false;
+    Runner.prototype.running = false
 
-    Runner.prototype.updating = false;
+    Runner.prototype.updating = false
 
-    Runner.prototype.finished = false;
+    Runner.prototype.finished = false
 
-    Runner.prototype.interval = null;
+    Runner.prototype.interval = null
 
-    Runner.prototype.total = 0;
+    Runner.prototype.total = 0
 
-    Runner.prototype.lastTime = 0;
+    Runner.prototype.lastTime = 0
 
-    Runner.prototype.startTime = 0;
+    Runner.prototype.startTime = 0
 
-    Runner.prototype.lastLap = 0;
+    Runner.prototype.lastLap = 0
 
-    Runner.prototype.lapTime = 0;
+    Runner.prototype.lapTime = 0
 
     Runner.prototype.settings = {
       autostart: false,
@@ -108,128 +108,128 @@
       startAt: 0,
       milliseconds: true,
       format: null
-    };
+    }
 
     Runner.prototype.value = function(value) {
       this.items.each((function(_this) {
         return function(item, element) {
-          var action;
-          item = _$(element);
-          action = item.is('input') ? 'val' : 'text';
-          item[action](_this.format(value));
-        };
-      })(this));
-    };
+          var action
+          item = _$(element)
+          action = item.is('input') ? 'val' : 'text'
+          item[action](_this.format(value))
+        }
+      })(this))
+    }
 
     Runner.prototype.format = function(value) {
-      var format;
-      format = this.settings.format;
-      format = _$.isFunction(format) ? format : formatTime;
-      return format(value, this.settings);
-    };
+      var format
+      format = this.settings.format
+      format = _$.isFunction(format) ? format : formatTime
+      return format(value, this.settings)
+    }
 
     Runner.prototype.update = function() {
-      var countdown, delta, settings, stopAt, time;
+      var countdown, delta, settings, stopAt, time
       if (!this.updating) {
-        this.updating = true;
-        settings = this.settings;
-        time = _$.now();
-        stopAt = settings.stopAt;
-        countdown = settings.countdown;
-        delta = time - this.lastTime;
-        this.lastTime = time;
+        this.updating = true
+        settings = this.settings
+        time = _$.now()
+        stopAt = settings.stopAt
+        countdown = settings.countdown
+        delta = time - this.lastTime
+        this.lastTime = time
         if (countdown) {
-          this.total -= delta;
+          this.total -= delta
         } else {
-          this.total += delta;
+          this.total += delta
         }
         if (stopAt !== null && ((countdown && this.total <= stopAt) || (!countdown && this.total >= stopAt))) {
-          this.total = stopAt;
-          this.finished = true;
-          this.stop();
-          this.fire('runnerFinish');
+          this.total = stopAt
+          this.finished = true
+          this.stop()
+          this.fire('runnerFinish')
         }
-        this.value(this.total);
-        this.updating = false;
+        this.value(this.total)
+        this.updating = false
       }
-    };
+    }
 
     Runner.prototype.fire = function(event) {
-      this.items.trigger(event, this.info());
-    };
+      this.items.trigger(event, this.info())
+    }
 
     Runner.prototype.start = function() {
-      var step;
+      var step
       if (!this.running) {
-        this.running = true;
+        this.running = true
         if (!this.startTime || this.finished) {
-          this.reset();
+          this.reset()
         }
-        this.lastTime = _$.now();
+        this.lastTime = _$.now()
         step = (function(_this) {
           return function() {
             if (_this.running) {
-              _this.update();
-              _requestAnimationFrame(step);
+              _this.update()
+              _requestAnimationFrame(step)
             }
-          };
-        })(this);
-        _requestAnimationFrame(step);
-        this.fire('runnerStart');
+          }
+        })(this)
+        _requestAnimationFrame(step)
+        this.fire('runnerStart')
       }
-    };
+    }
 
     Runner.prototype.stop = function() {
       if (this.running) {
-        this.running = false;
-        this.update();
-        this.fire('runnerStop');
+        this.running = false
+        this.update()
+        this.fire('runnerStop')
       }
-    };
+    }
 
     Runner.prototype.toggle = function() {
       if (this.running) {
-        this.stop();
+        this.stop()
       } else {
-        this.start();
+        this.start()
       }
-    };
+    }
 
     Runner.prototype.lap = function() {
-      var lap, last;
-      last = this.lastTime;
-      lap = last - this.lapTime;
+      var lap, last
+      last = this.lastTime
+      lap = last - this.lapTime
       if (this.settings.countdown) {
-        lap = -lap;
+        lap = -lap
       }
       if (this.running || lap) {
-        this.lastLap = lap;
-        this.lapTime = last;
+        this.lastLap = lap
+        this.lapTime = last
       }
-      last = this.format(this.lastLap);
-      this.fire('runnerLap');
-      return last;
-    };
+      last = this.format(this.lastLap)
+      this.fire('runnerLap')
+      return last
+    }
 
     Runner.prototype.reset = function(stop) {
-      var nowTime;
+      var nowTime
       if (stop) {
-        this.stop();
+        this.stop()
       }
-      nowTime = _$.now();
+      nowTime = _$.now()
       if (typeof this.settings.startAt === 'number' && !this.settings.countdown) {
-        nowTime -= this.settings.startAt;
+        nowTime -= this.settings.startAt
       }
-      this.startTime = this.lapTime = this.lastTime = nowTime;
-      this.total = this.settings.startAt;
-      this.value(this.total);
-      this.finished = false;
-      this.fire('runnerReset');
-    };
+      this.startTime = this.lapTime = this.lastTime = nowTime
+      this.total = this.settings.startAt
+      this.value(this.total)
+      this.finished = false
+      this.fire('runnerReset')
+    }
 
     Runner.prototype.info = function() {
-      var lap;
-      lap = this.lastLap || 0;
+      var lap
+      lap = this.lastLap || 0
       return {
         running: this.running,
         finished: this.finished,
@@ -239,58 +239,58 @@
         lapTime: lap,
         formattedLapTime: this.format(lap),
         settings: this.settings
-      };
-    };
+      }
+    }
 
-    return Runner;
+    return Runner
 
-  })();
+  })()
 
   _$.fn.runner = function(method, options, start) {
-    var id, runner;
+    var id, runner
     if (!method) {
-      method = 'init';
+      method = 'init'
     }
     if (typeof method === 'object') {
-      start = options;
-      options = method;
-      method = 'init';
+      start = options
+      options = method
+      method = 'init'
     }
-    id = this.data('runner');
-    runner = id ? runners[id] : false;
+    id = this.data('runner')
+    runner = id ? runners[id] : false
     switch (method) {
       case 'init':
-        new Runner(this, options, start);
-        break;
+        new Runner(this, options, start)
+        break
       case 'info':
         if (runner) {
-          return runner.info();
+          return runner.info()
         }
-        break;
+        break
       case 'reset':
         if (runner) {
-          runner.reset(options);
+          runner.reset(options)
         }
-        break;
+        break
       case 'lap':
         if (runner) {
-          return runner.lap();
+          return runner.lap()
         }
-        break;
+        break
       case 'start':
       case 'stop':
       case 'toggle':
         if (runner) {
-          return runner[method]();
+          return runner[method]()
         }
-        break;
+        break
       case 'version':
-        return meta.version;
+        return meta.version
       default:
-        _$.error('[' + meta.name + '] Method ' + method + ' does not exist');
+        _$.error('[' + meta.name + '] Method ' + method + ' does not exist')
     }
-    return this;
-  };
+    return this
+  }
 
-  _$.fn.runner.format = formatTime;
-}).call(window);
+  _$.fn.runner.format = formatTime
+}).call(window)
diff --git a/sapl-frontend/src/global/main.js b/sapl-frontend/src/global/main.js
index fd6ff0c79..7c1ad5072 100644
--- a/sapl-frontend/src/global/main.js
+++ b/sapl-frontend/src/global/main.js
@@ -1,19 +1,19 @@
+// eslint-disable-next-line
+require('imports-loader?window.jQuery=jquery!./jquery.runner.js')
 
-require("imports-loader?window.jQuery=jquery!./jquery.runner.js");
+import 'jquery-mask-plugin'
 
-import "jquery-mask-plugin";
+import 'webpack-jquery-ui/dialog'
+import 'webpack-jquery-ui/sortable'
 
-import "webpack-jquery-ui/dialog";
-import "webpack-jquery-ui/sortable";
+import 'bootstrap'
 
-import "bootstrap";
+import './functions'
 
-import "./functions";
-
-import "./image_cropping";
+import './image_cropping'
 
 window.jQuery = jQuery
 window.$ = jQuery
 
-window.autorModal();
-window.refreshMask();
+window.autorModal()
+window.refreshMask()
diff --git a/sapl-frontend/src/hellow/main.js b/sapl-frontend/src/hellow/main.js
index 3a47006f0..843306d69 100644
--- a/sapl-frontend/src/hellow/main.js
+++ b/sapl-frontend/src/hellow/main.js
@@ -1,12 +1,12 @@
-import Vue from "vue";
-import App from "./App.vue";
-import router from "./router";
-import store from "./store";
+import Vue from "vue"
+import App from "./App.vue"
+import router from "./router"
+import store from "./store"
 
-Vue.config.productionTip = false;
+Vue.config.productionTip = false
 
 new Vue({
   router,
   store,
   render: h => h(App)
-}).$mount("#app");
+}).$mount("#app")
diff --git a/sapl-frontend/src/hellow/router.js b/sapl-frontend/src/hellow/router.js
index 613500153..42f50e476 100644
--- a/sapl-frontend/src/hellow/router.js
+++ b/sapl-frontend/src/hellow/router.js
@@ -1,10 +1,10 @@
-import Vue from "vue";
-import Router from "vue-router";
+import Vue from "vue"
+import Router from "vue-router"
 
-Vue.use(Router);
+Vue.use(Router)
 
 export default new Router({
   mode: "history",
   base: process.env.BASE_URL,
   routes: []
-});
+})
diff --git a/sapl-frontend/src/hellow/store.js b/sapl-frontend/src/hellow/store.js
index bb02ce2d2..5cbb72d3b 100644
--- a/sapl-frontend/src/hellow/store.js
+++ b/sapl-frontend/src/hellow/store.js
@@ -1,7 +1,7 @@
-import Vue from "vue";
-import Vuex from "vuex";
+import Vue from "vue"
+import Vuex from "vuex"
 
-Vue.use(Vuex);
+Vue.use(Vuex)
 
 export default new Vuex.Store({
   state: {},
diff --git a/sapl-frontend/src/hellow/views/Home.vue b/sapl-frontend/src/hellow/views/Home.vue
index 3d9825f2d..3f6b1a8a7 100644
--- a/sapl-frontend/src/hellow/views/Home.vue
+++ b/sapl-frontend/src/hellow/views/Home.vue
@@ -7,12 +7,12 @@
 
 <script>
 // @ is an alias to /src
-import HelloWorld from "@/hellow/components/HelloWorld.vue";
+import HelloWorld from "@/hellow/components/HelloWorld.vue"
 
 export default {
   name: "home",
   components: {
     HelloWorld
   }
-};
+}
 </script>
diff --git a/sapl-frontend/vue.config.js b/sapl-frontend/vue.config.js
index 1b0ef1fe2..12564de5d 100644
--- a/sapl-frontend/vue.config.js
+++ b/sapl-frontend/vue.config.js
@@ -20,6 +20,8 @@ module.exports = {
       .plugin('BundleTracker')
       .use(BundleTracker, [{ filename: './webpack-stats.json' }])
 
+    config.devtool = "source-map"
+
     config.resolve.alias
       .set('__STATIC__', 'static')
 
diff --git a/sapl/templates/compilacao/dispositivo_form_search.html b/sapl/templates/compilacao/dispositivo_form_search.html
index 684df1e32..324c620ee 100644
--- a/sapl/templates/compilacao/dispositivo_form_search.html
+++ b/sapl/templates/compilacao/dispositivo_form_search.html
@@ -1,6 +1,6 @@
 {% load i18n crispy_forms_tags %}
 
-<div class="modal fade" id="modal-ds" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
+<div class="modal" id="modal-ds" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
   <div class="modal-dialog modal-lg" role="document">
     <div class="modal-content">
       <div class="modal-header">