add speed setting close #49

server/scripts/modules/utils/setting.mjs

@@ -3,23 +3,27 @@ import { parseQueryString } from '../share.mjs';
 const SETTINGS_KEY = 'Settings';
 
 class Setting {
-	constructor(shortName, name, type, defaultValue, changeAction, sticky) {
+	constructor(shortName, name, type, defaultValue, changeAction, sticky, values) {
 		// store values
 		this.shortName = shortName;
 		this.name = name;
 		this.defaultValue = defaultValue;
 		this.myValue = defaultValue;
-		this.type = type;
+		this.type = type ?? 'checkbox';
 		this.sticky = sticky;
+		this.values = values;
 		// a default blank change function is provided
 		this.changeAction = changeAction ?? (() => { });
 
 		// get value from url
-		const urlValue = parseQueryString()?.[`settings-${shortName}-checkbox`];
+		const urlValue = parseQueryString()?.[`settings-${shortName}-${type}`];
 		let urlState;
-		if (urlValue !== undefined) {
+		if (type === 'checkbox' && urlValue !== undefined) {
 			urlState = urlValue === 'true';
 		}
+		if (type === 'select' && urlValue !== undefined) {
+			urlState = parseFloat(urlValue);
+		}
 
 		// get existing value if present
 		const storedValue = urlState ?? this.getFromLocalStorage();
@@ -28,7 +32,46 @@ class Setting {
 		}
 
 		// call the change function on startup
-		this.checkboxChange({ target: { checked: this.myValue } });
+		switch (type) {
+		case 'select':
+			this.selectChange({ target: { value: this.myValue } });
+			break;
+		case 'checkbox':
+		default:
+			this.checkboxChange({ target: { checked: this.myValue } });
+		}
+	}
+
+	generateSelect() {
+		// create a radio button set in the selected displays area
+		const label = document.createElement('label');
+		label.for = `settings-${this.shortName}-select`;
+		label.id = `settings-${this.shortName}-label`;
+
+		const span = document.createElement('span');
+		span.innerHTML = `${this.name} `;
+		label.append(span);
+
+		const select = document.createElement('select');
+		select.id = `settings-${this.shortName}-select`;
+		select.name = `settings-${this.shortName}-select`;
+		select.addEventListener('change', (e) => this.selectChange(e));
+
+		this.values.forEach(([value, text]) => {
+			const option = document.createElement('option');
+			option.value = value.toFixed(2);
+
+			option.innerHTML = text;
+			select.append(option);
+		});
+		label.append(select);
+
+		this.element = label;
+
+		// set the initial value
+		this.selectHighlight(this.myValue);
+
+		return label;
 	}
 
 	generateCheckbox() {
@@ -48,7 +91,7 @@ class Setting {
 
 		label.append(checkbox, span);
 
-		this.checkbox = label;
+		this.element = label;
 
 		return label;
 	}
@@ -62,6 +105,15 @@ class Setting {
 		this.changeAction(this.myValue);
 	}
 
+	selectChange(e) {
+		// update the value
+		this.myValue = parseFloat(e.target.value);
+		this.storeToLocalStorage(this.myValue);
+
+		// call the change action
+		this.changeAction(this.myValue);
+	}
+
 	storeToLocalStorage(value) {
 		if (!this.sticky) return;
 		const allSettingsString = localStorage?.getItem(SETTINGS_KEY) ?? '{}';
@@ -79,7 +131,7 @@ class Setting {
 					switch (this.type) {
 					case 'boolean':
 						return storedValue;
-					case 'int':
+					case 'select':
 						return storedValue;
 					default:
 						return null;
@@ -99,12 +151,36 @@ class Setting {
 	set value(newValue) {
 		// update the state
 		this.myValue = newValue;
-		this.checkbox.checked = newValue;
+		switch (this.type) {
+		case 'select':
+			this.selectHighlight(newValue);
+			break;
+		case 'checkbox':
+		default:
+			this.element.checked = newValue;
+		}
 		this.storeToLocalStorage(this.myValue);
 
 		// call change action
 		this.changeAction(this.myValue);
 	}
+
+	selectHighlight(newValue) {
+		// set the dropdown to the provided value
+		this.element.querySelectorAll('option').forEach((elem) => {
+			elem.selected = newValue.toFixed(2) === elem.value;
+		});
+	}
+
+	generate() {
+		switch (this.type) {
+		case 'select':
+			return this.generateSelect();
+		case 'checkbox':
+		default:
+			return this.generateCheckbox();
+		}
+	}
 }
 
 export default Setting;