mirror of
https://github.com/ND-Framework/ND_Core.git
synced 2026-08-17 05:56:01 +01:00
feat: admin group panel
This commit is contained in:
Andyyy7666
283
ui/main.js
Normal file
283
ui/main.js
Normal file
@@ -0,0 +1,283 @@
|
||||
import van from "https://cdn.jsdelivr.net/gh/vanjs-org/van/public/van-1.5.3.min.js";
|
||||
import { nuiMessage } from "./modules/listener.js";
|
||||
import { fetchCallback } from "./modules/fetch.js";
|
||||
import { closeUI, setOpen } from "./modules/close.js";
|
||||
|
||||
const { div, h1, h2, h3, p, button, input, label, span, i: icon } = van.tags;
|
||||
|
||||
let groups = [];
|
||||
let container = null;
|
||||
let editPanel = null;
|
||||
let currentEdit = null;
|
||||
|
||||
function createGroupCard(group) {
|
||||
const card = div({ class: "group-card", onclick: () => openEditPanel(group) },
|
||||
div({ class: "group-card-header" },
|
||||
h3(group.label),
|
||||
span({ class: "group-name" }, group.name)
|
||||
),
|
||||
div({ class: "group-card-tags" },
|
||||
group.isJob ? span({ class: "tag tag-job" }, "Job") : null,
|
||||
span({ class: "tag tag-ranks" }, `${group.ranks.length} rank${group.ranks.length !== 1 ? "s" : ""}`)
|
||||
)
|
||||
);
|
||||
return card;
|
||||
}
|
||||
|
||||
function renderGroupList() {
|
||||
if (!container) return;
|
||||
container.innerHTML = "";
|
||||
|
||||
const header = div({ class: "list-header" },
|
||||
h1("Group Management"),
|
||||
button({ class: "btn btn-create", onclick: () => openCreatePanel() },
|
||||
icon({ class: "fa-solid fa-plus" }),
|
||||
" New Group"
|
||||
)
|
||||
);
|
||||
container.appendChild(header);
|
||||
|
||||
const searchRow = div({ class: "search-row" },
|
||||
input({ class: "search-input", type: "text", placeholder: "Search groups...", oninput: (e) => filterGroups(e.target.value) })
|
||||
);
|
||||
container.appendChild(searchRow);
|
||||
|
||||
const grid = div({ class: "group-grid", id: "group-grid" });
|
||||
groups.forEach(g => grid.appendChild(createGroupCard(g)));
|
||||
container.appendChild(grid);
|
||||
}
|
||||
|
||||
function filterGroups(query) {
|
||||
const grid = document.getElementById("group-grid");
|
||||
if (!grid) return;
|
||||
grid.innerHTML = "";
|
||||
const lower = query.toLowerCase();
|
||||
const filtered = groups.filter(g => g.name.toLowerCase().includes(lower) || g.label.toLowerCase().includes(lower));
|
||||
filtered.forEach(g => grid.appendChild(createGroupCard(g)));
|
||||
}
|
||||
|
||||
function createRankRow(rank, index, ranksList) {
|
||||
const row = div({ class: "rank-row", "data-index": index },
|
||||
div({ class: "rank-order" },
|
||||
button({ class: "btn-icon", title: "Move up", onclick: () => moveRank(ranksList, index, -1) },
|
||||
icon({ class: "fa-solid fa-chevron-up" })
|
||||
),
|
||||
span({ class: "rank-weight" }, String(rank.weight)),
|
||||
button({ class: "btn-icon", title: "Move down", onclick: () => moveRank(ranksList, index, 1) },
|
||||
icon({ class: "fa-solid fa-chevron-down" })
|
||||
)
|
||||
),
|
||||
input({ class: "rank-label-input", type: "text", value: rank.label, placeholder: "Rank label", oninput: (e) => {
|
||||
ranksList[index].label = e.target.value;
|
||||
}}),
|
||||
div({ class: "rank-boss-toggle" },
|
||||
label({ class: "checkbox-label" },
|
||||
input({ type: "checkbox", checked: rank.isBoss, onchange: (e) => {
|
||||
ranksList[index].isBoss = e.target.checked;
|
||||
}}),
|
||||
" Boss"
|
||||
)
|
||||
),
|
||||
button({ class: "btn-icon btn-danger", title: "Delete rank", onclick: () => {
|
||||
ranksList.splice(index, 1);
|
||||
recalculateWeights(ranksList);
|
||||
rerenderRanks(ranksList);
|
||||
}},
|
||||
icon({ class: "fa-solid fa-trash" })
|
||||
)
|
||||
);
|
||||
return row;
|
||||
}
|
||||
|
||||
function moveRank(ranksList, index, direction) {
|
||||
const newIndex = index + direction;
|
||||
if (newIndex < 0 || newIndex >= ranksList.length) return;
|
||||
const temp = ranksList[index];
|
||||
ranksList[index] = ranksList[newIndex];
|
||||
ranksList[newIndex] = temp;
|
||||
recalculateWeights(ranksList);
|
||||
rerenderRanks(ranksList);
|
||||
}
|
||||
|
||||
function recalculateWeights(ranksList) {
|
||||
for (let i = 0; i < ranksList.length; i++) {
|
||||
ranksList[i].weight = i + 1;
|
||||
}
|
||||
}
|
||||
|
||||
function rerenderRanks(ranksList) {
|
||||
const ranksContainer = document.getElementById("ranks-container");
|
||||
if (!ranksContainer) return;
|
||||
ranksContainer.innerHTML = "";
|
||||
ranksList.forEach((rank, idx) => {
|
||||
ranksContainer.appendChild(createRankRow(rank, idx, ranksList));
|
||||
});
|
||||
}
|
||||
|
||||
function openEditPanel(group) {
|
||||
currentEdit = JSON.parse(JSON.stringify(group));
|
||||
showEditPanel(false);
|
||||
}
|
||||
|
||||
function openCreatePanel() {
|
||||
currentEdit = { name: "", label: "", isJob: false, ranks: [] };
|
||||
showEditPanel(true);
|
||||
}
|
||||
|
||||
function showEditPanel(isNew) {
|
||||
if (!editPanel) return;
|
||||
editPanel.innerHTML = "";
|
||||
editPanel.classList.add("open");
|
||||
|
||||
const ranksList = currentEdit.ranks.map(r => ({ ...r }));
|
||||
|
||||
const panelContent = div({ class: "edit-content" },
|
||||
div({ class: "edit-header" },
|
||||
h2(isNew ? "Create Group" : "Edit Group"),
|
||||
button({ class: "btn-icon", onclick: () => closeEditPanel() },
|
||||
icon({ class: "fa-solid fa-xmark" })
|
||||
)
|
||||
),
|
||||
div({ class: "edit-form" },
|
||||
div({ class: "form-group" },
|
||||
label("Name (unique key)"),
|
||||
input({
|
||||
class: "form-input",
|
||||
type: "text",
|
||||
value: currentEdit.name,
|
||||
disabled: !isNew,
|
||||
placeholder: "e.g. polis",
|
||||
oninput: (e) => { currentEdit.name = e.target.value.toLowerCase().replace(/[^a-z0-9_-]/g, ""); e.target.value = currentEdit.name; }
|
||||
})
|
||||
),
|
||||
div({ class: "form-group" },
|
||||
label("Label"),
|
||||
input({
|
||||
class: "form-input",
|
||||
type: "text",
|
||||
value: currentEdit.label,
|
||||
placeholder: "e.g. Polis",
|
||||
oninput: (e) => { currentEdit.label = e.target.value; }
|
||||
})
|
||||
),
|
||||
div({ class: "form-group form-row" },
|
||||
label({ class: "checkbox-label" },
|
||||
input({
|
||||
type: "checkbox",
|
||||
checked: currentEdit.isJob,
|
||||
onchange: (e) => { currentEdit.isJob = e.target.checked; }
|
||||
}),
|
||||
" Is Job"
|
||||
)
|
||||
),
|
||||
div({ class: "form-group" },
|
||||
div({ class: "ranks-header" },
|
||||
h3("Ranks"),
|
||||
button({ class: "btn btn-small", onclick: () => {
|
||||
ranksList.push({ label: "", weight: ranksList.length + 1, isBoss: false });
|
||||
rerenderRanks(ranksList);
|
||||
}},
|
||||
icon({ class: "fa-solid fa-plus" }),
|
||||
" Add Rank"
|
||||
)
|
||||
),
|
||||
div({ class: "ranks-info" },
|
||||
p("Rank 1 is the lowest. Higher weight = higher rank. Boss ranks grant boss permissions.")
|
||||
),
|
||||
div({ id: "ranks-container", class: "ranks-container" })
|
||||
)
|
||||
),
|
||||
div({ class: "edit-actions" },
|
||||
!isNew ? button({ class: "btn btn-danger", onclick: () => deleteGroup(currentEdit.name) },
|
||||
icon({ class: "fa-solid fa-trash" }),
|
||||
" Delete Group"
|
||||
) : null,
|
||||
div({ class: "edit-actions-right" },
|
||||
button({ class: "btn btn-secondary", onclick: () => closeEditPanel() }, "Cancel"),
|
||||
button({ class: "btn btn-primary", onclick: () => saveGroup(isNew, ranksList) },
|
||||
icon({ class: "fa-solid fa-floppy-disk" }),
|
||||
" Save"
|
||||
)
|
||||
)
|
||||
)
|
||||
);
|
||||
|
||||
editPanel.appendChild(panelContent);
|
||||
rerenderRanks(ranksList);
|
||||
}
|
||||
|
||||
function closeEditPanel() {
|
||||
if (!editPanel) return;
|
||||
editPanel.classList.remove("open");
|
||||
editPanel.innerHTML = "";
|
||||
currentEdit = null;
|
||||
}
|
||||
|
||||
function saveGroup(isNew, ranksList) {
|
||||
if (!currentEdit.name || !currentEdit.label) return;
|
||||
|
||||
const ranks = ranksList.map((r, idx) => ({
|
||||
label: r.label,
|
||||
weight: idx + 1,
|
||||
isBoss: r.isBoss
|
||||
}));
|
||||
|
||||
if (isNew) {
|
||||
fetchCallback("groups:create", {
|
||||
name: currentEdit.name,
|
||||
label: currentEdit.label,
|
||||
isJob: currentEdit.isJob,
|
||||
ranks: ranks
|
||||
}, (result) => {
|
||||
if (result && result.success) {
|
||||
groups = result.groups || groups;
|
||||
renderGroupList();
|
||||
closeEditPanel();
|
||||
}
|
||||
});
|
||||
} else {
|
||||
fetchCallback("groups:edit", {
|
||||
name: currentEdit.name,
|
||||
label: currentEdit.label,
|
||||
isJob: currentEdit.isJob,
|
||||
ranks: ranks
|
||||
}, (result) => {
|
||||
if (result && result.success) {
|
||||
groups = result.groups || groups;
|
||||
renderGroupList();
|
||||
closeEditPanel();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function deleteGroup(name) {
|
||||
if (!name) return;
|
||||
fetchCallback("groups:delete", { name: name }, (result) => {
|
||||
if (result && result.success) {
|
||||
groups = result.groups || groups;
|
||||
renderGroupList();
|
||||
closeEditPanel();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function init() {
|
||||
container = div({ class: "main-page" });
|
||||
editPanel = div({ class: "edit-panel" });
|
||||
document.body.appendChild(container);
|
||||
document.body.appendChild(editPanel);
|
||||
}
|
||||
|
||||
nuiMessage("groups:open", (info) => {
|
||||
setOpen(true);
|
||||
document.body.style.opacity = "1";
|
||||
groups = info.groups || [];
|
||||
renderGroupList();
|
||||
});
|
||||
|
||||
nuiMessage("groups:close", () => {
|
||||
closeUI();
|
||||
});
|
||||
|
||||
init();
|
||||
Reference in New Issue
Block a user