tronnet/ProxmoxAAS-Dashboard
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

start implement of admin page

Browse Source
This commit is contained in:
Arthur Lu 2024-10-03 21:02:31 +00:00
parent dc2dcf85cd
commit e2f9f8e352
2 changed files with 195 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
admin.html
View File

@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>proxmox - dashboard</title>
<link rel="icon" href="images/favicon.svg" sizes="any" type="image/svg+xml">
<link rel="stylesheet" href="w3.css">
<link rel="stylesheet" href="modules/w3.css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/nav.css">
@ -25,13 +25,13 @@
</nav>
</header>
<main>
<h2>Cluster Administration</h2>
<h2>Admin</h2>
<section class="w3-card w3-padding">
<div class="flex row nowrap" style="margin-top: 1em; justify-content: space-between;">
<h3>Users</h3>
<button type="button" id="user-add" class="w3-button" aria-label="create new user">
<button type="button" id="user-add" class="w3-button" aria-label="Create New User">
<span class="large" style="margin: 0;">Create User</span>
<svg class="small" style="height: 1lh; width: 1lh;" role="img" aria-label="Create New User"><use xlink:href="images/actions/user/add.svg#symb"></use></svg>
<svg class="small" style="height: 1lh; width: 1lh;" role="img" aria-label="Create New User"><use href="images/actions/user/add.svg#symb"></use></svg>
</button>
</div>
<div>
@ -41,15 +41,15 @@
<p class="w3-col l2 w3-hide-medium w3-hide-small">Admin</p>
<p class="w3-col l2 m4 s6">Actions</p>
</div>
<div id="user-container"></div>
<div id="users-container"></div>
</div>
</section>
<section class="w3-card w3-padding">
<div class="flex row nowrap" style="margin-top: 1em; justify-content: space-between;">
<h3>Groups</h3>
<button type="button" id="group-add" class="w3-button" aria-label="create new group">
<button type="button" id="group-add" class="w3-button" aria-label="Create New Group">
<span class="large" style="margin: 0;">Create Group</span>
<svg class="small" style="height: 1lh; width: 1lh;" role="img" aria-label="Create New Group"><use xlink:href="images/actions/group/add.svg#symb"></use></svg>
<svg class="small" style="height: 1lh; width: 1lh;" role="img" aria-label="Create New Group"><use href="images/actions/group/add.svg#symb"></use></svg>
</button>
</div>
<div>
@ -58,7 +58,7 @@
<p class="w3-col l6 m4 w3-hide-small">Members</p>
<p class="w3-col l2 m4 s6">Actions</p>
</div>
<div id="group-container"></div>
<div id="groups-container"></div>
</div>
</section>
</main>

183
scripts/admin.js
View File

