From 6d20865299959280d8039473336f7dc36110e4e3 Mon Sep 17 00:00:00 2001 From: satoshi komatsu Date: Tue, 11 Jun 2024 17:16:51 +0900 Subject: [PATCH] add Validate --- app/src/lib/parameters.ts | 44 ++++--- app/src/routes/+page.svelte | 9 +- app/src/routes/SettingSelector.svelte | 171 ++++++++++++++------------ 3 files changed, 126 insertions(+), 98 deletions(-) diff --git a/app/src/lib/parameters.ts b/app/src/lib/parameters.ts index 390335530..dae254186 100644 --- a/app/src/lib/parameters.ts +++ b/app/src/lib/parameters.ts @@ -1,19 +1,33 @@ -export type ParameterType = 'Integer' | 'String' | 'Boolean'; +interface IntegerParameter { + Integer: { + value: number; + min?: number; + max?: number; + }; +} -export type ParameterOption = T extends 'Integer' - ? { Integer: { value: number; min: number; max: number } } - : T extends 'String' - ? { String: { value: string } } - : T extends 'Boolean' - ? { Boolean: { value: boolean } } - : never; +interface StringParameter { + String: { + value: string; + }; +} -export type ParameterEntry = { +interface BooleanParameter { + Boolean: { + value: boolean; + }; +} + +// TODO - In practice, use as IntegerParameter | StringParameter | BooleanParameter +type Parameter = IntegerParameter & StringParameter & BooleanParameter; + +interface ParamsOptionItem { + parameter: Parameter; description: string; - required: string; - parameter: ParameterOption; -}; +} -export type Parameters = { - items: { [key: string]: ParameterEntry }; -}; +export interface ParamsOption { + items: { + [key: string]: ParamsOptionItem; + }; +} diff --git a/app/src/routes/+page.svelte b/app/src/routes/+page.svelte index 8b57970a6..2b615b38b 100644 --- a/app/src/routes/+page.svelte +++ b/app/src/routes/+page.svelte @@ -2,7 +2,7 @@ import { invoke } from '@tauri-apps/api/tauri'; import { attachConsole } from 'tauri-plugin-log-api'; import { message } from '@tauri-apps/api/dialog'; - import type { Parameters } from '$lib/parameters'; + import type { ParamsOption } from '$lib/parameters'; import Icon from '@iconify/svelte'; import InputSelector from './InputSelector.svelte'; @@ -12,15 +12,12 @@ attachConsole(); // For Tauri log in the webview console - let paramsOption = {} as Parameters; - - - let inputPaths: string[] = []; let filetype: string; let epsg: number; let rulesPath = ''; let outputPath = ''; + let paramsOption = {} as ParamsOption; let isRunning = false; async function convertAndSave() { @@ -43,7 +40,7 @@ filetype, epsg, rulesPath, - paramsOption + paramsOption }); isRunning = false; await message(`変換が完了しました。\n'${outputPath}' に出力しました。`, { type: 'info' }); diff --git a/app/src/routes/SettingSelector.svelte b/app/src/routes/SettingSelector.svelte index fdbae8775..f7a39cc56 100644 --- a/app/src/routes/SettingSelector.svelte +++ b/app/src/routes/SettingSelector.svelte @@ -2,16 +2,16 @@ import { dialog } from '@tauri-apps/api'; import Icon from '@iconify/svelte'; import { filetypeOptions } from '$lib/settings'; - import { invoke } from '@tauri-apps/api/tauri'; - import type { Parameters, ParameterType } from '$lib/parameters'; + import { invoke } from '@tauri-apps/api/tauri'; + import type { ParamsOption } from '$lib/parameters'; export let filetype: string; export let epsg: number = 4979; export let rulesPath: string; - export let paramsOption: Parameters; + export let paramsOption: ParamsOption; - let debug: any; - let optionParameter: string[] = []; + let debug: any; // NOTE debug + let optionParameter: string[] = []; $: epsgOptions = filetypeOptions[filetype]?.epsg || []; $: disableEpsgOptions = epsgOptions.length < 2; @@ -23,24 +23,17 @@ } } - async function setOptionParameter(filetype: string) { - const parameters = await invoke('get_parameter', { filetype }) as Parameters; - // '@output'を除外 - // delete parameters.items["@output"]; - - const keys = Object.keys(parameters.items).filter(item => item !== '@output'); + // Get the parameter options for the selected filetype + async function setOptionParameter(filetype: string) { + const parameters = (await invoke('get_parameter', { filetype })) as ParamsOption; - // if (keys.length === 0) { - // optionParameter = []; - // return; - // } - - optionParameter = keys; - paramsOption = parameters - debug = parameters - } + // Exclude '@output' + optionParameter = Object.keys(parameters.items).filter((item) => item !== '@output'); + paramsOption = parameters; + debug = parameters; + } - $:setOptionParameter(filetype); + $: setOptionParameter(filetype); async function openRulesPathDialog() { const res = await dialog.open({ @@ -59,36 +52,46 @@ rulesPath = ''; } - // 型ガード関数 - function isIntegerParameter(parameter: any): parameter is { Integer: { value: number; min: number; max: number; } } { - return (parameter as { Integer?: unknown }).Integer !== undefined; - } - - function isStringParameter(parameter: any): parameter is { String: { value: string; } } { - return (parameter as { String?: unknown }).String !== undefined; - } - - function isBooleanParameter(parameter: any): parameter is { Boolean: { value: boolean; } } { - return (parameter as { Boolean?: unknown }).Boolean !== undefined; - } - - // ParameterTypeの型を取得 - function getParameterType(key: string): ParameterType { - const parameter = paramsOption.items[key].parameter; - if (isIntegerParameter(parameter)) return "Integer"; - if (isStringParameter(parameter)) return "String"; - if (isBooleanParameter(parameter)) return "Boolean"; - throw new Error("Unknown parameter type"); - } - - // async function test() { - // await invoke ('set_parameter', {paramsOption}); - // } + // Check the parameter type + function isIntegerParameter( + parameter: any + ): parameter is { Integer: { value: number; min: number; max: number } } { + return (parameter as { Integer?: unknown }).Integer !== undefined; + } + function isStringParameter(parameter: any): parameter is { String: { value: string } } { + return (parameter as { String?: unknown }).String !== undefined; + } + function isBooleanParameter(parameter: any): parameter is { Boolean: { value: boolean } } { + return (parameter as { Boolean?: unknown }).Boolean !== undefined; + } + + // Validate the input value + function validateInput(event: any) { + const input = event.target.value; + const validInput = input.replace(/[^0-9]/g, ''); + const param = paramsOption.items[event.target.id].parameter.Integer; + + if (validInput === '') { + paramsOption.items[event.target.id].parameter.Integer.value = validInput; + return; + } + + const numValue = Number(validInput); + if ( + (param.min === undefined || numValue >= param.min) && + (param.max === undefined || numValue <= param.max) + ) { + paramsOption.items[event.target.id].parameter.Integer.value = validInput; + } else { + event.target.value = paramsOption.items[event.target.id].parameter.Integer.value; + } + } + {#if debug} -

{JSON.stringify(debug)}

+

{JSON.stringify(debug)}

{/if} - +
@@ -106,35 +109,49 @@
- {#if optionParameter.length > 0} -
- -
- {#each optionParameter as key} - - {#if getParameterType(key) === 'Integer'} -
- - -
- {:else if getParameterType(key) === 'String'} - -
- - -
- {:else if getParameterType(key) === 'Boolean'} - -
- - -
- {/if} - {/each} - -
-
- {/if} + {#if optionParameter.length > 0} +
+ +
+ {#each optionParameter as key} + {#if isIntegerParameter(paramsOption.items[key].parameter)} +
+ + +
+ {:else if isStringParameter(paramsOption.items[key].parameter)} +
+ + +
+ {:else if isBooleanParameter(paramsOption.items[key].parameter)} +
+ + +
+ {/if} + {/each} +
+
+ {/if}