templates/order.html.twig line 1

1. {% set sub_title = "メニュー" %}
2. {% extends 'inc/layout.html.twig' %}
4. {% block header %}
5. <section class="fixedHeader">
6.   <header class="header" role="banner">
7.     <div class="header-block">
8.       <h1 class="header-title"><img src="img/icon/desktops.png" alt="">受注状況</h1>
9.       <div class="header-refine">
10.         <div class="js-flatpickr">
11.           <div class="header-refine-ctrl">
12.           <form action="" method="post" id="search-form">
13.             <input type="text" name="search_date" value="{{ data.date }}" class="header-refine-input -changeable" readonly data-input onchange="this.form.submit()">
14.             <input type="hidden" name="sort_key" value="{{ data.sort_key }}" />
15.             <input type="hidden" name="search_keyword" value="" >
16.             <input type="hidden" name="search_category_501" value="" >
17.           </form>
18.           </div>
19.         </div>
20.       </div>
21.     </div>
22.     <div class="header-sub">
23.       <p class="header-back"><a href="./">ダッシュボードへ</a></p>
24.     </div>
25.   </header>
26.   <section class="upperSection">
27.     <div class="upperSection-container">
28.       <div class="upperSection-search">
29.         <div class="upperSection-search-keyword">
30.           <form>
31.             <div class="upperSection-search-box">
32.               <input type="search" name="keyword" value="{{ search.keyword }}" placeholder="キーワード検索" class="upperSection-search-input">
33.             </div>
35.             <div class="upperSection-search-check"><label>
36.             <input type="checkbox" id="check-category-501" name="category_501" value="501" {{ search.category_501 ? 'checked' : '' }}/>
37.             <label for="check-category-501">中間品原反</label>
38.             </div>
39.             <button type="button" class="upperSection-search-submit" id="btn-search">検索</button>
42.             <div class="upperSection-search-cat">
43.               <select name="category" class="upperSection-search-select" id="select-search-category">
44.                 <option value="">▼カテゴリー</option>
45.                 {% for key, value in top_categories %}
46.                 <option value="{{ key }}" {% if search["category_key"] == key %}selected{% endif %}>{{ key }}</option>
47.                 {% endfor %}
48.               </select>
49.             </div>
51.           </form>
52.         </div>
53.       </div>
54.     </div>
55.   </section>
56. </section>
57. {% endblock %}
60. {% block main %}
61. <main class="contents" role="main">
63. <section class="order" style="height: calc(100svh - 150px)">
64. <table width="1950px" border="0" cellspacing="0" cellpadding="0" class="order-table">
65.   <thead>
66.     <tr>
67.       <th class="-base"> </th>
68.       <th class="-sub">目安<br>ストック在庫</th>
69.       <th class="-stock item-sort" data-sort="stock">現在庫数</th>
70.       <th class="-shortage item-sort" data-sort="day0">本日の<br>出荷予定数</th>
71.       <th class="-shortage item-sort" data-sort="day0_diff"><p>本日の<br>出荷不足数</p></th>
72.       <th class="-planned item-sort" data-sort="later">明日以降の<br>出荷総数</th>
73.       <th class="-planned item-sort" data-sort="later_diff">明日以降の<br>不足数</th>
74.       <th class="-sub item-sort" data-sort="day1">+1日</th>
75.       <th class="-sub item-sort" data-sort="day2">+2日</th>
76.       <th class="-sub item-sort" data-sort="day3">+3日</th>
77.       <th class="-sub item-sort" data-sort="day4">+4日</th>
78.       <th class="-sub item-sort" data-sort="day5">+5日</th>
79.       <th class="-sub item-sort" data-sort="day6">+6日</th>
80.       <th class="-sub item-sort" data-sort="day7">+7日</th>
81.       <th class="-sub item-sort" data-sort="day8">+8日</th>
82.       <th class="-sub item-sort" data-sort="day9">+9日</th>
83.       <th class="-sub item-sort" data-sort="day10">+10日</th>
84.     </tr>
85.   </thead>
86.   <tbody data-moc='
87.     <tr data-name="__name__" data-category_code="__code__">
88.       <th class="-base">__name__<br>__film__ / __film_addr__</th>
89.       <td class="-estimated">__limit__</td>
90.       <td class="-stock">__stock__</td>
91.       <td class="-shortage">__day0__</td>
92.       <td class="-shortage">__day0_diff__</td>
93.       <td class="-planned">__later__</td>
94.       <td class="-planned">__later_diff__</td>
95.       <td class="-sub"><!--__day1_diff__-->__day1__</td>
96.       <td class="-sub"><!--__day2_diff__-->__day2__</td>
97.       <td class="-sub"><!--__day3_diff__-->__day3__</td>
98.       <td class="-sub"><!--__day4_diff__-->__day4__</td>
99.       <td class="-sub"><!--__day5_diff__-->__day5__</td>
100.       <td class="-sub"><!--__day6_diff__-->__day6__</td>
101.       <td class="-sub"><!--__day7_diff__-->__day7__</td>
102.       <td class="-sub"><!--__day8_diff__-->__day8__</td>
103.       <td class="-sub"><!--__day9_diff__-->__day9__</td>
104.       <td class="-sub"><!--__day10_diff__-->__day10__</td>
105.     </tr>
106.   '>
107.   {#
108.   {% for key, value in data.item %}
109.     <tr data-name="{{ value.name }}">
110.       <th class="-base">{{ value.name }}</th>
111.       <td class="-stock">{{ value.limit|number_format }}</td>
112.       <td class="-stock">{{ value.stock }}</td>
113.       <td class="-shortage">{{ value.day0 }}</td>
114.       <td class="-shortage">{{ value.day_diff0 }}</td>
115.       <td class="-planned">{{ value.later }}</td>
116.       <td class="-planned">{{ value.later_diff }}</td>
117.       <td class="-sub">{{ value.day1 }}</td>
118.       <td class="-sub">{{ value.day2 }}</td>
119.       <td class="-sub">{{ value.day3 }}</td>
120.       <td class="-sub">{{ value.day4 }}</td>
121.       <td class="-sub">{{ value.day5 }}</td>
122.     </tr>
123.   {% endfor %}
124.   #}
125.   </tbody>
126. </table>
128. </section>
130. </main>
131. {% endblock %}
133. {# スタイルシートの設定 #}
134. {% block stylesheet %}
135. <link rel="stylesheet" href="common/css/reset.css">
136. <link rel="stylesheet" href="common/css/common.css">
137. <link rel="stylesheet" href="common/css/contents.css?v=1.01">
138. <link rel="stylesheet" href="common/css/flatpickr.min.css">
139. <style>
140. .item-sort{
141.    position: relative;
142.    padding-right: 0 5px !important;
143.    cursor: pointer;
144. }
145. .item-sort::after{
146.   content: "▽";
147.   position: absolute;
148.   top: 50%;
149.   right: 5px;
150.   margin-top: -9px;
151. }
152. .item-sort-active::after{
153.   content: "▼";
154. }
156. </style>
157. {% endblock %}
159. {# JavaScriptの設定 #}
160. {% block javascript %}
161. <script src="common/js/jquery.js"></script>
162. <script src="common/js/flatpickr.js"></script>
163. <script src="common/js/common.js"></script>
164. <script src="common/js/utility.js"></script>
165. <script src="common/js/page_order.js?v=1.03"></script>
166. <script>
168. const config = {
169.   enableTime: false,
170.   // mode: "range",
171.   showMonths: 2,
172.   // minDate: "today",
173.   wrap: true,
174.   locale: "ja",
175.   dateFormat: "Y-m-d",
176. }
177. flatpickr('.js-flatpickr', config);
179. const item_list = {{ data.item|json_encode|raw }};
180. //カテゴリをjsonでセットしておく
181. const categories = JSON.parse('{{ json_top_categories|raw }}');
182. </script>
183. {% endblock %}