2020년 6월 1일 월요일

springboot view side list object handle...

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
xmlns:sec="http://www.thymeleaf.org/extras/spring-security"
layout:decorate="~{layout/layout}">
<head>
<title>残業データ確認</title>
<meta name="keywords" content="springboot,thymeleaf,layout,トップページ" />
<meta name="description"
content="SpringBootとThymeleafのLayoutを使ってWebサイトを作るサンプルです。ここはトップページです。" />
</head>
<body>
<div layout:fragment="content">

<script type="text/javascript" th:inline="javascript">
/*<![CDATA[*/

var list = /*[[${dateValueList}]]*/;
alert(list.length);
alert(list[0].dateValue);
alert(list[0].dayName);
/*]]>*/
</script>
 
 
<script type="text/javascript">
$(document).ready(function() {

$("#hiddenSubmissionUserId").val("[[${userId}]]");
$("#hiddenApprovalUserId").val("[[${userId}]]");
$("#hiddenRejectedUserId").val("[[${userId}]]");
$("#hiddenSubmissionTargetYearMonth").val("[[${targetYearMonth}]]");
$("#hiddenApprovaTargetYearMonth").val("[[${targetYearMonth}]]");
$("#hiddenRejectedTargetYearMonth").val("[[${targetYearMonth}]]");
$("#userName").text("[[${userName}]]");
$("#targetYearMonth").text("[[${targetYearMonth}]]");
 
// 提出ボタン処理
$("#submissionBtn").click(function() {
if (confirm("提出しますがよろしいですか?")) {
ajaxSubmissionServer();
} else {
return false;
}
});
// 承認ボタン処理
$("#approvalBtn").click(function() {
if (confirm("承認しますがよろしいですか?")) {
ajaxApprovalServer();
} else {
return false;
}
});
// 却下ボタン処理
$("#rejectedBtn").click(function() {
if (confirm("却下しますがよろしいですか?")) {
ajaxRejectedServer();
} else {
return false;
}
});
// 残業実績報告書ボタン処理
$("#reportBtn").click(function() {
if (confirm("残業実績報告書を出力しますがよろしいですか?")) {
} else {
return false;
}
});
// 残業時間修正反映ボタン
$("#modalSaveBtn").click(function() {
if (confirm("保存しますか?")) {
ajaxOverTimeConfirmEditServer();
} else {
return false;
}
});
$("#modalSaveBtn").click(function() {
if (confirm("保存しますか?")) {
ajaxOverTimeConfirmEditServer();
} else {
return false;
}
});
$("#overtimeEditBtn").click(function() {
var targetObj = $(this).next('td').next('td').find('span');
alert(targetObj.text());
$('#exampleModalCenter').modal('show');
}); 
});
 
function overtimeEditFun(obj) {
var targetObj = $(obj).parent().next().find('span');
//alert(targetObj.text());
$("#hiddenTargetDay").val(targetObj.text());
$('#exampleModalCenter').modal('show');
}
// modalSaveBtn 残業時間などの修正反映処理
function ajaxOverTimeConfirmEditServer() {
alert('run..');
$(".targetDateValue").find('input[type="text"]').val("aaaa");
$.ajax("/overtimeConfirm/edit/ajax", {
        data : $("#overtimeEditForm").serialize(),
        dataType : "json",

    }).done(function(json) {
   
    //alert('done modalSaveBtn');
    //alert("json setStartTime:"+ json.list[0].startTime);
   
//var rateNewGrossObj = $('table').closest('tr').find('.targetStartTime1').next();
//rateNewGrossObj.text("0aaaa");
//var rateNewGrossObj = $('table').closest('tr').find('#startTime').val("ddddddddddd");
//rateNewGrossObj.val("0aaaa");
$(".targetStartTime" + json.list[0].indexValue).find('input[type="text"]').val("aaaa");
//$(".targetStartTime2").find('input[type="text"]').val("bbb");
//$("#startTime").val("ddddddddd");
}).fail(function(xhr) {
//$('#modal_org_list_message').append(xhr);
alert('fail');
});
return false;
}

