Implemented majority of dashboard
This commit is contained in:
@@ -1,30 +1,44 @@
|
||||
const Controls = () => {
|
||||
return Widget.Box({
|
||||
class_name: "controls-container",
|
||||
class_name: "dashboard-card controls-container",
|
||||
hpack: "fill",
|
||||
vpack: "fill",
|
||||
expand: true,
|
||||
children: [
|
||||
Widget.Button({
|
||||
class_name: "dashboard-button airplane-mode",
|
||||
}),
|
||||
Widget.Separator({
|
||||
hpack: "center",
|
||||
vexpand: true,
|
||||
vertical: true,
|
||||
class_name: "menu-separator dashboard-controls",
|
||||
}),
|
||||
Widget.Button({
|
||||
expand: true,
|
||||
class_name: "dashboard-button wifi",
|
||||
child: Widget.Label({
|
||||
label: "",
|
||||
}),
|
||||
}),
|
||||
Widget.Button({
|
||||
expand: true,
|
||||
class_name: "dashboard-button bluetooth",
|
||||
child: Widget.Label({
|
||||
label: "",
|
||||
}),
|
||||
}),
|
||||
Widget.Button({
|
||||
expand: true,
|
||||
class_name: "dashboard-button notifications",
|
||||
child: Widget.Label({
|
||||
label: "",
|
||||
}),
|
||||
}),
|
||||
Widget.Button({
|
||||
expand: true,
|
||||
class_name: "dashboard-button playback",
|
||||
child: Widget.Label({
|
||||
label: "",
|
||||
}),
|
||||
}),
|
||||
Widget.Button({
|
||||
expand: true,
|
||||
class_name: "dashboard-button input",
|
||||
child: Widget.Label({
|
||||
label: "",
|
||||
}),
|
||||
}),
|
||||
],
|
||||
});
|
||||
|
||||
@@ -1,6 +1,12 @@
|
||||
import icons from '../../../icons/index.js';
|
||||
import icons from "../../../icons/index.js";
|
||||
import powermenu from "../../power/helpers/actions.js";
|
||||
|
||||
const Profile = () => {
|
||||
const handleClick = (action) => {
|
||||
App.closeWindow("dashboardmenu");
|
||||
return powermenu.action(action);
|
||||
}
|
||||
|
||||
return Widget.Box({
|
||||
class_name: "profiles-container",
|
||||
hpack: "fill",
|
||||
@@ -14,13 +20,13 @@ const Profile = () => {
|
||||
Widget.Icon({
|
||||
hpack: "center",
|
||||
class_name: "profile-picture",
|
||||
icon: `${App.configDir}/assets/21210205.png`
|
||||
icon: `${App.configDir}/assets/21210205.png`,
|
||||
}),
|
||||
Widget.Label({
|
||||
hpack: "center",
|
||||
class_name: "profile-name",
|
||||
label: "Jaskir Linux"
|
||||
})
|
||||
label: "Jaskir Linux",
|
||||
}),
|
||||
],
|
||||
}),
|
||||
Widget.Box({
|
||||
@@ -30,27 +36,31 @@ const Profile = () => {
|
||||
children: [
|
||||
Widget.Button({
|
||||
class_name: "dashboard-button shutdown",
|
||||
on_clicked: () => handleClick("shutdown"),
|
||||
tooltip_text: "Shut Down",
|
||||
vexpand: true,
|
||||
child: Widget.Icon(icons.powermenu.shutdown)
|
||||
child: Widget.Icon(icons.powermenu.shutdown),
|
||||
}),
|
||||
Widget.Button({
|
||||
class_name: "dashboard-button restart",
|
||||
on_clicked: () => handleClick("reboot"),
|
||||
tooltip_text: "Restart",
|
||||
vexpand: true,
|
||||
child: Widget.Icon(icons.powermenu.reboot)
|
||||
child: Widget.Icon(icons.powermenu.reboot),
|
||||
}),
|
||||
Widget.Button({
|
||||
class_name: "dashboard-button lock",
|
||||
on_clicked: () => handleClick("logout"),
|
||||
tooltip_text: "Log Out",
|
||||
vexpand: true,
|
||||
child: Widget.Icon(icons.powermenu.logout)
|
||||
child: Widget.Icon(icons.powermenu.logout),
|
||||
}),
|
||||
Widget.Button({
|
||||
class_name: "dashboard-button sleep",
|
||||
on_clicked: () => handleClick("sleep"),
|
||||
tooltip_text: "Sleep",
|
||||
vexpand: true,
|
||||
child: Widget.Icon(icons.powermenu.sleep)
|
||||
child: Widget.Icon(icons.powermenu.sleep),
|
||||
}),
|
||||
],
|
||||
}),
|
||||
|
||||
@@ -1,38 +1,114 @@
|
||||
const Shortcuts = () => {
|
||||
const handleClick = (action) => {
|
||||
App.closeWindow("dashboardmenu");
|
||||
Utils.execAsync(action)
|
||||
.then(res => res)
|
||||
.catch(err => err);
|
||||
}
|
||||
return Widget.Box({
|
||||
class_name: "shortcuts-container",
|
||||
hpack: "fill",
|
||||
hexpand: true,
|
||||
children: [
|
||||
Widget.Box({
|
||||
class_name: "most-used-container",
|
||||
class_name: "container most-used dashboard-card",
|
||||
hexpand: true,
|
||||
children: [
|
||||
Widget.Button({
|
||||
class_name: "dashboard-button edge",
|
||||
Widget.Box({
|
||||
class_name: "card-button-left-section",
|
||||
vertical: true,
|
||||
hexpand: true,
|
||||
children: [
|
||||
Widget.Button({
|
||||
class_name: "dashboard-button edge top-button",
|
||||
on_primary_click: () => handleClick("microsoft-edge-stable"),
|
||||
child: Widget.Label({
|
||||
class_name: "button-label",
|
||||
label: "",
|
||||
}),
|
||||
}),
|
||||
Widget.Button({
|
||||
class_name: "dashboard-button spotify",
|
||||
on_primary_click: () => handleClick("spotify-launcher"),
|
||||
child: Widget.Label({
|
||||
class_name: "button-label",
|
||||
label: "",
|
||||
}),
|
||||
}),
|
||||
],
|
||||
}),
|
||||
Widget.Button({
|
||||
class_name: "dashboard-button spotify",
|
||||
}),
|
||||
Widget.Button({
|
||||
class_name: "dashboard-button discord",
|
||||
}),
|
||||
Widget.Button({
|
||||
class_name: "dashboard-button search",
|
||||
Widget.Box({
|
||||
vertical: true,
|
||||
hexpand: true,
|
||||
children: [
|
||||
Widget.Button({
|
||||
class_name: "dashboard-button discord top-button",
|
||||
on_primary_click: () => handleClick("discord"),
|
||||
child: Widget.Label({
|
||||
class_name: "button-label",
|
||||
label: "",
|
||||
}),
|
||||
}),
|
||||
Widget.Button({
|
||||
class_name: "dashboard-button search",
|
||||
on_primary_click: () => handleClick("rofi -show drun"),
|
||||
child: Widget.Label({
|
||||
class_name: "button-label",
|
||||
label: "",
|
||||
}),
|
||||
}),
|
||||
],
|
||||
}),
|
||||
],
|
||||
}),
|
||||
Widget.Box({
|
||||
class_name: "utilities-container",
|
||||
class_name: "container utilities dashboard-card",
|
||||
hexpand: true,
|
||||
children: [
|
||||
Widget.Button({
|
||||
class_name: "dashboard-button utility",
|
||||
Widget.Box({
|
||||
class_name: "card-button-left-section",
|
||||
vertical: true,
|
||||
hexpand: true,
|
||||
children: [
|
||||
Widget.Button({
|
||||
class_name: "dashboard-button colorpicker top-button",
|
||||
on_primary_click: () => handleClick("hyprpicker"),
|
||||
child: Widget.Label({
|
||||
class_name: "button-label",
|
||||
label: "",
|
||||
}),
|
||||
}),
|
||||
Widget.Button({
|
||||
class_name: "dashboard-button settings",
|
||||
on_primary_click: () => handleClick('bash -c "kitty -e nvim $HOME/.config/hypr/hyprland.conf"'),
|
||||
child: Widget.Label({
|
||||
class_name: "button-label",
|
||||
label: "",
|
||||
}),
|
||||
}),
|
||||
],
|
||||
}),
|
||||
Widget.Button({
|
||||
class_name: "dashboard-button utility",
|
||||
}),
|
||||
Widget.Button({
|
||||
class_name: "dashboard-button utility",
|
||||
}),
|
||||
Widget.Button({
|
||||
class_name: "dashboard-button utility",
|
||||
Widget.Box({
|
||||
vertical: true,
|
||||
hexpand: true,
|
||||
children: [
|
||||
Widget.Button({
|
||||
class_name: "dashboard-button snapshot top-button",
|
||||
on_primary_click: () => handleClick("grimblast --notify copysave area"),
|
||||
child: Widget.Label({
|
||||
class_name: "button-label",
|
||||
label: "",
|
||||
}),
|
||||
}),
|
||||
Widget.Button({
|
||||
class_name: "dashboard-button record",
|
||||
on_primary_click: () => handleClick("rofi -show drun"),
|
||||
child: Widget.Label({
|
||||
class_name: "button-label",
|
||||
label: "",
|
||||
}),
|
||||
}),
|
||||
],
|
||||
}),
|
||||
],
|
||||
}),
|
||||
|
||||
@@ -1,18 +1,232 @@
|
||||
const Stats = () => {
|
||||
const divide = ([total, free]) => free / total;
|
||||
|
||||
const formatSizeInGB = (sizeInKB) =>
|
||||
Number((sizeInKB / 1024 ** 2).toFixed(2));
|
||||
|
||||
const cpu = Variable(0, {
|
||||
poll: [
|
||||
2000,
|
||||
"top -b -n 1",
|
||||
(out) => {
|
||||
if (typeof out !== "string") {
|
||||
return 0;
|
||||
}
|
||||
|
||||
const cpuOut = out.split("\n").find((line) => line.includes("Cpu(s)"));
|
||||
|
||||
if (cpuOut === undefined) {
|
||||
return 0;
|
||||
}
|
||||
|
||||
return divide([100, cpuOut.split(/\s+/)[1].replace(",", ".")]);
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
const ram = Variable(
|
||||
{ total: 0, used: 0, percentage: 0 },
|
||||
{
|
||||
poll: [
|
||||
2000,
|
||||
"free",
|
||||
(out) => {
|
||||
if (typeof out !== "string") {
|
||||
return { total: 0, used: 0, percentage: 0 };
|
||||
}
|
||||
|
||||
const ramOut = out.split("\n").find((line) => line.includes("Mem:"));
|
||||
|
||||
if (ramOut === undefined) {
|
||||
return { total: 0, used: 0, percentage: 0 };
|
||||
}
|
||||
|
||||
const [totalRam, usedRam] = ramOut
|
||||
.split(/\s+/)
|
||||
.splice(1, 2)
|
||||
.map(Number);
|
||||
|
||||
return {
|
||||
percentage: divide([totalRam, usedRam]),
|
||||
total: formatSizeInGB(totalRam),
|
||||
used: formatSizeInGB(usedRam),
|
||||
};
|
||||
},
|
||||
],
|
||||
},
|
||||
);
|
||||
|
||||
const gpu = Variable(0, {
|
||||
poll: [
|
||||
2000,
|
||||
"gpustat --json",
|
||||
(out) => {
|
||||
if (typeof out !== "string") {
|
||||
return 0;
|
||||
}
|
||||
try {
|
||||
const data = JSON.parse(out);
|
||||
|
||||
const totalGpu = 100;
|
||||
const usedGpu =
|
||||
data.gpus.reduce((acc, gpu) => acc + gpu["utilization.gpu"], 0) /
|
||||
data.gpus.length;
|
||||
|
||||
return divide([totalGpu, usedGpu]);
|
||||
} catch (e) {
|
||||
console.error("Error getting GPU stats:", e);
|
||||
return 0;
|
||||
}
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
const storage = Variable(
|
||||
{ total: 0, used: 0, percentage: 0 },
|
||||
{
|
||||
poll: [
|
||||
2000,
|
||||
"df -B1 /",
|
||||
(out) => {
|
||||
if (typeof out !== "string") {
|
||||
return { total: 0, used: 0, percentage: 0 };
|
||||
}
|
||||
|
||||
const dfOut = out.split("\n").find((line) => line.startsWith("/"));
|
||||
|
||||
if (dfOut === undefined) {
|
||||
return { total: 0, used: 0, percentage: 0 };
|
||||
}
|
||||
|
||||
const parts = dfOut.split(/\s+/);
|
||||
const size = parseInt(parts[1], 10);
|
||||
const used = parseInt(parts[2], 10);
|
||||
|
||||
const sizeInGB = formatSizeInGB(size);
|
||||
const usedInGB = formatSizeInGB(used);
|
||||
|
||||
return {
|
||||
total: Math.floor(sizeInGB / 1000),
|
||||
used: Math.floor(usedInGB / 1000),
|
||||
percentage: divide([size, used]),
|
||||
};
|
||||
},
|
||||
],
|
||||
},
|
||||
);
|
||||
|
||||
return Widget.Box({
|
||||
class_name: "stats-container",
|
||||
class_name: "dashboard-card stats-container",
|
||||
vertical: true,
|
||||
vpack: "fill",
|
||||
hpack: "fill",
|
||||
expand: true,
|
||||
children: [
|
||||
Widget.Box({
|
||||
class_name: "stat-cpu",
|
||||
vertical: true,
|
||||
children: [
|
||||
Widget.Box({
|
||||
class_name: "stat cpu",
|
||||
hexpand: true,
|
||||
vpack: "center",
|
||||
children: [
|
||||
Widget.Label({
|
||||
label: "",
|
||||
}),
|
||||
Widget.LevelBar({
|
||||
class_name: "stats-bar",
|
||||
hexpand: true,
|
||||
vpack: "center",
|
||||
bar_mode: "continuous",
|
||||
max_value: 1,
|
||||
value: cpu.bind("value"),
|
||||
}),
|
||||
],
|
||||
}),
|
||||
Widget.Label({
|
||||
hpack: "end",
|
||||
class_name: "stat-value cpu",
|
||||
label: cpu.bind("value").as((v) => `${Math.floor(v * 100)}%`),
|
||||
}),
|
||||
],
|
||||
}),
|
||||
Widget.Box({
|
||||
class_name: "stat-ram",
|
||||
vertical: true,
|
||||
children: [
|
||||
Widget.Box({
|
||||
class_name: "stat ram",
|
||||
vpack: "center",
|
||||
hexpand: true,
|
||||
children: [
|
||||
Widget.Label({
|
||||
label: "",
|
||||
}),
|
||||
Widget.LevelBar({
|
||||
class_name: "stats-bar",
|
||||
hexpand: true,
|
||||
vpack: "center",
|
||||
value: ram.bind("value").as((v) => v.percentage),
|
||||
}),
|
||||
],
|
||||
}),
|
||||
Widget.Label({
|
||||
hpack: "end",
|
||||
class_name: "stat-value ram",
|
||||
label: ram.bind("value").as((v) => `${v.used}/${v.total} GB`),
|
||||
}),
|
||||
],
|
||||
}),
|
||||
Widget.Box({
|
||||
class_name: "stat-gpu",
|
||||
vertical: true,
|
||||
children: [
|
||||
Widget.Box({
|
||||
class_name: "stat gpu",
|
||||
hexpand: true,
|
||||
vpack: "center",
|
||||
children: [
|
||||
Widget.Label({
|
||||
label: "",
|
||||
}),
|
||||
Widget.LevelBar({
|
||||
class_name: "stats-bar",
|
||||
hexpand: true,
|
||||
vpack: "center",
|
||||
value: gpu.bind("value"),
|
||||
}),
|
||||
],
|
||||
}),
|
||||
Widget.Label({
|
||||
hpack: "end",
|
||||
class_name: "stat-value gpu",
|
||||
label: gpu.bind("value").as((v) => `${Math.floor(v * 100)}%`),
|
||||
}),
|
||||
],
|
||||
}),
|
||||
Widget.Box({
|
||||
class_name: "stat-storage",
|
||||
vertical: true,
|
||||
children: [
|
||||
Widget.Box({
|
||||
class_name: "stat storage",
|
||||
hexpand: true,
|
||||
vpack: "center",
|
||||
children: [
|
||||
Widget.Label({
|
||||
label: "",
|
||||
}),
|
||||
Widget.LevelBar({
|
||||
class_name: "stats-bar",
|
||||
hexpand: true,
|
||||
vpack: "center",
|
||||
value: storage.bind("value").as((v) => v.percentage),
|
||||
}),
|
||||
],
|
||||
}),
|
||||
Widget.Label({
|
||||
hpack: "end",
|
||||
class_name: "stat-value storage",
|
||||
label: storage.bind("value").as((v) => `${v.used}/${v.total} GB`),
|
||||
}),
|
||||
],
|
||||
}),
|
||||
],
|
||||
});
|
||||
|
||||
@@ -29,12 +29,14 @@ const renderWAPs = (self, network, staging, connecting) => {
|
||||
Utils.merge(
|
||||
[network.bind("wifi"), staging.bind("value"), connecting.bind("value")],
|
||||
() => {
|
||||
// Sometimes the network service will yield a "this._device is undefined" when
|
||||
// Sometimes the network service will yield a "this._device is undefined" when
|
||||
// trying to access the "access_points" property. So we must validate that
|
||||
// it's not 'undefined'
|
||||
let WAPs = network.wifi["access_points"] !== undefined
|
||||
? network.wifi["access-points"]
|
||||
: [];
|
||||
let WAPs =
|
||||
Object.hasOwnProperty.call(network.wifi, "access_points") &&
|
||||
network.wifi["access_points"] !== undefined
|
||||
? network.wifi["access-points"]
|
||||
: [];
|
||||
|
||||
const dedupeWAPs = () => {
|
||||
const dedupMap = {};
|
||||
@@ -42,10 +44,10 @@ const renderWAPs = (self, network, staging, connecting) => {
|
||||
if (!Object.hasOwnProperty.call(dedupMap, item.ssid)) {
|
||||
dedupMap[item.ssid] = item;
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
return Object.keys(dedupMap).map(itm => dedupMap[itm]);
|
||||
}
|
||||
return Object.keys(dedupMap).map((itm) => dedupMap[itm]);
|
||||
};
|
||||
|
||||
WAPs = dedupeWAPs();
|
||||
|
||||
@@ -64,11 +66,9 @@ const renderWAPs = (self, network, staging, connecting) => {
|
||||
return false;
|
||||
};
|
||||
|
||||
const filteredWAPs = WAPs.filter(
|
||||
(ap) => {
|
||||
return ap.ssid !== "Unknown" && !isInStaging(ap)
|
||||
},
|
||||
).sort((a, b) => {
|
||||
const filteredWAPs = WAPs.filter((ap) => {
|
||||
return ap.ssid !== "Unknown" && !isInStaging(ap);
|
||||
}).sort((a, b) => {
|
||||
if (network.wifi.ssid === a.ssid) {
|
||||
return -1;
|
||||
}
|
||||
@@ -154,7 +154,7 @@ const renderWAPs = (self, network, staging, connecting) => {
|
||||
class_name: "connection-status dim",
|
||||
label:
|
||||
WifiStatusMap[
|
||||
network.wifi.state.toLowerCase()
|
||||
network.wifi.state.toLowerCase()
|
||||
],
|
||||
}),
|
||||
}),
|
||||
@@ -165,7 +165,8 @@ const renderWAPs = (self, network, staging, connecting) => {
|
||||
Widget.Revealer({
|
||||
hpack: "end",
|
||||
vpack: "start",
|
||||
reveal_child: ap.bssid === connecting.value || isDisconnecting(ap),
|
||||
reveal_child:
|
||||
ap.bssid === connecting.value || isDisconnecting(ap),
|
||||
child: Widget.Spinner({
|
||||
vpack: "start",
|
||||
class_name: "spinner wap",
|
||||
|
||||
Reference in New Issue
Block a user