details input show/hide correction
[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                                         {% else %}
47                                           {% if task.running > 0  %}
48                                                 <span class="fa fa-spinner
49                                                 fa-spin"></span>
50                                                 {{ task.running }}%
51                                           {% else %}
52                                                 <span class="fa fa-square-o"></span>
53                                           {% endif %}
54                                         {% endif %}
55
56                                 </div>
57                         </li>   
58 <div>
59     <fieldset class="majorpoints">
60     <legend class="majorpointslegend"
61     style="background-color:#d3d3d3;cursor: pointer;">Show input parameters</legend>
62     <div class="hiders" style="display:none" >
63
64                         <li class="list-group-item task-item">
65                             <div class="col-md-6"> type </div>
66                             <div class="col-md-6">{{ task.type }}</div>
67                         </li>           
68          
69                         <li class="list-group-item task-item">
70                             <div class="col-md-6"> force field </div>
71                             <div class="col-md-6">{{ task.unres_ff }}</div>
72                         </li>           
73
74                         <li class="list-group-item task-item">
75                             <div class="col-md-4"> sequence </div>
76                             <div class="col-md-8">{{ task.md_seq}}</div>
77                         </li>           
78
79                         <li class="list-group-item task-item">
80                             <div class="col-md-6"> SSBOND </div>
81                             <div class="col-md-6">{{ task.ssbond}}</div>
82                         </li>           
83
84                         
85         {% if task.type == "min" %}
86
87
88                         <li class="list-group-item task-item">
89                             <div class="col-md-6"> algorithm</div>
90                             <div class="col-md-6">{{ task.min_choice }}</div>
91                         </li>           
92                         <li class="list-group-item task-item">
93                             <div class="col-md-6"> overlap</div>
94                             <div class="col-md-6">{{ task.min_overlap }}</div>
95                         </li>           
96                         <li class="list-group-item task-item">
97                             <div class="col-md-6"> searchsc</div>
98                             <div class="col-md-6">{{ task.min_searchsc }}</div>
99                         </li>           
100                         <li class="list-group-item task-item">
101                             <div class="col-md-6"> maxmin</div>
102                             <div class="col-md-6">{{ task.min_maxmin }}</div>
103                         </li>           
104                         <li class="list-group-item task-item">
105                             <div class="col-md-6"> maxfun</div>
106                             <div class="col-md-6">{{ task.min_maxfun }}</div>
107                         </li>           
108                         <li class="list-group-item task-item">
109                             <div class="col-md-6"> pdbout</div>
110                             <div class="col-md-6">{{ task.min_pdbout }}</div>
111                         </li>           
112                         <li class="list-group-item task-item">
113                             <div class="col-md-6"> input pdb </div>
114                             <div class="col-md-6">{{ task.myfile1 }}</div>
115                         </li>           
116                         <li class="list-group-item task-item">
117                             <div class="col-md-6"> pdb code</div>
118                             <div class="col-md-6">{{ task.pdbcode }}</div>
119                         </li>           
120                         <li class="list-group-item task-item">
121                             <div class="col-md-6"> unres_pdb</div>
122                             <div class="col-md-6">{{ task.min_unres_pdb }}</div>
123                         </li>           
124                         
125         {% endif %}
126         {% if task.type == "md" %}
127                         <li class="list-group-item task-item">
128                             <div class="col-md-6"> starting </div>
129                             <div class="col-md-6">{{ task.md_start}}</div>
130                         </li>           
131                         
132                         <li class="list-group-item task-item">
133                             <div class="col-md-6"> input pdb </div>
134                             <div class="col-md-6">{{ task.myfile1 }}</div>
135                         </li>           
136                         <li class="list-group-item task-item">
137                             <div class="col-md-6"> pdb code</div>
138                             <div class="col-md-6">{{ task.pdbcode }}</div>
139                         </li>           
140                         <li class="list-group-item task-item">
141                             <div class="col-md-6"> seed </div>
142                             <div class="col-md-6">{{ task.md_seed}}</div>
143                         </li>           
144                         <li class="list-group-item task-item">
145                             <div class="col-md-6"> pdbref </div>
146                             <div class="col-md-6">{{ task.md_pdbref}}</div>
147                         </li>           
148                         <li class="list-group-item task-item">
149                             <div class="col-md-6"> respa </div>
150                             <div class="col-md-6">{{ task.md_respa}}</div>
151                         </li>           
152                         <li class="list-group-item task-item">
153                             <div class="col-md-6"> temperature </div>
154                             <div class="col-md-6">{{ task.md_temp}}</div>
155                         </li>           
156                         <li class="list-group-item task-item">
157                             <div class="col-md-6"> nstep </div>
158                             <div class="col-md-6">{{ task.md_nstep}}</div>
159                         </li>           
160                         <li class="list-group-item task-item">
161                             <div class="col-md-6"> ntwe </div>
162                             <div class="col-md-6">{{ task.md_ntwe}}</div>
163                         </li>           
164                         <li class="list-group-item task-item">
165                             <div class="col-md-6"> ntwx </div>
166                             <div class="col-md-6">{{ task.md_ntwx}}</div>
167                         </li>           
168                         <li class="list-group-item task-item">
169                             <div class="col-md-6"> dt </div>
170                             <div class="col-md-6">{{ task.md_dt}}</div>
171                         </li>           
172                         <li class="list-group-item task-item">
173                             <div class="col-md-6"> thermostat </div>
174                             <div class="col-md-6">{{ task.md_lang}}</div>
175                         </li>           
176                         
177                         {% if task.md_lang == "berendsen" %}
178                         
179                         <li class="list-group-item task-item">
180                             <div class="col-md-6"> tau </div>
181                             <div class="col-md-6">{{ task.md_tau}}</div>
182                         </li>           
183                         
184                         {% else %}
185                         
186                         <li class="list-group-item task-item">
187                             <div class="col-md-6"> scal_fric </div>
188                             <div class="col-md-6">{{ task.md_scal_fric}}</div>
189                         </li>   
190                         
191                         {% endif %}
192                                 
193                         <li class="list-group-item task-item">
194                             <div class="col-md-6"> mdpdb </div>
195                             <div class="col-md-6">{{ task.md_mdpdb}}</div>
196                         </li>           
197                         <li class="list-group-item task-item">
198                             <div class="col-md-6"> RESPA </div>
199                             <div class="col-md-6">{{ task.md_respa}}</div>
200                         </li>           
201                         
202                         
203         {% endif %}
204
205         {% if task.type == "remd" %}
206
207                         <li class="list-group-item task-item">
208                             <div class="col-md-6"> nrep </div>
209                             <div class="col-md-6">{{ task.remd_nrep}}</div>
210                         </li>           
211                         <li class="list-group-item task-item">
212                             <div class="col-md-6"> starting </div>
213                             <div class="col-md-6">{{ task.md_start}}</div>
214                         </li>           
215                         
216                         <li class="list-group-item task-item">
217                             <div class="col-md-6"> input pdb </div>
218                             <div class="col-md-6">{{ task.myfile1 }}</div>
219                         </li>           
220                         <li class="list-group-item task-item">
221                             <div class="col-md-6"> pdb code</div>
222                             <div class="col-md-6">{{ task.pdbcode }}</div>
223                         </li>           
224                         <li class="list-group-item task-item">
225                             <div class="col-md-6"> seed </div>
226                             <div class="col-md-6">{{ task.md_seed}}</div>
227                         </li>           
228                         <li class="list-group-item task-item">
229                             <div class="col-md-6"> pdbref </div>
230                             <div class="col-md-6">{{ task.md_pdbref}}</div>
231                         </li>           
232                         <li class="list-group-item task-item">
233                             <div class="col-md-6"> respa </div>
234                             <div class="col-md-6">{{ task.md_respa}}</div>
235                         </li>           
236                         <li class="list-group-item task-item">
237                             <div class="col-md-6"> nstep </div>
238                             <div class="col-md-6">{{ task.md_nstep}}</div>
239                         </li>           
240                         <li class="list-group-item task-item">
241                             <div class="col-md-6"> ntwe </div>
242                             <div class="col-md-6">{{ task.md_ntwe}}</div>
243                         </li>           
244                         <li class="list-group-item task-item">
245                             <div class="col-md-6"> nstex </div>
246                             <div class="col-md-6">{{ task.remd_nstex}}</div>
247                         </li>           
248                         <li class="list-group-item task-item">
249                             <div class="col-md-6"> ntwx </div>
250                             <div class="col-md-6">{{ task.md_ntwx}}</div>
251                         </li>                                   
252                         <li class="list-group-item task-item">
253                             <div class="col-md-6"> dt </div>
254                             <div class="col-md-6">{{ task.md_dt}}</div>
255                         </li>           
256                         <li class="list-group-item task-item">
257                             <div class="col-md-6"> thermostat </div>
258                             <div class="col-md-6">{{ task.md_lang}}</div>
259                         </li>           
260                         
261                         {% if task.md_lang == "berendsen" %}
262                         
263                         <li class="list-group-item task-item">
264                             <div class="col-md-6"> tau </div>
265                             <div class="col-md-6">{{ task.md_tau}}</div>
266                         </li>           
267                         
268                         {% else %}
269                         
270                         <li class="list-group-item task-item">
271                             <div class="col-md-6"> scal_fric </div>
272                             <div class="col-md-6">{{ task.md_scal_fric}}</div>
273                         </li>   
274                         
275                         {% endif %}
276
277                         <li class="list-group-item task-item">
278                             <div class="col-md-6"> RESPA </div>
279                             <div class="col-md-6">{{ task.md_respa}}</div>
280                         </li>           
281                                 
282                         <li class="list-group-item task-item">
283                             <div class="col-md-6"> temperatures </div>
284                             <div class="col-md-6">{{ task.remd_multi_t}}</div>
285                         </li>           
286                         <li class="list-group-item task-item">
287                             <div class="col-md-6"> multiplex </div>
288                             <div class="col-md-6">{{ task.remd_multi_m}}</div>
289                         </li>           
290                         <li class="list-group-item task-item">
291                             <div class="col-md-6"> temperature for clustering</div>
292                             <div class="col-md-6">{{ task.remd_cluter_temp}}</div>
293                         </li>           
294                         {% if task.saxs_data != "" %}                   
295                         <li class="list-group-item task-item">
296                             <div class="col-md-6"> wsaxs </div>
297                             <div class="col-md-6">{{ task.wsaxs }}</div>
298                         </li>           
299                         <li class="list-group-item task-item">
300                             <div class="col-md-6"> scal_rad (saxs) </div>
301                             <div class="col-md-6">{{ task.scal_rad }}</div>
302                         </li>           
303                         <li class="list-group-item task-item">
304                             <div class="col-md-6"> saxs distribution </div>
305                             <div class="col-md-6"><pre> {{ task.saxs_data }}</pre></div>
306                         </li>           
307                         {% endif %}
308
309         {% endif %}
310
311                         <li class="list-group-item task-item">
312                             <div class="col-md-6"> Box X Y Z</div>
313                             <div class="col-md-2">{{ task.boxx}}</div>
314                             <div class="col-md-2">{{ task.boxy}}</div>                      
315                             <div class="col-md-2">{{ task.boxz}}</div>                      
316                         </li>           
317
318 </div>
319 </div>
320         <p>
321         <h3> Results </h3>
322                         <li class="list-group-item task-item">
323                             <div class="col-md-4"> Directory </div>
324                             <div class="col-md-8">
325                             <a href="/myfiles/list/{{task.jobdirname}}/">
326                             {{ task.jobdirname }}
327                             </a>
328                             </div>
329                         </li>           
330
331
332         {% if task.done %}
333                         
334                         {% if task.type == "min" %}
335                         
336                         <li class="list-group-item task-item">
337                             <div class="col-md-2"> Etot </div>
338                             <div class="col-md-10">{{ task.etot }}</div>
339                         </li>           
340                         
341                         <li class="list-group-item task-item">
342                           <div class="col-md-2"> UNRES model </div>
343                           <div class="col-md-10"> 
344                           <a
345                            href="/myfiles/download-file/{{task.jobdirname}}/unres.pse">
346                           <img 
347                           src="/myfiles/download-file/{{task.jobdirname}}/unres.png"
348                           width="500"></a> </div>
349                         </li>
350
351
352                         <li class="list-group-item task-item">
353                           <div class="col-md-2"> Structure overlap </div>
354                           <div class="col-md-10"> <img 
355                           src="/myfiles/download-file/{{task.jobdirname}}/unres_overlap.png"
356                           width="500"> </div>
357                         </li>
358
359
360                         {% endif %}
361
362                         <li class="list-group-item task-item">
363                             <div class="col-md-2"> Results </div>
364                             <div class="col-md-10">{{ task.results_text|linebreaks }}</div>
365                         </li>           
366                         
367                         {% if task.type == "md" %}
368
369                         <li class="list-group-item task-item">
370                           <div class="col-md-2"> Temperature histogram </div>
371                           <div class="col-md-10"> <img 
372                           src="/myfiles/download-file/{{task.jobdirname}}/temp_hist.png"
373                           width="500"> </div>
374                         </li>
375
376                         <li class="list-group-item task-item">
377                           <div class="col-md-2"> Potential energy </div>
378                           <div class="col-md-10"> <img 
379                           src="/myfiles/download-file/{{task.jobdirname}}/md_ene.png"
380                           width="500"> </div>
381                         </li>
382
383                             <li class="list-group-item task-item">
384                             <div class="col-md-2"> Movie </div>
385                             <div class="col-md-10"> 
386
387                             <video width="500" height="400" preload controls>
388                             <source
389                             src="/myfiles/download-file/{{task.jobdirname}}/md.ogv"
390                             type="video/ogg; codecs=theora"> </source>
391                             </video>
392                           
393                             </div>
394                             </li>
395                             
396                         <li class="list-group-item task-item">
397                           <div class="col-md-2"> Radius of gyration based
398                           on C<sup>α</sup> coordinates </div>
399                           <div class="col-md-10"> <img 
400                           src="/myfiles/download-file/{{task.jobdirname}}/md_gyr.png"
401                           width="500"> </div>
402                         </li>
403                             
404
405                 
406                            {% if task.md_pdbref %}
407                         <li class="list-group-item task-item">
408                           <div class="col-md-2"> RMSD </div>
409                           <div class="col-md-10"> <img 
410                           src="/myfiles/download-file/{{task.jobdirname}}/md_rms.png"
411                           width="500"> </div>
412                         </li>
413
414                         <li class="list-group-item task-item">
415                           <div class="col-md-2"> fraction of native
416                           side-chain concacts </div>
417                           <div class="col-md-10"> <img 
418                           src="/myfiles/download-file/{{task.jobdirname}}/md_fracn.png"
419                           width="500"> </div>
420                         </li>
421                         
422                            {% endif %}
423
424                            {% if task.md_start == "pdbstart" %}
425                         <li class="list-group-item task-item">
426                           <div class="col-md-2"> fluctuations </div>
427                           <div class="col-md-10"> <img 
428                           src="/myfiles/download-file/{{task.jobdirname}}/fluct_plot.png"
429                           width="500"> </div>
430                         </li>
431
432                         <li class="list-group-item task-item">
433                           <div class="col-md-2"> fluctuations putty on
434                           starting structure</div>
435                           <div class="col-md-10"> 
436                           <a
437                           href="/myfiles/download-file/{{task.jobdirname}}/fluct.pse">
438                           <img 
439                           src="/myfiles/download-file/{{task.jobdirname}}/fluct.png"
440                           width="500"></a> </div>
441                         </li>
442                         
443                            {% endif %}
444
445
446
447                         {% endif %}
448                         
449                         {% if task.type == "remd" %}
450                         
451                         <li class="list-group-item task-item">
452                           <div class="col-md-2"> Energy histogram </div>
453                           <div class="col-md-10"> <img 
454                           src="/myfiles/download-file/{{task.jobdirname}}/remd_ene_hist.png"
455                           width="500"> </div>
456                         </li>
457
458                         <li class="list-group-item task-item">
459                           <div class="col-md-2"> Energy vs. temperature </div>
460                           <div class="col-md-10"> <img 
461                           src="/myfiles/download-file/{{task.jobdirname}}/remd_Tene.png"
462                           width="500"> </div>
463                         </li>
464                         
465                         <li class="list-group-item task-item">
466                           <div class="col-md-2"> Cv vs. temperature </div>
467                           <div class="col-md-10"> <img 
468                           src="/myfiles/download-file/{{task.jobdirname}}/remd_cv.png"
469                           width="500"> </div>
470                         </li>
471                         
472                            {% if task.md_pdbref %}
473
474                         <li class="list-group-item task-item">
475                           <div class="col-md-2"> Average RMSD vs. temperature </div>
476                           <div class="col-md-10"> <img 
477                           src="/myfiles/download-file/{{task.jobdirname}}/remd_rmsd.png"
478                           width="500"> </div>
479                         </li>
480
481                         <li class="list-group-item task-item">
482                           <div class="col-md-2"> potential energy vs. RMSD</div>
483                           <div class="col-md-10"> <img 
484                           src="/myfiles/download-file/{{task.jobdirname}}/remd_ene_rms.png"
485                           width="500"> </div>
486                         </li>
487
488                         <li class="list-group-item task-item">
489                           <div class="col-md-2"> RMSD vs. step*replica
490                           colored by bath temperature</div>
491                           <div class="col-md-10"> <img 
492                           src="/myfiles/download-file/{{task.jobdirname}}/remd_step_rms.png"
493                           width="500"> </div>
494                         </li>
495
496                         
497                            {% endif %} 
498                           
499                         <li class="list-group-item task-item">
500                           <div class="col-md-2"> exchanges (walk in T) </div>
501                           <div class="col-md-10"> <img 
502                           src="/myfiles/download-file/{{task.jobdirname}}/remd_ex.png"
503                           width="500"> </div>
504                         </li>
505                         
506                            {% if task.saxs_data != "" %}
507                         <li class="list-group-item task-item">
508                           <div class="col-md-2"> P(r) of input SAXS data and
509                           calculated for 5 models </div>
510                           <div class="col-md-10"> <img 
511                           src="/myfiles/download-file/{{task.jobdirname}}/saxs.png"
512                           width="500"> </div>
513                         </li>
514                            {% endif %}
515                         
516         <li class="list-group-item task-item">
517         <div class="col-md-4">
518         <button onclick="plusDivs(-1)">&#10094;</button> 
519         </div>
520         <div class="col-md-6">
521         select model
522         </div>
523         <div class="col-md-2">
524         <button onclick="plusDivs(1)">&#10095;</button>
525         </div>
526         </li>           
527                         
528                         <div class="model">
529                         <li class="list-group-item task-item">
530                           <div class="col-md-2"> model1 after conversion
531                           to allatom 
532                           {{ task.remd_model1|linebreaks }}
533                           </div>
534                           <div class="col-md-10"> 
535                           <a
536                           href="/myfiles/download-file/{{task.jobdirname}}/MODEL1.pdb">
537                           <img
538                           src="/myfiles/download-file/{{task.jobdirname}}/model1.png" width="500">
539                           </a></div>
540                         </li>
541                         </div>
542                         <div class="model">
543                         <li class="list-group-item task-item">
544                           <div class="col-md-2"> model2 after conversion
545                           to allatom 
546                           {{ task.remd_model2|linebreaks }}
547                           </div>
548                           <div class="col-md-10"> 
549                           <a
550                           href="/myfiles/download-file/{{task.jobdirname}}/MODEL2.pdb">
551                           <img
552                           src="/myfiles/download-file/{{task.jobdirname}}/model2.png" width="500">
553                           </a></div>
554                         </li>
555                         </div>
556                         <div class="model">
557                         <li class="list-group-item task-item">
558                           <div class="col-md-2"> model3 after conversion
559                           to allatom 
560                           {{ task.remd_model3|linebreaks }}
561                           </div>
562                           <div class="col-md-10"> 
563                           <a
564                           href="/myfiles/download-file/{{task.jobdirname}}/MODEL3.pdb">
565                           <img
566                           src="/myfiles/download-file/{{task.jobdirname}}/model3.png" width="500">
567                           </a></div>
568                         </li>
569                         </div>
570                         <div class="model">
571                         <li class="list-group-item task-item">
572                           <div class="col-md-2"> model4 after conversion
573                           to allatom 
574                           {{ task.remd_model4|linebreaks }}
575                           </div>
576                           <div class="col-md-10"> 
577                           <a
578                           href="/myfiles/download-file/{{task.jobdirname}}/MODEL4.pdb">
579                           <img
580                           src="/myfiles/download-file/{{task.jobdirname}}/model4.png" width="500">
581                           </a></div>
582                         </li>
583                         </div>
584                         <div class="model">
585                         <li class="list-group-item task-item">
586                           <div class="col-md-2"> model5 after conversion
587                           to allatom 
588                           {{ task.remd_model5|linebreaks }}
589                           </div>
590                           <div class="col-md-10"> 
591                           <a
592                           href="/myfiles/download-file/{{task.jobdirname}}/MODEL5.pdb">
593                           <img
594                           src="/myfiles/download-file/{{task.jobdirname}}/model5.png" width="500">
595                           </a></div>
596                         </li>
597                         </div>
598                         {% endif %}
599
600         {% endif %}             
601
602         </ul>
603         
604 <script src="/static/jquery.min.js"></script>
605
606 <script>
607 $('.majorpointslegend').click(function(){
608     $(this.parentNode).find('.hiders').toggle();
609     if($(this.parentNode).find('.majorpointslegend').text()=='Show input parameters'){
610         $(this.parentNode).find('.majorpointslegend').text('Hide input parameters');
611     }else{
612         $(this.parentNode).find('.majorpointslegend').text('Show input parameters');
613     }    
614 });
615 </script>
616
617 <script>
618 var slideIndex = 1;
619 showDivs(slideIndex);
620
621 function plusDivs(n) {
622   showDivs(slideIndex += n);
623 }
624
625 function showDivs(n) {
626   var i;
627   var x = document.getElementsByClassName("model");
628   if (n > x.length) {slideIndex = 1}
629   if (n < 1) {slideIndex = x.length}
630   for (i = 0; i < x.length; i++) {
631      x[i].style.display = "none";
632   }
633   x[slideIndex-1].style.display = "block";
634 }
635 </script>
636
637 {% if not task.done %}
638 <script>
639 function worker() {
640   $.ajax({
641     data:{csrfmiddlewaretoken: '{{ csrf_token }}'},
642     url: "/refresh_done/", 
643     type:"post",
644     success: function(data) {
645       document.location.reload();
646     },
647     complete: function() {
648       // Schedule the next request when the current one's complete
649       setTimeout(worker, 30000);
650     }
651   });
652 };
653 $(document).ready(function() {
654   // run the first time; all subsequent calls will take care of themselves
655   setTimeout(worker, 30000);
656 });
657 </script>
658 {% endif %} 
659         
660         
661 {% endblock %}