Fix widget rendering after swap

This commit is contained in:
Mark Veidemanis 2022-08-26 07:20:30 +01:00
parent d3de054d5a
commit f46b6cd2f6
Signed by: m
GPG Key ID: 5ACFCEED46C0904F
4 changed files with 47 additions and 106 deletions

View File

@ -69,54 +69,6 @@
</nav> </nav>
</div> </div>
</div> </div>
<div id="results">
{% if table %}
<div id="results-content" class="grid-stack-item" gs-w="5" gs-h="15" gs-y="10">
<div class="grid-stack-item-content">
<div 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 ui-move"></i>
Results
</p>
<div class="panel-block is-active">
<div class="control">
<script src="{% static 'js/column-shifter.js' %}"></script>
<span class="icon has-tooltip-bottom" data-tooltip="{{ card }} hits total">
<i class="fa-solid fa-chart-mixed"></i>
</span>
{{ table.data|length }} hits in {{ took }}ms
{% if exemption is not None %}
<span class="icon has-tooltip-bottom" data-tooltip="God mode">
<i class="fa-solid fa-book-bible"></i>
</span>
{% else %}
{% if redacted is not None %}
<span class="icon has-tooltip-bottom" data-tooltip="{{ redacted }} redacted">
<i class="fa-solid fa-mask"></i>
</span>
{% endif %}
{% endif %}
{% if delay is not None %}
<span class="icon has-tooltip-bottom" data-tooltip="delayed by {{ delay }} days">
<i class="fa-solid fa-clock"></i>
</span>
{% endif %}
{% if randomised is True %}
<span class="icon has-tooltip-bottom" data-tooltip="integer fields randomised">
<i class="fa-solid fa-shuffle"></i>
</span>
{% endif %}
{% include 'ui/drilldown/table_results_partial.html' %}
{% include 'ui/drilldown/sentiment_partial.html' %}
</div>
</div>
</div>
</div>
</div>
{% endif %}
</div>
</div> </div>
<div id="modals-here"> <div id="modals-here">
</div> </div>
@ -124,6 +76,11 @@
</div> </div>
<div id="widgets-here" style="display: none;"> <div id="widgets-here" style="display: none;">
</div> </div>
<div id="results" style="display: none;">
{% if table %}
{% include 'widgets/table_results.html' %}
{% endif %}
</div>
<script> <script>
var grid = GridStack.init({ var grid = GridStack.init({
cellHeight: 20, cellHeight: 20,
@ -137,4 +94,18 @@
setupTags(); setupTags();
</script> </script>
{% if table %}
<script>
//var contents = $("#drilldown-widget").outerHTML;
var contents = document.getElementById("drilldown-widget");
var grid = document.getElementById("grid-stack-main").gridstack;
grid.addWidget(contents.innerHTML);
contents.outerHTML = "";
grid.compact();
// because we remove the element the JS runs in
// so we need to run it again here
// initTabs("{{ unique }}");
</script>
{% endif %}
{% endblock %} {% endblock %}

View File

@ -1,38 +0,0 @@
{% load static %}
{% load index %}
{% load joinsep %}
{% include 'partials/notify.html' %}
{% if table %}
<script src="{% static 'js/column-shifter.js' %}"></script>
<span class="icon has-tooltip-bottom" data-tooltip="{{ card }} hits total">
<i class="fa-solid fa-chart-mixed"></i>
</span>
{{ table.data|length }} hits in {{ took }}ms
{% if exemption is not None %}
<span class="icon has-tooltip-bottom" data-tooltip="God mode">
<i class="fa-solid fa-book-bible"></i>
</span>
{% else %}
{% if redacted is not None %}
<span class="icon has-tooltip-bottom" data-tooltip="{{ redacted }} redacted">
<i class="fa-solid fa-mask"></i>
</span>
{% endif %}
{% endif %}
{% if delay is not None %}
<span class="icon has-tooltip-bottom" data-tooltip="delayed by {{ delay }} days">
<i class="fa-solid fa-clock"></i>
</span>
{% endif %}
{% if randomised is True %}
<span class="icon has-tooltip-bottom" data-tooltip="integer fields randomised">
<i class="fa-solid fa-shuffle"></i>
</span>
{% endif %}
{% include 'ui/drilldown/table_results_partial.html' %}
{% include 'ui/drilldown/sentiment_partial.html' %}
{% endif %}

View File

@ -1,15 +1,20 @@
{% load static %} {% load static %}
<div id="drilldown-widget"> <script>
<div id="results-content" class="grid-stack-item" gs-w="5" gs-h="15"> grid.removeWidget("drilldown-widget-results");
</script>
<div id="drilldown-widget" style="display: none;">
<div id="drilldown-widget-results" class="grid-stack-item" gs-w="10" gs-h="30" gs-y="10" gs-x="1">
<div class="grid-stack-item-content"> <div class="grid-stack-item-content">
<div class="panel"> <div class="panel">
<p class="panel-heading" style="padding: .2em; line-height: .5em;"> <p class="panel-heading" style="padding: .2em; line-height: .5em;">
<i class="fa-solid fa-arrows-up-down-left-right has-text-grey-light ui-move"></i> <i class="fa-solid fa-arrows-up-down-left-right has-text-grey-light ui-move"></i>
<i
class="fa-solid fa-xmark has-text-grey-light ui-close"
onclick='grid.removeWidget("drilldown-widget-results"); //grid.compact();'></i>
Results Results
</p> </p>
<div class="panel-block is-active"> <div class="panel-block is-active">
<div class="control"> <div class="control">
{% if table %}
<script src="{% static 'js/column-shifter.js' %}"></script> <script src="{% static 'js/column-shifter.js' %}"></script>
<span class="icon has-tooltip-bottom" data-tooltip="{{ card }} hits total"> <span class="icon has-tooltip-bottom" data-tooltip="{{ card }} hits total">
<i class="fa-solid fa-chart-mixed"></i> <i class="fa-solid fa-chart-mixed"></i>
@ -26,22 +31,21 @@
<i class="fa-solid fa-mask"></i> <i class="fa-solid fa-mask"></i>
</span> </span>
{% endif %} {% endif %}
{% endif %}
{% if delay is not None %}
<span class="icon has-tooltip-bottom" data-tooltip="delayed by {{ delay }} days">
<i class="fa-solid fa-clock"></i>
</span>
{% endif %}
{% if randomised is True %}
<span class="icon has-tooltip-bottom" data-tooltip="integer fields randomised">
<i class="fa-solid fa-shuffle"></i>
</span>
{% endif %}
{% include 'ui/drilldown/table_results_partial.html' %}
{% include 'ui/drilldown/sentiment_partial.html' %}
{% endif %} {% endif %}
{% if delay is not None %}
<span class="icon has-tooltip-bottom" data-tooltip="delayed by {{ delay }} days">
<i class="fa-solid fa-clock"></i>
</span>
{% endif %}
{% if randomised is True %}
<span class="icon has-tooltip-bottom" data-tooltip="integer fields randomised">
<i class="fa-solid fa-shuffle"></i>
</span>
{% endif %}
{% include 'ui/drilldown/table_results_partial.html' %}
{% include 'ui/drilldown/sentiment_partial.html' %}
</div> </div>
</div> </div>
</div> </div>
@ -49,12 +53,13 @@
</div> </div>
</div> </div>
<script> <script>
console.log("RUNS");
//var contents = $("#drilldown-widget").outerHTML; //var contents = $("#drilldown-widget").outerHTML;
var contents = document.getElementById("drilldown-widget"); var contents = document.getElementById("drilldown-widget");
var grid = document.getElementById("grid-stack-main").gridstack; var grid = document.getElementById("grid-stack-main").gridstack;
grid.addWidget(contents.innerHTML); grid.addWidget(contents.innerHTML);
contents.outerHTML = ""; contents.outerHTML = "";
grid.compact(); // grid.compact();
// because we remove the element the JS runs in // because we remove the element the JS runs in
// so we need to run it again here // so we need to run it again here
// initTabs("{{ unique }}"); // initTabs("{{ unique }}");

View File

@ -205,6 +205,9 @@ def drilldown_search(request, return_context=False, template=None):
) )
context["class"] = "warning" context["class"] = "warning"
# unique = str(uuid.uuid4())[:8]
# context["unique"] = unique
response = render(request, template_name, context) response = render(request, template_name, context)
if request.GET: if request.GET:
if request.htmx: if request.htmx:
@ -218,7 +221,7 @@ def drilldown_search(request, return_context=False, template=None):
class DrilldownTableView(SingleTableView): class DrilldownTableView(SingleTableView):
table_class = DrilldownTable table_class = DrilldownTable
template_name = "ui/drilldown/table_results.html" template_name = "widgets/table_results.html"
paginate_by = settings.DRILLDOWN_RESULTS_PER_PAGE paginate_by = settings.DRILLDOWN_RESULTS_PER_PAGE
def get_queryset(self, request, **kwargs): def get_queryset(self, request, **kwargs):