manage_actions.html
1 <#include "/skin/plugins/asynchronousupload/upload_commons.html" />
2 <@addRequiredJsFiles/>
3 <@header/>
4
5 <script src="js/jquery/plugins/ui/jquery-ui.min.js" type="text/javascript"></script>
6 <script src="js/jquery/plugins/ui/ui.datepicker-fr.js" type="text/javascript"></script>
7 <script type="text/javascript" src="jsp/site/plugins/asynchronousupload/GetMainUploadJs.jsp?handler=DansmarueAsynchronousUploadHandler"></script>
8 <link rel="stylesheet" href="js/jquery/plugins/ui/css/jquery-ui.css" type="text/css" media="screen, projection" />
9
10 <section id="manage_actions">
11 <div class="container">
12 <div class="row">
13 <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
14 <h1 class="black-title section-title">#i18n{module.dansmarue.rest.manage.signalement.gestion.title}</h1>
15 </div>
16 </div>
17 <div class="row">
18 <#if error?has_content >
19 <div class="error">
20 ${(error)!}
21 </div>
22 <#elseif success?has_content >
23 <div class="error">
24 ${(success)!}
25 </div>
26 <#else>
27 <form class="default-form" name="newsletter" action="jsp/site/Portal.jsp?page=webService&id=${(signalement.id)!}&token=${(signalement.token)!}" method="post">
28 <input type="hidden" name="id" id="id" value="${(bean.id)!}" />
29 <input type="hidden" name="token" id="token" value="${(bean.token)!}" />
30
31 <div class="recap">
32 <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 row-group">
33 <div class="row-title">
34 <label>#i18n{module.dansmarue.rest.manage.signalement.suivi.title}</label>
35 </div>
36 <p>${(signalement.numeroSignalement)!}</p>
37 </div>
38
39 <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 row-group">
40 <div class="row-title">
41 <label>#i18n{module.dansmarue.rest.manage.signalement.type.ano.title}</label>
42 </div>
43 <p>${(signalement.typeSignalement.libelle)!}</p>
44 </div>
45
46 <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 row-group">
47 <div class="row-title">
48 <label>#i18n{module.dansmarue.rest.manage.signalement.statut.title}</label>
49 </div>
50 <p>${(state.name)!}</p>
51 </div>
52
53 <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 row-group">
54 <div class="row-title">
55 <label>#i18n{module.dansmarue.rest.manage.signalement.date.title}</label>
56 </div>
57 <p>${(signalement.dateCreation)!}</p>
58 </div>
59
60 <#if signalement.photos?has_content>
61
62 <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 row-group">
63 <div class="row-title">
64 <label>#i18n{module.dansmarue.rest.manage.signalement.photos.title}</label>
65 </div>
66 <#assign index = 1>
67 <#list signalement.photos as photo>
68 <#if photo.imageUrl != "" && photo.vue == 0>
69 <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
70 <label class="control-label" for="image">
71 #i18n{module.dansmarue.rest.manage.signalement.photo.pres}
72 </label>
73 <br>
74 <a href='#' data-toggle="modal" data-target="#imageModal" image-url='${photo.imageUrl}'>
75 <img src='${photo.imageUrl}' style="max-width: 150px" />
76 </a>
77 <#assign index = index + 1>
78 </div>
79 <#elseif photo.imageUrl != "" && photo.vue == 1>
80 <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
81 <label class="control-label" for="image">
82 #i18n{module.dansmarue.rest.manage.signalement.photo.ensemble}
83 </label>
84 <br>
85 <a href='#' data-toggle="modal" data-target="#imageModal" image-url='${photo.imageUrl}'>
86 <img src='${photo.imageUrl}' style="max-width: 150px" />
87 </a>
88 <#assign index = index + 1>
89 </div>
90 <#elseif photo.imageUrl != "" && photo.vue == 2>
91 <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
92 <label class="control-label" for="image">
93 #i18n{module.dansmarue.rest.manage.signalement.photo.done}
94 </label>
95 <br>
96 <a href='#' data-toggle="modal" data-target="#imageModal" image-url='${photo.imageUrl}'>
97 <img src='${photo.imageUrl}' style="max-width: 150px" />
98 </a>
99 <#assign index = index + 1>
100 </div>
101 </#if>
102 </#list>
103 </div>
104 </#if>
105
106 <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 row-group">
107 <div class="row-title">
108 <label>#i18n{module.dansmarue.rest.manage.signalement.action.effectuer.action} : </label>
109 </div>
110 <p>
111 <div class="radio">
112 <label class="listRadio" for="serviceFait"><input title="#i18n{module.dansmarue.rest.manage.signalement.actions.aide}" type="radio" name="action" id="serviceFait" div="divServiceFait" value="serviceFait" /> #i18n{module.dansmarue.rest.manage.signalement.action.service.fait}</label>
113 </div>
114 <div class="radio">
115 <label class="listRadio" for="rejeter"><input title="#i18n{module.dansmarue.rest.manage.signalement.actions.aide}" type="radio" name="action" id="rejeter" div="divMotif" value="rejeter" /> #i18n{module.dansmarue.rest.manage.signalement.action.rejeter.anomalie}</label>
116 </div>
117 <div class="radio">
118 <label class="listRadio" for="programmer"><input title="#i18n{module.dansmarue.rest.manage.signalement.actions.aide}" type="radio" name="action" id="programmer" div="divDateProgrammation" value="programmer" /> #i18n{module.dansmarue.rest.manage.signalement.action.programmer.traitement}</label>
119 </div>
120 <div class="radio">
121 <label class="listRadio" for="a_requalifier"><input title="#i18n{module.dansmarue.rest.manage.signalement.actions.aide}" type="radio" name="action" id="a_requalifier" value="a requalifier" /> #i18n{module.dansmarue.rest.manage.signalement.action.arequalifier.anomalie}</label>
122 </div>
123 <div class="radio">
124 <label class="listRadio" for="requalifier"><input title="#i18n{module.dansmarue.rest.manage.signalement.actions.aide}" type="radio" name="action" id="requalifier" div="divRequalifier" value="requalifier" /> #i18n{module.dansmarue.rest.manage.signalement.action.requalifier.anomalie}</label>
125 </div>
126 </p>
127 </div>
128
129 <div id="divServiceFait" class="initJsHide fieldManaged">
130 <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 row-group">
131 <div class="row-title">
132 <label>
133 #i18n{module.dansmarue.rest.manage.signalement.message.transmis} :
134 </label>
135 </div>
136 <#assign index = 1>
137 <#if messagesServiceFait?has_content>
138 <#list messagesServiceFait as message>
139 <div class="checkbox">
140 <input type="radio" value="${message.idMessage!}" message_radio="message" name="chosenMessage" id="chosenMessage${index}" />
141 <label class="inLine" for="chosenMessage${index}">
142 ${message.title!}
143 </label>
144 </div>
145 <#assign index = index + 1>
146 </#list>
147 </#if>
148 </div>
149 <div class="container">
150 <div class="row">
151 <div class="col-md-6 col-sm-6 col-xs-12">
152 <#assign listFiles = ''>
153 <@addFileInputAndfilesBox fieldLabel="#i18n{module.dansmarue.rest.manage.signalement.photo.done}" fieldName='photoDone' handler=DansmarueAsynchronousUploadHandler listUploadedFiles=listFiles inputCssClass="" />
154 </div>
155 </div>
156 </div>
157 </div>
158 <#if has_email_signaleur?? && has_email_signaleur == true>
159 <input type="hidden" name="has_email_signaleur" id="has_email_signaleur" value="${has_email_signaleur?c}" />
160 <div id="divMotif" class="initJsHide fieldManaged">
161 <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 row-group">
162 <div class="row-title">
163 <label>
164 #i18n{module.dansmarue.rest.manage.signalement.motif.rejet} :
165 </label>
166 </div>
167 <div class="checkboxes" >
168 <#if motifs?has_content && motifs?size gt 0 >
169 <#list motifs as motif>
170 <div class="checkbox">
171 <label for="motif_${motif.id}"><input id="motif_${motif.id}" class="checkbox" type="checkbox" name="motif_rejet" value="${motif.id!}"/>${motif.libelle!}</label>
172 </div>
173 </#list>
174 </#if>
175 <div class="checkbox">
176 <label for="motif_autre_checkbox"><input id="motif_autre_checkbox" class="checkbox" type="checkbox" name="motif_autre_checkbox" value="autre"/> #i18n{module.workflow.dansmarue.rejet.autre}</label>
177 </div>
178 <div class="<@inputStyle />">
179 <textarea class="form-control" cols="20" rows="5" name="motif_autre"></textarea>
180 </div>
181 </div>
182 </div>
183 </div>
184 </#if>
185 <div id="divRequalifier" class="initJsHide fieldManaged">
186 <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 row-group">
187 <div class="row-title">
188 <label>
189 #i18n{module.dansmarue.rest.manage.signalement.type.anomalie} :
190 </label>
191 </div>
192 <input class="col-xs-9 col-sm-9 col-md-9 col-lg-9" type="text" id="typeSignalement" name="typeSignalement" list="typeSignalementList"/>
193 <datalist id="typeSignalementList"> </datalist>
194 <input type="hidden" id="typeSignalementSelect" name="typeSignalementSelect" />
195 </div>
196 </div>
197
198
199 <div id="divDateProgrammation" class="initJsHide fieldManaged">
200 <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 row-group">
201 <div class="row-title">
202 <label>
203 #i18n{module.dansmarue.rest.manage.signalement.date.programmation} :
204 </label>
205 </div>
206 <input type="text" id="dateProgrammation" name="dateProgrammation"/>
207 </div>
208 </div>
209
210 <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 row-group">
211 <div id="divCommentaires">
212 <div class="row-title">
213 <label>
214 #i18n{module.dansmarue.rest.manage.signalement.commentaire} :
215 </label>
216 </div>
217 <textarea class="span-20" id="commentaires" name="commentaires" ></textarea>
218 </div>
219 </div>
220
221 <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 row-group text-center">
222 <button id="submit" type="submit" class="btn btn-lg btn-paris btn-red initHide" name="action" value="">Valider</button>
223 </div>
224 </div>
225 </form>
226 </#if>
227 </div>
228 </div>
229 </section>
230
231 <@getDatePicker idField="dateProgrammation" language=locale.language />
232
233 <script>
234 $(document).ready(function(){
235 $('.initJsHide').hide();
236
237 $('[name="action"]').click(function(){
238 $('#submit').show();
239 $('.fieldManaged').hide();
240 var toDisplay = $(this).attr('div');
241 if(toDisplay!=null && toDisplay.length>0){
242 var divs = toDisplay.split(' ');
243 divs.forEach(function(entry) {
244 $('#'+entry).show();
245 });
246 }
247 });
248
249 <#if type_list?has_content && type_list?size != 0>
250 var types = new Array();
251 <#list type_list as type>
252 types.push({name:"${type.name?js_string}", code:"${type.code}"});
253 </#list>
254
255
256 $('#typeSignalement').on("input",()=> {
257 let inputVal = $('#typeSignalement').val();
258 let filterType = types.filter ( el => {
259 return el.name.toUpperCase().includes(inputVal.toUpperCase());
260 });
261
262 let dataList = $('#typeSignalementList')[0];
263 while (dataList.firstChild) {
264 dataList.removeChild(dataList.firstChild);
265 }
266
267 filterType.forEach( el => {
268 if (dataList.options.length <= 20) {
269 let option = document.createElement('option');
270 option.value = el.name;
271 dataList.appendChild(option);
272 }
273 });
274 });
275
276 </#if>
277
278 $("form[name=newsletter]").submit( () => {
279 let inputVal = $('#typeSignalement').val();
280 if (inputVal.length > 0) {
281 types.find( el => {
282 if(el.name === inputVal) {
283 $('#typeSignalementSelect').val(el.code);
284 }
285 });
286 }
287 $('#typeSignalement').val("");
288 });
289
290 });
291 </script>