Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Avoid window.open and add more visible eye icon #1996

Merged
merged 14 commits into from
Dec 21, 2021
110 changes: 69 additions & 41 deletions scripts/pi-hole/js/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -321,33 +321,64 @@ function updateQueryTypesPie() {
queryTypePieChart.options.animation.duration = 0;
// Generate legend in separate div
$("#query-types-legend").html(queryTypePieChart.generateLegend());
$("#query-types-legend > ul > li").on("mousedown", function (e) {
if (e.which === 2) {
// which == 2 is middle mouse button
$(this).toggleClass("strike");
var index = $(this).index();
var ci = e.view.queryTypePieChart;
var mobj = ci.data.datasets[0]._meta;
var metas = Object.keys(mobj).map(function (e) {
return mobj[e];
});
metas.forEach(function (meta) {
var curr = meta.data[index];
curr.hidden = !curr.hidden;
});

ci.update();
} else if (e.which === 1) {
// which == 1 is left mouse button
window.open("queries.php?querytype=" + querytypeids[$(this).index()], "_self");
$("#query-types-legend > ul > li").prepend(createEyeConElement());
$("#query-types-legend > ul > li").click(function (e) {
if (isEyeCon(e.target)) {
return false;
}

window.location.href = "queries.php?querytype=" + querytypeids[$(this).index()];
});
}).done(function () {
// Reload graph after minute
setTimeout(updateQueryTypesPie, 60000);
});
}

function hidePieSlice(event) {
toggleEyeCon(event.target);

var legendID = $(event.target).closest(".chart-legend").attr("id");
var ci =
legendID === "query-types-legend"
? event.view.queryTypePieChart
: event.view.forwardDestinationPieChart;

var listItemParent = $(event.target).closest("li");
$(listItemParent).toggleClass("strike");

var index = $(listItemParent).index();
var mobj = ci.data.datasets[0]._meta;
var metas = Object.keys(mobj).map(function (e) {
return mobj[e];
});
metas.forEach(function (meta) {
var curr = meta.data[index];
curr.hidden = !curr.hidden;
});

ci.update();
}

function toggleEyeCon(target) {
var parentListItem = $(target).closest("li");
var eyeCon = $(parentListItem).find(".fa-eye, .fa-eye-slash");

if (eyeCon) {
$(eyeCon).toggleClass("fa-eye");
$(eyeCon).toggleClass("fa-eye-slash");
}
}

function isEyeCon(target) {
// See if click happened on eyeConWrapper or child SVG
if ($(target).closest(".eyeConWrapper")[0]) {
return true;
}

return false;
}

function updateClientsOverTime() {
$.getJSON("api.php?overTimeDataClients&getClientNames", function (data) {
if ("FTLnotrunning" in data) {
Expand Down Expand Up @@ -437,6 +468,16 @@ function updateClientsOverTime() {
});
}

function createEyeConElement() {
var eyeConWrapper = $("<span></span>")
.addClass("eyeConWrapper")
.click(function (e) {
hidePieSlice(e);
});
eyeConWrapper.append($("<i class='fa fa-eye'></i>"));
return eyeConWrapper;
}

function updateForwardDestinationsPie() {
$.getJSON("api.php?getForwardDestinations", function (data) {
if ("FTLnotrunning" in data) {
Expand Down Expand Up @@ -480,28 +521,15 @@ function updateForwardDestinationsPie() {
forwardDestinationPieChart.options.animation.duration = 0;
// Generate legend in separate div
$("#forward-destinations-legend").html(forwardDestinationPieChart.generateLegend());
$("#forward-destinations-legend > ul > li").on("mousedown", function (e) {
if (e.which === 2) {
// which == 2 is middle mouse button
$(this).toggleClass("strike");
var index = $(this).index();
var ci = e.view.forwardDestinationPieChart;
var mobj = ci.data.datasets[0]._meta;
var metas = Object.keys(mobj).map(function (e) {
return mobj[e];
});
metas.forEach(function (meta) {
var curr = meta.data[index];
curr.hidden = !curr.hidden;
});

ci.update();
} else if (e.which === 1) {
// which == 1 is left mouse button
var obj = encodeURIComponent(e.target.textContent);
if (obj.length > 0) {
window.open("queries.php?forwarddest=" + obj, "_self");
}
$("#forward-destinations-legend > ul > li").prepend(createEyeConElement());
$("#forward-destinations-legend > ul > li").click(function (e) {
if (isEyeCon(e.target)) {
return false;
}

var obj = encodeURIComponent(e.target.textContent);
if (obj.length > 0) {
window.location.href = "queries.php?forwarddest=" + obj;
}
});
}).done(function () {
Expand Down
2 changes: 1 addition & 1 deletion scripts/pi-hole/js/settings.js
Original file line number Diff line number Diff line change
Expand Up @@ -169,7 +169,7 @@ $(".api-token").confirm({
text: "Make sure that nobody else can scan this code around you. They will have full access to the API without having to know the password. Note that the generation of the QR code will take some time.",
title: "Confirmation required",
confirm: function () {
window.open("scripts/pi-hole/php/api_token.php");
window.open("scripts/pi-hole/php/api_token.php", "_blank");
yubiuser marked this conversation as resolved.
Show resolved Hide resolved
},
cancel: function () {
// nothing to do
Expand Down
4 changes: 4 additions & 0 deletions style/pi-hole.css
Original file line number Diff line number Diff line change
Expand Up @@ -441,3 +441,7 @@ td.details-control {
.navbar-nav {
height: 50px;
}

.eyeConWrapper {
font-size: 17px;
}