36e8e632fba9f6f50d10798d6a8747f5a29c81ea
[django_unres.git] / django_simple / todo / templates / details.html
1 {% extends "base.html" %}
2
3 {% load i18n lazysignup_tags %}
4 {% block content %}
5
6 {% if user|is_lazy_user %}
7 <ul class="list-group">
8
9 <li class="list-group-item new-task-item task-item">
10
11 <div class="col-md-2 form-group">
12 <form action="/refresh_done/" method="post">
13 {% csrf_token %}
14 <input type="submit" class="btn" value="Refresh" name="refreshbtn">
15 </form>
16 </div>
17
18 <div class="col-md-10 form-group">
19 <h5 style="text-align:right;float:right;">
20 {% if not task.done %}
21  {% if task.running > 0  %}
22   {% if task.running == 100  %}
23   postprocessing
24   {% else %}
25   running
26   {% endif %}
27  {% else %}
28   waiting in the queue to start
29  {% endif %}
30 {% endif %}
31 </h5>
32 </div>
33 </li>
34 </ul>
35 {% endif %}
36
37 <h3> Task <b>{{ task.name }}</b></h3>
38 Created {{ task.created_date  }}
39         <ul class="list-group">
40
41                         <li class="list-group-item task-item">
42                                 <div class="col-md-4"> done ?</div>
43                                 <div class="col-md-8">
44                                         {% if task.done %}
45                                                 <span class="fa fa-check-square-o"></span>
46                                             {% if task.type == "md" or task.type == "remd" %}
47                                               <form action="restart/"
48                                                 method="get"
49                                                 style="text-align;float:right;">
50                                                 {% csrf_token %}
51                                                  <input type="submit" 
52                                                  class="btn btn-default" 
53                                                  value="Restart"
54                                                  name="restartbtn">
55                                                  </button>
56                                               </form>
57                                             {% endif %}  
58                                         {% else %}
59                                           {% if task.running > 0  %}
60                                                 <span class="fa fa-spinner
61                                                 fa-spin"></span>
62                                                 {{ task.running }}%
63                                           {% else %}
64                                                 <span class="fa fa-square-o"></span>
65                                           {% endif %}
66                                         {% endif %}
67
68                                 </div>
69                         </li>   
70 <div>
71     <fieldset class="majorpoints">
72     <legend class="majorpointslegend"
73     style="background-color:#d3d3d3;cursor: pointer;">Show input parameters</legend>
74     <div class="hiders" style="display:none" >
75
76                         <li class="list-group-item task-item">
77                             <div class="col-md-6"> type </div>
78                             <div class="col-md-6">{{ task.type }}</div>
79                         </li>           
80          
81                         <li class="list-group-item task-item">
82                             <div class="col-md-6"> force field </div>
83                             <div class="col-md-6">{{ task.unres_ff }}</div>
84                         </li>           
85
86                         <li class="list-group-item task-item">
87                             <div class="col-md-4"> sequence </div>
88                             <div class="col-md-8 monospace">{{ task.md_seq}}</div>
89                         </li>           
90
91                         <li class="list-group-item task-item">
92                             <div class="col-md-4"> secondary structure
93                             restraints </div>
94                             <div class="col-md-8 monospace">{{ task.md_2d}}</div>
95                         </li>           
96
97
98                         <li class="list-group-item task-item">
99                             <div class="col-md-6"> SSBOND </div>
100                             <div class="col-md-6">{{ task.ssbond}}</div>
101                         </li>           
102
103                         
104         {% if task.type == "min" %}
105
106
107                         <li class="list-group-item task-item">
108                             <div class="col-md-6"> algorithm</div>
109                             <div class="col-md-6">{{ task.min_choice }}</div>
110                         </li>           
111                         <li class="list-group-item task-item">
112                             <div class="col-md-6"> overlap</div>
113                             <div class="col-md-6">{{ task.min_overlap }}</div>
114                         </li>           
115                         <li class="list-group-item task-item">
116                             <div class="col-md-6"> searchsc</div>
117                             <div class="col-md-6">{{ task.min_searchsc }}</div>
118                         </li>           
119                         <li class="list-group-item task-item">
120                             <div class="col-md-6"> maxmin</div>
121                             <div class="col-md-6">{{ task.min_maxmin }}</div>
122                         </li>           
123                         <li class="list-group-item task-item">
124                             <div class="col-md-6"> maxfun</div>
125                             <div class="col-md-6">{{ task.min_maxfun }}</div>
126                         </li>           
127                         <li class="list-group-item task-item">
128                             <div class="col-md-6"> pdbout</div>
129                             <div class="col-md-6">{{ task.min_pdbout }}</div>
130                         </li>           
131                         <li class="list-group-item task-item">
132                             <div class="col-md-6"> input pdb </div>
133                             <div class="col-md-6">{{ task.myfile1 }}</div>
134                         </li>           
135                         <li class="list-group-item task-item">
136                             <div class="col-md-6"> pdb code</div>
137                             <div class="col-md-6">{{ task.pdbcode }}</div>
138                         </li>           
139                         <li class="list-group-item task-item">
140                             <div class="col-md-6"> unres_pdb</div>
141                             <div class="col-md-6">{{ task.min_unres_pdb }}</div>
142                         </li>           
143                         
144         {% endif %}
145         {% if task.type == "md" %}
146                         <li class="list-group-item task-item">
147                             <div class="col-md-6"> starting </div>
148                             <div class="col-md-6">{{ task.md_start}}</div>
149                         </li>           
150                         
151                         <li class="list-group-item task-item">
152                             <div class="col-md-6"> input pdb </div>
153                             <div class="col-md-6">{{ task.myfile1 }}</div>
154                         </li>           
155                         <li class="list-group-item task-item">
156                             <div class="col-md-6"> pdb code</div>
157                             <div class="col-md-6">{{ task.pdbcode }}</div>
158                         </li>           
159                         <li class="list-group-item task-item">
160                             <div class="col-md-6"> seed </div>
161                             <div class="col-md-6">{{ task.md_seed}}</div>
162                         </li>           
163                         <li class="list-group-item task-item">
164                             <div class="col-md-6"> pdbref </div>
165                             <div class="col-md-6">{{ task.md_pdbref}}</div>
166                         </li>           
167                         <li class="list-group-item task-item">
168                             <div class="col-md-6"> respa </div>
169                             <div class="col-md-6">{{ task.md_respa}}</div>
170                         </li>           
171                         <li class="list-group-item task-item">
172                             <div class="col-md-6"> temperature </div>
173                             <div class="col-md-6">{{ task.md_temp}}</div>
174                         </li>           
175                         <li class="list-group-item task-item">
176                             <div class="col-md-6"> nstep </div>
177                             <div class="col-md-6">{{ task.md_nstep}}</div>
178                         </li>           
179                         <li class="list-group-item task-item">
180                             <div class="col-md-6"> total steps (with restarts) </div>
181                             <div class="col-md-6">{{ task.md_total_steps}}</div>
182                         </li>           
183                         <li class="list-group-item task-item">
184                             <div class="col-md-6"> ntwe </div>
185                             <div class="col-md-6">{{ task.md_ntwe}}</div>
186                         </li>           
187                         <li class="list-group-item task-item">
188                             <div class="col-md-6"> ntwx </div>
189                             <div class="col-md-6">{{ task.md_ntwx}}</div>
190                         </li>           
191                         <li class="list-group-item task-item">
192                             <div class="col-md-6"> dt </div>
193                             <div class="col-md-6">{{ task.md_dt}}</div>
194                         </li>           
195                         <li class="list-group-item task-item">
196                             <div class="col-md-6"> thermostat </div>
197                             <div class="col-md-6">{{ task.md_lang}}</div>
198                         </li>           
199                         
200                         {% if task.md_lang == "berendsen" %}
201                         
202                         <li class="list-group-item task-item">
203                             <div class="col-md-6"> tau </div>
204                             <div class="col-md-6">{{ task.md_tau}}</div>
205                         </li>           
206                         
207                         {% else %}
208                         
209                         <li class="list-group-item task-item">
210                             <div class="col-md-6"> scal_fric </div>
211                             <div class="col-md-6">{{ task.md_scal_fric}}</div>
212                         </li>   
213                         
214                         {% endif %}
215                                 
216                         <li class="list-group-item task-item">
217                             <div class="col-md-6"> mdpdb </div>
218                             <div class="col-md-6">{{ task.md_mdpdb}}</div>
219                         </li>           
220                         <li class="list-group-item task-item">
221                             <div class="col-md-6"> RESPA </div>
222                             <div class="col-md-6">{{ task.md_respa}}</div>
223                         </li>           
224                         
225                         
226         {% endif %}
227
228         {% if task.type == "remd" or task.type == "dock" %}
229
230                         <li class="list-group-item task-item">
231                             <div class="col-md-6"> nrep </div>
232                             <div class="col-md-6">{{ task.remd_nrep}}</div>
233                         </li>           
234                         <li class="list-group-item task-item">
235                             <div class="col-md-6"> starting </div>
236                             <div class="col-md-6">{{ task.md_start}}</div>
237                         </li>           
238                         
239                         <li class="list-group-item task-item">
240                             <div class="col-md-6"> input pdb </div>
241                             <div class="col-md-6">{{ task.myfile1 }}</div>
242                         </li>           
243                         <li class="list-group-item task-item">
244                             <div class="col-md-6"> pdb code</div>
245                             <div class="col-md-6">{{ task.pdbcode }}</div>
246                         </li>           
247                         {% if task.type == "dock" %}
248                         <li class="list-group-item task-item">
249                             <div class="col-md-6"> input pdb2 </div>
250                             <div class="col-md-6">{{ task.myfile2 }}</div>
251                         </li>           
252                         <li class="list-group-item task-item">
253                             <div class="col-md-6"> pdb code2</div>
254                             <div class="col-md-6">{{ task.pdbcode2 }}</div>
255                         </li>           
256                         
257                         {% endif %}
258                         <li class="list-group-item task-item">
259                             <div class="col-md-6"> seed </div>
260                             <div class="col-md-6">{{ task.md_seed}}</div>
261                         </li>           
262                         <li class="list-group-item task-item">
263                             <div class="col-md-6"> pdbref </div>
264                             <div class="col-md-6">{{ task.md_pdbref}}</div>
265                         </li>           
266                         {% if task.md_start == "pdbstart" %}
267                         <li class="list-group-item task-item">
268                             <div class="col-md-6"> preminim maxfun </div>
269                             <div class="col-md-6">{{ task.min_maxfun }}</div>
270                         </li>           
271                         {% endif %}
272                         <li class="list-group-item task-item">
273                             <div class="col-md-6"> respa </div>
274                             <div class="col-md-6">{{ task.md_respa}}</div>
275                         </li>           
276                         <li class="list-group-item task-item">
277                             <div class="col-md-6"> nstep </div>
278                             <div class="col-md-6">{{ task.md_nstep}}</div>
279                         </li>           
280                         <li class="list-group-item task-item">
281                             <div class="col-md-6"> total steps (with restarts) </div>
282                             <div class="col-md-6">{{ task.md_total_steps}}</div>
283                         </li>           
284                         <li class="list-group-item task-item">
285                             <div class="col-md-6"> ntwe </div>
286                             <div class="col-md-6">{{ task.md_ntwe}}</div>
287                         </li>           
288                         <li class="list-group-item task-item">
289                             <div class="col-md-6"> nstex </div>
290                             <div class="col-md-6">{{ task.remd_nstex}}</div>
291                         </li>           
292                         <li class="list-group-item task-item">
293                             <div class="col-md-6"> ntwx </div>
294                             <div class="col-md-6">{{ task.md_ntwx}}</div>
295                         </li>                                   
296                         <li class="list-group-item task-item">
297                             <div class="col-md-6"> dt </div>
298                             <div class="col-md-6">{{ task.md_dt}}</div>
299                         </li>           
300                         <li class="list-group-item task-item">
301                             <div class="col-md-6"> thermostat </div>
302                             <div class="col-md-6">{{ task.md_lang}}</div>
303                         </li>           
304                         
305                         {% if task.md_lang == "berendsen" %}
306                         
307                         <li class="list-group-item task-item">
308                             <div class="col-md-6"> tau </div>
309                             <div class="col-md-6">{{ task.md_tau}}</div>
310                         </li>           
311                         
312                         {% else %}
313                         
314                         <li class="list-group-item task-item">
315                             <div class="col-md-6"> scal_fric </div>
316                             <div class="col-md-6">{{ task.md_scal_fric}}</div>
317                         </li>   
318                         
319                         {% endif %}
320
321                         <li class="list-group-item task-item">
322                             <div class="col-md-6"> RESPA </div>
323                             <div class="col-md-6">{{ task.md_respa}}</div>
324                         </li>           
325                                 
326                         <li class="list-group-item task-item">
327                             <div class="col-md-6"> temperatures </div>
328                             <div class="col-md-6">{{ task.remd_multi_t}}</div>
329                         </li>           
330                         <li class="list-group-item task-item">
331                             <div class="col-md-6"> multiplex </div>
332                             <div class="col-md-6">{{ task.remd_multi_m}}</div>
333                         </li>           
334                         <li class="list-group-item task-item">
335                             <div class="col-md-6"> temperature for clustering</div>
336                             <div class="col-md-6">{{ task.remd_cluter_temp}}</div>
337                         </li>           
338                         {% if task.saxs_data != "" %}                   
339                         <li class="list-group-item task-item">
340                             <div class="col-md-6"> wsaxs </div>
341                             <div class="col-md-6">{{ task.wsaxs }}</div>
342                         </li>           
343                         <li class="list-group-item task-item">
344                             <div class="col-md-6"> scal_rad (saxs) </div>
345                             <div class="col-md-6">{{ task.scal_rad }}</div>
346                         </li>           
347                         <li class="list-group-item task-item">
348                             <div class="col-md-6"> saxs distribution </div>
349                             <div class="col-md-6"><pre> {{ task.saxs_data }}</pre></div>
350                         </li>           
351                         {% endif %}
352
353         {% endif %}
354
355                         <li class="list-group-item task-item">
356                             <div class="col-md-6"> Box X Y Z</div>
357                             <div class="col-md-2">{{ task.boxx}}</div>
358                             <div class="col-md-2">{{ task.boxy}}</div>                      
359                             <div class="col-md-2">{{ task.boxz}}</div>                      
360                         </li>           
361
362 </div>
363 </div>
364         <p>
365         <h3> Results </h3>
366                         <li class="list-group-item task-item">
367                             <div class="col-md-4"> Directory </div>
368                             <div class="col-md-8">
369                             <a href="/myfiles/list/{{task.jobdirname}}/">
370                             {{ task.jobdirname }}
371                             </a>
372                             {% if task.done %}
373                             &nbsp;
374                             <a class="btn btn-default"
375                             href="/{{task.id}}/all.zip">
376                             Download as zip</a>
377                             {% endif %}
378                             </div>
379                         </li>           
380
381
382         {% if task.done %}
383                         
384                         {% if task.type == "min" %}
385                         
386                         <li class="list-group-item task-item">
387                             <div class="col-md-2"> Etot </div>
388                             <div class="col-md-10">{{ task.etot }}</div>
389                         </li>           
390 <!--                    
391                         <li class="list-group-item task-item">
392                           <div class="col-md-2"> UNRES model </div>
393                           <div class="col-md-10"> 
394                           <a
395                            href="/myfiles/download-file/{{task.jobdirname}}/unres.pse">
396                           <img 
397                           src="/myfiles/download-file/{{task.jobdirname}}/unres.png"
398                           width="500"></a> </div>
399                         </li>
400 -->
401                         <li class="list-group-item task-item">
402                           <div class="col-md-2"> UNRES model NGL viewer</div>
403                           <div class="col-md-10" id="viewport_unres"
404                           style="width:500px;height:500px;"> 
405                           </div>
406                         </li>
407
408
409 <!--
410                         <li class="list-group-item task-item">
411                           <div class="col-md-2"> Structure overlap </div>
412                           <div class="col-md-10"> <img 
413                           src="/myfiles/download-file/{{task.jobdirname}}/unres_overlap.png"
414                           width="500"> </div>
415                         </li>
416 -->
417                         <li class="list-group-item task-item">
418                           <div class="col-md-2"> Structure overlap NGL viewer</div>
419                           <div class="col-md-10" id="viewport_min"
420                           style="width:500px;height:500px;"> 
421                           </div>
422                         </li>
423                         <li class="list-group-item task-item">
424                <div class="col-md-12">
425                <button id="toggleAllatom">Input structure on/off</button>
426                <button id="toggleSidechains2">Side-chains on/off</button>
427                </div>
428                         </li>
429                         {% endif %}
430
431                         <li class="list-group-item task-item">
432                             <div class="col-md-2"> Results </div>
433                             <div class="col-md-10">{{ task.results_text|linebreaks }}</div>
434                         </li>           
435                         
436                         {% if task.type == "md" %}
437
438                         <li class="list-group-item task-item">
439                           <div class="col-md-2"> Temperature histogram </div>
440                           <div class="col-md-10"> <img 
441                           src="/myfiles/download-file/{{task.jobdirname}}/temp_hist.png"
442                           width="500"> </div>
443                         </li>
444
445                         <li class="list-group-item task-item">
446                           <div class="col-md-2"> Potential energy </div>
447                           <div class="col-md-10"> <img 
448                           src="/myfiles/download-file/{{task.jobdirname}}/md_ene.png"
449                           width="500"> </div>
450                         </li>
451
452                             <li class="list-group-item task-item">
453                             <div class="col-md-2"> Movie </div>
454                             <div class="col-md-10"> 
455
456                             <video width="500" height="400"
457                             preload="auto" controls="controls">
458                             <source
459                             src="/myfiles/download-file/{{task.jobdirname}}/md.ogv"
460                             type="video/ogg; codecs=theora"> </source>
461                             </video>
462                           
463                             </div>
464                             </li>
465
466 {% if task.md_mdpdb %}
467                         <li class="list-group-item task-item">
468                           <div class="col-md-2"> Trajectory NGL viewer</div>
469                           <div class="col-md-10" id="viewport_traj"
470                           style="width:500px;height:500px;"> 
471                           </div>
472                         </li>
473                         <li class="list-group-item task-item">
474                <div class="col-md-6">
475 <input id="clipRange" type="range" value=1 min=1 max= {% widthratio task.md_total_steps task.md_ntwx 1 %} step=1 ></input><span id="clipRange_val">1</span> frame
476 </div>
477 <div class="col-md-6">
478 <button id="toggleRunMDs">run/pause MD</button>  
479 <button id="toggleSidechains1">side-chains on/off</button>                        
480 </div>
481                         </li>
482
483 {% endif %}
484                             
485                         <li class="list-group-item task-item">
486                           <div class="col-md-2"> Radius of gyration based
487                           on C<sup>α</sup> coordinates </div>
488                           <div class="col-md-10"> <img 
489                           src="/myfiles/download-file/{{task.jobdirname}}/md_gyr.png"
490                           width="500"> </div>
491                         </li>
492                             
493
494                 
495                            {% if task.md_pdbref %}
496                         <li class="list-group-item task-item">
497                           <div class="col-md-2"> C<sup>&alpha;</sup> RMSD </div>
498                           <div class="col-md-10"> <img 
499                           src="/myfiles/download-file/{{task.jobdirname}}/md_rms.png"
500                           width="500"> </div>
501                         </li>
502
503                         <li class="list-group-item task-item">
504                           <div class="col-md-2"> fraction of native
505                           side-chain concacts </div>
506                           <div class="col-md-10"> <img 
507                           src="/myfiles/download-file/{{task.jobdirname}}/md_fracn.png"
508                           width="500"> </div>
509                         </li>
510                         
511                            {% endif %}
512
513                            {% if task.md_start == "pdbstart" %}
514                         <li class="list-group-item task-item">
515                           <div class="col-md-2"> fluctuations </div>
516                           <div class="col-md-10"> <img 
517                           src="/myfiles/download-file/{{task.jobdirname}}/fluct_plot.png"
518                           width="500"> </div>
519                         </li>
520 <!--
521                         <li class="list-group-item task-item">
522                           <div class="col-md-2"> fluctuations putty on
523                           starting structure</div>
524                           <div class="col-md-10"> 
525                           <a
526                           href="/myfiles/download-file/{{task.jobdirname}}/fluct.pse">
527                           <img 
528                           src="/myfiles/download-file/{{task.jobdirname}}/fluct.png"
529                           width="500"></a> </div>
530                         </li>
531 -->
532                         <li class="list-group-item task-item">
533                           <div class="col-md-2"> fluctuations putty on
534                           starting structure NGL viewer</div>
535                           <div class="col-md-10" id="viewport_putty"
536                           style="width:500px;height:500px;"> 
537                           </div>
538                         </li>
539
540                         
541                            {% endif %}
542
543
544
545                         {% endif %}
546                         
547                         {% if task.type == "remd" or task.type == "dock" %}
548                         
549                         <li class="list-group-item task-item">
550                           <div class="col-md-2"> Energy histogram </div>
551                           <div class="col-md-10"> <img 
552                           src="/myfiles/download-file/{{task.jobdirname}}/remd_ene_hist.png"
553                           width="500"> </div>
554                         </li>
555
556                         <li class="list-group-item task-item">
557                           <div class="col-md-2"> Energy vs. temperature </div>
558                           <div class="col-md-10"> <img 
559                           src="/myfiles/download-file/{{task.jobdirname}}/remd_Tene.png"
560                           width="500"> </div>
561                         </li>
562                         
563                         <li class="list-group-item task-item">
564                           <div class="col-md-2"> Cv vs. temperature </div>
565                           <div class="col-md-10"> <img 
566                           src="/myfiles/download-file/{{task.jobdirname}}/remd_cv.png"
567                           width="500"> </div>
568                         </li>
569                         
570                            {% if task.md_pdbref %}
571
572                         <li class="list-group-item task-item">
573                           <div class="col-md-2"> Average C<sup>&alpha;</sup> RMSD vs. temperature </div>
574                           <div class="col-md-10"> <img 
575                           src="/myfiles/download-file/{{task.jobdirname}}/remd_rmsd.png"
576                           width="500"> </div>
577                         </li>
578
579                         <li class="list-group-item task-item">
580                           <div class="col-md-2"> potential energy vs.
581                           C<sup>&alpha;</sup> RMSD</div>
582                           <div class="col-md-10"> <img 
583                           src="/myfiles/download-file/{{task.jobdirname}}/remd_ene_rms.png"
584                           width="500"> </div>
585                         </li>
586
587                         <li class="list-group-item task-item">
588                           <div class="col-md-2"> C<sup>&alpha;</sup> RMSD vs. step*replica
589                           colored by bath temperature</div>
590                           <div class="col-md-10"> <img 
591                           src="/myfiles/download-file/{{task.jobdirname}}/remd_step_rms.png"
592                           width="500"> </div>
593                         </li>
594
595                         
596                            {% endif %} 
597                           
598                         <li class="list-group-item task-item">
599                           <div class="col-md-2"> exchanges (walk in T) </div>
600                           <div class="col-md-10"> <img 
601                           src="/myfiles/download-file/{{task.jobdirname}}/remd_ex.png"
602                           width="500"> </div>
603                         </li>
604                         
605                            {% if task.saxs_data != "" %}
606                         <li class="list-group-item task-item">
607                           <div class="col-md-2"> P(r) of input SAXS data and
608                           calculated for 5 models and the input pdb</div>
609                           <div class="col-md-10"> <img 
610                           src="/myfiles/download-file/{{task.jobdirname}}/saxs.png"
611                           width="500"> </div>
612                         </li>
613                            {% endif %}
614                         
615         <li class="list-group-item task-item">
616         <div class="col-md-4">
617         <button onclick="plusDivs(-1)">&#10094;</button> 
618         </div>
619         <div class="col-md-6">
620         select model
621         </div>
622         <div class="col-md-2">
623         <button onclick="plusDivs(1)">&#10095;</button>
624         </div>
625         </li>           
626                         
627                         <div class="model">
628 <!--                    <li class="list-group-item task-item">
629                           <div class="col-md-2"> model1 after conversion
630                           to allatom 
631                           {{ task.remd_model1|linebreaks }}
632                           </div>
633                           <div class="col-md-10"> 
634                           <a
635                           href="/myfiles/download-file/{{task.jobdirname}}/MODEL1.pdb">
636                           <img
637                           src="/myfiles/download-file/{{task.jobdirname}}/model1.png" width="500">
638                           </a></div>
639                         </li> -->                       
640                         <li class="list-group-item task-item">
641                           <div class="col-md-2"> model1 
642                           {% if not task.damino %}
643                           after conversion to allatom 
644                           {% endif %}
645                           {{ task.remd_model1|linebreaks }}
646                           NGL viewer</div>
647                           <div class="col-md-10" id="viewport_M1"
648                           style="width:500px;height:500px;"> 
649                           </div>
650                         </li>
651                         <li class="list-group-item task-item">
652                <div class="col-md-12">
653                {% if task.md_pdbref %}
654                <button id="toggleRefM1">Reference structure on/off</button>
655                {% endif %}
656                <button id="toggleSidechainsM1">Side-chains on/off</button>
657                <a class="btn btn-default"
658                href="/myfiles/download-file/{{task.jobdirname}}/MODEL1.pdb">Download</a>               
659                </div>
660                         </li>
661                         
662                         </div>
663                         <div class="model">
664 <!--                    <li class="list-group-item task-item">
665                           <div class="col-md-2"> model2 after conversion
666                           to allatom 
667                           {{ task.remd_model2|linebreaks }}
668                           </div>
669                           <div class="col-md-10"> 
670                           <a
671                           href="/myfiles/download-file/{{task.jobdirname}}/MODEL2.pdb">
672                           <img
673                           src="/myfiles/download-file/{{task.jobdirname}}/model2.png" width="500">
674                           </a></div>
675                         </li> -->
676                         <li class="list-group-item task-item">
677                           <div class="col-md-2"> model2 
678                           {% if not task.damino %}
679                           after conversion to allatom
680                           {% endif %}
681                           {{ task.remd_model2|linebreaks }}
682                           NGL viewer</div>
683                           <div class="col-md-10" id="viewport_M2"
684                           style="width:500px;height:500px;"> 
685                           </div>
686                         </li>
687                         <li class="list-group-item task-item">
688                <div class="col-md-12">
689                {% if task.md_pdbref %}
690                <button id="toggleRefM2">Reference structure on/off</button>
691                {% endif %}
692                <button id="toggleSidechainsM2">Side-chains on/off</button>
693                <a class="btn btn-default"
694                href="/myfiles/download-file/{{task.jobdirname}}/MODEL2.pdb">Download</a>               
695                </div>
696                         </li>
697                         
698                         
699                         </div>
700                         <div class="model">
701 <!--                    <li class="list-group-item task-item">
702                           <div class="col-md-2"> model3 after conversion
703                           to allatom 
704                           {{ task.remd_model3|linebreaks }}
705                           </div>
706                           <div class="col-md-10"> 
707                           <a
708                           href="/myfiles/download-file/{{task.jobdirname}}/MODEL3.pdb">
709                           <img
710                           src="/myfiles/download-file/{{task.jobdirname}}/model3.png" width="500">
711                           </a></div>
712                         </li>-->
713                         <li class="list-group-item task-item">
714                           <div class="col-md-2"> model3 
715                           {% if not task.damino %}
716                           after conversion to allatom
717                           {% endif %}
718                           {{ task.remd_model3|linebreaks }}
719                           NGL viewer</div>
720                           <div class="col-md-10" id="viewport_M3"
721                           style="width:500px;height:500px;"> 
722                           </div>
723                         </li>
724                         <li class="list-group-item task-item">
725                <div class="col-md-12">
726                {% if task.md_pdbref %}
727                <button id="toggleRefM3">Reference structure on/off</button>
728                {% endif %}
729                <button id="toggleSidechainsM3">Side-chains on/off</button>
730                <a class="btn btn-default"
731                href="/myfiles/download-file/{{task.jobdirname}}/MODEL3.pdb">Download</a>               
732                </div>
733                         </li>
734                         
735                         </div>
736                         <div class="model">
737 <!--                    <li class="list-group-item task-item">
738                           <div class="col-md-2"> model4 after conversion
739                           to allatom 
740                           {{ task.remd_model4|linebreaks }}
741                           </div>
742                           <div class="col-md-10"> 
743                           <a
744                           href="/myfiles/download-file/{{task.jobdirname}}/MODEL4.pdb">
745                           <img
746                           src="/myfiles/download-file/{{task.jobdirname}}/model4.png" width="500">
747                           </a></div>
748                         </li>-->
749                         <li class="list-group-item task-item">
750                           <div class="col-md-2"> model4 
751                           {% if not task.damino %}
752                           after conversion to allatom
753                           {% endif %}
754                           {{ task.remd_model4|linebreaks }}
755                           NGL viewer</div>
756                           <div class="col-md-10" id="viewport_M4"
757                           style="width:500px;height:500px;"> 
758                           </div>
759                         </li>
760                         <li class="list-group-item task-item">
761                <div class="col-md-12">
762                {% if task.md_pdbref %}
763                <button id="toggleRefM4">Reference structure on/off</button>
764                {% endif %}
765                <button id="toggleSidechainsM4">Side-chains on/off</button>
766                <a class="btn btn-default"
767                href="/myfiles/download-file/{{task.jobdirname}}/MODEL4.pdb">Download</a>               
768                </div>
769                         </li>
770                         
771                         </div>
772                         <div class="model">
773 <!--                    <li class="list-group-item task-item">
774                           <div class="col-md-2"> model5 after conversion
775                           to allatom 
776                           {{ task.remd_model5|linebreaks }}
777                           </div>
778                           <div class="col-md-10"> 
779                           <a
780                           href="/myfiles/download-file/{{task.jobdirname}}/MODEL5.pdb">
781                           <img
782                           src="/myfiles/download-file/{{task.jobdirname}}/model5.png" width="500">
783                           </a></div>
784                         </li>-->
785                         <li class="list-group-item task-item">
786                           <div class="col-md-2"> model5 
787                           {% if not task.damino %}
788                           after conversion to allatom 
789                           {% endif %}
790                           {{ task.remd_model5|linebreaks }}
791                           NGL viewer</div>
792                           <div class="col-md-10" id="viewport_M5"
793                           style="width:500px;height:500px;"> 
794                           </div>
795                         </li>
796                         <li class="list-group-item task-item">
797                <div class="col-md-12">
798                {% if task.md_pdbref %}
799                <button id="toggleRefM5">Reference structure on/off</button>
800                {% endif %}
801                <button id="toggleSidechainsM5">Side-chains on/off</button>
802                <a class="btn btn-default"
803                href="/myfiles/download-file/{{task.jobdirname}}/MODEL5.pdb">Download</a>               
804                </div>
805                         </li>
806                         
807                         </div>
808                         {% endif %}
809
810         {% endif %}             
811
812         </ul>
813         
814 <script src="/static/jquery.min.js"></script>
815 <script src="https://unpkg.com/ngl"></script>
816
817 <script>
818 $('.majorpointslegend').click(function(){
819     $(this.parentNode).find('.hiders').toggle();
820     if($(this.parentNode).find('.majorpointslegend').text()=='Show input parameters'){
821         $(this.parentNode).find('.majorpointslegend').text('Hide input parameters');
822     }else{
823         $(this.parentNode).find('.majorpointslegend').text('Show input parameters');
824     }    
825 });
826 </script>
827
828 {% if task.type == "remd" or task.type == "dock" %}
829 <script>
830 function display_model(numstr){
831
832 {% if task.md_pdbref %}
833   var stage = new NGL.Stage("viewport_M"+numstr);
834   stage.setParameters( { backgroundColor: "white",fogFar: 60, fogNear: 45 } );
835   Promise.all([
836       stage.loadFile( "/myfiles/download-file/{{task.jobdirname}}/plik1.pdb" ,{defaultRepresentation: false}) .then( function( o ){
837         o.addRepresentation( "cartoon",{ name:"ref", color:"grey"
838         })
839         o.addRepresentation( "line", {name:"refsc",visible: false,
840          sele:"not hydrogen and sidechainAttached"
841         })    
842         return o
843       }),
844       stage.loadFile(
845       "/myfiles/download-file/{{task.jobdirname}}/MODEL"+numstr+".pdb",{defaultRepresentation: false}) .then( function( o ){
846  {% if task.damino %}
847         o.addRepresentation( "licorice",{ name: "unres", color:
848                "residueindex",colorScale:["blue","cyan", "green",
849                "yellow","orange", "red"], sele:".CA"
850                        })
851         o.addRepresentation( "licorice",{ name: "unressc", visible: false, color:
852        "residueindex",colorScale:["blue","cyan", "green", "yellow","orange", "red"]
853         , sele:"*" })    
854  {% else %}
855         o.addRepresentation( "cartoon",{ name: "unres", color:
856                "residueindex",colorScale:["blue","cyan", "green",
857                "yellow","orange", "red"]
858                        })
859         o.addRepresentation( "line",{ name: "unressc", visible: false, color:
860        "residueindex",colorScale:["blue","cyan", "green", "yellow","orange", "red"]
861         , sele:"not hydrogen and sidechainAttached" })    
862  {% endif %}
863         return o
864       })
865   ]).then(function (ol1) {
866    ol1[ 1 ].superpose(ol1[ 0 ], false, ".CA")
867    ol1[ 0 ].autoView()
868   })             
869             var ref=true;
870             var side=false;
871             var toggleAll = document.getElementById( "toggleRefM"+numstr );
872             toggleAll.addEventListener( "click", function(){
873                         ref=! ref;                                
874                         stage.getRepresentationsByName(
875                                 "ref" ).list.forEach( function( repre ){
876                                 repre.setVisibility( !repre.visible );
877                         } );
878                 if (side) {
879                         stage.getRepresentationsByName(
880                                 "refsc" ).list.forEach( function( repre ){
881                                 repre.setVisibility( !repre.visible );
882                         } );
883                 }
884
885             } );
886      var toggleSidechains =document.getElementById("toggleSidechainsM"+numstr );
887      toggleSidechains.addEventListener( "click", function(){
888              side=!side;
889              if (ref) {
890                  stage.getRepresentationsByName(
891                         "refsc" ).list.forEach( function( repre ){
892                         repre.setVisibility( !repre.visible );
893              } );
894       }
895       stage.getRepresentationsByName("unressc").list.forEach( function( repre ){
896                         repre.setVisibility( !repre.visible );
897         } );
898
899       } );
900 {% else %}
901   var stage = new NGL.Stage("viewport_M"+numstr);
902   stage.setParameters( { backgroundColor: "white",fogFar: 60, fogNear: 45 } );
903   stage.loadFile( "/myfiles/download-file/{{task.jobdirname}}/MODEL"+numstr+".pdb",{defaultRepresentation: false}) .then( function( o ){
904  {% if task.damino %}
905         o.addRepresentation( "licorice",{ name: "unres", color:
906                "residueindex",colorScale:["blue","cyan", "green",
907                "yellow","orange", "red"],sele:".CA"
908                        });
909         o.addRepresentation( "licorice",{ name: "unressc", visible: false, color:
910        "residueindex",colorScale:["blue","cyan", "green", "yellow","orange", "red"]
911         , sele:"*" });
912  {% else %}
913         o.addRepresentation( "cartoon",{ name: "unres", color:
914                "residueindex",colorScale:["blue","cyan", "green",
915                "yellow","orange", "red"]
916                        });
917         o.addRepresentation( "line",{ name: "unressc", visible: false, color:
918        "residueindex",colorScale:["blue","cyan", "green", "yellow","orange", "red"]
919         , sele:"not hydrogen and sidechainAttached" });
920  {% endif %}
921         o.autoView();
922   })             
923      var toggleSidechains =document.getElementById("toggleSidechainsM"+numstr );
924      toggleSidechains.addEventListener( "click", function(){
925       stage.getRepresentationsByName("unressc").list.forEach( function( repre ){
926                         repre.setVisibility( !repre.visible );
927         } );
928
929       } );
930
931 {% endif %}
932 }
933
934
935 window.addEventListener("resize", 
936 function (event) {
937       stage.handleResize();
938 },false);
939
940
941 display_model("1")
942
943
944 var slideIndex = 1;
945 var y = document.getElementsByClassName("model");
946 var lista=[];
947 var ii;
948 for (ii = 0; ii < y.length; ii++) {
949  lista.push(0)
950 }
951 lista[0]=1;
952 showDivs(slideIndex);
953
954 function plusDivs(n) {
955   showDivs(slideIndex += n);
956 }
957
958 function showDivs(n) {
959   var i;
960   var x = document.getElementsByClassName("model");
961   if (n > x.length) {slideIndex = 1}
962   if (n < 1) {slideIndex = x.length}
963   for (i = 0; i < x.length; i++) {
964      x[i].style.display = "none";
965   }
966   x[slideIndex-1].style.display = "block";
967   
968   if (lista[slideIndex-1] == 0 && slideIndex == 2) {
969     display_model("2")  
970   }
971   
972   if (lista[slideIndex-1] == 0 && slideIndex == 3) {
973      display_model("3")  
974   }
975
976   if (lista[slideIndex-1] == 0 && slideIndex == 4) {
977      display_model("4")  
978   }
979
980   if (lista[slideIndex-1] == 0 && slideIndex == 5) {
981      display_model("5")  
982   }
983     
984   
985   if (lista[slideIndex-1] == 0) {lista[slideIndex-1]=1}
986 }
987 </script>
988 {% endif %}
989
990 {% if not task.done %}
991 <script>
992 function worker() {
993   $.ajax({
994     data:{csrfmiddlewaretoken: '{{ csrf_token }}'},
995     url: "/refresh_done/", 
996     type:"post",
997     success: function(data) {
998       document.location.reload();
999     },
1000     complete: function() {
1001       // Schedule the next request when the current one's complete
1002       setTimeout(worker, 30000);
1003     }
1004   });
1005 };
1006 $(document).ready(function() {
1007   // run the first time; all subsequent calls will take care of themselves
1008   setTimeout(worker, 30000);
1009 });
1010 </script>
1011 {% endif %}     
1012
1013 {% if task.type == "min" %}
1014 <script>
1015 window.addEventListener("resize",
1016      function (event) {
1017      stage.handleResize();
1018      },false);
1019                
1020 var stage_unres = new NGL.Stage("viewport_unres");
1021 stage_unres.setParameters( { backgroundColor: "white" } );
1022 /**
1023 [color_Red, color_Green, color_Blue, ellipsoid_width, ellipsoid_length ]
1024 */
1025 var resdb = {   'CYS': [1.000, 1.000, 0.000, 1.33741, 2.96868],
1026                 'MET': [0.000, 1.000, 0.000, 1.36694, 3.08863],
1027                 'PHE': [0.000, 0.392, 0.000, 1.48323, 3.04238],
1028                 'ILE': [0.000, 1.000, 0.000, 1.44098, 3.17389],
1029                 'LEU': [0.000, 1.000, 0.000, 1.51054, 2.52078],
1030                 'VAL': [0.000, 1.000, 0.000, 1.42072, 2.68924],
1031                 'TRP': [0.000, 0.392, 0.000, 1.23867, 3.47403],
1032                 'TYR': [0.596, 0.984, 0.596, 1.23060, 3.35434],
1033                 'ALA': [0.000, 1.000, 0.000, 1.23266, 1.72686],
1034                 'GLY': [1.000, 1.000, 1.000, 1.24626, 1.11383],
1035                 'THR': [1.000, 0.000, 1.000, 1.28674, 2.59210],
1036                 'SER': [1.000, 0.000, 1.000, 1.22820, 1.68800],
1037                 'GLN': [1.000, 0.000, 1.000, 1.24239, 2.22201],
1038                 'ASN': [1.000, 0.000, 1.000, 1.24447, 2.24946],
1039                 'GLU': [1.000, 0.000, 0.000, 1.25448, 2.05551],
1040                 'ASP': [1.000, 0.000, 0.000, 1.25417, 1.77556],
1041                 'HIS': [1.000, 0.000, 1.000, 1.21103, 3.02627],
1042                 'ARG': [0.000, 0.000, 1.000, 1.13573, 3.25143],
1043                 'LYS': [0.000, 0.000, 1.000, 1.22604, 4.50054],
1044                 'PRO': [0.000, 1.000, 1.000, 1.35131, 2.20525]
1045                         };
1046 stage_unres.loadFile("/myfiles/download-file/{{task.jobdirname}}/file_GB000.pdb", {defaultRepresentation: false}).then
1047        (function ( o ){
1048        var shape = new NGL.Shape("shape")
1049        var chain = ""
1050        o.addRepresentation("licorice");
1051        o.structure.eachAtom(function(atom){
1052          if (atom.atomname == "CA" && atom.chainname == chain) {
1053           px=CAx+(atom.x-CAx)/2;
1054           py=CAy+(atom.y-CAy)/2;
1055           pz=CAz+(atom.z-CAz)/2;
1056           shape.addSphere([px,py,pz],[0.643, 0.933, 0.960],0.6,"p");
1057          }
1058          if (atom.atomname == "CA") {
1059          chain= atom.chainname
1060          CAx= atom.x;
1061          CAy= atom.y
1062          CAz= atom.z
1063          }
1064          if (atom.atomname == "CB") {
1065           mx = (atom.x-CAx);
1066           my = (atom.y-CAy);
1067           mz = (atom.z-CAz);
1068           norm=Math.sqrt(mx*mx+my*my+mz*mz);
1069           res=atom.resname;
1070           var longaxis=resdb[res][4]
1071           var shortaxis=resdb[res][3]
1072           mx = mx /norm*longaxis;
1073           my = my /norm*longaxis;
1074           mz = mz /norm*longaxis;
1075           resn=res+atom.resno
1076           shape.addEllipsoid([ atom.x, atom.y, atom.z ], 
1077               [ resdb[res][0], resdb[res][1], resdb[res][2]], 
1078               shortaxis, [ mx, my, mz ], [ 0, shortaxis, 0 ],resn);
1079          }
1080        });
1081        var shapeComp = stage_unres.addComponentFromObject(shape)
1082        shapeComp.addRepresentation("buffer")
1083        o.autoView();
1084 });
1085
1086
1087
1088 var stage = new NGL.Stage("viewport_min");
1089 stage.setParameters( { backgroundColor: "white" } );
1090 Promise.all([
1091   stage.loadFile( "/myfiles/download-file/{{task.jobdirname}}/file_GB000.pdb" ,{defaultRepresentation: false}) .then( function( o ){
1092      o.addRepresentation( "backbone",{ color:
1093        "residueindex",colorScale:["blue","cyan", "green", "yellow","orange", "red"]
1094      })
1095      o.addRepresentation( "licorice",{ color:
1096        "residueindex",colorScale:["blue","cyan", "green", "yellow","orange","red"]
1097      })    
1098      return o
1099   }),
1100       
1101   stage.loadFile("/myfiles/download-file/{{task.jobdirname}}/plik.pdb",{defaultRepresentation: false}) .then( function( o ){
1102      o.addRepresentation( "backbone",{ name: "allatom", color:
1103        "residueindex",colorScale:["blue","cyan", "green","yellow","orange", "red"]
1104      })
1105      o.addRepresentation( "line",{ name: "allatomsc", color:
1106        "residueindex",colorScale:["blue","cyan", "green", "yellow","orange", "red"]
1107        ,sele:"not hydrogen and sidechainAttached" 
1108      })    
1109      return o
1110   })
1111 ]).then(function (ol) {
1112    ol[ 0 ].superpose(ol[ 1 ], false, ".CA")
1113    ol[ 0 ].autoView()
1114 })             
1115
1116 var allatom=true;
1117 var side=true;
1118 var toggleAll = document.getElementById( "toggleAllatom" );
1119 toggleAll.addEventListener( "click", function(){
1120                         allatom=! allatom;                                
1121                         stage.getRepresentationsByName(
1122                                 "allatom" ).list.forEach( function( repre ){
1123                                 repre.setVisibility( !repre.visible );
1124                         } );
1125             if (side) {
1126                         stage.getRepresentationsByName(
1127                                 "allatomsc" ).list.forEach( function( repre ){
1128                                 repre.setVisibility( !repre.visible );
1129                         } );
1130             }
1131 } );
1132 var toggleSidechains = document.getElementById("toggleSidechains2" );
1133 toggleSidechains.addEventListener( "click", function(){
1134           side=!side;
1135           if (allatom) {
1136                 stage.getRepresentationsByName(
1137                         "allatomsc" ).list.forEach( function( repre ){
1138                                 repre.setVisibility( !repre.visible );
1139                 } );
1140                                                       
1141           }
1142           stage.getRepresentationsByName("licorice").list.forEach( function( repre ){
1143                 repre.setVisibility( !repre.visible );
1144           } );
1145
1146 } );
1147 </script>
1148 {% endif %}
1149
1150 {% if task.type == "md" and task.md_start == "pdbstart" %}
1151 <script>
1152 window.addEventListener("resize",
1153      function (event) {
1154      stage.handleResize();
1155      },false);
1156
1157 var stage = new NGL.Stage("viewport_putty");
1158 stage.setParameters( { backgroundColor: "white" } );
1159
1160 var tooltip = document.createElement("div")
1161 Object.assign(tooltip.style, {
1162   display: "none",
1163   position: "fixed",
1164   zIndex: 10,
1165   pointerEvents: "none",
1166   backgroundColor: "rgba( 0, 0, 0, 0.6 )",
1167   color: "lightgrey",
1168   padding: "8px",
1169   fontFamily: "sans-serif"
1170 })
1171 document.body.appendChild(tooltip)
1172
1173 stage.loadFile("/myfiles/download-file/{{task.jobdirname}}/plik_bf.pdb", {defaultRepresentation: false}).then 
1174        (function ( o ){
1175        o.addRepresentation("tube",{ color: "bfactor" , scale: 0.25,
1176        sele: "backbone",
1177        radius:"bfactor",
1178        colorScale:["blue","cyan", "green", "yellow","orange", "red"] });
1179        o.addRepresentation("licorice",{sele:"sidechainAttached and CYS and not hydrogen"});
1180        o.autoView();
1181 })
1182
1183 // remove default hoverPick mouse action
1184 stage.mouseControls.remove("hoverPick")
1185
1186 stage.signals.hovered.add(function (pickingProxy) {
1187   if (pickingProxy && (pickingProxy.atom || pickingProxy.bond)) {
1188     var atom = pickingProxy.atom || pickingProxy.closestBondAtom
1189     var mp = pickingProxy.mouse.position
1190     var bf= atom.bfactor.toFixed(2)
1191     tooltip.innerText = atom.qualifiedName()+" Fluctuation="+ bf
1192     tooltip.style.bottom = window.innerHeight - mp.y + 3 + "px"
1193     tooltip.style.left = mp.x + 3 + "px"
1194     tooltip.style.display = "block"
1195   } else {
1196     tooltip.style.display = "none"
1197   }
1198 })
1199 </script>
1200 {% endif %}     
1201
1202 {% if task.type == "md" and task.md_mdpdb %}
1203 <script>
1204 window.addEventListener("resize",
1205      function (event) {
1206      stage.handleResize();
1207      },false);
1208
1209       var stage = new NGL.Stage("viewport_traj");
1210       stage.setParameters( { backgroundColor: "white" } );
1211       stage.setParameters( { cameraType: "orthographic" } ); 
1212       var traj;
1213       var player;
1214       stage.loadFile( "/myfiles/download-file/{{task.jobdirname}}/file_MD000.pdb", { 
1215        asTrajectory: true } ) .then( function( o ){
1216         o.setName ("unres_md");
1217         o.addRepresentation( "backbone",{ color:
1218        "residueindex",colorScale:["blue","cyan", "green", "yellow","orange", "red"]
1219         });
1220         o.addRepresentation( "licorice",{ color:
1221        "residueindex",colorScale:["blue","cyan", "green", "yellow","orange", "red"]
1222         });        
1223         o.setPosition([0, 0, 100]);
1224         o.autoView();
1225         o.addTrajectory();
1226       });
1227
1228             var toggleSidechains = document.getElementById( "toggleSidechains1" );
1229             toggleSidechains.addEventListener( "click", function(){
1230                                                         stage.getRepresentationsByName( "licorice" ).list.forEach( function( repre ){
1231                                                                         repre.setVisibility( !repre.visible );
1232                                                         } );
1233             } );
1234
1235
1236       function numberWithCommas(x) {
1237                 return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
1238       }
1239       var toggleRunMDs = document.getElementById( "toggleRunMDs" );
1240       var isRunning = false;
1241       toggleRunMDs.addEventListener( "click", function(){
1242          var trajComp = stage.getComponentsByName("unres_md").list[0].trajList[0];
1243          var player = new NGL.TrajectoryPlayer(trajComp.trajectory, {timeout: 10, mode: "once"});
1244                                 if( !isRunning ){
1245                                         player.play();
1246                                         isRunning = true;
1247
1248                     trajComp.signals.frameChanged.add(function(){
1249                       var fnum=trajComp.trajectory.currentFrame+1;                   
1250                       clipRange.value = fnum;
1251                       clipRange_val.innerHTML = numberWithCommas(parseInt(clipRange.value*1));
1252                     });
1253
1254                                 }else{
1255                                         player.play();
1256                                         player.pause();
1257                                         isRunning = false;
1258                                 }
1259       } );      
1260       var clipRange = document.getElementById( "clipRange" );
1261       var clipRange_val = document.getElementById( "clipRange_val" );
1262       clipRange.oninput = function( e ){
1263                 var trajComp = stage.getComponentsByName("unres_md").list[0].trajList[0];
1264                 trajComp.setFrame(e.target.value-1)
1265                 clipRange_val.innerHTML = numberWithCommas(parseInt(e.target.value*1));
1266       };      
1267
1268 </script>
1269 {% endif %}     
1270
1271
1272 {% endblock %}