web/groups-clients.lp

<? --[[
*  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">Client 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-client">
                    <!-- /.card-header -->
                    <div class="card-header">
                        <h3 class="card-title">
                            Add a new client
                        </h3>
                    </div>
                    <!-- /.card-header -->
                    <div class="card-body">
                        <div class="row">
                            <div class="form-group col-md-6">
                                <label for="select">Known clients:</label>
                                <select id="select" class="form-control" placeholder="">
                                    <option disabled selected>Loading...</option>
                                </select>
                            </div>
                            <div class="form-group col-lg-3 col-md-6">
                                <label for="new_comment">Comment:</label>
                                <input id="new_comment" type="text" class="form-control" placeholder="Client description (optional)">
                            </div>
                            <div class="form-group 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 class="row">
                            <div class="col-md-12">
                                <p>You can select an existing client or add a custom one by typing into the field above and confirming your entry with <kbd>ENTER</kbd>.
                                Multiple clients can be added by separating each client with a space or comma. Clients may be described either by their</p>
                                <ol>
                                    <li>IP addresses (IPv4 and IPv6 are supported),</li>
                                    <li>IP subnets (CIDR notation, like <code>192.168.2.0/24</code>), their</li>
                                    <li>MAC addresses (like <code>12:34:56:78:9A:BC</code>), by their</li>
                                    <li>hostnames (like <code>localhost</code>), or by the</li>
                                    <li>interface they are connected to (prefaced with a colon, like <code>:eth0</code>).</li>
                                </ol>
                                <p>The first match (from top to down) wins. Note that client recognition by host name or interface recognition as
                                the two latter may only be available after some time. Furthermore, MAC address recognition only works for devices at most one networking hop away from your Pi-hole.</p>
                            </div>
                        </div>
                    </div>
                    <div class="card-footer">
                        <button type="button" id="btnAdd" class="btn btn-primary float-end">Add</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="card" id="clients-list">
                    <div class="card-header">
                        <h3 class="card-title">
                            List of configured clients
                        </h3>
                    </div>
                    <!-- /.card-header -->
                    <div class="card-body">
                        <table id="clientsTable" class="table table-striped table-bordered" width="100%">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th></th>
                                    <th title="Acceptable values are: IP address, subnet (CIDR notation), MAC address (AA:BB:CC:DD:EE:FF format) or host names.">Client</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>
                <!-- /.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/ip-address-sorting.js')?>"></script>
<script src="<?=pihole.fileversion('scripts/js/groups-common.js')?>"></script>
<script src="<?=pihole.fileversion('scripts/js/groups-clients.js')?>"></script>

<? mg.include('scripts/lua/footer.lp','r')?>