src/Eccube/Resource/template/admin/index.twig line 1

Open in your IDE?
  1. {#
  2. This file is part of EC-CUBE
  4. Copyright(c) EC-CUBE CO.,LTD. All Rights Reserved.
  6. http://www.ec-cube.co.jp/
  8. For the full copyright and license information, please view the LICENSE
  9. file that was distributed with this source code.
  10. #}
  11. {% extends '@admin/default_frame.twig' %}
  13. {% block title %}{{ 'admin.home'|trans }}{% endblock %}
  14. {% block sub_title %}{% endblock %}
  16. {% block javascript %}
  17.     <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
  18.     <script>
  19.         $(function() {
  20.             var options = {
  21.                 legend: {
  22.                     display: false
  23.                 },
  24.                 layout: {
  25.                     padding: {
  26.                         left: 0,
  27.                         right: 0,
  28.                         top: 25,
  29.                         bottom: 0
  30.                     }
  31.                 },
  32.                 tooltips: {
  33.                     callbacks: {
  34.                         label: function(tooltipItem, data) {
  35.                             return '{{ currency_symbol() }}' + tooltipItem.yLabel.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
  36.                         }
  37.                     }
  38.                 },
  39.                 scales: {
  40.                     yAxes: [
  41.                         {
  42.                             id: 'y-axis-1',
  43.                             display: true,
  44.                             ticks: {
  45.                                 beginAtZero: true,
  46.                                 callback: function(label, index, labels) {
  47.                                     if (Math.floor(label) === label) {
  48.                                         return '{{ currency_symbol() }}' + label.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
  49.                                     }
  50.                                 }
  51.                             }
  52.                         }
  53.                     ]
  54.                 }
  55.             };
  57.             var priceBackgroundColor = 'rgba(58, 115, 188, 1)';
  58.             var priceBorderColor = 'rgba(255, 255, 255, 0)';
  60.             $.ajax({
  61.                 url: '{{ url('admin_homepage_sale') }}',
  62.                 type: 'GET',
  63.                 dataType: 'json'
  64.             }).done(function(datas) {
  66.                 for (var i = 0; i < datas.length; i++) {
  67.                     var data = datas[i];
  69.                     var labels = [];
  70.                     var prices = [];
  71.                     var priceBackgroundColors = [];
  72.                     var priceBorderColors = [];
  73.                     Object.keys(data).forEach(function(key) {
  74.                         labels.push(key);
  75.                         prices.push(data[key].price);
  76.                         priceBackgroundColors.push(priceBackgroundColor);
  77.                         priceBorderColors.push(priceBorderColor);
  78.                     });
  80.                     var ctx = $('#chart-' + i)[0].getContext('2d');
  81.                     ctx.canvas.height = 100;
  82.                     var chart = new Chart(ctx, {
  83.                         type: 'bar',
  84.                         data: {
  85.                             labels: labels,
  86.                             datasets: [
  87.                                 {
  88.                                     type: 'bar',
  89.                                     label: '{{ 'admin.home.sales_summary_amount'|trans }}',
  90.                                     data: prices,
  91.                                     backgroundColor: priceBackgroundColors,
  92.                                     borderColor: priceBorderColors,
  93.                                     borderWidth: 1,
  94.                                     yAxisID: 'y-axis-1'
  95.                                 }
  96.                             ]
  97.                         },
  98.                         options: options
  99.                     });
  100.                 }
  101.             }).fail(function(data) {
  102.             }).always(function() {
  103.                 $('#loading').hide();
  104.             });
  106.         });
  108.     </script>
  109. {% endblock javascript %}
  111. {% block main %}
  112.     {% if is_danger_admin_url %}
  113.     <div class="alert alert-warning alert-dismissible fade show m-3" role="alert">
  114.         <i class="fa fa-warning fa-lg mr-2"></i>
  115.         <span class="font-weight-bold">{{ 'admin.common.admin_url_warning'|trans({ '%url%': url('admin_setting_system_security') })|raw }}</span>
  116.         <button class="close" type="button" data-dismiss="alert" aria-label="Close">
  117.             <span aria-hidden="true">×</span>
  118.         </button>
  119.     </div>
  120.     {% endif %}
  121.     <div class="c-contentsArea__cols">
  122.         <div class="c-contentsArea__primaryCol">
  123.             <div class="c-primaryCol">
  124.                 <div class="row">
  125.                     <div class="col-4 mb-4">
  126.                         <div id="order-status" class="card rounded border-0 h-100">
  127.                             <div class="card-header">
  128.                                 <a href="{{ url('admin_order') }}">
  129.                                     <span class="card-title">{{ 'admin.home.order_status_title'|trans }}</span>
  130.                                 </a>
  131.                             </div>
  132.                             <div class="card-body p-0">
  133.                                 {% for OrderStatus in OrderStatuses %}
  134.                                     <div class="d-block border border-top-0 border-left-0 border-right-0">
  135.                                         <a href="{{ url('admin_order', { 'order_status_id': OrderStatus.id }) }}" class="p-3 d-block">
  136.                                             <div class="row align-items-center">
  137.                                                 <div class="col align-middle">
  138.                                                     <span class="align-middle">{{ OrderStatus.name }}</span>
  139.                                                 </div>
  140.                                                 <div class="col-auto text-right align-middle">
  141.                                                     <span class="h4 align-middle font-weight-normal text-dark">{{ Orders is not empty and Orders[OrderStatus.id] is defined ? Orders[OrderStatus.id] : 0 }}</span>
  142.                                                 </div>
  143.                                             </div>
  144.                                         </a>
  145.                                     </div>
  146.                                 {% endfor %}
  147.                             </div>
  148.                         </div><!-- /#order-status -->
  149.                     </div>
  150.                     <div class="col-8 mb-4">
  151.                         <div id="chart-statistics" class="card rounded border-0 h-100">
  152.                             <div class="card-header">
  153.                                 <div class="d-inline-block">
  154.                                     <span class="card-title">{{ 'admin.home.sales_summary_title'|trans }}</span>
  155.                                 </div>
  156.                             </div>
  157.                             <div class="card-body pt-0">
  158.                                 <div class="row text-center border-bottom mb-3">
  159.                                     <div class="col-4 py-2 border-right">
  160.                                         <div class="h3">
  161.                                             {% set amount = salesThisMonth is empty ? 0 : salesThisMonth.order_amount %}
  162.                                             {% set count = salesThisMonth is empty ? 0 : salesThisMonth.order_count %}
  163.                                             {{ 'admin.home.sales_summary_value'|trans({ '%amount%': amount|price, '%count%': count|number_format }) }}
  164.                                         </div>
  165.                                         <small>{{ 'admin.home.sales_summary_this_month'|trans }}</small>
  166.                                     </div>
  167.                                     <div class="col-4 py-2 border-right">
  168.                                         <div class="h3">
  169.                                             {% set amount = salesToday is empty ? 0 : salesToday.order_amount %}
  170.                                             {% set count = salesToday is empty ? 0 : salesToday.order_count %}
  171.                                             {{ 'admin.home.sales_summary_value'|trans({ '%amount%': amount|price, '%count%': count|number_format }) }}
  172.                                         </div>
  173.                                         <small>{{ 'admin.home.sales_summary_today'|trans }}</small>
  174.                                     </div>
  175.                                     <div class="col-4 py-2">
  176.                                         <div class="h3">
  177.                                             {% set amount = salesYesterday is empty ? 0 : salesYesterday.order_amount %}
  178.                                             {% set count = salesYesterday is empty ? 0 : salesYesterday.order_count %}
  179.                                             {{ 'admin.home.sales_summary_value'|trans({ '%amount%': amount|price, '%count%': count|number_format }) }}
  180.                                         </div>
  181.                                         <small>{{ 'admin.home.sales_summary_yesterday'|trans }}</small>
  182.                                     </div>
  183.                                 </div>
  184.                                 <div class="row mb-2">
  185.                                     <div class="col text-center">
  186.                                         <div class="btn-group nav d-inline-flex" id="pills-tab" role="tablist">
  187.                                             <a class="nav-link active btn btn-ec-tab py-2 pl-4 pr-4" id="pills-weekly-tab" data-toggle="pill" href="#pills-weekly" role="tab" aria-controls="pills-weekly" aria-selected="true">
  188.                                                 {{ 'admin.home.sales_summary_weekly'|trans }}
  189.                                             </a>
  190.                                             <a class="nav-link btn btn-ec-tab py-2 pl-4 pr-4" id="pills-monthly-tab" data-toggle="pill" href="#pills-monthly" role="tab" aria-controls="pills-monthly" aria-selected="false">
  191.                                                 {{ 'admin.home.sales_summary_monthly'|trans }}
  192.                                             </a>
  193.                                             <a class="nav-link btn btn-ec-tab py-2 pl-4 pr-4" id="pills-year-tab" data-toggle="pill" href="#pills-year" role="tab" aria-controls="pills-year" aria-selected="false">
  194.                                                 {{ 'admin.home.sales_summary_yearly'|trans }}
  195.                                             </a>
  196.                                         </div>
  197.                                     </div>
  198.                                 </div>
  199.                                 <div class="row">
  200.                                     <div class="col">
  201.                                         <div id="loading" class="text-center pt-5">
  202.                                             <img src="{{ asset('assets/img/loading.gif', 'admin') }}">
  203.                                         </div>
  204.                                         <div class="tab-content" id="pills-tabContent">
  205.                                             <div class="tab-pane fade show active" id="pills-weekly" role="tabpanel" aria-labelledby="pills-weekly-tab">
  206.                                                 <canvas id="chart-0"></canvas>
  207.                                             </div>
  208.                                             <div class="tab-pane fade" id="pills-monthly" role="tabpanel" aria-labelledby="pills-monthly-tab">
  209.                                                 <canvas id="chart-1"></canvas>
  210.                                             </div>
  211.                                             <div class="tab-pane fade" id="pills-year" role="tabpanel" aria-labelledby="pills-year-tab">
  212.                                                 <canvas id="chart-2"></canvas>
  213.                                             </div>
  214.                                         </div>
  215.                                     </div>
  216.                                 </div>
  217.                             </div>
  218.                         </div><!-- /#chart-statistics -->
  219.                     </div>
  220.                 </div>
  221.                 <div class="row">
  222.                     <div class="col mb-4">
  223.                         <div id="shop-statistical" class="card rounded border-0 h-100">
  224.                             <div class="card-header">
  225.                                 <div class="d-inline-block">
  226.                                     <span class="card-title">{{ 'admin.home.shop_status_title'|trans }}</span>
  227.                                 </div>
  228.                             </div>
  229.                             <div class="card-body p-0">
  230.                                 <div class="d-block border border-top-0 border-left-0 border-right-0">
  231.                                     <a href="{{ url('admin_homepage_nonstock') }}" class="p-3 d-block">
  232.                                         <div class="row align-items-center">
  233.                                             <div class="col-2 align-middle text-center">
  234.                                                 <i class="fa fa-inbox fa-2x text-secondary" aria-hidden="true"></i>
  235.                                             </div>
  236.                                             <div class="col p-0">
  237.                                                 <span class="align-middle">{{ 'admin.home.shop_status_out_of_stock'|trans }}</span>
  238.                                             </div>
  239.                                             <div class="col-auto text-right align-middle">
  240.                                                 <span class="h4 align-middle font-weight-normal text-dark">{{ countNonStockProducts|number_format }}</span>
  241.                                             </div>
  242.                                         </div>
  243.                                     </a>
  244.                                 </div>
  245.                                 <div class="d-block border border-top-0 border-left-0 border-right-0">
  246.                                     <a href="{{ url('admin_product') }}" class="p-3 d-block">
  247.                                         <div class="row align-items-center">
  248.                                             <div class="col-2 align-middle text-center">
  249.                                                 <i class="fa fa-cubes fa-2x text-secondary" aria-hidden="true"></i>
  250.                                             </div>
  251.                                             <div class="col p-0">
  252.                                                 <span class="align-middle">{{ 'admin.home.shop_status_products'|trans }}</span>
  253.                                             </div>
  254.                                             <div class="col-auto text-check align-middle">
  255.                                                 <span class="h4 align-middle font-weight-normal text-dark">{{ countProducts|number_format }}</span>
  256.                                             </div>
  257.                                         </div>
  258.                                     </a>
  259.                                 </div>
  260.                                 <div class="d-block border border-top-0 border-left-0 border-right-0">
  261.                                     <a href="{{ url('admin_homepage_customer') }}" class="p-3 d-block">
  262.                                         <div class="row align-items-center">
  263.                                             <div class="col-2 align-middle text-center">
  264.                                                 <i class="fa fa-users fa-2x text-secondary" aria-hidden="true"></i>
  265.                                             </div>
  266.                                             <div class="col p-0">
  267.                                                 <span class="align-middle">{{ 'admin.home.shop_status_customers'|trans }}</span>
  268.                                             </div>
  269.                                             <div class="col-auto text-check align-middle">
  270.                                                 <span class="h4 align-middle font-weight-normal text-dark">{{ countCustomers|number_format }}</span>
  271.                                             </div>
  272.                                         </div>
  273.                                     </a>
  274.                                 </div>
  275.                             </div>
  276.                         </div><!-- /#shop-statistical -->
  277.                     </div>
  278.                     <div class="col mb-4">
  279.                         <div id="ec-cube-plugin" class="card rounded border-0 h-100">
  280.                             <div class="card-header border-bottom-0">
  281.                                 <div class="d-inline-block">
  282.                                     <span class="card-title">{{ 'admin.home.recommend_plugins_title'|trans }}</span>
  283.                                 </div>
  284.                             </div>
  285.                             <div class="card-body py-0" style="max-height: 395px; overflow-y: scroll">
  286.                                 {% for plugin in recommendedPlugins %}
  287.                                     <div class="row py-3 border border-bottom-0 border-left-0 border-right-0">
  288.                                         <div class="col-5 col-md-4">
  289.                                             <a href="#" data-toggle="modal" data-target="#searchPluginModal-{{ plugin.id }}">
  290.                                                 <img src="{{ plugin.image }}" class="w-100" alt="{{ plugin.name }}">
  291.                                             </a>
  292.                                         </div>
  293.                                         <div class="col-7 col-md-8 pl-0">
  294.                                             <a href="#" data-toggle="modal" data-target="#searchPluginModal-{{ plugin.id }}">{{ plugin.name }}</a>
  295.                                             <p class="m-0 pt-2">
  296.                                                 {{ plugin.short_description }}
  297.                                             </p>
  298.                                         </div>
  299.                                     </div>
  300.                                     {{ include('@admin/Store/plugin_detail_modal.twig', {'item': plugin} ) }}
  301.                                 {% endfor %}
  302.                             </div>
  303.                             <div class="card-footer">
  304.                                 > <a href="{{ url('admin_store_plugin_owners_search_page') }}">{{ 'admin.home.recommend_plugins.owner_store'|trans }}</a>
  305.                             </div>
  306.                         </div><!-- /#ec-cube-plugin -->
  307.                     </div>
  308.                     <div class="col mb-4">
  309.                         <div id="ec-cube-news" class="card rounded border-0 h-100">
  310.                             <div class="card-header">
  311.                                 <div class="d-inline-block">
  312.                                     <span class="card-title">{{ 'admin.home.news_title'|trans }}</span>
  313.                                 </div>
  314.                             </div>
  315.                             <div class="card-body p-0">
  316.                                 <iframe name="information" class="link_list_wrap" src="{{ eccube_config.eccube_info_url }}" style="width:100%; border:0; min-height:390px;"></iframe>
  317.                             </div>
  318.                             <div class="card-footer" style="height:43px;box-sizing: border-box;"></div>
  319.                         </div><!-- /#ec-cube-news -->
  320.                     </div>
  321.                 </div><!-- /.row -->
  322.             </div><!-- /.c-primaryCol -->
  323.         </div><!-- /.c-contentsArea__primaryCol -->
  324.     </div><!-- /.c-contentsArea__cols -->
  326. {% endblock %}