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.

68 lines
2.0 KiB

  1. {% extends "base.html" %}
  2. {% block content %}
  3. <script type="module">
  4. import { createApp } from 'https://unpkg.com/petite-vue?module'
  5. createApp({
  6. mz_min:0,
  7. mz_max:0,
  8. rt_min:0,
  9. rt_max:0,
  10. results: [],
  11. error: null,
  12. // methods
  13. async fetch_data() {
  14. try {
  15. console.log("called...")
  16. const json = (await fetch(`/chemical/search?mz_min=${mz_min.value}&mz_max=${mz_max.value}&rt_min=${rt_min.value}&rt_max=${rt_max.value}`))
  17. this.results = await json.json();
  18. } catch(e) {
  19. console.error(e);
  20. error = true;
  21. }
  22. }
  23. }).mount()
  24. </script>
  25. <h1>Search Box</h1>
  26. <main>
  27. <label for="mz_min">Mz Min</label>
  28. <input id="mz_min" type="number" name="mz_min" v-model="mz_min">
  29. <label for="mz_min">Mz Max</label>
  30. <input id="mz_max" type="number" name="mz_max" v-model="mz_max">
  31. <label for="mz_min">RT Min</label>
  32. <input id="rt_min" type="number" name="rt_min" v-model="rt_min">
  33. <label for="mz_min">RT Max</label>
  34. <input id="rt_max" type="number" name="rt_max" v-model="rt_max">
  35. <br>
  36. <button @click="fetch_data()">Search</button>
  37. </main>
  38. <hr>
  39. {% raw %}
  40. <div id="search">
  41. <div v-if="error" style="background-color: red;">
  42. Uh Oh! There is an Error!
  43. </div>
  44. <div v-for="result in results">
  45. <a :href="result.url">
  46. <h3>{{result.name}}</h3>
  47. </a>
  48. <table>
  49. <tr>
  50. <td>Rt</td>
  51. <td>{{result.rt}}</td>
  52. </tr>
  53. <tr>
  54. <td>Mz</td>
  55. <td>{{result.mz}}</td>
  56. </tr>
  57. </table>
  58. <hr>
  59. </div>
  60. </div>
  61. {% endraw %}
  62. {% endblock %}