Mirroristas/owncast
2
0
Fork 0
mirror of https://github.com/owncast/owncast.git synced 2024-10-10 19:16:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

have forms call predefine post function

Browse Source
This commit is contained in:
gingervitis 2021-01-03 01:10:38 -08:00 committed by Gabe Kangas
parent c61e7e9c14
commit 19ae6205c5
5 changed files with 55 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
web/pages/components/config/constants.tsx
View File

@ -128,7 +128,7 @@ export const TEXTFIELD_DEFAULTS = {
streamKey: {
apiPath: '/key',
defaultValue: DEFAULT_NAME,
defaultValue: 'abc123',
maxLength: TEXT_MAXLENGTH,
placeholder: 'abc123',
label: 'Stream Key',
@ -138,7 +138,7 @@ export const TEXTFIELD_DEFAULTS = {
ffmpegPath: {
apiPath: '/ffmpegpath',
defaultValue: DEFAULT_NAME,
defaultValue: '',
maxLength: TEXT_MAXLENGTH,
placeholder: '/usr/local/bin/ffmpeg',
label: 'FFmpeg Path',
@ -148,7 +148,7 @@ export const TEXTFIELD_DEFAULTS = {
webServerPort: {
apiPath: '/webserverport',
defaultValue: '',
defaultValue: '8080',
maxLength: 6,
placeholder: '8080',
label: 'Owncast Server port',
@ -159,7 +159,7 @@ export const TEXTFIELD_DEFAULTS = {
apiPath: '/rtmpserverport',
defaultValue: '1935',
maxLength: 6,
placeholder: DEFAULT_NAME,
placeholder: '1935',
label: 'RTMP port',
tip: 'What port are you receiving RTMP?',
required: true,

31
web/pages/components/config/edit-tags.tsx
View File

@ -3,8 +3,7 @@ import React, { useContext, useState, useEffect } from 'react';
import { Typography, Tag, Input } from 'antd';
import { ServerStatusContext } from '../../../utils/server-status-context';
import { fetchData, SERVER_CONFIG_UPDATE_URL } from '../../../utils/apis';
import { TEXTFIELD_DEFAULTS, RESET_TIMEOUT, SUCCESS_STATES } from './constants';
import { TEXTFIELD_DEFAULTS, RESET_TIMEOUT, SUCCESS_STATES, postConfigUpdateToAPI } from './constants';
const { Title } = Typography;
@ -44,22 +43,22 @@ export default function EditInstanceTags() {
// posts all the tags at once as an array obj
const postUpdateToAPI = async (postValue: any) => {
const result = await fetchData(`${SERVER_CONFIG_UPDATE_URL}${apiPath}`, {
await postConfigUpdateToAPI({
apiPath,
data: { value: postValue },
method: 'POST',
auth: true,
onSuccess: () => {
setConfigField({ fieldName: 'tags', value: postValue, path: configPath });
setSubmitStatus('success');
setSubmitStatusMessage('Tags updated.');
setNewTagInput('');
resetTimer = setTimeout(resetStates, RESET_TIMEOUT);
},
onError: (message: string) => {
setSubmitStatus('error');
setSubmitStatusMessage(message);
resetTimer = setTimeout(resetStates, RESET_TIMEOUT);
},
});
if (result.success) {
setConfigField({ fieldName: 'tags', value: postValue, path: configPath });
setSubmitStatus('success');
setSubmitStatusMessage('Tags updated.');
setNewTagInput('');
} else {
setSubmitStatus('error');
setSubmitStatusMessage(result.message);
}
resetTimer = setTimeout(resetStates, RESET_TIMEOUT);
};
const handleInputChange = e => {

42
web/pages/components/config/form-textfield.tsx
View File

@ -22,10 +22,9 @@ import { FormItemProps } from 'antd/es/form';
import { InfoCircleOutlined } from '@ant-design/icons';
import { TEXTFIELD_DEFAULTS, TEXT_MAXLENGTH, RESET_TIMEOUT } from './constants';
import { TEXTFIELD_DEFAULTS, TEXT_MAXLENGTH, RESET_TIMEOUT, postConfigUpdateToAPI } from './constants';
import { TextFieldProps } from '../../../types/config-section';
import { fetchData, SERVER_CONFIG_UPDATE_URL } from '../../../utils/apis';
import { ServerStatusContext } from '../../../utils/server-status-context';
export const TEXTFIELD_TYPE_TEXT = 'default';
@ -78,23 +77,6 @@ export default function TextField(props: TextFieldProps) {
resetTimer = null;
}
const postUpdateToAPI = async (postValue: any) => {
setSubmitStatus('validating');
const result = await fetchData(`${SERVER_CONFIG_UPDATE_URL}${apiPath}`, {
data: { value: postValue },
method: 'POST',
auth: true,
});
if (result.success) {
setConfigField({ fieldName, value: postValue, path: configPath });
setSubmitStatus('success');
} else {
setSubmitStatus('error');
setSubmitStatusMessage(`There was an error: ${result.message}`);
}
resetTimer = setTimeout(resetStates, RESET_TIMEOUT);
};
// if field is required but value is empty, or equals initial value, then don't show submit/update button. otherwise clear out any result messaging and display button.
const handleChange = (e: any) => {
const val = type === TEXTFIELD_TYPE_NUMBER ? e : e.target.value;
@ -116,9 +98,25 @@ export default function TextField(props: TextFieldProps) {
};
// how to get current value of input
const handleSubmit = () => {
const handleSubmit = async () => {
if ((required && fieldValueForSubmit !== '') || fieldValueForSubmit !== initialValue) {
postUpdateToAPI(fieldValueForSubmit);
// postUpdateToAPI(fieldValueForSubmit);
setSubmitStatus('validating');
await postConfigUpdateToAPI({
apiPath,
data: { value: fieldValueForSubmit },
onSuccess: () => {
setConfigField({ fieldName, value: fieldValueForSubmit, path: configPath });
setSubmitStatus('success');
},
onError: (message: string) => {
setSubmitStatus('error');
setSubmitStatusMessage(`There was an error: ${message}`);
},
});
resetTimer = setTimeout(resetStates, RESET_TIMEOUT);
// if an extra onSubmit handler was sent in as a prop, let's run that too.
if (onSubmit) {
onSubmit();
@ -160,7 +158,7 @@ export default function TextField(props: TextFieldProps) {
required={required}
>
<Field
className="field"
className={`field field-${fieldName}`}
allowClear
placeholder={placeholder}
maxLength={maxLength}

34
web/pages/components/config/form-toggleswitch.tsx
View File

@ -4,10 +4,9 @@ import { FormItemProps } from 'antd/es/form';
import { InfoCircleOutlined } from '@ant-design/icons';
import { TEXTFIELD_DEFAULTS, RESET_TIMEOUT, SUCCESS_STATES } from './constants';
import { TEXTFIELD_DEFAULTS, RESET_TIMEOUT, SUCCESS_STATES, postConfigUpdateToAPI } from './constants';
import { ToggleSwitchProps } from '../../../types/config-section';
import { fetchData, SERVER_CONFIG_UPDATE_URL } from '../../../utils/apis';
import { ServerStatusContext } from '../../../utils/server-status-context';
export const TEXTFIELD_TYPE_TEXT = 'default';
@ -48,26 +47,21 @@ export default function ToggleSwitch(props: ToggleSwitchProps) {
resetTimer = null;
}
const postUpdateToAPI = async (postValue: any) => {
const handleChange = async checked => {
setSubmitStatus('validating');
const result = await fetchData(`${SERVER_CONFIG_UPDATE_URL}${apiPath}`, {
data: { value: postValue },
method: 'POST',
auth: true,
await postConfigUpdateToAPI({
apiPath,
data: { value: checked },
onSuccess: () => {
setConfigField({ fieldName, value: checked, path: configPath });
setSubmitStatus('success');
},
onError: (message: string) => {
setSubmitStatus('error');
setSubmitStatusMessage(`There was an error: ${message}`);
},
});
if (result.success) {
setConfigField({ fieldName, value: postValue, path: configPath });
setSubmitStatus('success');
} else {
setSubmitStatus('error');
setSubmitStatusMessage(`There was an error: ${result.message}`);
}
resetTimer = setTimeout(resetStates, RESET_TIMEOUT);
};
const handleChange = checked => {
postUpdateToAPI(checked);
}
const {
@ -91,7 +85,7 @@ export default function ToggleSwitch(props: ToggleSwitchProps) {
validateStatus={submitStatus}
>
<Switch
className="switch"
className={`switch field-${fieldName}`}
loading={submitStatus === 'validating'}
onChange={handleChange}
checked={initialValue}

4
web/types/config-section.ts
View File

@ -27,8 +27,8 @@ export interface UpdateArgs {
export interface ApiPostArgs {
apiPath: string,
data: object,
onSuccess?: () => {},
onError?: () => {},
onSuccess?: (arg: any) => {},
onError?: (arg: any) => {},
}
export interface ConfigDirectoryFields {