Add options for reordering and hiding cameras selectively

web/src/Sidebar.jsx

@@ -3,6 +3,7 @@ import LinkedLogo from './components/LinkedLogo';
 import { Match } from 'preact-router/match';
 import { memo } from 'preact/compat';
 import { ENV } from './env';
+import { useMemo } from 'preact/hooks'
 import useSWR from 'swr';
 import NavigationDrawer, { Destination, Separator } from './components/NavigationDrawer';
 
@@ -19,35 +20,14 @@ export default function Sidebar() {
       <Match path="/cameras/:camera/:other?">
         {({ matches }) =>
           matches ? (
-            <Fragment>
-              <Separator />
-              {Object.entries(cameras).map(([camera]) => (
-                <Destination key={camera} href={`/cameras/${camera}`} text={camera} />
-              ))}
-              <Separator />
-            </Fragment>
+            <SortedCameras unsortedCameras={cameras} />
           ) : null
         }
       </Match>
       <Match path="/recording/:camera/:date?/:hour?/:seconds?">
         {({ matches }) =>
           matches ? (
-            <Fragment>
-              <Separator />
-              {Object.entries(cameras).map(([camera, conf]) => {
-                if (conf.record.enabled) {
-                  return (
-                    <Destination
-                      path={`/recording/${camera}/:date?/:hour?/:seconds?`}
-                      href={`/recording/${camera}`}
-                      text={camera}
-                    />
-                  );
-                }
-                return null;
-              })}
-              <Separator />
-            </Fragment>
+            <SortedRecordingCameras unsortedCameras={cameras} />
           ) : null
         }
       </Match>
@@ -68,10 +48,58 @@ export default function Sidebar() {
   );
 }
 
+function SortedCameras({ unsortedCameras }) {
+
+  const sortedCameras = useMemo(() =>
+    Object.entries(unsortedCameras)
+      .filter(([_, conf]) => conf.ui.show)
+      .sort(([_, aConf], [__, bConf]) => aConf.ui.order === bConf.ui.order ? 0 : (aConf.ui.order > bConf.ui.order ? 1 : -1)),
+  [unsortedCameras]);
+
+  return (
+    <Fragment>
+      <Separator />
+      {sortedCameras.map(([camera]) => (
+        <Destination key={camera} href={`/cameras/${camera}`} text={camera} />
+      ))}
+      <Separator />
+    </Fragment>
+  );
+}
+
+function SortedRecordingCameras({ unsortedCameras }) {
+
+  const sortedCameras = useMemo(() =>
+    Object.entries(unsortedCameras)
+      .filter(([_, conf]) => conf.ui.show)
+      .sort(([_, aConf], [__, bConf]) => aConf.ui.order === bConf.ui.order ? 0 : (aConf.ui.order > bConf.ui.order ? 1 : -1)),
+  [unsortedCameras]);
+
+  return (
+    <Fragment>
+      <Separator />
+      {sortedCameras.map(([camera, conf]) => {
+        if (conf.record.enabled) {
+          return (
+            <Destination
+              key={camera}
+              path={`/recording/${camera}/:date?/:hour?/:seconds?`}
+              href={`/recording/${camera}`}
+              text={camera}
+            />
+          );
+        }
+        return null;
+      })}
+      <Separator />
+    </Fragment>
+  );
+}
+
 const Header = memo(() => {
   return (
     <div className="text-gray-500">
       <LinkedLogo />
     </div>
   );
-});
+});

web/src/routes/Cameras.jsx

@@ -1,4 +1,4 @@
-import { h } from 'preact';
+import { h, Fragment } from 'preact';
 import ActivityIndicator from '../components/ActivityIndicator';
 import Card from '../components/Card';
 import CameraImage from '../components/CameraImage';
@@ -16,10 +16,25 @@ export default function Cameras() {
     <ActivityIndicator />
   ) : (
     <div className="grid grid-cols-1 3xl:grid-cols-3 md:grid-cols-2 gap-4 p-2 px-4">
-      {Object.entries(config.cameras).map(([camera, conf]) => (
+      <SortedCameras unsortedCameras={config.cameras} />
+    </div>
+  );
+}
+
+function SortedCameras({ unsortedCameras }) {
+
+  const sortedCameras = useMemo(() =>
+    Object.entries(unsortedCameras)
+      .filter(([_, conf]) => conf.ui.show)
+      .sort(([_, aConf], [__, bConf]) => aConf.ui.order === bConf.ui.order ? 0 : (aConf.ui.order > bConf.ui.order ? 1 : -1)),
+  [unsortedCameras]);
+
+  return (
+    <Fragment>
+      {sortedCameras.map(([camera, conf]) => (
         <Camera key={camera} name={camera} conf={conf} />
       ))}
-    </div>
+    </Fragment>
   );
 }
 
@@ -67,4 +82,4 @@ function Camera({ name }) {
   return (
     <Card buttons={buttons} href={href} header={name} icons={icons} media={<CameraImage camera={name} stretch />} />
   );
-}
+}