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.
69 lines
2.0 KiB
69 lines
2.0 KiB
{% 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 %}
|