templates/plan.html.twig line 1

Open in your IDE?
  1. {% set sub_title = "メニュー" %}
  2. {% extends 'inc/layout.html.twig' %}
  3. {% block header %}
  4. <section class="fixedHeader">
  5.   <header class="header" role="banner">
  6.     <div class="header-block">
  7.       <h1 class="header-title"><img src="img/icon/timetable.png" alt="">生産計画管理</h1>
  8.       <div class="header-refine">
  9.         <div class="js-flatpickr">
  10.           <div class="header-refine-ctrl">
  11.           <form action="" method="post" id="search-form">
  12.             <input type="text" name="search_date" value="{{ data.date }}" class="header-refine-input -changeable" readonly data-input onchange="this.form.submit()">
  13.             <input type="hidden" name="search_machine" value="{{ data.machine }}" />
  14.           </form>
  15.           </div>
  16.         </div>
  17.       </div>
  18.       <div class="header-alert">
  19.         <p class="header-alert-text">当日手配状況</p>
  20.         <span  class="header-alert-icon -done" style="display:none">手配済</span>
  21.         <button type="button" class="header-alert-icon -caution" data-remodal-target="modal-product" style="display:none">未手配あり</button>
  22.       </div>
  23.       {% if data.unarrangement["1号機"] is defined %}
  24.       <section class="remodal -large" data-remodal-id="modal-product">
  25.         <section class="modalSection">
  26.           <h3 class="modalSection-heading">全未手配リスト</h3>
  27.           <div class="modalSection-block">
  28.             <table width="100%" border="0" cellspacing="0" cellpadding="0" class="productTable">
  29.               <tbody data-moc='
  30.                 <tr>
  31.                   <th scope="row">__item_name__</th>
  32.                   <td>__diff__/__numm__</td>
  33.                 </tr>
  34.               '>
  35.               </tbody>
  36.             </table>
  37.           </div>
  38.           <div class="modalSection-links -center">
  39.             <div class="modalSection-links-small"><button type="button" class="modalSection-submit-btn -cancel" data-remodal-action="close"><span>閉じる</span></button></div>
  40.           </div>
  41.         </section>
  42.         <button data-remodal-action="close" class="remodal-close">閉じる</button>
  43.       </section>
  44.       {% endif %}
  45.     </div>
  46.     <div class="header-sub">
  47.       <p class="header-back"><a href="./">ダッシュボードへ</a></p>
  48.     </div>
  49.   </header>
  50.   <section class="upperSection">
  51.     <ul class="upperSection-link">
  52.     {% for machine in machine_list %}
  53.       <li><a href="#" {% if machine == search.machine %}class="is-active"{% endif %} data-machine="{{ machine }}">{{ machine }}</a></li>
  54.     {% endfor %}
  55.     </ul>
  56.   </section>
  57. </section>
  58. {% endblock %}
  59. {% block main %}
  60. <main class="contents" role="main">
  61.   <section class="plan">
  62.     <div class="plan-container">
  63.       <section class="plan-first">
  64.         <div class="plan-header -orange">
  65.           <h2 class="plan-header-title"><span class="line-name">1号機</span> 手配状況</h2>
  66.         </div>
  67.         <div class="planProduct">
  68.           <div class="planProduct-container">
  69.             <div class="planProduct-list"  data-moc='
  70.               <label class="js-sortable-item">
  71.                 <dl class="planProduct-data">
  72.                   <dd class="planProduct-data-radio"><input type="radio" name="item[]" class="js-itemRadio" value="__uniq_key__" data-date="__arrangement_date__"></dd>
  73.                   <dd class="planProduct-data-id">__item_code__</dd>
  74.                   <dt class="planProduct-data-title">__item_name__<br>No.__no__</dt>
  75.                   <dd class="planProduct-data-num">__num__</dd>
  76.                   <dd class="planProduct-data-sort js-sortable-handle"><img src="img/icon/sort.png" alt=""></dd>
  77.                 </dl>
  78.               </label>
  79.             '>
  80.             </div>
  81.           </div>
  82.         </div>
  83.       </section>
  84.       <section class="plan-second">
  85.         <div class="plan-header -gray">
  86.           <h2 class="plan-header-title">操作</h2>
  87.         </div>
  88.         <div class="planCtrl">
  89.           <div class="planCtrl-container">
  90.             <form>
  91.               <input type="hidden" name="line_name" value="">
  92.               <input type="hidden" name="key" value="">
  93.               <input type="hidden" name="item_code" value="">
  94.               <input type="hidden" name="arrangement_date" value="">
  95.               <h3 class="planCtrl-title">&nbsp;</h3>
  96.               <div class="planCtrl-block">
  97.                 <dl class="planCtrl-item">
  98.                   <dt>No</dt>
  99.                   <dd>
  100.                     <div class="planCtrl-box">
  101.                       <input type="tel" name="no_start" class="planCtrl-input -small js-sampleInput02_1">
  102.                       <div class="planCtrl-kara">~</div>
  103.                       <input type="tel" name="no_end" class="planCtrl-input -small js-sampleInput02_2">
  104.                     </div>
  105.                   </dd>
  106.                 </dl>
  107.                 <dl class="planCtrl-item">
  108.                   <dt>ケース</dt>
  109.                   <dd>
  110.                     <input type="tel" name="qty" class="planCtrl-input -full js-sampleInput01" readonly>
  111.                   </dd>
  112.                 </dl>
  113.                 <div class="planCtrl-quickly">
  114.                   <label><input type="checkbox" name="quickly">急ぎ</label>
  115.                 </div>
  116.                 <div class="planCtrl-submit">
  117.                   <button type="button" class="planCtrl-submit-btn"><span>手配・編集</span></button>
  118.                   <button type="button" class="planCtrl-cancel-btn">取消</button>
  119.                   <span class="planCtl-cancel-error"></span>
  120.                 </div>
  121.               </div>
  122.               <section class="remodal" data-remodal-id="modal-regist">
  123.                 <section class="modalSection">
  124.                   <h3 class="modalSection-heading">手配・編集</h3>
  125.                   <p class="modalSection-text">
  126.                     設定しますがよろしいですか?<br>
  127.                   </p>
  128.                   <div class="modalSection-links">
  129.                     <div class="modalSection-links-small"><button type="button" class="modalSection-submit-btn -cancel" data-remodal-action="close"><span>キャンセル</span></button></div>
  130.                     <div class="modalSection-links-large"><button type="button" class="modalSection-submit-btn" data-remodal-action="close"><span>設定する</span></button></div>
  131.                   </div>
  132.                 </section>
  133.               </section>
  134.               <section class="remodal" data-remodal-id="modal-cancel">
  135.                 <section class="modalSection">
  136.                   <h3 class="modalSection-heading">取消</h3>
  137.                   <p class="modalSection-text">
  138.                     取り消しを実行します。<br>
  139.                     この操作はやり直せません。本当に取り消しますか?
  140.                   </p>
  141.                   <div class="modalSection-links">
  142.                     <div class="modalSection-links-small"><button type="button" class="modalSection-submit-btn -cancel" data-remodal-action="close"><span>キャンセル</span></button></div>
  143.                     <div class="modalSection-links-large"><button type="button" class="modalSection-submit-btn" data-remodal-action="close"><span>取消する</span></button></div>
  144.                   </div>
  145.                 </section>
  146.               </section>
  147.             </form>
  148.           </div>
  149.         </div>
  150.       </section>
  151.       
  152.       <section class="plan-third">
  153.         <div class="plan-header -blue">
  154.           <h2 class="plan-header-title"><span class="line-name"></span> 生産可能商品リスト</h2>
  155.         </div>
  156.         <div class="planItem" style="height: calc(100svh - 210px)">
  157.           <div class="planItem-container">
  158.             <div class="planItem-header">
  159.               <p class="planItem-header-title01">商品名</p>
  160.               <p class="planItem-header-title02">未手配数</p>
  161.             </div>
  162.             <div class="planItem-list" data-moc='
  163.               <label>
  164.                 <dl class="planItem-data">
  165.                   <dd class="planItem-data-radio"><input type="radio" name="item[]" value="__item_code__" data-date="{{ data.date }}" class="js-itemRadio"></dd>
  166.                   <dt class="planItem-data-title">__item_name__</dt>
  167.                   <dd class="planProduct-data-spec">__film__</dd>
  168.                   <dd class="planProduct-data-placement">__film_addr__</dd>
  169.                   <dd class="planItem-data-num">__item_un_arrangement__</dd>
  170.                 </dl>
  171.               </label>
  172.             '>
  173.             </div>
  174.           </div>
  175.         </div>
  176.       </section>
  177.     </div>
  178.   </section>
  179. </main>
  180. {% endblock %}
  181. {# スタイルシートの設定 #}
  182. {% block stylesheet %}
  183. <link rel="stylesheet" href="common/css/reset.css">
  184. <link rel="stylesheet" href="common/css/common.css">
  185. <link rel="stylesheet" href="common/css/contents.css">
  186. <link rel="stylesheet" href="common/css/remodal.css">
  187. <link rel="stylesheet" href="common/css/flatpickr.min.css">
  188. <style>
  189. .planProduct-date-header{
  190.     background: #fbd58f;
  191.     padding: 5px 10px;
  192.     font-size: 15px;
  193.     font-weight: 600;
  194. }
  195. .planItem-date-header{
  196.     background: #dfeefd;
  197.     padding: 5px 10px;
  198.     font-size: 15px;
  199.     font-weight: 600;
  200. }
  201. .upperSection-link li a.not_exists{
  202.   color: #bbb;
  203. }
  204. </style>
  205. {% endblock %}
  206. {# JavaScriptの設定 #}
  207. {% block javascript %}
  208. <script src="common/js/jquery.js"></script>
  209. <script src="common/js/jquery-ui.min.js"></script>
  210. <script src="common/js/flatpickr.js"></script>
  211. <script src="common/js/remodal.js"></script>
  212. <script src="common/js/common.js"></script>
  213. <script src="common/js/utility.js"></script>
  214. <script src="common/js/page_plan.js?v=1.02"></script>
  215. <script src="common/js/jquery.ui.touch-punch.min.js"></script>
  216. <script>
  217. $(function(){
  218.     $('body').on('click', '.js-itemRadio', function () {
  219.       $('label').removeClass('is-active');
  220.       $(this).parents('label').addClass('is-active');
  221.     });
  222.     const config = {
  223.       enableTime: false,
  224.       // mode: "range",
  225.       showMonths: 2,
  226.       // minDate: "today",
  227.       wrap: true,
  228.       locale: "ja",
  229.       dateFormat: "Y-m-d",
  230.     }
  231.     flatpickr('.js-flatpickr', config);
  232. });
  233. //手配処した情報を送る先のURL
  234. const edit_url = '{{ url('set_plan') }}';
  235. const del_url = '{{ url('del_plan') }}';
  236. const sort_url = '{{ url('sort_plan') }}';
  237. // 商品データをjsonでセットしておく
  238. const item_list = JSON.parse('{{ json_items|raw }}');
  239. // 未手配リストをjsonでセットしておく
  240. {% if data.unarrangement %}
  241. let unarrangement_list = JSON.parse('{{ json_unarrangement|raw }}');
  242. {% else %}
  243. let unarrangement_list = {};
  244. {% endif %}
  245. // 手配済みリストをjsonでセットしておく
  246. {% if data.arrangement %}
  247. let arrangement_list = JSON.parse('{{ json_arrangement|raw }}');
  248. {% else %}
  249. let arrangement_list = {};
  250. {% endif %}
  251. </script>
  252. {% endblock %}