From c86f58d1b2ff25c574f3df3659f92b564cafa6dd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=A1=D0=B5=D0=BC=D0=B5=D0=BD=D0=BE=D0=B2=D0=B0=20=D0=9C?=
 =?UTF-8?q?=D0=B0=D1=80=D0=B8=D1=8F?= <semenovamasha98@mail.ru>
Date: Sat, 23 Mar 2019 22:49:11 +0400
Subject: [PATCH] tab with latex editing

---
 src/main/resources/public/css/paper.css       |   4 +
 .../resources/templates/papers/paper.html     | 227 ++++++++++--------
 2 files changed, 133 insertions(+), 98 deletions(-)

diff --git a/src/main/resources/public/css/paper.css b/src/main/resources/public/css/paper.css
index 6e61d0c..159bbe1 100644
--- a/src/main/resources/public/css/paper.css
+++ b/src/main/resources/public/css/paper.css
@@ -2,4 +2,8 @@
     display: flex;
     justify-content: center;
     flex-direction: column;
+}
+
+.nav-tabs {
+    margin-bottom: 20px;
 }
\ No newline at end of file
diff --git a/src/main/resources/templates/papers/paper.html b/src/main/resources/templates/papers/paper.html
index a0b11f1..2953b93 100644
--- a/src/main/resources/templates/papers/paper.html
+++ b/src/main/resources/templates/papers/paper.html
@@ -23,113 +23,144 @@
                     <form 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">
-                                <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="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>Дедлайны:</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>
+                                <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>
                                     </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>
+                                </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" id="files-list">
-                                    <label>Файлы:</label>
-                                    <th:block th:each="file, rowStat : *{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-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 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>Дедлайны:</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>
-                                            <div class="col-10">
-                                                <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>
+                                            <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" id="files-list">
+                                            <label>Файлы:</label>
+                                            <th:block th:each="file, rowStat : *{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-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 class="col-10">
+                                                        <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>
+                                            </th:block>
+
+                                        </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>
-                                    </th:block>
-
-                                </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 class="tab-pane fade" id="nav-latex" role="tabpanel"
+                                         aria-labelledby="nav-profile-tab">
+                                        <div class="form-group">
+                                            <label for="latex-text">Текст:</label>
+                                            <textarea class="form-control" id="latex-text" type="text" rows="10"
+                                                      placeholder="Latex.."
+                                                      th:field="*{latexText}"/>
+                                        </div>
 
                                     </div>
+
                                 </div>
+
                             </div>
                             <div class="col-md-4 offset-md-1 col-sm-12 offset-sm-0">
                                 <div class="form-group">