neptune/core/templates/ui/drilldown/drilldown.html

{% extends "base.html" %}
{% load static %}
{% load joinsep %}
{% block outer_content %}
    {% if params.modal == 'context' %}
        <div
            style="display: none;"
            hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
            hx-post="{% url 'modal_context' %}"
            hx-vals='{"net": "{{ params.net|escapejs }}",
            "num": "{{ params.num|escapejs }}",
            "source": "{{ params.source|escapejs }}",
            "channel": "{{ params.channel|escapejs }}",
            "time": "{{ params.time|escapejs }}",
            "date": "{{ params.date|escapejs }}",
            "index": "{{ params.index }}",
            "type": "{{ params.type|escapejs }}",
            "mtype": "{{ params.mtype|escapejs }}",
            "nick": "{{ params.nick|escapejs }}"}'
            hx-target="#modals-here"
            hx-trigger="load">
        </div>
    {% endif %}
    <script src="{% static 'js/chart.js' %}"></script>
    <script src="{% static 'tabs.js' %}"></script>
    <script>
        function setupTags() {
            var inputTags = document.getElementById('tags');
            new BulmaTagsInput(inputTags);

            inputTags.BulmaTagsInput().on('before.add', function(item) {
                if (item.includes(": ")) {
                    var spl = item.split(": ");
                } else {
                    var spl = item.split(":");
                }
                var field = spl[0];
                try {
                    var value = JSON.parse(spl[1]);
                } catch {
                    var value = spl[1];
                }
                return `${field}: ${value}`;
            });
            inputTags.BulmaTagsInput().on('after.remove', function(item) {
                var spl = item.split(": ");
                var field = spl[0];
                var value = spl[1].trim();
            });
        }
        function populateSearch(field, value) {
            var inputTags = document.getElementById('tags');
            inputTags.BulmaTagsInput().add(field+": "+value);
            //htmx.trigger("#search", "click");
        }
    </script>

    <div class="grid-stack" id="grid-stack-main">
        <div class="grid-stack-item" gs-w="7" gs-h="10" gs-y="0" gs-x="1">
            <div class="grid-stack-item-content">
                <nav class="panel">
                    <p class="panel-heading" style="padding: .2em; line-height: .5em;">
                        <i class="fa-solid fa-arrows-up-down-left-right has-text-grey-light"></i>
                        Search
                    </p>
                    <article class="panel-block is-active">
                        {% include 'ui/drilldown/search_partial.html' %}
                    </article>
                </nav>
            </div>
        </div>
    </div>

    <script>
        var grid = GridStack.init({
            cellHeight: 20,
            cellWidth: 50,
            auto: true,
            float: true,
            draggable: {handle: '.panel-heading', scroll: false, appendTo: 'body'},
            removable: false,
        });
        // GridStack.init();
        setupTags();

        // a widget is ready to be loaded
        document.addEventListener('load-widget', function(event) {
            let container = htmx.find('#drilldown-widget');
            // get the scripts, they won't be run on the new element so we need to eval them
            var scripts = htmx.findAll(container, "script");
            let widgetelement = container.firstElementChild.cloneNode(true);

            // check if there's an existing element like the one we want to swap
            let grid_element = htmx.find('#grid-stack-main');
            let existing_widget = htmx.find(grid_element, '#drilldown-widget-results');

            // get the size and position attributes
            if (existing_widget) {
                let attrs = existing_widget.getAttributeNames();
                for (let i = 0, len = attrs.length; i < len; i++) {
                    if (attrs[i].startsWith('gs-')) { // only target gridstack attributes
                        widgetelement.setAttribute(attrs[i], existing_widget.getAttribute(attrs[i]));
                    }
                }
            }

            // clear the queue element
            container.outerHTML = "";

            // temporary workaround, other widgets can be duplicated, but not results
            if (widgetelement.id == 'drilldown-widget-results') {
                grid.removeWidget("drilldown-widget-{{ unique }}");
            }

            grid.addWidget(widgetelement);
            // re-create the HTMX JS listeners, otherwise HTMX won't work inside the grid
            htmx.process(widgetelement);

            // run the JS scripts inside the added element again
            // for instance, this will fix the dropdown
            for (var i = 0; i < scripts.length; i++) {
                eval(scripts[i].innerHTML);
            }
        });
    </script>

    <div id="modals-here">
    </div>
    <div id="items-here">
    </div>
    <div id="widgets-here" style="display: none;">
    </div>
    <div id="results" style="display: none;">
        {% if table %}
            {% include 'widgets/table_results.html' %}
        {% endif %}
    </div>
    <script>

    </script>

{% endblock %}