Added fstab save and auto-load from localStorage

zen-fs · Oct 13, 2024 · 0d33fee · 0d33fee
1 parent 934299e
commit 0d33fee
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 15 deletions.
diff --git a/src/config.ts b/src/config.ts
@@ -248,23 +248,44 @@ function loadConfig(configs: Record<string, string>[]): void {
 	}
 }
 
-$('#config .add').on('click', createNewMountConfig);
-
-$('#config .save').on('click', () => {
-	const configs = parseConfig();
+function saveConfig(configs: Record<string, string>[], noLocalStorage: boolean = false): void {
 	if (!fs.existsSync('/etc')) {
 		fs.mkdirSync('/etc');
 	}
-	fs.writeFileSync('/etc/fstab', toFSTable(configs));
+	const table = toFSTable(configs);
+	if (!noLocalStorage) localStorage.fstab = table;
+	fs.writeFileSync('/etc/fstab', table);
+}
+
+$<HTMLInputElement>('#config .auto-load')[0].checked = 'autoLoad' in localStorage;
+
+if (localStorage.autoLoad && localStorage.fstab) {
+	const config = fromFSTable(localStorage.getItem('fstab')!);
+	loadConfig(config);
+	saveConfig(config, true);
+}
+
+$('#config .add').on('click', createNewMountConfig);
+
+$('#config .upload').on('click', () => {
+	void upload()
+		.then(response => response.text())
+		.then(table => loadConfig(fromFSTable(table)));
 });
 
 $('#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)));
+$('#config .save').on('click', () => {
+	saveConfig(parseConfig());
+});
+
+$<HTMLInputElement>('#config .auto-load').on('change', e => {
+	if (e.target.checked) {
+		localStorage.autoLoad = 1;
+	} else {
+		localStorage.removeItem('autoLoad');
+	}
 });
diff --git a/src/index.html b/src/index.html
@@ -16,7 +16,11 @@
 		</div>
 
 		<ul id="config" class="tab">
-			<strong class="title">Configuration</strong>
+			<div class="top">
+				<p><strong>Configuration</strong></p>
+				<input type="checkbox" name="auto-load" class="auto-load" />
+				<label for="autoload">Auto-load</label>
+			</div>
 
 			<template id="mount">
 				<li class="mount">
@@ -29,15 +33,15 @@
 			</template>
 
 			<button class="add">+</button>
-			<div class="right">
+			<div class="manage">
 				<button class="upload">Upload</button>
 				<button class="download">Download</button>
 				<button class="save">Save</button>
 			</div>
 		</ul>
 
 		<ul id="explorer" class="tab" style="display: none">
-			<strong class="title">Explorer</strong>
+			<strong class="top">Explorer</strong>
 
 			<li class="header">
 				<p class="name">Name</p>
@@ -55,7 +59,7 @@
 		</ul>
 
 		<div id="editor" class="tab" style="display: none">
-			<strong class="title">Editor</strong>
+			<strong class="top">Editor</strong>
 
 			<textarea class="content"></textarea>
 		</div>

diff --git a/src/styles.css b/src/styles.css
@@ -1,5 +1,6 @@
 * {
 	color: #bbb;
+	color-scheme: dark;
 }
 
 body {
@@ -26,6 +27,7 @@ select {
 	border: 1px solid #888;
 	border-radius: 0.25em;
 	padding: 0.25em;
+	accent-color: #bbb;
 }
 
 textarea:focus,
@@ -76,7 +78,7 @@ input:focus {
 	inset: 3em 0.5em 0.5em;
 	margin: 0;
 
-	.title {
+	.top {
 		position: absolute;
 		left: 1em;
 		top: 0.5em;
@@ -98,11 +100,16 @@ input:focus {
 		padding: 0.5em 1em;
 	}
 
-	.right {
+	.manage {
 		position: absolute;
 		right: 1em;
 		bottom: 1em;
 	}
+
+	li {
+		position: relative;
+		top: 6em;
+	}
 }
 
 #explorer {