Implemented majority of dashboard

This commit is contained in:
Jas Singh
2024-07-08 01:13:26 -07:00
parent eee68e8acf
commit 251a4da2bc
11 changed files with 891 additions and 92 deletions

View File

@@ -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: "󰍬",
}),
}),
],
});

View File

@@ -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),
}),
],
}),

View File

@@ -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: "󰑊",
}),
}),
],
}),
],
}),

View File

@@ -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`),
}),
],
}),
],
});

View File

@@ -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",