{% set sub_title = "メニュー" %}
{% extends 'inc/layout.html.twig' %}
{% block header %}
<section class="fixedHeader">
<header class="header" role="banner">
<div class="header-block">
<h1 class="header-title"><img src="img/icon/timetable.png" alt="">生産計画管理</h1>
<div class="header-refine">
<div class="js-flatpickr">
<div class="header-refine-ctrl">
<form action="" method="post" id="search-form">
<input type="text" name="search_date" value="{{ data.date }}" class="header-refine-input -changeable" readonly data-input onchange="this.form.submit()">
<input type="hidden" name="search_machine" value="{{ data.machine }}" />
</form>
</div>
</div>
</div>
<div class="header-alert">
<p class="header-alert-text">当日手配状況</p>
<span class="header-alert-icon -done" style="display:none">手配済</span>
<button type="button" class="header-alert-icon -caution" data-remodal-target="modal-product" style="display:none">未手配あり</button>
</div>
{% if data.unarrangement["1号機"] is defined %}
<section class="remodal -large" data-remodal-id="modal-product">
<section class="modalSection">
<h3 class="modalSection-heading">全未手配リスト</h3>
<div class="modalSection-block">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="productTable">
<tbody data-moc='
<tr>
<th scope="row">__item_name__</th>
<td>__diff__/__numm__</td>
</tr>
'>
</tbody>
</table>
</div>
<div class="modalSection-links -center">
<div class="modalSection-links-small"><button type="button" class="modalSection-submit-btn -cancel" data-remodal-action="close"><span>閉じる</span></button></div>
</div>
</section>
<button data-remodal-action="close" class="remodal-close">閉じる</button>
</section>
{% endif %}
</div>
<div class="header-sub">
<p class="header-back"><a href="./">ダッシュボードへ</a></p>
</div>
</header>
<section class="upperSection">
<ul class="upperSection-link">
{% for machine in machine_list %}
<li><a href="#" {% if machine == search.machine %}class="is-active"{% endif %} data-machine="{{ machine }}">{{ machine }}</a></li>
{% endfor %}
</ul>
</section>
</section>
{% endblock %}
{% block main %}
<main class="contents" role="main">
<section class="plan">
<div class="plan-container">
<section class="plan-first">
<div class="plan-header -orange">
<h2 class="plan-header-title"><span class="line-name">1号機</span> 手配状況</h2>
</div>
<div class="planProduct">
<div class="planProduct-container">
<div class="planProduct-list" data-moc='
<label class="js-sortable-item">
<dl class="planProduct-data">
<dd class="planProduct-data-radio"><input type="radio" name="item[]" class="js-itemRadio" value="__uniq_key__" data-date="__arrangement_date__"></dd>
<dd class="planProduct-data-id">__item_code__</dd>
<dt class="planProduct-data-title">__item_name__<br>No.__no__</dt>
<dd class="planProduct-data-num">__num__</dd>
<dd class="planProduct-data-sort js-sortable-handle"><img src="img/icon/sort.png" alt=""></dd>
</dl>
</label>
'>
</div>
</div>
</div>
</section>
<section class="plan-second">
<div class="plan-header -gray">
<h2 class="plan-header-title">操作</h2>
</div>
<div class="planCtrl">
<div class="planCtrl-container">
<form>
<input type="hidden" name="line_name" value="">
<input type="hidden" name="key" value="">
<input type="hidden" name="item_code" value="">
<input type="hidden" name="arrangement_date" value="">
<h3 class="planCtrl-title"> </h3>
<div class="planCtrl-block">
<dl class="planCtrl-item">
<dt>No</dt>
<dd>
<div class="planCtrl-box">
<input type="tel" name="no_start" class="planCtrl-input -small js-sampleInput02_1">
<div class="planCtrl-kara">~</div>
<input type="tel" name="no_end" class="planCtrl-input -small js-sampleInput02_2">
</div>
</dd>
</dl>
<dl class="planCtrl-item">
<dt>ケース</dt>
<dd>
<input type="tel" name="qty" class="planCtrl-input -full js-sampleInput01" readonly>
</dd>
</dl>
<div class="planCtrl-quickly">
<label><input type="checkbox" name="quickly">急ぎ</label>
</div>
<div class="planCtrl-submit">
<button type="button" class="planCtrl-submit-btn"><span>手配・編集</span></button>
<button type="button" class="planCtrl-cancel-btn">取消</button>
<span class="planCtl-cancel-error"></span>
</div>
</div>
<section class="remodal" data-remodal-id="modal-regist">
<section class="modalSection">
<h3 class="modalSection-heading">手配・編集</h3>
<p class="modalSection-text">
設定しますがよろしいですか?<br>
</p>
<div class="modalSection-links">
<div class="modalSection-links-small"><button type="button" class="modalSection-submit-btn -cancel" data-remodal-action="close"><span>キャンセル</span></button></div>
<div class="modalSection-links-large"><button type="button" class="modalSection-submit-btn" data-remodal-action="close"><span>設定する</span></button></div>
</div>
</section>
</section>
<section class="remodal" data-remodal-id="modal-cancel">
<section class="modalSection">
<h3 class="modalSection-heading">取消</h3>
<p class="modalSection-text">
取り消しを実行します。<br>
この操作はやり直せません。本当に取り消しますか?
</p>
<div class="modalSection-links">
<div class="modalSection-links-small"><button type="button" class="modalSection-submit-btn -cancel" data-remodal-action="close"><span>キャンセル</span></button></div>
<div class="modalSection-links-large"><button type="button" class="modalSection-submit-btn" data-remodal-action="close"><span>取消する</span></button></div>
</div>
</section>
</section>
</form>
</div>
</div>
</section>
<section class="plan-third">
<div class="plan-header -blue">
<h2 class="plan-header-title"><span class="line-name"></span> 生産可能商品リスト</h2>
</div>
<div class="planItem" style="height: calc(100svh - 210px)">
<div class="planItem-container">
<div class="planItem-header">
<p class="planItem-header-title01">商品名</p>
<p class="planItem-header-title02">未手配数</p>
</div>
<div class="planItem-list" data-moc='
<label>
<dl class="planItem-data">
<dd class="planItem-data-radio"><input type="radio" name="item[]" value="__item_code__" data-date="{{ data.date }}" class="js-itemRadio"></dd>
<dt class="planItem-data-title">__item_name__</dt>
<dd class="planProduct-data-spec">__film__</dd>
<dd class="planProduct-data-placement">__film_addr__</dd>
<dd class="planItem-data-num">__item_un_arrangement__</dd>
</dl>
</label>
'>
</div>
</div>
</div>
</section>
</div>
</section>
</main>
{% endblock %}
{# スタイルシートの設定 #}
{% block stylesheet %}
<link rel="stylesheet" href="common/css/reset.css">
<link rel="stylesheet" href="common/css/common.css">
<link rel="stylesheet" href="common/css/contents.css">
<link rel="stylesheet" href="common/css/remodal.css">
<link rel="stylesheet" href="common/css/flatpickr.min.css">
<style>
.planProduct-date-header{
background: #fbd58f;
padding: 5px 10px;
font-size: 15px;
font-weight: 600;
}
.planItem-date-header{
background: #dfeefd;
padding: 5px 10px;
font-size: 15px;
font-weight: 600;
}
.upperSection-link li a.not_exists{
color: #bbb;
}
</style>
{% endblock %}
{# JavaScriptの設定 #}
{% block javascript %}
<script src="common/js/jquery.js"></script>
<script src="common/js/jquery-ui.min.js"></script>
<script src="common/js/flatpickr.js"></script>
<script src="common/js/remodal.js"></script>
<script src="common/js/common.js"></script>
<script src="common/js/utility.js"></script>
<script src="common/js/page_plan.js?v=1.02"></script>
<script src="common/js/jquery.ui.touch-punch.min.js"></script>
<script>
$(function(){
$('body').on('click', '.js-itemRadio', function () {
$('label').removeClass('is-active');
$(this).parents('label').addClass('is-active');
});
const config = {
enableTime: false,
// mode: "range",
showMonths: 2,
// minDate: "today",
wrap: true,
locale: "ja",
dateFormat: "Y-m-d",
}
flatpickr('.js-flatpickr', config);
});
//手配処した情報を送る先のURL
const edit_url = '{{ url('set_plan') }}';
const del_url = '{{ url('del_plan') }}';
const sort_url = '{{ url('sort_plan') }}';
// 商品データをjsonでセットしておく
const item_list = JSON.parse('{{ json_items|raw }}');
// 未手配リストをjsonでセットしておく
{% if data.unarrangement %}
let unarrangement_list = JSON.parse('{{ json_unarrangement|raw }}');
{% else %}
let unarrangement_list = {};
{% endif %}
// 手配済みリストをjsonでセットしておく
{% if data.arrangement %}
let arrangement_list = JSON.parse('{{ json_arrangement|raw }}');
{% else %}
let arrangement_list = {};
{% endif %}
</script>
{% endblock %}