From ef1a9baa9f6e98255ab95fec560b70b0dd1c230d Mon Sep 17 00:00:00 2001
From: olzzon <github@olzzon.dk>
Date: Thu, 27 Jun 2019 10:33:27 +0200
Subject: [PATCH] feat: ChannelTypes - preparing settings for
 numberOfChannelTypes

---
 src/components/Settings.tsx | 24 +++++++++++++++++++-----
 1 file changed, 19 insertions(+), 5 deletions(-)

diff --git a/src/components/Settings.tsx b/src/components/Settings.tsx
index 4fc71844..8cf74275 100644
--- a/src/components/Settings.tsx
+++ b/src/components/Settings.tsx
@@ -150,9 +150,26 @@ class Settings extends React.PureComponent<IAppProps & Store, IState> {
         location.reload();
     }
 
+    renderChannelTypeSettings = () => {
+        return (
+            <div className="settings-show-channel-selection">
+                <div className="settings-header">
+                    NUMBER OF CHANNELS:
+                </div>
+                <label className="settings-input-field">
+                    NUMBER OF "channelTypeName" :
+                    <input name="numberOfChannels" type="text" value={this.state.settings.numberOfChannelsInType[0]} onChange={this.handleChange} />
+                </label>
+            </div>
+        )
+    }
+
     renderShowChannelsSelection = () => {
         return (
             <div className="settings-show-channel-selection">
+                <div className="settings-header">
+                    SHOW/HIDE FADERS:
+                </div>
                 <button className="settings-channels-button"
                     onClick=
                         {() => {
@@ -248,11 +265,6 @@ class Settings extends React.PureComponent<IAppProps & Store, IState> {
                     <input name="localOscPort" type="text" value={this.state.settings.localOscPort} onChange={this.handleChange} />
                 </label>
                 <br/>
-                <label className="settings-input-field">
-                    NUMBER OF CHANNELS :
-                    <input name="numberOfChannels" type="text" value={this.state.settings.numberOfChannelsInType[0]} onChange={this.handleChange} />
-                </label>
-                <br/>
                 <label className="settings-input-field">
                     FADE TIME IN ms :
                     <input name="fadeTime" type="text" value={this.state.settings.fadeTime} onChange={this.handleChange} />
@@ -278,6 +290,8 @@ class Settings extends React.PureComponent<IAppProps & Store, IState> {
                     />
                 </label>
                 <br/>
+                {this.renderChannelTypeSettings()}
+                <br/>
                 {this.renderShowChannelsSelection()}
                 <br/>
                 {this.renderRemoteControllerSettings()}