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.
|
|
{% extends "base.html" %} {% block content %} <script type="module"> import { createApp } from 'https://unpkg.com/petite-vue?module'
createApp({ mz_min:0, mz_max:0, rt_min:0, rt_max:0, results: [], error: null, // methods async fetch_data() { try { console.log("called...") 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}`)) this.results = await json.json(); } catch(e) { console.error(e); error = true; } } }).mount() </script>
<h1>Search Box</h1> <main> <label for="mz_min">Mz Min</label> <input id="mz_min" type="number" name="mz_min" v-model="mz_min">
<label for="mz_min">Mz Max</label> <input id="mz_max" type="number" name="mz_max" v-model="mz_max">
<label for="mz_min">RT Min</label> <input id="rt_min" type="number" name="rt_min" v-model="rt_min">
<label for="mz_min">RT Max</label> <input id="rt_max" type="number" name="rt_max" v-model="rt_max">
<br> <button @click="fetch_data()">Search</button> </main> <hr> {% raw %} <div id="search"> <div v-if="error" style="background-color: red;"> Uh Oh! There is an Error! </div> <div v-for="result in results"> <a :href="result.url"> <h3>{{result.name}}</h3> </a> <table> <tr> <td>Rt</td> <td>{{result.rt}}</td> </tr> <tr> <td>Mz</td> <td>{{result.mz}}</td> </tr> </table> <hr> </div> </div> {% endraw %}
{% endblock %}
|