@ -1,8 +1,187 @@
import { setTitleAndHeader, setAppearance } from "./utils.js";
import { setTitleAndHeader, setAppearance, requestAPI, goToPage } from "./utils.js";
window.addEventListener("DOMContentLoaded", init);
function init () {
async function init () {
setAppearance();
setTitleAndHeader();
const cookie = document.cookie;
if (cookie === "") {
goToPage("login.html");
}
document.querySelector("#user-add").addEventListener("click", handleUserAdd);
document.querySelector("#group-add").addEventListener("click", handleGroupAdd);
await getUsers();
await getGroups();
}
async function getUsers () {
const users = (await requestAPI("/access/users")).users;
const usersContainer = document.querySelector("#users-container");
for (const user of Object.keys(users)) {
const newUserCard = document.createElement("user-card");
users[user].username = user;
newUserCard.data = users[user];
usersContainer.append(newUserCard);
}
}
async function getGroups () {
const groups = (await requestAPI("/access/groups")).groups;
const groupsContainer = document.querySelector("#groups-container");
for (const group of Object.keys(groups)) {
const newGroupCard = document.createElement("group-card");
groups[group].groupname = group;
newGroupCard.data = groups[group];
groupsContainer.append(newGroupCard);
}
}
class UserCard extends HTMLElement {
constructor () {
super();
this.attachShadow({ mode: "open" });
this.shadowRoot.innerHTML = `
<link rel="stylesheet" href="modules/w3.css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="css/style.css">
<style>
* {
margin: 0;
}
</style>
<div class="w3-row" style="margin-top: 1em; margin-bottom: 1em;">
<p class="w3-col l4 m4 s6" id="user-name">
<p class="w3-col l4 m4 w3-hide-small" id="user-groups">
<p class="w3-col l2 w3-hide-medium w3-hide-small" id="user-admin">
<div class="w3-col l2 m4 s6 flex row nowrap" style="height: 1lh;">
<svg class="clickable" id="config-btn" role="img" aria-label="Edit User"><use href="images/actions/user/config.svg#symb"></use></svg>
<svg class="clickable" id="delete-btn" role="img" aria-label="Delete User"><use href="images/actions/delete-active.svg#symb"></use></svg>
</div>
</div>
`;
const configButton = this.shadowRoot.querySelector("#config-btn");
configButton.onclick = this.handleConfigButton.bind(this);
const deleteButton = this.shadowRoot.querySelector("#delete-btn");
deleteButton.onclick = this.handleDeleteButton.bind(this);
}
get data () {
return {
username: this.username,
groups: this.groups,
admin: this.admin
};
}
set data (data) {
this.username = data.username;
this.groups = this.#getGroupsFromAttribute(data.attributes.memberOf);
this.admin = data.cluster.admin;
this.update();
}
#getGroupsFromAttribute (attribute) {
return Array.from(attribute, (e) => e.split("cn=")[1].split(",")[0]);
}
update () {
const nameParagraph = this.shadowRoot.querySelector("#user-name");
nameParagraph.innerText = this.username;
const groupsParagraph = this.shadowRoot.querySelector("#user-groups");
groupsParagraph.innerText = `${this.groups.toString()}`;
const adminParagraph = this.shadowRoot.querySelector("#user-admin");
adminParagraph.innerText = this.admin;
}
handleConfigButton () {
goToPage("user.html", { username: this.username });
}
handleDeleteButton () {
// TODO
}
}
class GroupCard extends HTMLElement {
constructor () {
super();
this.attachShadow({ mode: "open" });
this.shadowRoot.innerHTML = `
<link rel="stylesheet" href="modules/w3.css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="css/style.css">
<style>
* {
margin: 0;
}
</style>
<div class="w3-row" style="margin-top: 1em; margin-bottom: 1em;">
<p class="w3-col l4 m4 s6" id="group-name">
<p class="w3-col l6 m4 w3-hide-small" id="group-members">
<div class="w3-col l2 m4 s6 flex row nowrap" style="height: 1lh;">
<svg class="clickable" id="config-btn" role="img" aria-label="Edit User"><use href="images/actions/user/config.svg#symb"></use></svg>
<svg class="clickable" id="delete-btn" role="img" aria-label="Delete User"><use href="images/actions/delete-active.svg#symb"></use></svg>
</div>
</div>
`;
const configButton = this.shadowRoot.querySelector("#config-btn");
configButton.onclick = this.handleConfigButton.bind(this);
const deleteButton = this.shadowRoot.querySelector("#delete-btn");
deleteButton.onclick = this.handleDeleteButton.bind(this);
}
get data () {
return {
groupname: this.groupname,
members: this.members
};
}
set data (data) {
this.groupname = data.groupname;
this.members = this.#getMembersFromAttribute(data.attributes.member);
this.update();
}
#getMembersFromAttribute (attribute) {
const filteredGroups = attribute.filter(e => e !== "");
return Array.from(filteredGroups, (e) => e.split("uid=")[1].split(",")[0]);
}
update () {
const nameParagraph = this.shadowRoot.querySelector("#group-name");
nameParagraph.innerText = this.groupname;
const membersParagraph = this.shadowRoot.querySelector("#group-members");
membersParagraph.innerText = `${this.members.toString()}`;
}
handleConfigButton () {
// TODO
}
handleDeleteButton () {
// TODO
}
}
customElements.define("user-card", UserCard);
customElements.define("group-card", GroupCard);
function handleUserAdd () {
// TODO
}
function handleGroupAdd () {
// TODO
}