Tools/Notes
1
0
Fork 0
mirror of https://github.com/TriliumNext/Notes.git synced 2025-09-19 02:10:04 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(time_selector): add possibility to omit time scales

Browse Source
This commit is contained in:
Panagiotis Papadopoulos 2025-02-16 15:27:18 +01:00
parent 35a3d326f7
commit 793b0c9fe8
1 changed files with 12 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/public/app/widgets/type_widgets/options/time_selector.ts
View File

@ -9,19 +9,22 @@ type TimeSelectorConstructor = {
widgetLabelId: string; widgetLabelId: string;
optionValueId: keyof OptionDefinitions; optionValueId: keyof OptionDefinitions;
optionTimeScaleId: keyof OptionDefinitions; optionTimeScaleId: keyof OptionDefinitions;
includedTimeScales?: Set<TimeSelectorScale>;
}; };
type TimeSelectorScale = "seconds" | "minutes" | "hours" | "days";
const TPL = (options: Pick<TimeSelectorConstructor, "widgetId" | "widgetLabelId">) => `
const TPL = (options: Omit<TimeSelectorConstructor, "optionValueId" | "optionTimeScaleId">) => `
<div class="form-group"> <div class="form-group">
<label for="${options.widgetId}">${t(options.widgetLabelId)}</label> <label for="${options.widgetId}">${t(options.widgetLabelId)}</label>
<div class="d-flex gap-2"> <div class="d-flex gap-2">
<input id="${options.widgetId}" class="form-control options-number-input" type="number" min="0" steps="1" required> <input id="${options.widgetId}" class="form-control options-number-input" type="number" min="0" steps="1" required>
<select id="${options.widgetId}-time-scale" class="form-select duration-selector" required> <select id="${options.widgetId}-time-scale" class="form-select duration-selector" required>
<option value="1">${t("duration.seconds")}</option> ${options.includedTimeScales?.has("seconds") ? `<option value="1">${t("duration.seconds")}</option>` : ""}
<option value="60">${t("duration.minutes")}</option> ${options.includedTimeScales?.has("minutes") ? `<option value="60">${t("duration.minutes")}</option>` : ""}
<option value="3600">${t("duration.hours")}</option> ${options.includedTimeScales?.has("hours") ? `<option value="3600">${t("duration.hours")}</option>` : ""}
<option value="86400">${t("duration.days")}</option> ${options.includedTimeScales?.has("days") ? `<option value="86400">${t("duration.days")}</option>` : ""}
</select> </select>
</div> </div>
</div> </div>
@ -42,6 +45,7 @@ export default class TimeSelector extends OptionsWidget {
private widgetLabelId: string; private widgetLabelId: string;
private optionValueId: keyof OptionDefinitions; private optionValueId: keyof OptionDefinitions;
private optionTimeScaleId: keyof OptionDefinitions; private optionTimeScaleId: keyof OptionDefinitions;
private includedTimeScales: Set<TimeSelectorScale>;
constructor(options: TimeSelectorConstructor) { constructor(options: TimeSelectorConstructor) {
super(); super();
@ -49,12 +53,14 @@ export default class TimeSelector extends OptionsWidget {
this.widgetLabelId = options.widgetLabelId; this.widgetLabelId = options.widgetLabelId;
this.optionValueId = options.optionValueId; this.optionValueId = options.optionValueId;
this.optionTimeScaleId = options.optionTimeScaleId; this.optionTimeScaleId = options.optionTimeScaleId;
this.includedTimeScales = (!options.includedTimeScales) ? new Set(["seconds", "minutes", "hours", "days"]) : options.includedTimeScales;
} }
doRender() { doRender() {
this.$widget = $(TPL({ this.$widget = $(TPL({
widgetId: this.widgetId, widgetId: this.widgetId,
widgetLabelId: this.widgetLabelId widgetLabelId: this.widgetLabelId,
includedTimeScales: this.includedTimeScales,
})); }));
this.$timeValueInput = this.$widget.find(`#${this.widgetId}`); this.$timeValueInput = this.$widget.find(`#${this.widgetId}`);