src/AdminBundle/Resources/views/dashboard.html.twig line 1

Open in your IDE?
  1. {#
  3. This file is part of the Sonata package.
  5. (c) Thomas Rabaix <thomas.rabaix@sonata-project.org>
  7. For the full copyright and license information, please view the LICENSE
  8. file that was distributed with this source code.
  10. #}
  12. {% extends base_template %}
  14. {% block title %}{{ 'title_dashboard'|trans({}, 'SonataAdminBundle') }}{% endblock%}
  16. {% block stylesheets %}
  17.     {{ parent() }}
  18.     <link rel="stylesheet" href="{{ asset('/bundles/admin/css/sb-admin-2.min.css') }}">
  19. {% endblock %}
  21. {% block content %}
  23.     <div class="row" id="dashboard">
  25.         <div class="col-md-8 col-sm-8">
  26.             <div class="panel panel-info" id="linkMinimizer">
  27.                 <div class="panel-heading">Генератор посилань</div>
  28.                 <div class="panel-body">
  29.                     <div class="row">
  30.                         <div class="col-md-6 col-sm-12 col-lg-6">
  31.                             <div class="form-group">
  32.                                 <input v-model="links.link" id="fullLink" type="text" class="form-control" placeholder="Повне посиллання">
  33.                             </div>
  34.                         </div>
  35.                         <div class="col-md-6 col-sm-12 col-lg-6">
  36.                             <div class="form-group">
  37.                                 <input :value="1" v-model="links.needUtm" style="cursor: pointer" id="needUTM" type="checkbox" class="form-control">
  38.                                 <label style="cursor: pointer; margin-left: 5px" for="needUTM"> Додати UTM мітки</label>
  39.                             </div>
  40.                         </div>
  41.                     </div>
  42.                     <div class="row" v-if="links.needUtm">
  43.                         <div class="col-md-3 col-sm-12 col-lg-3">
  44.                             <div class="form-group">
  45.                                 <input v-model="links.utm_source" id="utm_source" type="text" class="form-control" placeholder="utm_source">
  46.                             </div>
  47.                         </div>
  48.                         <div class="col-md-3 col-sm-12 col-lg-3">
  49.                             <div class="form-group">
  50.                                 <input v-model="links.utm_medium" id="utm_medium" type="text" class="form-control" placeholder="utm_medium">
  51.                             </div>
  52.                         </div>
  53.                         <div class="col-md-3 col-sm-12 col-lg-3">
  54.                             <div class="form-group">
  55.                                 <input v-model="links.utm_campaign" id="utm_campaign" type="text" class="form-control" placeholder="utm_campaign">
  56.                             </div>
  57.                         </div>
  58.                         <div class="col-md-3 col-sm-12 col-lg-3">
  59.                             <div class="form-group">
  60.                                 <input v-model="links.utm_content" type="text" class="form-control" placeholder="utm_content">
  61.                             </div>
  62.                         </div>
  63.                     </div>
  64.                     <div class="row">
  65.                         <div class="col-md-6 col-sm-12 col-lg-6">
  66.                             <div class="form-group">
  67.                                 <input v-on:click="minimizeUlr" class="btn btn-success" type="button" value="Мінімізувати">
  68.                             </div>
  69.                         </div>
  70.                     </div>
  71.                 </div>
  72.                 <div class="panel-footer">
  73.                     <div v-if="links.miniLink">Ваше посилання: <b style="color: green" v-html="links.miniLink"></b></div>
  74.                 </div>
  75.             </div>
  76.         </div>
  78.         <div class="col-md-2 col-sm-2">
  79.             <div class="panel panel-info">
  80.                 <div class="panel-heading">Файли</div>
  81.                 <div class="panel-body" style="height: 127px">
  82.                     <a class="btn btn-success" href="{{ path('admin_sonata_media_media_list') }}">Список файлів</a>
  83.                     <a class="btn btn-success" style="margin-top: 15px" href="{{ path('admin_sonata_media_media_create') }}">Завантажити файл</a>
  84.                 </div>
  85.                 <div class="panel-footer"></div>
  86.             </div>
  87.         </div>
  93.         <div class="col-md-12 col-sm-12">
  94.             <div class="panel panel-info">
  95.                 <div class="panel-heading">Задачі</div>
  96.                 <div class="panel-body">
  97.                     <div class="row" v-if="tickets">
  98.                         <div class="col-md-6 col-sm-12 col-lg-3">
  99.                             <div class="border-left-card-primary">
  100.                                 <div class="card-body">
  101.                                     <div class="no-gutters align-items-center with-icon">
  102.                                         <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">Відкритих задач</div>
  103.                                         <div class="h5 mb-0 font-weight-bold text-gray-800">
  104.                                             <b class="text-primary f-40" v-html="tickets.total"></b>
  105.                                         </div>
  106.                                         <div class="card-icon">
  107.                                             <i class="fa fa-book"></i>
  108.                                         </div>
  109.                                     </div>
  110.                                 </div>
  111.                             </div>
  112.                         </div>
  113.                         <div class="col-md-6 col-sm-12 col-lg-3">
  114.                             <div class="border-left-card-warning">
  115.                                 <div class="card-body">
  116.                                     <div class="no-gutters align-items-center with-icon">
  117.                                         <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">В роботі</div>
  118.                                         <div class="h5 mb-0 font-weight-bold text-gray-800">
  119.                                             <b class="text-primary f-40" v-html="tickets.inProgress"></b>
  120.                                         </div>
  121.                                         <div class="card-icon">
  122.                                             <i class="fa fa-user"></i>
  123.                                         </div>
  124.                                     </div>
  125.                                 </div>
  126.                             </div>
  127.                         </div>
  128.                         <div class="col-md-6 col-sm-12 col-lg-3">
  129.                             <div class="border-left-card-primary">
  130.                                 <div class="card-body">
  131.                                     <div class="no-gutters align-items-center with-icon">
  132.                                         <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">Очікують реліз</div>
  133.                                         <div class="h5 mb-0 font-weight-bold text-gray-800">
  134.                                             <b class="text-primary f-40" v-html="tickets.wait"></b>
  135.                                         </div>
  136.                                         <div class="card-icon">
  137.                                             <i class="fa fa-clock-o"></i>
  138.                                         </div>
  139.                                     </div>
  140.                                 </div>
  141.                             </div>
  142.                         </div>
  143.                         <div class="col-md-6 col-sm-12 col-lg-3">
  144.                             <div class="border-left-card-warning">
  145.                                 <div class="card-body">
  146.                                     <div class="no-gutters align-items-center with-icon">
  147.                                         <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">На підтвердженні</div>
  148.                                         <div class="h5 mb-0 font-weight-bold text-gray-800">
  149.                                             <b class="text-primary f-40" v-html="tickets.done"></b>
  150.                                         </div>
  151.                                         <div class="card-icon">
  152.                                             <i class="fa fa-clock-o"></i>
  153.                                         </div>
  154.                                     </div>
  155.                                 </div>
  156.                             </div>
  157.                         </div>
  158.                     </div>
  159.                 </div>
  160.                 <div class="panel-footer"></div>
  161.             </div>
  162.         </div>
  163.         <div class="col-md-12 col-sm-12">
  164.             <div class="panel panel-primary" v-if="leads">
  165.                 <div class="panel-heading">
  166.                     Лиды
  167.                     <button style="float: right" v-on:click="prevPeriod" class="btn btn-success">Предыдущий период</button>
  168.                     <br style="clear: both">
  169.                 </div>
  170.                 <div class="panel-body ">
  171.                     <div class="row">
  172.                         <div class="col-md-6 col-sm-12 col-lg-3">
  173.                             <div class="border-left-card-primary">
  174.                                 <div class="card-body">
  175.                                     <div class="no-gutters align-items-center with-icon">
  176.                                         <div class="text-xs font-weight-bold text-primary text-uppercase mb-1" style="height: 30px">Лидов сегодня</div>
  177.                                         <div class="h5 mb-0 font-weight-bold text-gray-800">
  178.                                             <b class="text-primary f-40" v-html="leads.today"></b>
  179.                                         </div>
  180.                                         <div class="card-icon">
  181.                                             <i class="fa fa-archive"></i>
  182.                                         </div>
  183.                                     </div>
  184.                                 </div>
  185.                             </div>
  186.                         </div>
  187.                         <div class="col-md-6 col-sm-12 col-lg-3">
  188.                             <div class="border-left-card-warning">
  189.                                 <div class="card-body">
  190.                                     <div class="no-gutters align-items-center with-icon">
  191.                                         <div class="text-xs font-weight-bold text-primary text-uppercase mb-1" style="height: 30px">Синхронизация с CRM сегодня</div>
  192.                                         <div class="h5 mb-0 font-weight-bold text-gray-800">
  193.                                             <b class="f-40"><span :class="leads.todayInCrm != leads.today ? 'text-warning' : 'text-success'" v-html="leads.todayInCrm"></span>/<span class="text-primary" v-html="leads.today"></span></b>
  194.                                         </div>
  195.                                         <div class="card-icon">
  196.                                             <i class="fa fa-send"></i>
  197.                                         </div>
  198.                                     </div>
  199.                                 </div>
  200.                             </div>
  201.                         </div>
  202.                         <div class="col-md-6 col-sm-12 col-lg-3">
  203.                             <div class="border-left-card-primary">
  204.                                 <div class="card-body">
  205.                                     <div class="no-gutters align-items-center with-icon">
  206.                                         <div class="text-xs font-weight-bold text-primary text-uppercase mb-1" style="height: 30px">Лидов за месяц</div>
  207.                                         <div class="h5 mb-0 font-weight-bold text-gray-800">
  208.                                             <b class="text-primary f-40" v-html="leads.count"></b>
  209.                                         </div>
  210.                                         <div class="card-icon">
  211.                                             <i class="fa fa-calendar"></i>
  212.                                         </div>
  213.                                     </div>
  214.                                 </div>
  215.                             </div>
  216.                         </div>
  217.                         <div class="col-md-6 col-sm-12 col-lg-3">
  218.                             <div class="border-left-card-warning">
  219.                                 <div class="card-body">
  220.                                     <div class="no-gutters align-items-center with-icon">
  221.                                         <div class="text-xs font-weight-bold text-primary text-uppercase mb-1" style="height: 30px">Синхронизация с CRM за месяц</div>
  222.                                         <div class="h5 mb-0 font-weight-bold text-gray-800">
  223.                                             <b class="f-40"><span :class="leads.countInCrm != leads.count ? 'text-warning' : 'text-success'" v-html="leads.countInCrm"></span>/<span class="text-primary" v-html="leads.count"></span></b>
  224.                                         </div>
  225.                                         <div class="card-icon">
  226.                                             <i class="fa fa-send"></i>
  227.                                         </div>
  228.                                     </div>
  229.                                 </div>
  230.                             </div>
  231.                         </div>
  232.                     </div>
  233.                 </div>
  234.                 <div class="panel-body ">
  235.                     <div class="col-md-12 col-lg-6">
  236.                         <div id="chartContainer" style="height: 370px; width: 100%;"></div>
  237.                     </div>
  238.                     <div class="col-md-12 col-lg-6">
  239.                         <div id="chartContainerType" style="height: 370px; width: 100%;"></div>
  240.                     </div>
  241.                 </div>
  242.                 <div class="panel-footer"></div>
  243.             </div>
  244.         </div>
  245.         <div class="col-md-12 col-sm-12">
  246.             <div class="panel panel-primary" v-if="leads">
  247.                 <div class="panel-heading">Лиды по UTM меткам</div>
  248.                 <div class="panel-body ">
  249.                     <div class="col-md-12 col-lg-12" v-if="leadsByUtm">
  250.                         <table class="table table-bordered table-striped table-hover">
  251.                             <thead >
  252.                             <tr>
  253.                                 <th>
  254.                                     Utm source
  255.                                 </th>
  256.                                 <th>
  257.                                     Utm medium
  258.                                 </th>
  259.                                 <th>
  260.                                     Utm content
  261.                                 </th>
  262.                                 <th>
  263.                                     Количество
  264.                                 </th>
  265.                             </tr>
  266.                             </thead>
  267.                             <tbody>
  268.                             <template v-for="(item, index) in leadsByUtm">
  269.                                 <template v-for="(subitem, subindex) in item">
  270.                                     <template v-for="(subbitem, subbindex) in subitem">
  271.                                         <tr>
  272.                                             <td v-html="index"></td>
  273.                                             <td v-html="subindex"></td>
  274.                                             <td v-html="subbitem.name"></td>
  275.                                             <td v-html="subbitem.count"></td>
  276.                                         </tr>
  277.                                     </template>
  278.                                 </template>
  279.                             </template>
  281.                             </tbody>
  282.                         </table>
  283.                     </div>
  284.                 </div>
  285.             </div>
  286.         </div>
  287.     </div>
  289.     {{ sonata_block_render_event('sonata.admin.dashboard.bottom') }}
  291. {% endblock %}
  292. {% block sonata_wrapper %}
  293.     {{ parent() }}
  294.     <script src="{{ asset('/bundles/core/js/vue/vue.js') }}"></script>
  295.     <script src="{{ asset('/bundles/admin/js/dashboard.js') }}"></script>
  296.     <script src="https://canvasjs.com/assets/script/jquery.canvasjs.min.js"></script>
  297.     <script>
  298.         initDashboard({
  299.             initUrl: '{{ path('dashboard_init') }}',
  300.         });
  301.     </script>
  302. {% endblock sonata_wrapper %}