neptune/core/templates/ui/drilldown.html

{% extends "base.html" %}
{% load static %}
{% block content %}
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <script>
    function initTabs() {
    TABS.forEach((tab) => {
      tab.addEventListener('click', (e) => {
        let selected = tab.getAttribute('data-tab');
        updateActiveTab(tab);
        updateActiveContent(selected);
      })
    })
  }

  function updateActiveTab(selected) {
    TABS.forEach((tab) => {
      if (tab && tab.classList.contains(ACTIVE_CLASS)) {
        tab.classList.remove(ACTIVE_CLASS);
      }
    });
    selected.classList.add(ACTIVE_CLASS);
  }

  function updateActiveContent(selected) {
    CONTENT.forEach((item) => {
      if (item && item.classList.contains(ACTIVE_CLASS)) {
        item.classList.remove(ACTIVE_CLASS);
      }
      let data = item.getAttribute('data-content');
      if (data === selected) {
        item.classList.add(ACTIVE_CLASS);
      }
    });
  }
  </script>
  <div class="box">
    <form method="POST">
      {% csrf_token %}
      <div class="field">
        <label class="label">Search</label>
        <div class="field-body">
          <div class="field">
            <div class="control is-expanded has-icons-left">
              <input name="query" class="input" type="text" placeholder="msg: science AND nick: BillNye AND channel: #science">
              <span class="icon is-small is-left">
                <i class="fas fa-magnifying-glass"></i>
              </span>
            </div>
          </div>
        </div>
      </div>

      <div class="columns">
        <div class="column">
          <label class="label">Timescale</label>
          <div class="field-body">
            <div class="field">
              <div class="control is-expanded has-icons-left">
                <div class="select is-fullwidth">
                  <select name="timescale">
                    {% for timescale in timescales %}
                      <option value="{{ timescale }}">{{ timescale }}</option>
                    {% endfor %}
                  </select>
                  <span class="icon is-small is-left">
                    <i class="fas fa-magnifying-glass"></i>
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="column">
          <label class="label">Fields</label>

          <div class="field">
            <div class="control is-expanded has-icons-left">
              <div class="select is-fullwidth is-multiple">
                <select multiple name="fields">
                  {% for field in fields %}
                    <option value="{{ field }}">{{ field }}</option>
                  {% endfor %}
                </select>
                <span class="icon is-small is-left">
                  <i class="fas fa-magnifying-glass"></i>
                </span>
              </div>
            </div>
          </div>
        </div>
        <div class="column">
          <label class="label">Results</label>
          <div class="field">
            <div class="control is-expanded has-icons-left">
              <div class="select is-fullwidth">
                <select name="size">
                  {% for size in sizes %}
                    <option value="{{ size }}">{{ size }}</option>
                  {% endfor %}
                </select>
                <span class="icon is-small is-left">
                  <i class="fas fa-magnifying-glass"></i>
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="field">
        <div class="control">
          <button class="button is-primary is-fullwidth" hx-post="{% url 'search' %}" hx-trigger="click" hx-target="#results" hx-swap="outerHTML">
            Search
          </button>
        </div>
      </div>

    </form>
  </div>
  
  <div id="results">
  </div>

{% endblock %}