feat: create works, just not ideal

apps/client/src/common/api/ontimeApi.ts

@@ -80,6 +80,14 @@ export async function postAliases(data: Alias[]) {
   return axios.post(`${ontimeURL}/aliases`, data);
 }
 
+/**
+ * @description HTTP request to create an alias
+ * @return {Promise}
+ */
+export async function postAlias(data: Alias) {
+  return axios.post(`${ontimeURL}/aliases`, data);
+}
+
 /**
  * @description HTTP request to update aliases
  * @return {Promise}

apps/client/src/features/app-settings/panel/url-preset-panel/UrlPresetList.tsx

@@ -1,16 +1,37 @@
+import { postAlias } from '../../../../common/api/ontimeApi';
 import useAliases from '../../../../common/hooks-query/useAliases';
 import ModalLoader from '../../../modals/modal-loader/ModalLoader';
 import * as Panel from '../PanelUtils';
 
+import UrlPresetForm, { UrlPresetFormValues } from './UrlPresetForm';
 import UrlPresetListItem from './UrlPresetListItem';
 
-export default function UrlPresetList() {
+interface UrlPresetListProps {
+  isCreatingPresetURL: boolean;
+  onToggleCreate: () => void;
+}
+
+export default function UrlPresetList({ isCreatingPresetURL, onToggleCreate }: UrlPresetListProps) {
   const { data, isFetching, refetch } = useAliases();
 
   const handleRefetch = async () => {
     await refetch();
   };
 
+  const handleSubmitCreate = async (values: UrlPresetFormValues) => {
+    try {
+      // TODO: fix this
+      // @ts-ignore
+      await postAlias({
+        ...values,
+        enabled: true,
+      });
+      await refetch();
+    } catch (error) {
+      // some error handling here
+    }
+  };
+
   if (isFetching) {
     return <ModalLoader />;
   }
@@ -26,6 +47,14 @@ export default function UrlPresetList() {
         </tr>
       </thead>
       <tbody>
+        {isCreatingPresetURL ? (
+          <tr>
+            <td colSpan={99}>
+              <UrlPresetForm onCancel={onToggleCreate} onSubmit={handleSubmitCreate} submitError='' />
+              {/* {submitError && <span className={style.createSubmitError}>{submitError}</span>} */}
+            </td>
+          </tr>
+        ) : null}
         {(data || []).map((alias) => {
           return (
             <UrlPresetListItem

apps/client/src/features/app-settings/panel/url-preset-panel/UrlPresetPanel.tsx

@@ -1,4 +1,5 @@
-import { Alert, AlertDescription, AlertIcon, AlertTitle } from '@chakra-ui/react';
+import { useState } from 'react';
+import { Alert, AlertDescription, AlertIcon, AlertTitle, Button } from '@chakra-ui/react';
 
 import ModalLink from '../../../modals/ModalLink';
 import * as Panel from '../PanelUtils';
@@ -10,6 +11,12 @@ import style from './UrlPresetPanel.module.scss';
 const aliasesDocsUrl = 'https://ontime.gitbook.io/v2/features/url-aliases';
 
 export default function UrlPresetPanel() {
+  const [isCreatingPresetURL, setIsCreatingPresetURL] = useState(false);
+
+  const handleToggleCreate = () => {
+    setIsCreatingPresetURL((prev) => !prev);
+  };
+
   return (
     <>
       <Panel.Header>URL Presets</Panel.Header>
@@ -33,8 +40,14 @@ export default function UrlPresetPanel() {
                 marginTop: '1rem',
               }}
             >
-              <UrlPresetList />
+              <Panel.SubHeader>
+                Manage URL presets
+                <Button variant='ontime-filled' onClick={handleToggleCreate}>
+                  New
+                </Button>
+              </Panel.SubHeader>
             </div>
+            <UrlPresetList isCreatingPresetURL={isCreatingPresetURL} onToggleCreate={handleToggleCreate} />
           </main>
         </Panel.Card>
       </Panel.Section>

apps/server/src/classes/data-provider/DataProvider.ts

@@ -76,6 +76,11 @@ export class DataProvider {
     await this.persist();
   }
 
+  static async addAlias(newData: Alias) {
+    data.aliases.push(newData);
+    await this.persist();
+  }
+
   static getUserFields() {
     return { ...data.userFields };
   }

apps/server/src/controllers/ontimeController.ts

@@ -189,6 +189,23 @@ export const postAliases = async (req: Request, res: Response) => {
   }
 };
 
+// Create controller for POST request to '/ontime/aliases'
+// Returns ACK message
+export const postAlias = async (req: Request, res: Response) => {
+  try {
+    const newAlias = {
+      enabled: req.body.enabled,
+      alias: req.body.alias,
+      pathAndParams: req.body.pathAndParams,
+    };
+
+    await DataProvider.addAlias(newAlias);
+    res.status(200).send(newAlias);
+  } catch (error) {
+    res.status(400).send({ message: String(error) });
+  }
+};
+
 // Update controller for PUT request to '/ontime/aliases'
 // Returns ACK message
 export const updateAliases = async (req: Request, res: Response) => {

apps/server/src/controllers/ontimeController.validate.ts

@@ -39,6 +39,21 @@ export const validateAliases = [
   },
 ];
 
+/**
+ * @description Validates object for POST /ontime/aliases
+ */
+export const validateCreateAlias = [
+  body('alias').isString().trim(),
+  body('pathAndParams').isString().trim(),
+  body('enabled').isBoolean(),
+
+  (req: Request, res: Response, next: NextFunction) => {
+    const errors = validationResult(req);
+    if (!errors.isEmpty()) return res.status(422).json({ errors: errors.array() });
+    next();
+  },
+];
+
 /**
  * @description Validates object for PUT /ontime/aliases
  */

apps/server/src/routes/ontimeRouter.ts

@@ -12,7 +12,6 @@ import {
   getViewSettings,
   patchPartialProjectFile,
   poll,
-  postAliases,
   postOSC,
   postSettings,
   postUserFields,
@@ -34,10 +33,10 @@ import {
   getClientSecrect as getClientSecret,
   updateAliases,
   deleteAlias,
+  postAlias,
 } from '../controllers/ontimeController.js';
 
 import {
-  validateAliases,
   validateOSC,
   validatePatchProjectFile,
   validateSettings,
@@ -51,6 +50,7 @@ import {
   validateWorksheet,
   validateSheetOptions,
   validateUpdateAlises,
+  validateCreateAlias,
 } from '../controllers/ontimeController.validate.js';
 import { projectSanitiser } from '../controllers/projectController.validate.js';
 import { sanitizeProjectFilename } from '../utils/sanitizeProjectFilename.js';
@@ -87,8 +87,11 @@ router.post('/views', viewValidator, postViewSettings);
 // create route between controller and '/ontime/aliases' endpoint
 router.get('/aliases', getAliases);
 
+// // create route between controller and '/ontime/aliases' endpoint
+// router.post('/aliases', validateAliases, postAliases);
+
 // create route between controller and '/ontime/aliases' endpoint
-router.post('/aliases', validateAliases, postAliases);
+router.post('/aliases', validateCreateAlias, postAlias);
 
 // create route between controller and /ontime/aliases' endpoint
 router.put('/aliases', validateUpdateAlises, updateAliases);