Properly swap modal context table and keep scroll position

This commit is contained in:
Mark Veidemanis 2022-08-09 07:20:30 +01:00
parent 3e92d17097
commit 83cd5e7ee7
Signed by: m
GPG Key ID: 5ACFCEED46C0904F
6 changed files with 71 additions and 52 deletions

View File

@ -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"),

View File

@ -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

View File

@ -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>

View File

@ -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>

View File

@ -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 #}

View File

@ -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