Pathogen
/
neptune
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Implement tags

This commit is contained in:
Mark Veidemanis 2022-08-03 07:20:30 +01:00
parent d8b96ad66e
commit b95aaf8ff2
Signed by: m
GPG Key ID: 5ACFCEED46C0904F
3 changed files with 91 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
core/templates/base.html
View File

@ -14,11 +14,13 @@
<link rel="stylesheet" href="https://site-assets.fontawesome.com/releases/v6.1.1/css/all.css"> <link rel="stylesheet" href="https://site-assets.fontawesome.com/releases/v6.1.1/css/all.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma-slider@2.0.5/dist/css/bulma-slider.min.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma-slider@2.0.5/dist/css/bulma-slider.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma-calendar@6.1.18/dist/css/bulma-calendar.min.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma-calendar@6.1.18/dist/css/bulma-calendar.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@creativebulma/bulma-tagsinput@1.0.3/dist/css/bulma-tagsinput.min.css">
<script src="https://cdn.jsdelivr.net/npm/bulma-calendar@6.1.18/dist/js/bulma-calendar.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bulma-calendar@6.1.18/dist/js/bulma-calendar.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bulma-slider@2.0.5/dist/js/bulma-slider.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bulma-slider@2.0.5/dist/js/bulma-slider.min.js"></script>
<script src="https://unpkg.com/htmx.org@1.8.0" integrity="sha384-cZuAZ+ZbwkNRnrKi05G/fjBX+azI9DNOkNYysZ0I/X5ZFgsmMiBXgDZof30F5ofc" crossorigin="anonymous"></script> <script src="https://unpkg.com/htmx.org@1.8.0" integrity="sha384-cZuAZ+ZbwkNRnrKi05G/fjBX+azI9DNOkNYysZ0I/X5ZFgsmMiBXgDZof30F5ofc" crossorigin="anonymous"></script>
<script src="https://unpkg.com/htmx.org@1.8.0/dist/ext/remove-me.js"></script> <script src="https://unpkg.com/htmx.org@1.8.0/dist/ext/remove-me.js"></script>
<script src="https://unpkg.com/hyperscript.org@0.9.7"></script> <script src="https://unpkg.com/hyperscript.org@0.9.7"></script>
<script src="https://cdn.jsdelivr.net/npm/@creativebulma/bulma-tagsinput@1.0.3/dist/js/bulma-tagsinput.min.js"></script>
<script> <script>
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
@ -70,6 +72,8 @@
.htmx-request.htmx-indicator{ .htmx-request.htmx-indicator{
opacity:1 opacity:1
} }
</style> </style>
</head> </head>
<body> <body>

95
core/templates/ui/drilldown/drilldown.html
View File

