Skip to content

Commit 01e73de

Browse files
veniwareveniware
committed
Monitor
1 parent bc7a26d commit 01e73de

File tree

4 files changed

+157
-60
lines changed

4 files changed

+157
-60
lines changed

‎Protest/Front/monitor.css‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,7 @@
8484
max-width: calc(100% - 8px);
8585
box-sizing: border-box;
8686
color: var(--clr-light);
87+
text-shadow: black 0 0 2px;
8788
border-radius: 2px;
8889
font-weight: 600;
8990
font-size: small;
@@ -110,7 +111,7 @@
110111
.monitor-template {
111112
display: inline-block;
112113
vertical-align: top;
113-
width: 125px;
114+
width: 124px;
114115
height: 64px;
115116
line-height: 64px;
116117
padding: 8px;

‎Protest/Front/monitor.js‎

Lines changed: 131 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,8 @@ class Monitor extends Window {
3939
this.AddToolbarSeparator();
4040
this.startButton = this.AddToolbarButton("Start", "mono/play.svg?light");
4141
this.pauseButton = this.AddToolbarButton("Pause", "mono/pause.svg?light");
42+
this.toolbar.appendChild(this.AddToolbarSeparator());
43+
this.AddSendToChatButton();
4244

4345
this.connectButton.disabled = true;
4446
this.startButton.disabled = true;
@@ -278,6 +280,8 @@ class Monitor extends Window {
278280
const dialog = this.DialogBox("calc(100% - 40px)");
279281
if (dialog === null) return;
280282

283+
dialog.innerBox.parentElement.style.maxWidth = "1024px";
284+
281285
const okButton = dialog.okButton;
282286
const innerBox = dialog.innerBox;
283287

@@ -383,12 +387,12 @@ class Monitor extends Window {
383387
maxInput.style.minWidth = "100px";
384388
maxInput.style.maxWidth = "160px";
385389

386-
const attributesDatalistId = "m" + new Date().getTime();
387-
const attributesDatalist = document.createElement("datalist");
388-
attributesDatalist.id = attributesDatalistId;
390+
const propertiesDatalistId = "m" + new Date().getTime();
391+
const propertiesDatalist = document.createElement("datalist");
392+
propertiesDatalist.id = propertiesDatalistId;
389393

390-
valueInput.setAttribute("list", attributesDatalistId);
391-
maxInput.setAttribute("list", attributesDatalistId);
394+
valueInput.setAttribute("list", propertiesDatalistId);
395+
maxInput.setAttribute("list", propertiesDatalistId);
392396

393397
const showPeakInput = document.createElement("input");
394398
showPeakInput.type = "checkbox";
@@ -500,6 +504,7 @@ class Monitor extends Window {
500504
valueInput.value = "value" in options ? options.value : "";
501505
maxInput.value = "max" in options ? options.max : 100;
502506

507+
showPeakInput.checked = options.showPeak;
503508
complementingInput.checked = options.isComplement;
504509
dynamicInput.checked = options.isDynamic;
505510

@@ -595,7 +600,7 @@ class Monitor extends Window {
595600
max: 100,
596601
value: "PercentIdleTime".toLowerCase(),
597602
isComplement: true,
598-
showPeakInput: true
603+
showPeak: true
599604
}
600605
));
601606

@@ -612,7 +617,7 @@ class Monitor extends Window {
612617
max: 100,
613618
value: "PercentIdleTime".toLowerCase(),
614619
isComplement: true,
615-
showPeakInput: true
620+
showPeak: true
616621
}
617622
));
618623

@@ -629,7 +634,7 @@ class Monitor extends Window {
629634
max: "TotalVisibleMemorySize".toLowerCase(),
630635
value: "FreePhysicalMemory".toLowerCase(),
631636
isComplement: true,
632-
showPeakInput: true
637+
showPeak: true
633638
}
634639
));
635640

@@ -646,7 +651,7 @@ class Monitor extends Window {
646651
max: 100,
647652
value: "PercentIdleTime".toLowerCase(),
648653
isComplement: true,
649-
showPeakInput: true
654+
showPeak: true
650655
}
651656
));
652657

@@ -664,7 +669,7 @@ class Monitor extends Window {
664669
value: "BytesReceivedPersec".toLowerCase(),
665670
isDynamic: true,
666671
isComplement: false,
667-
showPeakInput: true
672+
showPeak: true
668673
}
669674
));
670675

@@ -682,7 +687,7 @@ class Monitor extends Window {
682687
value: "BytesSentPersec".toLowerCase(),
683688
isDynamic: true,
684689
isComplement: false,
685-
showPeakInput: true
690+
showPeak: true
686691
}
687692
));
688693

@@ -695,7 +700,7 @@ class Monitor extends Window {
695700
format: "Ping",
696701
prefix: "RTT",
697702
unit: "ms",
698-
showPeakInput: true
703+
showPeak: true
699704
}
700705
));
701706

