Skip to content

Commit 966db65

Browse files
fcasibufcasibu
committed
refactor: remove jquery in modals/edit-preset
1 parent d0997c2 commit 966db65

File tree

1 file changed

+79
-69
lines changed

1 file changed

+79
-69
lines changed

‎frontend/src/ts/modals/edit-preset.ts‎

Lines changed: 79 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ import {
2121
import { getDefaultConfig } from "../constants/default-config";
2222
import { SnapshotPreset } from "../constants/default-snapshot";
2323
import { ValidatedHtmlInputElement } from "../elements/input-validation";
24-
import { qsr } from "../utils/dom";
24+
import { qsa, qsr } from "../utils/dom";
2525
import { configMetadata } from "../config-metadata";
2626

2727
const state = {
@@ -45,7 +45,7 @@ export function show(action: string, id?: string, name?: string): void {
4545
void modal.show({
4646
focusFirstInput: true,
4747
beforeAnimation: async () => {
48-
$("#editPresetModal .modal .text").addClass("hidden");
48+
qsr("#editPresetModal .modal .text").hide();
4949
addCheckBoxes();
5050
presetNameEl ??= new ValidatedHtmlInputElement(
5151
qsr("#editPresetModal .modal input[type=text]"),
@@ -54,55 +54,55 @@ export function show(action: string, id?: string, name?: string): void {
5454
},
5555
);
5656
if (action === "add") {
57-
$("#editPresetModal .modal").attr("data-action", "add");
58-
$("#editPresetModal .modal .popupTitle").html("Add new preset");
59-
$("#editPresetModal .modal .submit").html(`add`);
57+
qsr("#editPresetModal .modal").setAttribute("data-action", "add");
58+
qsr("#editPresetModal .modal .popupTitle").setHtml("Add new preset");
59+
qsr("#editPresetModal .modal .submit").setHtml("add");
6060
presetNameEl.setValue(null);
61-
presetNameEl.getParent()?.removeClass("hidden");
62-
$("#editPresetModal .modal input").removeClass("hidden");
63-
$(
61+
presetNameEl.getParent()?.show();
62+
qsa("#editPresetModal .modal input").show();
63+
qsr(
6464
"#editPresetModal .modal label.changePresetToCurrentCheckbox",
65-
).addClass("hidden");
66-
$("#editPresetModal .modal .inputs").removeClass("hidden");
67-
$("#editPresetModal .modal .presetType").removeClass("hidden");
68-
$("#editPresetModal .modal .presetNameTitle").removeClass("hidden");
65+
).hide();
66+
qsr("#editPresetModal .modal .inputs").show();
67+
qsr("#editPresetModal .modal .presetType").show();
68+
qsr("#editPresetModal .modal .presetNameTitle").show();
6969
state.presetType = "full";
7070
} else if (action === "edit" && id !== undefined && name !== undefined) {
71-
$("#editPresetModal .modal").attr("data-action", "edit");
72-
$("#editPresetModal .modal").attr("data-preset-id", id);
73-
$("#editPresetModal .modal .popupTitle").html("Edit preset");
74-
$("#editPresetModal .modal .submit").html(`save`);
71+
qsr("#editPresetModal .modal").setAttribute("data-action", "edit");
72+
qsr("#editPresetModal .modal").setAttribute("data-preset-id", id);
73+
qsr("#editPresetModal .modal .popupTitle").setHtml("Edit preset");
74+
qsr("#editPresetModal .modal .submit").setHtml(`save`);
7575
presetNameEl?.setValue(name);
76-
presetNameEl?.getParent()?.removeClass("hidden");
76+
presetNameEl?.getParent()?.show();
7777

78-
$("#editPresetModal .modal input").removeClass("hidden");
79-
$(
78+
qsa("#editPresetModal .modal input").show();
79+
qsr(
8080
"#editPresetModal .modal label.changePresetToCurrentCheckbox",
81-
).removeClass("hidden");
82-
$("#editPresetModal .modal .presetNameTitle").removeClass("hidden");
81+
).show();
82+
qsr("#editPresetModal .modal .presetNameTitle").show();
8383
state.setPresetToCurrent = false;
8484
await updateEditPresetUI();
8585
} else if (
8686
action === "remove" &&
8787
id !== undefined &&
8888
name !== undefined
8989
) {
90-
$("#editPresetModal .modal").attr("data-action", "remove");
91-
$("#editPresetModal .modal").attr("data-preset-id", id);
92-
$("#editPresetModal .modal .popupTitle").html("Delete preset");
93-
$("#editPresetModal .modal .submit").html("delete");
94-
$("#editPresetModal .modal input").addClass("hidden");
95-
$(
90+
qsr("#editPresetModal .modal").setAttribute("data-action", "remove");
91+
qsr("#editPresetModal .modal").setAttribute("data-preset-id", id);
92+
qsr("#editPresetModal .modal .popupTitle").setHtml("Delete preset");
93+
qsr("#editPresetModal .modal .submit").setHtml("delete");
94+
qsa("#editPresetModal .modal input").hide();
95+
qsr(
9696
"#editPresetModal .modal label.changePresetToCurrentCheckbox",
97-
).addClass("hidden");
98-
$("#editPresetModal .modal .text").removeClass("hidden");
99-
$("#editPresetModal .modal .deletePrompt").text(
97+
).hide();
98+
qsr("#editPresetModal .modal .text").show();
99+
qsr("#editPresetModal .modal .deletePrompt").setText(
100100
`Are you sure you want to delete the preset ${name}?`,
101101
);
102-
$("#editPresetModal .modal .inputs").addClass("hidden");
103-
$("#editPresetModal .modal .presetType").addClass("hidden");
104-
$("#editPresetModal .modal .presetNameTitle").addClass("hidden");
105-
presetNameEl?.getParent()?.addClass("hidden");
102+
qsr("#editPresetModal .modal .inputs").hide();
103+
qsr("#editPresetModal .modal .presetType").hide();
104+
qsr("#editPresetModal .modal .presetNameTitle").hide();
105+
presetNameEl?.getParent()?.hide();
106106
}
107107
updateUI();
108108
},
@@ -138,24 +138,20 @@ async function initializeEditState(id: string): Promise<void> {
138138

139139
function addCheckboxListeners(): void {
140140
ConfigGroupNameSchema.options.forEach((settingGroup: ConfigGroupName) => {
141-
const checkboxInput = $(
141+
const checkboxInput = qsr<HTMLInputElement>(
142142
`#editPresetModal .modal .checkboxList .checkboxTitlePair[data-id="${settingGroup}"] input`,
143143
);
144-
checkboxInput.on("change", (e) => {
145-
state.checkboxes.set(
146-
settingGroup,
147-
checkboxInput.prop("checked") as boolean,
148-
);
144+
145+
checkboxInput.on("change", async () => {
146+
state.checkboxes.set(settingGroup, checkboxInput.isChecked() as boolean);
149147
});
150148
});
151149

152-
const presetToCurrentCheckbox = $(
150+
const presetToCurrentCheckbox = qsr<HTMLInputElement>(
153151
`#editPresetModal .modal .changePresetToCurrentCheckbox input`,
154152
);
155153
presetToCurrentCheckbox.on("change", async () => {
156-
state.setPresetToCurrent = presetToCurrentCheckbox.prop(
157-
"checked",
158-
) as boolean;
154+
state.setPresetToCurrent = presetToCurrentCheckbox.isChecked() as boolean;
159155
await updateEditPresetUI();
160156
});
161157
}
@@ -164,16 +160,17 @@ function addCheckBoxes(): void {
164160
function camelCaseToSpaced(input: string): string {
165161
return input.replace(/([a-z])([A-Z])/g, "$1 $2");
166162
}
167-
const settingGroupListEl = $(
163+
const settingGroupListEl = qsr(
168164
"#editPresetModal .modal .inputs .checkboxList",
169165
).empty();
166+
170167
ConfigGroupNameSchema.options.forEach((currSettingGroup) => {
171168
const currSettingGroupTitle = camelCaseToSpaced(currSettingGroup);
172169
const settingGroupCheckbox: string = `<label class="checkboxTitlePair" data-id="${currSettingGroup}">
173170
<input type="checkbox" />
174171
<div class="title">${currSettingGroupTitle}</div>
175172
</label>`;
176-
settingGroupListEl.append(settingGroupCheckbox);
173+
settingGroupListEl.appendHtml(settingGroupCheckbox);
177174
});
178175
for (const key of state.checkboxes.keys()) {
179176
state.checkboxes.set(key, true);
@@ -183,34 +180,43 @@ function addCheckBoxes(): void {
183180

184181
function updateUI(): void {
185182
ConfigGroupNameSchema.options.forEach((settingGroup: ConfigGroupName) => {
186-
$(
187-
`#editPresetModal .modal .checkboxList .checkboxTitlePair[data-id="${settingGroup}"] input`,
188-
).prop("checked", state.checkboxes.get(settingGroup));
183+
if (state.checkboxes.get(settingGroup)) {
184+
qsr(
185+
`#editPresetModal .modal .checkboxList .checkboxTitlePair[data-id="${settingGroup}"] input`,
186+
).setAttribute("checked", "true");
187+
} else {
188+
qsr(
189+
`#editPresetModal .modal .checkboxList .checkboxTitlePair[data-id="${settingGroup}"] input`,
190+
).removeAttribute("checked");
191+
}
189192
});
190-
$(`#editPresetModal .modal .presetType button`).removeClass("active");
191-
$(
193+
194+
qsa(`#editPresetModal .modal .presetType button`).removeClass("active");
195+
qsr(
192196
`#editPresetModal .modal .presetType button[value="${state.presetType}"]`,
193197
).addClass("active");
194-
$(`#editPresetModal .modal .partialPresetGroups`).removeClass("hidden");
198+
qsr(`#editPresetModal .modal .partialPresetGroups`).show();
195199
if (state.presetType === "full") {
196-
$(`#editPresetModal .modal .partialPresetGroups`).addClass("hidden");
200+
qsr(`#editPresetModal .modal .partialPresetGroups`).hide();
197201
}
198202
}
199203
async function updateEditPresetUI(): Promise<void> {
200-
$("#editPresetModal .modal label.changePresetToCurrentCheckbox input").prop(
201-
"checked",
202-
state.setPresetToCurrent,
203-
);
204204
if (state.setPresetToCurrent) {
205-
const presetId = $("#editPresetModal .modal").attr(
205+
qsr(
206+
"#editPresetModal .modal label.changePresetToCurrentCheckbox input",
207+
).setAttribute("checked", "true");
208+
const presetId = qsr("#editPresetModal .modal").getAttribute(
206209
"data-preset-id",
207210
) as string;
208211
await initializeEditState(presetId);
209-
$("#editPresetModal .modal .inputs").removeClass("hidden");
210-
$("#editPresetModal .modal .presetType").removeClass("hidden");
212+
qsr("#editPresetModal .modal .inputs").show();
213+
qsr("#editPresetModal .modal .presetType").show();
211214
} else {
212-
$("#editPresetModal .modal .inputs").addClass("hidden");
213-
$("#editPresetModal .modal .presetType").addClass("hidden");
215+
qsr(
216+
"#editPresetModal .modal label.changePresetToCurrentCheckbox input",
217+
).removeAttribute("checked");
218+
qsr("#editPresetModal .modal .inputs").hide();
219+
qsr("#editPresetModal .modal .presetType").hide();
214220
}
215221
}
216222

@@ -219,23 +225,27 @@ function hide(): void {
219225
}
220226

221227
async function apply(): Promise<void> {
222-
const action = $("#editPresetModal .modal").attr("data-action");
223-
const propPresetName = $("#editPresetModal .modal input").val() as string;
228+
const action = qsr("#editPresetModal .modal").getAttribute("data-action");
229+
const propPresetName = qsa<HTMLInputElement>(
230+
"#editPresetModal .modal input",
231+
)[0]?.getValue() as string;
224232
const presetName = propPresetName.replaceAll(" ", "_");
225-
const presetId = $("#editPresetModal .modal").attr(
233+
const presetId = qsr("#editPresetModal .modal").getAttribute(
226234
"data-preset-id",
227235
) as string;
228236

229-
const updateConfig = $("#editPresetModal .modal label input").prop(
230-
"checked",
231-
) as boolean;
237+
const updateConfig = qsa<HTMLInputElement>(
238+
"#editPresetModal .modal label input",
239+
)[0]?.isChecked();
232240

233241
const snapshotPresets = DB.getSnapshot()?.presets ?? [];
234242

235-
if (action === undefined) {
243+
if (action === null) {
236244
return;
237245
}
238246

247+
console.log({ updateConfig, propPresetName });
248+
239249
const noPartialGroupSelected: boolean =
240250
["add", "edit"].includes(action) &&
241251
state.presetType === "partial" &&

0 commit comments

Comments
 (0)