From bff2cf860a699c4920e4d7f1e1834451ce8b8790 Mon Sep 17 00:00:00 2001
From: John Cherry <jac677@york.ac.uk>
Date: Wed, 29 Jun 2022 14:02:16 +0100
Subject: [PATCH] Add Channel Check mode (#29)

---
 src/api/preset/presetRouter.ts                |  1 -
 .../Controls/Presets/EditModal/Macro.tsx      |  5 +-
 src/app/Navigation/ControlPanelNavigation.tsx |  1 -
 src/app/Pages/ControlPanel/ChannelCheck.tsx   | 98 +++++++++++++++++++
 src/app/router.tsx                            |  2 +
 5 files changed, 104 insertions(+), 3 deletions(-)
 create mode 100644 src/app/Pages/ControlPanel/ChannelCheck.tsx

diff --git a/src/api/preset/presetRouter.ts b/src/api/preset/presetRouter.ts
index cf164c9d..9c38703e 100644
--- a/src/api/preset/presetRouter.ts
+++ b/src/api/preset/presetRouter.ts
@@ -2,7 +2,6 @@ import { Preset } from './../../database/model/Preset'
 import { DatabasePreset, PresetRepository } from './../../database/repository/preset'
 import { createDatabaseObject, Database, sendDatabaseObject } from './../database'
 import axios from 'axios'
-import { OSCFormValue } from '../../app/Components/Admin/Controls/Presets/EditModal/OSC'
 /**
  * This is a REST router for the preset API.
  * @param path - The path requested by the original route requestor
diff --git a/src/app/Components/Admin/Controls/Presets/EditModal/Macro.tsx b/src/app/Components/Admin/Controls/Presets/EditModal/Macro.tsx
index d1dc3164..ad98e1ac 100644
--- a/src/app/Components/Admin/Controls/Presets/EditModal/Macro.tsx
+++ b/src/app/Components/Admin/Controls/Presets/EditModal/Macro.tsx
@@ -68,7 +68,10 @@ export const MacroPresetEditModal = (props: GetInputProps<'input'>) => {
 						<Select
 							placeholder="Page"
 							{...form.getListInputProps('steps', index, 'value')}
-							data={[{ value: '/controlPanel/lxKeypad', label: 'Lighting Keypad' }]}
+							data={[
+								{ value: '/controlPanel/lxKeypad', label: 'Lighting Keypad' },
+								{ value: '/controlPanel/channelCheck', label: 'Lighting Channel Check' },
+							]}
 						/>
 					) : null}
 					<ActionIcon color="red" variant="hover" onClick={() => form.removeListItem('steps', index)}>
diff --git a/src/app/Navigation/ControlPanelNavigation.tsx b/src/app/Navigation/ControlPanelNavigation.tsx
index 96565257..e3fa966b 100644
--- a/src/app/Navigation/ControlPanelNavigation.tsx
+++ b/src/app/Navigation/ControlPanelNavigation.tsx
@@ -7,7 +7,6 @@ import { NavbarItem } from './NavbarItem'
 import { useAppSelector } from './../apis/redux/mainStore'
 import { DatabasePresetFolder } from './../../database/repository/presetFolder'
 import { PresetFolderIcon } from './../Components/ControlPanel/PresetFolderIcon'
-import { FaCogs } from '@react-icons/all-files/fa/FaCogs'
 
 const TopLevelPresetFolders = ({
 	active,
diff --git a/src/app/Pages/ControlPanel/ChannelCheck.tsx b/src/app/Pages/ControlPanel/ChannelCheck.tsx
new file mode 100644
index 00000000..678504bd
--- /dev/null
+++ b/src/app/Pages/ControlPanel/ChannelCheck.tsx
@@ -0,0 +1,98 @@
+import { Button, Center, Container, SimpleGrid, Space, Text } from '@mantine/core'
+import React, { useEffect, useState } from 'react'
+import { ApiCall } from '../../../app/apis/wrapper'
+import { channelData } from '../../../output/e131'
+
+export const ChannelCheckPage = () => {
+	const [channel, setChannel] = useState<number>(-1)
+	const [channelText, setChannelText] = useState<string>('Off')
+
+	useEffect(() => {
+		if (channel > 0) {
+			setChannelText(channel.toString())
+			setChannelLX(channel, 180)
+		} else if (channel === 0) {
+			setAllLX(180)
+			setChannelText('All')
+		} else {
+			setAllLX(0)
+			setChannelText('Off')
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [channel])
+
+	function setAllLX(intensity: number) {
+		const channels: Array<channelData> = []
+		for (let i = 1; i <= 512; i++) {
+			channels.push({ channel: i, level: intensity })
+		}
+		const data: apiObject = {
+			universe: 1,
+			channelData: channels,
+			fadeTime: 0,
+		}
+		ApiCall.get('/outputModules/e131/output', data)
+	}
+
+	function setChannelLX(thisChannel: number, intensity: number) {
+		setAllLX(0)
+		const data: apiObject = {
+			universe: 1,
+			channelData: [{ channel: thisChannel, level: intensity }],
+			fadeTime: 0,
+		}
+		ApiCall.get('/outputModules/e131/output', data)
+	}
+
+	function checkPrevious() {
+		if (channel == 1 || channel < 1) {
+			setChannel(512)
+		} else {
+			setChannel(channel - 1)
+		}
+	}
+
+	function checkNext() {
+		if (channel == 512 || channel < 1) {
+			setChannel(1)
+		} else {
+			setChannel(channel + 1)
+		}
+	}
+
+	return (
+		<Container>
+			<Space h="xl" />
+			<SimpleGrid cols={3}>
+				<Button size="xl" onClick={checkPrevious}>
+					Previous
+				</Button>
+				<Center>
+					<Text size="xl" color="white">
+						{channelText}
+					</Text>
+				</Center>
+				<Button size="xl" onClick={checkNext}>
+					Next
+				</Button>
+				<Button
+					size="xl"
+					onClick={() => {
+						setChannel(-1)
+					}}
+				>
+					Off
+				</Button>
+				<Space />
+				<Button
+					size="xl"
+					onClick={() => {
+						setChannel(0)
+					}}
+				>
+					All
+				</Button>
+			</SimpleGrid>
+		</Container>
+	)
+}
diff --git a/src/app/router.tsx b/src/app/router.tsx
index cae7d6a7..ab2dbe44 100644
--- a/src/app/router.tsx
+++ b/src/app/router.tsx
@@ -13,6 +13,7 @@ import { PresetsConfigurationPage } from './Pages/Admin/Presets'
 import { FadersConfigurationPage } from './Pages/Admin/Faders'
 import { ControlsConfigurationPage } from './Pages/Admin/Controls'
 import { Locked } from './Components/Locked'
+import { ChannelCheckPage } from './Pages/ControlPanel/ChannelCheck'
 import { KeypadPage } from './Pages/ControlPanel/Keypad'
 
 const Router = () => {
@@ -29,6 +30,7 @@ const Router = () => {
 				>
 					<Route path="presetFolder/:folderId" element={<PresetPage />} />
 					<Route path="help" element={<HelpPage />} />
+					<Route path="channelCheck" element={<ChannelCheckPage />} />
 					<Route path="lxkeypad" element={<KeypadPage />} />
 				</Route>
 				<Route path="e131sampler" element={<div>Sampling E1.31</div>} />