Navy.gif/webserver-framework-frontend
Template
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

actually save value

Browse Source
This commit is contained in:
Erik 2023-07-05 14:28:06 +03:00
parent fd4d72eb21
commit 4b28045d60
Signed by: Navy.gif
GPG Key ID: 2532FBBB61C65A68
3 changed files with 37 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.eslintrc.json
View File

@ -28,6 +28,7 @@
"warn", "warn",
"allman" "allman"
], ],
"indent": "warn" "indent": "warn",
"semi": "error"
} }
} }

58
src/components/InputElements.tsx
View File

@ -1,26 +1,26 @@
import React, { Children, useRef, useState } from "react"; import React, { useRef, useState } from "react";
import ClickDetector from "../util/ClickDetector"; import ClickDetector from "../util/ClickDetector";
import { DropdownBaseProps, DropdownItemProps } from "../@types/Components"; import { DropdownBaseProps, DropdownItemProps } from "../@types/Components";
import '../css/components/InputElements.css'; import '../css/components/InputElements.css';
export const FileSelector = ({ cb }: { cb: (file: File) => void }) => export const FileSelector = ({ cb }: { cb: (file: File) => void }) =>
{ {
if (!cb) if (!cb)
throw new Error('Missing callback'); throw new Error('Missing callback');
const [file, setFile] = useState<File | null>(null); const [file, setFile] = useState<File | null>(null);
const onDragOver: React.MouseEventHandler = (event) => const onDragOver: React.MouseEventHandler = (event) =>
{ {
event.stopPropagation(); event.stopPropagation();
event.preventDefault(); event.preventDefault();
}; };
const onDrop: React.DragEventHandler = (event) => const onDrop: React.DragEventHandler = (event) =>
{ {
event.preventDefault(); event.preventDefault();
const { dataTransfer } = event; const { dataTransfer } = event;
if (!dataTransfer.files.length) if (!dataTransfer.files.length)
return; return;
const [file] = dataTransfer.files; const [file] = dataTransfer.files;
@ -33,9 +33,9 @@ export const FileSelector = ({ cb }: { cb: (file: File) => void }) =>
or or
<span className="drop-title">Click to select a file</span> <span className="drop-title">Click to select a file</span>
<p className="fileName m-0">{file ? `Selected: ${file.name}` : null}</p> <p className="fileName m-0">{file ? `Selected: ${file.name}` : null}</p>
<input onChange={(event) => <input onChange={(event) =>
{ {
if (!event.target.files) if (!event.target.files)
return; return;
const [f] = event.target.files; const [f] = event.target.files;
setFile(f); setFile(f);
@ -53,7 +53,7 @@ export type InputElementProperties<T> = {
placeholder?: string placeholder?: string
} }
export const ToggleSwitch = ({ value, onChange, inputRef, children }: InputElementProperties<boolean>) => export const ToggleSwitch = ({ value, onChange, inputRef, children }: InputElementProperties<boolean>) =>
{ {
return <label className="label-fix"> return <label className="label-fix">
<span className="check-box check-box-row mb-2"> <span className="check-box check-box-row mb-2">
@ -63,7 +63,7 @@ export const ToggleSwitch = ({ value, onChange, inputRef, children }: InputEleme
</label>; </label>;
}; };
export const VerticalToggleSwitch = ({ value, onChange, inputRef, children }: InputElementProperties<boolean>) => export const VerticalToggleSwitch = ({ value, onChange, inputRef, children }: InputElementProperties<boolean>) =>
{ {
return <label className="label-fix"> return <label className="label-fix">
{children && <b>{children}</b>} {children && <b>{children}</b>}
@ -82,7 +82,7 @@ type StringInputProperties = {
maxLength?: number, maxLength?: number,
minLength?: number minLength?: number
} & ManualInputProperties<string> } & ManualInputProperties<string>
export const StringInput = ({ value, onChange, inputRef, children, placeholder, onBlur, onKeyUp, minLength, maxLength }: StringInputProperties) => export const StringInput = ({ value, onChange, inputRef, children, placeholder, onBlur, onKeyUp, minLength, maxLength }: StringInputProperties) =>
{ {
const input = <input const input = <input
@ -110,15 +110,15 @@ export type NumberInputProperties = {
step?: number step?: number
} & ManualInputProperties<number> } & ManualInputProperties<number>
export const NumberInput = ({ children, placeholder, inputRef, onChange, value, min, max, type, step }: NumberInputProperties) => export const NumberInput = ({ children, placeholder, inputRef, onChange, value, min, max, type, step }: NumberInputProperties) =>
{ {
if (typeof step === 'undefined') if (typeof step === 'undefined')
{ {
if (type === 'float') if (type === 'float')
step = 0.1; step = 0.1;
else if (type === 'int') else if (type === 'int')
step = 1; step = 1;
else else
step = 1; step = 1;
} }
@ -133,7 +133,7 @@ export const NumberInput = ({ children, placeholder, inputRef, onChange, value,
step={step} step={step}
/>; />;
if (children) if (children)
return <label> return <label>
<b>{children}</b> <b>{children}</b>
{input} {input}
@ -143,11 +143,11 @@ export const NumberInput = ({ children, placeholder, inputRef, onChange, value,
}; };
export const ClickToEdit = ({ value, onUpdate, inputElement }: export const ClickToEdit = ({ value, onUpdate, inputElement }:
{ value: string, onUpdate?: (value: string) => void, inputElement?: React.ReactElement }) => { value: string, onUpdate?: (value: string) => void, inputElement?: React.ReactElement }) =>
{ {
const [editing, setEditing] = useState(false); const [editing, setEditing] = useState(false);
const ref = useRef<HTMLInputElement>(null); const ref = useRef<HTMLInputElement>(null);
const onClick = () => const onClick = () =>
{ {
setEditing(false); setEditing(false);
if (ref.current && onUpdate) if (ref.current && onUpdate)
@ -155,7 +155,7 @@ export const ClickToEdit = ({ value, onUpdate, inputElement }:
}; };
const input = inputElement ? inputElement : <input defaultValue={value} ref={ref} />; const input = inputElement ? inputElement : <input defaultValue={value} ref={ref} />;
if (editing) if (editing)
return <span className='input-group'> return <span className='input-group'>
{input} {input}
<button className="button primary" onClick={onClick} > <button className="button primary" onClick={onClick} >
@ -165,25 +165,25 @@ export const ClickToEdit = ({ value, onUpdate, inputElement }:
return <span onClick={() => setEditing(true)} className='mt-0 mb-1 clickable'>{value}</span>; return <span onClick={() => setEditing(true)} className='mt-0 mb-1 clickable'>{value}</span>;
}; };
const DropdownHeader = ({ children, className = '' }: DropdownBaseProps) => const DropdownHeader = ({ children, className = '' }: DropdownBaseProps) =>
{ {
return <summary className={`clickable card is-vertical-align header p-2 ${className}`}> return <summary className={`clickable card is-vertical-align header p-2 ${className}`}>
{children} {children}
</summary>; </summary>;
}; };
const DropdownItem = ({ children, type, selected, onClick }: DropdownItemProps) => const DropdownItem = ({ children, type, selected, onClick }: DropdownItemProps) =>
{ {
let InnerElement = null; let InnerElement = null;
if (type === 'multi-select') if (type === 'multi-select')
InnerElement = <ToggleSwitch value={selected || false} onChange={onClick}> InnerElement = <ToggleSwitch value={selected || false} onChange={onClick}>
{children as string} {children as string}
</ToggleSwitch>; </ToggleSwitch>;
else else
InnerElement = <div onClick={(event) => InnerElement = <div onClick={(event) =>
{ {
event.preventDefault(); event.preventDefault();
if (onClick) if (onClick)
onClick(event); onClick(event);
}}> }}>
{children} {children}
@ -193,7 +193,7 @@ const DropdownItem = ({ children, type, selected, onClick }: DropdownItemProps)
</div>; </div>;
}; };
const DropdownItemList = ({ children, className = '' }: DropdownBaseProps) => const DropdownItemList = ({ children, className = '' }: DropdownBaseProps) =>
{ {
return <div className={`card item-list ${className}`}> return <div className={`card item-list ${className}`}>
{children} {children}
@ -208,7 +208,7 @@ type DropdownProps = {
className?: string className?: string
} }
const DropdownComp = ({ children, className = '' }: DropdownProps) => const DropdownComp = ({ children, className = '' }: DropdownProps) =>
{ {
if (!children) if (!children)
@ -219,9 +219,9 @@ const DropdownComp = ({ children, className = '' }: DropdownProps) =>
const detailsRef = useRef<HTMLDetailsElement>(null); const detailsRef = useRef<HTMLDetailsElement>(null);
return <ClickDetector callback={() => return <ClickDetector callback={() =>
{ {
if (detailsRef.current) if (detailsRef.current)
detailsRef.current.open = false; detailsRef.current.open = false;
}}> }}>
<details ref={detailsRef} className={`dropdown w-100 ${className}`}> <details ref={detailsRef} className={`dropdown w-100 ${className}`}>

11
src/pages/admin/Flags.tsx
View File

@ -21,19 +21,20 @@ const Flag = ({ flag: incoming }: { flag: APIFlag }) =>
const save = async () => const save = async () =>
{ {
const response = await patch(`/api/flags/${flag.id}`, flag); const response = await patch(`/api/flags/${flag.id}`, flag);
console.log(flag);
if (response.success) if (response.success)
setUnsaved(false); setUnsaved(false);
else else
setError(response.message) setError(response.message);
}; };
let Input = <p>Loading...</p>; let Input = <p>Loading...</p>;
if (flag.type === 'string') if (flag.type === 'string')
Input = <StringInput onChange={() => setUnsaved(true)} inputRef={valueRef} value={flag.value as string} />; Input = <StringInput onChange={({target}) => updateFlag({...flag, value: target.value })} inputRef={valueRef} value={flag.value as string} />;
else if (flag.type === 'number') else if (flag.type === 'number')
Input = <NumberInput onChange={() => setUnsaved(true)} inputRef={valueRef} value={flag.value as number} type='float' />; Input = <NumberInput onChange={({target}) => updateFlag({...flag, value: parseFloat(target.value)})} inputRef={valueRef} value={flag.value as number} type='float' />;
else if (flag.type === 'boolean') else if (flag.type === 'boolean')
Input = <ToggleSwitch onChange={() => setUnsaved(true)} inputRef={valueRef} value={flag.value as boolean} />; Input = <ToggleSwitch onChange={({target}) => updateFlag({...flag, value: target.value })} inputRef={valueRef} value={flag.value as boolean} />;
return <div className='flag mt-0 mb-1'> return <div className='flag mt-0 mb-1'>
{/* TODO: Improve these*/} {/* TODO: Improve these*/}