Source: routes/sets/index.js

  1. import style from './style.css';
  2. import {useState, useEffect} from "preact/hooks";
  3. import {useConnectivity} from "../../context/online_context";
  4. import Save_Entry from '../../components/save_entry';
  5. import StripSettings from '../../components/strip_settings';
  6. import SystemControls from '../../components/system_settings';
  7. import { getPatternList } from '../../utils/api';
  9. /**
  10.  * @brief Generates the main settings page for the settings route.
  11.  * 
  12.  * @returns The Settings UI element.
  13.  */
  14. const Settings = () => {
  16. 	// Object that returns if the app is connected to the device.
  17. 	const { isConnected } = useConnectivity();
  19. 	// Stores the list of patterns obtained from the device.
  20. 	const [patterns, setPatterns] = useState([{index: 0, name: "None"}])
  22. 	// Toggle state for showing the advanced settings
  23. 	const [showAdvanced, setShowAdvanced] = useState(false);
  25. 	/**
  26. 	 * @brief Obtains the list of patterns from the NanoLux device.
  27. 	 */
  28. 	useEffect(() => {
  29.         if (isConnected) {
  30.             getPatternList()
  31. 				.then(data => setPatterns(data))
  32. 				.then();
  33.         }  
  34.     }, [isConnected])
  36. 	return (
  37. 		<div className={style.settingsPage} role='main' id='settings-page'>
  38. 			{/* BASIC SETTINGS */}
  39. 			{!showAdvanced && (
  40. 				<div className={style.basicSection} id='basic-settings' role='region' aria-label='Basic device settings'>
  41. 					<h2 id='basic-settings-label' style={{ fontSize: '1.6rem', fontWeight: 'bold' }}>Pattern Settings</h2>
  42. 					<br /><br />
  43. 					<StripSettings patterns={patterns} advanced={false} />
  44. 				</div>
  45. 			)}
  47. 			{/* FULL SETTINGS */}
  48. 			{showAdvanced && (
  49. 				<div className={style.advancedSection} id='advanced-settings' role='region' aria-label='Advanced device settings'>
  50. 					<div className={style.advancedLeft} role='region' aria-labelledby='advanced-patterns-label'>
  51. 						<h2 id='advanced-patterns-label' style={{ fontSize: '1.6rem', fontWeight: 'bold' }}>Pattern Settings</h2>
  52. 						<br /><br />
  53. 						<StripSettings patterns={patterns} advanced={true} />
  54. 					</div>
  55. 					<div className={style.advancedRight} role='region' aria-labelledby='advanced-system-label'>
  56. 						<h2 id='advanced-system-label' style={{ fontSize: '1.6rem', fontWeight: 'bold' }}>System Settings</h2>
  57. 						<br /><br /><br />
  58. 						<SystemControls />
  59. 						<hr />
  60. 						<br />
  61. 						<div className={style.background0}>
  62. 							<Save_Entry name="Default Pattern" idx="0" />
  63. 						</div>
  64. 						<div className={style.background1}>
  65. 							<Save_Entry name="Saved Pattern 1" idx="1" />
  66. 						</div>
  67. 						<div className={style.background2}>
  68. 							<Save_Entry name="Saved Pattern 2" idx="2" />
  69. 						</div>
  70. 					</div>
  71. 				</div>
  72. 			)}
  73. 	
  74. 			{/* ADVANCED TOGGLE BUTTON */}
  75. 			<button
  76. 				className={style.advancedToggle}
  77. 				onClick={() => setShowAdvanced(!showAdvanced)}
  78. 				aria-expanded={showAdvanced}
  79. 				aria-controls='basic-settings advanced-settings'
  80. 			>
  81. 				{showAdvanced ? 'Hide Advanced' : 'Show Advanced'}
  82. 			</button>
  83. 		</div>
  84. 	);
  85. };
  87. export default Settings;