From 9b4a0da10bedb141c12e83319a091cedcce59771 Mon Sep 17 00:00:00 2001
From: Dan Salvato <dan@teamsalvato.com>
Date: Sat, 10 Feb 2024 11:29:54 -0700
Subject: [PATCH] Cleanup toggle switch component

---
 .../main_menu/components/main-menu.vue        |  18 +-
 src/std-components/toggle-switch.vue          | 158 ++++--------------
 2 files changed, 35 insertions(+), 141 deletions(-)

diff --git a/src/modules/main_menu/components/main-menu.vue b/src/modules/main_menu/components/main-menu.vue
index 934e03a5..8936160f 100644
--- a/src/modules/main_menu/components/main-menu.vue
+++ b/src/modules/main_menu/components/main-menu.vue
@@ -90,16 +90,12 @@
 				<footer>
 					<div class="tw-border-t">
 						<toggle-switch
-							groupname="ffzSimpleView"
-							:options="{
-								config: {
-									preSelected: context.simple_view ? 'Simple' : 'Advanced',
-									items: [
-										{ name: t('main-menu.simple', 'Simple'), value: 'Simple' },
-										{ name: t('main-menu.advanced', 'Advanced'), value: 'Advanced' }
-									]
-								}
-							}"
+							group-name="ffzSimpleView"
+							:preselected="context.simple_view ? 'simple' : 'advanced'"
+							:items="[
+								{ name: t('main-menu.simple', 'Simple'), value: 'simple' },
+								{ name: t('main-menu.advanced', 'Advanced'), value: 'advanced' }
+							]"
 							@change="updateSimpleView"
 						/>
 					</div>
@@ -370,7 +366,7 @@ export default {
 
 		updateSimpleView(event) {
 			const key = 'ffz.simple-view';
-			const val = event.value === 'Simple';
+			const val = event.value === 'simple';
 			this.context.currentProfile.set(key, val);
 		}
 	}
diff --git a/src/std-components/toggle-switch.vue b/src/std-components/toggle-switch.vue
index f04b03fb..0928ce99 100644
--- a/src/std-components/toggle-switch.vue
+++ b/src/std-components/toggle-switch.vue
@@ -3,21 +3,18 @@
 		class="toggle-switch"
 	>
 		<template
-			v-for="item in defaultOptions.config.items"
+			v-for="item in items"
 		>
 			<input
-				:id="item.value + group"
+				:id="item.value"
 				:value="item.value"
-				:disabled="defaultOptions.config.disabled || disabled"
-				:name="groupname"
-				:class="{ active: !defaultOptions.config.disabled || disabled}"
+				:name="groupName"
 				type="radio"
 				:checked="item.value === selectedItem"
 				@click="toggle"
 			>
 			<label
-				:class="{ active: !defaultOptions.config.disabled || disabled }"
-				:for="item.value + group"
+				:for="item.value"
 				type="radio"
 			>
 				{{ item.name }}
@@ -27,157 +24,58 @@
 </template>
 
 <script>
