From 6b0851ab6f26bcb4df59c1183231226901e95d3b Mon Sep 17 00:00:00 2001 From: Mark Veidemanis Date: Mon, 1 Aug 2022 18:47:29 +0100 Subject: [PATCH] Implement alias editing views and templates --- app/urls.py | 6 ++ core/static/modal.js | 17 +++++ core/static/tabs.css | 7 ++ core/static/tabs.js | 35 +++++++++ .../threshold/irc/overview/aliases.html | 10 +++ .../irc/overview/modals/edit-aliases.html | 73 +++++++++++++++++++ core/templates/modals/drilldown.html | 32 +------- core/templates/ui/drilldown/drilldown.html | 33 --------- 8 files changed, 152 insertions(+), 61 deletions(-) create mode 100644 core/static/modal.js create mode 100644 core/static/tabs.css create mode 100644 core/static/tabs.js create mode 100644 core/templates/manage/threshold/irc/overview/modals/edit-aliases.html diff --git a/app/urls.py b/app/urls.py index c78d05a..f1f861c 100644 --- a/app/urls.py +++ b/app/urls.py @@ -35,6 +35,7 @@ from core.views.manage.threshold.irc import ( ThresholdIRCNetworkRelayStatus, ThresholdIRCNetworks, ThresholdIRCStats, + ThresholdIRCAliasesEdit, ) # Management stuff @@ -155,6 +156,11 @@ urlpatterns = [ ThresholdIRCAliases.as_view(), name="threshold_irc_aliases", ), + path( + "manage/threshold/irc/aliases/edit/", + ThresholdIRCAliasesEdit.as_view(), + name="threshold_irc_aliases_edit", + ), path( "manage/threshold/irc/network//actions/", ThresholdIRCNetworkActions.as_view(), diff --git a/core/static/modal.js b/core/static/modal.js new file mode 100644 index 0000000..4bbd4d0 --- /dev/null +++ b/core/static/modal.js @@ -0,0 +1,17 @@ +var modal = document.querySelector('.modal'); // assuming you have only 1 +var html = document.querySelector('html'); +modal.querySelector('.modal-background').addEventListener('click', function(e) { + e.preventDefault(); + modal.classList.remove('is-active'); + html.classList.remove('is-clipped'); +}); +modal.querySelector('.modal-close').addEventListener('click', function(e) { + e.preventDefault(); + modal.classList.remove('is-active'); + html.classList.remove('is-clipped'); +}); +modal.querySelector('.modal-close-button').addEventListener('click', function(e) { + e.preventDefault(); + modal.classList.remove('is-active'); + html.classList.remove('is-clipped'); +}); \ No newline at end of file diff --git a/core/static/tabs.css b/core/static/tabs.css new file mode 100644 index 0000000..44bf303 --- /dev/null +++ b/core/static/tabs.css @@ -0,0 +1,7 @@ +#tab-content div { + display: none; +} + +#tab-content div.is-active { + display: block; +} \ No newline at end of file diff --git a/core/static/tabs.js b/core/static/tabs.js new file mode 100644 index 0000000..2b1b3b3 --- /dev/null +++ b/core/static/tabs.js @@ -0,0 +1,35 @@ + // tabbed browsing for the modal + 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); + } + }); + } +var TABS = [...document.querySelectorAll('#tabs li')]; +var CONTENT = [...document.querySelectorAll('#tab-content div')]; +var ACTIVE_CLASS = 'is-active'; +initTabs(); \ No newline at end of file diff --git a/core/templates/manage/threshold/irc/overview/aliases.html b/core/templates/manage/threshold/irc/overview/aliases.html index ff2f050..8bd9752 100644 --- a/core/templates/manage/threshold/irc/overview/aliases.html +++ b/core/templates/manage/threshold/irc/overview/aliases.html @@ -36,6 +36,16 @@ + + +
+
{% endif %} +
+
\ No newline at end of file diff --git a/core/templates/manage/threshold/irc/overview/modals/edit-aliases.html b/core/templates/manage/threshold/irc/overview/modals/edit-aliases.html new file mode 100644 index 0000000..8d94cff --- /dev/null +++ b/core/templates/manage/threshold/irc/overview/modals/edit-aliases.html @@ -0,0 +1,73 @@ +{% load index %} +{% load static %} +{% load joinsep %} + + + + + + + + + + + diff --git a/core/templates/modals/drilldown.html b/core/templates/modals/drilldown.html index 9595161..d968e37 100644 --- a/core/templates/modals/drilldown.html +++ b/core/templates/modals/drilldown.html @@ -1,33 +1,9 @@ {% load index %} +{% load static %} - - + + +