// 提出 submission
function ajaxSubmissionServer() {
alert('run..');
alert("submission:" + $('#hiddenSubmissionUserId').val());
$.ajax("/overtimeConfirm/submission/ajax", {
        data : $("#submissionForm").serialize(),
        dataType : "json",

    }).done(function(json) {
   
    alert('done submission');
    //alert("json setStartTime:"+ json.list[0].startTime);
   
}).fail(function(xhr) {
//$('#modal_org_list_message').append(xhr);
alert('fail');
});
return false;
}
// 承認 approvalBtn
function ajaxApprovalServer() {
alert('run..');
$.ajax("/overtimeConfirm/approval/ajax", {
        data : $("#approvalForm").serialize(),
        dataType : "json",

    }).done(function(json) {
   
    alert('done approvalBtn');
    //alert("json setStartTime:"+ json.list[0].startTime);
   
}).fail(function(xhr) {
//$('#modal_org_list_message').append(xhr);
alert('fail');
});
return false;
}

// 却下 rejectedBtn
function ajaxRejectedServer() {
alert('run..');
$.ajax("/overtimeConfirm/rejected/ajax", {
        data : $("#rejectedForm").serialize(),
        dataType : "json",

    }).done(function(json) {
   
    alert('done rejectedBtn');
    //alert("json setStartTime:"+ json.list[0].startTime);
   
}).fail(function(xhr) {
//$('#modal_org_list_message').append(xhr);
alert('fail');
});
return false;
}
</script>

<div class="container" style="background-color: white;">
<h2 style="height: 50px;">
<span id="headtitle">残業データ確認</span>
</h2>

<table class="table">
<tr>
<td class="col-xs-2"><label>社員名</label></td>
<td class="col-xs-3"><label><span id="userName"></span></label></td>
</tr>
<tr>
<td class="col-xs-2"><label>年月</label></td>
<td class="col-xs-3"><span><button type="submit"
class="btn btn-primary btn-sm" id="confirm" style="">◀</button></span>
<label><span id="targetYearMonth"></span></label></td>
</tr>
</table>

<table class="table">
<thead>
<tr>
<th scope="col" width="100px"></th>
<th scope="col" width="80px">作業日</th>
<th scope="col" width="80px">曜日</th>
<th scope="col">開始時刻</th>
<th scope="col">終了時刻</th>
<th scope="col">休憩時間</th>
<th scope="col">実績</th>
<th scope="col" width="100px">作業内容</th>
</tr>
</thead>
<tbody>
<tr th:each="dateValue : ${dateValueList}">
<td><button type="button" class="btn btn-primary btn-sm" th:id="overtimeEditBtn + ${dateValue.dateValue}"
data-toggle="modal" data-target="#exampleModalCenter" onClick="overtimeEditFun(this)">修正</button>
<!--<button type="submit" class="btn btn-primary btn-sm" id="editButton" style="">修正</button></td>-->
<td th:class="targetDateValue + ${dateValue.dateValue}"><span th:text="${dateValue.dateValue}"></span></td>
<td><span th:text="${dateValue.dayName}"></span></td>
<td th:class="targetStartTime + ${dateValue.dateValue}">
<input type="text" class="form-control form-control-sm" id="startTime"
name="startTime" readonly></td>
<td><input type="text" class="form-control form-control-sm" id="endTime"
name="endTime" readonly></td>
<td><input type="text" class="form-control form-control-sm" id="restTime"
name="restTime" readonly></td>
<td><input type="text" class="form-control form-control-sm" id="resultTime"
name="resultTime" readonly></td>
<td><input type="text" class="form-control form-control-sm" id="workingMemo"
name="workingMemo" readonly></td>
</tr>
</tbody>
</table>