@@ -781,7 +786,7 @@ class Monitor extends Window {
781786
optionsBox.style.gridTemplateColumns = "80px auto 80px auto";
782787
optionsBox.style.gridTemplateRows = "repeat(6, 32px)";
783788

784-
optionsBox.appendChild(attributesDatalist);
789+
optionsBox.appendChild(propertiesDatalist);
785790
optionsBox.appendChild(unitDatalist);
786791

787792
innerBox.append(classesList, propertiesList, optionsBox);
@@ -827,7 +832,7 @@ class Monitor extends Window {
827832
dynamicBox.style.gridArea = "3 / 3 / 3 / 5";
828833
optionsBox.appendChild(dynamicBox);
829834
dynamicBox.appendChild(dynamicInput);
830-
this.AddCheckBoxLabel(dynamicBox, dynamicInput, "Dynamic limit");
835+
this.AddCheckBoxLabel(dynamicBox, dynamicInput, "Dynamic limits");
831836

832837
innerBox.append(queryInput);
833838

@@ -846,7 +851,7 @@ class Monitor extends Window {
846851
let select_index = query.indexOf("select");
847852
let from_index = query.indexOf("from");
848853
let lastProperties = queryInput.value.substring(select_index + 6, from_index).trim();
849-
let lastPropertiesArray = lastProperties.split(",").map(o=>o.trim());
854+
let lastPropertiesArray = lastProperties.split(",").map(o=>o.trim().toLowerCase());
850855

851856
valueInput.textContent = "";
852857
for (let i=0; i<lastPropertiesArray.length; i++) {
@@ -857,12 +862,12 @@ class Monitor extends Window {
857862
valueInput.appendChild(option);
858863
}
859864

860-
attributesDatalist.textContent = "";
865+
propertiesDatalist.textContent = "";
861866
for (let i=0; i<lastPropertiesArray.length; i++) {
862867
const option = document.createElement("option");
863868
option.value = lastPropertiesArray[i];
864869
option.text = lastPropertiesArray[i];
865-
attributesDatalist.appendChild(option);
870+
propertiesDatalist.appendChild(option);
866871
}
867872

868873
classFilterInput.onkeydown = event=>{
@@ -876,6 +881,32 @@ class Monitor extends Window {
876881
let properties = [];
877882
let propertyCheckboxes = [];
878883

884+
const ListProperties = (classObject, query)=> {
885+
properties = [];
886+
propertyCheckboxes = [];
887+
888+
for (let j = 0; j < classObject.properties.length; j++) {
889+
let value = lastProperties === "*" || className == null ||
890+
className.toLowerCase() === classObject.class.toLowerCase() && lastPropertiesArray.includes(classObject.properties[j].toLowerCase());
891+
892+
const propertyBox = document.createElement("div");
893+
const propertyCheckbox = document.createElement("input");
894+
propertyCheckbox.type = "checkbox";
895+
propertyCheckbox.checked = value;
896+
propertyCheckboxes.push(propertyCheckbox);
897+
propertyBox.appendChild(propertyCheckbox);
898+
899+
properties.push(value);
900+
901+
this.AddCheckBoxLabel(propertyBox, propertyCheckbox, classObject.properties[j]);
902+
propertiesList.appendChild(propertyBox);
903+
904+
propertyCheckbox.onchange = ()=> {
905+
OnChange();
906+
};
907+
}
908+
}
909+
879910
classFilterInput.oninput = ()=> {
880911
if (!wmiClasses.classes) return;
881912
let filter = classFilterInput.value.toLowerCase();
@@ -903,47 +934,27 @@ class Monitor extends Window {
903934
newClass.textContent = wmiClasses.classes[i].class;
904935
classesList.appendChild(newClass);
905936

906-
if (className && className === wmiClasses.classes[i].class.toLowerCase()) {
907-
newClass.scrollIntoView({ behavior: "smooth"});
908-
909-
selected = newClass;
910-
selected.style.backgroundColor = "var(--clr-select)";
911-
}
912-
913-
newClass.onclick = ()=> {
937+
newClass.onclick = event=> {
914938
if (selected != null) selected.style.backgroundColor = "";
915939

916-
properties = [];
917-
propertyCheckboxes = [];
918-
919940
propertiesList.textContent = "";
920941

921-
for (let j = 0; j < wmiClasses.classes[i].properties.length; j++) {
922-
let value = lastProperties === "*" || className == null ||
923-
className.toLowerCase() === wmiClasses.classes[i].class.toLowerCase() &&
924-
lastPropertiesArray.includes(wmiClasses.classes[i].properties[j].toLowerCase());
925-
926-
const propertyBox = document.createElement("div");
927-
const propertyCheckbox = document.createElement("input");
928-
propertyCheckbox.type = "checkbox";
929-
propertyCheckbox.checked = value;
930-
propertyCheckboxes.push(propertyCheckbox);
931-
propertyBox.appendChild(propertyCheckbox);
932-
933-
properties.push(value);
934-
935-
this.AddCheckBoxLabel(propertyBox, propertyCheckbox, wmiClasses.classes[i].properties[j]);
936-
propertiesList.appendChild(propertyBox);
942+
ListProperties(wmiClasses.classes[i], queryInput.value);
937943

938-
propertyCheckbox.onchange = ()=> {
939-
OnChange();
940-
};
944+
selected = newClass;
945+
selected.style.backgroundColor = "var(--clr-select)";
946+
if (event) {
947+
queryInput.value = "SELECT * FROM " + wmiClasses.classes[i].class;
941948
}
949+
};
950+
951+
if (className && className === wmiClasses.classes[i].class.toLowerCase()) {
952+
newClass.scrollIntoView({ behavior: "smooth"});
942953

943954
selected = newClass;
944955
selected.style.backgroundColor = "var(--clr-select)";
945-
queryInput.value = "SELECT * FROM " + wmiClasses.classes[i].class;
946-
};
956+
selected.onclick();
957+
}
947958
}
948959
}
949960
};
@@ -1182,7 +1193,7 @@ class Monitor extends Window {
11821193
valueLabel.textContent = `${options.prefix} ${this.FormatUnits(value, options.unit)}\n`;
11831194

11841195
if (options.showPeak && valley !== peak) {
1185-
valueLabel.textContent += `Peak: ${peak}${options.unit}\n`;
1196+
valueLabel.textContent += `Peak: ${this.FormatUnits(peak, options.unit)}\n`;
11861197
}
11871198

11881199
DrawGraph();
@@ -1286,7 +1297,7 @@ class Monitor extends Window {
12861297
valueLabel.textContent = `Peak: ${this.FormatUnits(peak, options.unit)}\n`;
12871298

12881299
if (options.showPeak && valley !== peak) {
1289-
valueLabel.textContent += `Peak: ${peak}${options.unit}\n`;
1300+
valueLabel.textContent += `Peak: ${this.FormatUnits(peak, options.unit)}\n`;
12901301
}
12911302

12921303
DrawGraph();
@@ -1409,14 +1420,40 @@ class Monitor extends Window {
14091420
};
14101421
}
14111422

1412-
CreateList(inner, name, options) {
1413-
const height = 300;
1423+
CreateList(inner, valueLabel, name, options) {
1424+
const height = 350;
14141425
inner.style.height = `${height}px`;
1426+
inner.style.overflowX = "auto";
1427+
inner.style.overflowY = "auto";
1428+
inner.style.backgroundColor = "var(--clr-pane)";
14151429

1416-
//TODO:
1430+
const table = document.createElement("table");
1431+
table.className = "wmi-list";
1432+
table.style.marginTop = "20px";
1433+
inner.appendChild(table);
14171434

14181435
const Update = value=>{
1419-
//TODO:
1436+
const keys = Object.keys(value);
1437+
const values = Object.values(value);
1438+
const count = keys.length;
1439+
1440+
valueLabel.textContent = `Count: ${count}`;
1441+
table.textContent = "";
1442+
1443+
for (let i=0; i<keys.length; i++) {
1444+
const tr = document.createElement("tr");
1445+
table.appendChild(tr);
1446+
1447+
const td = document.createElement("td");
1448+
td.textContent = keys[i];
1449+
tr.appendChild(td);
1450+
1451+
for (let j=0; j<values[i].length; j++) {
1452+
const td = document.createElement("td");
1453+
td.textContent = values[i][j];
1454+
tr.appendChild(td);
1455+
}
1456+
}
14201457
};
14211458

14221459
return {
@@ -1427,14 +1464,49 @@ class Monitor extends Window {
14271464
};
14281465
}
14291466

1430-
CreateTable(inner, name, options) {
1431-
const height = 300;
1467+
CreateTable(inner, valueLabel, name, options) {
1468+
const height = 350;
14321469
inner.style.height = `${height}px`;
1470+
inner.style.overflowX = "auto";
1471+
inner.style.overflowY = "auto";
1472+
inner.style.backgroundColor = "var(--clr-pane)";
14331473

1434-
//TODO:
1474+
const table = document.createElement("table");
1475+
table.className = "wmi-table";
1476+
table.style.marginTop = "20px";
1477+
inner.appendChild(table);
14351478

14361479
const Update = value=>{
1437-
//TODO:
1480+
const keys = Object.keys(value);
1481+
const values = Object.values(value);
1482+
const count = values[0].length;
1483+
1484+
valueLabel.textContent = `Count: ${count}`;
1485+
table.textContent = "";
1486+
1487+
const titleTr = document.createElement("tr");
1488+
table.appendChild(titleTr);
1489+
1490+
const whiteSpace = document.createElement("td");
1491+
titleTr.appendChild(whiteSpace);
1492+
for (let i=0; i<keys.length; i++) {
1493+
const td = document.createElement("td");
1494+
td.textContent = keys[i];
1495+
titleTr.appendChild(td);
1496+
}
1497+
1498+
for (let i=0; i<count; i++) {
1499+
const tr = document.createElement("tr");
1500+
table.appendChild(tr);
1501+
1502+
tr.appendChild(document.createElement("td"));
1503+
1504+
for (let j=0; j<values.length; j++) {
1505+
const td = document.createElement("td");
1506+
td.textContent = values[j][i];
1507+
tr.appendChild(td);
1508+
}
1509+
}
14381510
};
14391511

14401512
return {

0 commit comments

Comments
 (0)