mirror of
https://github.com/TakeusV1/flask_ipam.git
synced 2026-10-13 17:15:33 +02:00
V1.0
This commit is contained in:
Takeus committed
1 parent
9f9f90422a
commit
4870f0b089
12 files changed
+433
-68
No files matched your search
@@ -0,0 +1 @@
|
||||
<footer class="test-center" style="text-align: center;">Flask IPAM - 2025 - {{app_version}}</footer>
|
||||
@@ -1,3 +1,31 @@
|
||||
{% if modal.modal_type == 'form' %}
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<form method="post" action="{{modal.form_url}}{% if pagination_active %}?page={{old_page}}{%endif%}">
|
||||
{{ form.csrf_token }}
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title text-{{modal.color}}">{{ modal.title }}</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>
|
||||
{{ modal.body|safe }}<br><br>
|
||||
{% for entry in form %}
|
||||
{% if entry.id != 'csrf_token' %}
|
||||
{{ entry.label(class="form-label") }}<br>
|
||||
{{ entry(class="form-control") }}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
||||
<button type="submit" class="btn btn-{{modal.color}}">{{modal.action_text}}</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
@@ -9,11 +37,8 @@
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
||||
{% if modal.action == 'delete' %}
|
||||
<a href="{{modal.action_url}}?page={{old_page}}" class="btn btn-{{modal.color}}">{{modal.action_text}}</a>
|
||||
{% else %}
|
||||
<button type="button" class="btn btn-primary">Save changes</button>
|
||||
{% endif %}
|
||||
<a href="{{modal.action_url}}{% if pagination_active %}?page={{old_page}}{%endif%}" class="btn btn-{{modal.color}}">{{modal.action_text}}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
@@ -1,6 +1,6 @@
|
||||
<nav class="navbar navbar-expand-lg bg-dark bg-body-tertiary" data-bs-theme="dark">
|
||||
<nav class="navbar navbar-expand-lg bg-{{navcolor}} bg-body-tertiary" data-bs-theme="dark">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="#">Flask IPAM</a>
|
||||
<a class="navbar-brand" href="">Flask IPAM</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
@@ -13,7 +13,7 @@
|
||||
<a class="nav-link {% if is_networks %}active{% endif %}" href="{{ url_for('base.networks') }}"><i class="bi bi-globe"></i> Network(s)</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" role="button" data-bs-toggle="dropdown" aria-expanded="false"><i class="bi bi-archive-fill"></i> Inventory</a>
|
||||
<a class="nav-link dropdown-toggle disabled" role="button" data-bs-toggle="dropdown" aria-expanded="false"><i class="bi bi-archive-fill"></i> Inventory</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-item" href="#"><i class="bi bi-pc-display"></i> Computers</a></li>
|
||||
<li><a class="dropdown-item" href="#"><i class="bi bi-server"></i> Servers</a></li>
|
||||
@@ -22,15 +22,15 @@
|
||||
<li><a class="dropdown-item" href="#"><i class="bi bi-collection"></i> Others</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
{% if current_user.admin %}
|
||||
{% if current_user.is_admin %}
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="">Admin</a>
|
||||
<a class="nav-link {% if is_admin %}active{% endif %}" href="{{ url_for('admin.home') }}"><i class="bi bi-person-badge"></i> Admin</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
<form class="d-flex" role="search">
|
||||
<div class="d-flex">
|
||||
<a class="btn btn-outline-warning" type="submit" href="{{ url_for('auth.logout') }}">logout</a>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
@@ -32,13 +32,22 @@
|
||||
{% endif %}
|
||||
</td>
|
||||
<td>
|
||||
<a href="" class="btn btn-sm btn-outline-info" style="padding-top:1px;padding-bottom:1px">edit</a>
|
||||
<button
|
||||
hx-get="{{ url_for('base.allocation_edit_modal',net_id=network.id,ipv4=allocation.ipv4) }}?page={{active_page}}"
|
||||
hx-trigger="click"
|
||||
hx-target="#modal-edit"
|
||||
data-bs-toggle="modal"
|
||||
data-bs-target="#modal-edit"
|
||||
class="btn btn-sm btn-outline-info"
|
||||
style="padding-top:1px;padding-bottom:1px"
|
||||
> Edit
|
||||
</button>
|
||||
<button
|
||||
hx-get="{{ url_for('base.allocation_del_modal',net_id=network.id,ipv4=allocation.ipv4) }}?page={{active_page}}"
|
||||
hx-trigger="click"
|
||||
hx-target="#modal-get"
|
||||
hx-target="#modal-del"
|
||||
data-bs-toggle="modal"
|
||||
data-bs-target="#modal-get"
|
||||
data-bs-target="#modal-del"
|
||||
class="btn btn-sm btn-outline-danger"
|
||||
style="padding-top:1px;padding-bottom:1px"
|
||||
> Delete
|
||||
@@ -81,7 +90,16 @@
|
||||
</ul>
|
||||
</nav>
|
||||
<!-- MODAL -->
|
||||
<div id="modal-get"
|
||||
<div id="modal-del"
|
||||
class="modal modal-blur fade"
|
||||
style="display: none"
|
||||
aria-hidden="false"
|
||||
tabindex="-1">
|
||||
<div class="modal-dialog modal-lg modal-dialog-centered" role="document">
|
||||
<div class="modal-content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="modal-edit"
|
||||
class="modal modal-blur fade"
|
||||
style="display: none"
|
||||
aria-hidden="false"
|
||||
|
||||
@@ -5,44 +5,87 @@
|
||||
<div class="row">
|
||||
<!-- NETWORKS -->
|
||||
<div class="col-3">
|
||||
<div class="card text-bg-info mb-3">
|
||||
<div class="card-header"><i class="bi bi-globe"></i> Total Networks</div>
|
||||
<a href="{{ url_for('base.networks') }}" class="card text-bg-info mb-3 text-decoration-none">
|
||||
<div class="card-header"><i class="bi bi-globe"></i> <b>Total Networks</b></div>
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Primary card title</h5>
|
||||
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
||||
<h1 class="card-title text-center">{{db_networks}}</h1>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<!-- TOTAL IP -->
|
||||
<div class="col-3">
|
||||
<div class="card text-bg-primary mb-3">
|
||||
<div class="card-header"><i class="bi bi-broadcast-pin"></i> Total Allocations</div>
|
||||
<a href="{{ url_for('base.networks') }}" class="card text-bg-secondary mb-3 text-decoration-none" style="margin-bottom:1vh;">
|
||||
<div class="card-header"><i class="bi bi-broadcast-pin"></i> <b>Total Allocations</b></div>
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Primary card title</h5>
|
||||
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
||||
<h1 class="card-title text-center">{{db_allocations}} / {{ available_alloc }}</h1>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<!-- TOTAL Inventory -->
|
||||
<div class="col-3">
|
||||
<div class="card text-bg-secondary mb-3">
|
||||
<div class="card-header"><i class="bi bi-archive"></i> Total Inventory</div>
|
||||
<a class="card text-bg-secondary mb-3 text-decoration-none">
|
||||
<div class="card-header"><i class="bi bi-archive"></i> <b>Total Inventory</b></div>
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Primary card title</h5>
|
||||
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
||||
<h1 class="card-title text-center">{{db_inventory}}</h1>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<!-- Total Users -->
|
||||
<div class="col-3">
|
||||
<div class="card text-bg-secondary mb-3">
|
||||
<div class="card-header"><i class="bi bi-people"></i> Total Users</div>
|
||||
<a class="card text-bg-primary mb-3 text-decoration-none">
|
||||
<div class="card-header"><i class="bi bi-people"></i> <b>Total Users</b></div>
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Primary card title</h5>
|
||||
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
||||
<h1 class="card-title text-center">{{ db_users }}</h1>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="row">
|
||||
<div class="col-2"></div>
|
||||
<div class="col-4">
|
||||
<canvas id="allocchart"></canvas>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<canvas id="deviceschart"></canvas>
|
||||
</div>
|
||||
<div class="col-2"></div>
|
||||
</div>
|
||||
<hr>
|
||||
{% include 'panel/_footer.html' %}
|
||||
</div>
|
||||
<script src="{{ url_for('static',filename='js/chart.umd.min.js') }}"></script>
|
||||
<script>
|
||||
/* Allocations Chart */
|
||||
const ctx = document.getElementById('allocchart');
|
||||
var ip_max = JSON.parse('{{ available_alloc | tojson }}');
|
||||
var ip_min = JSON.parse('{{ db_allocations | tojson }}');
|
||||
new Chart(ctx, {
|
||||
type: 'doughnut',
|
||||
data: {
|
||||
labels: ['Reserved', 'Available'],
|
||||
datasets: [{
|
||||
label: 'IP Addresses',
|
||||
data: [ip_min, ip_max],
|
||||
borderWidth: 2
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
}
|
||||
});
|
||||
/* Devices Chart */
|
||||
const ctx1 = document.getElementById('deviceschart');
|
||||
new Chart(ctx1, {
|
||||
type: 'doughnut',
|
||||
data: {
|
||||
labels: ['Computers', 'Servers', 'VM', 'Network Devices', 'Others'],
|
||||
datasets: [{
|
||||
data: [1, 1, 1, 1, 1],
|
||||
borderWidth: 2
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
}
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
Reference in new issue
Block a user