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