mirror of
https://github.com/gpxstudio/gpx.studio.git
synced 2025-12-02 18:12:11 +00:00
progress
This commit is contained in:
vcoppe
195
website/src/lib/components/export/Export.svelte
Normal file
195
website/src/lib/components/export/Export.svelte
Normal file
@@ -0,0 +1,195 @@
|
||||
<script lang="ts">
|
||||
import { Button } from '$lib/components/ui/button';
|
||||
import { Label } from '$lib/components/ui/label';
|
||||
import { Checkbox } from '$lib/components/ui/checkbox';
|
||||
import { Separator } from '$lib/components/ui/separator';
|
||||
import { Dialog } from 'bits-ui';
|
||||
import {
|
||||
exportAllFiles,
|
||||
exportSelectedFiles,
|
||||
ExportState,
|
||||
exportState,
|
||||
} from '$lib/components/export/utils.svelte';
|
||||
import { tool } from '$lib/components/toolbar/utils.svelte';
|
||||
import { gpxStatistics } from '$lib/stores';
|
||||
import { fileObservers } from '$lib/db';
|
||||
import {
|
||||
Download,
|
||||
Zap,
|
||||
Earth,
|
||||
HeartPulse,
|
||||
Orbit,
|
||||
Thermometer,
|
||||
SquareActivity,
|
||||
} from '@lucide/svelte';
|
||||
import { i18n } from '$lib/i18n.svelte';
|
||||
import { selection } from '$lib/components/file-list/Selection';
|
||||
import { get } from 'svelte/store';
|
||||
import { GPXStatistics } from 'gpx';
|
||||
import { ListRootItem } from '$lib/components/file-list/FileList';
|
||||
|
||||
let open = $derived(exportState.current !== ExportState.NONE);
|
||||
let exportOptions: Record<string, boolean> = $state({
|
||||
time: true,
|
||||
hr: true,
|
||||
cad: true,
|
||||
atemp: true,
|
||||
power: true,
|
||||
extensions: false,
|
||||
});
|
||||
let hide: Record<string, boolean> = $derived.by(() => {
|
||||
if (exportState.current === ExportState.NONE) {
|
||||
return {
|
||||
time: false,
|
||||
hr: false,
|
||||
cad: false,
|
||||
atemp: false,
|
||||
power: false,
|
||||
extensions: false,
|
||||
};
|
||||
} else {
|
||||
let statistics = $gpxStatistics;
|
||||
if (exportState.current === ExportState.ALL) {
|
||||
statistics = Array.from($fileObservers.values())
|
||||
.map((file) => get(file)?.statistics)
|
||||
.reduce((acc, cur) => {
|
||||
if (cur !== undefined) {
|
||||
acc.mergeWith(cur.getStatisticsFor(new ListRootItem()));
|
||||
}
|
||||
return acc;
|
||||
}, new GPXStatistics());
|
||||
}
|
||||
return {
|
||||
time: statistics.global.time.total === 0,
|
||||
hr: statistics.global.hr.count === 0,
|
||||
cad: statistics.global.cad.count === 0,
|
||||
atemp: statistics.global.atemp.count === 0,
|
||||
power: statistics.global.power.count === 0,
|
||||
extensions: Object.keys(statistics.global.extensions).length === 0,
|
||||
};
|
||||
}
|
||||
});
|
||||
let exclude = $derived(Object.keys(exportOptions).filter((key) => !exportOptions[key]));
|
||||
|
||||
$effect(() => {
|
||||
if (open) {
|
||||
tool.current = null;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<Dialog.Root
|
||||
bind:open
|
||||
onOpenChange={(isOpen) => {
|
||||
if (!isOpen) {
|
||||
exportState.current = ExportState.NONE;
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Dialog.Trigger class="hidden" />
|
||||
<Dialog.Portal>
|
||||
<Dialog.Content
|
||||
class="fixed left-[50%] top-[50%] z-50 w-fit max-w-full translate-x-[-50%] translate-y-[-50%] flex flex-col items-center gap-3 border bg-background p-3 shadow-lg rounded-md"
|
||||
>
|
||||
<div
|
||||
class="w-full flex flex-row items-center justify-center gap-4 border rounded-md p-2 bg-secondary"
|
||||
>
|
||||
<span>⚠️</span>
|
||||
<span class="max-w-[80%] text-sm">
|
||||
{i18n._('menu.support_message')}
|
||||
</span>
|
||||
</div>
|
||||
<div class="w-full flex flex-row flex-wrap gap-2">
|
||||
<Button class="bg-support grow" href="https://ko-fi.com/gpxstudio" target="_blank">
|
||||
{i18n._('menu.support_button')}
|
||||
<span class="ml-2">🙏</span>
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
class="grow"
|
||||
onclick={() => {
|
||||
if (exportState.current === ExportState.SELECTION) {
|
||||
exportSelectedFiles(exclude);
|
||||
} else if (exportState.current === ExportState.ALL) {
|
||||
exportAllFiles(exclude);
|
||||
}
|
||||
open = false;
|
||||
exportState.current = ExportState.NONE;
|
||||
}}
|
||||
>
|
||||
<Download size="16" class="mr-1" />
|
||||
{#if $fileObservers.size === 1 || (exportState.current === ExportState.SELECTION && $selection.size === 1)}
|
||||
{i18n._('menu.download_file')}
|
||||
{:else}
|
||||
{i18n._('menu.download_files')}
|
||||
{/if}
|
||||
</Button>
|
||||
</div>
|
||||
<div
|
||||
class="w-full max-w-xl flex flex-col items-center gap-2 {Object.values(hide).some(
|
||||
(v) => !v
|
||||
)
|
||||
? ''
|
||||
: 'hidden'}"
|
||||
>
|
||||
<div class="w-full flex flex-row items-center gap-3">
|
||||
<div class="grow">
|
||||
<Separator />
|
||||
</div>
|
||||
<Label class="shrink-0">
|
||||
{i18n._('menu.export_options')}
|
||||
</Label>
|
||||
<div class="grow">
|
||||
<Separator />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-row flex-wrap justify-center gap-x-6 gap-y-2">
|
||||
<div class="flex flex-row items-center gap-1.5 {hide.time ? 'hidden' : ''}">
|
||||
<Checkbox id="export-time" bind:checked={exportOptions.time} />
|
||||
<Label for="export-time" class="flex flex-row items-center gap-1">
|
||||
<Zap size="16" />
|
||||
{i18n._('quantities.time')}
|
||||
</Label>
|
||||
</div>
|
||||
<div
|
||||
class="flex flex-row items-center gap-1.5 {hide.extensions ? 'hidden' : ''}"
|
||||
>
|
||||
<Checkbox id="export-extensions" bind:checked={exportOptions.extensions} />
|
||||
<Label for="export-extensions" class="flex flex-row items-center gap-1">
|
||||
<Earth size="16" />
|
||||
{i18n._('quantities.osm_extensions')}
|
||||
</Label>
|
||||
</div>
|
||||
<div class="flex flex-row items-center gap-1.5 {hide.hr ? 'hidden' : ''}">
|
||||
<Checkbox id="export-heartrate" bind:checked={exportOptions.hr} />
|
||||
<Label for="export-heartrate" class="flex flex-row items-center gap-1">
|
||||
<HeartPulse size="16" />
|
||||
{i18n._('quantities.heartrate')}
|
||||
</Label>
|
||||
</div>
|
||||
<div class="flex flex-row items-center gap-1.5 {hide.cad ? 'hidden' : ''}">
|
||||
<Checkbox id="export-cadence" bind:checked={exportOptions.cad} />
|
||||
<Label for="export-cadence" class="flex flex-row items-center gap-1">
|
||||
<Orbit size="16" />
|
||||
{i18n._('quantities.cadence')}
|
||||
</Label>
|
||||
</div>
|
||||
<div class="flex flex-row items-center gap-1.5 {hide.atemp ? 'hidden' : ''}">
|
||||
<Checkbox id="export-temperature" bind:checked={exportOptions.atemp} />
|
||||
<Label for="export-temperature" class="flex flex-row items-center gap-1">
|
||||
<Thermometer size="16" />
|
||||
{i18n._('quantities.temperature')}
|
||||
</Label>
|
||||
</div>
|
||||
<div class="flex flex-row items-center gap-1.5 {hide.power ? 'hidden' : ''}">
|
||||
<Checkbox id="export-power" bind:checked={exportOptions.power} />
|
||||
<Label for="export-power" class="flex flex-row items-center gap-1">
|
||||
<SquareActivity size="16" />
|
||||
{i18n._('quantities.power')}
|
||||
</Label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Dialog.Content>
|
||||
</Dialog.Portal>
|
||||
</Dialog.Root>
|
||||
67
website/src/lib/components/export/utils.svelte.ts
Normal file
67
website/src/lib/components/export/utils.svelte.ts
Normal file
@@ -0,0 +1,67 @@
|
||||
import { getFile, settings } from '$lib/db';
|
||||
import { applyToOrderedSelectedItemsFromFile } from '$lib/components/file-list/Selection';
|
||||
import { get } from 'svelte/store';
|
||||
import { buildGPX, type GPXFile } from 'gpx';
|
||||
import FileSaver from 'file-saver';
|
||||
import JSZip from 'jszip';
|
||||
|
||||
const { fileOrder } = settings;
|
||||
|
||||
export enum ExportState {
|
||||
NONE,
|
||||
SELECTION,
|
||||
ALL,
|
||||
}
|
||||
export const exportState = $state({
|
||||
current: ExportState.NONE,
|
||||
});
|
||||
|
||||
async function exportFiles(fileIds: string[], exclude: string[]) {
|
||||
if (fileIds.length > 1) {
|
||||
await exportFilesAsZip(fileIds, exclude);
|
||||
} else {
|
||||
const firstFileId = fileIds.at(0);
|
||||
if (firstFileId != null) {
|
||||
const file = getFile(firstFileId);
|
||||
if (file) {
|
||||
exportFile(file, exclude);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export async function exportSelectedFiles(exclude: string[]) {
|
||||
const fileIds: string[] = [];
|
||||
applyToOrderedSelectedItemsFromFile(async (fileId, level, items) => {
|
||||
fileIds.push(fileId);
|
||||
});
|
||||
await exportFiles(fileIds, exclude);
|
||||
}
|
||||
|
||||
export async function exportAllFiles(exclude: string[]) {
|
||||
await exportFiles(get(fileOrder), exclude);
|
||||
}
|
||||
|
||||
function exportFile(file: GPXFile, exclude: string[]) {
|
||||
const blob = new Blob([buildGPX(file, exclude)], { type: 'application/gpx+xml' });
|
||||
FileSaver.saveAs(blob, `${file.metadata.name}.gpx`);
|
||||
}
|
||||
|
||||
async function exportFilesAsZip(fileIds: string[], exclude: string[]) {
|
||||
const zip = new JSZip();
|
||||
for (const fileId of fileIds) {
|
||||
const file = getFile(fileId);
|
||||
if (file) {
|
||||
const gpx = buildGPX(file, exclude);
|
||||
let filename = file.metadata.name;
|
||||
for (let i = 1; zip.files[filename + '.gpx']; i++) {
|
||||
filename = file.metadata.name + `-${i}`;
|
||||
}
|
||||
zip.file(filename + '.gpx', gpx);
|
||||
}
|
||||
}
|
||||
if (Object.keys(zip.files).length > 0) {
|
||||
const blob = await zip.generateAsync({ type: 'blob' });
|
||||
FileSaver.saveAs(blob, 'gpx-files.zip');
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user