web/groups.lp at 71bdc8b31847bc0c348463fb37c8491d391466f1 · pi-hole/web · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<? --[[
*  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">Group management</h1>
            </div>
        </div>
    </div>
</div>

<div class="app-content">
    <div class="container-fluid">
        <!-- Group 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 group
                        </h3>
                    </div>
                    <!-- /.card-header -->
                    <div class="card-body">
                        <div class="row">
                            <div class="form-group col-md-6">
                                <label for="new_name">Name:</label>
                                <input id="new_name" type="text" class="form-control" placeholder="Group name">
                            </div>
                            <div class="form-group col-md-6">
                                <label for="new_comment">Comment:</label>
                                <input id="new_comment" type="text" class="form-control" placeholder="Group comment (optional)">
                            </div>
                        </div>
                    </div>
                    <div class="card-footer">
                        <strong>Hints:</strong>
                        <ol>
                            <li>Multiple groups can be added by separating each group name with a space or comma</li>
                            <li>Group names can have spaces if entered in quotes. e.g "My New Group"</li>
                        </ol>
                        <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="groups-list">
                    <div class="card-header">
                        <h3 class="card-title">
                            List of groups
                        </h3>
                    </div>
                    <!-- /.card-header -->
                    <div class="card-body">
                        <table id="groupsTable" class="table table-striped table-bordered" width="100%">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th></th>
                                    <th>Name</th>
                                    <th>Status</th>
                                    <th>Comment</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/bootstrap-multiselect/bootstrap-multiselect.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.js')?>"></script>

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