Add cputemp to resources widget

package.json

@@ -23,6 +23,7 @@
     "minecraft-ping-js": "^1.0.2",
     "next": "^12.3.1",
     "next-i18next": "^12.0.1",
+    "osx-temperature-sensor": "^1.0.8",
     "pretty-bytes": "^6.0.0",
     "raw-body": "^2.5.1",
     "react": "^18.2.0",

pnpm-lock.yaml

@@ -25,6 +25,7 @@ specifiers:
   minecraft-ping-js: ^1.0.2
   next: ^12.3.1
   next-i18next: ^12.0.1
+  osx-temperature-sensor: ^1.0.8
   postcss: ^8.4.16
   prettier: ^2.7.1
   pretty-bytes: ^6.0.0
@@ -57,6 +58,7 @@ dependencies:
   minecraft-ping-js: 1.0.2
   next: 12.3.1_biqbaboplfbrettd7655fr4n2y
   next-i18next: 12.0.1_azq6kxkn3od7qdylwkyksrwopy
+  osx-temperature-sensor: 1.0.8
   pretty-bytes: 6.0.0
   raw-body: 2.5.1
   react: 18.2.0
@@ -2442,6 +2444,13 @@ packages:
       word-wrap: 1.2.3
     dev: true
 
+  /osx-temperature-sensor/1.0.8:
+    resolution: {integrity: sha512-Gl3b+bn7+oDDnqPa+4v/cg3yg9lnE8ppS7ivL3opBZh4i7h99JNmkm6zWmo0m2a83UUJu+C9D7lGP0OS8IlehA==}
+    engines: {node: '>=4.0.0'}
+    os: [darwin]
+    requiresBuild: true
+    dev: false
+
   /p-limit/3.1.0:
     resolution: {integrity: sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==}
     engines: {node: '>=10'}

public/locales/en/common.json

@@ -36,7 +36,9 @@
         "total": "Total",
         "free": "Free",
         "used": "Used",
-        "load": "Load"
+        "load": "Load",
+        "temp": "TEMP",
+        "max": "Max"
     },
     "unifi": {
         "users": "Users",

src/components/widgets/resources/cputemp.jsx

@@ -0,0 +1,79 @@
+import useSWR from "swr";
+import { FaThermometerHalf } from "react-icons/fa";
+import { BiError } from "react-icons/bi";
+import { useTranslation } from "next-i18next";
+
+export default function CpuTemp({ expanded, units }) {
+  const { t } = useTranslation();
+
+  const { data, error } = useSWR(`/api/widgets/resources?type=cputemp`, {
+    refreshInterval: 1500,
+  });
+
+  if (error || data?.error) {
+    return (
+      <div className="flex-none flex flex-row items-center mr-3 py-1.5">
+        <BiError className="text-theme-800 dark:text-theme-200 w-5 h-5" />
+        <div className="flex flex-col ml-3 text-left">
+          <span className="text-theme-800 dark:text-theme-200 text-xs">{t("widget.api_error")}</span>
+        </div>
+      </div>
+    );
+  }
+
+  if (!data) {
+    return (
+      <div className="flex-none flex flex-row items-center mr-3 py-1.5 animate-pulse">
+        <FaThermometerHalf className="text-theme-800 dark:text-theme-200 w-5 h-5" />
+        <div className="flex flex-col ml-3 text-left min-w-[85px]">
+          <span className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
+            <div className="pl-0.5">-</div>
+            <div className="pr-1">{t("resources.temp")}</div>
+          </span>
+          {expanded && (
+            <span className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
+              <div className="pl-0.5">-</div>
+              <div className="pr-1">{t("resources.max")}</div>
+            </span>
+          )}
+        </div>
+      </div>
+    );
+  }
+
+  const unit = units === "imperial" ? "fahrenheit" : "celsius";
+  const mainTemp = (unit === "celsius") ? data.cputemp.main : data.cputemp.main * 5/9 + 32;
+  const maxTemp = (unit === "celsius") ? data.cputemp.max : data.cputemp.max * 5/9 + 32;
+
+  return (
+    <div className="flex-none flex flex-row items-center mr-3 py-1.5">
+      <FaThermometerHalf className="text-theme-800 dark:text-theme-200 w-5 h-5" />
+      <div className="flex flex-col ml-3 text-left min-w-[85px]">
+        <span className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
+          <div className="pl-0.5">
+            {t("common.number", { 
+              value: mainTemp,
+              maximumFractionDigits: 1,
+              style: "unit",
+              unit
+            })}
+          </div>
+          <div className="pr-1">{t("resources.temp")}</div>
+        </span>
+        {expanded && (
+          <span className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between">
+            <div className="pl-0.5">
+              {t("common.number", {
+                value: maxTemp,
+                maximumFractionDigits: 1,
+                style: "unit",
+                unit
+              })}
+            </div>
+            <div className="pr-1">{t("resources.max")}</div>
+          </span>
+        )}
+      </div>
+    </div>
+  );
+}

src/components/widgets/resources/resources.jsx

@@ -1,9 +1,10 @@
 import Disk from "./disk";
 import Cpu from "./cpu";
 import Memory from "./memory";
+import CpuTemp from "./cputemp";
 
 export default function Resources({ options }) {
-  const { expanded } = options;
+  const { expanded, units } = options;
   return (
     <div className="flex flex-col max-w:full sm:basis-auto self-center grow-0 flex-wrap">
       <div className="flex flex-row self-center flex-wrap justify-between">
@@ -12,6 +13,7 @@ export default function Resources({ options }) {
         {Array.isArray(options.disk)
           ? options.disk.map((disk) => <Disk key={disk} options={{ disk }} expanded={expanded} />)
           : options.disk && <Disk options={options} expanded={expanded} />}
+        {options.cputemp && <CpuTemp expanded={expanded} units={units} />}
       </div>
       {options.label && (
         <div className="ml-6 pt-1 text-center text-theme-800 dark:text-theme-200 text-xs">{options.label}</div>

src/pages/api/widgets/resources.js

@@ -35,6 +35,12 @@ export default async function handler(req, res) {
     });
   }
 
+  if (type === "cputemp") {
+    return res.status(200).json({
+      cputemp: await si.cpuTemperature(),
+    });
+  }
+
   return res.status(400).json({
     error: "invalid type",
   });