add feature to customize date formatting

This commit is contained in:
SvenPf 2023-07-24 01:12:38 +02:00
parent 2d2e380673
commit 0514ce5eb8
8 changed files with 110 additions and 9 deletions

View file

@ -8,6 +8,7 @@ import { MediaType } from '../../utils/MediaType';
export class MALAPI extends APIModel {
plugin: MediaDbPlugin;
typeMappings: Map<string, string>;
apiDateFormat: string = 'YYYY-MM-DDTHH:mm:ssZ'; // ISO
constructor(plugin: MediaDbPlugin) {
super();
@ -115,7 +116,7 @@ export class MALAPI extends APIModel {
image: result.images?.jpg?.image_url ?? '',
released: true,
premiere: new Date(result.aired?.from).toLocaleDateString() ?? 'unknown',
premiere: this.plugin.dateFormatter.format(result.aired?.from, this.apiDateFormat) ?? 'unknown',
streamingServices: result.streaming?.map((x: any) => x.name) ?? [],
userData: {
@ -146,7 +147,7 @@ export class MALAPI extends APIModel {
image: result.images?.jpg?.image_url ?? '',
released: true,
premiere: new Date(result.aired?.from).toLocaleDateString() ?? 'unknown',
premiere: this.plugin.dateFormatter.format(result.aired?.from, this.apiDateFormat) ?? 'unknown',
streamingServices: result.streaming?.map((x: any) => x.name) ?? [],
userData: {
@ -176,8 +177,8 @@ export class MALAPI extends APIModel {
image: result.images?.jpg?.image_url ?? '',
released: true,
airedFrom: new Date(result.aired?.from).toLocaleDateString() ?? 'unknown',
airedTo: new Date(result.aired?.to).toLocaleDateString() ?? 'unknown',
airedFrom: this.plugin.dateFormatter.format(result.aired?.from, this.apiDateFormat) ?? 'unknown',
airedTo: this.plugin.dateFormatter.format(result.aired?.to, this.apiDateFormat) ?? 'unknown',
airing: result.airing,
userData: {

View file

@ -9,6 +9,7 @@ import { MediaType } from '../../utils/MediaType';
export class OMDbAPI extends APIModel {
plugin: MediaDbPlugin;
typeMappings: Map<string, string>;
apiDateFormat: string = 'DD MMM YYYY';
constructor(plugin: MediaDbPlugin) {
super();
@ -142,7 +143,7 @@ export class OMDbAPI extends APIModel {
released: true,
streamingServices: [],
premiere: new Date(result.Released).toLocaleDateString() ?? 'unknown',
premiere: this.plugin.dateFormatter.format(result.Released, this.apiDateFormat) ?? 'unknown',
userData: {
watched: false,
@ -173,7 +174,7 @@ export class OMDbAPI extends APIModel {
released: true,
streamingServices: [],
airing: false,
airedFrom: new Date(result.Released).toLocaleDateString() ?? 'unknown',
airedFrom: this.plugin.dateFormatter.format(result.Released, this.apiDateFormat) ?? 'unknown',
airedTo: 'unknown',
userData: {
@ -199,7 +200,7 @@ export class OMDbAPI extends APIModel {
image: result.Poster ?? '',
released: true,
releaseDate: new Date(result.Released).toLocaleDateString() ?? 'unknown',
releaseDate: this.plugin.dateFormatter.format(result.Released, this.apiDateFormat) ?? 'unknown',
userData: {
played: false,

View file

@ -8,6 +8,7 @@ import { MediaType } from '../../utils/MediaType';
export class SteamAPI extends APIModel {
plugin: MediaDbPlugin;
typeMappings: Map<string, string>;
apiDateFormat: string = 'DD MMM, YYYY';
constructor(plugin: MediaDbPlugin) {
super();
@ -109,7 +110,7 @@ export class SteamAPI extends APIModel {
image: result.header_image ?? '',
released: !result.release_date?.comming_soon,
releaseDate: new Date(result.release_date?.date).toLocaleDateString() ?? 'unknown',
releaseDate: this.plugin.dateFormatter.format(result.release_date?.date, this.apiDateFormat) ?? 'unknown',
userData: {
played: false,

View file

@ -6,6 +6,7 @@ import { MediaType } from '../../utils/MediaType';
export class WikipediaAPI extends APIModel {
plugin: MediaDbPlugin;
apiDateFormat: string = 'YYYY-MM-DDTHH:mm:ssZ'; // ISO
constructor(plugin: MediaDbPlugin) {
super();
@ -72,7 +73,7 @@ export class WikipediaAPI extends APIModel {
id: result.pageid,
wikiUrl: result.fullurl,
lastUpdated: new Date(result.touched).toLocaleDateString() ?? 'unknown',
lastUpdated: this.plugin.dateFormatter.format(result.touched, this.apiDateFormat),
length: result.length,
userData: {},

View file

@ -15,6 +15,7 @@ import { YAMLConverter } from './utils/YAMLConverter';
import { MediaDbFolderImportModal } from './modals/MediaDbFolderImportModal';
import { PropertyMapping, PropertyMappingModel } from './settings/PropertyMapping';
import { ModalHelper, ModalResultCode, SearchModalOptions } from './utils/ModalHelper';
import { DateFormatter } from './utils/DateFormatter';
export default class MediaDbPlugin extends Plugin {
settings: MediaDbPluginSettings;
@ -22,6 +23,7 @@ export default class MediaDbPlugin extends Plugin {
mediaTypeManager: MediaTypeManager;
modelPropertyMapper: PropertyMapper;
modalHelper: ModalHelper;
dateFormatter: DateFormatter;
frontMatterRexExpPattern: string = '^(---)\\n[\\s\\S]*?\\n---';
@ -39,6 +41,7 @@ export default class MediaDbPlugin extends Plugin {
this.mediaTypeManager = new MediaTypeManager();
this.modelPropertyMapper = new PropertyMapper(this);
this.modalHelper = new ModalHelper(this);
this.dateFormatter = new DateFormatter();
await this.loadSettings();
// register the settings tab
@ -46,6 +49,7 @@ export default class MediaDbPlugin extends Plugin {
this.mediaTypeManager.updateTemplates(this.settings);
this.mediaTypeManager.updateFolders(this.settings);
this.dateFormatter.setFormat(this.settings.customDateFormat);
// add icon to the left ribbon
const ribbonIconEl = this.addRibbonIcon('database', 'Add new Media DB entry', () => this.createEntryWithAdvancedSearchModal());
@ -563,6 +567,7 @@ export default class MediaDbPlugin extends Plugin {
async saveSettings(): Promise<void> {
this.mediaTypeManager.updateTemplates(this.settings);
this.mediaTypeManager.updateFolders(this.settings);
this.dateFormatter.setFormat(this.settings.customDateFormat);
await this.saveData(this.settings);
}

View file

@ -7,12 +7,14 @@ import PropertyMappingModelsComponent from './PropertyMappingModelsComponent.sve
import { PropertyMapping, PropertyMappingModel, PropertyMappingOption } from './PropertyMapping';
import { MEDIA_TYPES } from '../utils/MediaTypeManager';
import { MediaTypeModel } from '../models/MediaTypeModel';
import { fragWithHTML } from '../utils/Utils';
export interface MediaDbPluginSettings {
OMDbKey: string;
sfwFilter: boolean;
useCustomYamlStringifier: boolean;
templates: boolean;
customDateFormat: string;
movieTemplate: string;
seriesTemplate: string;
@ -50,6 +52,7 @@ const DEFAULT_SETTINGS: MediaDbPluginSettings = {
sfwFilter: true,
useCustomYamlStringifier: true,
templates: true,
customDateFormat: 'L',
movieTemplate: '',
seriesTemplate: '',
@ -165,6 +168,23 @@ export class MediaDbSettingTab extends PluginSettingTab {
});
});
new Setting(containerEl)
.setName('Date format')
.setDesc(fragWithHTML("Your custom date format. Use <em>\'YYYY-MM-DD\'</em> for example.<br>" +
"For more syntax, refer to <a href='https://momentjs.com/docs/#/displaying/format/'>format reference</a>.<br>" +
"Your current syntax looks like this: <b><a id='dateformat-preview' style='pointer-events: none; cursor: default; text-decoration: none;'>" +
this.plugin.dateFormatter.getPreview() + "</a></b>"))
.addText(cb => {
cb.setPlaceholder(DEFAULT_SETTINGS.customDateFormat)
.setValue(this.plugin.settings.customDateFormat === DEFAULT_SETTINGS.customDateFormat ? '' : this.plugin.settings.customDateFormat)
.onChange(data => {
const newDateFormat = data ? data : DEFAULT_SETTINGS.customDateFormat;
this.plugin.settings.customDateFormat = newDateFormat;
document.getElementById('dateformat-preview').innerHTML = this.plugin.dateFormatter.getPreview(newDateFormat); // update preview
this.plugin.saveSettings();
});
});
containerEl.createEl('h3', { text: 'New File Location' });
// region new file location
new Setting(containerEl)

View file

@ -0,0 +1,70 @@
// obsidian already uses moment, so no need to package it twice!
// import { moment } from 'obsidian'; // doesn't work for release build
// obsidian uses a namespace-style import for moment, which ES6 doesn't allow anymore
const obsidian = require('obsidian');
const moment = obsidian.moment;
export class DateFormatter {
toFormat: string;
localeString: string;
constructor() {
this.toFormat = 'YYYY-MM-DD';
// get locale string (e.g. en, en-gb, de, fr, etc.)
this.localeString = new Intl.DateTimeFormat().resolvedOptions().locale;
}
setFormat(format: string): void {
this.toFormat = format;
}
getPreview(format?: string): string {
const today = moment();
today.locale(this.localeString);
if (!format) {
format = this.toFormat;
}
return today.format(format);
}
/**
* Tries to format a given date string with the currently set date format.
* You can set a date format by calling `setFormat()`.
*
* @param dateString the date string to be formatted
* @param dateFormat the current format of `dateString`. When this is `null` and the actual format of the
* given date string is not `C2822` or `ISO` format, this function will try to guess the format by using the native `Date` module.
* @returns formatted date string or null if `dateString` is not a valid date
*/
format(dateString: string, dateFormat?: string): string | null {
if (!dateString) {
return null;
}
let date: moment.Moment;
if (!dateFormat) {
// reading date formats other then C2822 or ISO with moment is deprecated
if (this.hasMomentFormat(dateString)) {
// expect C2822 or ISO format
date = moment(dateString);
} else {
// try to read date string with native Date
date = moment(new Date(dateString));
}
date.locale(this.localeString); // set local locale definition for moment
} else {
date = moment(dateString, dateFormat, this.localeString);
}
// format date (if it is valid)
return date.isValid() ? date.format(this.toFormat) : null;
}
private hasMomentFormat(dateString: string): boolean {
const date = moment(dateString, true); // strict mode
return date.isValid();
}
}

View file

@ -135,6 +135,8 @@ export function markdownTable(content: string[][]): string {
return table;
}
export const fragWithHTML = (html: string) => createFragment(frag => (frag.createDiv().innerHTML = html));
export function dateToString(date: Date): string {
return `${date.getMonth() + 1}-${date.getDate()}-${date.getFullYear()}`;
}