seminar/src/main/resources/templates/report/editReportValue.html

190 lines
7.8 KiB
HTML

<html
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" xmlns:th="http://www.w3.org/1999/xhtml"
xmlns:sec="http://www.w3.org/1999/xhtml"
layout:decorate="~{default}">
<div class="container" layout:fragment="content">
<h3>Редактирование показателя</h3>
<h3 th:text="${reportValue.indicator.name + '(' + reportValue.indicator.max + ')'}"></h3>
<form action="#" th:action="@{/report-value/save-report-value}"
th:object="${reportValue}" method="post">
<input type="hidden" th:field="*{id}">
<input type="hidden" th:field="*{reportId}">
<input type="hidden" th:field="*{indicator.id}">
<div class="row" th:if="${canEdit}">
<div class="col col-md-6">
<div class="form-group">
<label class="form-label" for="loader">Загрузка подтверждающих документов</label>
<div id="loader">
</div>
</div>
</div>
</div>
<div class="form-group files-list" id="files-list">
<div th:each="file, rowStat : ${reportValue.files}">
<div class="row" th:id="|files${rowStat.index}|"
th:style="${file.deleted} ? 'display: none;' :''">
<input type="hidden" th:field="*{files[__${rowStat.index}__].id}"/>
<input type="hidden"
th:field="*{files[__${rowStat.index}__].deleted}"/>
<input type="hidden"
th:field="*{files[__${rowStat.index}__].name}"/>
<input type="hidden"
th:field="*{files[__${rowStat.index}__].tmpFileName}"/>
<div class="col col-md-1 m-1">
<a class="btn btn-danger float-right" th:if="${canEdit}"
th:onclick="|$('#files${rowStat.index}\\.deleted').val('true'); $('#files${rowStat.index}').hide(); |">
<span><i class="fa fa-times"></i></span>
</a>
</div>
<div class="col col-md-8 m-2">
<a th:if="${file.id != null}"
th:onclick="downloadFile(null, [[${file.id}]], [[${file.name}]])"
href="javascript:void(0)"
th:text="*{files[__${rowStat.index}__].name}">
</a>
<a th:if="${file.id == null}"
th:onclick="downloadFile([[${file.tmpFileName}]],null,[[${file.name}]])"
href="javascript:void(0)"
th:text="*{files[__${rowStat.index}__].name}">
</a>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col col-md-6">
<div class="form-group">
<label for="comment" class="form-label">Комментарии</label>
<textarea class="form-control" id="comment" th:field="*{comment}" rows="5"></textarea>
</div>
</div>
</div>
<div class="row" sec:authorize="hasAnyRole('ROLE_ADMIN', 'ROLE_MANAGER', 'ROLE_HEAD')">
<div class="col col-md-6">
<div class="form-group">
<label for="val" class="form-label">Получаемый балл</label>
<input type="text" class="form-control" id="val" th:field="*{indicatorValue}" rows="5"></input>
</div>
</div>
</div>
<button name="save" type="submit" class="btn btn-outline-dark">Сохранить</button>
<a th:href="${'/report/edit-report/' + reportValue.reportId}" class="btn btn-outline-dark">Отмена</a>
</form>
<script type="text/javascript" src="/js/file-loader.js"></script>
<script>
/*<![CDATA[*/
$(document).ready(function () {
new FileLoader({
div: "loader",
url: urlFileUpload,
maxSize: -1,
extensions: [],
callback: function (response) {
console.debug(response);
addNewFile(response, $("#files-list"));
}
});
});
/*]]>*/
function addNewFile(fileDto, listElement) {
var fileNumber = $('.files-list div.row').length;
var newFileRow = $("<div/>")
.attr("id", 'files' + fileNumber)
.addClass("row");
var idInput = $("<input/>")
.attr("type", "hidden")
.attr("id", "files" + fileNumber + ".id")
.attr("value", '')
.attr("name", "files[" + fileNumber + "].id");
newFileRow.append(idInput);
var flagInput = $("<input/>")
.attr("type", "hidden")
.attr("id", "files" + fileNumber + ".deleted")
.attr("value", "false")
.attr("name", "files[" + fileNumber + "].deleted");
newFileRow.append(flagInput);
var nameInput = $("<input/>")
.attr("type", "hidden")
.attr("id", "files" + fileNumber + ".name")
.attr("value", fileDto.fileName)
.attr("name", "files[" + fileNumber + "].name");
newFileRow.append(nameInput);
var tmpFileNameInput = $("<input/>")
.attr("type", "hidden")
.attr("id", "files" + fileNumber + ".tmpFileName")
.attr("value", fileDto.tmpFileName)
.attr("name", "files[" + fileNumber + "].tmpFileName");
newFileRow.append(tmpFileNameInput);
var nextDiv = $("<div/>")
.addClass("col col-md-1 m-1");
var nextA = $("<a/>")
.addClass("btn btn-danger float-right")
.attr("onclick", "$('#files" + fileNumber + "\\\\.deleted').val('true'); $('#files" + fileNumber + "').hide();")
.append(($("<span/>").attr("aria-hidden", "true")).append($("<i/>").addClass("fa fa-times")))
;
nextDiv.append(nextA)
newFileRow.append(nextDiv);
var nameDiv = $("<div/>")
.addClass("col-10 m-2")
.append($("<a/>").text(fileDto.fileName)
.attr("href", 'javascript:void(0)')
.attr("onclick", "downloadFile('" + fileDto.tmpFileName + "',null,'" + fileDto.fileName + "')"));
newFileRow.append(nameDiv);
listElement.append(newFileRow);
}
function downloadFile(tmpName, fileId, downloadName) {
let xhr = new XMLHttpRequest();
if (fileId != null) xhr.open('GET', urlFileDownload + fileId);
if (tmpName != null) xhr.open('GET', urlFileDownloadTmp + tmpName);
xhr.responseType = 'blob';
var formData = new FormData();
if (fileId != null) formData.append("file-id", fileId);
if (tmpName != null) formData.append("tmp-file-name", tmpName);
xhr.send(formData);
xhr.onload = function () {
if (this.status == 200) {
console.debug(this.response);
var blob = new Blob([this.response], {type: '*'});
let a = document.createElement("a");
a.style = "display: none";
document.body.appendChild(a);
let url = window.URL.createObjectURL(blob);
a.href = url;
a.download = downloadName;
a.click();
window.URL.revokeObjectURL(url);
} else {
}
}
}
</script>
</div>
</html>