pi-hole/web
1
0
Fork 0
mirror of https://github.com/pi-hole/web.git synced 2024-12-06 19:36:21 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

Restructure settings page into individual smaller files. The massive file grew beyond all bounds and was rather unmaintainable. The new structure has a number of benefits, most importantly it's a lot more repsonsive as we do not have to fire a ton of individual AJAX queries to populate all tabs but only need to source what is actually displayed on the page we are showing here

Browse Source 
Signed-off-by: DL6ER <dl6er@dl6er.de>
This commit is contained in:
DL6ER
2023-02-18 13:48:37 +01:00
parent 7396156274
commit 3ea5a985cf
13 changed files with 1012 additions and 943 deletions
Download Patch File Download Diff File Expand all files Collapse all files
scripts/pi-hole/js/footer.js
+42
View File
@@ -187,6 +187,10 @@ function updateFtlInfo() {
$("#sysinfo-cpu-ftl").text("(" + ftl["%cpu"].toFixed(1) + "% used by FTL)");
$("#sysinfo-ram-ftl").text("(" + ftl["%mem"].toFixed(1) + "% used by FTL)");
$("#sysinfo-pid-ftl").text(ftl.pid);
var startdate = moment()
.subtract(ftl.uptime, "milliseconds")
.format("dddd, MMMM Do YYYY, HH:mm:ss");
$("#sysinfo-uptime-ftl").text(startdate);
$("#sysinfo-privacy_level").text(ftl.privacy_level);
$("#sysinfo-ftl-overlay").hide();
// Update every 120 seconds
@@ -517,3 +521,41 @@ $("#pihole-disable-custom").on("click", function (e) {
custVal = $("#btnMins").hasClass("active") ? custVal * 60 : custVal;
piholeChange("disable", custVal);
});
function initSettingsLevel() {
// Restore settings level from local storage (if available) or default to 0
var level = localStorage.getItem("settings-level");
if (level === null) {
level = "0";
}
// Set the settings level
$("#settings-level").val(level);
applySettingsLevel(level);
}
function applySettingsLevel(level) {
if (level === "2") {
$(".settings-level-0").show();
$(".settings-level-1").show();
$(".settings-level-2").show();
} else if (level === "1") {
$(".settings-level-0").show();
$(".settings-level-1").show();
$(".settings-level-2").hide();
} else {
$(".settings-level-0").show();
$(".settings-level-1").hide();
$(".settings-level-2").hide();
}
}
$("#settings-level").on("change", function () {
var level = $(this).val();
applySettingsLevel(level);
localStorage.setItem("settings-level", level);
});
$(function () {
initSettingsLevel();
});
scripts/pi-hole/js/settings-advanced.js
+5 -25
View File
@@ -5,7 +5,7 @@
* This file is copyright under the latest version of the EUPL.
* Please see LICENSE file for your rights under this license. */
/* global utils:false, apiFailure: false, applyCheckboxRadioStyle: false, fillDNSupstreams: false */
/* global utils:false, apiFailure: false, applyCheckboxRadioStyle: false */
/* exported createDynamicConfigTabs */
function addAllowedValues(allowed) {
@@ -34,20 +34,6 @@ function generateRow(topic, key, value) {
return;
}
// Select listening mode radio button
var escapedKey = key.replace(/\./g, "\\.");
if (value.type === "enum (string)") {
$("#" + escapedKey + "-" + value.value).trigger("click");
} else if (value.type === "boolean") {
// Select checkboxes (if available)
$("#" + escapedKey).prop("checked", value.value);
} else if (
["string", "IPv4 address", "IPv6 address", "integer", "unsigned integer"].includes(value.type)
) {
// Set input field values (if available)
$("#" + escapedKey).val(value.value);
}
// else: we have a setting we can display
var box =
'<div class="box box-warning">' +
@@ -238,21 +224,11 @@ function generateRow(topic, key, value) {
elem.append(box);
}
function fillDHCPhosts(data) {
$("#dhcp-hosts").val(data.value.join("\n"));
}
// eslint-disable-next-line no-unused-vars
function createDynamicConfigTabs() {
$.ajax({
url: "/api/config?detailed=true",
})
.done(function (data) {
// Initialize the DNS upstreams
fillDNSupstreams(data.config.dns.upstreams, data.dns_servers);
fillDHCPhosts(data.config.dhcp.hosts);
// Create the content for the advanced dynamic config topics
Object.keys(data.topics).forEach(function (n) {
var topic = data.topics[n];
@@ -297,3 +273,7 @@ function createDynamicConfigTabs() {
apiFailure(data);
});
}
$(document).ready(function () {
createDynamicConfigTabs();
});
scripts/pi-hole/js/settings-dhcp.js
+22 -1
View File
@@ -5,7 +5,7 @@
* This file is copyright under the latest version of the EUPL.
* Please see LICENSE file for your rights under this license. */
/* global utils:false */
/* global utils:false, setConfigValues: false, apiFailure: false */
var dhcpLeaesTable = null;
@@ -204,3 +204,24 @@ function delLease(ip) {
console.log(exception); // eslint-disable-line no-console
});
}
function fillDHCPhosts(data) {
$("#dhcp-hosts").val(data.value.join("\n"));
}
function processDHCPConfig() {
$.ajax({
url: "/api/config/dhcp?detailed=true",
})
.done(function (data) {
fillDHCPhosts(data.config.dhcp.hosts);
setConfigValues("dhcp", "dhcp", data.config.dhcp);
})
.fail(function (data) {
apiFailure(data);
});
}
$(document).ready(function () {
processDHCPConfig();
});
scripts/pi-hole/js/settings-dns.js
+26 -2
View File
@@ -5,7 +5,7 @@
* This file is copyright under the latest version of the EUPL.
* Please see LICENSE file for your rights under this license. */
/* exported fillDNSupstreams */
/* global applyCheckboxRadioStyle:false, setConfigValues: false, apiFailure: false */
// Remove an element from an array (inline)
function removeFromArray(arr, what) {
@@ -17,7 +17,6 @@ function removeFromArray(arr, what) {
}
}
// eslint-disable-next-line no-unused-vars
function fillDNSupstreams(value, servers) {
var i = 0;
var customServers = value.value.length;
@@ -81,11 +80,36 @@ function fillDNSupstreams(value, servers) {
// Initialize textfield
updateDNSserversTextfield(value.value, customServers);
// Hide the loading animation
$("#dns-upstreams-overlay").hide();
// Apply styling to the new checkboxes
applyCheckboxRadioStyle();
}
// Update the textfield with all (incl. custom) upstream servers
function updateDNSserversTextfield(upstreams, customServers) {
$("#DNSupstreamsTextfield").val(upstreams.join("\n"));
$("#custom-servers-title").text(
"(" + customServers + " custom server" + (customServers === 1 ? "" : "s") + " enabled)"
);
}
function processDNSConfig() {
$.ajax({
url: "/api/config/dns?detailed=true", // We need the detailed output to get the DNS server list
})
.done(function (data) {
// Initialize the DNS upstreams
fillDNSupstreams(data.config.dns.upstreams, data.dns_servers);
setConfigValues("dns", "dns", data.config.dns);
})
.fail(function (data) {
apiFailure(data);
});
}
$(document).ready(function () {
processDNSConfig();
});
scripts/pi-hole/js/settings-system.js
+7 -2
View File
@@ -9,7 +9,7 @@
/* exported updateHostInfo, updateCacheInfo */
var hostinfoTimer = null;
// eslint-disable-next-line no-unused-vars
function updateHostInfo() {
$.ajax({
url: "/api/info/host",
@@ -59,7 +59,7 @@ function setMetrics(data, prefix) {
}
var metricsTimer = null;
// eslint-disable-next-line no-unused-vars
function updateMetrics() {
$.ajax({
url: "/api/info/metrics",
@@ -178,3 +178,8 @@ $(".confirm-disablelogging-noflush").confirm({
cancelButtonClass: "btn-success",
dialogClass: "modal-dialog",
});
$(function () {
updateHostInfo();
updateMetrics();
});
scripts/pi-hole/js/settings.js
+27 -51
View File
@@ -5,49 +5,6 @@
* This file is copyright under the latest version of the EUPL.
* Please see LICENSE file for your rights under this license. */
/* global updateHostInfo:false, updateMetrics:false, createDynamicConfigTabs:false */
$(function () {
updateHostInfo();
updateMetrics();
createDynamicConfigTabs();
});
// Change "?tab=" parameter in URL for save and reload
$(".nav-tabs a").on("shown.bs.tab", function (e) {
var tab = e.target.hash.substring(1);
window.history.pushState("", "", "?tab=" + tab);
window.scrollTo(0, 0);
});
function initSettingsLevel() {
// Restore settings level from local storage (if available) or default to 0
var level = localStorage.getItem("settings-level");
if (level === null) {
level = "0";
}
// Set the settings level
$("#settings-level").val(level);
applySettingsLevel(level);
}
function applySettingsLevel(level) {
if (level === "2") {
$(".settings-level-0").show();
$(".settings-level-1").show();
$(".settings-level-2").show();
} else if (level === "1") {
$(".settings-level-0").show();
$(".settings-level-1").show();
$(".settings-level-2").hide();
} else {
$(".settings-level-0").show();
$(".settings-level-1").hide();
$(".settings-level-2").hide();
}
}
// Handle hiding of alerts
$(function () {
$("[data-hide]").on("click", function () {
@@ -55,12 +12,31 @@ $(function () {
.closest("." + $(this).attr("data-hide"))
.hide();
});
$("#settings-level").on("change", function () {
var level = $(this).val();
applySettingsLevel(level);
localStorage.setItem("settings-level", level);
});
initSettingsLevel();
});
// Globally available function to set config values
// eslint-disable-next-line no-unused-vars
function setConfigValues(topic, key, value) {
// If the value is an object, we need to recurse
if (!("description" in value)) {
Object.keys(value).forEach(function (subkey) {
var subvalue = value[subkey];
setConfigValues(topic, key + "." + subkey, subvalue);
});
return;
}
// else: we have a setting we can set
var escapedKey = key.replace(/\./g, "\\.");
if (value.type === "enum (string)") {
$("#" + escapedKey + "-" + value.value).trigger("click");
} else if (value.type === "boolean") {
// Select checkboxes (if available)
$("#" + escapedKey).prop("checked", value.value);
} else if (
["string", "IPv4 address", "IPv6 address", "integer", "unsigned integer"].includes(value.type)
) {
// Set input field values (if available)
$("#" + escapedKey).val(value.value);
}
}
scripts/pi-hole/php/header_authenticated.php
+19
View File
@@ -9,6 +9,14 @@
*/
require 'header.php';
// Function to check string starting
// with given substring
function startsWith($string, $startString)
{
$len = strlen($startString);
return substr($string, 0, $len) === $startString;
}
?>
<link rel="stylesheet" href="<?php echo fileversion('style/vendor/datatables.min.css'); ?>">
<link rel="stylesheet" href="<?php echo fileversion('style/vendor/datatables_extensions.min.css'); ?>">
@@ -54,6 +62,17 @@ require 'header.php';
</a>
<div class="navbar-custom-menu">
<ul class="nav navbar-nav">
<?php if (startsWith($scriptname, 'settings-')) { ?>
<li class="nav-item">
<p class="navbar-text">
Settings level: <select id="settings-level">
<option value="0">Basic</option>
<option value="1">Advanced</option>
<option value="2">Expert</option>
</select>
</p>
</li>
<?php } ?>
<li<?php echo !$hostname ? ' class="hidden"' : ''; ?>>
<p class="navbar-text">
<span class="hidden-xs">hostname:</span>
scripts/pi-hole/php/sidebar.php
+43 -4
View File
@@ -1,4 +1,3 @@
<!-- Left side column. contains the logo and sidebar -->
<aside class="main-sidebar">
<!-- sidebar: style can be found in sidebar.less -->
@@ -219,10 +218,50 @@
</ul>
</li>
<!-- Settings -->
<li class="menu-system<?php if ($scriptname === 'settings.php') { ?> active<?php } ?>">
<a href="settings.php">
<i class="fa fa-fw menu-icon fa-cog"></i> <span>Settings</span>
<li class="menu-system treeview <?php if (startsWith($scriptname, 'settings-')) { ?> active<?php } ?>">
<a href="#">
<i class="fa fa-fw menu-icon fa-cogs"></i> <span>Settings</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li class="<?php if ($scriptname === 'settings-system.php') { ?> active<?php } ?>">
<a href="settings-system.php">
<i class="fa fa-fw menu-icon fa-cog"></i> System
</a>
</li>
<li class="<?php if ($scriptname === 'settings-dns.php') { ?> active<?php } ?>">
<a href="settings-dns.php">
<i class="fa fa-fw menu-icon fa-cog"></i> DNS
</a>
</li>
<li class="<?php if ($scriptname === 'settings-dhcp.php') { ?> active<?php } ?>">
<a href="settings-dhcp.php">
<i class="fa fa-fw menu-icon fa-cog"></i> DHCP
</a>
</li>
<li class="<?php if ($scriptname === 'settings-api.php') { ?> active<?php } ?>">
<a href="settings-api.php">
<i class="fa fa-fw menu-icon fa-cog"></i> Web interface / API
</a>
</li>
<li class="<?php if ($scriptname === 'settings-privacy.php') { ?> active<?php } ?>">
<a href="settings-privacy.php">
<i class="fa fa-fw menu-icon fa-cog"></i> Privacy
</a>
</li>
<li class="<?php if ($scriptname === 'settings-advanced.php') { ?> active<?php } ?> settings-level-2">
<a href="settings-advanced.php">
<i class="fa fa-fw menu-icon fa-cog"></i> Advanced
</a>
</li>
<li class="<?php if ($scriptname === 'settings-teleporter.php') { ?> active<?php } ?>">
<a href="settings-teleporter.php">
<i class="fa fa-fw menu-icon fa-cog"></i> Teleporter
</a>
</li>
</ul>
</li>
<!-- Donate button -->