@ -3,21 +3,58 @@
{% block content %} {% block content %}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script> <script>
function populateSearch(field, value) { function addTag(value) {
var inputTags = document.getElementById('tags');
var btiInstance = inputTags.BulmaTagsInput();
btiInstance.add(value);
}
function delTag(value) {
var inputTags = document.getElementById('tags');
var btiInstance = inputTags.BulmaTagsInput();
btiInstance.remove(value);
}
function toggleTag(field, value) {
var queryElement = document.getElementById('query'); var queryElement = document.getElementById('query');
var tagText = `${field}: ${value}`;
var present = true; var present = true;
if (present == true) { if (present == true) {
var toAppend = ` AND ${field}: "${value}"`; var toAppend = ` AND ${field}: "${value}"`;
var toRemove = `${field}: "${value}"`; var toRemove = `${field}: "${value}"`;
var tagText = `${field}: ${value}`;
} else { } else {
var toAppend = ` AND NOT ${field}: "${value}"`; var toAppend = ` AND NOT ${field}: "${value}"`;
var toRemove = `NOT ${field}: "${value}"`; var toRemove = `NOT ${field}: "${value}"`;
} }
if (!queryElement.value.includes(toAppend) && !queryElement.value.includes(toRemove)) { if (!queryElement.value.includes(toAppend) && !queryElement.value.includes(toRemove)) {
addTag(tagText);
} else {
delTag(tagText);
}
}
function populateSearch(field, value, fromTag=false) {
var queryElement = document.getElementById('query');
var present = true;
if (present == true) {
var toAppend = ` AND ${field}: "${value}"`;
var toRemove = `${field}: "${value}"`;
var tagText = `${field}: ${value}`;
} else {
var toAppend = ` AND NOT ${field}: "${value}"`;
var toRemove = `NOT ${field}: "${value}"`;
}
if (!queryElement.value.includes(toAppend) && !queryElement.value.includes(toRemove)) {
if (fromTag) {
queryElement.value+=toAppend; queryElement.value+=toAppend;
} else { } else {
queryElement.value+=toAppend;
}
} else {
if (fromTag) {
queryElement.value = queryElement.value.replaceAll(toAppend, ""); queryElement.value = queryElement.value.replaceAll(toAppend, "");
queryElement.value = queryElement.value.replaceAll(toRemove, ""); queryElement.value = queryElement.value.replaceAll(toRemove, "");
} else {
}
} }
if (field == "src") { if (field == "src") {
document.getElementById("source").selectedIndex = 0; document.getElementById("source").selectedIndex = 0;
@ -181,34 +218,30 @@
for(var i = 0; i < calendars.length; i++) { for(var i = 0; i < calendars.length; i++) {
// Add listener to select event // Add listener to select event
calendars[i].on('save', date => { calendars[i].on('save', date => {
console.log(date);
htmx.trigger("#search", "click"); htmx.trigger("#search", "click");
}); });
} }
// To access to bulmaCalendar instance of an element
var element = document.querySelector('#my-element');
if (element) {
// bulmaCalendar instance is available as element.bulmaCalendar
element.bulmaCalendar.on('select', function(datepicker) {
console.log(datepicker.data.value());
});
}
</script> </script>
</div> </div>
</div> </div>
<div class="control"> <div class="control">
<label class="radio"> <label class="radio button has-text-link">
<input type="radio" value="desc" name="sorting" checked> <input type="radio" value="desc" name="sorting" checked>
Desc <span class="icon" data-tooltip="Sort descending">
<i class="fa-solid fa-sort-down"></i>
</span>
</label> </label>
<label class="radio"> <label class="radio button">
<input type="radio" value="asc" name="sorting"> <input type="radio" value="asc" name="sorting">
Asc <span class="icon" data-tooltip="Sort ascending">
<i class="fa-solid fa-sort-up"></i>
</span>
</label> </label>
<label class="radio"> <label class="radio button">
<input type="radio" value="none" name="sorting"> <input type="radio" value="none" name="sorting">
None <span class="icon" data-tooltip="No sort">
<i class="fa-solid fa-sort"></i>
</span>
</label> </label>
</div> </div>
</div> </div>
@ -218,6 +251,34 @@
<div class="is-hidden"></div> <div class="is-hidden"></div>
</form> </form>
</div> </div>
<div class="block">
<input id="tags" class="input" type="tags" placeholder="Add query" value="">
<script>
var inputTags = document.getElementById('tags');
new BulmaTagsInput(inputTags);
inputTags.BulmaTagsInput().on('before.add', function(item) {
var spl = item.split(": ");
var field = spl[0];
try {
var value = JSON.parse(spl[1]);
} catch {
var value = spl[1];
}
populateSearch(field, value, fromTag=true);
return `${field}: ${value}`;
});
inputTags.BulmaTagsInput().on('after.remove', function(item) {
var spl = item.split(": ");
var field = spl[0];
try {
var value = JSON.parse(spl[1]);
} catch {
var value = spl[1];
}
populateSearch(field, value, fromTag=true);
});
</script>
</div>
<div class="block"> <div class="block">
<div id="results"> <div id="results">
</div> </div>

12
core/templates/ui/drilldown/results.html
View File

@ -65,7 +65,7 @@
{% endif %} {% endif %}
<td> <td>
<a class="has-text-link is-underlined" <a class="has-text-link is-underlined"
onclick="populateSearch('src', '{{ item.src|escapejs }}')"> onclick="toggleTag('src', '{{ item.src|escapejs }}')">
{% if item.src == 'irc' %} {% if item.src == 'irc' %}
<span class="icon" data-tooltip="IRC"> <span class="icon" data-tooltip="IRC">
<i class="fa-solid fa-hashtag" aria-hidden="true"></i> <i class="fa-solid fa-hashtag" aria-hidden="true"></i>
@ -79,7 +79,7 @@
</td> </td>
<td> <td>
<a class="has-text-link is-underlined" <a class="has-text-link is-underlined"
onclick="populateSearch('type', '{{ item.type|escapejs }}')"> onclick="toggleTag('type', '{{ item.type|escapejs }}')">
{% if item.type == 'msg' %} {% if item.type == 'msg' %}
<span class="icon" data-tooltip="Message"> <span class="icon" data-tooltip="Message">
<i class="fa-solid fa-message"></i> <i class="fa-solid fa-message"></i>
@ -124,7 +124,7 @@
<td style="max-width: 10em" class="wrap">{{ item.msg }}</td> <td style="max-width: 10em" class="wrap">{{ item.msg }}</td>
<td> <td>
<a class="has-text-link is-underlined" <a class="has-text-link is-underlined"
onclick="populateSearch('host', '{{ item.host|escapejs }}')"> onclick="toggleTag('host', '{{ item.host|escapejs }}')">
{{ item.host }} {{ item.host }}
</a> </a>
</td> </td>
@ -145,7 +145,7 @@
</span> </span>
{% endif %} {% endif %}
</div> </div>
<a class="nowrap-child has-text-link is-underlined" onclick="populateSearch('nick', '{{ item.nick|escapejs }}')"> <a class="nowrap-child has-text-link is-underlined" onclick="toggleTag('nick', '{{ item.nick|escapejs }}')">
{{ item.nick }} {{ item.nick }}
</a> </a>
{% if item.num_chans is not None %} {% if item.num_chans is not None %}
@ -173,7 +173,7 @@
<td> <td>
<div class="nowrap-parent"> <div class="nowrap-parent">
<a class="nowrap-child has-text-link is-underlined" <a class="nowrap-child has-text-link is-underlined"
onclick="populateSearch('channel', '{{ item.channel|escapejs }}')"> onclick="toggleTag('channel', '{{ item.channel|escapejs }}')">
{{ item.channel }} {{ item.channel }}
</a> </a>
{% if item.num_users is not None %} {% if item.num_users is not None %}
@ -187,7 +187,7 @@
</td> </td>
<td> <td>
<a class="has-text-link is-underlined" <a class="has-text-link is-underlined"
onclick="populateSearch('net', '{{ item.net|escapejs }}')"> onclick="toggleTag('net', '{{ item.net|escapejs }}')">
{{ item.net }} {{ item.net }}
</a> </a>
</td> </td>