CadastroProtocolo.html
14.6 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{layout/LayoutPadrao}">
<head>
<title>Protocolo ME - Protocolização</title>
<link rel="stylesheet" type="text/css" th:href="@{/layout/stylesheets/introjs.css}"/>
<link rel="stylesheet" type="text/css" th:href="@{/layout/stylesheets/dipla.css}"/>
</head>
<section layout:fragment="conteudo">
<div class="page-header" data-step="1"
data-intro="Bem Vindo ao Protocolo! Nesta seção você pode protocolizar arquivos PDF para o ministério do planejamento."
data-position="top">
<div class="container-fluid">
<h1>Formulário de Protocolização</h1>
<!--<button type="button" class="btn btn-success btn-circle" href="javascript:void(0);"
onclick="javascript:startTutorial(); ">
<i class="fa fa-question" aria-hidden="true"></i>
</button>-->
</div>
</div>
<div class="container-fluid">
<form method="post" class="form-vertical js-form-loading js-form-protocolo" th:object="${protocolo}" th:action="@{/enviar}">
<protocolo:message/>
<input type="hidden" id="uuid" th:field="*{uuid}"/>
<fieldset id="dados-protocolo" data-step="2"
data-intro="Nesta seção você pode referenciar algum protocolo anterior informando o Protocolo Provisório">
<legend>Dados do Protocolo</legend>
<div class="row">
<div class="form-group col-sm-3">
<label>Deseja informar o numero do protocolo anterior?</label>
<br/>
<input type="hidden" id="possui-protocolo-anterior" th:field="*{possuiProtocoloAnterior}"/>
<input type="radio" id="radio-possui-protocolo-s" checked="checked" name="btn-possui-protocolo"
class="js-radio-protocolo-anterior radio radio-inline" value="N"> Não
<input type="radio" id="radio-possui-protocolo-n" name="btn-possui-protocolo"
class="js-radio-protocolo-anterior radio radio-inline" value="S">Sim
</div>
</div>
<div class="row">
<div class="form-group col-sm-6 bw-required" id="divProtocoloAnterior">
<label for="numero-protocolo" class="control-label">Número do Protocolo Anterior </label>
<input type="text" class="form-control" id="numero-protocolo"
th:field="*{numeroProtocoloAnterior}" maxlength="30"/>
</div>
</div>
</fieldset>
<fieldset id="dados-pessoais" data-step="3"
data-intro="Estas são suas informações pessoais contidas no seu cadastro.">
<legend>Dados Pessoais</legend>
<div class="row">
<div class="form-group col-sm-12">
<label for="nome" class="control-label">Nome</label>
<input type="text" class="form-control" id="nome_social" th:value="${usuario.nome}"
disabled="disabled"/>
</div>
</div>
<div class="row">
<div class="form-group col-sm-6">
<label for="telefone" class="control-label">Telefone</label>
<input type="text" class="form-control js-phone-number" id="telefone"
th:value="${usuario.telefone}" disabled="disabled"/>
</div>
<div class="form-group col-sm-6">
<label for="email" class="control-label">E-Mail</label>
<input type="text" class="form-control" id="email" th:value="${usuario.email}"
disabled="disabled"/>
</div>
</div>
<div class="row" data-step="4"
data-intro="Nesta seção você pode adicionar 1 ou 2 emails que você deseja que receba as notificações deste protocolo ">
<div class="form-group col-sm-6 email" protocolo:classforerror="email1">
<label for="email1" class="control-label">E-Mail Interessado 1</label>
<input type="text" class="form-control" id="email1" th:field="*{email1}"/>
</div>
<div class="form-group col-sm-6 email" protocolo:classforerror="email2">
<label for="email2" class="control-label">E-Mail Interessado 2</label>
<input type="text" class="form-control" id="email2" th:field="*{email2}"/>
</div>
</div>
</fieldset>
<fieldset data-step="5" data-intro="Aqui é onde você irá anexar os arquivos que deseja protocolizar">
<legend>Arquivos</legend>
<div class="row">
<div class="form-group col-sm-12 bw-required" data-step="6"
data-intro="Primeiro você deve selecionar qual o tipo de documento que você deseja protocolizar">
<label for="tipo-documento" class="control-label">Tipo do Documento</label>
<select id="tipo-documento" class="form-control">
<option value="">Selecione</option>
<option th:each="tipoDocumento : ${tiposDocumento}" th:value="${tipoDocumento.codigo}"
th:text="${tipoDocumento.descricao}"></option>
</select>
</div>
</div>
<div class="row">
<div class="form-group col-sm-12 bw-required">
<input type="hidden" th:field="*{arquivo.nome}" id="nome-arquivo"/>
<input type="hidden" th:field="*{arquivo.nomeOriginal}" id="nome-original"/>
<input type="hidden" th:field="*{arquivo.contentType}" id="content-type"/>
<input type="hidden" th:field="*{arquivo.tamanho}" id="tamanho-arquivo"/>
<label class="control-label js-nome-arquivo">Arquivo</label>
<font class="legenda-protocolo">(o tamanho de cada arquivo não pode ser maior que 30Mb somando
um total de 100Mb por protocolo. Caso uma protocolização exceda os 100Mb, o usuário deve realizar nova protocolização informando a referência no campo "deseja informar protocolo anterior". )</font>
<div class="js-container-imagem-arquivo" th:attr="data-url-arquivos=@{/arquivos}" data-step="7"
data-intro="Depois você deve escolher o arquivo que será protocolizado. Arraste um documento para cá, ou clique na palavra SELECIONE">
<div id="upload-drop" class="bw-upload">
<img th:src="@{/images/mini-loading.gif}" class="js-img-loading hidden"/>
<i class="glyphicon glyphicon-cloud-upload"></i>
<span>Arraste o arquivo aqui ou </span>
<a class="bw-upload-form-file">
SELECIONE
<input id="upload-select" type="file" accept=".pdf"/>
</a>
</div>
</div>
</div>
</div>
<div class="form-group col-sm-12 text-center" >
<button type="button" class="btn btn-default js-btn-anexar" data:action="@{/arquivos/anexar}" data-step="8"
data-intro="Após ter escolhido o documento e seu respectivo tipo, você deve clicar no botão ADICIONAR para terminar o processo de anexar">
<span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span> ADICIONAR
</button>
</div>
<div class="row">
<div class="form-group col-sm-12">
<div id="container-arquivos-adicionados"
data:action="@{/arquivos/{uuid}(uuid=${protocolo.uuid})}"></div>
</div>
</div>
<div class="row">
<div class="form-group col-sm-12">
<button type="submit" class="btn btn-primary js-btn-enviar" data-step="9"
data-intro="Para finalizar o processo de protocolização você deve clicar no botão ENVIAR">
ENVIAR
</button>
</div>
</div>
<div th:if="${#authentication.principal.usuario.temPerfilBrasilCidadao}!=true">
<div th:if="${#authentication.principal.usuario.temPerfilAdministrador}!=true">
<div th:replace="modal/ModalBrasilCidadao"></div>
</div>
</div>
</fieldset>
</form>
</div>
<th:block th:replace="hbs/ArquivoUpload"></th:block>
<th:block th:replace="hbs/TabelaListaArquivos"></th:block>
</section>
<th:block layout:fragment="javascript-extra">
<script th:src="@{/javascripts/vendors/uikit.min.js}"></script>
<script th:src="@{/javascripts/vendors/upload.min.js}"></script>
<script th:src="@{/javascripts/vendors/handlebars.min.js}"></script>
<script th:src="@{/javascripts/arquivo-upload.js}"></script>
<script th:src="@{/layout/javascripts/intro.js}"></script>
<script>
$(function () {
$(".js-btn-cancelar").click(function (e) {
e.preventDefault();
window.location.replace($(".js-btn-cancelar").data("url-voltar"));
});
});
// add a flag when we're done
introJs().oncomplete(function () {
localStorage.setItem('doneTour', 'yeah!');
});
// add a flag when we exit
introJs().onexit(function () {
localStorage.setItem('doneTour', 'yeah!');
});
// and check for it when deciding whether to start.
function startTutorial() {
$(".introjs-helperNumberLayer").css({"background-color": "black", "color": "white", "opacity": 0.9});
$("#radio-possui-protocolo-n").trigger("click");
introJs().setOption('showProgress', true).start();
}
</script>
</th:block>
</html>
<script type="application/javascript">
$( document ).ready(function() {
$('.email').keyup(function(){
$(this).val($(this).val().toLowerCase());
});
});
</script>