Ei kuvausta

experiment.html 9.1KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325
  1. {% extends "bootstrapheader.html" %}
  2. {% block body %}
  3. <body>
  4. <div class="container">
  5. <h2>Experiment</h2>
  6. Loged in as {{email}}
  7. <div class=container>
  8. <div class="panel panel-primary">
  9. <div class="panel-heading">
  10. <h3>{{experiment['name']}}</h3>
  11. </div>
  12. <div class="panel-body">
  13. <p>Description: {{experiment['description']}}<p>
  14. {% if exp_peaks %}
  15. <table class="table table-striped">
  16. <tr><th>Peaks</th>
  17. {% for p in exp_peaks %}
  18. <tr><td>{{p['peak']}}</td></tr>
  19. {% endfor %}
  20. </table>
  21. {% endif %}
  22. Experiment date: {{experiment['date']}}
  23. <form role="form" action="/editExperiment" method="post">
  24. <button type="submit" class="btn btn-primary" name="editInfo" value="edit">Edit</button>
  25. </form>
  26. </div>
  27. </div>
  28. {% for m in msg %}
  29. <div class="alert alert-{{m["type"]}}">
  30. <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
  31. {{m["msg"]}}
  32. </div>
  33. {% endfor %}
  34. <!--
  35. THE AVERAGES OF THE SAMPLES RELATIVE INTENSITIES
  36. -->
  37. {% if averages %}
  38. <h4>Peaks Average: </h4>
  39. <canvas id="averages" width="600" height="400"></canvas>
  40. <script type="text/javascript">
  41. var ctxA = document.getElementById("averages");
  42. var data = {
  43. labels: [
  44. {% for peak, average in averages|dictsort %}
  45. {{peak}},
  46. {% endfor %}
  47. ],
  48. datasets: [
  49. {
  50. label: "My First dataset",
  51. fillColor: "rgba(220,220,220,0.5)",
  52. strokeColor: "rgba(220,220,220,0.8)",
  53. highlightFill: "rgba(220,220,220,0.75)",
  54. highlightStroke: "rgba(220,220,220,1)",
  55. data: [
  56. {% for peak, average in averages|dictsort %}
  57. {{average}},
  58. {% endfor %}
  59. ]
  60. }]} ;
  61. var chartA = new Chart(ctxA.getContext("2d")).Line(data, {bezierCurve: false});
  62. </script>
  63. <table class="table table-striped">
  64. <tr><th>Peak</th><th>Intensity</th></tr>
  65. {% for peak, average in averages|dictsort %}
  66. <tr><td>{{peak}}</td><td>{{average}}</td>
  67. {% endfor %}
  68. </table>
  69. {% endif %}
  70. <!--
  71. THE STDDEVS OF THE SAMPLES RELATIVE INTENSITIES
  72. -->
  73. {% if stdDevs %}
  74. <h4>Peaks Standard Dev: </h4>
  75. <canvas id="stdDev" width="600" height="400"></canvas>
  76. <script type="text/javascript">
  77. var ctxSD = document.getElementById("stdDev");
  78. var data = {
  79. labels: [
  80. {% for peak, stddev in stdDevs|dictsort %}
  81. {{peak}},
  82. {% endfor %}
  83. ],
  84. datasets: [
  85. {
  86. label: "My First dataset",
  87. fillColor: "rgba(220,220,220,0.5)",
  88. strokeColor: "rgba(220,220,220,0.8)",
  89. highlightFill: "rgba(220,220,220,0.75)",
  90. highlightStroke: "rgba(220,220,220,1)",
  91. data: [
  92. {% for peak, stddev in stdDevs|dictsort %}
  93. {{stddev}},
  94. {% endfor %}
  95. ]
  96. }]} ;
  97. var chartSD = new Chart(ctxSD.getContext("2d")).Line(data, {bezierCurve: false});
  98. </script>
  99. <table class="table table-striped">
  100. <tr><th>Peak</th><th>Intensity</th></tr>
  101. {% for peak, stddev in stdDevs|dictsort %}
  102. <tr><td>{{peak}}</td><td>{{stddev}}</td>
  103. {% endfor %}
  104. </table>
  105. {% endif %}
  106. <!--
  107. THE SEMS OF THE SAMPLES RELATIVE INTENSITIES
  108. -->
  109. {% if sems %}
  110. <h4>Peaks SEM: </h4>
  111. <canvas id="sems" width="600" height="400"></canvas>
  112. <script type="text/javascript">
  113. var ctxSEM = document.getElementById("sems");
  114. var data = {
  115. labels: [
  116. {% for peak, sem in sems|dictsort %}
  117. {{peak}},
  118. {% endfor %}
  119. ],
  120. datasets: [
  121. {
  122. label: "My First dataset",
  123. fillColor: "rgba(220,220,220,0.5)",
  124. strokeColor: "rgba(220,220,220,0.8)",
  125. highlightFill: "rgba(220,220,220,0.75)",
  126. highlightStroke: "rgba(220,220,220,1)",
  127. data: [
  128. {% for peak, sem in sems|dictsort %}
  129. {{sem}},
  130. {% endfor %}
  131. ]
  132. }]} ;
  133. var chartSEM = new Chart(ctxSEM.getContext("2d")).Line(data, {bezierCurve: false});
  134. </script>
  135. <table class="table table-striped">
  136. <tr><th>Peak</th><th>Intensity</th></tr>
  137. {% for peak, sem in sems|dictsort %}
  138. <tr><td>{{peak}}</td><td>{{sem}}</td>
  139. {% endfor %}
  140. </table>
  141. {% endif %}
  142. <h3>Samples:</h3>
  143. <div class="panel-group" id="accordion">
  144. {% if samples %}
  145. {% for sample in samples %}
  146. <div class="panel panel-default" id="panelOut{{sample['sid']}}">
  147. <div class="panel-heading">
  148. <h4 class="panel-title">
  149. <a data-toggle="collapse" data-parent="#accordion" href="#collapse{{sample['sid']}}">{{sample['name']}}</a>
  150. </h4>
  151. </div>
  152. <div id="collapse{{sample['sid']}}" class="panel-collapse collapse">
  153. <div class="panel-body">
  154. <h4>Experiment Relative Intensity</h4>
  155. {% if sample['rel_ints'] %}
  156. <canvas id="graphS{{sample['sid']}}" width="600" height="400"></canvas>
  157. <script type="text/javascript">
  158. $(document).ready(function(){
  159. $('#panelOut{{sample['sid']}}').on('shown.bs.collapse', function () {
  160. var ctxOut{{sample['sid']}} = document.getElementById("graphS{{sample['sid']}}");
  161. var data = {
  162. labels: [
  163. {% for peak, relint in sample['rel_ints']|dictsort %}
  164. {{peak}},
  165. {% endfor %}
  166. ],
  167. datasets: [
  168. {
  169. label: "My First dataset",
  170. fillColor: "rgba(220,220,220,0.5)",
  171. strokeColor: "rgba(220,220,220,0.8)",
  172. highlightFill: "rgba(220,220,220,0.75)",
  173. highlightStroke: "rgba(220,220,220,1)",
  174. data: [
  175. {% for peak, relint in sample['rel_ints']|dictsort %}
  176. {{relint}},
  177. {% endfor %}
  178. ]
  179. }]} ;
  180. var chartOut{{sample['sid']}} = new Chart(ctxOut{{sample['sid']}}.getContext("2d")).Line(data, {bezierCurve: false});
  181. chartOut{{sample['sid']}}.destroy();
  182. chartOut{{sample['sid']}} = new Chart(ctxOut{{sample['sid']}}.getContext("2d")).Line(data, {bezierCurve: false});
  183. });
  184. }) ;
  185. </script>
  186. <table class="table table-striped">
  187. <tr><th>Peak</th><th>Intensity</th></tr>
  188. {% for peak, relint in sample['rel_ints']|dictsort %}
  189. <tr><td>{{peak}}</td><td>{{relint}}</td>
  190. {% endfor %}
  191. </table>
  192. {% endif %}
  193. <h4>Peaks:</h4>
  194. <div class="panel-group" id="accordion2">
  195. {% if sample['peaks'] %}
  196. {% for peak in sample['peaks'] %}
  197. <div class="panel panel-default" id="panelIn{{peak['pid']}}">
  198. <div class="panel-heading">
  199. <h4 class="panel-title">
  200. <a data-toggle="collapse" data-parent="#accordion2" href="#collapsep{{peak['pid']}}">{{peak['peak']}}</a>
  201. </h4>
  202. </div>
  203. <div id="collapsep{{peak['pid']}}" class="panel-collapse collapse">
  204. <div class="panel-body">
  205. {% if peak['intensities'] %}
  206. <canvas id="graph{{peak['pid']}}" width="600" height="400"></canvas>
  207. <script type="text/javascript">
  208. $(document).ready(function(){
  209. $('#panelIn{{peak['pid']}}').on('shown.bs.collapse', function () {
  210. var ctxIn{{peak['pid']}} = document.getElementById("graph{{peak['pid']}}");
  211. var data = {
  212. labels: [
  213. {% for pi in peak['intensities'] %}
  214. {{pi['peak']}},
  215. {% endfor %}
  216. ],
  217. datasets: [
  218. {
  219. label: "My First dataset",
  220. fillColor: "rgba(220,220,220,0.5)",
  221. strokeColor: "rgba(220,220,220,0.8)",
  222. highlightFill: "rgba(220,220,220,0.75)",
  223. highlightStroke: "rgba(220,220,220,1)",
  224. data: [
  225. {% for pi in peak['intensities'] %}
  226. {{pi['intensity']}},
  227. {% endfor %}
  228. ]
  229. }]} ;
  230. var chartIn{{peak['pid']}} = new Chart(ctxIn{{peak['pid']}}.getContext("2d")).Line(data, {bezierCurve: false});
  231. chartIn{{peak['pid']}}.destroy();
  232. chartIn{{peak['pid']}} = new Chart(ctxIn{{peak['pid']}}.getContext("2d")).Line(data, {bezierCurve: false});
  233. });
  234. }) ;
  235. </script>
  236. <table class="table table-striped">
  237. <tr><th>Peak</th><th>Intensity</th></tr>
  238. {% for pi in peak['intensities'] %}
  239. <tr><td>{{pi['peak']}}</td><td>{{pi['intensity']}}</td>
  240. {% endfor %}
  241. </table>
  242. {% endif %}
  243. </div>
  244. </div>
  245. </div>
  246. {% endfor %}
  247. {% endif %}
  248. </div>
  249. </div>
  250. </div>
  251. </div>
  252. {% endfor %}
  253. {% endif %}
  254. </div>
  255. <form action="/upload"
  256. class="dropzone"
  257. id="maldidropzone"
  258. >
  259. <input type="hidden" name="eid" value="{{eid}}">
  260. </form>
  261. <script type="text/javascript">
  262. Dropzone.options.maldidropzone = {
  263. init: function() {
  264. thisDropzone = this;
  265. this.on("success", function(file, responseText) {
  266. console.log(responseText);
  267. setTimeout(function(){location = location ;}, 2000);
  268. });
  269. }
  270. };
  271. </script>
  272. </div> <!-- /container -->
  273. </body>
  274. {% endblock %}