고정 헤더 영역
상세 컨텐츠
본문
{% extends "main.html" %}
{% block contents %}
<style>
html,
body,
h1,
h2,
h3,
div,
span,
a,
button,
table,
tbody,
thead,
input {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
background-color: hsl(0, 0%, 0%);
}
html,
body {
min-height: 110%;
}
.clicked {
background-color: rgb(59, 62, 147);
/* border-radius: 20%; */
color: rgb(232, 132, 37);
display: flex;
text-align: start;
flex-direction: column;
width: 150px;
}
.clicked>ul>span {
text-align: center;
}
.btn btn-warning {
margin: 0;
padding: 0;
}
ol,
ul {
padding: 4px 4px 4px 4px;
/* margin: auto; */
}
/* .btn btn-secondary btn-lg {
zoom: 0.5;
margin: 0;
padding: 0;
} */
.wrap {
/* background-color: chartreuse; */
width: 1600px;
height: 850px;
margin: auto;
border: 1px;
}
td>input {
border: none;
}
th>input {
border: none;
}
tr {
cursor: pointer;
}
td>button {
zoom: 0.65;
}
.total {
height: 800px;
}
table {
width: 1200px;
table-layout: fixed;
}
.flex-row {
display: flex;
flex-direction: row;
align-items: flex-start
/* justify-content: center; */
}
.flex-col {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.list-group {
background-color: rgb(13, 170, 233);
color: white;
width: 200px;
}
.list-group>ul {
height: 650px;
}
.list-group>ul>li {
height: 30px;
}
tr {
width: 1000px;
}
.add-form>td {
background-color: rgb(173, 214, 243);
}
.clicked {
background-color: azure;
color: blue;
width: 180px;
height: 150px;
}
</style>
<script>
let idx;
$(document).ready(() => {
d_list();
hideform()
})
function mv_click(id) {
$(`#clicked> li`).removeClass('clicked')
$(`#${id}`).addClass('clicked')
$(`#add-from`).text(String(`${id}`))
idx = String(id);
d_list()
}
function list_click(list_id) {
if (confirm("수정하시겠습니까?")) {
$(`#${list_id}_add`).hide();
$(`#${list_id}_mody`).show();
}
}
function hideaddfrom(id) {
$(`#${id}_add`).show();
$(`#${id}_mody`).hide();
}
// 본선선택 필수 강제조항
function addcotnet() {
let id = $('input[name=mv_id_add]').val()
let msn = $('input[name=msn_add]').val()
let hauju = $('input[name=hauju_add]').val()
let offer = $('input[name =offer_add]').val()
let p_name = $('input[name=p_name_add]').val()
let gangjung = $('input[name=gangjung_add]').val()
let size = $('input[name=size_add]').val()
let bundle = $('input[name=bundle_add]').val()
let mt = $('input[name=mt_add]').val()
let storage = $('input[name=storage_add]').val()
let formData = new FormData()
formData.append("mv_id_give", id)
formData.append("msn_give", msn)
formData.append("hauju_give", hauju)
formData.append("offer_give", offer)
formData.append("p_name_give", p_name)
formData.append("gangjung_give", gangjung)
formData.append("size_give", size)
formData.append("bundle_give", bundle)
formData.append("mt_give", mt)
formData.append("storage_give", storage)
fetch('/d_bar/post', { method: "POST", body: formData }).then(res => res.json()).then(data => {
alert(data["msg"])
mv_click(id)
})
}
function showAddform(idx) {
if (idx === undefined) {
alert("본선을 선택하세요")
}
else {
$('#add-form').show();
// alert(idx)
$('#mv_id').val(idx);
}
}
function hideform() {
$('#add-form').hide()
$('.list_copy').hide()
}
function d_list() {
let data = idx;
// console.log(data)
let url = `/d_bar/d_detail?data=${idx}`
// console.log(url)
fetch(url).then(res => res.json()).then(data => {
let rows = data['result'];
$("#list").empty();
rows.forEach((row) => {
let id = row['_id']
let msn = row['msn']
let hauju = row['hauju']
let p_name = row['p_name']
let offer = row['offer']
let gangjung = row['gangjung']
let size = row['size']
let bundle = row['bundle']
let mt = row['mt']
let storage = row['storage']
let mv_id = row['mv_id']
let temp_html = ` <tr id='${id}_add' onclick="list_click('${id}')">
<td name="msn">${msn}</td>
<td>${hauju}</td>
<td>${p_name}</td>
<td>${offer}</td>
<td>${gangjung}</td>
<td>${size}</td>
<td>${bundle}</td>
<td>${mt}</td>
<td>${storage}</td>
</tr>
<td style="display:none" class="list_copy"><button onclick="copyform('${id}')" class="btn btn-warning" >복사</button></td>
<tr id='${id}_mody' style="display:none;">
<td><input type="text" placeholder="msn" name="msn" value="${msn}"></td>
<td><input type="text" placeholder="화주명" name="hauju" value="${hauju}"></td>
<td><input type="text" placeholder="세부품명" value="d_bar" name="p_name" value='${p_name}'></td>
<td><input type="text" placeholder="제강사" name="offer" value='${gangjung}'></td>
<td><input type="text" placeholder="강 종" name="gangjung" value='${gangjung}'></td>
<td><input type="text" placeholder="싸이즈" name="size" value='${size}'></td>
<td><input type="text" placeholder="수 량" name="bundle" value="${bundle}"></td>
<td><input type="text" placeholder="톤수" name="mt" value="${mt}"></td>
<td><input type="text" placeholder="창고코드" name="storage" value='${storage}'>
<button onclick="hideaddfrom('${id}')" class="btn btn-warning">취소</button>
<button onclick="modifycotnet('${id}')" class="btn btn-warning">수정</button>
<button onclick="deletecotnet('${id}')" class="btn btn-warning">삭제</button>
</td>
</tr>
`
$("#list").append(temp_html)
})
let temp_html2 = `<tr class="add-form" id="${id_add}_copy" style="display:none; background-color: aqua;">
<td><input type="text" placeholder="MSN" name="msn_add"></td>
<td><input type="text" placeholder="화주명" name="hauju_add"></td>
<td><input type="text" placeholder="세부품명" value="d_bar" name="p_name_add"></td>
<td><input type="text" placeholder="제강사" name="offer_add"></td>
<td><input type="text" placeholder="강 종" name="gangjung_add"></td>
<td><input type="text" placeholder="싸이즈" name="size_add"></td>
<td><input type="text" placeholder="수 량" name="bundle_add"></td>
<td><input type="text" placeholder="톤수" name="mt_add"></td>
<td><input type="text" placeholder="창고코드" name="storage_add"></td>
<td><button onclick="addcotnet()" class="btn btn-warning " style="padding: 20px;">저장</button></td>
<input id='mv_id' type="hidden" name="mv_id_add" value="${idx}">
`
$("#list").append(temp_html2)
})
}
function modifycotnet(id) {
let msn = $(`#${id}_mody>td>input[name=msn]`).val()
let hauju = $(`#${id}_mody>td>input[name=hauju]`).val()
let offer = $(`#${id}_mody>td>input[name =offer]`).val()
let p_name = $(`#${id}_mody>td>input[name=p_name]`).val()
let gangjung = $(`#${id}_mody>td>input[name=gangjung]`).val()
let size = $(`#${id}_mody>td>input[name=size]`).val()
let bundle = $(`#${id}_mody>td>input[name=bundle]`).val()
let mt = $(`#${id}_mody>td>input[name=mt]`).val()
let storage = $(`#${id}_mody>td>input[name=storage]`).val()
let formData = new FormData()
// let mv_id = idx
// console.log(mv_id)
formData.append("id_give", id)
formData.append("mv_id_give", idx)
formData.append("msn_give", msn)
formData.append("hauju_give", hauju)
formData.append("offer_give", offer)
formData.append("p_name_give", p_name)
formData.append("gangjung_give", gangjung)
formData.append("size_give", size)
formData.append("bundle_give", bundle)
formData.append("mt_give", mt)
formData.append("storage_give", storage)
fetch('/d_bar/modify', { method: "POST", body: formData }).then(res => res.json()).then(data => {
alert(data["msg"])
mv_click(idx)
// window.location.reload()
})
}
function deletecotnet(id) {
if (confirm("정말삭제하나요?")) {
let formData = new FormData()
formData.append("id_give", id)
fetch('/d_bar/delete', { method: "POST", body: formData }).then(res => res.json()).then(data => {
alert(data["msg"])
})
}
mv_click(idx)
}
// function open_in_dbar() {
// window.open("{{url_for('d_bar.d_list')}}d_list_input")
// }
function copyform(id_add) {
let msn = $(`#${id_add}_mody>td>input[name=msn]`).val()
let hauju = $(`#${id_add}_mody>td>input[name=hauju]`).val()
let offer = $(`#${id_add}_mody>td>input[name =offer]`).val()
let p_name = $(`#${id_add}_mody>td>input[name=p_name]`).val()
let gangjung = $(`#${id_add}_mody>td>input[name=gangjung]`).val()
let size = $(`#${id_add}_mody>td>input[name=size]`).val()
let bundle = $(`#${id_add}_mody>td>input[name=bundle]`).val()
let mt = $(`#${id_add}_mody>td>input[name=mt]`).val()
let storage = $(`#${id_add}_mody>td>input[name=storage]`).val()
temp_html3 = `<tr class="copy-form" id="${id_add}_copy" background-color: aqua;">
<td><input type="text" placeholder="msn" name="msn_add" value="${msn}" ></td>
<td><input type="text" placeholder="화주명" name="hauju_add" value="${hauju}"></td>
<td><input type="text" placeholder="세부품명" value="d_bar" name="p_name_add" value="${p_name}"></td>
<td><input type="text" placeholder="제강사" name="offer_add" value="${offer}"></td>
<td><input type="text" placeholder="강 종" name="gangjung_add" value="${gangjung}"></td>
<td><input type="text" placeholder="싸이즈" name="size_add" value="${size}"></td>
<td><input type="text" placeholder="수 량" name="bundle_add" value="${bundle}"></td>
<td><input type="text" placeholder="톤수" name="mt_add" value="${mt}"></td>
<td><input type="text" placeholder="창고코드" name="storage_add" value="${storage}"></td>
<td><button onclick="addcotnet('${id_add}')" class="btn btn-warning " style="padding: 20px;">저장</button>
<button onclick="deleteadd('${id_add}')" class="btn btn-warning " style="padding: 20px;">취소</button></td>
</tr>
<input id='mv_id' type="hidden" name="mv_id_add" value="${idx}">`
// 히든속성으로 저장하기
// 저장하기추가
$("#list").append(temp_html3)
}
function copyAddform() {
$('.list_copy').show()
}
function deleteadd(id_add) {
$('.list_copy').hide()
$(`#${id_add}_copy`).remove();
}
</script>
<div class="flex-row">
<div class="list-group">
<ul id="clicked">
{% for d_list in d_lists %}
<li id="{{d_list._id}}" class="list-group" onclick="mv_click(`${id}` )">
{{d_list.date}} {{d_list.mv_name}}
</li>
<hr />
{% endfor %}
</ul>
</div>
<div class="wrap">
<table class="table" style="border: 8px blue;">
<thead class="table-primary">
<tr>
<!-- <th>모선명</th> -->
<th scope="col">MSN</th>
<th scope="col">화주명</th>
<th scope="col">품명</th>
<th scope="col">제강사</th>
<th scope="col">강종</th>
<th scope="col">싸이즈</th>
<th scope="col">총수량(B/D)</th>
<th scope="col">총중량(M/T)</th>
<th scope="col">창고코드</th>
</tr>
</thead>
<tbody class="table table-striped table" id=list class="add-form">
<!-- <tr class="add-form" id="add-form" style="background-color: aqua;">
<td><input type="text" placeholder="MSN" name="msn"></td>
<td><input type="text" placeholder="화주명" name="hauju"></td>
<td><input type="text" placeholder="세부품명" value="d_bar" name="p_name"></td>
<td><input type="text" placeholder="제강사" name="offer"></td>
<td><input type="text" placeholder="강 종" name="gangjung"></td>
<td><input type="text" placeholder="싸이즈" name="size"></td>
<td><input type="text" placeholder="수 량" name="bundle"></td>
<td><input type="text" placeholder="톤수" name="mt"></td>
<td><input type="text" placeholder="창고코드" name="storage"></td>
<td><button onclick="addcotnet()" class="btn btn-warning " style="padding: 20px;">저장</button></td>
</tr> -->
</tbody>
</table>
<div class="add-btn">
<td><button onclick="showAddform(idx)" class="btn btn-primary btn-lg">추가</button></td>
<td><button onclick="copyAddform()" class="btn btn-primary btn-lg">복사</button></td>
<td><button onclick="hideform()" class="btn btn-secondary btn-lg">취소</button></td>
</div>
</div>
<!-- <div class="flex-col">
<button class="btn btn-primary" onclick="open_in_dbar()">입고</a></button>
<button class="btn btn-primary">출고</button>
</div> -->
</div>
{% endblock %}
