add order for scenes-view

src/pages/Scenes/Scenes.tsx

@@ -20,12 +20,16 @@ import ScenesPlaylist from './ScenesPlaylist'
 import ScenesMenu from './ScenesMenu'
 import useStyles from './Scenes.styles'
 import SceneImage from './ScenesImage'
+import { ISceneOrder } from '../../store/api/storeScenes'
 
 const Scenes = () => {
   const classes = useStyles()
   const theme = useTheme()
+
   const getScenes = useStore((state) => state.getScenes)
   const scenes = useStore((state) => state.scenes)
+  const sceneOrder = useStore((state) => state.sceneOrder)
+  const setSceneOrder = useStore((state) => state.setSceneOrder)
   const features = useStore((state) => state.features)
   const activateScene = useStore((state) => state.activateScene)
   const infoAlerts = useStore((state) => state.ui.infoAlerts)
@@ -47,6 +51,19 @@ const Scenes = () => {
     getScenes()
   }, [getScenes])
 
+  useEffect(() => {
+    // initial scene order if not set
+    const sc = JSON.parse(JSON.stringify(sceneOrder)) as ISceneOrder[]
+    Object.keys(scenes).map((s, i) => {
+      if (!(sc.some(o => o.sceneId === s))) {
+        return sc.push({sceneId: s, order: i})
+      }
+      return null
+    })
+    setSceneOrder(sc)
+    // eslint-disable-next-line
+  }, [scenes])
+
   const sceneFilter = (sc: string) =>
     scenes[sc].scene_tags
       ?.split(',')
@@ -176,6 +193,7 @@ const Scenes = () => {
                 key={i}
                 mt={['0.5rem', '0.5rem', 0, 0, 0]}
                 p="8px !important"
+                order={sceneOrder.find(o => o.sceneId === s)?.order || 0}
               >
                 <Card
                   className={classes.root}

src/pages/Scenes/ScenesMenu.tsx

@@ -1,16 +1,20 @@
 import { useState, MouseEvent } from 'react'
 import { Menu, MenuItem, ListItemIcon, Button } from '@mui/material'
-import { PlaylistAdd, Edit, MoreVert } from '@mui/icons-material'
+import { PlaylistAdd, Edit, MoreVert, ChevronLeft, ChevronRight } from '@mui/icons-material'
 import Popover from '../../components/Popover/Popover'
 import useStore from '../../store/useStore'
 
 const ScenesMenu = ({ sceneId }: { sceneId: string }) => {
   const deleteScene = useStore((state) => state.deleteScene)
   const getScenes = useStore((state) => state.getScenes)
   const scenes = useStore((state) => state.scenes)
+  const sceneOrder = useStore((state) => state.sceneOrder)
   const addScene2PL = useStore((state) => state.addScene2PL)
+  const setSceneOrderUp = useStore((state) => state.setSceneOrderUp)
+  const setSceneOrderDown = useStore((state) => state.setSceneOrderDown)
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)
   const open = Boolean(anchorEl)
+  const order = sceneOrder.find((s) => s.sceneId === sceneId)?.order || -1
 
   const handleClose = () => {
     setAnchorEl(null)
@@ -26,12 +30,13 @@ const ScenesMenu = ({ sceneId }: { sceneId: string }) => {
       getScenes()
     })
   }
