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.0 KiB

{% extends "base.html" %}
{% block content %}
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.min.js"></script>
<script type="module">
//import { createApp } from 'https://unpkg.com/petite-vue?module'
//import { createApp } from 'https://unpkg.com/vue@2.7.14/dist/vue.esm-browser.prod.js'
function valid(str) {
return !isNaN(str) && !isNaN(parseFloat(str))
}
function debounce(func, timeout = 300){
let timer;
return (...args) => {
clearTimeout(timer);
timer = setTimeout(() => { func.apply(this, args); }, timeout);
};
}
const app = new Vue({
el: "#search",
data() {
return {
mz_min: 0,
mz_max: 0,
rt_min: 0,
rt_max: 0,
results: [],
error: null,
}
},
methods: {
// methods
async fetch_data() {
if (!(valid(this.mz_min) && valid(this.mz_max) && valid(this.rt_max) && valid(this.rt_min))) {
return
}
const url = `/chemical/search?mz_min=${this.mz_min}&mz_max=${this.mz_max}&rt_min=${this.rt_min}&rt_max=${this.rt_max}`
fetch(url).then(res => {
if (res.status !== 200) {
console.log(`Error Status, ${res.status}`)
}
return res.json()
}).then(json => {
this.results = json;
this.error = null;
}).catch(e => {
console.error(e);
this.error = true;
})
}
},
created() {
this.fetch_data = debounce(this.fetch_data, 300)
}
});
</script>
<h1>Search Box</h1>
<div id="search">
<main>
<table>
<tr>
<td>
<label for="mz_min">Minimum M/Z Ratio</label>
</td>
<td>
<input id="mz_min" type="number" name="mz_min" v-model="mz_min" @input="fetch_data()" value="0">
</td>
</tr>
<tr>
<td>
<label for="mz_min">Maximum M/Z Ratio</label>
</td>
<td>
<input id="mz_max" type="number" name="mz_max" v-model="mz_max" @input="fetch_data()" value="0">
</td>
</tr>
<tr>
<td>
<label for="mz_min">Minimum Retention Time</label>
</td>
<td>
<input id="rt_min" type="number" name="rt_min" v-model="rt_min" @input="fetch_data()" value="0">
</td>
</tr>
<tr>
<td>
<label for="mz_min">Maximum Retention Time</label>
</td>
<td>
<input id="rt_max" type="number" name="rt_max" v-model="rt_max" @input="fetch_data()" value="0">
</td>
</tr>
</table>
<!--
<br>
<button @click="fetch_data()">Search</button>
-->
</main>
<hr>
{% raw %}
<div id="search">
<div v-if="error" style="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>Retention Time</td>
<td>{{result.rt}}</td>
</tr>
<tr>
<td>M/Z Ratio</td>
<td>{{result.mz}}</td>
</tr>
</table>
<hr>
</div>
</div>
{% endraw %}
</div>
{% endblock %}