Fix #22 - CSV loading without uploading it to the foundry

README.md

@@ -9,6 +9,7 @@ Please, keep in mind that this module **do not** provide audio streaming, **and
 https://user-images.githubusercontent.com/1165825/147572876-7454ebe8-a30f-4f7d-ba49-bb3b925b9787.mp4
 
 ## How to:
+
 - [Setup](https://github.com/frondeus/fvtt-syrin-control/wiki/Setup)
 - [Use](https://github.com/frondeus/fvtt-syrin-control/wiki/How-To-Use)
 

src/global.d.ts

@@ -42,7 +42,6 @@ declare global {
 			'fvtt-syrin-control.currentSoundset': Soundset;
 			'fvtt-syrin-control.currentMood': Mood;
 
-			'fvtt-syrin-control.controlLinksUrl': string;
 			'fvtt-syrin-control.authToken': string;
 			'fvtt-syrin-control.address': string;
 			'fvtt-syrin-control.syncMethod': 'yes' | 'no';

src/syrin/components/SettingsConfig.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+	import { loadDataFromCSV } from '../csv';
+
+	export let syncMethod: 'yes' | 'no';
+
+	interface Option {
+		value: 'yes' | 'no';
+		title: string;
+	}
+
+	const options: Option[] = [
+		{ value: 'no', title: 'No - stick to CSV file' },
+		{ value: 'yes', title: 'Yes - use API' }
+	];
+
+	function onCSVSelected(e: any) {
+		const csv = e.target.files[0];
+		console.debug('SyrinControl | onCSVSelected', csv);
+		ui.notifications?.info(`SyrinControl | Loading ${csv.name}.`);
+
+		let reader = new FileReader();
+		reader.readAsText(csv);
+		reader.onload = () => {
+			const controlLinks = reader.result;
+			if (typeof controlLinks === 'string') {
+				console.debug('SyrinControl | Loaded', reader.result);
+				loadDataFromCSV(csv.name, controlLinks);
+			}
+		};
+		reader.onerror = () => {
+			ui.notifications?.error('SyrinControl | ' + reader.error);
+			console.error('SyrinControl | ', reader.error);
+		};
+	}
+</script>
+
+<div class="form-group" id="fvtt-syrin-control-settings">
+	<!-- svelte-ignore a11y-label-has-associated-control -->
+	<label>Synchronization method</label>
+	<div class="form-fields">
+		<select name="fvtt-syrin-control.syncMethod" data-dtype="String" bind:value={syncMethod}>
+			{#each options as option}
+				<option value={option.value}>{option.title}</option>
+			{/each}
+		</select>
+	</div>
+	<p class="notes">Should the module use online API to retrieve mood list?</p>
+</div>
+
+<div class="form-group">
+	<!-- svelte-ignore a11y-label-has-associated-control -->
+	<label>Control Links</label>
+	<div class="form-fields">
+		<input disabled={syncMethod === 'yes'} type="file" accept=".csv" on:change={onCSVSelected} />
+	</div>
+	<p class="notes">
+		{#if syncMethod === 'yes'}
+			Control links CSV - disabled because of online API synchronization method
+		{:else}
+			Control links CSV - click "Download Remote Control Links" in Master Panel and upload it here.
+		{/if}
+	</p>
+</div>

src/syrin/csv.ts

@@ -1,15 +1,12 @@
 import Papa from 'papaparse';
 import { CSVData, Soundset } from './syrin';
-import { MODULE } from './utils';
 
-export async function loadDataFromCSV(game: Game, controlLinks: string) {
-	console.debug('SyrinControl | Control Links URL', controlLinks);
-	ui.notifications?.info(`SyrinControl | Loading ${controlLinks}.`);
+export async function loadDataFromCSV(name: string, controlLinks: string) {
+	console.debug('SyrinControl | Control Links', name);
 
 	const data: CSVData[] = await new Promise((resolve, reject) => {
 		Papa.parse(controlLinks, {
 			header: true,
-			download: true,
 			complete: function (data: { data: CSVData[] }) {
 				resolve(data.data);
 			},
@@ -21,8 +18,8 @@ export async function loadDataFromCSV(game: Game, controlLinks: string) {
 		});
 	});
 
-	ui.notifications?.info(`SyrinControl | Parsed ${controlLinks}. Found ${data.length} entries`);
-	console.log('SyrinControl  CSV|', { data });
+	ui.notifications?.info(`SyrinControl | Parsed ${name}. Found ${data.length} entries`);
+	console.debug('SyrinControl  CSV|', { data });
 
 	let soundsetsByName = data
 		.filter((data) => data.type === 'mood' || data.type === 'element')
@@ -69,10 +66,9 @@ export async function loadDataFromCSV(game: Game, controlLinks: string) {
 		return soundsetsById;
 	}, Object.create(null));
 
-	game.settings.set(MODULE, 'controlLinksUrl', '');
 	console.debug('SyrinControl | Loaded CSV');
 	ui.notifications?.info(
-		`SyrinControl | Loaded ${controlLinks}. Found ${Object.keys(soundsetsById).length} soundsets`
+		`SyrinControl | Loaded ${name}. Found ${Object.keys(soundsetsById).length} soundsets`
 	);
 	return soundsetsById;
 }

src/syrin/main.ts

@@ -2,7 +2,7 @@ import { playMood, stopMood, onlineGlobalElements, onlineSoundsets } from './api
 import { onPlaylistTab } from './ui/playlist';
 import { onSceneConfig } from './ui/scene';
 import { openElements } from './ui/elements';
-import { initSettings, onCloseSettings } from './settings';
+import { initSettings, onCloseSettings, onSettingsConfig } from './settings';
 import { Mood, Soundset } from './syrin';
 import { getGame, MODULE } from './utils';
 import { Context } from './context';
@@ -92,7 +92,7 @@ Hooks.on('init', function () {
 				}
 			}
 		);
-		Hooks.on('closeSettingsConfig', async () => await onCloseSettings(game, ctx));
+		Hooks.on('closeSettingsConfig', async () => await onCloseSettings(ctx));
 		Hooks.on('updateScene', (scene: Scene) => {
 			if (!game.user?.isGM) {
 				return;
@@ -120,6 +120,10 @@ Hooks.on('init', function () {
 		});
 
 		Hooks.on('renderSceneConfig', async (obj: SceneConfig) => await onSceneConfig(game, obj, ctx));
+		Hooks.on(
+			'renderSettingsConfig',
+			async (obj: SettingsConfig) => await onSettingsConfig(game, obj)
+		);
 
 		setActiveMood(game);
 

src/syrin/settings.ts

@@ -1,7 +1,7 @@
-import { loadDataFromCSV } from './csv';
 import { onlineSoundsets, playElement } from './api';
 import { MODULE } from './utils';
 import { Context } from './context';
+import SettingsConfigComponent from './components/SettingsConfig.svelte';
 
 export function initSettings(game: Game) {
 	game.syrinscape = {
@@ -53,14 +53,6 @@ export function initSettings(game: Game) {
 			yes: 'Yes - use API'
 		}
 	});
-	game.settings.register(MODULE, 'controlLinksUrl', {
-		name: 'Control Links',
-		hint: 'Control links CSV - click "Download Remote Control Links" in Master Panel and upload it here',
-		scope: 'world',
-		config: true,
-		type: String,
-		filePicker: true
-	});
 	game.settings.register(MODULE, 'address', {
 		name: 'Syrinscape API address',
 		hint: 'Address to Syrinscape Online. Can be replaced by proxy',
@@ -71,17 +63,36 @@ export function initSettings(game: Game) {
 	});
 }
 
-export async function onCloseSettings(game: Game, ctx: Context) {
-	const controlLinksSetting = game.settings.get(MODULE, 'controlLinksUrl');
-	const controlLinks = controlLinksSetting.startsWith('http')
-		? controlLinksSetting
-		: '/' + controlLinksSetting;
+export async function onSettingsConfig(game: Game, config: SettingsConfig) {
+	const form = config.form;
+	if (!form) {
+		return;
+	}
+	const select = $(form).find("select[name='fvtt-syrin-control.syncMethod']")[0];
+	const formGroup = $(select).closest('.form-group')[0];
+	if (formGroup.id === 'fvtt-syrin-control-settings') {
+		return;
+	}
 
-	let soundsets = ctx.stores.soundsets.get();
+	const parent = $(formGroup).parent();
 
-	if (controlLinksSetting !== '') {
-		soundsets = await loadDataFromCSV(game, controlLinks);
-	}
+	const syncMethod = game.settings.get(MODULE, 'syncMethod');
+
+	new SettingsConfigComponent({
+		target: parent.get(0)!,
+		anchor: formGroup!,
+		props: {
+			syncMethod
+		}
+	});
+
+	$(formGroup).remove();
+
+	console.debug('SyrinControl | config', parent);
+}
+
+export async function onCloseSettings(ctx: Context) {
+	let soundsets = ctx.stores.soundsets.get();
 
 	const newSoundsets = await onlineSoundsets();
 	if (Object.keys(newSoundsets).length !== 0) {