Properly swap modal context table and keep scroll position
This commit is contained in:
parent
3e92d17097
commit
83cd5e7ee7
|
@ -89,6 +89,7 @@ urlpatterns = [
|
|||
# path("drilldown/", Drilldown.as_view(), name="drilldown"),
|
||||
path("modal/", ThresholdInfoModal.as_view(), name="modal_drilldown"),
|
||||
path("context/", DrilldownContextModal.as_view(), name="modal_context"),
|
||||
path("context_table/", DrilldownContextModal.as_view(), name="modal_context_table"),
|
||||
##
|
||||
path("ui/insights/", Insights.as_view(), name="insights"),
|
||||
path("ui/insights/search/", InsightsSearch.as_view(), name="search_insights"),
|
||||
|
|
|
@ -1,6 +1,3 @@
|
|||
from core.lib.opensearch import client, run_main_query
|
||||
from django.conf import settings
|
||||
|
||||
def construct_query(net, channel, src, num, size):
|
||||
# Get the initial query
|
||||
extra_must = []
|
||||
|
@ -21,11 +18,21 @@ def construct_query(net, channel, src, num, size):
|
|||
"should": query_should,
|
||||
}
|
||||
},
|
||||
*extra_must
|
||||
*extra_must,
|
||||
]
|
||||
}
|
||||
},
|
||||
"fields": ["nick", "ident", "host", "channel", "ts", "msg", "type", "net", "src"],
|
||||
"fields": [
|
||||
"nick",
|
||||
"ident",
|
||||
"host",
|
||||
"channel",
|
||||
"ts",
|
||||
"msg",
|
||||
"type",
|
||||
"net",
|
||||
"src",
|
||||
],
|
||||
"_source": False,
|
||||
}
|
||||
return query
|
||||
return query
|
||||
|
|
|
@ -5,34 +5,42 @@
|
|||
<link rel ="stylesheet" href="{% static 'tabs.css' %}">
|
||||
<script src="{% static 'tabs.js' %}"></script>
|
||||
|
||||
<div
|
||||
class="modal-refresh"
|
||||
style="display: none;"
|
||||
hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
|
||||
hx-post="{% url 'modal_context' %}"
|
||||
hx-vals='{"net": "{{ net }}",
|
||||
"num": "{{ num }}",
|
||||
"src": "{{ src }}",
|
||||
"channel": "{{ channel }}",
|
||||
"time": "{{ time }}",
|
||||
"date": "{{ date }}",
|
||||
"index": "{{ index }}"
|
||||
}'
|
||||
hx-target="#modals-here"
|
||||
hx-trigger="every 3s">
|
||||
<div class="modal-refresh"
|
||||
style="display: none;"
|
||||
hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
|
||||
hx-post="{% url 'modal_context_table' %}"
|
||||
hx-vals='{"net": "{{ net }}",
|
||||
"num": "{{ num }}",
|
||||
"src": "{{ src }}",
|
||||
"channel": "{{ channel }}",
|
||||
"time": "{{ time }}",
|
||||
"date": "{{ date }}",
|
||||
"index": "{{ index }}"
|
||||
}'
|
||||
hx-target="#modal-context-table"
|
||||
hx-trigger="every 5s">
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.addEventListener("restore-modal-scroll", function(event) {
|
||||
var scrollpos = localStorage.getItem('scrollpos_modal_content');
|
||||
if (scrollpos) {
|
||||
document.getElementsByClassName("modal-content")[0].scrollTop = scrollpos;
|
||||
};
|
||||
var modalContent = document.getElementsByClassName("modal-content")[0];
|
||||
var maxScroll = modalContent.scrollHeight - modalContent.offsetHeight;
|
||||
var scrollpos = localStorage.getItem('scrollpos_modal_content');
|
||||
if (scrollpos == 'BOTTOM') {
|
||||
modalContent.scrollTop = maxScroll;
|
||||
} else if (scrollpos) {
|
||||
modalContent.scrollTop = scrollpos;
|
||||
};
|
||||
});
|
||||
|
||||
document.addEventListener("htmx:beforeSwap", function(event) {
|
||||
var contentScroll = document.getElementsByClassName("modal-content")[0].scrollTop;
|
||||
localStorage.setItem('scrollpos_modal_content', contentScroll);
|
||||
var modalContent = document.getElementsByClassName("modal-content")[0];
|
||||
var scrollpos = modalContent.scrollTop;
|
||||
if(modalContent.scrollTop === (modalContent.scrollHeight - modalContent.offsetHeight)) {
|
||||
localStorage.setItem('scrollpos_modal_content', 'BOTTOM');
|
||||
} else {
|
||||
localStorage.setItem('scrollpos_modal_content', scrollpos);
|
||||
}
|
||||
|
||||
});
|
||||
</script>
|
||||
|
@ -73,26 +81,7 @@
|
|||
<div id="tab-content">
|
||||
<div class="is-active" data-content="1">
|
||||
<h4 class="subtitle is-4">Scrollback of {{ channel }} on {{ net }}{{ num }}</h4>
|
||||
<article class="table-container">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<th></th>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for item in object_list %}
|
||||
{% if item.type == 'msg' %}
|
||||
<tr>
|
||||
<td>{{ item.time }}</td>
|
||||
<td
|
||||
class="has-tooltip-right {% if item.online is True %}has-text-success{% elif item.online is False %}has-text-danger{% else %}has-text-warning{% endif %}"
|
||||
data-tooltip="{{ item.nick }}!{{ item.ident }}@{{ item.host }}">{{ item.nick }}</td>
|
||||
<td class="wrap">{{ item.msg }}</td>
|
||||
</tr>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</article>
|
||||
{% include 'modals/context_table.html' %}
|
||||
<div class="field has-addons">
|
||||
<div class="control is-expanded has-icons-left">
|
||||
<input
|
||||
|
@ -135,10 +124,6 @@
|
|||
</div>
|
||||
</div>
|
||||
<button class="modal-close is-large" aria-label="close"></button>
|
||||
<script>
|
||||
var modal_event = new Event('restore-modal-scroll');
|
||||
document.dispatchEvent(modal_event);
|
||||
</script>
|
||||
{# <script>activateButtons();</script> #}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -0,0 +1,24 @@
|
|||
<article class="table-container" id="modal-context-table">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<th></th>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for item in object_list %}
|
||||
{% if item.type == 'msg' %}
|
||||
<tr>
|
||||
<td>{{ item.time }}</td>
|
||||
<td
|
||||
class="has-tooltip-right {% if item.online is True %}has-text-success{% elif item.online is False %}has-text-danger{% else %}has-text-warning{% endif %}"
|
||||
data-tooltip="{{ item.nick }}!{{ item.ident }}@{{ item.host }}">{{ item.nick }}</td>
|
||||
<td class="wrap">{{ item.msg }}</td>
|
||||
</tr>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</article>
|
||||
<script>
|
||||
var modal_event = new Event('restore-modal-scroll');
|
||||
document.dispatchEvent(modal_event);
|
||||
</script>
|
|
@ -35,7 +35,6 @@
|
|||
<script src="{% static 'chart.js' %}"></script>
|
||||
</div>
|
||||
{% endif %}
|
||||
{{ params }}
|
||||
{% include 'ui/drilldown/table_results_partial.html' %}
|
||||
{% endif %}
|
||||
{# Update the tags in case the user changed the query #}
|
||||
|
|
|
@ -240,6 +240,9 @@ class DrilldownContextModal(APIView):
|
|||
template_name = "modals/context.html"
|
||||
|
||||
def post(self, request):
|
||||
if request.resolver_match.url_name == "modal_context_table":
|
||||
print("POST CONTEXT TABLE")
|
||||
self.template_name = "modals/context_table.html"
|
||||
# if not request.user.has_plan(self.plan_name):
|
||||
# return JsonResponse({"success": False})
|
||||
num = None
|
||||
|
|
Loading…
Reference in New Issue