Feat/mqtt json schema

.env.example

@@ -18,6 +18,9 @@ OSEM_API_URL="https://api.opensensemap.org/"
 DIRECTUS_URL="https://coelho.opensensemap.org"
 SENSORWIKI_API_URL="https://api.sensors.wiki/"
 
+MQTT_SERVICE_URL="http://localhost:3001"
+MQTT_SERVICE_KEY="dev-service-key-change-in-production"
+
 MYBADGES_API_URL = "https://api.v2.mybadges.org/"
 MYBADGES_URL = "https://mybadges.org/"
 MYBADGES_SERVERADMIN_USERNAME = ""

.github/workflows/deploy.yml

@@ -53,6 +53,9 @@ jobs:
       - name: 📥 Install deps
         run: npm install
 
+      - name: 🧾 Generate OpenAPI spec
+        run: npm run build:docs
+
       - name: 🔎 Type check
         run: npm run typecheck --if-present
 

.gitignore

@@ -24,4 +24,6 @@ measurements.csv
 
 /coverage
 
-/minio-data
+/minio-data
+
+/public/openapi.json

app/components/device/new/advanced-info.tsx

@@ -1,246 +1,123 @@
-import { useFormContext } from 'react-hook-form'
-import {
-	Card,
-	CardContent,
-	CardDescription,
-	CardHeader,
-	CardTitle,
-} from '~/components/ui/card'
-import { Input } from '~/components/ui/input'
-import { Label } from '~/components/ui/label'
-import {
-	Select,
-	SelectContent,
-	SelectItem,
-	SelectTrigger,
-	SelectValue,
-} from '~/components/ui/select'
-import { Switch } from '~/components/ui/switch'
-import { Textarea } from '~/components/ui/textarea'
-
-export function AdvancedStep() {
-	const { register, setValue, watch, resetField } = useFormContext()
-
-	// Watch field states
-	const isMqttEnabled = watch('mqttEnabled') || false
-	const isTtnEnabled = watch('ttnEnabled') || false
-
-	// Clear corresponding fields when disabling
-	const handleMqttToggle = (checked: boolean) => {
-		setValue('mqttEnabled', checked)
-		if (!checked) {
-			resetField('url')
-			resetField('topic')
-			resetField('messageFormat')
-			resetField('decodeOptions')
-			resetField('connectionOptions')
-		}
-	}
-
-	const handleTtnToggle = (checked: boolean) => {
-		setValue('ttnEnabled', checked)
-		if (!checked) {
-			resetField('dev_id')
-			resetField('app_id')
-			resetField('profile')
-			resetField('decodeOptions')
-			resetField('port')
-		}
-	}
-
-	const handleInputChange = (
-		event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
-	) => {
-		const { name, value } = event.target
-		setValue(name, value)
-	}
-
-	const handleSelectChange = (field: string, value: string) => {
-		setValue(field, value)
-	}
-
-	return (
-		<>
-			{/* MQTT Configuration */}
-			<Card className="w-full">
-				<CardHeader>
-					<CardTitle>MQTT Configuration</CardTitle>
-					<CardDescription>
-						Configure your MQTT settings for data streaming
-					</CardDescription>
-				</CardHeader>
-				<CardContent>
-					<div className="flex items-center justify-between space-x-2">
-						<Label htmlFor="mqttEnabled" className="text-base font-semibold">
-							Enable MQTT
-						</Label>
-						<Switch
-							disabled
-							id="mqttEnabled"
-							checked={isMqttEnabled}
-							onCheckedChange={handleMqttToggle}
-						/>
-					</div>
-
-					{isMqttEnabled && (
-						<div className="space-y-4">
-							<div className="space-y-2">
-								<Label htmlFor="mqtt-url">MQTT URL</Label>
-								<Input
-									id="mqtt-url"
-									placeholder="mqtt://example.com:1883"
-									{...register('url')}
-									onChange={handleInputChange}
-								/>
-							</div>
-
-							<div className="space-y-2">
-								<Label htmlFor="mqtt-topic">MQTT Topic</Label>
-								<Input
-									id="mqtt-topic"
-									placeholder="my/mqtt/topic"
-									{...register('topic')}
-									onChange={handleInputChange}
-								/>
-							</div>
-
-							<div className="space-y-2">
-								<Label htmlFor="mqtt-message-format">Message Format</Label>
-								<Select
-									onValueChange={(value) =>
-										handleSelectChange('messageFormat', value)
-									}
-									defaultValue={watch('messageFormat')}
-								>
-									<SelectTrigger id="mqtt-message-format">
-										<SelectValue placeholder="Select a message format" />
-									</SelectTrigger>
-									<SelectContent>
-										<SelectItem value="json">JSON</SelectItem>
-										<SelectItem value="csv">CSV</SelectItem>
-									</SelectContent>
-								</Select>
-							</div>
-
-							<div className="space-y-2">
-								<Label htmlFor="mqtt-decode-options">Decode Options</Label>
-								<Textarea
-									id="mqtt-decode-options"
-									placeholder="Enter decode options as JSON"
-									className="resize-none"
-									{...register('decodeOptions')}
-									onChange={handleInputChange}
-								/>
-							</div>
-
-							<div className="space-y-2">
-								<Label htmlFor="mqtt-connection-options">
-									Connection Options
-								</Label>
-								<Textarea
-									id="mqtt-connection-options"
-									placeholder="Enter connection options as JSON"
-									className="resize-none"
-									{...register('connectionOptions')}
-									onChange={handleInputChange}
-								/>
-							</div>
-						</div>
-					)}
-				</CardContent>
-			</Card>
-
-			{/* TTN Configuration */}
-			<Card className="mt-6 w-full">
-				<CardHeader>
-					<CardTitle>TTN Configuration</CardTitle>
-					<CardDescription>
-						Configure your TTN (The Things Network) settings
-					</CardDescription>
-				</CardHeader>
-				<CardContent>
-					<div className="flex items-center justify-between space-x-2">
-						<Label htmlFor="ttnEnabled" className="text-base font-semibold">
-							Enable TTN
-						</Label>
-						<Switch
-							disabled
-							id="ttnEnabled"
-							checked={isTtnEnabled}
-							onCheckedChange={handleTtnToggle}
-						/>
-					</div>
-
-					{isTtnEnabled && (
-						<div className="space-y-4">
-							<div className="space-y-2">
-								<Label htmlFor="ttn-dev-id">Device ID</Label>
-								<Input
-									id="ttn-dev-id"
-									placeholder="Enter TTN Device ID"
-									{...register('dev_id')}
-									onChange={handleInputChange}
-								/>
-							</div>
-
-							<div className="space-y-2">
-								<Label htmlFor="ttn-app-id">Application ID</Label>
-								<Input
-									id="ttn-app-id"
-									placeholder="Enter TTN Application ID"
-									{...register('app_id')}
-									onChange={handleInputChange}
-								/>
-							</div>
-
-							<div className="space-y-2">
-								<Label htmlFor="ttn-profile">Profile</Label>
-								<Select
-									onValueChange={(value) =>
-										handleSelectChange('profile', value)
-									}
-									defaultValue={watch('profile')}
-								>
-									<SelectTrigger id="ttn-profile">
-										<SelectValue placeholder="Select a profile" />
-									</SelectTrigger>
-									<SelectContent>
-										<SelectItem value="lora-serialization">
-											Lora Serialization
-										</SelectItem>
-										<SelectItem value="sensebox/home">Sensebox/Home</SelectItem>
-										<SelectItem value="json">JSON</SelectItem>
-										<SelectItem value="debug">Debug</SelectItem>
-										<SelectItem value="cayenne-lpp">Cayenne LPP</SelectItem>
-									</SelectContent>
-								</Select>
-							</div>
-
-							<div className="space-y-2">
-								<Label htmlFor="ttn-decode-options">Decode Options</Label>
-								<Textarea
-									id="ttn-decode-options"
-									placeholder="Enter decode options as JSON"
-									className="resize-none"
-									{...register('decodeOptions')}
-									onChange={handleInputChange}
-								/>
-							</div>
+import Form from "@rjsf/core";
+import validator from "@rjsf/validator-ajv8";
+import { useEffect, useState } from "react";
+import { useFormContext } from "react-hook-form";
+import { CheckboxWidget } from "~/components/rjsf/checkboxWidget";
+import { FieldTemplate } from "~/components/rjsf/fieldTemplate";
+import { BaseInputTemplate } from "~/components/rjsf/inputTemplate";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "~/components/ui/card";
+import { Label } from "~/components/ui/label";
+import { Switch } from "~/components/ui/switch";
+
+interface Integration {
+  id: string;
+  name: string;
+  slug: string;
+  icon?: string | null;
+  description?: string | null;
+  order: number;
+}
 
-							<div className="space-y-2">
-								<Label htmlFor="ttn-port">Port</Label>
-								<Input
-									id="ttn-port"
-									placeholder="Enter TTN Port"
-									type="number"
-									{...register('port', { valueAsNumber: true })}
-									onChange={handleInputChange}
-								/>
-							</div>
-						</div>
-					)}
-				</CardContent>
-			</Card>
-		</>
-	)
+interface AdvancedStepProps {
+  integrations: Integration[];
 }
+
+export function AdvancedStep({ integrations }: AdvancedStepProps) {
+  const { watch, setValue, resetField } = useFormContext();
+  const [schemas, setSchemas] = useState<Record<string, { schema: any; uiSchema: any }>>({});
+  const [loading, setLoading] = useState<Record<string, boolean>>({});
+
+
+  const loadSchema = async (slug: string) => {
+    if (schemas[slug]) return;
+
+    setLoading((prev) => ({ ...prev, [slug]: true }));
+
+    try {
+      const res = await fetch(`/api/integrations/schema/${slug}`);
+      if (!res.ok) throw new Error(`Failed to fetch ${slug} schema`);
+
+        const data = await res.json();
+        setSchemas((prev) => ({ ...prev, [slug]: data }));
+      } catch (err) {
+        console.error(`Failed to load ${slug} schema`, err);
+      } finally {
+        setLoading((prev) => ({ ...prev, [slug]: false }));
+      }
+  }
+
+  const handleToggle = (slug: string, checked: boolean) => {
+    setValue(`${slug}Enabled`, checked);
+
+    if (checked) {
+      void loadSchema(slug);
+    } else {
+      resetField(`${slug}Config`);
+    }
+  };
+
+  return (
+    <>
+      {integrations.map((intg) => {
+        const enabled = watch(`${intg.slug}Enabled`) ?? false;
+        const config = watch(`${intg.slug}Config`) ?? {};
+        const isLoading = loading[intg.slug] ?? false;
+        const schema = schemas[intg.slug];
+
+        return (
+          <Card key={intg.id} className="w-full mb-6">
+            <CardHeader>
+              <CardTitle>{intg.name} Configuration</CardTitle>
+              {intg.description && (
+                <CardDescription>{intg.description}</CardDescription>
+              )}
+            </CardHeader>
+
+            <CardContent className="space-y-4">
+              <div className="flex items-center justify-between">
+                <Label htmlFor={`${intg.slug}Enabled`} className="text-base font-semibold">
+                  Enable {intg.name}
+                </Label>
+                <Switch
+                  id={`${intg.slug}Enabled`}
+                  checked={enabled}
+                  onCheckedChange={(checked) => handleToggle(intg.slug, checked)}
+                />
+              </div>
+
+              {enabled && (
+                <>
+                  {isLoading && (
+                    <p className="text-sm text-muted-foreground">
+                      Loading {intg.name} configuration…
+                    </p>
+                  )}
+
+                  {schema && (
+                    <Form
+                      widgets={{ CheckboxWidget }}
+                      templates={{ FieldTemplate, BaseInputTemplate }}
+                      schema={schema.schema}
+                      uiSchema={schema.uiSchema}
+                      validator={validator}
+                      formData={config}
+                      onChange={(e) => {
+                        setValue(`${intg.slug}Config`, e.formData, {
+                          shouldDirty: true,
+                          shouldValidate: true,
+                        });
+                      }}
+                      onSubmit={() => {}}
+                    >
+                      <></>
+                    </Form>
+                  )}
+                </>
+              )}
+            </CardContent>
+          </Card>
+        );
+      })}
+    </>
+  );
+}