From 0c68306169978d6ae02c0bb200fd1bf7c1c8c320 Mon Sep 17 00:00:00 2001
From: EloiMusk <elioteuber@outlook.com>
Date: Wed, 8 Mar 2023 16:22:42 +0100
Subject: [PATCH] feat(setting-tab): working on SettingTab.ts

---
 main.ts             |   6 +--
 styles.css          |   5 ++
 utils/SettingTab.ts | 113 +++++++++++++++++++++++++++++---------------
 3 files changed, 83 insertions(+), 41 deletions(-)

diff --git a/main.ts b/main.ts
index 25d608c..0480ce6 100644
--- a/main.ts
+++ b/main.ts
@@ -112,9 +112,9 @@ export default class PrioPlugin extends Plugin {
 
 		// If the plugin hooks up any global DOM events (on parts of the app that doesn't belong to this plugin)
 		// Using this function will automatically remove the event listener when this plugin is disabled.
-		this.registerDomEvent(document, 'click', (evt: MouseEvent) => {
-			console.log('click', evt);
-		});
+		// this.registerDomEvent(document, 'click', (evt: MouseEvent) => {
+		// 	console.log('click', evt);
+		// });
 
 		// When registering intervals, this function will automatically clear the interval when the plugin is disabled.
 		this.registerInterval(window.setInterval(() => console.log('setInterval'), 5 * 60 * 1000));
diff --git a/styles.css b/styles.css
index 50caebb..fa0aefc 100644
--- a/styles.css
+++ b/styles.css
@@ -41,3 +41,8 @@ If your plugin does not need CSS, delete this file.
 .btn-primary:hover {
 	background-color: var(--interactive-accent-hover);
 }
+
+.level-text {
+	max-width: 50px;
+	margin: 5px;
+}
diff --git a/utils/SettingTab.ts b/utils/SettingTab.ts
index 4294ef4..60d82ea 100644
--- a/utils/SettingTab.ts
+++ b/utils/SettingTab.ts
@@ -1,5 +1,6 @@
-import {App, PluginSettingTab, Setting} from "obsidian";
+import {App, PluginSettingTab, Setting, SliderComponent} from "obsidian";
 import PrioPlugin from "../main";
+import {Preset} from "./Presets";
 
 export class SettingTab extends PluginSettingTab {
 	plugin: PrioPlugin;
@@ -14,9 +15,11 @@ export class SettingTab extends PluginSettingTab {
 
 		containerEl.empty();
 
-		let presets = this.plugin.settings.presets;
+		let presets: Preset[] = this.plugin.settings.presets ?? [];
+
 
 		containerEl.createEl('h2', {text: 'General Settings'});
+
 		if (this.plugin.settings.presets) {
 			const dropDownOptions: Record<string, string> = {'default': 'Default'};
 			this.plugin.settings.presets.map(preset => {
@@ -29,53 +32,87 @@ export class SettingTab extends PluginSettingTab {
 					search
 						.setPlaceholder('Search Presets')
 						.onChange(async (value) => {
-							presets = this.plugin.settings.presets?.filter(preset => preset.name.toLowerCase().includes(value.toLowerCase()));
+							presets = this.plugin.settings.presets?.filter(preset => preset.name.toLowerCase().includes(value.toLowerCase())) ?? [];
+							presetList.empty()
+							this.generatePresetList(presets, presetList);
 						});
 				});
 		}
-		new Setting(containerEl)
-			.setName('Levels')
-			.setDesc('Set the priority levels to use.')
-			.addSlider((slider) => {
-				slider
-					.setLimits(1, 10, 1)
-					.setValue(this.plugin.settings.levels)
-					.onChange(async (value) => {
-						this.plugin.settings.levels = value;
-					});
-			});
 
 		const presetList = createEl('ol', {
 			cls: 'preset-list',
 			parent: containerEl
 		});
 
-		(presets || []).map(preset => {
-			const el = createEl('li', {
-				text: preset.name,
-				cls: 'preset-list-item',
-				parent: presetList
-			});
-			const btnGroup = el.createEl('div', {
-				cls: 'btn-group'
-			});
+		const levelSliderSetting = new Setting(containerEl);
+		let levelSlider: SliderComponent;
+		const levelText = createEl('input', {
+			value: this.plugin.settings.levels.toString(),
+			type: 'numeric',
+			cls: 'level-text',
+			parent: levelSliderSetting.settingEl,
+			attr: {
+				min: 1,
+				max: 10,
+				step: 1,
+				type: 'number'
+			}
+		});
 
-			btnGroup.createEl('button', {
-				text: 'Select',
-				cls: ['preset-list-item-select', 'btn', 'btn-primary'],
-				attr: {
-					'onclick': 'alert("Preset Selected")'
-				}
+		levelText.addEventListener('change', (event) => {
+			let value = parseInt((event.target as HTMLInputElement).value);
+			if (value < 1) {
+				value = 1;
+			}
+			if (value > 10) {
+				value = 10;
+			}
+			levelSlider.setValue(value);
+		});
+
+		this.generatePresetList(presets, presetList);
+
+		levelSliderSetting
+			.setName('Levels')
+			.setDesc('Set the count of priority levels to use.')
+			.addSlider((slider) => {
+				levelSlider = slider
+				levelSlider
+					.setLimits(1, 10, 1)
+					.setValue(this.plugin.settings.levels)
+					.onChange(async (value) => {
+						this.plugin.settings.levels = value;
+						levelText.value = value.toString();
+					})
+					.setDynamicTooltip()
 			})
-			btnGroup.createEl('button', {
-				text: 'Save',
-				cls: ['preset-list-item-save', 'btn', 'btn-primary'],
-				attr: {
-					'onclick': 'alert("Save Preset")'
-				}
-			})
-			return el;
-		})
 
 	}
+
+	generatePresetList = (presets: Preset[], presetList: HTMLOListElement) => (presets || []).map(preset => {
+		const el = createEl('li', {
+			text: preset.name,
+			cls: 'preset-list-item',
+			parent: presetList
+		});
+		const btnGroup = el.createEl('div', {
+			cls: 'btn-group'
+		});
+
+		btnGroup.createEl('button', {
+			text: 'Select',
+			cls: ['preset-list-item-select', 'btn', 'btn-primary'],
+			attr: {
+				'onclick': 'alert("Preset Selected")'
+			}
+		})
+		btnGroup.createEl('button', {
+			text: 'Save',
+			cls: ['preset-list-item-save', 'btn', 'btn-primary'],
+			attr: {
+				'onclick': 'alert("Save Preset")'
+			}
+		})
+		return el;
+	});
 }