-const rem = v => `${v}rem`
-
 export default {
 	props: {
-		options: {
-			type: Object,
+		preselected: {
+			type: String,
 			required: false
 		},
+		items: {
+			type: Array,
+			required: true
+		},
 		modelValue: {
 			type: String,
 			required: false
 		},
-		groupname: {
+		groupName: {
 			type: String,
 			required: true
 		},
-		group: {
-			type: String,
-			required: false,
-			default: ''
-		},
-		disabled: {
-			type: Boolean,
-			required: false,
-			default: false
-		}
 	},
 	emits: ['update:modelValue'],
 	data () {
 		return {
 			selected: false,
-			selectedItem: 'unknown',
-			defaultOptions: Object
-		}
-	},
-	computed: {
-		toggleSwitchStyle () {
-			return {
-				width: rem(this.defaultOptions.size.width),
-				height: rem(this.defaultOptions.size.height)
-			}
-		},
-		itemStyle () {
-			return {
-				width: rem(this.defaultOptions.size.width),
-				height: rem(this.defaultOptions.size.height),
-				fontFamily: this.defaultOptions.layout.fontFamily,
-				fontSize: rem(this.defaultOptions.size.fontSize),
-				textAlign: 'center'
-			}
-		},
-		labelStyle () {
-			return {
-				padding: rem(this.defaultOptions.size.padding),
-				borderColor: this.defaultOptions.layout.noBorder ? 'transparent' : this.defaultOptions.layout.borderColor,
-				backgroundColor: this.defaultOptions.layout.backgroundColor,
-				color: this.defaultOptions.layout.color,
-				fontWeight: this.defaultOptions.layout.fontWeight
-			}
+			selectedItem: ''
 		}
 	},
 	watch: {
 		modelValue (val) {
 			this.selectedItem = val
 		},
-		options (val) {
-			if (val !== null && val !== undefined) {
-				this.mergeDefaultOptionsWithProp(val)
-			}
-		}
 	},
 	mounted () {
-		if (this.options !== null && this.options !== undefined) {
-			this.mergeDefaultOptionsWithProp(this.options)
-		}
-		if (this.defaultOptions.config.preSelected !== 'unknown') {
-			this.selectedItem = this.defaultOptions.config.preSelected
-			this.$emit('update:modelValue', this.selectedItem)
-			this.$emit('input', this.selectedItem)
-		} else if (this.modelValue) {
+		if (this.preselected)
+			this.selectedItem = this.preselected
+		else if (this.modelValue)
 			this.selectedItem = this.modelValue
-			this.$emit('update:modelValue', this.selectedItem)
-			this.$emit('input', this.selectedItem)
-		}
-	},
-	created () {
-		this.defaultOptions = {
-			layout: {
-				color: 'black',
-				backgroundColor: 'lightgray',
-				selectedColor: 'white',
-				selectedBackgroundColor: 'green',
-				borderColor: 'gray',
-				fontFamily: 'Arial',
-				fontWeight: 'normal',
-				fontWeightSelected: 'bold',
-				squareCorners: false,
-				noBorder: false
-			},
-			size: {
-				fontSize: 1.5,
-				height: 3.25,
-				padding: 0.5,
-				width: 10
-			},
-			config: {
-				preSelected: 'unknown',
-				disabled: false,
-				items: [
-					{ name: 'Off', value: 'Off', color: 'white', backgroundColor: 'red' },
-					{ name: 'On', value: 'On', color: 'white', backgroundColor: 'green' }
-				]
-			}
-		}
+		else return;
+
+		this.$emit('update:modelValue', this.selectedItem)
+		this.$emit('input', this.selectedItem)
 	},
 	methods: {
 		toggle (event) {
-			if (!this.defaultOptions.config.disabled) {
-				this.selected = true
-				this.selectedItem = event.target.id.replace(this.group, '')
-				this.$emit('selected', this.selected)
-				this.$emit('update:modelValue', event.target.id.replace(this.group, ''))
-				this.$emit('input', this.selectedItem)
-				this.$emit('change', {
-					value: event.target.id.replace(this.group, ''),
-					srcEvent: event
-				})
-			}
-		},
-		labelStyleSelected (color, backgroundColor) {
-			return {
-				padding: rem(this.defaultOptions.size.padding),
-				borderColor: this.defaultOptions.layout.noBorder ? 'transparent' : this.defaultOptions.layout.borderColor,
-				fontWeight: this.defaultOptions.layout.fontWeightSelected,
-				backgroundColor: backgroundColor !== undefined ? backgroundColor : this.defaultOptions.layout.selectedBackgroundColor,
-				color: color !== undefined ? color : this.defaultOptions.layout.selectedColor
-			}
-		},
-		mergeDefaultOptionsWithProp (options) {
-			const result = this.defaultOptions
-			for (const option in options) {
-				if (options[option] !== null && typeof (options[option]) === 'object') {
-					for (const subOption in options[option]) {
-						if (options[option][subOption] !== undefined && options[option][subOption] !== null) {
-							result[option][subOption] = options[option][subOption]
-						}
-					}
-				} else {
-					result[option] = options[option]
-				}
-			}
+			this.selected = true
+			this.selectedItem = event.target.id
+			this.$emit('selected', this.selected)
+			this.$emit('update:modelValue', event.target.id)
+			this.$emit('input', this.selectedItem)
+			this.$emit('change', {
+				value: event.target.id,
+				srcEvent: event
+			})
 		}
 	}
 }