+
   return (
     <>
       <Button variant="text" onClick={handleClick} sx={{ minWidth: '32px' }}>
         <MoreVert />
       </Button>
-      <Menu anchorEl={anchorEl} open={open} onClose={handleClose}>
+      <Menu anchorEl={anchorEl} open={open} onClose={handleClose} anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }} transformOrigin={{ vertical: 'top', horizontal: 'right' }}>
         <MenuItem
           onClick={() => {
             setDialogOpenAddScene(false, true, sceneId, scenes[sceneId])
@@ -46,12 +51,27 @@ const ScenesMenu = ({ sceneId }: { sceneId: string }) => {
           onClick={() => {
             addScene2PL(sceneId)
             handleClose()
-          }}
-        >
+          }}>
           <ListItemIcon>
             <PlaylistAdd />
           </ListItemIcon>
         </MenuItem>
+        <MenuItem disabled={order < 1} onClick={()=>{
+          setSceneOrderUp(sceneId)
+          handleClose()
+        }}>
+          <ListItemIcon>
+            <ChevronLeft />
+          </ListItemIcon>
+        </MenuItem>
+        <MenuItem disabled={order >= sceneOrder.length - 1} onClick={()=>{
+          setSceneOrderDown(sceneId)
+          handleClose()
+        }}>
+          <ListItemIcon>
+            <ChevronRight />
+          </ListItemIcon>
+        </MenuItem>
         <Popover
           type="menuItem"
           onConfirm={() => {

src/store/api/storeScenes.tsx

@@ -3,6 +3,12 @@
 import { produce } from 'immer'
 import { Ledfx } from '../../api/ledfx'
 import type { IStore } from '../useStore'
+import useStore from '../useStore'
+
+export interface ISceneOrder {
+  sceneId: string,
+  order: number
+}
 
 const storeScenes = (set: any) => ({
   scenes: {} as Record<string, Record<string, any>>,
@@ -16,6 +22,72 @@ const storeScenes = (set: any) => ({
   scenePLrepeat: false,
   scenePLactiveIndex: -1,
   scenePLinterval: 2,
+  sceneOrder: [] as ISceneOrder[],
+  setSceneOrder: (order: ISceneOrder[]) => {
+    set(
+      produce((s: IStore) => {
+        s.sceneOrder = order
+      }),
+      false,
+      'setSceneOrder'
+    )
+  },
+  setSceneOrderUp: (sceneId: string) => {
+    let current, target = null
+    const sceneOrder = useStore.getState().sceneOrder
+    current = sceneOrder.find((s: ISceneOrder) => s.sceneId === sceneId) || null
+    if (!current || current.order < 1) return
+    target = sceneOrder.find((s: ISceneOrder) => s.order === current?.order - 1) || null
+    if (!target) return
+    // console.log('Move up', sceneId, current, target)
+
+    const newSceneOrder = sceneOrder.map((o: ISceneOrder) => {
+        if (o.sceneId === sceneId) {
+            return { ...o, order: target.order }
+        }
+        if (o.sceneId === target.sceneId) {
+            return { ...o, order: current.order }
+        }
+        return o
+    })
+
+    // console.log('changing from ', sceneOrder, 'to',  newSceneOrder)
+    set(
+      produce((s: IStore) => {
+        s.sceneOrder = newSceneOrder
+      }),
+      false,
+      'setSceneOrderUp'
+    )
+  },
+  setSceneOrderDown: (sceneId: string) => {
+    let current, target = null
+    const sceneOrder = useStore.getState().sceneOrder
+    current = sceneOrder.find((s: ISceneOrder) => s.sceneId === sceneId) || null
+    if (!current || current.order >= sceneOrder.length - 1) return
+    target = sceneOrder.find((s: ISceneOrder) => s.order === current?.order + 1) || null
+    if (!target) return
+    // console.log('Move down', sceneId, current, target)
+
+    const newSceneOrder = sceneOrder.map((o: ISceneOrder) => {
+        if (o.sceneId === sceneId) {
+            return { ...o, order: target.order }
+        }
+        if (o.sceneId === target.sceneId) {
+            return { ...o, order: current.order }
+        }
+        return o
+    })
+
+    // console.log('changing from ', sceneOrder, 'to',  newSceneOrder)
+    set(
+      produce((s: IStore) => {
+        s.sceneOrder = newSceneOrder
+      }),
+      false,
+      'setSceneOrderDown'
+    )
+  },
   toggleSceneUseIntervals: () => {
     set(
       produce((s: IStore) => {