+
+
+ URL aliases are useful in two main scenarios
+
+
Complicated URLs
- ❄️ Feature is not yet implemented ❄️
-
-
-
Default URLs
-
-
-
- Presenter Screen
-
- {speakerLink}
-
-
-
- Backstage / Stage Manager Screen
-
- {smLink}
-
-
-
- Public / Foyer Screen
-
- {publicLink}
-
-
-
- Picture in Picture Screen
-
- {pipLink}
-
-
-
- Studio Clock
-
- {studioLink}
-
-
+ eg. a lower third url with some custom parameters
+
+
+
+ |
+ Alias
+ |
+ Page URL |
+
+
+ | mylower |
+ lower?bg=ff2&text=f00&size=0.6&transition=5 |
+
+
+
+
+
+ URLs to be changed dynamically
+
+
+ eg. an unattended screen that you would need to change route from
+ the app
+
+
+
+ |
+ Alias
+ |
+ Page URL |
+
+
+ | thirdfloor |
+ public |
+
+
+
+
+ Alias
+ Page URL
+
+ {aliases.map((alias, index) => (
+
+
+ {alias.aliasError ? (
+
{`Alias error: ${alias.aliasError}`}
+ ) : null}
+ {alias.urlError ? (
+
{`URL error: ${alias.urlError}`}
+ ) : null}
+
+ ))}
-
Manage custom aliases
-
- {
- // Nothing here yet
- }}
- isDisabled={true}
- />
- {
- // Nothing here yet
- }}
- isDisabled={true}
- />
- }
- colorScheme='red'
- disabled
- />
-
-
-
- {
- // Nothing here yet
- }}
- isDisabled={true}
- />
- {
- // Nothing here yet
- }}
- isDisabled={true}
- />
- }
- colorScheme='blue'
- disabled
- />
-
-
+
-
+
+
-
+
);
}
diff --git a/client/src/features/modals/AppSettingsModal.jsx b/client/src/features/modals/AppSettingsModal.jsx
index 03ed5f975..44fd28bcf 100644
--- a/client/src/features/modals/AppSettingsModal.jsx
+++ b/client/src/features/modals/AppSettingsModal.jsx
@@ -1,183 +1,170 @@
import { ModalBody } from '@chakra-ui/modal';
-import { FormLabel, FormControl, Input, Button } from '@chakra-ui/react';
-import { getOSC, oscPlaceholderSettings, postOSC } from 'app/api/ontimeApi';
+import {
+ FormControl,
+ FormLabel,
+ Input,
+ PinInput,
+ PinInputField,
+} from '@chakra-ui/react';
+import {
+ getSettings,
+ ontimePlaceholderSettings,
+ postSettings,
+} from 'app/api/ontimeApi';
import { useContext, useEffect, useState } from 'react';
import { useFetch } from 'app/hooks/useFetch';
-import { OSC_SETTINGS } from 'app/api/apiConstants';
+import { APP_SETTINGS } from 'app/api/apiConstants';
import style from './Modals.module.scss';
import { LoggingContext } from '../../app/context/LoggingContext';
+import { IconButton } from '@chakra-ui/button';
+import { FiEye } from 'react-icons/fi';
+import SubmitContainer from './SubmitContainer';
+import { inputProps } from './modalHelper';
export default function AppSettingsModal() {
- const { data, status } = useFetch(OSC_SETTINGS, getOSC);
- const { emitError } = useContext(LoggingContext);
- const [formData, setFormData] = useState(oscPlaceholderSettings);
+ const { data, status, refetch } = useFetch(APP_SETTINGS, getSettings);
+ const { emitError, emitWarning } = useContext(LoggingContext);
+ const [formData, setFormData] = useState(ontimePlaceholderSettings);
const [changed, setChanged] = useState(false);
const [submitting, setSubmitting] = useState(false);
+ const [hidePin, setHidePin] = useState(true);
+ /**
+ * Set formdata from server state
+ */
useEffect(() => {
if (data == null) return;
- setFormData({ ...data });
- }, [data]);
+ if (changed) return;
+ setFormData({
+ pinCode: data.pinCode,
+ });
+ }, [changed, data]);
+ /**
+ * Validate and submit data
+ */
const submitHandler = async (event) => {
event.preventDefault();
+ setSubmitting(true);
const f = formData;
let e = { status: false, message: '' };
// Validate fields
- if (f.port < 1024 || f.port > 65535) {
- // Port in incorrect range
+ if (f.pinCode === '' || f.pinCode == null) {
e.status = true;
- e.message += 'OSC IN Port in incorrect range (1024 - 65535)';
- } else if (f.portOut < 1024 || f.portOut > 65535) {
- // Port in incorrect range
+ e.message += 'App pin code removed';
+ } else {
e.status = true;
- e.message += 'OSC OUT Port in incorrect range (1024 - 65535)';
- } else if (f.port === f.portOut) {
- // Cant use the same port
- e.status = true;
- e.message += 'OSC IN and OUT Ports cant be the same';
+ e.message += 'App pin code added';
}
// set fields with error
- if (e.status) {
+ if (!e.status) {
emitError(`Invalid Input: ${e.message}`);
- return;
+ } else {
+ await postSettings(formData);
+ await refetch();
+ emitWarning(e.message);
+ setChanged(false);
}
- // Post here
- postOSC(formData);
-
- setChanged(false);
setSubmitting(false);
};
- return (
- <>
-