Files
web/groups-lists.lp
T
RD WebDesign 8c49b049a2 Many small adjustments
Login page:
- use proper BS5 classes to set margins, padding and text styles;
- use "card card-danger" consistently, for all error messages;
- remove old class and change "show password" button style;
- adjust the footer buttons.

Warning count badge (top bar and sidebar):
- Use the new HTML structure to show sidebar badge
- Use BS5 classes for colors

Dashboard:
- Fix progress bars alignment

Query Log:
- Use the default padding for Advanced filtering card header
- Apply BS5 styles to search fields (table footer)

Domains and Lists (group management):
- Add small gap between buttons

DNS Settings:
- Replace old custom classes with BS5 callout and border-* classes
- Settings DNS interface card

Webserver/API Settings:
- Remove old commented code (leftover from v5)

Local DNS Records Settings:
- Remove double title from both cards

Privacy Settings:
- Fix "Privacy-related database settings" card layout

Gravity page:
- Simplify output element classes

Search Lists:
- Remove unnecessary input-group-btn class

General changes:
- Replace old .form-group class with BS5 .mb-3

Signed-off-by: RD WebDesign <github@rdwebdesign.com.br>
2026-09-27 22:30:54 -03:00

141 lines
7.3 KiB
Lua

<? --[[
* Pi-hole: A black hole for Internet advertisements
* (c) 2019 Pi-hole, LLC (https://pi-hole.net)
* Network-wide ad blocking via your own hardware.
*
* This file is copyright under the latest version of the EUPL.
* Please see LICENSE file for your rights under this license.
--]]
mg.include('scripts/lua/header_authenticated.lp','r')
?>
<!-- Title/Header -->
<div class="app-content-header">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<h1 class="mb-0">Subscribed lists group management</h1>
</div>
</div>
</div>
</div>
<div class="app-content">
<div class="container-fluid">
<!-- Domain Input -->
<div class="row">
<div class="col-md-12">
<div class="card" id="add-group">
<!-- /.card-header -->
<div class="card-header">
<h3 class="card-title">
Add a new subscribed list
</h3>
</div>
<!-- /.card-header -->
<div class="card-body">
<div class="row">
<div class="mb-3 col-md-6">
<label for="new_address">Address:</label>
<input id="new_address" type="text" class="form-control" placeholder="URL" autocomplete="off" spellcheck="false" autocapitalize="none" autocorrect="off">
</div>
<div class="mb-3 col-lg-3 col-md-6">
<label for="new_comment">Comment:</label>
<input id="new_comment" type="text" class="form-control" placeholder="List description (optional)">
</div>
<div class="mb-3 col-lg-3 col-md-6">
<label for="new_group">Group assignment:</label>
<div><select class="group-select" id="new_group" multiple></select></div>
</div>
</div>
</div>
<div class="card-footer">
<strong>Hints:</strong>
<ol>
<li>Please run <code>pihole -g</code> or update your gravity list <a href="<?=webhome?>gravity">online</a> after modifying your lists.</li>
<li>Multiple lists can be added by separating each <em>unique</em> URL with a space or comma</li>
</ol>
<div class="btn-toolbar float-end gap-2" role="toolbar" aria-label="Toolbar with buttons">
<div class="btn-group" role="group">
<button type="button" id="btnAddBlock" class="btn btn-danger float-end">Add blocklist</button>
</div>
<div class="btn-group" role="group">
<button type="button" id="btnAddAllow" class="btn btn-success float-end">Add allowlist</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="card" id="lists-list">
<div class="card-header">
<h3 class="card-title">
Subscribed lists
</h3>
</div><!-- /.card-header -->
<div class="card-body">
<table id="listsTable" class="table table-striped table-bordered" width="100%">
<thead>
<tr>
<th>ID</th>
<th></th>
<th class="no-padding"></th>
<th class="no-padding"></th>
<th>Address</th>
<th>Status</th>
<th>Comment</th>
<th>Group assignment</th>
<th>&nbsp;</th>
</tr>
</thead>
</table>
<button type="button" id="resetButton" class="btn btn-secondary btn-sm text-red hidden">Reset sorting</button>
</div><!-- /.card-body -->
<div class="card-footer">
<div class="row">
<div class="col-12">
<p><strong>Hint:</strong> Click on the icons (first and second columns) to get additional information about your lists. The icons correspond to the health of the list.</p>
</div>
</div>
<div class="row">
<div class="col-sm-12 list-icon-legend-block">
<div class="list-icon-legend">
<p><strong>List Status:</strong></p>
<div>
<span class="fa fa-fw fa-check-circle list-status-1"></span> - List download was successful<br>
<span class="fa fa-fw fa-history list-status-2"></span> - List unchanged upstream, Pi-hole used a local copy<br>
<span class="fa fa-fw fa-exclamation-circle list-status-3"></span> - List unavailable, Pi-hole used a local copy<br>
<span class="fa fa-fw fa-times-circle list-status-4"></span> - List unavailable and no local copy of this list is available<br>
<span class="fa fa-fw fa-question-circle list-status-0"></span> - Unknown<br>
<em>(The status icon turns gray when the list is disabled.)</em>
</div>
</div>
<div class="list-icon-legend">
<p><strong>List Type:</strong></p>
<div>
<span class="fa fa-fw fa-check text-green"></span> - Allow list<br>
<span class="fa fa-fw fa-ban text-red"></span> - Block list
</div>
</div>
</div>
</div>
</div><!-- /.card-footer -->
</div><!-- /.card -->
</div>
</div>
</div><!-- /.container-fluid -->
</div><!-- /.app-content -->
<script src="<?=pihole.fileversion('vendor/tom-select/tom-select.complete.min.js')?>"></script>
<script src="<?=pihole.fileversion('vendor/bootstrap5-toggle/bootstrap5-toggle.jquery.min.js')?>"></script>
<script src="<?=pihole.fileversion('scripts/js/groups-common.js')?>"></script>
<script src="<?=pihole.fileversion('scripts/js/groups-lists.js')?>"></script>
<? mg.include('scripts/lua/footer.lp','r')?>