feat: pages setup menu - creating menu and store

olzzon · Oct 21, 2020 · 70f7374 · 70f7374
1 parent 5425603
commit 70f7374
Show file tree

Hide file tree

Showing 6 changed files with 51 additions and 15 deletions.
diff --git a/client/components/App.tsx b/client/components/App.tsx
@@ -9,6 +9,7 @@ import Settings from './Settings'
 import Storage from './RoutingStorage'
 import MiniChannels from './MiniChannels'
 import { withTranslation } from 'react-i18next'
+import PagesSettings from './PagesSettings'
 
 export interface IAppProps {
     store: IStore
@@ -39,6 +40,8 @@ class App extends React.Component<IAppProps> {
         return (
             nextProps.store.settings[0].showSettings !=
                 this.props.store.settings[0].showSettings ||
+                nextProps.store.settings[0].showPagesSetup !=
+                this.props.store.settings[0].showPagesSetup ||
             nextProps.store.settings[0].serverOnline !=
                 this.props.store.settings[0].serverOnline ||
             nextProps.store.settings[0].showStorage !=
@@ -114,6 +117,7 @@ class App extends React.Component<IAppProps> {
                 {window.location.search.includes('minimonitor=1') && (
                     <MiniChannels />
                 )}
+                {this.props.store.settings[0].showPagesSetup && <PagesSettings />}
                 {this.props.store.settings[0].showStorage && <Storage />}
                 {this.props.store.settings[0].showSettings && <Settings />}
             </div>

diff --git a/client/components/Channels.tsx b/client/components/Channels.tsx
@@ -8,6 +8,7 @@ import '../assets/css/Channels.css'
 import { Store } from 'redux'
 import {
     storeSetPage,
+    storeShowPagesSetup,
     storeShowSettings,
     storeShowStorage,
 } from '../../server/reducers/settingsActions'
@@ -83,6 +84,10 @@ class Channels extends React.Component<IChannelsInjectProps & Store> {
         this.props.dispatch(storeShowStorage())
     }
 
+    handleShowPagesSetting() {
+        this.props.dispatch(storeShowPagesSetup())
+    }
+
     handlePages(type: PageType, i: number | string) {
         if (typeof i === 'string') {
             this.props.dispatch(storeSetPage(type, i))
@@ -121,7 +126,7 @@ class Channels extends React.Component<IChannelsInjectProps & Store> {
             }
         }
 
-        const numberedButtons = []
+/*        const numberedButtons = []
         const numberOfFaders = this.props.settings.numberOfFaders
         const pageLength = this.props.settings.pageLength
         for (let i = 0; i < Math.ceil(numberOfFaders / pageLength); i++) {
@@ -142,12 +147,12 @@ class Channels extends React.Component<IChannelsInjectProps & Store> {
                 </button>
             )
         }
-
+*/
         const isAllActive = curPage.type === PageType.All
         return (
             <React.Fragment>
                 {customPageButtons}
-                {numberedButtons}
+                {/*numberedButtons*/}
                 <button
                     className={ClassNames('button half', {
                         active: isAllActive,
@@ -344,6 +349,14 @@ class Channels extends React.Component<IChannelsInjectProps & Store> {
                             </React.Fragment>
                         )}
                     </div>
+                    <button
+                                className="button half channels-show-settings-button"
+                                onClick={() => {
+                                    this.handleShowPagesSetting()
+                                }}
+                            >
+                                PAGES SETUP
+                        </button>
                     <div className="bot">{this.renderPageButtons()}</div>
                 </div>
             </div>

diff --git a/client/index.tsx b/client/index.tsx
@@ -19,6 +19,11 @@ import { I18nextProvider } from 'react-i18next'
 import i18n from './i18n'
 import { IMixerProtocol } from '../server/constants/MixerProtocolInterface'
 
+export interface ICustomPages {
+    id: string
+    label: string
+    faders: Array<number>
+}
 declare global {
     interface Window {
         storeRedux: any
@@ -29,11 +34,7 @@ declare global {
         snapshotFileList: string[]
         ccgFileList: string[]
         mixerPresetList: string[]
-        customPagesList: Array<{
-            id: string
-            label: string
-            faders: Array<number>
-        }>
+        customPagesList: ICustomPages[]
     }
 }
 

diff --git a/server/reducers/settingsActions.ts b/server/reducers/settingsActions.ts
@@ -1,6 +1,7 @@
 import { PageType } from './settingsReducer'
 
 export const TOGGLE_SHOW_SETTINGS = 'TOGGLE_SHOW_SETTINGS'
+export const TOGGLE_SHOW_PAGES_SETUP = 'TOGGLE_SHOW_PAGES_SETUP'
 export const TOGGLE_SHOW_CHAN_STRIP = 'TOGGLE_SHOW_CHAN_STRIP'
 export const TOGGLE_SHOW_OPTION = 'TOGGLE_SHOW_OPTION'
 export const TOGGLE_SHOW_MONITOR_OPTIONS = 'TOGGLE_SHOW_MONITOR_OPTIONS'
@@ -16,6 +17,11 @@ export const storeShowSettings = () => {
         type: TOGGLE_SHOW_SETTINGS,
     }
 }
+export const storeShowPagesSetup = () => {
+    return {
+        type: TOGGLE_SHOW_PAGES_SETUP,
+    }
+}
 export const storeShowChanStrip = (faderIndex: number) => {
     return {
         type: TOGGLE_SHOW_CHAN_STRIP,

diff --git a/server/reducers/settingsReducer.ts b/server/reducers/settingsReducer.ts
@@ -11,6 +11,7 @@ import {
     TOGGLE_SHOW_MONITOR_OPTIONS,
     SET_SERVER_ONLINE,
     SET_PAGE,
+    TOGGLE_SHOW_PAGES_SETUP,
 } from '../reducers/settingsActions'
 
 export enum PageType {
@@ -23,6 +24,7 @@ export interface ISettings {
     /** UI state (non persistant) */
     showSnaps: boolean
     showSettings: boolean
+    showPagesSetup: boolean
     showChanStrip: number
     showOptions: number | false
     showMonitorOptions: number
@@ -80,6 +82,7 @@ const defaultSettingsReducerState: Array<ISettings> = [
     {
         showSnaps: false,
         showSettings: false,
+        showPagesSetup: false,
         showChanStrip: -1,
         showOptions: false,
         showMonitorOptions: -1,
@@ -131,6 +134,10 @@ export const settings = (
         case TOGGLE_SHOW_SETTINGS:
             nextState[0].showSettings = !nextState[0].showSettings
             return nextState
+        case TOGGLE_SHOW_PAGES_SETUP:
+            nextState[0].showPagesSetup = !nextState[0].showPagesSetup
+            return nextState
+
         case TOGGLE_SHOW_CHAN_STRIP:
             if (nextState[0].showChanStrip !== action.channel) {
                 nextState[0].showChanStrip = action.channel

diff --git a/storage/pages.json b/storage/pages.json
@@ -1,7 +1,12 @@
-[
-    {
-        "id": "example",
-        "label": "Custom",
-        "faders": [0, 1, 2, 3, 4]
-    }
-]
+[
+    {
+        "id": "example",
+        "label": "Live",
+        "faders": [12, 13, 14]
+    },
+    {
+        "id": "studio",
+        "label": "Studie",
+        "faders": [0, 1, 2, 3, 4, 9, 11]
+    }
+]