feat: custom pages setup - change label support

client/components/PagesSettings.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { ChangeEvent } from 'react'
 //@ts-ignore
 import * as ClassNames from 'classnames'
 
@@ -9,7 +9,10 @@ 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'
+import {
+    SOCKET_GET_PAGES_LIST,
+    SOCKET_SET_PAGES_LIST,
+} from '../../server/constants/SOCKET_IO_DISPATCHERS'
 
 interface IPagesSettingsInjectProps {
     fader: IFader[]
@@ -19,7 +22,7 @@ class PagesSettings extends React.PureComponent<
     IPagesSettingsInjectProps & Store
 > {
     pageList: { label: string; value: number }[]
-    state = { pageIndex: 0}
+    state = { pageIndex: 0, label: window.customPagesList[0].label }
 
     constructor(props: any) {
         super(props)
@@ -32,7 +35,10 @@ class PagesSettings extends React.PureComponent<
     }
 
     handleSelectPage(event: any) {
-        this.setState({pageIndex: event.value})
+        this.setState({ pageIndex: event.value })
+        this.setState({
+            label: window.customPagesList[event.value].label,
+        })
         console.log('PAGE SELECTED', this.state.pageIndex)
     }
 
@@ -66,13 +72,22 @@ class PagesSettings extends React.PureComponent<
                 )
             ) {
                 window.customPagesList[this.state.pageIndex].faders.push(fader)
-                window.customPagesList[this.state.pageIndex].faders.sort((a, b) => {
-                    return a - b
-                })
+                window.customPagesList[this.state.pageIndex].faders.sort(
+                    (a, b) => {
+                        return a - b
+                    }
+                )
             }
         }
     }
 
+    handleLabel = (event: ChangeEvent<HTMLInputElement>) => {
+        this.setState({ label: event.target.value })
+        this.pageList[this.state.pageIndex].label =
+            window.customPagesList[this.state.pageIndex].label
+        window.customPagesList[this.state.pageIndex].label = event.target.value
+    }
+
     handleClearRouting() {
         if (window.confirm('REMOVE ALL FADER ASSIGNMENTS????')) {
             window.customPagesList[this.state.pageIndex].faders = []
@@ -85,7 +100,10 @@ class PagesSettings extends React.PureComponent<
     }
 
     handleSave = () => {
-        window.socketIoClient.emit(SOCKET_SET_PAGES_LIST, window.customPagesList)
+        window.socketIoClient.emit(
+            SOCKET_SET_PAGES_LIST,
+            window.customPagesList
+        )
         this.props.dispatch(storeShowPagesSetup())
     }
 
@@ -149,15 +167,24 @@ class PagesSettings extends React.PureComponent<
                 <Select
                     value={{
                         label:
-                            window.customPagesList[this.state.pageIndex].label ||
+                            window.customPagesList[this.state.pageIndex]
+                                .label ||
                             'Page : ' + (this.state.pageIndex + 1),
                         value: this.state.pageIndex,
                     }}
                     onChange={(event: any) => this.handleSelectPage(event)}
                     options={this.pageList}
                 />
+                <label className="settings-input-field">
+                    LABEL :
+                    <input
+                        name="label"
+                        type="text"
+                        value={this.state.label}
+                        onChange={(event) => this.handleLabel(event)}
+                    />
+                </label>
                 {this.renderFaderList()}
-
             </div>
         )
     }