mirror/netbox-community-netbox
1
0
Fork 0
mirror of https://github.com/netbox-community/netbox.git synced 2024-05-10 07:54:54 +00:00
Code Activity

Closes #12119: Lock & unlock dashboard layout

Browse Source
This commit is contained in:
jeremystretch
2023-04-05 09:59:22 -04:00
parent 29fbe6e4ee
commit f44a2ba0ee
4 changed files with 71 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
netbox/project-static/dist/netbox.js vendored
View File

File diff suppressed because one or more lines are too long

2
netbox/project-static/dist/netbox.js.map vendored
View File

File diff suppressed because one or more lines are too long

32
netbox/project-static/src/dashboard.ts
View File

@ -2,6 +2,20 @@ import { GridStack, GridStackOptions, GridStackWidget } from 'gridstack';
import { createToast } from './bs';
import { apiPatch, hasError } from './util';
function lockDashboard(): void {
const dashboard = document.getElementById('dashboard') as any;
if (dashboard) {
dashboard.gridstack.disable();
}
}
function unlockDashboard(): void {
const dashboard = document.getElementById('dashboard') as any;
if (dashboard) {
dashboard.gridstack.enable();
}
}
async function saveDashboardLayout(
url: string,
gridData: GridStackWidget[] | GridStackOptions,
@ -22,6 +36,8 @@ export function initDashboard(): void {
// Initialize the grid
let grid = GridStack.init({
cellHeight: 100,
disableDrag: true,
disableResize: true,
draggable: {
handle: '.grid-stack-item-content .card-header',
appendTo: 'body',
@ -29,6 +45,22 @@ export function initDashboard(): void {
}
});
// Create a listener for the dashboard lock button
const gridLockButton = document.getElementById('lock_dashboard') as HTMLButtonElement;
if (gridLockButton) {
gridLockButton.addEventListener('click', () => {
lockDashboard();
});
}
// Create a listener for the dashboard unlock button
const gridUnlockButton = document.getElementById('unlock_dashboard') as HTMLButtonElement;
if (gridUnlockButton) {
gridUnlockButton.addEventListener('click', () => {
unlockDashboard();
});
}
// Create a listener for the dashboard save button
const gridSaveButton = document.getElementById('save_dashboard') as HTMLButtonElement;
if (gridSaveButton === null) {

50
netbox/templates/home.html
View File

@ -29,25 +29,39 @@
{% include 'extras/dashboard/widget.html' %}
{% endfor %}
</div>
<div class="d-flex px-3">
<div class="flex-grow-1">
<a href="#"
hx-get="{% url 'extras:dashboardwidget_add' %}"
hx-target="#htmx-modal-content"
data-bs-toggle="modal"
data-bs-target="#htmx-modal"
class="btn btn-success btn-sm"
>
<i class="mdi mdi-plus"></i> Add Widget
</a>
<div class="collapse multi-collapse show">
<div class="d-flex px-3">
<div class="flex-grow-1">
<button type="button" id="unlock_dashboard" class="btn btn-light btn-sm" data-bs-toggle="collapse" data-bs-target=".multi-collapse">
<i class="mdi mdi-lock-open-outline"></i> Unlock Dashboard
</button>
</div>
</div>
<div>
<button id="save_dashboard" class="btn btn-primary btn-sm" data-url="{% url 'extras-api:dashboard' %}">
<i class="mdi mdi-content-save-outline"></i> Save Layout
</button>
<a href="{% url 'extras:dashboard_reset' %}" class="btn btn-danger btn-sm">
<i class="mdi mdi-backspace"></i> Reset Dashboard
</a>
</div>
<div class="collapse multi-collapse">
<div class="d-flex px-3">
<div class="flex-grow-1">
<button type="button" id="lock_dashboard" class="btn btn-light btn-sm" data-bs-toggle="collapse" data-bs-target=".multi-collapse">
<i class="mdi mdi-lock-outline"></i> Lock Dashboard
</button>
</div>
<div>
<a href="#"
hx-get="{% url 'extras:dashboardwidget_add' %}"
hx-target="#htmx-modal-content"
data-bs-toggle="modal"
data-bs-target="#htmx-modal"
class="btn btn-success btn-sm"
>
<i class="mdi mdi-plus"></i> Add Widget
</a>
<button id="save_dashboard" class="btn btn-primary btn-sm" data-url="{% url 'extras-api:dashboard' %}">
<i class="mdi mdi-content-save-outline"></i> Save Layout
</button>
<a href="{% url 'extras:dashboard_reset' %}" class="btn btn-danger btn-sm">
<i class="mdi mdi-backspace"></i> Reset Dashboard
</a>
</div>
</div>
</div>
{% endblock content-wrapper %}