고정 헤더 영역
상세 컨텐츠
본문
{% 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: 1550px;
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: 700px;
}
.list-group > ul>li{
height: 30px;
}
.add-form>td {
background-color: rgb(173, 214, 243);
}
.clicked{
background-color: azure;
color: blue;
width: 180px;
height: 150px;
}
</style>
<script>
let clicked;
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);
console.log(idx)
// addcotnet(idx)
}
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(idx) {
// let mv_id = dix
let msn = $('input[name=msn]').val()
let hauju = $('input[name=hauju]').val()
let offer = $('input[name =offer]').val()
let p_name = $('input[name=p_name]').val()
let gangjung = $('input[name=gangjung]').val()
let size = $('input[name=size]').val()
let bundle = $('input[name=bundle]').val()
let mt = $('input[name=mt]').val()
let storage = $('input[name=storage]').val()
console.log(offer)
let formData = new FormData()
// formData.append("mv_id_give", mv_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"])
window.location.reload()
})
}
function showAddform() {
$('#add-form').show();
}
function hideform() {
$('#add-form').hide()
}
function d_list() {
// let idx = idx
// let url = `/d_bar/d_detail?data=${idx}`
// console.log(url)
fetch('/d_bar/d_detail').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 temp_html = ` <tr id='${id}_add' onclick="list_click('${id}')">
<td>${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>
<tr id='${id}_mody' style="display:none;">
<td><input type="text" 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}'>
<td>
<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)
// if (dix == mv_id) {
// }
})
})
}
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()
console.log(msn)
let formData = new FormData()
formData.append("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/modify', { method: "POST", body: formData }).then(res => res.json()).then(data => {
alert(data["msg"])
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"])
window.location.reload()
})
}
}
</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()" class="btn btn-primary btn-lg">추가</button></td>
<td><button onclick="hideform()" class="btn btn-secondary btn-lg">취소</button></td>
</div>
</div>
{% endblock %}
</div>
