Support specify vehicle ID

docs/widgets/services/lubelogger.md

@@ -5,7 +5,10 @@ description: LubeLogger Widget Configuration
 
 Learn more about [LubeLogger](https://github.com/hargata/lubelog).
 
+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:
@@ -13,4 +16,5 @@ widget:
   url: https://lubelogger.host.or.ip
   username: lubeloggerusername
   password: lubeloggerpassword
+  vehicleID: 1 # optional, changes to single-vehicle version
 ```

public/locales/en/common.json

@@ -947,8 +947,11 @@
       "disaster": "Disaster"
     },
     "lubelogger": {
+      "vehicle": "Vehicle",
       "vehicles": "Vehicles",
       "serviceRecords": "Service Records",
-      "reminders": "Reminders"
+      "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/lubelogger/component.jsx

@@ -1,10 +1,13 @@
+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;
-  const { data: vehicleInfo, error } = useWidgetAPI(widget, "vehicleinfo");
+  let { data: vehicleInfo, error } = useWidgetAPI(widget, "vehicleinfo");
 
   if (error) {
     return <Container service={service} error={error} />;
@@ -20,12 +23,38 @@ export default function Component({ service }) {
     );
   }
 
+  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} />