Feature: LubeLogger service widget (#4031)

docs/widgets/services/index.md

@@ -59,6 +59,7 @@ You can also find a list of all available service widgets in the sidebar navigat
 - [Kopia](kopia.md)
 - [Lidarr](lidarr.md)
 - [Linkwarden](linkwarden.md)
+- [Lubelogger](lubelogger.md)
 - [Mastodon](mastodon.md)
 - [Mealie](mealie.md)
 - [Medusa](medusa.md)

docs/widgets/services/lubelogger.md

@@ -0,0 +1,20 @@
+---
+title: LubeLogger
+description: LubeLogger Widget Configuration
+---
+
+Learn more about [LubeLogger](https://github.com/hargata/lubelog) (v1.3.7 or higher is required).
+
+The widget comes in two 'flavors', one shows data for all vehicles or for just a specific vehicle with the `vehicleID` parameter.
+
+Allowed fields: `["vehicles", "serviceRecords", "reminders"]`.
+For the single-vehicle version: `["vehicle", "serviceRecords", "reminders", "nextReminder"]
+
+```yaml
+widget:
+  type: lubelogger
+  url: https://lubelogger.host.or.ip
+  username: lubeloggerusername
+  password: lubeloggerpassword
+  vehicleID: 1 # optional, changes to single-vehicle version
+```

public/locales/en/common.json

@@ -945,5 +945,13 @@
       "average": "Average",
       "high": "High",
       "disaster": "Disaster"
+    },
+    "lubelogger": {
+      "vehicle": "Vehicle",
+      "vehicles": "Vehicles",
+      "serviceRecords": "Service Records",
+      "reminders": "Reminders",
+      "nextReminder": "Next Reminder",
+      "none": "None"
     }
 }

src/utils/config/service-helpers.js

@@ -442,6 +442,9 @@ export function cleanServiceGroups(groups) {
           namespace,
           podSelector,
 
+          // lubelogger
+          vehicleID,
+
           // mjpeg
           fit,
           stream,
@@ -627,6 +630,9 @@ export function cleanServiceGroups(groups) {
         if (type === "technitium") {
           if (range !== undefined) cleanedService.widget.range = range;
         }
+        if (type === "lubelogger") {
+          if (vehicleID !== undefined) cleanedService.widget.vehicleID = vehicleID;
+        }
       }
 
       return cleanedService;

src/widgets/components.js

@@ -56,6 +56,7 @@ const components = {
   kopia: dynamic(() => import("./kopia/component")),
   lidarr: dynamic(() => import("./lidarr/component")),
   linkwarden: dynamic(() => import("./linkwarden/component")),
+  lubelogger: dynamic(() => import("./lubelogger/component")),
   mailcow: dynamic(() => import("./mailcow/component")),
   mastodon: dynamic(() => import("./mastodon/component")),
   mealie: dynamic(() => import("./mealie/component")),

src/widgets/lubelogger/component.jsx

@@ -0,0 +1,65 @@
+import { useTranslation } from "react-i18next";
+
+import Container from "components/services/widget/container";
+import Block from "components/services/widget/block";
+import useWidgetAPI from "utils/proxy/use-widget-api";
+
+export default function Component({ service }) {
+  const { t } = useTranslation();
+  const { widget } = service;
+  let { data: vehicleInfo, error } = useWidgetAPI(widget, "vehicleinfo");
+
+  if (error) {
+    return <Container service={service} error={error} />;
+  }
+
+  if (!vehicleInfo) {
+    return (
+      <Container service={service}>
+        <Block label="lubelogger.vehicles" />
+        <Block label="lubelogger.serviceRecords" />
+        <Block label="lubelogger.reminders" />
+      </Container>
+    );
+  }
+
+  const { vehicleID } = widget;
+  if (vehicleID) {
+    vehicleInfo = vehicleInfo.filter((v) => v.vehicleData.id === vehicleID);
+  }
+  const totalReminders = vehicleInfo.reduce(
+    (acc, val) => acc + val.veryUrgentReminderCount + val.urgentReminderCount + val.notUrgentReminderCount,
+    0,
+  );
+  const totalServiceRecords = vehicleInfo.reduce((acc, val) => acc + val.serviceRecordCount, 0);
+
+  if (vehicleID) {
+    if (vehicleInfo.length === 0) {
+      error = { message: "Vehicle not found" };
+      return <Container service={service} error={error} />;
+    }
+
+    const nextReminder = vehicleInfo[0].nextReminder
+      ? t("common.date", { value: vehicleInfo[0].nextReminder.dueDate })
+      : t("lubelogger.none");
+    return (
+      <Container service={service}>
+        <Block
+          label="lubelogger.vehicle"
+          value={`${vehicleInfo[0].vehicleData.year} ${vehicleInfo[0].vehicleData.model}`}
+        />
+        <Block label="lubelogger.serviceRecords" value={totalServiceRecords} />
+        <Block label="lubelogger.reminders" value={totalReminders} />
+        <Block label="lubelogger.nextReminder" value={nextReminder} />
+      </Container>
+    );
+  }
+
+  return (
+    <Container service={service}>
+      <Block label="lubelogger.vehicles" value={vehicleInfo.length} />
+      <Block label="lubelogger.serviceRecords" value={totalServiceRecords} />
+      <Block label="lubelogger.reminders" value={totalReminders} />
+    </Container>
+  );
+}

src/widgets/lubelogger/widget.js

@@ -0,0 +1,14 @@
+import genericProxyHandler from "utils/proxy/handlers/generic";
+
+const widget = {
+  api: "{url}/api/{endpoint}",
+  proxyHandler: genericProxyHandler,
+
+  mappings: {
+    vehicleinfo: {
+      endpoint: "vehicle/info",
+    },
+  },
+};
+
+export default widget;

src/widgets/widgets.js

@@ -48,6 +48,7 @@ import komga from "./komga/widget";
 import kopia from "./kopia/widget";
 import lidarr from "./lidarr/widget";
 import linkwarden from "./linkwarden/widget";
+import lubelogger from "./lubelogger/widget";
 import mailcow from "./mailcow/widget";
 import mastodon from "./mastodon/widget";
 import mealie from "./mealie/widget";
@@ -174,6 +175,7 @@ const widgets = {
   kopia,
   lidarr,
   linkwarden,
+  lubelogger,
   mailcow,
   mastodon,
   mealie,