-
+
+ ${this.#activeCategoryExercises.map(
+ (item) => html`
+
+ `
+ )}
@@ -565,10 +558,29 @@ export class App extends LitElement {
const { name, checked, value, type } = target;
if (type === 'checkbox') {
- this._settingsFormValues = {
- ...this._settingsFormValues,
- [name]: isBool(checked) ? checked : false,
- };
+ if (name === SETTINGS_KEY.exercisesByCategory) {
+ const category = this._activeCategoryTab;
+ this._settingsFormValues = {
+ ...this._settingsFormValues,
+ [name]: {
+ ...this._settingsFormValues.exercisesByCategory,
+ [category]: checked
+ ? [
+ ...new Set([...this.#selectedCategoryExercises, value]),
+ ].filter((item) =>
+ this.#activeCategoryExercises.includes(item)
+ )
+ : this.#selectedCategoryExercises.filter(
+ (item) => item !== value
+ ),
+ },
+ };
+ } else {
+ this._settingsFormValues = {
+ ...this._settingsFormValues,
+ [name]: isBool(checked) ? checked : false,
+ };
+ }
} else if (type === 'number') {
this._settingsFormValues = {
...this._settingsFormValues,
@@ -586,26 +598,7 @@ export class App extends LitElement {
if (target instanceof HTMLSelectElement) {
const { name, value } = target;
- if (name === SETTINGS_KEY.exercisesByCategory) {
- const category = this._activeCategoryTab;
- const exercisesInCategory =
- EXERCISES_BY_CATEGORY_MAP.get(category) ?? [];
- const { selectedOptions } = target;
-
- const validSelections = Array.from(selectedOptions)
- .map((option) => option.value)
- .filter((option) => exercisesInCategory.includes(option));
-
- if (validSelections.length) {
- this._settingsFormValues = {
- ...this._settingsFormValues,
- [name]: {
- ...this._settingsFormValues.exercisesByCategory,
- [category]: validSelections,
- },
- };
- }
- } else if (
+ if (
name === SETTINGS_KEY.audioSound ||
name === SETTINGS_KEY.audioVolume
) {
@@ -760,14 +753,6 @@ export class App extends LitElement {
width: 100%;
}
- #exerciseSelect option[data-selected='true'] {
- background-color: #464646;
- }
-
- #exerciseSelect option[data-selected='false'] {
- background-color: #2b2a33;
- }
-
#audioSection {
display: flex;
gap: 0.5rem;