diff --git a/package-lock.json b/package-lock.json index e9976c6..5524017 100644 --- a/package-lock.json +++ b/package-lock.json @@ -19,7 +19,7 @@ "@zenfs/zip": "^0.5.1", "chalk": "^5.3.0", "jquery": "^3.7.1", - "utilium": "^0.8.0" + "utilium": "^0.8.2" }, "devDependencies": { "@eslint/js": "^9.12.0", @@ -2958,9 +2958,9 @@ } }, "node_modules/utilium": { - "version": "0.8.0", - "resolved": "https://registry.npmjs.org/utilium/-/utilium-0.8.0.tgz", - "integrity": "sha512-ULkKr+21JFndL8Y/6AMep2+tXfO+Xs3S9/s76BKTjlAE7LVa3cM5DzSfpKp/DAtmaaEYOMwnqfoHBwogYI+Jhw==", + "version": "0.8.2", + "resolved": "https://registry.npmjs.org/utilium/-/utilium-0.8.2.tgz", + "integrity": "sha512-onOj//1Hi7vuEOIehgART+Ez2G6pfRZn4+XB+lVxyyP0SR3I7L6pkMhrd20pRZeeUFu+iIpm4Xfhsk9kiUsuTg==", "license": "MIT", "dependencies": { "eventemitter3": "^5.0.1" diff --git a/package.json b/package.json index b57556c..d1a5231 100644 --- a/package.json +++ b/package.json @@ -36,7 +36,7 @@ "@zenfs/zip": "^0.5.1", "chalk": "^5.3.0", "jquery": "^3.7.1", - "utilium": "^0.8.0" + "utilium": "^0.8.2" }, "devDependencies": { "@eslint/js": "^9.12.0", diff --git a/src/config.ts b/src/config.ts index 0c558a1..b27b913 100644 --- a/src/config.ts +++ b/src/config.ts @@ -7,6 +7,7 @@ import { Zip } from '@zenfs/zip'; import $ from 'jquery'; import { instantiateTemplate } from './templates.js'; import { randomHex, type Entries } from 'utilium'; +import { download, upload } from 'utilium/dom.js'; export type HTMLAttributeName = 'id' | 'class' | 'style' | 'href' | 'src' | 'alt' | 'title' | 'placeholder'; @@ -149,7 +150,7 @@ export const backends = [ }, ] satisfies BackendOption<Backend>[]; -$('#config .add').on('click', () => { +function createNewMountConfig() { const li = instantiateTemplate('#mount').find('li'); const id = randomHex(16); li.find('input[name=id]').val(id); @@ -187,7 +188,8 @@ $('#config .add').on('click', () => { $('<option />').text(backend.name).val(backend.name).appendTo(select); } li.appendTo('#config'); -}); + return li; +} function toFSTable(configs: Record<string, string>[]): string { return configs @@ -197,14 +199,27 @@ function toFSTable(configs: Record<string, string>[]): string { path, backend, Object.entries(config) - .map(([k, v]) => `${k}=${JSON.stringify(v)}`) - .join(';'), + .map(([k, v]) => k + '=' + v) + .join(','), ].join('\t') ) .join('\n'); } -$('#config .update').on('click', () => { +function fromFSTable(table: string): Record<string, string>[] { + return table.split('\n').map<Record<string, string>>(line => { + const [id, path, backend, options] = line.split(/\s+/); + + return { + ...(Object.fromEntries(options.split(',').map(entry => entry.split('='))) as object), + id, + path, + backend, + }; + }); +} + +function parseConfig(): Record<string, string>[] { const configs: Record<string, string>[] = []; $('#config') @@ -217,6 +232,37 @@ $('#config .update').on('click', () => { configs[i][input.name] = input.value; }); }); + return configs; +} + +function loadConfig(configs: Record<string, string>[]): void { + $('#config').find('li').remove(); + + for (const config of configs) { + const li = createNewMountConfig(); + li.find('[name=backend]').val(config.backend).trigger('change'); + + for (const [key, value] of Object.entries(config).sort(([key]) => (key == 'backend' ? -1 : 1))) { + li.find(`[name=${key}]`).val(value); + } + } +} + +$('#config .add').on('click', createNewMountConfig); + +$('#config .update').on('click', () => { + const configs = parseConfig(); console.log(configs); console.log(toFSTable(configs)); }); + +$('#config .download').on('click', () => { + const configs = parseConfig(); + download(toFSTable(configs), 'fstab'); +}); + +$('#config .upload').on('click', () => { + void upload() + .then(response => response.text()) + .then(table => loadConfig(fromFSTable(table))); +}); diff --git a/src/index.html b/src/index.html index 6e36019..5aa0a7b 100644 --- a/src/index.html +++ b/src/index.html @@ -28,7 +28,11 @@ </template> <button class="add">+</button> - <button class="update">Save and update</button> + <div class="right"> + <button class="upload">Upload</button> + <button class="download">Download</button> + <button class="update">Save and update</button> + </div> </ul> <ul id="explorer" class="tab" style="display: none"> diff --git a/src/styles.css b/src/styles.css index 12b6705..17ee702 100644 --- a/src/styles.css +++ b/src/styles.css @@ -97,11 +97,10 @@ select { padding: 0.5em 1em; } - .update { + .right { position: absolute; right: 1em; bottom: 1em; - padding: 0.5em 1em; } }