ExternalVendorCode/chirpstack
1
0
Fork 0
mirror of https://github.com/chirpstack/chirpstack.git synced 2025-06-16 14:28:14 +00:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

ui: First part of FUOTA UI implementation.

Browse Source 
Currently this allows for creating FUOTA dpeloyments and adding to /
removing from devices and gateways. In its current state, it does not
show the status of the FUOTA deployment.
This commit is contained in:
Orne Brocaar
2025-02-11 20:08:07 +00:00
parent 43753958ef
commit 4984e8556d
39 changed files with 3276 additions and 1286 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
ui/src/components/Autocomplete.tsx
View File

@ -13,13 +13,14 @@ interface Option {
interface IProps {
placeholder: string;
className: string;
disabled?: boolean;
value?: string;
getOption: (s: string, fn: OptionCallbackFunc) => void;
getOptions: (s: string, fn: OptionsCallbackFunc) => void;
onSelect?: (s: string) => void;
}
function AutoComplete({ placeholder, className, value, getOption, getOptions, onSelect }: IProps) {
function AutoComplete({ placeholder, className, value, getOption, getOptions, onSelect, disabled }: IProps) {
const [option, setOption] = useState<Option | undefined>(undefined);
const [options, setOptions] = useState<Option[]>([]);
@ -74,6 +75,7 @@ function AutoComplete({ placeholder, className, value, getOption, getOptions, on
placeholder={placeholder}
className={className}
value={value}
disabled={disabled}
/>
);
}

2
ui/src/components/AutocompleteInput.tsx
View File

@ -6,6 +6,7 @@ import Autocomplete from "./Autocomplete";
interface IProps {
label: string;
name: string;
disabled?: boolean;
required?: boolean;
value?: string;
getOption: (s: string, fn: OptionCallbackFunc) => void;
@ -38,6 +39,7 @@ function AutocompleteInput(props: IProps) {
getOption={props.getOption}
getOptions={props.getOptions}
onSelect={onSelect}
disabled={props.disabled}
/>
</Form.Item>
);

13
ui/src/components/DataTable.tsx
View File

@ -14,6 +14,7 @@ interface IProps {
getPage: (
limit: number,
offset: number,
filters: object,
orderBy: string | void,
orderByDesc: boolean | void,
callbackFunc: GetPageCallbackFunc,
@ -30,14 +31,15 @@ function DataTable(props: IProps) {
const [currentPage, setCurrentPage] = useState<number>(1);
const [orderBy, setOrderBy] = useState<string>("");
const [orderByDesc, setOrderByDesc] = useState<boolean>(false);
const [filters, setFilters] = useState<object>({});
const [rows, setRows] = useState<object[]>([]);
const [loading, setLoading] = useState<boolean>(true);
const loadPage = useCallback(
(page: number, pz: number, orderBy?: string | void, orderByDesc?: boolean | void) => {
(page: number, pz: number, filters: object, orderBy?: string | void, orderByDesc?: boolean | void) => {
setLoading(true);
props.getPage(pz, (page - 1) * pz, orderBy, orderByDesc, (totalCount: number, rows: object[]) => {
props.getPage(pz, (page - 1) * pz, filters, orderBy, orderByDesc, (totalCount: number, rows: object[]) => {
setTotalCount(totalCount);
setRows(rows);
setLoading(false);
@ -53,7 +55,7 @@ function DataTable(props: IProps) {
}
};
const onChange: TableProps<object>["onChange"] = (pagination, filters, sorter, extra) => {
const onChange: TableProps<object>["onChange"] = (pagination, filters, sorter, _) => {
let page = pagination.current;
if (!page) {
page = currentPage;
@ -91,11 +93,12 @@ function DataTable(props: IProps) {
setCurrentPage(page);
setPageSize(pz || 0);
setOrderBy(sort);
setFilters(filters);
};
useEffect(() => {
loadPage(currentPage, pageSize, orderBy, orderByDesc);
}, [props, currentPage, pageSize, orderBy, orderByDesc, loadPage]);
loadPage(currentPage, pageSize, filters, orderBy, orderByDesc);
}, [props, currentPage, pageSize, filters, orderBy, orderByDesc, loadPage]);
const { getPage, refreshKey, ...otherProps } = props;
let loadingProps = undefined;