steven/gpx.studio
1
0
Fork 0
mirror of https://github.com/gpxstudio/gpx.studio.git synced 2025-08-30 23:30:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

restructure

Browse Source
This commit is contained in:
vcoppe
2024-04-18 10:55:55 +02:00
parent 395164033d
commit d800ff5540
5 changed files with 55 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
website/src/lib/components/Menu.svelte
View File

@@ -2,10 +2,20 @@
import * as Menubar from '$lib/components/ui/menubar/index.js';
import { Button } from '$lib/components/ui/button';
import Logo from './Logo.svelte';
import { Plus, Copy, Download, Undo2, Redo2, Trash2, HeartHandshake } from 'lucide-svelte';
import {
Plus,
Copy,
Download,
Undo2,
Redo2,
Trash2,
HeartHandshake,
Upload
} from 'lucide-svelte';
import Fa from 'svelte-fa';
import { faGoogleDrive } from '@fortawesome/free-brands-svg-icons';
import Load from '$lib/components/tools/Load.svelte';
import { triggerFileInput } from '$lib/stores';
let distanceUnits = 'metric';
let velocityUnits = 'speed';
@@ -25,7 +35,11 @@
<Menubar.Item>
<Plus size="16" class="mr-1" /> New <Menubar.Shortcut>⌘N</Menubar.Shortcut>
</Menubar.Item>
<Load />
<Menubar.Item on:click={triggerFileInput}>
<Upload size="16" class="mr-1" /> Load from desktop... <Menubar.Shortcut
>⌘O</Menubar.Shortcut
>
</Menubar.Item>
<Menubar.Item>
<Fa icon={faGoogleDrive} class="h-4 w-4 mr-1" />
Load from Google Drive...</Menubar.Item

10
website/src/lib/components/tools/Load.svelte
View File

@@ -1,10 +0,0 @@
<script lang="ts">
import * as Menubar from '$lib/components/ui/menubar/index.js';
import { Upload } from 'lucide-svelte';
import { triggerFileInput } from '$lib/components/tools/tools';
</script>
<Menubar.Item on:click={triggerFileInput}>
<Upload size="16" class="mr-1" /> Load from desktop... <Menubar.Shortcut>⌘O</Menubar.Shortcut>
</Menubar.Item>

38
website/src/lib/components/tools/tools.ts
View File

@@ -1,38 +0,0 @@
import { files } from '$lib/stores';
import { parseGPX } from 'gpx';
export function triggerFileInput() {
const input = document.createElement('input');
input.type = 'file';
input.accept = '.gpx';
input.multiple = true;
input.className = 'hidden';
input.onchange = () => {
if (input.files) {
loadFiles(input.files);
}
};
input.click();
}
export function loadFiles(files: FileList) {
for (let i = 0; i < files.length; i++) {
loadFile(files[i]);
}
}
export function loadFile(file: File) {
const reader = new FileReader();
reader.onload = () => {
let data = reader.result?.toString() ?? null;
if (data) {
let gpx = parseGPX(data);
if (gpx.metadata.name === undefined) {
gpx.metadata['name'] = file.name.split('.').slice(0, -1).join('.');
}
files.update($files => [...$files, gpx]);
}
};
reader.readAsText(file);
}

39
website/src/lib/stores.ts
View File

@@ -1,7 +1,42 @@
import { writable } from 'svelte/store';
import mapboxgl from 'mapbox-gl';
import { GPXFile } from 'gpx';
import { GPXFile, parseGPX } from 'gpx';
export const map = writable<mapboxgl.Map | null>(null);
export const files = writable<GPXFile[]>([]);
export const files = writable<GPXFile[]>([]);
export function triggerFileInput() {
const input = document.createElement('input');
input.type = 'file';
input.accept = '.gpx';
input.multiple = true;
input.className = 'hidden';
input.onchange = () => {
if (input.files) {
loadFiles(input.files);
}
};
input.click();
}
export function loadFiles(files: FileList) {
for (let i = 0; i < files.length; i++) {
loadFile(files[i]);
}
}
export function loadFile(file: File) {
const reader = new FileReader();
reader.onload = () => {
let data = reader.result?.toString() ?? null;
if (data) {
let gpx = parseGPX(data);
if (gpx.metadata.name === undefined) {
gpx.metadata['name'] = file.name.split('.').slice(0, -1).join('.');
}
files.update($files => [...$files, gpx]);
}
};
reader.readAsText(file);
}

2
website/src/routes/+page.svelte
View File

@@ -6,7 +6,7 @@
import Toolbar from '$lib/components/Toolbar.svelte';
import LayerControl from '$lib/components/layer-control/LayerControl.svelte';
import { triggerFileInput } from '$lib/components/tools/tools';
import { triggerFileInput } from '$lib/stores';
</script>
<div class="flex flex-col w-screen h-screen">