Avoid window.open and add more visible eye icon

scripts/pi-hole/js/index.js

@@ -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) {
@@ -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) {
@@ -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 () {

scripts/pi-hole/js/settings.js

@@ -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");
+    $("#apiTokenModal").modal("show");
   },
   cancel: function () {
     // nothing to do
@@ -182,6 +182,18 @@ $(".api-token").confirm({
   dialogClass: "modal-dialog",
 });
 
+$("#apiTokenModal").on("show.bs.modal", function () {
+  var bodyStyle = {
+    "font-family": $("body").css("font-family"),
+    "background-color": "white",
+  };
+  $('iframe[name="apiToken_iframe"]').contents().find("body").css(bodyStyle);
+  var qrCodeStyle = {
+    margin: "auto",
+  };
+  $('iframe[name="apiToken_iframe"]').contents().find("table").css(qrCodeStyle);
+});
+
 $("#DHCPchk").click(function () {
   $("input.DHCPgroup").prop("disabled", !this.checked);
   $("#dhcpnotice").prop("hidden", !this.checked).addClass("lookatme");

settings.php

@@ -1047,6 +1047,22 @@ function convertseconds($argument)
                                     </div>
                                 </div>
                             </form>
+                            <div class="modal fade" id="apiTokenModal" role="dialog" data-keyboard="false"
+                                tabindex="-1" data-backdrop="static" aria-labelledby="apiTokenModal">
+                                <div class="modal-dialog" role="document">
+                                    <div class="modal-content">
+                                        <div class="modal-header">
+                                            <h4 class="modal-title" id="apiTokenModalHeaderLabel">API Token</h4>
+                                        </div>
+                                        <div class="modal-body">
+                                        <pre><iframe id="apiTokenIframe" name="apiToken_iframe" src="scripts/pi-hole/php/api_token.php"></iframe></pre>
+                                        </div>
+                                        <div class="modal-footer">
+                                            <button type="button" data-dismiss="modal" class="btn btn-default">Close</button>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
                         </div>
                         <div class="col-md-6">
                             <form role="form" method="post">

style/pi-hole.css

@@ -441,3 +441,13 @@ td.details-control {
 .navbar-nav {
   height: 50px;
 }
+
+.eyeConWrapper {
+  font-size: 17px;
+}
+
+#apiTokenIframe {
+  width: 100%;
+  border: 0;
+  height: 500px;
+}