feat: custom pages menu - working - ToDo: CSS

olzzon · Oct 21, 2020 · 329014a · 329014a
1 parent f755ece
commit 329014a
Show file tree

Hide file tree

Showing 5 changed files with 71 additions and 42 deletions.
diff --git a/client/components/PagesSettings.tsx b/client/components/PagesSettings.tsx
@@ -9,24 +9,21 @@ import { storeShowPagesSetup } from '../../server/reducers/settingsActions'
 import { IFader } from '../../server/reducers/fadersReducer'
 import Select from 'react-select'
 import { ICustomPages } from '..'
+import { SOCKET_GET_PAGES_LIST, SOCKET_SET_PAGES_LIST } from '../../server/constants/SOCKET_IO_DISPATCHERS'
 
 interface IPagesSettingsInjectProps {
     fader: IFader[]
 }
 
-interface IPagesProps {
-    pageIndex: number
-}
-
 class PagesSettings extends React.PureComponent<
-    IPagesProps & IPagesSettingsInjectProps & Store
+    IPagesSettingsInjectProps & Store
 > {
-    pageIndex: number
     pageList: { label: string; value: number }[]
+    state = { pageIndex: 0}
 
     constructor(props: any) {
         super(props)
-        this.pageIndex = 0 // this.props.pageIndex
+
         this.pageList = window.customPagesList.map(
             (page: ICustomPages, index: number) => {
                 return { label: page.label, value: index }
@@ -35,8 +32,8 @@ class PagesSettings extends React.PureComponent<
     }
 
     handleSelectPage(event: any) {
-        this.pageIndex = event.value
-        console.log('PAGE SELECTED', this.pageIndex)
+        this.setState({pageIndex: event.value})
+        console.log('PAGE SELECTED', this.state.pageIndex)
     }
 
     handleAssignFader(fader: number, event: any) {
@@ -47,11 +44,11 @@ class PagesSettings extends React.PureComponent<
                     'Unbind Fader from page ' +
                         String(fader + 1) +
                         ' from Page ' +
-                        String(this.pageIndex + 1)
+                        String(this.state.pageIndex + 1)
                 )
             ) {
-                window.customPagesList[this.pageIndex].faders.splice(
-                    window.customPagesList[this.pageIndex].faders.indexOf(
+                window.customPagesList[this.state.pageIndex].faders.splice(
+                    window.customPagesList[this.state.pageIndex].faders.indexOf(
                         fader
                     ),
                     1
@@ -64,12 +61,12 @@ class PagesSettings extends React.PureComponent<
                     'Bind Fader ' +
                         String(fader + 1) +
                         ' to Page ' +
-                        String(this.pageIndex + 1) +
+                        String(this.state.pageIndex + 1) +
                         '?'
                 )
             ) {
-                window.customPagesList[this.pageIndex].faders.push(fader)
-                window.customPagesList[this.pageIndex].faders.sort((a, b) => {
+                window.customPagesList[this.state.pageIndex].faders.push(fader)
+                window.customPagesList[this.state.pageIndex].faders.sort((a, b) => {
                     return a - b
                 })
             }
@@ -78,11 +75,17 @@ class PagesSettings extends React.PureComponent<
 
     handleClearRouting() {
         if (window.confirm('REMOVE ALL FADER ASSIGNMENTS????')) {
-            window.customPagesList[this.pageIndex].faders = []
+            window.customPagesList[this.state.pageIndex].faders = []
         }
     }
 
-    handleClose = () => {
+    handleCancel = () => {
+        window.socketIoClient.emit(SOCKET_GET_PAGES_LIST)
+        this.props.dispatch(storeShowPagesSetup())
+    }
+
+    handleSave = () => {
+        window.socketIoClient.emit(SOCKET_SET_PAGES_LIST, window.customPagesList)
         this.props.dispatch(storeShowPagesSetup())
     }
 
@@ -95,15 +98,15 @@ class PagesSettings extends React.PureComponent<
                             key={index}
                             className={ClassNames('channel-route-text', {
                                 checked: window.customPagesList[
-                                    this.pageIndex
+                                    this.state.pageIndex
                                 ].faders.includes(index),
                             })}
                         >
                             {' Fader ' + (index + 1) + ' : '}
                             <input
                                 type="checkbox"
                                 checked={window.customPagesList[
-                                    this.pageIndex
+                                    this.state.pageIndex
                                 ].faders.includes(index)}
                                 onChange={(event) =>
                                     this.handleAssignFader(index, event)
@@ -121,27 +124,40 @@ class PagesSettings extends React.PureComponent<
         return (
             <div className="channel-route-body">
                 <h2>CUSTOM PAGES</h2>
+                <button
+                    className="settings-cancel-button"
+                    onClick={() => this.handleClearRouting()}
+                >
+                    CLEAR ALL
+                </button>
+                <button
+                    className="settings-cancel-button"
+                    onClick={() => {
+                        this.handleCancel()
+                    }}
+                >
+                    CANCEL
+                </button>
+                <button
+                    className="settings-save-button"
+                    onClick={() => {
+                        this.handleSave()
+                    }}
+                >
+                    SAVE SETTINGS
+                </button>
                 <Select
                     value={{
                         label:
-                            window.customPagesList[this.pageIndex].label ||
-                            'Page : ' + (this.pageIndex + 1),
-                        value: this.pageIndex,
+                            window.customPagesList[this.state.pageIndex].label ||
+                            'Page : ' + (this.state.pageIndex + 1),
+                        value: this.state.pageIndex,
                     }}
                     onChange={(event: any) => this.handleSelectPage(event)}
                     options={this.pageList}
                 />
-                'Page : ' + (this.pageIndex + 1)}
-                <button className="close" onClick={() => this.handleClose()}>
-                    X
-                </button>
-                <button
-                    className="button"
-                    onClick={() => this.handleClearRouting()}
-                >
-                    CLEAR ALL
-                </button>
                 {this.renderFaderList()}
+
             </div>
         )
     }

diff --git a/server/MainThreadHandler.ts b/server/MainThreadHandler.ts
@@ -17,6 +17,7 @@ import {
     setCcgDefault,
     getMixerPresetList,
     getCustomPages,
+    saveCustomPages,
 } from './utils/SettingsStorage'
 import {
     SOCKET_TOGGLE_PGM,
@@ -61,6 +62,7 @@ import {
     SOCKET_RETURN_PAGES_LIST,
     SOCKET_TOGGLE_AMIX,
     SOCKET_TOGGLE_ALL_MANUAL,
+    SOCKET_SET_PAGES_LIST,
 } from './constants/SOCKET_IO_DISPATCHERS'
 import {
     storeFaderLevel,
@@ -204,6 +206,10 @@ export class MainThreadHandlers {
                 logger.info('Get custom pages list', {})
                 socketServer.emit(SOCKET_RETURN_PAGES_LIST, getCustomPages())
             })
+            .on(SOCKET_SET_PAGES_LIST, (payload: any) => {
+                saveCustomPages(payload)
+                logger.info('Save custom pages list: ' + String(payload), {})
+            })
             .on(SOCKET_SAVE_SETTINGS, (payload: any) => {
                 logger.info('Save settings :' + String(payload), {})
                 saveSettings(payload)

diff --git a/server/constants/SOCKET_IO_DISPATCHERS.ts b/server/constants/SOCKET_IO_DISPATCHERS.ts
@@ -51,3 +51,4 @@ export const SOCKET_SET_FULL_STORE = 'setFullStore'
 export const SOCKET_SET_STORE_FADER = 'setStoreFader'
 export const SOCKET_SET_STORE_CHANNEL = 'setStoreChannel'
 export const SOCKET_SET_MIXER_ONLINE = 'setStoreSettings'
+export const SOCKET_SET_PAGES_LIST = 'setPagesList'
diff --git a/server/utils/SettingsStorage.ts b/server/utils/SettingsStorage.ts
@@ -191,3 +191,17 @@ export const getCustomPages = (): object | undefined => {
         return
     }
 }
+
+export const saveCustomPages = (
+    stateCustomPages: any,
+    fileName: string = 'pages.json'
+) => {
+    let json = JSON.stringify(stateCustomPages)
+    fs.writeFile(path.join('storage', fileName), json, 'utf8', (error: any) => {
+        if (error) {
+            logger.error('Error saving pages file' + String(error), {})
+        } else {
+            logger.info('Pages ' + fileName + ' Saved to storage folder', {})
+        }
+    })
+}
diff --git a/storage/pages.json b/storage/pages.json
@@ -1,12 +1,4 @@
 [
-    {
-        "id": "example",
-        "label": "Live",
-        "faders": [12, 13, 14]
-    },
-    {
-        "id": "studio",
-        "label": "Studie",
-        "faders": [0, 1, 2, 3, 4, 9, 11]
-    }
+    { "id": "example", "label": "Live", "faders": [1, 2, 3, 8, 12, 13, 14] },
+    { "id": "studio", "label": "Studie", "faders": [0, 1, 3, 4, 9, 11] }
 ]