Pagination

This commit is contained in:
Kilian Hofmann 2023-11-22 04:54:02 +01:00
parent c693c96100
commit f52ca435eb
10 changed files with 168 additions and 41 deletions

View File

@ -7,7 +7,7 @@
"scripts": {
"types": "rimraf __generated__ && typed-scss-modules ./src --nameFormat none --exportType default --outputFolder __generated__",
"lint": "eslint ./src",
"licenses": "license-report --output=markdown > ./src/assets/licenses_node.md",
"licenses": "license-report --output=markdown > ./src/assets/licenses_node.md && dotnet-project-licenses -i ../converter > ../js-bundle/src/assets/licenses_nuget.md",
"debugger": "cd \"%MSFS_SDK%\\Tools\\CoherentGT Debugger\" && Debugger.exe",
"locale": "cd \"%MSFS_SDK%\\Tools\\MSFS_Localization\" && MSFSLocalizationManager.exe",
"dev": "npx rollup -c -w",

View File

@ -14,14 +14,14 @@
| kessler | stuff | @rollup/plugin-node-resolve | perpetual | material | MIT | git+https://github.com/rollup/plugins.git | 15.2.3 | 15.2.3 | ^15.1.0 | Rich Harris <richard.a.harris@gmail.com> |
| kessler | stuff | @rollup/plugin-terser | perpetual | material | MIT | git+https://github.com/rollup/plugins.git | 0.4.4 | 0.4.4 | ^0.4.3 | Peter Placzek <peter.placzek1996@gmail.com> |
| kessler | stuff | @rollup/plugin-typescript | perpetual | material | MIT | git+https://github.com/rollup/plugins.git | 11.1.5 | 11.1.5 | ^11.1.1 | Oskar Segersvärd |
| kessler | stuff | @types/react | perpetual | material | MIT | https://github.com/DefinitelyTyped/DefinitelyTyped.git | 18.2.37 | 18.2.37 | ^18.2.8 | n/a |
| kessler | stuff | @types/react-dom | perpetual | material | MIT | https://github.com/DefinitelyTyped/DefinitelyTyped.git | 18.2.15 | 18.2.15 | ^18.2.4 | n/a |
| kessler | stuff | @types/react | perpetual | material | MIT | https://github.com/DefinitelyTyped/DefinitelyTyped.git | 18.2.38 | 18.2.37 | ^18.2.8 | n/a |
| kessler | stuff | @types/react-dom | perpetual | material | MIT | https://github.com/DefinitelyTyped/DefinitelyTyped.git | 18.2.17 | 18.2.15 | ^18.2.4 | n/a |
| kessler | stuff | @types/uuid | perpetual | material | MIT | https://github.com/DefinitelyTyped/DefinitelyTyped.git | 9.0.7 | 9.0.7 | ^9.0.7 | n/a |
| kessler | stuff | @typescript-eslint/eslint-plugin | perpetual | material | MIT | git+https://github.com/typescript-eslint/typescript-eslint.git | 6.11.0 | 6.11.0 | ^6.10.0 | n/a |
| kessler | stuff | @typescript-eslint/parser | perpetual | material | BSD-2-Clause | git+https://github.com/typescript-eslint/typescript-eslint.git | 6.11.0 | 6.11.0 | ^6.10.0 | n/a |
| kessler | stuff | @typescript-eslint/eslint-plugin | perpetual | material | MIT | git+https://github.com/typescript-eslint/typescript-eslint.git | 6.12.0 | 6.11.0 | ^6.10.0 | n/a |
| kessler | stuff | @typescript-eslint/parser | perpetual | material | BSD-2-Clause | git+https://github.com/typescript-eslint/typescript-eslint.git | 6.12.0 | 6.11.0 | ^6.10.0 | n/a |
| kessler | stuff | autoprefixer | perpetual | material | MIT | git+https://github.com/postcss/autoprefixer.git | 10.4.16 | 10.4.16 | ^10.4.14 | Andrey Sitnik <andrey@sitnik.ru> |
| kessler | stuff | cross-env | perpetual | material | MIT | git+https://github.com/kentcdodds/cross-env.git | 7.0.3 | 7.0.3 | ^7.0.3 | Kent C. Dodds <me@kentcdodds.com> (https://kentcdodds.com) |
| kessler | stuff | eslint | perpetual | material | MIT | git+https://github.com/eslint/eslint.git | 8.53.0 | 8.53.0 | ^8.42.0 | Nicholas C. Zakas <nicholas+npm@nczconsulting.com> |
| kessler | stuff | eslint | perpetual | material | MIT | git+https://github.com/eslint/eslint.git | 8.54.0 | 8.53.0 | ^8.42.0 | Nicholas C. Zakas <nicholas+npm@nczconsulting.com> |
| kessler | stuff | eslint-plugin-import | perpetual | material | MIT | git+https://github.com/import-js/eslint-plugin-import.git | 2.29.0 | 2.29.0 | ^2.27.5 | Ben Mosher <me@benmosher.com> |
| kessler | stuff | eslint-plugin-react | perpetual | material | MIT | git+https://github.com/jsx-eslint/eslint-plugin-react.git | 7.33.2 | 7.33.2 | ^7.32.2 | Yannick Croissant <yannick.croissant+npm@gmail.com> |
| kessler | stuff | eslint-plugin-react-hooks | perpetual | material | MIT | git+https://github.com/facebook/react.git | 4.6.0 | 4.6.0 | ^4.6.0 | n/a |
@ -31,7 +31,7 @@
| kessler | stuff | prettier | perpetual | material | MIT | git+https://github.com/prettier/prettier.git | 3.1.0 | 3.1.0 | ^3.0.3 | James Long |
| kessler | stuff | prettier-plugin-organize-imports | perpetual | material | MIT | git+https://github.com/simonhaenisch/prettier-plugin-organize-imports.git | 3.2.4 | 3.2.4 | ^3.2.4 | Simon Haenisch (https://github.com/simonhaenisch) |
| kessler | stuff | rimraf | perpetual | material | ISC | git://github.com/isaacs/rimraf.git | 5.0.5 | 5.0.5 | ^5.0.1 | Isaac Z. Schlueter <i@izs.me> (http://blog.izs.me/) |
| kessler | stuff | rollup | perpetual | material | MIT | git+https://github.com/rollup/rollup.git | 4.4.1 | 4.4.1 | ^4.3.1 | Rich Harris |
| kessler | stuff | rollup | perpetual | material | MIT | git+https://github.com/rollup/rollup.git | 4.5.1 | 4.4.1 | ^4.3.1 | Rich Harris |
| kessler | stuff | rollup-plugin-copy | perpetual | material | MIT | git+https://github.com/vladshcherbin/rollup-plugin-copy.git | 3.5.0 | 3.5.0 | ^3.4.0 | Vlad Shcherbin <vlad.shcherbin@gmail.com> |
| kessler | stuff | rollup-plugin-postcss | perpetual | material | MIT | git+https://github.com/egoist/rollup-plugin-postcss.git | 4.0.2 | 4.0.2 | ^4.0.2 | EGOIST <0x142857@gmail.com> |
| kessler | stuff | rollup-plugin-react-svg | perpetual | material | MIT | git+https://github.com/boopathi/react-svg-loader.git | 3.0.3 | 3.0.3 | ^3.0.3 | boopathi |

View File

@ -0,0 +1,4 @@
| Reference | Version | License Type | License |
| --------------------- | ------- | ------------ | ------------------------------ |
| Docnet.Core | 2.6.0 | MIT | https://licenses.nuget.org/MIT |
| System.Drawing.Common | 8.0.0 | MIT | https://licenses.nuget.org/MIT |

View File

@ -2,3 +2,4 @@ export const COMMANDS = 'KHOFMANN_PDF_READER_COMMANDS';
export const DATA = 'KHOFMANN_PDF_READER_DATA';
export const LIST = 'LIST';
export const LOAD = 'LOAD';
export const MAX_LIST = 10;

View File

@ -3,9 +3,10 @@ import { COMMANDS, DATA, LIST, LOAD } from '../constants';
interface IDataContext {
list?: IList[];
dirCount?: number;
file?: string;
isLoading?: boolean;
refresh?: (path?: string) => void;
refresh?: (path?: string, offset?: number) => void;
load?: (path: string) => void;
}
@ -20,10 +21,10 @@ export interface IList {
export const DataContext = createContext<IDataContext>({});
export const useData = () => {
const { list, file, isLoading, refresh, load } = useContext(DataContext);
const { list, dirCount, file, isLoading, refresh, load } = useContext(DataContext);
if (list !== undefined && file !== undefined && isLoading !== undefined && refresh && load)
return { list, file, isLoading, refresh, load };
if (list !== undefined && dirCount !== undefined && file !== undefined && isLoading !== undefined && refresh && load)
return { list, dirCount, file, isLoading, refresh, load };
else throw new Error("Couldn't find context. Is your component inside a DataProvider?");
};
@ -33,6 +34,7 @@ interface IDataContextProps {
const DataContextProvider: FC<PropsWithChildren<IDataContextProps>> = ({ dataListener, children }) => {
const [list, setList] = useState<IList[]>([]);
const [dirCount, setDirCount] = useState(0);
const [file, setFile] = useState('');
const [isLoading, setIsLoading] = useState(true);
@ -49,6 +51,7 @@ const DataContextProvider: FC<PropsWithChildren<IDataContextProps>> = ({ dataLis
const json = JSON.parse(args);
switch (json.id) {
case LIST:
setDirCount(json.count);
setList(json.data);
window.dispatchEvent(new Event('resize'));
break;
@ -63,9 +66,9 @@ const DataContextProvider: FC<PropsWithChildren<IDataContextProps>> = ({ dataLis
setIsLoading(false);
}, []);
const refresh = (path = '') => {
const refresh = (path = '', offset = 0) => {
setIsLoading(true);
dataListener.call('COMM_BUS_WASM_CALLBACK', COMMANDS, JSON.stringify({ cmd: LIST, path }));
dataListener.call('COMM_BUS_WASM_CALLBACK', COMMANDS, JSON.stringify({ cmd: LIST, path, offset }));
};
const load = (path: string) => {
@ -73,7 +76,9 @@ const DataContextProvider: FC<PropsWithChildren<IDataContextProps>> = ({ dataLis
dataListener.call('COMM_BUS_WASM_CALLBACK', COMMANDS, JSON.stringify({ cmd: LOAD, file: path }));
};
return <DataContext.Provider value={{ list, file, isLoading, refresh, load }}>{children}</DataContext.Provider>;
return (
<DataContext.Provider value={{ list, dirCount, file, isLoading, refresh, load }}>{children}</DataContext.Provider>
);
};
export default DataContextProvider;

View File

@ -1,17 +1,30 @@
import BackIcon from '@mui/icons-material/ArrowBack';
import NavigateBeforeIcon from '@mui/icons-material/NavigateBefore';
import NavigateNextIcon from '@mui/icons-material/NavigateNext';
import ReplayIcon from '@mui/icons-material/Replay';
import { AppBar, Backdrop, Box, Button, Grid, Stack, Toolbar, Typography } from '@mui/material';
import { FC, useState } from 'react';
import { AppBar, Backdrop, Box, Button, Grid, Stack, TextField, Toolbar, Typography } from '@mui/material';
import { FC, useRef, useState } from 'react';
import { v4 } from 'uuid';
import { MAX_LIST } from '../../constants';
import { useData } from '../../contexts/DataContext';
import { useRouter } from '../../routers/Router';
const getPages = (dirCount: number) => {
const int = Math.floor(dirCount / MAX_LIST);
const rem = dirCount & MAX_LIST;
return rem === 0 && int > 0 ? int - 1 : int;
};
const ListPage: FC = () => {
const { navigate, getProps } = useRouter();
const { list, isLoading, refresh } = useData();
const { list, dirCount, isLoading, refresh } = useData();
const { path: _path } = getProps() as { path: string };
const guid = useRef(v4());
const [path, setPath] = useState(_path ?? '/');
const [offset, setOffset] = useState([0]);
const [pageJump, setPageJump] = useState('1');
return (
<Box>
@ -25,7 +38,11 @@ const ListPage: FC = () => {
setPath((prev) => {
let newPath = prev.split('/').slice(0, -2).join('/') + '/';
if (newPath === '/') newPath = '/';
refresh(newPath);
setOffset((prev) => {
const _offset = prev.pop();
refresh(newPath, _offset);
return [...prev];
});
return newPath;
});
}}
@ -34,16 +51,91 @@ const ListPage: FC = () => {
Back
</Typography>
</Button>
<Typography variant="h5" component="div" sx={{ flexGrow: 1 }}>
<Typography variant="h5" fontWeight="bold" textOverflow="ellipsis" component="div" sx={{ flexGrow: 1 }}>
{path.split('/').slice(-2, -1)}
</Typography>
</>
) : (
<Typography variant="h5" component="div" sx={{ flexGrow: 1 }}>
<Typography variant="h5" fontWeight="bold" component="div" sx={{ flexGrow: 1 }}>
Files
</Typography>
)}
<Button onClick={() => refresh(path)}>
<TextField
variant="filled"
value={pageJump}
sx={{ input: { color: '#fff' }, width: '100px' }}
onChange={(e) => {
e.stopPropagation();
setPageJump(e.target.value);
}}
onFocus={() => Coherent.trigger('FOCUS_INPUT_FIELD', guid, '', '', '', false)}
onBlur={() => Coherent.trigger('UNFOCUS_INPUT_FIELD', guid)}
/>
<Button
onClick={() => {
try {
let page = Number.parseInt(pageJump);
if (isNaN(page)) page = offset.slice(-1)[0];
page = Math.max(1, Math.min(getPages(dirCount) + 1, page));
if ((page - 1) * MAX_LIST !== offset.slice(-1)[0]) {
refresh(path, (page - 1) * MAX_LIST);
setOffset((prev) => {
prev.pop();
return [...prev, (page - 1) * MAX_LIST];
});
setPageJump(`${page}`);
}
} catch (e) {
console.warn(e);
}
}}
>
<Typography variant="h5" color="#fff">
Go to
</Typography>
</Button>
<Button
onClick={() => {
setOffset((prev) => {
const curOffset = offset.slice(-1)[0];
const newOffset = curOffset - MAX_LIST >= 0 ? curOffset - MAX_LIST : 0;
if (newOffset !== curOffset) {
refresh(path, newOffset);
prev.pop();
return [...prev, newOffset];
} else return prev;
});
}}
>
<NavigateBeforeIcon htmlColor="white" fontSize="large" />
</Button>
<Typography variant="h5">
{offset.slice(-1)[0] / MAX_LIST + 1}/{getPages(dirCount) + 1}
</Typography>
<Button
onClick={() => {
setOffset((prev) => {
const curOffset = offset.slice(-1)[0];
const newOffset = curOffset + MAX_LIST < dirCount ? curOffset + MAX_LIST : curOffset;
if (newOffset !== curOffset) {
refresh(path, newOffset);
prev.pop();
return [...prev, newOffset];
} else return prev;
});
}}
>
<NavigateNextIcon htmlColor="white" fontSize="large" />
</Button>
<Button
onClick={() => {
setOffset((prev) => {
prev.pop();
return [...prev, 0];
});
refresh(path);
}}
>
<ReplayIcon htmlColor="white" fontSize="large" />
</Button>
</Toolbar>

View File

@ -13,6 +13,7 @@ const PDFPage: FC = () => {
const { file, isLoading, load } = useData();
const guid = useRef(v4());
const [currentPage, setCurrentPage] = useState(1);
const [pageJump, setPageJump] = useState('1');

View File

@ -2,4 +2,5 @@
#define PACKAGE_DIR "/work/Files/"
#define COMMANDS "KHOFMANN_PDF_READER_COMMANDS"
#define DATA "KHOFMANN_PDF_READER_DATA"
#define DATA "KHOFMANN_PDF_READER_DATA"
#define MAX_LIST 10

View File

@ -3,6 +3,7 @@
#include <MSFS\Legacy\gauges.h>
#include <dirent.h>
#include <errno.h>
#include "rapidjson/document.h"
@ -13,6 +14,16 @@
namespace khofmann
{
/// <summary>
/// Exclude . and .. directory
/// </summary>
/// <param name="entry">Entry to check</param>
/// <returns>TRUE if not . or .., FALSE otherwise</returns>
static int excludeDotDirs(const struct dirent* entry)
{
return strcmp(entry->d_name, ".") != 0 && strcmp(entry->d_name, "..") != 0;
}
/// <summary>
/// Read a file and return file contents
/// </summary>
@ -42,26 +53,30 @@ namespace khofmann
/// Return tumbnail as BASE64 and page count if present.
/// </summary>
/// <param name="path">Path of directory</param>
/// <param name="files">Pointer to files value object</param>
/// <param name="alloc">Allocator</param>
/// <returns>List of Files</returns>
static rapidjson::Value enumerateDir(const char* path, rapidjson::Document::AllocatorType& alloc)
/// <param name="offset">Offset into file list</param>
/// <returns>Total numbers of directories</returns>
static int enumerateDir(const char* path, rapidjson::Value *files, rapidjson::Document::AllocatorType& alloc, int offset)
{
rapidjson::Value files;
files.SetArray();
int count = 0;
int numDirs = 0;
DIR* d;
struct dirent* dir;
d = opendir(path);
DIR* d = opendir(path);
if (d)
{
while ((dir = readdir(d)) != NULL)
struct dirent **dir;
numDirs = scandir(path, &dir, excludeDotDirs, alphasort);
if (numDirs == -1)
{
if (strcmp(dir->d_name, ".") && strcmp(dir->d_name, ".."))
log(stdout, "Error: %i", (void*)errno);
}
for (int i = 0; i < numDirs; i++)
{
if (i >= offset && i < offset + MAX_LIST)
{
std::string dirPath(path);
dirPath += dir->d_name;
dirPath += dir[i]->d_name;
std::string thumb(dirPath);
thumb += "/thumb.bjpg";
FILE* check = fopen(thumb.c_str(), "r");
@ -73,7 +88,7 @@ namespace khofmann
f = opendir(dirPath.c_str());
if (f)
{
log(stdout, "Found file %s\n", dir->d_name);
log(stdout, "Found file %s\n", dir[i]->d_name);
while ((file = readdir(f)) != NULL)
{
if (file->d_type == DT_REG)
@ -83,29 +98,31 @@ namespace khofmann
}
rapidjson::Value entry;
entry.SetObject();
entry.AddMember("name", rapidjson::Value(dir->d_name, alloc).Move(), alloc);
entry.AddMember("name", rapidjson::Value(dir[i]->d_name, alloc).Move(), alloc);
entry.AddMember("pages", count - 1, alloc);
entry.AddMember("thumb", readFile(thumb.c_str(), alloc).Move(), alloc);
entry.AddMember("type", "file", alloc);
files.PushBack(entry.Move(), alloc);
files->PushBack(entry.Move(), alloc);
}
closedir(f);
}
else
{
log(stdout, "Found directory %s\n", dir->d_name);
log(stdout, "Found directory %s\n", dir[i]->d_name);
rapidjson::Value entry;
entry.SetObject();
entry.AddMember("name", rapidjson::Value(dir->d_name, alloc).Move(), alloc);
entry.AddMember("name", rapidjson::Value(dir[i]->d_name, alloc).Move(), alloc);
entry.AddMember("type", "directory", alloc);
files.PushBack(entry.Move(), alloc);
files->PushBack(entry.Move(), alloc);
}
}
free(dir[i]->d_name);
}
free(dir);
}
closedir(d);
return files;
return numDirs;
}
}

View File

@ -63,6 +63,8 @@ extern "C"
if (strcmp(cmd, "LIST") == 0)
{
int offset = inDoc["offset"].GetInt();
std::string path;
path += PACKAGE_DIR;
path += inDoc["path"].GetString();
@ -73,7 +75,11 @@ extern "C"
outDoc.SetObject();
outDoc.AddMember("id", "LIST", allocator);
outDoc.AddMember("data", khofmann::enumerateDir(path.c_str(), allocator).Move(), allocator);
rapidjson::Value files;
files.SetArray();
int numDirs = khofmann::enumerateDir(path.c_str(), &files, allocator, offset);
outDoc.AddMember("count", numDirs, allocator);
outDoc.AddMember("data", files.Move(), allocator);
rapidjson::StringBuffer strbuf;
rapidjson::Writer<rapidjson::StringBuffer> writer(strbuf);