Семенова Мария 24a1276005 #127 autocomplete
2019-05-24 00:14:46 +04:00

573 lines
33 KiB
HTML

<!DOCTYPE html>
<html lang="en"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorator="default" xmlns:th="http://www.w3.org/1999/xhtml" xmlns="http://www.w3.org/1999/html">
<head>
<link rel="stylesheet" href="../css/paper.css"/>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"/>
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div class="container" layout:fragment="content">
<section id="paper">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading text-uppercase">Редактирование статьи</h2>
<div th:replace="papers/fragments/paperNavigationFragment"/>
</div>
</div>
<hr/>
<div class="row">
<div class="col-lg-12">
<form name="paperform" id="paper-form" method="post"
th:action="@{'/papers/paper?id='+ *{id == null ? '' : id} + ''}"
th:object="${paperDto}">
<div class="row">
<div class="col-md-7 col-sm-12">
<nav>
<div class="nav nav-tabs" id="nav-tab" role="tablist">
<a class="nav-item nav-link active" id="nav-main-tab" data-toggle="tab"
href="#nav-main" role="tab" aria-controls="nav-main" aria-selected="true">Статья</a>
<a class="nav-item nav-link" id="nav-latex-tab" data-toggle="tab"
href="#nav-latex" role="tab" aria-controls="nav-latex" aria-selected="false">Latex</a>
<a class="nav-item nav-link" id="nav-references-tab" data-toggle="tab"
href="#nav-references" role="tab" aria-controls="nav-references"
aria-selected="false">References</a>
</div>
</nav>
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-main" role="tabpanel"
aria-labelledby="nav-main-tab">
<input type="hidden" name="id" th:field="*{id}"/>
<div class="form-group">
<label for="title">Название:</label>
<input class="form-control" id="title" type="text"
placeholder="Название статьи"
th:field="*{title}"/>
<p th:if="${#fields.hasErrors('title')}" th:errors="*{title}"
class="alert alert-danger">Incorrect title</p>
<p class="help-block text-danger"></p>
</div>
<div class="form-group">
<label for="type">Тип статьи:</label>
<select class="form-control" th:field="*{type}" id="type">
<option th:each="type : ${allTypes}" th:value="${type}"
th:text="${type.typeName}">Type
</option>
</select>
</div>
<div class="form-group">
<label for="status">Статус:</label>
<select class="form-control" th:field="*{status}" id="status">
<option th:each="status : ${allStatuses}" th:value="${status}"
th:text="${status.statusName}">Status
</option>
</select>
</div>
<div class="form-group">
<label for="comment">Комментарий:</label>
<textarea class="form-control" rows="5" id="comment"
th:field="*{comment}"></textarea>
</div>
<div class="form-group">
<label for="title">Ссылка на сайт конференции:</label>
<input class="form-control" id="url" type="text"
placeholder="Url"
th:field="*{url}"/>
</div>
<div class="form-group">
<label>Дедлайны:</label>
<div class="row" th:each="deadline, rowStat : *{deadlines}">
<input type="hidden" th:field="*{deadlines[__${rowStat.index}__].id}"/>
<div class="col-6">
<input type="date" class="form-control" name="deadline"
th:field="*{deadlines[__${rowStat.index}__].date}"/>
</div>
<div class="col-4">
<input class="form-control" type="text" placeholder="Описание"
th:field="*{deadlines[__${rowStat.index}__].description}"/>
</div>
<div class="col-2">
<a class="btn btn-danger float-right"
th:onclick="|$('#deadlines${rowStat.index}\\.description').val('');
$('#deadlines${rowStat.index}\\.date').val('');
$('#addDeadline').click();|"><span
aria-hidden="true"><i class="fa fa-times"/></span>
</a>
</div>
</div>
<p th:if="${#fields.hasErrors('deadlines')}" th:errors="*{deadlines}"
class="alert alert-danger">Incorrect title</p>
</div>
<div class="form-group">
<input type="submit" id="addDeadline" name="addDeadline"
class="btn btn-primary"
value="Добавить
дедлайн"/>
</div>
<div class="form-group">
<label>Авторы:</label>
<select class="selectpicker form-control" multiple="true"
data-live-search="true"
title="-- Выберите авторов --"
th:field="*{authorIds}">
<option th:each="author: ${allAuthors}" th:value="${author.id}"
th:text="${author.lastName}">Status
</option>
</select>
<p th:if="${#fields.hasErrors('authorIds')}" th:errors="*{authorIds}"
class="alert alert-danger">Incorrect title</p>
</div>
<div class="form-group files-list" id="files-list">
<label>Файлы:</label>
<div th:replace="papers/fragments/paperFilesListFragment :: filesList(isLatexAttach = ${false})"/>
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="locked"
th:field="*{locked}"/>
<label class="form-check-label" for="locked">Заблокирована</label>
</div>
<div class="form-group">
<label for="loader">Загрузить статью:</label>
<div id="loader">
</div>
</div>
</div>
<div class="tab-pane fade" id="nav-latex" role="tabpanel"
aria-labelledby="nav-profile-tab">
<div class="form-group">
<label for="latex-text">Latex текст:</label>
<textarea class="form-control" id="latex-text" type="text" rows="10"
placeholder="Latex.."
th:field="*{latexText}"/>
</div>
<div class="form-group files-list" id="latex-files-list">
<label>Файлы:</label>
<div th:replace="papers/fragments/paperFilesListFragment :: filesList(isLatexAttach = ${true})"/>
</div>
<div class="form-group">
<label for="latex-loader">Загрузить файлы:</label>
<div id="latex-loader">
</div>
</div>
<div class="form-group">
<button id="pdfBtn" class="btn btn-primary text-uppercase"
onclick="generatePDF()"
type="button">
<i id="pdfLoadingIcon" class='fa fa-circle-o-notch fa-spin'
style="display: none;"></i>
pdf
</button>
</div>
</div>
<div class="tab-pane fade" id="nav-references" role="tabpanel"
aria-labelledby="nav-profile-tab">
<div class="form-group">
<label>References:</label>
<th:block th:each="reference, rowStat : *{references}">
<div class="row" th:id="|reference${rowStat.index}|"
th:style="${reference.deleted} ? 'display: none;' :''">
<div class="form-group col-11">
<a data-toggle="collapse"
th:href="${'#collapseReference'+rowStat.index}"
aria-expanded="false">
<div class="collapse-heading"
th:text="${(reference.referenceType.toString() == 'ARTICLE'?'Статья':'Книга') +'. '
+(reference.publicationTitle==null?'':reference.publicationTitle+'. ')+(reference.authors==null?'':reference.authors+'. ') }">
</div>
</a>
</div>
<div class="col-1">
<a class="btn btn-danger float-right"
th:onclick="|$('#references${rowStat.index}\\.deleted').val('true'); $('#reference${rowStat.index}').hide(); |"><span
aria-hidden="true"><i class="fa fa-times"/></span>
</a>
</div>
<div class="collapse" th:id="${'collapseReference'+rowStat.index}">
<input type="hidden"
th:field="*{references[__${rowStat.index}__].id}"/>
<input type="hidden"
th:field="*{references[__${rowStat.index}__].deleted}"/>
<div class="form-group col-12">
<label class="col-4">Вид публикации:</label>
<select class="form-control col-7"
th:field="*{references[__${rowStat.index}__].referenceType}">
<option th:each="type : ${allReferenceTypes}"
th:value="${type}"
th:text="${type.typeName}">Type
</option>
</select>
</div>
<div class="form-group col-12">
<label class="col-4">Авторы:</label>
<input type="text"
class="form-control col-7 autocomplete author"
name="authors"
th:field="*{references[__${rowStat.index}__].authors}"/>
</div>
<div class="form-group col-12">
<label class="col-4 ">Название публикации:</label>
<input type="text"
class="form-control col-7 autocomplete publicationTitle"
name="publicationTitle"
th:field="*{references[__${rowStat.index}__].publicationTitle}"/>
</div>
<div class="form-group col-12">
<label class="col-4">Год издания:</label>
<input type="number" class="form-control col-7 "
name="publicationYear"
th:field="*{references[__${rowStat.index}__].publicationYear}"/>
</div>
<div class="form-group col-12">
<label class="col-4">Издательство:</label>
<input type="text"
class="form-control col-7 autocomplete publisher"
name="publisher"
th:field="*{references[__${rowStat.index}__].publisher}"/>
</div>
<div class="form-group col-12">
<label class="col-4">Страницы:</label>
<input type="text" class="form-control col-7" name="pages"
th:field="*{references[__${rowStat.index}__].pages}"/>
</div>
<div class="form-group col-12">
<label class="col-4">Название журнала или сборника статей
конференции:</label>
<input type="text"
class="form-control col-7 autocomplete journalOrCollectionTitle"
name="journalOrCollectionTitle"
th:field="*{references[__${rowStat.index}__].journalOrCollectionTitle}"/>
</div>
</div>
</div>
</th:block>
<div class="form-group">
<input type="submit" id="addReference" name="addReference"
class="btn btn-primary"
value="Добавить источник"/>
</div>
<div class="form-group">
<div class="col-12 form-group">
<label for="formatStandard">Стандарт форматирования:</label>
<select class="form-control" th:field="*{formatStandard}"
id="formatStandard">
<option th:each="standard : ${allFormatStandards}"
th:value="${standard}"
th:text="${standard.standardName}">standard
</option>
</select>
</div>
<div class="col-12 form-group">
<button id="formatBtn" class="btn btn-primary text-uppercase"
onclick="getFormattedReferences()"
type="button">
Форматировать
</button>
</div>
<div class="col-12">
<textarea class="form-control"
id="formattedReferencesArea"></textarea>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 offset-md-1 col-sm-12 offset-sm-0">
<div class="form-group">
<div class="row">
<div class="col">
<h6 class="my-0">Дата создания:</h6>
</div>
<div class="col">
<small class="text-muted"
th:text="${paperDto.createDate == null ? '' : #dates.format(paperDto.createDate, 'dd.MM.yyyy HH:mm')}">
text
</small>
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col">
<h6 class="my-0">Дата изменения:</h6>
</div>
<div class="col">
<small class="text-muted"
th:text="${paperDto.updateDate == null ? '' : #dates.format(paperDto.updateDate, 'dd.MM.yyyy HH:mm')}">
text
</small>
</div>
</div>
</div>
<div class="form-group">
<button id="pingButton" class="btn btn-primary text-uppercase"
type="button">
Ping авторам
</button>
</div>
</div>
<div class="clearfix"></div>
<div class="col-lg-12">
<div class="form-group">
<button id="sendMessageButton" name="save"
class="btn btn-success text-uppercase"
type="submit">
Сохранить
</button>
<a id="cancelButton" class="btn btn-default text-uppercase"
href="/papers/papers">
Отмена
</a>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</section>
<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) {
showFeedbackMessage("Файл успешно загружен");
console.debug(response);
addNewFile(response, $("#files-list"), false);
}
});
new FileLoader({
div: "latex-loader",
url: urlFileUpload,
maxSize: -1,
extensions: [],
callback: function (response) {
showFeedbackMessage("Файл успешно загружен");
console.debug(response);
addNewFile(response, $("#latex-files-list"), true);
}
});
$('.selectpicker').selectpicker();
});
/*]]>*/
function addNewFile(fileDto, listElement, isLatexAttach) {
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 isLatexInput = $("<input/>")
.attr("type", "hidden")
.attr("id", "files" + fileNumber + ".isLatexAttach")
.attr("value", isLatexAttach)
.attr("name", "files[" + fileNumber + "].isLatexAttach");
newFileRow.append(isLatexInput);
var nextDiv = $("<div/>")
.addClass("col-2");
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")
.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 {
}
}
}
function generatePDF() {
$('#pdfLoadingIcon').show();
$('#pdfBtn').prop('disabled', true);
var formData = new FormData(document.forms.paperform);
var xhr = new XMLHttpRequest();
xhr.open("POST", urlPdfGenerating);
xhr.send(formData);
xhr.responseType = 'blob';
xhr.onload = function () {
if (this.status == 200) {
console.debug(this.response);
var blob = new Blob([this.response], {type: 'application/pdf'});
let a = document.createElement("a");
a.style = "display: none";
document.body.appendChild(a);
let url = window.URL.createObjectURL(blob);
a.href = url;
a.download = $('#title').val() + '.pdf';
a.click();
window.URL.revokeObjectURL(url);
} else {
showFeedbackMessage("Ошибка при создании PDF", MessageTypesEnum.DANGER);
}
$('#pdfLoadingIcon').hide();
$('#pdfBtn').prop('disabled', false);
}
}
function getFormattedReferences() {
var formData = new FormData(document.forms.paperform);
var xhr = new XMLHttpRequest();
xhr.open("POST", urlReferencesFormatting);
console.log(formData);
xhr.send(formData);
xhr.onload = function () {
if (this.status == 200) {
console.debug(this.response);
$('#formattedReferencesArea').val(this.response);
} else {
showFeedbackMessage("Ошибка при форматировании списка литературы", MessageTypesEnum.DANGER);
}
}
}
</script>
<script th:inline="javascript">
/*<![CDATA[*/
var autoCompleteData = /*[[${autocompleteData}]]*/ 'default';
console.log(autoCompleteData);
$(".autocomplete.author").autocomplete({
source: autoCompleteData.authors,
minLength: 0,
}).focus(function () {
$(this).autocomplete("search");
});
$(".autocomplete.publicationTitle").autocomplete({
source: autoCompleteData.publicationTitles,
minLength: 0,
}).focus(function () {
$(this).autocomplete("search");
});
$(".autocomplete.publisher").autocomplete({
source: autoCompleteData.publishers,
minLength: 0,
}).focus(function () {
$(this).autocomplete("search");
});
$(".autocomplete.journalOrCollectionTitle").autocomplete({
source: autoCompleteData.journalOrCollectionTitles,
minLength: 0,
}).focus(function () {
$(this).autocomplete("search");
});
/*]]>*/
</script>
</div>
</body>
</html>