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.

Sign up for GitHub

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

Tweak "Web Interface - API" settings page #3044

Merged
merged 2 commits into from
Jun 5, 2024
Merged

Tweak "Web Interface - API" settings page #3044

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1ba4e57
Simplify structure and reorder some boxes
rdwebdesign Jun 4, 2024
5ceb046
Move temperature options to the Theme box (they are not advanced opti…
rdwebdesign Jun 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
174 changes: 92 additions & 82 deletions settings-api.lp
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,85 +15,60 @@ mg.include('scripts/pi-hole/lua/settings_header.lp','r')
?>
<div class="row">
<div class="col-md-6 settings-level-basic">
<div class="row">
<div class="col-md-12 settings-level-expert">
<div class="box box-warning">
<div class="box-header with-border">
<h3 class="box-title" data-configkeys="webserver.api.excludeDomains webserver.api.excludeClients">Exclusions</h3>
</div>
<div class="box-body">
<div class="row">
<div class="col-md-6">
<p><strong>Domains to be excluded from Top Domain Lists and Query Log</strong></p>
<textarea class="form-control field-sizing-content" rows="4" id="webserver.api.excludeDomains" data-key="webserver.api.excludeDomains" placeholder="Enter regex domains, one per line" style="resize: vertical;"></textarea>
<p class="help-block">Domains may be described by their domain name (like <code>^example\.com$</code>)</p>
</div>
<div class="col-md-6">
<p><strong>Clients to be excluded from Top Client Lists and Query Log </strong></p>
<textarea class="form-control field-sizing-content" rows="4" id="webserver.api.excludeClients" data-key="webserver.api.excludeClients" placeholder="Enter regex clients, one per line" style="resize: vertical;"></textarea>
<p class="help-block">Clients may be described either by their IP addresses (IPv4 and IPv6 are supported), or hostnames (like <code>^laptop\.lan$</code>).</p>
<div class="box box-warning">
<div class="box-header with-border">
<h3 class="box-title" data-configkeys="webserver.interface.theme webserver.interface.boxed">Theme settings</h3>
</div>
<div class="box-body">
<div class="row">
<div class="col-lg-12">
<div class="row form-group">
<div class="col-sm-3">
<label for="webserver.interface.theme">Theme:</label>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p><strong>Important</strong>:<br>Those input fields accept regex entries only.<br>Please refer to <a href="https://docs.pi-hole.net/regex/tutorial/" rel="noopener" target="_blank">our guide</a> how to construct valid regex entries.
<div class="col-sm-9">
<select id="webserver.interface.theme" data-key="webserver.interface.theme" class="form-control" placeholder="">
<option disabled selected>Loading...</option>
</select>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-12 settings-level-basic">
<div class="box box-warning">
<div class="box-header with-border">
<h3 class="box-title" data-configkeys="webserver.interface.theme webserver.interface.boxed">Theme settings</h3>
</div>
<div class="box-body">
<div class="row">
<div class="col-lg-12">
<div class="row form-group">
<div class="col-lg-3">
<label for="webserver.interface.theme">Used theme:</label>
</div>
<div class="col-md-9">
<select id="webserver.interface.theme" data-key="webserver.interface.theme" class="form-control" placeholder="">
<option disabled selected>Loading...</option>
</select>
</div>
</div>
<div class="col-lg-12">
<div class="row form-group">
<div class="col-sm-12">
<div>
<input type="checkbox" id="webserver.interface.boxed" data-key="webserver.interface.boxed">
<label for="webserver.interface.boxed"><strong>Should the web interface use the boxed layout?</strong></label>
<label for="webserver.interface.boxed"><strong>Use the boxed layout</strong></label>
<p class="help-block">The boxed layout is helpful when working on large screens because it prevents the site from stretching very wide.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div><!-- TODO: Why is this commented out?
<div class="col-md-6">
<div class="box box-warning">
<div class="box-header with-border">
<h3 class="box-title">Query Log</h3>
</div>
<div class="box-body">
<div class="row">
<div class="col-lg-12">
<div>
<input type="checkbox" name="querylog-permitted" id="querylog-permitted" <? if queryLog == 'permittedonly' or queryLog == 'all' then ?>checked<? end ?>>
<label for="querylog-permitted"><strong>Show permitted domain entries</strong></label>
<p class="help-block"><span class="text-red">This will show all permitted domain entries in the query log.</span></p>
<div class="row form-group">
<div class="col-sm-6">
<label for="webserver.api.temp.limit"><strong>Temperature limit for "hot":</strong></label>
</div>
<div class="col-sm-6">
<input class="form-control" type="number" data-type="integer" id="webserver.api.temp.limit" data-key="webserver.api.temp.limit">
</div>
</div>
<div>
<input type="checkbox" name="querylog-blocked" id="querylog-blocked" <? if queryLog == 'blockedonly' or queryLog == 'all' then ?>checked<? end ?>>
<label for="querylog-blocked"><strong>Show blocked domain entries</strong></label>
<p class="help-block"><span class="text-red">This will show all blocked domain entries in the query log.</span></p>
<div class="row form-group">
<div class="col-sm-6">
<label for="webserver.api.temp.unit">Temperature unit:</label>
</div>
<div class="col-sm-6">
<select id="webserver.api.temp.unit" data-key="webserver.api.temp.unit" class="form-control" placeholder="">
<option disabled selected>Loading...</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
</div>-->
</div>

<div class="col-md-6 settings-level-expert">
<div class="box box-warning">
<div class="box-header with-border">
Expand Down Expand Up @@ -122,26 +97,6 @@ mg.include('scripts/pi-hole/lua/settings_header.lp','r')
<p class="help-block">This will allow clients to perform destructive actions via the API, such as rebooting or shutting down the system Pi-hole is running on.</p>
</div>
</div>
<div class="col-lg-12">
<div class="row form-group">
<div class="col-sm-6">
<label for="webserver.api.temp.limit"><strong>Temperature limit for "hot":</strong></label>
</div>
<div class="col-sm-6">
<input class="form-control" type="number" data-type="integer" id="webserver.api.temp.limit" data-key="webserver.api.temp.limit">
</div>
</div>
<div class="row form-group">
<div class="col-sm-6">
<label for="webserver.api.temp.unit">Temperature unit:</label>
</div>
<div class="col-sm-6">
<select id="webserver.api.temp.unit" data-key="webserver.api.temp.unit" class="form-control" placeholder="">
<option disabled selected>Loading...</option>
</select>
</div>
</div>
</div>
<div class="col-lg-12 pt-3">
<button type="button" id="button-enable-totp" class="btn btn-success hidden" data-toggle="modal" data-target="#modal-totp">Enable 2FA</button>
<button type="button" id="button-disable-totp" class="btn btn-danger hidden" data-toggle="modal" data-target="#modal-totp-disable">Disable 2FA</button>
Expand All @@ -151,6 +106,61 @@ mg.include('scripts/pi-hole/lua/settings_header.lp','r')
</div>
</div>
</div>
</div>

<div class="row">
<div class="col-md-12 settings-level-expert">
<div class="box box-warning">
<div class="box-header with-border">
<h3 class="box-title" data-configkeys="webserver.api.excludeDomains webserver.api.excludeClients">Exclusions</h3>
</div>
<div class="box-body">
<div class="row">
<div class="col-md-6">
<p><strong>Domains to be excluded from Top Domain Lists and Query Log</strong></p>
<textarea class="form-control field-sizing-content" rows="4" id="webserver.api.excludeDomains" data-key="webserver.api.excludeDomains" placeholder="Enter regex domains, one per line" style="resize: vertical;"></textarea>
<p class="help-block">Domains may be described by their domain name (like <code>^example\.com$</code>)</p>
</div>
<div class="col-md-6">
<p><strong>Clients to be excluded from Top Client Lists and Query Log </strong></p>
<textarea class="form-control field-sizing-content" rows="4" id="webserver.api.excludeClients" data-key="webserver.api.excludeClients" placeholder="Enter regex clients, one per line" style="resize: vertical;"></textarea>
<p class="help-block">Clients may be described either by their IP addresses (IPv4 and IPv6 are supported), or hostnames (like <code>^laptop\.lan$</code>).</p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p><strong>Important</strong>:<br>Those input fields accept regex entries only.<br>Please refer to <a href="https://docs.pi-hole.net/regex/tutorial/" rel="noopener" target="_blank">our guide</a> how to construct valid regex entries.
</div>
</div>
</div>
</div>
</div>

<!-- TODO: Why is this commented out?
<div class="col-md-6">
<div class="box box-warning">
<div class="box-header with-border">
<h3 class="box-title">Query Log</h3>
</div>
<div class="box-body">
<div class="row">
<div class="col-lg-12">
<div>
<input type="checkbox" name="querylog-permitted" id="querylog-permitted" <? if queryLog == 'permittedonly' or queryLog == 'all' then ?>checked<? end ?>>
<label for="querylog-permitted"><strong>Show permitted domain entries</strong></label>
<p class="help-block"><span class="text-red">This will show all permitted domain entries in the query log.</span></p>
</div>
<div>
<input type="checkbox" name="querylog-blocked" id="querylog-blocked" <? if queryLog == 'blockedonly' or queryLog == 'all' then ?>checked<? end ?>>
<label for="querylog-blocked"><strong>Show blocked domain entries</strong></label>
<p class="help-block"><span class="text-red">This will show all blocked domain entries in the query log.</span></p>
</div>
</div>
</div>
</div>
</div>
</div>-->

<div class="col-md-12 settings-level-expert">
<div class="box box-warning">
<div class="box-header with-border">
Expand Down