Merge pull request #28 from Class66/ms-1250

[ms-1250] fix layout styles and add selected signal

src/App.js

@@ -49,15 +49,17 @@ function App() {
 			({ type, number }) => type === selectedSemaphore.type
 				&& number === selectedSemaphore.number
 		);
-
-		newSemaphoresSignal[selectedSemaphoreIndex] = {
+		const selectedSemaphoreNewSignal = {
 			type: selectedSemaphore.type,
 			number: selectedSemaphore.number,
 			signal: signal,
 		};
 
+		newSemaphoresSignal[selectedSemaphoreIndex] = selectedSemaphoreNewSignal;
+
 		console.table(newSemaphoresSignal[selectedSemaphoreIndex]);
 		setSemaphoresSignal(newSemaphoresSignal);
+		setSelectedSemaphore(selectedSemaphoreNewSignal);
 	};
 
 	const setSemaphoreHandler = (semaphore) => {
@@ -82,6 +84,7 @@ function App() {
 					setSignalHandler={setSignalHandler}
 					signalType={s}
 					semaphoreType={semaphoreTypes.Sm}
+					selectedSemaphore={selectedSemaphore}
 				/>
 			))}
 		</div>
@@ -96,6 +99,7 @@ function App() {
 					setSignalHandler={setSignalHandler}
 					signalType={s}
 					semaphoreType={semaphoreTypes.SmGORO}
+					selectedSemaphore={selectedSemaphore}
 				/>
 			))}
 		</div>
@@ -110,6 +114,7 @@ function App() {
 					setSignalHandler={setSignalHandler}
 					signalType={s}
 					semaphoreType={semaphoreTypes.SmGROW}
+					selectedSemaphore={selectedSemaphore}
 				/>
 			))}
 		</div>
@@ -124,6 +129,7 @@ function App() {
 					setSignalHandler={setSignalHandler}
 					signalType={s}
 					semaphoreType={semaphoreTypes.SmOROW}
+					selectedSemaphore={selectedSemaphore}
 				/>
 			))}
 		</div>
@@ -137,6 +143,7 @@ function App() {
 					setSignalHandler={setSignalHandler}
 					signalType={s}
 					semaphoreType={semaphoreTypes.SmRGW}
+					selectedSemaphore={selectedSemaphore}
 				/>
 			))}
 		</div>
@@ -151,6 +158,7 @@ function App() {
 					setSignalHandler={setSignalHandler}
 					signalType={s}
 					semaphoreType={semaphoreTypes.SmGRO}
+					selectedSemaphore={selectedSemaphore}
 				/>
 			))}
 		</div>
@@ -164,6 +172,7 @@ function App() {
 					setSignalHandler={setSignalHandler}
 					signalType={s}
 					semaphoreType={semaphoreTypes.SmRG}
+					selectedSemaphore={selectedSemaphore}
 				/>
 			))}
 		</div>
@@ -177,6 +186,7 @@ function App() {
 					setSignalHandler={setSignalHandler}
 					signalType={s}
 					semaphoreType={semaphoreTypes.Sp}
+					selectedSemaphore={selectedSemaphore}
 				/>
 			))}
 		</div>
@@ -190,6 +200,7 @@ function App() {
 					setSignalHandler={setSignalHandler}
 					signalType={s}
 					semaphoreType={semaphoreTypes.To}
+					selectedSemaphore={selectedSemaphore}
 				/>
 			))}
 		</div>
@@ -203,6 +214,7 @@ function App() {
 					setSignalHandler={setSignalHandler}
 					signalType={s}
 					semaphoreType={semaphoreTypes.Tm}
+					selectedSemaphore={selectedSemaphore}
 				/>
 			))}
 		</div>

src/App.scss

@@ -5,7 +5,6 @@
   height: 100%;
 
   .semaphores-group {
-    display: flex;
     float: left;
     clear: both;
     margin: 10px;

src/components/ConnectedSemaphore/ConnectedSemaphore.jsx

@@ -2,6 +2,7 @@ import { PropTypes } from 'prop-types';
 import classNames from 'classnames';
 
 import { Semaphore } from '../Semaphore/Semaphore';
+import { semaphoreShape } from './../../types/semaphore.type';
 
 import './ConnectedSemaphore.scss';
 
@@ -27,14 +28,8 @@ export const ConnectedSemaphore = ({
 	</div>
 );
 
-const semaphoreProp = PropTypes.shape({
-	type: PropTypes.string.isRequired,
-	number: PropTypes.number.isRequired,
-	signal: PropTypes.string.isRequired,
-}).isRequired;
-
 ConnectedSemaphore.propTypes = {
 	setSemaphoreHandler: PropTypes.func.isRequired,
-	semaphore: semaphoreProp,
-	selectedSemaphore: semaphoreProp,
+	semaphore: semaphoreShape,
+	selectedSemaphore: semaphoreShape,
 };

src/components/Semaphore/Semaphore.jsx

@@ -1,15 +1,20 @@
 import { PropTypes } from 'prop-types';
+import classNames from 'classnames';
 
 import { Signal } from '../Signal/Signal';
 import { Pole } from '../Pole/Pole';
 import { SignalLabel } from '../SignalLabel/SignalLabel';
 import { signals } from '../../enums/signals.enum';
 import { semaphoreTypes } from './../../enums/semaphoreTypes.enum';
 import { signalLights } from './../../enums/signalLights.enum';
+import { semaphoreShape } from './../../types/semaphore.type';
 
 import './Semaphore.scss';
 
-export const Semaphore = ({ setSignalHandler, signalType, semaphoreType }) => {
+export const Semaphore = ({
+	setSignalHandler, signalType,
+	semaphoreType, selectedSemaphore
+}) => {
 	const signalDefinitionsForSmSemaphore = {
 		S1: (
 			<>
@@ -747,8 +752,12 @@ export const Semaphore = ({ setSignalHandler, signalType, semaphoreType }) => {
 	};
 
 	return (
-		<div className="Semaphore" onClick={() => setSignalHandler(signalType)}>
-			{ displaySignals()}
+		<div
+			className={classNames('Semaphore', {
+				'Semaphore--selected': selectedSemaphore?.signal === signalType
+			})}
+			onClick={() => setSignalHandler(signalType)}>
+			{displaySignals()}
 		</div>
 	);
 };
@@ -757,4 +766,5 @@ Semaphore.propTypes = {
 	setSignalHandler: PropTypes.func.isRequired,
 	signalType: PropTypes.string.isRequired,
 	semaphoreType: PropTypes.string.isRequired,
+	selectedSemaphore: semaphoreShape,
 };

src/components/Semaphore/Semaphore.scss

@@ -1,17 +1,20 @@
 @import "../../scss/_colors";
 
 .Semaphore {
+  display: inline-flex;
   box-sizing: border-box;
-  display: flex;
   flex-direction: column;
   align-items: center;
   align-content: center;
-  width: 50px;
   background-color: $gray;
   border-radius: 25px;
-  margin: 5px;
+  margin: 3px;
 
   &:hover {
     background-color: $light-gray;
   }
+}
+
+.Semaphore--selected {
+  background-color: $light-gray;
 }

src/types/semaphore.type.js

@@ -0,0 +1,7 @@
+import { PropTypes } from 'prop-types';
+
+export const semaphoreShape = PropTypes.shape({
+  type: PropTypes.string.isRequired,
+  number: PropTypes.number.isRequired,
+  signal: PropTypes.string.isRequired,
+}).isRequired;