<table class="table">
<tr>
<td class="col-xs-2"><label>平日実績合計</label></td>
<td class="col-xs-3"><input type="text" class="form-control form-control-sm"
id="workingMemo" name="workingMemo" placeholder="入力覧"></td>
<td class="col-xs-2"><label>平日作業日計</label></td>
<td class="col-xs-3"><input type="text" class="form-control form-control-sm"
id="workingMemo" name="workingMemo" placeholder="入力覧"></td>
</tr>
<tr>
<td class="col-xs-2"><label>休日実績合計</label></td>
<td class="col-xs-3"><input type="text" class="form-control form-control-sm"
id="workingMemo" name="workingMemo" placeholder="入力覧"></td>
<td class="col-xs-2"><label>休日作業日計</label></td>
<td class="col-xs-3"><input type="text" class="form-control form-control-sm"
id="workingMemo" name="workingMemo" placeholder="入力覧"></td>
</tr>
</table>

<div style="">
<button type="button" class="btn btn-primary btn-sm" id="submissionBtn">提出</button>
<button type="button" class="btn btn-primary btn-sm" id="approvalBtn">承認</button>
<button type="button" class="btn btn-primary btn-sm" id="rejectedBtn">却下</button>
<button type="button" class="btn btn-primary btn-sm" id="reportBtn">残業実績報告書</button>

</div>

<table class="table">
<tr>
<td class="col-xs-2"><label>コメント</label></td>
<td class="col-xs-3"><input type="text" class="form-control form-control-sm"
id="workingMemo" name="workingMemo" placeholder="入力覧"></td>
</tr>
</table>

</div>



<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1"
role="dialog" aria-labelledby="exampleModalCenterTitle"
aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalCenterTitle">実績値入力</h5>
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<form id="overtimeEditForm">
<table>
<tr><th scope="col">開始時刻</th>
<td><input type="text" class="form-control form-control-sm" id="startTime"
name="startTime" placeholder="入力覧"></td></tr>
<tr><th scope="col">終了時刻</th>
<td><input type="text" class="form-control form-control-sm" id="endTime"
name="endTime" placeholder="入力覧"></td></tr>

<tr><th scope="col">休憩時間</th>
<td><input type="text" class="form-control form-control-sm" id="restTime"
name="restTime" placeholder="入力覧"></td></tr>

<tr><th scope="col">実績</th>
<td><input type="text" class="form-control form-control-sm" id="resultTime"
name="resultTime" placeholder="入力覧"></td></tr>

<tr><th scope="col">作業内容</th><td><input type="text" class="form-control form-control-sm" id="workingMemo"
name="workingMemo" placeholder="入力覧"></td></tr>
</table><input type="hidden" id="hiddenTargetDay" name="hiddenTargetDay" value=""></form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" id="modalCloseBtn"
data-dismiss="modal">閉じる</button>
<button type="button" class="btn btn-primary" id="modalSaveBtn">保存</button>
</div>
</div>
</div>
</div>

<form id="submissionForm">
<input type="hidden" id="hiddenSubmissionUserId" name="hiddenSubmissionUserId" value="">
<input type="hidden" id="hiddenSubmissionTargetYearMonth" name="hiddenSubmissionTargetYearMonth"  value="">
</form>
<form id="approvalForm">
<input type="hidden" id="hiddenApprovalUserId" name="hiddenApprovalUserId">
<input type="hidden" id="hiddenApprovaTargetYearMonth" name="hiddenApprovaTargetYearMonth">
</form>
<form id="rejectedForm">
<input type="hidden" id="hiddenRejectedUserId" name="hiddenRejectedUserId">
<input type="hidden" id="hiddenRejectedTargetYearMonth" name="hiddenRejectedTargetYearMonth">
</form>
</div>

</body>

<!--
<form action="#" th:action="@{/overtimeConfirm/result/submission}" th:object="${submissionForm}"
method="post" id="submissionForm">
<input type="hidden" id="restTime" name="hiddenUserId">
<input type="hidden" id="hiddenTargetYearMonth" name="hiddenTargetYearMonth">
</form>-->

</html>

댓글 없음:

댓글 쓰기