FEAT: Ability to reorder & ability to hide Cameras in UI (#2981)

* Add options for reordering and hiding cameras selectively

* Add newline at end of camera file

* Make each camera for birdseye togglable as well

* Update names to be less ambiguous

* Update defaults

* Include sidebar change

* Remove birdseye toggle (will be added in separate PR)

* Remove birdseye toggle (will be added in separate PR)

* Remove birdseye toggle (will be added in separate PR)

* Update sidebar to only sort cameras once

* Simplify sorting logic

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.dashboard)
+      .sort(([_, aConf], [__, bConf]) => aConf.ui.order - bConf.ui.order),
+  [unsortedCameras]);
+
+  return (
+    <Fragment>
+      {sortedCameras.map(([camera, conf]) => (
         <Camera key={camera} name={camera} conf={conf} />
       ))}
-    </div>
+    </Fragment>
   );
 }