walker-database/templates/search.html

{% 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,
                    // query parameters for the maximum date possible.
                    year_max: 2021,
                    month_max: 1,
                    day_max: 31,
                    // results
                    results: [],
                    error: null,
                }
            },
            methods: {
                // methods
                prepare_query() {
                  // validation
                  let query = {}
                  const fields = ["mz_min", "mz_max", "rt_min", "rt_max",
                  "year_max", "month_max", "day_max"]
                  for (let i = 0; i < fields.length; i++) {
                    const field = fields[i];
                    if (!valid(this[field])) {
                      console.log(query, field, this[field])
                      return null;
                    } else {
                      query[field] = this[field]
                    }
                  }
                  return query
                },
                async fetch_data() {
                    const query = this.prepare_query()
                    if (query === null) return;
                    const api = `/chemical/search`;
                    fetch(api, {
                      method: 'POST',
                      headers: {
                        'Content-Type': 'application/json',
                      },
                      body: JSON.stringify(query)
                    }).then(async res => {
                        if (res.status !== 200) {
                            console.log(`Error Status, ${res.status}`)
                            const json = await res.json()
                            throw Error(json.error);
                        }
                        return res.json()
                    }).then(json => {
                        this.results = json;
                        this.error = null;
                    }).catch(e => {
                        this.error = e.message;
                    })
                }
            },
            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" 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" 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" 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" value="0">
                </td>
            </tr>
            <tr>
                <td>
                    <label for="mz_min">Maximum Date</label>
                </td>
                <td>
                    <input id="year_max" type="number" name="year_max"
                    v-model="year_max" placeholder="year">
                    <input id="month_max" type="number" name="month_max"
                    v-model="month_max" placeholder="month">
                    <input id="day_max" type="number" name="day_max"
                    v-model="day_max" placeholder="day">
                </td>
            </tr>
        </table>

        <br>
        <button @click="fetch_data()">Search</button>
    </main>
    <hr>
    {% raw %}
    <div id="search">
        <div v-if="error !== null" style="color: red;">
          Uh Oh! There is an Error! {{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 %}