vbalien/voca
1
0
Fork 0
mirror of https://github.com/vbalien/voca.git synced 2025-12-06 11:26:21 +09:00
Code Issues Projects Releases Wiki Activity

save state to localstorage

Browse Source
This commit is contained in:
Jisu Kim
2022-03-01 05:06:25 +09:00
parent 811fa8f036
commit 2579e69a85
3 changed files with 81 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
docs/website.bundle.js
View File

File diff suppressed because one or more lines are too long

25
src/website/components/download-form.tsx
View File

@@ -4,8 +4,14 @@ import { downloadVocaQuiz } from "../pdf.ts";
export default function DownloadForm() { export default function DownloadForm() {
const [levels, setLevels] = React.useState<number[]>([6, 7]); const [levels, setLevels] = React.useState<number[]>([6, 7]);
const [day, setDay] = React.useState<number>(1); const [day, setDay] = React.useState<number>(1);
const [formEnable, setFormEnable] = React.useState<boolean>(true);
const handleSubmit: React.FormEventHandler = React.useCallback((ev) => { const handleSubmit: React.FormEventHandler = React.useCallback((ev) => {
downloadVocaQuiz(levels.sort(), day); localStorage.setItem("voca-setting", JSON.stringify({ levels, day }));
setFormEnable(false);
downloadVocaQuiz(levels.sort(), day).then(() => {
setFormEnable(true);
});
ev.preventDefault(); ev.preventDefault();
}, [levels, day]); }, [levels, day]);
@@ -25,10 +31,16 @@ export default function DownloadForm() {
} }
}; };
React.useEffect(() => {
const setting = JSON.parse(localStorage.getItem("voca-setting") ?? "{}");
setting.level && setLevels(setting.levels);
setting.day && setDay(setting.day);
}, []);
return ( return (
<> <>
<form onSubmit={handleSubmit}> <form onSubmit={handleSubmit}>
<fieldset> <fieldset disabled={!formEnable}>
<legend>시험 난이도</legend> <legend>시험 난이도</legend>
<div> <div>
<input <input
@@ -84,14 +96,19 @@ export default function DownloadForm() {
<div> <div>
<label htmlFor="day">범위</label> <label htmlFor="day">범위</label>
<select id="day" value={day} onChange={handleDayChange}> <select
id="day"
value={day}
onChange={handleDayChange}
disabled={!formEnable}
>
{[...Array(30)].map((_, i) => <option value={i + 1}>{i + 1} {[...Array(30)].map((_, i) => <option value={i + 1}>{i + 1}
</option>)} </option>)}
</select> </select>
</div> </div>
<div> <div>
<button type="submit">PDF 다운</button> <button type="submit" disabled={!formEnable}>PDF 다운</button>
</div> </div>
</form> </form>
</> </>

24
src/website/pdf.ts
View File

@@ -11,15 +11,18 @@ import {
import { JSONType, Voca } from "../types.ts"; import { JSONType, Voca } from "../types.ts";
function downloadBuffer(buffer: Uint8Array, fileName: string) { function downloadBuffer(buffer: Uint8Array, fileName: string) {
const a: HTMLAnchorElement = document.createElement("a"); return new Promise<void>((resolve) => {
const blob = new Blob([buffer], { type: "application/octet-stream" }); const a: HTMLAnchorElement = document.createElement("a");
const blob = new Blob([buffer], { type: "application/octet-stream" });
a.href = URL.createObjectURL(blob); a.href = URL.createObjectURL(blob);
a.download = fileName; a.download = fileName;
document.body.appendChild(a); document.body.appendChild(a);
a.style.display = "none"; a.style.display = "none";
a.click(); a.click();
a.remove(); a.remove();
resolve();
});
} }
export async function makePdf(voca_list: Voca[]) { export async function makePdf(voca_list: Voca[]) {
@@ -174,5 +177,8 @@ export async function downloadVocaQuiz(levels: number[], day: number) {
levels.includes(chunk.level) && chunk.day === day levels.includes(chunk.level) && chunk.day === day
).flatMap((chunk) => chunk.voca_list); ).flatMap((chunk) => chunk.voca_list);
const bufferPdf = await makePdf(shuffle(voca_list)); const bufferPdf = await makePdf(shuffle(voca_list));
downloadBuffer(bufferPdf, `voca-${day}-${levels.join(",")}.pdf`); await downloadBuffer(
bufferPdf,
`voca-day${day}-level(${levels.join(",")}).pdf`,
);
} }