app/Plugin/tbsFeaturePage/Resource/template/admin/index.twig line 1

Open in your IDE?
  1. {% extends '@admin/default_frame.twig' %}
  3. {% set menus = ['content', 'feature'] %}
  4. {% block title %}{{ 'tbs_feature_page.admin.feature.title'|trans }}{% endblock %}
  5. {% block sub_title %}{{ 'tbs_feature_page.admin.feature.sub_title'|trans }}{% endblock %}
  7. {% block stylesheet %}
  8. <!--
  9.     <link rel="stylesheet" href="{{ asset('assets/css/tempusdominus-bootstrap-4.min.css', 'admin') }}">
  10. -->
  11.     <link rel="stylesheet" href="/html/template/admin/assets/css/tempusdominus-bootstrap-4.min.css">
  13.     <style type="text/css">
  14.         .datepicker-days th.dow:first-child,
  15.         .datepicker-days td:first-child {
  16.             color: #f00;
  17.         }
  19.         .datepicker-days th.dow:last-child,
  20.         .datepicker-days td:last-child {
  21.             color: #00f;
  22.         }
  23.     </style>
  24. {% endblock stylesheet %}
  26. {% block javascript %}
  27. <!--
  28.     <script src="{{ asset('assets/js/vendor/jquery.ui/jquery.ui.core.min.js', 'admin') }}"></script>
  29.     <script src="{{ asset('assets/js/vendor/jquery.ui/jquery.ui.widget.min.js', 'admin') }}"></script>
  30.     <script src="{{ asset('assets/js/vendor/jquery.ui/jquery.ui.mouse.min.js', 'admin') }}"></script>
  31.     <script src="{{ asset('assets/js/vendor/jquery.ui/jquery.ui.sortable.min.js', 'admin') }}"></script>
  32. -->
  33.     <script src="/html/plugin/tbsFeaturePage/assets/js/vendor/jquery.ui/jquery.ui.core.min.js"></script>
  34.     <script src="/html/plugin/tbsFeaturePage/assets/js/vendor/jquery.ui/jquery.ui.widget.min.js"></script>
  35.     <script src="/html/plugin/tbsFeaturePage/assets/js/vendor/jquery.ui/jquery.ui.mouse.min.js"></script>
  36.     <script src="/html/plugin/tbsFeaturePage/assets/js/vendor/jquery.ui/jquery.ui.sortable.min.js"></script>
  37.     <script src="/html/template/admin/assets/js/vendor/moment.min.js"></script>
  38.     <script src="/html/template/admin/assets/js/vendor/tempusdominus-bootstrap-4.min.js"></script>
  40.     <script>
  41.         $(function() {
  42.             // 画面の中のrank一覧を保持
  43.             var oldRanks = [];
  44.             $(".table .sortable-item > tr").each(function() {
  45.                 oldRanks.push(this.dataset.rank);
  46.             });
  47.             // rsort
  48.             oldRanks.sort(function (a, b) {
  49.                 return a - b;
  50.             }).reverse();
  51.             // Drag and Drop
  52.             $(".table").sortable({
  53.                 items: '.sortable-item > tr',
  54.                 cursor: 'move',
  55.                 update: function(e, ui) {
  56.                     $("body").append($('<div class="modal-backdrop show"></div>'));
  57.                     updateRank();
  58.                 }
  59.             });
  60.             // 並び替え後にrankを更新
  61.             var updateRank = function() {
  62.                 var newRanks = {};
  63.                 var i = 0;
  64.                 $(".table .sortable-item > tr").each(function() {
  65.                     newRanks[this.dataset.featureid] = oldRanks[i];
  66.                     i++;
  67.                 });
  69.                 $.ajax({
  70.                     url: '{{ url('tbs_feature_page_admin_feature_move') }}',
  71.                     type: 'POST',
  72.                     data: newRanks
  73.                 }).always(function() {
  74.                     $(".modal-backdrop").remove();
  75.                 });
  76.             };
  78.             $('.delete-feature').click(function () {
  79.                 var modalId = $(this).data('target');
  80.                 $(modalId).css('opacity', 1.0);
  81.                 $(modalId).children('div.modal-dialog').css('transform', 'none');
  82.                 $(modalId).show();
  83.             });
  84.             $('.close-modal').click(function () {
  85.                 var p = $(this).parents('div.modal');
  86.                 p.css('opacity', 0.0);
  87.                 p.hide();
  88.             });
  89.         });
  90.     </script>
  91. {% endblock javascript %}
  93. {% block main %}
  94. <div class="c-contentsArea__cols">
  95.     <div class="c-contentsArea__primaryCol">
  96.         <div class="c-primaryCol">
  97.             <div class="d-block mb-3">
  98.                 <a id="addNew" class="btn btn-ec-regular"
  99.                    href="{{ url('tbs_feature_page_admin_feature_new') }}">{{ 'admin.common.create__new'|trans }}</a>
  100.             </div>
  101.             <div class="card rounded border-0 mb-4">
  102.                 <div class="card-body p-0">
  103.                     <table class="table table-sm">
  104.                         <thead>
  105.                             <tr>
  106.                                 <th class="col-auto"></th>
  107.                                 <th class="col-auto">{{ 'tbs_feature_page.admin.feature.th_id'|trans }}</th>
  108.                                 <th class="col-auto">{{ 'tbs_feature_page.admin.feature.th_title'|trans }}</th>
  109.                                 <th class="col-auto">{{ 'tbs_feature_page.admin.feature.th_url'|trans }}</th>
  110.                                 <th class="col-auto">{{ 'tbs_feature_page.admin.feature.th_banner'|trans }}</th>
  111.                                 <th class="col-auto">{{ 'tbs_feature_page.admin.feature.th_display_status'|trans }}</th>
  112.                                 <th class="col-auto">{{ 'tbs_feature_page.admin.feature.th_display_period'|trans }}</th>
  113.                                 <th class="col-auto">&nbsp;</th>
  114.                             </tr>
  115.                         </thead>
  116.                         <tbody class="sortable-item">
  117.                         {% for Feature in Features %}
  118.                             <tr data-featureid="{{ Feature.id }}" data-rank="{{ Feature.rank }}">
  119.                                 <td class="col-auto"><i class="fa fa-bars text-ec-gray"></i></td>
  120.                                 <td class="col-auto">{{ Feature.id }}</td>
  121.                                 <td class="col-auto">
  122.                                     <a href="{{ url('tbs_feature_page_admin_feature_edit', { id : Feature.id }) }}">{{ Feature.title }}</a>
  123.                                 </td>
  124.                                 <td class="col-auto">{{ Feature.url }}</td>
  125.                                 <td class="col-auto">
  126.                                     <a href="{{ url('tbs_feature_page_admin_feature_edit', { id : Feature.id }) }}">
  127.                                     {% if Feature.banner_file_name %}
  128.                                         <img src="{{ asset('tbsFeaturePage/save_image/' ~ Feature.banner_file_name, 'plugin') }}" style="width:265px;" />
  129.                                     {% endif %}
  130.                                     </a>
  131.                                 </td>
  132.                                 <td class="col-auto">{{ Feature.Status.name }}</td>
  133.                                 <td class="col-auto">{{ Feature.start_date|date_format }} {{ 'admin.common.separator__range'|trans }} {{ Feature.end_date|date_format }}</td>
  134.                                 <td class="col-auto icon_edit text-right">
  135.                                     <a href="{{ url('tbs_feature_page_admin_feature_edit', { id : Feature.id }) }}"
  136.                                        class="btn btn-ec-actionIcon mr-3 action-edit"
  137.                                        data-toggle="tooltip"
  138.                                        data-placement="top" title=""
  139.                                        data-original-title=""><i class="fa fa-pencil fa-lg text-secondary"></i></a>
  141.                                     <a href="{{ url('feature_detail', {url:Feature.url}) }}"
  142.                                        class="btn btn-ec-actionIcon mr-3 action-edit"
  143.                                        target="_blank"><i class="fa fa-eye fa-lg text-secondary" aria-hidden="true"></i></a>
  145.                                     <a
  146.                                         class="btn btn-ec-actionIcon mr-3 delete-feature"
  147.                                         data-toggle="modal"
  148.                                         data-target="#confirmModal-{{ Feature.id }}"
  149.                                         data-toggle="tooltip"
  150.                                         data-placement="top"><i class="fa fa-close fa-lg text-secondary"></i></a>
  151.                                     <div class="modal fade" id="confirmModal-{{ Feature.id }}" tabindex="-1"
  152.                                          role="dialog"
  153.                                          aria-labelledby="confirmModal-{{ Feature.id }}" aria-hidden="true">
  154.                                         <div class="modal-dialog" role="document">
  155.                                             <div class="modal-content">
  156.                                                 <div class="modal-header">
  157.                                                     <h5 class="modal-title font-weight-bold">
  158.                                                         {{ 'tbs_feature_page.admin.feature.delete_confirm_title'|trans }}</h5>
  159.                                                     <button class="close close-modal" type="button"
  160.                                                             data-dismiss="modal"
  161.                                                             aria-label="Close"><span
  162.                                                                 aria-hidden="true">×</span>
  163.                                                     </button>
  164.                                                 </div>
  165.                                                 <div class="modal-body text-left">
  166.                                                     <p class="text-left">
  167.                                                         {{ 'tbs_feature_page.admin.feature.delete_confirm_message'|trans }}</p>
  168.                                                 </div>
  169.                                                 <div class="modal-footer">
  170.                                                     <button class="btn btn-ec-sub close-modal" type="button"
  171.                                                             data-dismiss="modal">{{ 'tbs_feature_page.admin.feature.delete_cancel'|trans }}
  172.                                                     </button>
  173.                                                     <a
  174.                                                             href="{{ url('tbs_feature_page_admin_feature_delete', { id : Feature.id }) }}"
  175.                                                             class="btn btn-ec-delete"
  176.                                                             data-confirm="false"
  177.                                                             {{ csrf_token_for_anchor() }}
  178.                                                             data-method="delete">
  179.                                                         {{ 'tbs_feature_page.admin.feature.delete'|trans }}
  180.                                                     </a>
  181.                                                 </div>
  182.                                             </div>
  183.                                         </div>
  184.                                     </div>
  185.                                 </td>
  186.                             </tr>
  187.                         {% endfor %}
  188.                         </tbody>
  189.                     </table>
  190.                 </div>
  191.             </div>
  192.         </div>
  193.     </div>
  194. </div>
  195. {% endblock %}