From 6442a67ff108ca538aeb742f09002478e9df6b15 Mon Sep 17 00:00:00 2001
From: T-Midnight <belousovatanya1995@yandex.ru>
Date: Tue, 30 Apr 2019 23:41:51 +0400
Subject: [PATCH] #38 update view

---
 .../fragments/grantFilesListFragment.html     |  37 ++++++
 .../resources/templates/grants/grant.html     | 111 ++++++++++++++----
 2 files changed, 125 insertions(+), 23 deletions(-)
 create mode 100644 src/main/resources/templates/grants/fragments/grantFilesListFragment.html
diff --git a/src/main/resources/templates/grants/fragments/grantFilesListFragment.html b/src/main/resources/templates/grants/fragments/grantFilesListFragment.html
new file mode 100644
index 0000000..2547c80
--- /dev/null
+++ b/src/main/resources/templates/grants/fragments/grantFilesListFragment.html
@@ -0,0 +1,37 @@
+<!DOCTYPE HTML>
+<html xmlns:th="http://www.thymeleaf.org">
+<head>
+    <meta charset="UTF-8"/>
+</head>
+<body>
+<div th:fragment="filesList (isLatexAttach)" th:remove="tag">
+    <th:block th:each="file, rowStat : *{files}">
+        <span th:if="${(!isLatexAttach and file.isLatexAttach == null) or file.isLatexAttach == isLatexAttach}"
+              th:remove="tag">
+            <div class="row div-row-file" 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-10 div-file-name">
+                    <a th:onclick="${file.id==null} ?
+                    'downloadFile('+${file.tmpFileName}+',null,\''+${file.name}+'\')':
+                    'downloadFile(null,'+${file.id}+',\''+${file.name}+'\')' "
+                       href="javascript:void(0)"
+                       th:text="*{files[__${rowStat.index}__].name}">
+                    </a>
+                </div>
+                <div class="col-2">
+                    <a class="btn btn-danger float-right"
+                       th:onclick="|$('#files${rowStat.index}\\.deleted').val('true');
+                           $('#files${rowStat.index}').hide(); |">
+                        <span aria-hidden="true"><i class="fa fa-times"/></span>
+                    </a>
+                </div>
+            </div>
+        </span>
+    </th:block>
+</div>
+</body>
+</html>
\ No newline at end of file
diff --git a/src/main/resources/templates/grants/grant.html b/src/main/resources/templates/grants/grant.html
index 9c0736d..d33015c 100644
--- a/src/main/resources/templates/grants/grant.html
+++ b/src/main/resources/templates/grants/grant.html
@@ -61,7 +61,7 @@
                                         </div>
                                         <div class="col-2">
                                             <button type="submit"
-                                                    class="btn btn-danger float-right btn-delete-deadline "
+                                                    class="btn btn-danger float-right btn-delete-deadline"
                                                     id="removeDeadline" name="removeDeadline"
                                                     th:value="${rowStat.index}">
                                                 <span aria-hidden="true">
@@ -77,12 +77,14 @@
                                     <input type="submit" id="addDeadline" name="addDeadline" class="btn btn-primary"
                                            value="Добавить дедлайн"/>
                                 </div>
-                                <div class="form-group">
-                                    <label for="loader">Загрузить заявку:</label>
+                                <div class="form-group div-loader">
+                                    <label for="loader">Загрузить файлы:</label>
                                     <div id="loader">
-
                                     </div>
                                 </div>
+                                <div class="form-group" id="files-list">
+                                    <div th:replace="grants/fragments/grantFilesListFragment :: filesList(isLatexAttach = ${false})"/>
+                                </div>
                             </div>
                             <div class="col-md-6 col-sm-12">
                                 <label data-toggle="collapse"
@@ -233,20 +235,100 @@
             new FileLoader({
                 div: "loader",
                 url: urlFileUpload,
-                maxSize: 1.5,
-                extensions: ["doc", "docx", "xls", "jpg", "pdf", "txt", "png"],
+                maxSize: -1,
+                extensions: [],
                 callback: function (response) {
                     showFeedbackMessage("Файл успешно загружен");
                     console.debug(response);
+                    addNewFile(response);
                 }
             });
             $('.selectpicker').selectpicker();
         });
         /*]]>*/
+        function addNewFile(fileDto) {
+            var fileNumber = $("#files-list div.row").length;
+
+            var newFileRow = $("<div/>")
+                .attr("id", 'files' + fileNumber)
+                .addClass("row div-row-file");
+
+            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 nameDiv = $("<div/>")
+                .addClass("col-10  div-file-name")
+                .append($("<a/>").text(fileDto.fileName)
+                    .attr("href", 'javascript:void(0)')
+                    .attr("onclick", "downloadFile('" + fileDto.tmpFileName + "',null,'" + fileDto.fileName + "')"));
+            newFileRow.append(nameDiv);
+
+            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);
+            $("#files-list").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>
     <script type="text/javascript">
         function updateAuthors() {
@@ -256,23 +338,6 @@
             var lid = $("#leaderId option:selected").val();
             $("#authors [value='" + lid + "']").attr("disabled", "disabled");
         }
-
-    </script>
-
-    <script>
-    function viewdiv(id) {
-        var el = document.getElementById(id);
-        var link = document.getElementById('toggleLink');
-        if (el.style.display == "block") {
-            el.style.display = "none";
-            link.innerText = link.getAttribute('data-text-hide');
-        } else {
-            el.style.display = "block";
-            link.innerText = link.getAttribute('data-text-show');
-        }
-    }
-
-
     </script>
 </div>
 </body>
