You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

130 lines
4.1 KiB

2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
  1. {% extends "base.html" %}
  2. {% block content %}
  3. <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.min.js"></script>
  4. <script type="module">
  5. //import { createApp } from 'https://unpkg.com/petite-vue?module'
  6. //import { createApp } from 'https://unpkg.com/vue@2.7.14/dist/vue.esm-browser.prod.js'
  7. function valid(str) {
  8. return !isNaN(str) && !isNaN(parseFloat(str))
  9. }
  10. function debounce(func, timeout = 300){
  11. let timer;
  12. return (...args) => {
  13. clearTimeout(timer);
  14. timer = setTimeout(() => { func.apply(this, args); }, timeout);
  15. };
  16. }
  17. const app = new Vue({
  18. el: "#search",
  19. data() {
  20. return {
  21. mz_min: 0,
  22. mz_max: 0,
  23. rt_min: 0,
  24. rt_max: 0,
  25. results: [],
  26. error: null,
  27. }
  28. },
  29. methods: {
  30. // methods
  31. async fetch_data() {
  32. if (!(valid(this.mz_min) && valid(this.mz_max) && valid(this.rt_max) && valid(this.rt_min))) {
  33. return
  34. }
  35. const url = `/chemical/search?mz_min=${this.mz_min}&mz_max=${this.mz_max}&rt_min=${this.rt_min}&rt_max=${this.rt_max}`
  36. fetch(url).then(res => {
  37. if (res.status !== 200) {
  38. console.log(`Error Status, ${res.status}`)
  39. }
  40. return res.json()
  41. }).then(json => {
  42. this.results = json;
  43. this.error = null;
  44. }).catch(e => {
  45. console.error(e);
  46. this.error = true;
  47. })
  48. },
  49. //debounced_fetch: debounce(this.fetch_data.bind(this), 300)
  50. },
  51. created() {
  52. this.fetch_data = debounce(this.fetch_data, 300)
  53. }
  54. });
  55. </script>
  56. <h1>Search Box</h1>
  57. <div id="search">
  58. <main>
  59. <table>
  60. <tr>
  61. <td>
  62. <label for="mz_min">Minimum M/Z Ratio</label>
  63. </td>
  64. <td>
  65. <input id="mz_min" type="number" name="mz_min" v-model="mz_min" @input="fetch_data()" value="0">
  66. </td>
  67. </tr>
  68. <tr>
  69. <td>
  70. <label for="mz_min">Maximum M/Z Ratio</label>
  71. </td>
  72. <td>
  73. <input id="mz_max" type="number" name="mz_max" v-model="mz_max" @input="fetch_data()" value="0">
  74. </td>
  75. </tr>
  76. <tr>
  77. <td>
  78. <label for="mz_min">Minimum Retention Time</label>
  79. </td>
  80. <td>
  81. <input id="rt_min" type="number" name="rt_min" v-model="rt_min" @input="fetch_data()" value="0">
  82. </td>
  83. </tr>
  84. <tr>
  85. <td>
  86. <label for="mz_min">Maximum Retention Time</label>
  87. </td>
  88. <td>
  89. <input id="rt_max" type="number" name="rt_max" v-model="rt_max" @input="fetch_data()" value="0">
  90. </td>
  91. </tr>
  92. </table>
  93. <!--
  94. <br>
  95. <button @click="fetch_data()">Search</button>
  96. -->
  97. </main>
  98. <hr>
  99. {% raw %}
  100. <div id="search">
  101. <div v-if="error" style="color: red;">
  102. Uh Oh! There is an Error!
  103. </div>
  104. <div v-for="result in results">
  105. <a :href="result.url">
  106. <h3>{{result.name}}</h3>
  107. </a>
  108. <table>
  109. <tr>
  110. <td>Retention Time</td>
  111. <td>{{result.rt}}</td>
  112. </tr>
  113. <tr>
  114. <td>M/Z Ratio</td>
  115. <td>{{result.mz}}</td>
  116. </tr>
  117. </table>
  118. <hr>
  119. </div>
  120. </div>
  121. {% endraw %}
  122. </div>
  123. {% endblock %}