templates/shipping.html.twig line 1

Open in your IDE?
  1. {% set sub_title = "出荷手配依頼" %}
  2. {% extends 'inc/layout.html.twig' %}
  5. {% block header %}
  6. <section class="fixedHeader">
  7.   <header class="header" role="banner">
  8.     <div class="header-block">
  9.       <h1 class="header-title"><img src="img/icon/delivery.png" alt="">出荷手配依頼</h1>
  10.       <div class="header-refine">
  11.         <div class="header-refine-ctrl">
  12.         <!--
  13.           <input type="text" name="" value="{{ today }}" class="header-refine-input" readonly>
  14.         -->
  15.           <div class="js-flatpickr">
  16.             <div class="header-refine-ctrl">
  17.             <form action="" method="post">
  18.               <input type="text" name="today" value="{{ today }}" class="header-refine-input -changeable" readonly data-input onchange="this.form.submit()">
  19.             </form>
  20.             </div>
  21.           </div>
  23.         </div>
  24.       </div>
  25.     </div>
  26.     <div class="header-sub">
  27.       <p class="header-back"><a href="./">ダッシュボードへ</a></p>
  28.     </div>
  29.   </header>
  30.   <section class="upperSection">
  31.     <form method="post" id="search-form">
  32.       <input type="hidden" name="search_shipment_id" value="" >
  33.       <input type="hidden" name="search_keyword" value="" >
  34.       <input type="hidden" name="search_okinawa_flg" value="" >
  35.       <input type="hidden" name="search_category_key" value="" >
  36.       <input type="hidden" name="today" value="{{ today }}" >
  37.     </form>
  38.     <ul class="upperSection-link">
  39.       {% for shipment_id, shipment in shipment_list %}
  40.       {% if shipment_count[shipment_id] > 0 %}
  41.       <li><a href="#" data-shipping-id="{{ shipment_id }}" {% if search["shipment_id"] == shipment_id %} class="is-active" {% endif %}>{{ shipment_id }}</a></li>
  42.       {% endif %}
  43.       {% endfor %}
  44.     </ul>
  45.     <div class="upperSection-container">
  46.       <div class="upperSection-search">
  47.         <div class="upperSection-search-keyword">
  48.           <form>
  49.             <div class="upperSection-search-box">
  50.               <input type="search" name="keyword" value="{{ search["keyword"] }}" placeholder="キーワード検索" class="upperSection-search-input">
  51.             </div>
  52.             <div class="upperSection-search-check">
  53.             <label for="check-okinawa-flg-0">
  54.             <input type="radio" id="check-okinawa-flg-0" name="okinawa_flg" value="0" {% if search["okinawa_flg"] == "0" or  search["okinawa_flg"] == "" %} checked {% endif %}>全体合計
  55.             </label> 
  56.             <label for="check-okinawa-flg-2">
  57.             <input type="radio" id="check-okinawa-flg-2" name="okinawa_flg" value="2" {% if search["okinawa_flg"] == "1" %} checked {% endif %}>沖縄除く合計
  58.             </label> 
  59.             <label for="check-okinawa-flg-1">
  60.             <input type="radio" id="check-okinawa-flg-1" name="okinawa_flg" value="1" {% if search["okinawa_flg"] == "1" %} checked {% endif %}>沖縄のみ
  61.             </label> 
  62.             </div>
  63.             <button type="button" class="upperSection-search-submit" id="btn-search">検索</button>
  64.           </form>
  65.         </div>
  66.         <div class="upperSection-search-cat">
  67.           <select name="category" class="upperSection-search-select" id="select-search-category">
  68.             <option value="">▼カテゴリー</option>
  69.             {% for key, value in top_categories %}
  70.             <option value="{{ key }}" {% if search["category_key"] == key %}selected{% endif %}>{{ key }}</option>
  71.             {% endfor %}
  72.           </select>
  73.         </div>
  74.       </div>
  75.       <div class="upperSection-sub">
  76.         <ul class="upperSection-anchor">
  77.         {% for delivery_id, delivery in delivery_list %}
  78.           <li><a href="#anchor-{{ delivery_id }}">{{ delivery }}</a></li>
  79.         {% endfor %}
  80.         </ul>
  81.       </div>
  82.     </div>
  83.   </section>
  84. </section>
  85. {% endblock %}
  87. {% block main %}
  88. <main class="contents" role="main">
  89. <div style="overflow: auto;height: calc(100svh - 180px);">
  90. {% for shipment_id, shipment in shipment_list %}
  91. <section class="shipping" id="shipping-{{ shipment_id }}" data-shipping-id="{{ shipment_id}}" style="display:none;">
  92.   {% for delivery_id, delivery in delivery_list %}
  93.     {% if items[shipment_id][delivery] is defined %}
  94.     <section class="shipping-section" id="anchor-{{ delivery_id }}" data-shipment="{{ shipment }}" data-delivery="{{ delivery }}">
  95.     <h2 class="shipping-heading">{{ delivery }}</h2>
  96.     <table width="100%" border="0" cellspacing="0" cellpadding="0" class="shipping-table">
  97.       <tbody>
  98.         {% for item_code, item in items[shipment_id][delivery] %}
  99.         {% if loop.index % 2 != 0 %}
  100.         <tr>
  101.         {% endif %}
  102.           <th scope="row">{{ item.name }}</th>
  103.           <td>
  104.             <div class="switch-checkbox">
  105.                 <input type="checkbox" value="1" data-key="{{ item.item_key }}" {% if item.checked %} checked {% endif %}>
  106.             </div>
  107.           </td>
  108.           <td>
  109.           <span class="total_qty">{{ item.qty }}</span>
  110.           <span class="okinawa_qty" style="display:none">{{ item.okinawa_qty }}</span>
  111.           <span class="not_okinawa_qty" style="display:none">{{ (item.qty - item.okinawa_qty) }}</span>
  112.           </td>
  114.         {% if loop.index % 2 == 0 %}
  115.         </tr>
  116.         {% endif %}
  117.         {% endfor %}
  118.         {% if (items[shipment_id][delivery]|length) % 2 != 0 %}
  119.         <th scope="row"></th><td></td>
  120.         </tr>
  121.         {% endif %}
  122.       </tbody>
  123.     </table>
  124.     </section>
  125.     {% endif %}
  126.   {% endfor %}
  127. </section>
  128. {% endfor %}
  129. {#
  130. <form action='{{ url('shipping_set_complete') }}' method="post">
  131. <input type="text" name="date" value="{{today}}">
  132. <input type="text" name="checked" value="1">
  133. <input type="text" name="key" value="1-西濃運輸-002-000000-29">
  134. <button>submit</button>
  135. </form>
  136. #}
  138. </div>
  139. </main>
  140. {% endblock %}
  142. {# スタイルシートの設定 #}
  143. {% block stylesheet %}
  144. <link rel="stylesheet" href="common/css/reset.css">
  145. <link rel="stylesheet" href="common/css/common.css">
  146. <link rel="stylesheet" href="common/css/contents.css">
  147. <link rel="stylesheet" href="common/css/flatpickr.min.css">
  149. <style>
  150. .shipping-table th:has(+ td >.switch-checkbox input:checked),
  151. .shipping-table td:has(.switch-checkbox input:checked),
  152. .shipping-table td:has(.switch-checkbox input:checked) + td
  153. {
  154.   background: #e4f0fb;
  155. }
  157. .switch-checkbox input[type=checkbox] {
  158.   position: relative;
  159.   cursor: pointer;
  160.   width: 4.5rem;
  161.   height: 2.1rem;
  162.   border-radius: 5px;
  163.   background-color: #aaa;
  164.   -webkit-appearance: none;
  165.   -moz-appearance: none;
  166.   appearance: none;
  167.   vertical-align: middle;
  168.   transition: .5s;
  169.   padding: 0.1em;
  170. }
  172. .switch-checkbox input[type=checkbox]:checked {
  173.   color: white;
  174. }
  176. .switch-checkbox input[type=checkbox]::before {
  177.   position: absolute;
  178.   top: 50%;
  179.   left: 2rem;
  180.   transform: translateY(-50%);
  181.   width: 2.6rem;
  182.   padding: 0.2rem 0rem;
  183.   background-color: #ddd;
  184.   text-align: center;
  185.   content: '未';
  186.   transition: .5s;
  187.   border-radius: 5px;
  188.   font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "游ゴシック Medium", "Yu Gothic Medium", 游ゴシック体, YuGothic, 游ゴシック, "Yu Gothic", sans-serif;
  189.   font-weight: 600;
  190. }
  193. .switch-checkbox input[type=checkbox]:checked::before {
  194.   background-color: #1b69b6;
  195.   left: 0rem;
  196.   content: '済';
  197. }
  199. </style>
  200. {% endblock %}
  202. {# JavaScriptの設定 #}
  203. {% block javascript %}
  204. <script src="common/js/jquery.js"></script>
  205. <script src="common/js/common.js"></script>
  206. <script src="common/js/utility.js"></script>
  207. <script src="common/js/page_shipping.js?v=1.01"></script>
  208. <script src="common/js/flatpickr.js"></script>
  209. <script>
  210. // 商品データをjsonでセットしておく
  211. const item_list = JSON.parse('{{ json_items|raw }}');
  213. //カテゴリをjsonでセットしておく
  214. const categories = JSON.parse('{{ json_top_categories|raw }}');
  216. const complete_url = '{{ url('shipping_set_complete') }}';
  218. const config = {
  219.   enableTime: false,
  220.   // mode: "range",
  221.   showMonths: 2,
  222.   // minDate: "today",
  223.   wrap: true,
  224.   locale: "ja",
  225.   dateFormat: "Y-m-d",
  226. }
  227. flatpickr('.js-flatpickr', config);
  229. </script>
  230. {% endblock %}