more changes for #48, the UI now works \o/

Author: mProjectsCode

src/main.ts

@@ -1,5 +1,5 @@
 import {Notice, parseYaml, Plugin, stringifyYaml, TFile, TFolder} from 'obsidian';
-import {DEFAULT_SETTINGS, MediaDbPluginSettings, MediaDbSettingTab} from './settings/Settings';
+import {getDefaultSettings, MediaDbPluginSettings, MediaDbSettingTab} from './settings/Settings';
 import {APIManager} from './api/APIManager';
 import {MediaTypeModel} from './models/MediaTypeModel';
 import {dateTimeToString, debugLog, markdownTable, replaceIllegalFileNameCharactersInString, UserCancelError, UserSkipError} from './utils/Utils';
@@ -16,6 +16,7 @@ import {BoardGameGeekAPI} from './api/apis/BoardGameGeekAPI';
 import {PropertyMapper} from './settings/PropertyMapper';
 import {YAMLConverter} from './utils/YAMLConverter';
 import {MediaDbFolderImportModal} from './modals/MediaDbFolderImportModal';
+import {PropertyMapping, PropertyMappingModel} from './settings/PropertyMapping';
 
 export default class MediaDbPlugin extends Plugin {
 	settings: MediaDbPluginSettings;
@@ -26,14 +27,6 @@ export default class MediaDbPlugin extends Plugin {
 	frontMatterRexExpPattern: string = '^(---)\\n[\\s\\S]*?\\n---';
 
 	async onload() {
-		await this.loadSettings();
-		// register the settings tab
-		this.addSettingTab(new MediaDbSettingTab(this.app, this));
-
-		// TESTING
-		this.settings.propertyMappings = DEFAULT_SETTINGS.propertyMappings;
-
-
 		this.apiManager = new APIManager();
 		// register APIs
 		this.apiManager.registerAPI(new OMDbAPI(this));
@@ -44,9 +37,18 @@ export default class MediaDbPlugin extends Plugin {
 		this.apiManager.registerAPI(new BoardGameGeekAPI(this));
 		// this.apiManager.registerAPI(new LocGovAPI(this)); // TODO: parse data
 
-		this.mediaTypeManager = new MediaTypeManager(this.settings);
+		this.mediaTypeManager = new MediaTypeManager();
 		this.modelPropertyMapper = new PropertyMapper(this);
 
+		await this.loadSettings();
+		// register the settings tab
+		this.addSettingTab(new MediaDbSettingTab(this.app, this));
+
+		// TESTING
+		// this.settings.propertyMappingModels = getDefaultSettings(this).propertyMappingModels;
+
+		this.mediaTypeManager.updateTemplates(this.settings);
+
 
 		// add icon to the left ribbon
 		const ribbonIconEl = this.addRibbonIcon('database', 'Add new Media DB entry', (evt: MouseEvent) =>
@@ -491,8 +493,37 @@ export default class MediaDbPlugin extends Plugin {
 	}
 
 	async loadSettings() {
-		console.log(DEFAULT_SETTINGS);
-		this.settings = Object.assign({}, DEFAULT_SETTINGS, await this.loadData());
+		// console.log(DEFAULT_SETTINGS);
+		const diskSettings: MediaDbPluginSettings = await this.loadData();
+		const defaultSettings: MediaDbPluginSettings = getDefaultSettings(this);
+		const loadedSettings: MediaDbPluginSettings = Object.assign({}, defaultSettings, diskSettings);
+
+		// migrate the settings loaded from the disk to match the structure of the default settings
+		let newPropertyMappings: PropertyMappingModel[] = [];
+		for (const defaultPropertyMappingModel of defaultSettings.propertyMappingModels) {
+			let newPropertyMappingModel: PropertyMappingModel = loadedSettings.propertyMappingModels.find(x => x.type === defaultPropertyMappingModel.type);
+			if (newPropertyMappingModel === undefined) { // if the propertyMappingModel exists in the default settings but not the loaded settings, add it
+				newPropertyMappings.push(defaultPropertyMappingModel);
+			} else { // if the propertyMappingModel also exists in the loaded settings, add it from there
+				let newProperties: PropertyMapping[] = [];
+
+				for (const defaultProperty of defaultPropertyMappingModel.properties) {
+					let newProperty = newPropertyMappingModel.properties.find(x => x.property === defaultProperty.property);
+					if (newProperty === undefined) {
+						newProperties.push(defaultProperty);
+					} else {
+						newProperties.push(newProperty);
+					}
+				}
+
+				newPropertyMappingModel.properties = newProperties;
+
+				newPropertyMappings.push(newPropertyMappingModel);
+			}
+		}
+		loadedSettings.propertyMappingModels = newPropertyMappings;
+
+		this.settings = loadedSettings;
 	}
 
 	async saveSettings() {

src/models/BoardGameModel.ts

@@ -19,6 +19,15 @@ export class BoardGameModel extends MediaTypeModel {
 	constructor(obj: any = {}) {
 		super();
 
+		this.genres = undefined;
+		this.onlineRating = undefined;
+		this.image = undefined;
+		this.released = undefined;
+		this.userData = {
+			played: undefined,
+			personalRating: undefined,
+		};
+
 		Object.assign(this, obj);
 
 		this.type = this.getMediaType();

src/models/GameModel.ts

@@ -4,15 +4,6 @@ import {MediaType} from '../utils/MediaType';
 
 
 export class GameModel extends MediaTypeModel {
-	type: string;
-	subType: string;
-	title: string;
-	englishTitle: string;
-	year: string;
-	dataSource: string;
-	url: string;
-	id: string;
-
 	genres: string[];
 	onlineRating: number;
 	image: string;
@@ -29,6 +20,16 @@ export class GameModel extends MediaTypeModel {
 	constructor(obj: any = {}) {
 		super();
 
+		this.genres = undefined;
+		this.onlineRating = undefined;
+		this.image = undefined;
+		this.released = undefined;
+		this.releaseDate = undefined;
+		this.userData = {
+			played: undefined,
+			personalRating: undefined,
+		};
+
 		Object.assign(this, obj);
 
 		this.type = this.getMediaType();

src/models/MediaTypeModel.ts

@@ -12,6 +12,19 @@ export abstract class MediaTypeModel {
 
 	userData: object;
 
+
+	constructor() {
+		this.type = undefined;
+		this.subType = undefined;
+		this.title = undefined;
+		this.englishTitle = undefined;
+		this.year = undefined;
+		this.dataSource = undefined;
+		this.url = undefined;
+		this.id = undefined;
+		this.userData = {};
+	}
+
 	abstract getMediaType(): MediaType;
 
 	//a string that contains enough info to disambiguate from similar media
@@ -24,7 +37,7 @@ export abstract class MediaTypeModel {
 	}
 
 	getWithOutUserData(): object {
-		const copy = JSON.parse(JSON.stringify(this));
+		const copy = Object.assign({}, this);
 		delete copy.userData;
 		return copy;
 	}

src/models/MovieModel.ts

@@ -4,15 +4,6 @@ import {MediaType} from '../utils/MediaType';
 
 
 export class MovieModel extends MediaTypeModel {
-	type: string;
-	subType: string;
-	title: string;
-	englishTitle: string;
-	year: string;
-	dataSource: string;
-	url: string;
-	id: string;
-
 	genres: string[];
 	producer: string;
 	duration: string;
@@ -31,6 +22,19 @@ export class MovieModel extends MediaTypeModel {
 	constructor(obj: any = {}) {
 		super();
 
+		this.genres = undefined;
+		this.producer = undefined;
+		this.duration = undefined;
+		this.onlineRating = undefined;
+		this.image = undefined;
+		this.released = undefined;
+		this.premiere = undefined;
+		this.userData = {
+			watched: undefined,
+			lastWatched: undefined,
+			personalRating: undefined,
+		};
+
 		Object.assign(this, obj);
 
 		this.type = this.getMediaType();

src/models/MusicReleaseModel.ts

@@ -24,6 +24,13 @@ export class MusicReleaseModel extends MediaTypeModel {
 	constructor(obj: any = {}) {
 		super();
 
+		this.genres = undefined;
+		this.artists = undefined;
+		this.rating = undefined;
+		this.userData = {
+			personalRating: undefined,
+		};
+
 		Object.assign(this, obj);
 
 		this.type = this.getMediaType();

src/models/SeriesModel.ts

@@ -34,6 +34,22 @@ export class SeriesModel extends MediaTypeModel {
 	constructor(obj: any = {}) {
 		super();
 
+		this.genres = undefined;
+		this.studios = undefined;
+		this.episodes = undefined;
+		this.duration = undefined;
+		this.onlineRating = undefined;
+		this.image = undefined;
+		this.released = undefined;
+		this.airing = undefined;
+		this.airedFrom = undefined;
+		this.airedTo = undefined;
+		this.userData = {
+			watched: undefined,
+			lastWatched: undefined,
+			personalRating: undefined,
+		};
+
 		Object.assign(this, obj);
 
 		this.type = this.getMediaType();

src/models/WikiModel.ts

@@ -23,6 +23,12 @@ export class WikiModel extends MediaTypeModel {
 	constructor(obj: any = {}) {
 		super();
 
+		this.wikiUrl = undefined;
+		this.lastUpdated = undefined;
+		this.length = undefined;
+		this.article = undefined;
+		this.userData = {};
+
 		Object.assign(this, obj);
 
 		this.type = this.getMediaType();
@@ -37,7 +43,7 @@ export class WikiModel extends MediaTypeModel {
 	}
 
 	override getWithOutUserData(): object {
-		const copy = JSON.parse(JSON.stringify(this));
+		const copy = Object.assign({}, this);
 		delete copy.userData;
 		delete copy.article;
 		return copy;

src/settings/Icon.svelte

@@ -0,0 +1,36 @@
+<!--adapted from @joethei's code: https://github.com/joethei/obsidian-rss/blob/master/src/view/IconComponent.svelte-->
+<!--adapted from @javalent's code: https://discord.com/channels/686053708261228577/840286264964022302/902949764209987654-->
+<script lang="ts">
+	import {setIcon} from 'obsidian';
+	import {onMount} from 'svelte';
+
+	export let iconName: string = '';
+	export let iconSize: number = 20;
+
+	let iconEl: HTMLElement;
+
+	onMount(() => {
+		setIcon(iconEl, iconName, iconSize);
+	});
+</script>
+
+<style>
+	.icon-wrapper {
+		display:  inline-block;
+		position: relative;
+		width:    20px;
+	}
+
+	.icon {
+		position: absolute;
+		height:   20px;
+		width:    20px;
+		top:      calc(50% - 10px);
+	}
+</style>
+
+{#if iconName.length > 0}
+	<div class="icon-wrapper">
+		<div bind:this={iconEl} class="icon"></div>
+	</div>
+{/if}