Page tree

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Code Block
haml
haml
!!!
%html
  %head
    %script{type: "text/javascript", src: "http://localhost:3000/customerWidget.js"}
    %link{rel: 'stylesheet', type: "text/css", href: "http://localhost:3000/customerWidget.css"}
  %body
    %div
      %h1 Welcome
      %p
      #customer-widget-id{style: 'width: 1000px; margin: 0 auto; font-size: 13px; border: 5px dashed lightgrey;'}

:javascript
  document.addEventListener('DOMContentLoaded', () => {
    HCCPCustomerWidget.render({
      baseURL:     '/hccp/',
      locale:      'ru',
      customerId:  '50162901',
      containerId: 'customer-widget-id',
    });
  });

 

Пример замены виджета с пользовательскими шаблонами на виджет абонента

В случае с хопером, нам не нужно беспокоиться по поводу прокси-контроллера: здесь все уже реализовано.

 

Достаточно сделать следующие шаги:

 

Заменяем подгрузку виджета пользовательских шаблонов на подгрузку виджета абонента

...

[sergeichukd@mbp ~/dev/hoper (master *)]$ git diff app/views/layouts/admin.haml
diff --git a/app/views/layouts/admin.haml b/app/views/layouts/admin.haml
index 85f9a5b74..77e19df44 100644
--- a/app/views/layouts/admin.haml
+++ b/app/views/layouts/admin.haml
@@ -15,8 +15,8 @@
       :javascript
         window.HBWidgetOptions = #{hbw_options.to_json.html_safe}
     - if Hoper::Config.widgets.hccp_reports.try(:public_url)
-      = javascript_include_tag URI.join(Hoper::Config.widgets.hccp_reports.public_url, 'reportsWidget.js')
-      = stylesheet_link_tag URI.join(Hoper::Config.widgets.hccp_reports.public_url, 'reportsWidget.css')
+      = javascript_include_tag URI.join(Hoper::Config.widgets.hccp_reports.public_url, 'customerWidget.js')
+      = stylesheet_link_tag URI.join(Hoper::Config.widgets.hccp_reports.public_url, 'customerWidget.css')
     :javascript
       var alertGroups = #{Hoper::Config.interface.alert_groups?};
       var UI = {};
[sergeichukd@mbp ~/dev/hoper (master *)]$ 

 

После этого подменяем рендер виджета пользовательских шаблонов на рендер виджета абонента

...

[sergeichukd@mbp ~/dev/hoper (master *)]$ git diff app/views/reports/custom/index.haml
diff --git a/app/views/reports/custom/index.haml b/app/views/reports/custom/index.haml
index 2d418136d..3b20fa83e 100644
--- a/app/views/reports/custom/index.haml
+++ b/app/views/reports/custom/index.haml
@@ -1,12 +1,13 @@
 %h1.header=t('menu.reports.custom')
 
-.custom-reports-styles(id="custom-reports-index")
+#customer-widget-id{style: 'width: 1000px; margin: 0 auto; font-size: 13px; border: 5px dashed lightgrey;'}
 :javascript
   (function() {
-    HCCPReportsWidget.render({
-      baseURL: '/hccp/',
-      locale: "#{locale.to_s}",
-      containerId: 'custom-reports-index'
+    HCCPCustomerWidget.render({
+      baseURL:     '/hccp/',
+      locale:      'ru',
+      customerId:  '50162901',
+      containerId: 'customer-widget-id',
     });
 
   }).call(this);
[sergeichukd@mbp ~/dev/hoper (master *)]$ 

 

В конфиге хопера задаем параметры виджета hccp_reports:

...

        hccp_reports:
          public_url: 'http://localhost:4000'
          url: 'http://localhost:4000'
          login: 'gordon'
          password: 'q123'

 

Конфигурируем unicorn на 8 воркеров (для корректной работы виджета нужно более 4 воркеров, так как виджет делает несколько параллельных запросов к апи хопера)

...

      unicorn:
        pid: tmp/unicorn.pid
        socket: 3000
        workers: 8
        max_memory_size_mb: 300
        request_timeout_seconds: 600
        serve_static_assets: true

После этого подниаем hccp на 4000 порту

Поднимаем хопер в продакшн моде командой

...

 bundle exec unicorn -E production -c config/unicorn.rb

 

В результате, если открыть хопер и перейти в "Отчеты" -> "Пользовательские отчеты", то должна отрисоваться такая страница

Image Removed