Fix/device detail respect sort order

app/components/device-detail/device-detail-box.tsx

@@ -99,6 +99,11 @@ export default function DeviceDetailBox() {
 	const sensorIds = new Set()
 
 	const data = useLoaderData<typeof loader>()
+	const exploreData = matches.find((match) => match.pathname === '/explore')
+		?.loaderData as { user?: { id?: string } } | undefined
+	const isOwner =
+		typeof data.device?.userId === 'string' &&
+		exploreData?.user?.id === data.device.userId
 	const nodeRef = useRef<HTMLDivElement>(null)
 	// state variables
 	const [open, setOpen] = useState(true)
@@ -111,7 +116,9 @@ export default function DeviceDetailBox() {
 	const [sensors, setSensors] = useState<SensorWithLatestMeasurement[]>()
 	useEffect(() => {
 		const sortedSensors = [...(data.sensors as any)].sort(
-			(a, b) => (a.id as unknown as number) - (b.id as unknown as number),
+			(a, b) =>
+				(a.order ?? Number.MAX_SAFE_INTEGER) -
+					(b.order ?? Number.MAX_SAFE_INTEGER) || a.id.localeCompare(b.id),
 		)
 		setSensors(sortedSensors)
 	}, [data])
@@ -192,7 +199,7 @@ export default function DeviceDetailBox() {
 				>
 					<div
 						ref={nodeRef}
-						className="absolute top-14 right-4 bottom-6 left-4 z-40 flex flex-row px-4 py-2 md:top-auto md:bottom-[30px] md:left-[10px] md:max-h-[calc(100vh-8rem)] md:w-1/3 md:p-0"
+						className="absolute top-14 right-4 bottom-6 left-4 z-40 flex flex-row px-4 py-2 md:top-auto md:bottom-7.5 md:left-2.5 md:max-h-[calc(100vh-8rem)] md:w-1/3 md:p-0"
 					>
 						<div
 							id="deviceDetailBox"
@@ -454,6 +461,19 @@ export default function DeviceDetailBox() {
 														: ''
 												}
 											>
+												{isOwner && (
+													<Alert className="mb-4 py-3">
+														<AlertDescription className="text-xs">
+															{t('sensor_order_hint')}{' '}
+															<Link
+																to={`/device/${data.device.id}/edit/sensors`}
+																className="font-medium underline underline-offset-4"
+															>
+																{t('sensor_order_hint_link')}
+															</Link>
+														</AlertDescription>
+													</Alert>
+												)}
 												<div className="grid gap-4 md:grid-cols-2 2xl:grid-cols-4">
 													{sensors &&
 														sensors.map(
@@ -649,7 +669,7 @@ export default function DeviceDetailBox() {
 					onClick={() => {
 						setOpen(true)
 					}}
-					className="absolute bottom-[10px] left-4 flex cursor-pointer rounded-xl border border-gray-100 bg-white shadow-lg transition-colors duration-300 ease-in-out hover:brightness-90 sm:bottom-[30px] sm:left-[10px] dark:bg-zinc-800 dark:text-zinc-200 dark:opacity-90"
+					className="absolute bottom-2.5 left-4 flex cursor-pointer rounded-xl border border-gray-100 bg-white shadow-lg transition-colors duration-300 ease-in-out hover:brightness-90 sm:bottom-7.5 sm:left-2.5 dark:bg-zinc-800 dark:text-zinc-200 dark:opacity-90"
 				>
 					<TooltipProvider>
 						<Tooltip>

app/db/models/device.server.ts

@@ -387,6 +387,9 @@ export async function updateDevice(
 				)
 			}
 
+			let nextSensorOrder =
+				Math.max(...existingSensors.map((sensor) => sensor.order ?? -1)) + 1
+
 			for (const s of args.sensors) {
 				const hasDeleted = 'deleted' in s
 				const hasEdited = 'edited' in s
@@ -423,7 +426,9 @@ export async function updateDevice(
 						sensorType: s.sensorType,
 						icon: s.icon,
 						deviceId,
+						order: nextSensorOrder,
 					})
+					nextSensorOrder += 1
 				} else if (hasEdited && s._id) {
 					const sensorExists = existingSensors.some(
 						(existing) => existing.id === s._id,
@@ -894,7 +899,7 @@ export async function createDevice(deviceData: any, userId: string) {
 				Array.isArray(sensorsToAdd) &&
 				sensorsToAdd.length > 0
 			) {
-				for (const sensorData of sensorsToAdd) {
+				for (const [index, sensorData] of sensorsToAdd.entries()) {
 					const [newSensor] = await tx
 						.insert(sensor)
 						.values({
@@ -903,6 +908,7 @@ export async function createDevice(deviceData: any, userId: string) {
 							sensorType: sensorData.sensorType,
 							icon: sensorData.icon,
 							deviceId: createdDevice.id,
+							order: sensorData.order ?? index,
 						})
 						.returning()
 

app/db/models/sensor.server.ts

@@ -96,6 +96,8 @@ export async function getSensorsWithLastMeasurement(
         s.sensor_type AS "sensorType",
         s.icon,
         s.status,
+        s.device_id AS "deviceId",
+        s."order",
         json_agg(
           json_build_object(
             'value', measure.value,
@@ -113,7 +115,8 @@ export async function getSensorsWithLastMeasurement(
         LIMIT ${count}
       ) AS measure ON true
       WHERE s.device_id = ${deviceId}
-      GROUP BY s.id;`,
+      GROUP BY s.id
+      ORDER BY s."order" ASC, s.id ASC;`,
 	)
 
 	const cast = [...result].map((r) => {

public/locales/de/device-detail-box.json

@@ -8,6 +8,8 @@
 	"open_external_link": "Externen Link öffnen",
 	"description": "Beschreibung",
 	"sensors": "Sensoren",
+	"sensor_order_hint": "Du möchtest die Reihenfolge der Sensoren ändern? Das geht in den",
+	"sensor_order_hint_link": "Sensoreinstellungen",
 	"compare_devices": "Geräte vergleichen",
 	"choose_device_for_comparison": "Wähle ein Gerät auf der Karte für den Vergleich.",
 	"open_device_details": "Öffne Gerätedetails"

public/locales/en/device-detail-box.json

@@ -8,6 +8,8 @@
 	"open_external_link": "Open external link",
 	"description": "Description",
 	"sensors": "Sensors",
+	"sensor_order_hint": "Want to change the sensor order? You can reorder them in",
+	"sensor_order_hint_link": "sensor settings",
 	"compare_devices": "Compare devices",
 	"choose_device_for_comparison": "Choose a device on the map to compare with.",
 	"open_device_details": "Open device details"