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

fix search regexp escape,

Browse Source 
wrap chartjs with custom element
This commit is contained in:
Arthur Lu 2023-10-04 18:59:46 +00:00
parent 9d832fea69
commit fb84ca5616
5 changed files with 78 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
account.html
View File

@ -9,6 +9,7 @@
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/nav.css">
<script src="scripts/account.js" type="module"></script>
<script src="scripts/chart.js" type="module"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
@media screen and (width >= 1264px){
@ -18,12 +19,6 @@
grid-gap: 0px;
justify-content: space-between;
}
#resource-container > * {
position: relative;
min-width: 200px;
max-width: 400px;
aspect-ratio: 1 / 1;
}
}
@media screen and (width <= 1264px) and (width >= 480px) {
#resource-container {

81
scripts/account.js
View File

@ -43,68 +43,61 @@ function populateResources (containerID, meta, resources) {
if (meta[resourceType].display) {
if (meta[resourceType].type === "list") {
resources[resourceType].forEach((listResource) => {
const chart = createResourceUsageChart(listResource.name, listResource.avail, listResource.used, listResource.max, null);
container.append(chart);
createResourceUsageChart(container, listResource.name, listResource.avail, listResource.used, listResource.max, null);
});
}
else {
const chart = createResourceUsageChart(meta[resourceType].name, resources[resourceType].avail, resources[resourceType].used, resources[resourceType].max, meta[resourceType]);
container.append(chart);
createResourceUsageChart(container, meta[resourceType].name, resources[resourceType].avail, resources[resourceType].used, resources[resourceType].max, meta[resourceType]);
}
}
});
}
}
function createResourceUsageChart (resourceName, resourceAvail, resourceUsed, resourceMax, resourceUnitData) {
const container = document.createElement("div");
const canvas = document.createElement("canvas");
container.append(canvas);
function createResourceUsageChart (container, resourceName, resourceAvail, resourceUsed, resourceMax, resourceUnitData) {
const chart = document.createElement("custom-chart");
container.append(chart);
const maxStr = parseNumber(resourceMax, resourceUnitData);
const usedStr = parseNumber(resourceUsed, resourceUnitData);
const usedRatio = resourceUsed / resourceMax;
const R = Math.min(usedRatio * 510, 255);
const G = Math.min((1 - usedRatio) * 510, 255);
const usedColor = `rgb(${R}, ${G}, 0)`;
createChart(canvas, {
type: "pie",
data: {
labels: [
"Used",
"Available"
],
datasets: [{
label: resourceName,
data: [resourceUsed, resourceAvail],
backgroundColor: [
usedColor,
"rgb(140, 140, 140)"
chart.data = {
chart: {
type: "pie",
data: {
labels: [
"Used",
"Available"
],
borderWidth: 0,
hoverOffset: 4
}]
},
options: {
plugins: {
title: {
display: true,
position: "bottom",
text: [resourceName, `Used ${usedStr} of ${maxStr}`],
color: "white"
},
legend: {
display: false
datasets: [{
label: resourceName,
data: [resourceUsed, resourceAvail],
backgroundColor: [
usedColor,
"rgb(140, 140, 140)"
],
borderWidth: 0,
hoverOffset: 4
}]
},
options: {
plugins: {
title: {
display: true,
position: "bottom",
text: [resourceName, `Used ${usedStr} of ${maxStr}`],
color: "white"
},
legend: {
display: false
}
}
}
}
});
canvas.role = "img";
canvas.ariaLabel = `${resourceName} used ${usedStr} of ${maxStr}`;
return container;
}
function createChart (ctx, data) {
return new window.Chart(ctx, data);
},
ariaLabel: `${resourceName} used ${usedStr} of ${maxStr}`
};
}
function parseNumber (value, unitData) {

35
scripts/chart.js Normal file
View File

@ -0,0 +1,35 @@
class CustomChart extends HTMLElement {
constructor (data) {
super();
this.attachShadow({ mode: "open" });
this.shadowRoot.innerHTML = `
<style>
div {
min-width: 200px;
max-width: 400px;
aspect-ratio: 1 / 1;
}
</style>
<div>
<canvas>
</div>
`;
this.canvas = this.shadowRoot.querySelector("canvas");
}
set data (data) {
this.canvas.role = "img";
this.canvas.ariaLabel = data.ariaLabel;
createChart(this.canvas, data.chart);
}
get data () {
return null;
}
}
function createChart (ctx, data) {
return new Chart(ctx, data);
}
customElements.define("custom-chart", CustomChart);

2
scripts/draggable.js
View File

@ -5,7 +5,7 @@ const draggableItemUUIDs = {};
* Get the data transfer source object by parsing its types. Valid draggable-item events have one type of the format `application/json/${uuid}`.
* The function takes the entire type list from event.dataTransfer.types and returns the source object if valid, or null if invalid.
* @param {*} typesList from event.dataTransfer.types
* @returns {Object} Object containing the type, uuid, and element of the dataTransfer source or null
* @returns {Object} Object containing the type, uuid, and element of the dataTransfer source or null
*/
function getDragSource (typesList) {
if (typesList.length !== 1) {

6
scripts/instance.js
View File

@ -77,8 +77,10 @@ class InstanceCard extends HTMLElement {
const nameParagraph = this.shadowRoot.querySelector("#instance-name");
if (this.searchQuery) {
const regEscape = v => v.replace("[-[\]{}()*+?.,\\^$|#\s]", "\\$&");
const nameParts = this.name.split(new RegExp(regEscape(`(${this.searchQuery})`), "ig"));
const regExpEscape = v => v.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
const escapedQuery = regExpEscape(this.searchQuery);
const searchRegExp = new RegExp(`(${escapedQuery})`, "gi");
const nameParts = this.name.split(searchRegExp);
for (let i = 0; i < nameParts.length; i++) {
const part = document.createElement("span");
part.innerText = nameParts[i];