Added support for select to config

Added more backends
zen-fs · Oct 12, 2024 · fdbe106 · fdbe106
1 parent cdde41d
commit fdbe106
Show file tree

Hide file tree

Showing 2 changed files with 106 additions and 14 deletions.
diff --git a/src/backends.ts b/src/backends.ts
@@ -1,22 +1,32 @@
+/* eslint-disable @typescript-eslint/only-throw-error */
 import type { Backend, OptionsOf } from '@zenfs/core';
 import { Fetch, InMemory, Overlay, Port } from '@zenfs/core';
+import { WebAccess, WebStorage, IndexedDB } from '@zenfs/dom';
+import { Iso } from '@zenfs/iso';
+import { Zip } from '@zenfs/zip';
 import $ from 'jquery';
 
 export type HTMLAttributeName = 'id' | 'class' | 'style' | 'href' | 'src' | 'alt' | 'title' | 'placeholder';
 
+export type BackendInputElement = HTMLInputElement | HTMLSelectElement;
+
+export type BackendInput<Opts extends object = object, K extends keyof Opts = keyof Opts> = {
+	select?: Record<string, string>;
+	ready?(element: BackendInputElement): unknown;
+	parse?(element: BackendInputElement): Opts[K] | Promise<Opts[K]>;
+} & {
+	[A in HTMLAttributeName]?: string;
+};
+
 export interface BackendOption<T extends Backend> {
 	backend: T;
-
 	inputs: {
-		[K in keyof OptionsOf<T>]: {
-			parse?(element: HTMLInputElement): OptionsOf<T>[K];
-		} & {
-			[A in HTMLAttributeName]?: string;
-		};
+		[K in keyof OptionsOf<T>]: BackendInput<OptionsOf<T>, K>;
 	};
 }
 
 export const backends = [
+	// @zenfs/core
 	{
 		backend: InMemory,
 		inputs: {
@@ -33,8 +43,8 @@ export const backends = [
 	{
 		backend: Overlay,
 		inputs: {
-			readable: { placeholder: 'Readable' },
-			writable: { placeholder: 'Writable' },
+			readable: { placeholder: 'Readable mount' },
+			writable: { placeholder: 'Writable mount' },
 		},
 	},
 	{
@@ -61,4 +71,75 @@ export const backends = [
 			},
 		},
 	},
+	// @zenfs/dom
+	{
+		backend: WebStorage,
+		inputs: {
+			storage: {
+				select: {
+					'': 'Select storage',
+					localStorage: 'Local',
+					sessionStorage: 'Session',
+				},
+				parse(input: HTMLSelectElement) {
+					return globalThis[input.value as 'localStorage' | 'sessionStorage'];
+				},
+			},
+		},
+	},
+	{
+		backend: IndexedDB,
+		inputs: {
+			storeName: {
+				placeholder: 'DB name',
+			},
+		},
+	},
+	{
+		backend: WebAccess,
+		inputs: {
+			handle: {
+				type: 'hidden',
+				parse() {
+					return navigator.storage.getDirectory();
+				},
+			},
+		},
+	},
+	// @zenfs/zip
+	{
+		backend: Zip,
+		inputs: {
+			name: {
+				type: 'hidden',
+			},
+			data: {
+				type: 'file',
+				parse(input: HTMLInputElement) {
+					const file = input.files![0];
+					if (!file) {
+						throw 'No files uploaded';
+					}
+					$(input.parentElement!).find('.name').val(file.name);
+					return file.arrayBuffer();
+				},
+			},
+		},
+	},
+	// @zenfs/iso
+	{
+		backend: Iso,
+		inputs: {
+			data: {
+				type: 'file',
+				parse(input: HTMLInputElement) {
+					const file = input.files![0];
+					if (!file) {
+						throw 'No files uploaded';
+					}
+					return file.arrayBuffer();
+				},
+			},
+		},
+	},
 ] satisfies BackendOption<Backend>[];
diff --git a/src/index.ts b/src/index.ts
@@ -1,12 +1,12 @@
-/* eslint-disable @typescript-eslint/no-unsafe-argument,@typescript-eslint/no-unsafe-assignment */
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
 import '@xterm/xterm/css/xterm.css';
 import './styles.css';
 
 import { FitAddon } from '@xterm/addon-fit';
 import { Terminal } from '@xterm/xterm';
 import $ from 'jquery';
 import { randomHex, type Entries } from 'utilium';
-import { backends } from './backends.js';
+import { backends, type BackendInput, type BackendInputElement } from './backends.js';
 import { instantiateTemplate } from './templates.js';
 
 // Switching tabs
@@ -24,7 +24,7 @@ $('#config .add').on('click', () => {
 	const select = li.find('select');
 
 	select.on('change', () => {
-		li.find('input').filter('[backend_specific]').remove();
+		li.find('[backend_specific]').remove();
 		const backend = backends.find(({ backend }) => backend.name == select.val());
 		if (!backend) {
 			return;
@@ -34,9 +34,20 @@ $('#config .add').on('click', () => {
 				throw new Error();
 			}
 
-			$('<input />')
-				.attr({ ...data, name, backend_specific: true })
-				.appendTo(li);
+			const d = data as BackendInput;
+
+			const input = $(d.select ? '<select></select>' : '<input />').attr({ ...d, select: null, parse: null, name, backend_specific: true });
+			if (d.select) {
+				for (const [value, text] of Object.entries(d.select)) {
+					const opt = $('<option />').text(text).val(value);
+					if (value == '') {
+						opt.attr({ disabled: true, selected: true });
+					}
+					opt.appendTo(input);
+				}
+			}
+			input.appendTo(li);
+			d.ready?.(input[0] as BackendInputElement);
 		}
 	});