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",
"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 { DropdownBaseProps, DropdownItemProps } from "../@types/Components";
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');
const [file, setFile] = useState<File | null>(null);
const onDragOver: React.MouseEventHandler = (event) =>
const onDragOver: React.MouseEventHandler = (event) =>
{
event.stopPropagation();
event.preventDefault();
};
const onDrop: React.DragEventHandler = (event) =>
const onDrop: React.DragEventHandler = (event) =>
{
event.preventDefault();
const { dataTransfer } = event;
if (!dataTransfer.files.length)
if (!dataTransfer.files.length)
return;
const [file] = dataTransfer.files;
@ -33,9 +33,9 @@ export const FileSelector = ({ cb }: { cb: (file: File) => void }) =>
or
<span className="drop-title">Click to select a file</span>
<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;
const [f] = event.target.files;
setFile(f);
@ -53,7 +53,7 @@ export type InputElementProperties<T> = {
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">
<span className="check-box check-box-row mb-2">
@ -63,7 +63,7 @@ export const ToggleSwitch = ({ value, onChange, inputRef, children }: InputEleme
</label>;
};
export const VerticalToggleSwitch = ({ value, onChange, inputRef, children }: InputElementProperties<boolean>) =>
export const VerticalToggleSwitch = ({ value, onChange, inputRef, children }: InputElementProperties<boolean>) =>
{
return <label className="label-fix">
{children && <b>{children}</b>}
@ -82,7 +82,7 @@ type StringInputProperties = {
maxLength?: number,
minLength?: number
} & 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
@ -110,15 +110,15 @@ export type NumberInputProperties = {
step?: 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;
else if (type === 'int')
else if (type === 'int')
step = 1;
else
else
step = 1;
}
@ -133,7 +133,7 @@ export const NumberInput = ({ children, placeholder, inputRef, onChange, value,
step={step}
/>;
if (children)
if (children)
return <label>
<b>{children}</b>
{input}
@ -143,11 +143,11 @@ export const NumberInput = ({ children, placeholder, inputRef, onChange, value,
};
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 ref = useRef<HTMLInputElement>(null);
const onClick = () =>
const onClick = () =>
{
setEditing(false);
if (ref.current && onUpdate)
@ -155,7 +155,7 @@ export const ClickToEdit = ({ value, onUpdate, inputElement }:
};
const input = inputElement ? inputElement : <input defaultValue={value} ref={ref} />;
if (editing)
if (editing)
return <span className='input-group'>
{input}
<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>;
};
const DropdownHeader = ({ children, className = '' }: DropdownBaseProps) =>
const DropdownHeader = ({ children, className = '' }: DropdownBaseProps) =>
{
return <summary className={`clickable card is-vertical-align header p-2 ${className}`}>
{children}
</summary>;
};
const DropdownItem = ({ children, type, selected, onClick }: DropdownItemProps) =>
const DropdownItem = ({ children, type, selected, onClick }: DropdownItemProps) =>
{
let InnerElement = null;
if (type === 'multi-select')
InnerElement = <ToggleSwitch value={selected || false} onChange={onClick}>
{children as string}
</ToggleSwitch>;
else
InnerElement = <div onClick={(event) =>
else
InnerElement = <div onClick={(event) =>
{
event.preventDefault();
if (onClick)
if (onClick)
onClick(event);
}}>
{children}
@ -193,7 +193,7 @@ const DropdownItem = ({ children, type, selected, onClick }: DropdownItemProps)
</div>;
};
const DropdownItemList = ({ children, className = '' }: DropdownBaseProps) =>
const DropdownItemList = ({ children, className = '' }: DropdownBaseProps) =>
{
return <div className={`card item-list ${className}`}>
{children}
@ -208,7 +208,7 @@ type DropdownProps = {
className?: string
}
const DropdownComp = ({ children, className = '' }: DropdownProps) =>
const DropdownComp = ({ children, className = '' }: DropdownProps) =>
{
if (!children)
@ -219,9 +219,9 @@ const DropdownComp = ({ children, className = '' }: DropdownProps) =>
const detailsRef = useRef<HTMLDetailsElement>(null);
return <ClickDetector callback={() =>
return <ClickDetector callback={() =>
{
if (detailsRef.current)
if (detailsRef.current)
detailsRef.current.open = false;
}}>
<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 response = await patch(`/api/flags/${flag.id}`, flag);
console.log(flag);
if (response.success)
setUnsaved(false);
else
setError(response.message)
else
setError(response.message);
};
let Input = <p>Loading...</p>;
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')
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')
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'>
{/* TODO: Improve these*/}