Jones/MastodonHelp
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

mustard: notifs: Aggiunto filtro per la lista delle notifiche.

Browse source 
* web/mustard/notifs.php: Aggiunta la plancia e il popup da
  instances.php e funzioni JS per manipolare e filtrare la
  lista delle notifiche.
This commit is contained in:
paul 2020-05-19 20:01:34 +02:00 committed by Giacomo Leidi
parent 7f3d5c3989
commit 6fafcf508c
1 changed files with 148 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

156
web/mustard/notifs.php
View file

@ -86,7 +86,6 @@ if ($filtordon) {
$filtordimgon = 'imgs/cerca_on.svg';
}
?>
<!DOCTYPE HTML>
<html lang="en">
<head>
@ -125,10 +124,8 @@ if ($filtordon) {
function setBtnsVisibility(state) {
let controls = document.querySelector("#notifs-list-controls");
let btns = Array(controls.querySelector("#read-btn"), controls.querySelector("#delete-btn"));
btns.forEach(function (btn) {
btn.style.visibility = state;
});
controls.querySelector("#read-btn").style.visibility = state;
controls.querySelector("#delete-btn").style.visibility = state;
}
function toggleState(check) {
@ -152,6 +149,126 @@ if ($filtordon) {
}
}
function showFilterPanel() {
let plancia = document.querySelector("#plancia");
if (plancia.style.display !== "block") {
if (plancia.childElementCount <= 3) {
addAfter(plancia.firstElementChild);
}
plancia.style.display = "block";
}
}
function getFilters() {
return Array.from(document.querySelectorAll("#plancia .notifs-criterion"));
}
function newFilter() {
return "<div class='notifs-criterion'>" +
" <label for='start-date'>Da</label>" +
" <input id='start-date' name='start-date' type='date'>" +
" <label for='stop-date'>A</label>" +
" <input id='stop-date' name='stop-date' type='date'>" +
" <select id='severity'>" +
" <option value='-1'>Indifferente</option>" +
" <option value='1'>Normal</option>" +
" <option value='2'>Warning</option>" +
" <option value='3'>Error</option>" +
" </select>" +
" <select id='operation'>" +
" <option value='0'>E</option>" +
" <option value='1'>O</option>" +
" </select>" +
" <img class='plus' src='imgs/plus.svg' title='Aggiungi un criterio sotto questo'" +
" onclick='addAfter(this.parentElement)'>" +
" <img class='minus' src='imgs/minus.svg' title='Rimuovi questo criterio'" +
" onclick='removeFilter(this.parentElement)'>" +
"</div>";
}
function addAfter(elem) {
let filters = getFilters();
if (filters.length < 7) {
elem.insertAdjacentHTML('afterend', newFilter());
filters = getFilters();
if (filters.length > 1) {
let select = elem.querySelector("#operation");
if (select.disabled) {
select.disabled = false;
}
}
filters[filters.length - 1].querySelector("#operation").disabled = true;
}
}
function removeFilter(elem) {
let filters = getFilters();
if (filters.length > 1) {
elem.remove();
filters = getFilters();
filters[filters.length - 1].querySelector("#operation").disabled = true;
}
}
function clearFilters() {
let filtered = document.querySelectorAll(".filtered");
filtered.forEach(f => f.classList.remove("filtered"))
getFilters().forEach(f => f.remove());
document.querySelector("#plancia").style.display = "none";
}
function makeDateFilter(criterion) {
let start = criterion.querySelector("#start-date").value;
let stop = criterion.querySelector("#stop-date").value;
start = (start === '') ? new Date(0) : new Date(start);
stop = (stop === '') ? new Date() : new Date(stop);
return date => (date <= stop) && (date >= start);
}
function makeSeverityFilter(criterion) {
let select = criterion.querySelector("#severity");
let severity = select.options[select.selectedIndex].value;
if (severity === "-1") {
return x => true;
}
return x => x === severity;
}
function makeFilterFunction(criterion) {
let dateFilter = makeDateFilter(criterion);
let severityFilter = makeSeverityFilter(criterion);
return notif => {
let microtime = new Date(parseFloat(notif.dataset.microtime) * 1000);
let severity = notif.dataset.severity;
return dateFilter(microtime) && severityFilter(severity);
}
}
function applyFilters() {
let filters = getFilters();
let notifs = getAliveNotifs();
let filterFunctions = filters.map(makeFilterFunction);
let fun = x => filterFunctions[0](x);
for (let i = 0; i < filters.length - 1; i++) {
// Questo hack serve per evitare che la chiamata
// al filtro sia interpretata come ricorsione.
let filter = fun;
if (filters[i].querySelector("#operation").value === "0") {
fun = x => (filter(x) && filterFunctions[i + 1](x));
} else {
fun = x => (filter(x) || filterFunctions[i + 1](x));
}
}
notifs.forEach(notif => {
if (!fun(notif)) {
notif.classList.add("filtered");
}
});
document.querySelector("#plancia").style.display = "none";
}
// -->
</script>
@ -167,6 +284,8 @@ if ($filtordon) {
</ul>
<div class="mtit">Notifiche</div>
<div id="rightdiv">
<img src="<?php echo($filtordimgoff); ?>" id="lente" class="rlinks" title="Mostra il pannello di filtraggio"
onclick="showFilterPanel();">
<?php if ($account['Level'] != 'guest') echo('<img src="' . $notifs['imgoff'] . '" id="bell" class="rlinks" title="Show notifications" onclick="shidenotifs();">' . N); ?>
<img src="imgs/esci.svg" class="rlinks" title="Logout" onclick="document.location.href='logout.php';">
</div>
@ -193,7 +312,9 @@ if ($filtordon) {
1 => "deleted"
);
foreach ($notifs['notifs'] as $n) {
echo("<div id=\"notif-" . $n["ID"] . "\" class=\"" . "notif " . $deleted[$n["Deleted"]] . " " . $sev_classes[$n["Severity"]] . " " . $seen_class[$n["Seen"]] . "\">" .
echo("<div id=\"notif-" . $n["ID"] . "\" class=\"" . "notif " . $deleted[$n["Deleted"]] . " " . $sev_classes[$n["Severity"]] . " " . $seen_class[$n["Seen"]] .
"\" data-microtime='" . $n['Microtime'] . "' " .
"data-severity='" . $n['Severity'] . "'>" .
"<input type=\"checkbox\" class=\"seen-checkbox\" onclick='notifSelect(this)'>" .
"<button type='button' onclick='markread(this.parentElement)'><i class=\"fa fa-envelope-open-o\" aria-hidden=\"true\"></i></button>" .
"<button type='button' onclick='markdeleted(this.parentElement)'><i class=\"fa fa-trash-o\" aria-hidden=\"true\"></i></button>" .
@ -203,6 +324,14 @@ if ($filtordon) {
} ?>
</div>
<div id="popup">
<div id="inpopup">
<div id="popupcont">
...
</div>
</div>
</div>
<div id="footer">
<div id="notifs-list-controls">
<input id="global-selector" type="checkbox" onclick="toggleState(this)">
@ -218,11 +347,22 @@ if ($filtordon) {
</div>
</div>
</div>
<div id="plancia">
<button id='clear-filters-btn' type='button'
onclick="confirma('Confermi di voler rimuovere tutti i criteri di filtraggio?','clearFilters()')">
Rimuovi tutti i criteri di filtraggio
</button>
<div id="criterion-list"></div>
<button id='apply-filters-btn' type='button' onclick="applyFilters()">
Applica
</button>
</div>
</body>
</html>
<?php
mysqli_close($link);
exit(0);
?>