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

start of routing

Browse Source
This commit is contained in:
vcoppe
2024-04-22 19:36:31 +02:00
parent 32b15feb0a
commit d46662e038
18 changed files with 455 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
website/src/lib/components/Toolbar.svelte
View File

@@ -1,63 +0,0 @@
<script lang="ts">
import { reverseSelectedFiles } from '$lib/stores';
import ToolbarItem from './ToolbarItem.svelte';
import {
ArrowRightLeft,
Group,
CalendarClock,
Pencil,
SquareDashedMousePointer,
Ungroup,
MapPin,
Shrink,
Palette,
FolderTree
} from 'lucide-svelte';
</script>
<div class="absolute top-0 bottom-0 left-0 z-10 flex flex-col justify-center pointer-events-none">
<div class="flex flex-col p-1 gap-1 bg-background rounded-md pointer-events-auto shadow-md">
<ToolbarItem>
<Pencil slot="icon" size="18" />
<span slot="tooltip">Edit the track points</span>
</ToolbarItem>
<ToolbarItem>
<CalendarClock slot="icon" size="18" />
<span slot="tooltip">Change time and speed data</span>
</ToolbarItem>
<ToolbarItem on:click={reverseSelectedFiles}>
<ArrowRightLeft slot="icon" size="18" />
<span slot="tooltip">Reverse the file</span>
</ToolbarItem>
<ToolbarItem>
<Group slot="icon" size="18" />
<span slot="tooltip">Merge with another file</span>
</ToolbarItem>
<ToolbarItem>
<Ungroup slot="icon" size="18" />
<span slot="tooltip">Extract the tracks or track segments to new files</span>
</ToolbarItem>
<ToolbarItem>
<MapPin slot="icon" size="18" />
<span slot="tooltip">Create a new point of interest</span>
</ToolbarItem>
<ToolbarItem>
<Shrink slot="icon" size="18" />
<span slot="tooltip">Reduce the number of track points</span>
</ToolbarItem>
<ToolbarItem>
<SquareDashedMousePointer slot="icon" size="18" />
<span slot="tooltip"
>Clean track points and points of interest with a rectangle selection</span
>
</ToolbarItem>
<ToolbarItem>
<Palette slot="icon" size="18" />
<span slot="tooltip">Change the styling of the trace</span>
</ToolbarItem>
<ToolbarItem>
<FolderTree slot="icon" size="18" />
<span slot="tooltip">Manage the file structure</span>
</ToolbarItem>
</div>
</div>

80
website/src/lib/components/toolbar/Routing.svelte Normal file
View File

@@ -0,0 +1,80 @@
<script lang="ts">
import ToolbarItemMenu from './ToolbarItemMenu.svelte';
import * as Card from '$lib/components/ui/card';
import * as Select from '$lib/components/ui/select';
import { Switch } from '$lib/components/ui/switch';
import { Label } from '$lib/components/ui/label/index.js';
import * as Alert from '$lib/components/ui/alert';
import { selectedFiles } from '$lib/stores';
import { CircleHelp } from 'lucide-svelte';
let routingProfile = {
value: 'bike',
label: 'bike'
};
let brouterProfiles = {
bike: 'Trekking-dry',
racingBike: 'fastbike',
mountainBike: 'MTB',
foot: 'Hiking-Alpine-SAC6',
motorcycle: 'Car-FastEco',
water: 'river',
railway: 'rail'
};
let routing = true;
let privateRoads = false;
$: if ($selectedFiles.size == 1) {
let file = $selectedFiles.values().next().value;
console.log(file);
}
</script>
<ToolbarItemMenu>
<Card.Root>
<Card.Header class="p-4">
<Card.Title>Routing</Card.Title>
</Card.Header>
<Card.Content class="p-4 pt-0 flex flex-col gap-4">
<div class="w-full flex flex-row justify-between items-center gap-2">
<Label>Activity</Label>
<Select.Root bind:selected={routingProfile}>
<Select.Trigger class="h-8 w-40">
<Select.Value />
</Select.Trigger>
<Select.Content>
{#each Object.keys(brouterProfiles) as profile}
<Select.Item value={profile}>{profile}</Select.Item>
{/each}
<!-- <Select.Item value="light">Light</Select.Item>
<Select.Item value="dark">Dark</Select.Item>
<Select.Item value="system">System</Select.Item> -->
</Select.Content>
</Select.Root>
</div>
<div class="w-full flex flex-row justify-between items-center gap-2">
<Label for="routing">Routing (follow roads)</Label>
<Switch id="routing" class="scale-90" bind:checked={routing} />
</div>
<div class="w-full flex flex-row justify-between items-center gap-2">
<Label for="private">Allow private roads</Label>
<Switch id="private" class="scale-90" bind:checked={privateRoads} />
</div>
<Alert.Root class="max-w-64">
<CircleHelp size="16" />
<!-- <Alert.Title>Heads up!</Alert.Title> -->
<Alert.Description>
{#if $selectedFiles.size > 1}
<div>Select a single file to use the routing tool</div>
{:else if $selectedFiles.size == 0}
<div>Select a file to use the routing tool, or create a new file from the menu</div>
{:else}
<div>Click on the map to plot a route</div>
{/if}
</Alert.Description>
</Alert.Root>
</Card.Content>
</Card.Root>
</ToolbarItemMenu>

77
website/src/lib/components/toolbar/Toolbar.svelte Normal file
View File

@@ -0,0 +1,77 @@
<script lang="ts">
import { reverseSelectedFiles } from '$lib/stores';
import Routing from './Routing.svelte';
import ToolbarItem from './ToolbarItem.svelte';
import {
ArrowRightLeft,
Group,
CalendarClock,
Pencil,
SquareDashedMousePointer,
Ungroup,
MapPin,
Shrink,
Palette,
FolderTree
} from 'lucide-svelte';
let currentTool: string | null = null;
</script>
<div class="absolute top-0 bottom-0 left-0 z-10 flex flex-col justify-center pointer-events-none">
<div class="flex flex-row w-screen items-center">
<div
class="h-fit flex flex-col p-1 gap-1 bg-background rounded-md pointer-events-auto shadow-md border"
>
<ToolbarItem
on:click={() => {
currentTool = currentTool === 'routing' ? null : 'routing';
}}
>
<Pencil slot="icon" size="18" />
<span slot="tooltip">Edit the track points</span>
</ToolbarItem>
<ToolbarItem>
<CalendarClock slot="icon" size="18" />
<span slot="tooltip">Change time and speed data</span>
</ToolbarItem>
<ToolbarItem on:click={reverseSelectedFiles}>
<ArrowRightLeft slot="icon" size="18" />
<span slot="tooltip">Reverse the file</span>
</ToolbarItem>
<ToolbarItem>
<Group slot="icon" size="18" />
<span slot="tooltip">Merge with another file</span>
</ToolbarItem>
<ToolbarItem>
<Ungroup slot="icon" size="18" />
<span slot="tooltip">Extract the tracks or track segments to new files</span>
</ToolbarItem>
<ToolbarItem>
<MapPin slot="icon" size="18" />
<span slot="tooltip">Create a new point of interest</span>
</ToolbarItem>
<ToolbarItem>
<Shrink slot="icon" size="18" />
<span slot="tooltip">Reduce the number of track points</span>
</ToolbarItem>
<ToolbarItem>
<SquareDashedMousePointer slot="icon" size="18" />
<span slot="tooltip"
>Clean track points and points of interest with a rectangle selection</span
>
</ToolbarItem>
<ToolbarItem>
<Palette slot="icon" size="18" />
<span slot="tooltip">Change the styling of the trace</span>
</ToolbarItem>
<ToolbarItem>
<FolderTree slot="icon" size="18" />
<span slot="tooltip">Manage the file structure</span>
</ToolbarItem>
</div>
{#if currentTool == 'routing'}
<Routing />
{/if}
</div>
</div>

10
website/src/lib/components/ToolbarItem.svelte → website/src/lib/components/toolbar/ToolbarItem.svelte
View File

@@ -1,19 +1,11 @@
<script lang="ts"> <script lang="ts">
import { Button } from '$lib/components/ui/button'; import { Button } from '$lib/components/ui/button';
import * as Tooltip from '$lib/components/ui/tooltip/index.js'; import * as Tooltip from '$lib/components/ui/tooltip/index.js';
import { selectedFiles } from '$lib/stores';
</script> </script>
<Tooltip.Root openDelay={300}> <Tooltip.Root openDelay={300}>
<Tooltip.Trigger asChild let:builder> <Tooltip.Trigger asChild let:builder>
<Button <Button builders={[builder]} variant="ghost" class="h-fit px-1 py-1.5" on:click>
builders={[builder]}
variant="ghost"
class="h-fit px-1 py-1.5"
disabled={$selectedFiles.size == 0}
on:click
>
<slot name="icon" /> <slot name="icon" />
</Button> </Button>
</Tooltip.Trigger> </Tooltip.Trigger>

9
website/src/lib/components/toolbar/ToolbarItemMenu.svelte Normal file
View File

@@ -0,0 +1,9 @@
<script lang="ts">
import { flyAndScale } from '$lib/utils';
</script>
<div in:flyAndScale={{ x: -2, y: 0, duration: 100 }} class="translate-x-1 h-full">
<div class="rounded-md shadow-md pointer-events-auto">
<slot />
</div>
</div>

13
website/src/lib/components/ui/alert/alert-description.svelte Normal file
View File

@@ -0,0 +1,13 @@
<script lang="ts">
import type { HTMLAttributes } from "svelte/elements";
import { cn } from "$lib/utils.js";
type $$Props = HTMLAttributes<HTMLDivElement>;
let className: $$Props["class"] = undefined;
export { className as class };
</script>
<div class={cn("text-sm [&_p]:leading-relaxed", className)} {...$$restProps}>
<slot />
</div>

21
website/src/lib/components/ui/alert/alert-title.svelte Normal file
View File

@@ -0,0 +1,21 @@
<script lang="ts">
import type { HTMLAttributes } from "svelte/elements";
import type { HeadingLevel } from "./index.js";
import { cn } from "$lib/utils.js";
type $$Props = HTMLAttributes<HTMLHeadingElement> & {
level?: HeadingLevel;
};
let className: $$Props["class"] = undefined;
export let level: $$Props["level"] = "h5";
export { className as class };
</script>
<svelte:element
this={level}
class={cn("mb-1 font-medium leading-none tracking-tight", className)}
{...$$restProps}
>
<slot />
</svelte:element>

17
website/src/lib/components/ui/alert/alert.svelte Normal file
View File

@@ -0,0 +1,17 @@
<script lang="ts">
import type { HTMLAttributes } from "svelte/elements";
import { type Variant, alertVariants } from "./index.js";
import { cn } from "$lib/utils.js";
type $$Props = HTMLAttributes<HTMLDivElement> & {
variant?: Variant;
};
let className: $$Props["class"] = undefined;
export let variant: $$Props["variant"] = "default";
export { className as class };
</script>
<div class={cn(alertVariants({ variant }), className)} {...$$restProps} role="alert">
<slot />
</div>

33
website/src/lib/components/ui/alert/index.ts Normal file
View File

@@ -0,0 +1,33 @@
import { type VariantProps, tv } from "tailwind-variants";
import Root from "./alert.svelte";
import Description from "./alert-description.svelte";
import Title from "./alert-title.svelte";
export const alertVariants = tv({
base: "relative w-full rounded-lg border p-4 [&:has(svg)]:pl-11 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
variants: {
variant: {
default: "bg-background text-foreground",
destructive:
"border-destructive/50 text-destructive text-destructive dark:border-destructive [&>svg]:text-destructive",
},
},
defaultVariants: {
variant: "default",
},
});
export type Variant = VariantProps<typeof alertVariants>["variant"];
export type HeadingLevel = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
export {
Root,
Description,
Title,
//
Root as Alert,
Description as AlertDescription,
Title as AlertTitle,
};

34
website/src/lib/components/ui/select/index.ts Normal file
View File

@@ -0,0 +1,34 @@
import { Select as SelectPrimitive } from "bits-ui";
import Label from "./select-label.svelte";
import Item from "./select-item.svelte";
import Content from "./select-content.svelte";
import Trigger from "./select-trigger.svelte";
import Separator from "./select-separator.svelte";
const Root = SelectPrimitive.Root;
const Group = SelectPrimitive.Group;
const Input = SelectPrimitive.Input;
const Value = SelectPrimitive.Value;
export {
Root,
Group,
Input,
Label,
Item,
Value,
Content,
Trigger,
Separator,
//
Root as Select,
Group as SelectGroup,
Input as SelectInput,
Label as SelectLabel,
Item as SelectItem,
Value as SelectValue,
Content as SelectContent,
Trigger as SelectTrigger,
Separator as SelectSeparator,
};

39
website/src/lib/components/ui/select/select-content.svelte Normal file
View File

@@ -0,0 +1,39 @@
<script lang="ts">
import { Select as SelectPrimitive } from "bits-ui";
import { scale } from "svelte/transition";
import { cn, flyAndScale } from "$lib/utils.js";
type $$Props = SelectPrimitive.ContentProps;
type $$Events = SelectPrimitive.ContentEvents;
export let sideOffset: $$Props["sideOffset"] = 4;
export let inTransition: $$Props["inTransition"] = flyAndScale;
export let inTransitionConfig: $$Props["inTransitionConfig"] = undefined;
export let outTransition: $$Props["outTransition"] = scale;
export let outTransitionConfig: $$Props["outTransitionConfig"] = {
start: 0.95,
opacity: 0,
duration: 50,
};
let className: $$Props["class"] = undefined;
export { className as class };
</script>
<SelectPrimitive.Content
{inTransition}
{inTransitionConfig}
{outTransition}
{outTransitionConfig}
{sideOffset}
class={cn(
"relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md outline-none",
className
)}
{...$$restProps}
on:keydown
>
<div class="w-full p-1">
<slot />
</div>
</SelectPrimitive.Content>

40
website/src/lib/components/ui/select/select-item.svelte Normal file
View File

@@ -0,0 +1,40 @@
<script lang="ts">
import Check from "lucide-svelte/icons/check";
import { Select as SelectPrimitive } from "bits-ui";
import { cn } from "$lib/utils.js";
type $$Props = SelectPrimitive.ItemProps;
type $$Events = SelectPrimitive.ItemEvents;
let className: $$Props["class"] = undefined;
export let value: $$Props["value"];
export let label: $$Props["label"] = undefined;
export let disabled: $$Props["disabled"] = undefined;
export { className as class };
</script>
<SelectPrimitive.Item
{value}
{disabled}
{label}
class={cn(
"relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50",
className
)}
{...$$restProps}
on:click
on:keydown
on:focusin
on:focusout
on:pointerleave
on:pointermove
>
<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
<SelectPrimitive.ItemIndicator>
<Check class="h-4 w-4" />
</SelectPrimitive.ItemIndicator>
</span>
<slot>
{label || value}
</slot>
</SelectPrimitive.Item>

16
website/src/lib/components/ui/select/select-label.svelte Normal file
View File

@@ -0,0 +1,16 @@
<script lang="ts">
import { Select as SelectPrimitive } from "bits-ui";
import { cn } from "$lib/utils.js";
type $$Props = SelectPrimitive.LabelProps;
let className: $$Props["class"] = undefined;
export { className as class };
</script>
<SelectPrimitive.Label
class={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
{...$$restProps}
>
<slot />
</SelectPrimitive.Label>

11
website/src/lib/components/ui/select/select-separator.svelte Normal file
View File

@@ -0,0 +1,11 @@
<script lang="ts">
import { Select as SelectPrimitive } from "bits-ui";
import { cn } from "$lib/utils.js";
type $$Props = SelectPrimitive.SeparatorProps;
let className: $$Props["class"] = undefined;
export { className as class };
</script>
<SelectPrimitive.Separator class={cn("-mx-1 my-1 h-px bg-muted", className)} {...$$restProps} />

27
website/src/lib/components/ui/select/select-trigger.svelte Normal file
View File

@@ -0,0 +1,27 @@
<script lang="ts">
import { Select as SelectPrimitive } from "bits-ui";
import ChevronDown from "lucide-svelte/icons/chevron-down";
import { cn } from "$lib/utils.js";
type $$Props = SelectPrimitive.TriggerProps;
type $$Events = SelectPrimitive.TriggerEvents;
let className: $$Props["class"] = undefined;
export { className as class };
</script>
<SelectPrimitive.Trigger
class={cn(
"flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
className
)}
{...$$restProps}
let:builder
on:click
on:keydown
>
<slot {builder} />
<div>
<ChevronDown class="h-4 w-4 opacity-50" />
</div>
</SelectPrimitive.Trigger>

7
website/src/lib/components/ui/switch/index.ts Normal file
View File

@@ -0,0 +1,7 @@
import Root from "./switch.svelte";
export {
Root,
//
Root as Switch,
};

28
website/src/lib/components/ui/switch/switch.svelte Normal file
View File

@@ -0,0 +1,28 @@
<script lang="ts">
import { Switch as SwitchPrimitive } from "bits-ui";
import { cn } from "$lib/utils.js";
type $$Props = SwitchPrimitive.Props;
type $$Events = SwitchPrimitive.Events;
let className: $$Props["class"] = undefined;
export let checked: $$Props["checked"] = undefined;
export { className as class };
</script>
<SwitchPrimitive.Root
bind:checked
class={cn(
"peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
className
)}
{...$$restProps}
on:click
on:keydown
>
<SwitchPrimitive.Thumb
class={cn(
"pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
)}
/>
</SwitchPrimitive.Root>

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

@@ -5,7 +5,7 @@
import GPXData from '$lib/components/GPXData.svelte'; import GPXData from '$lib/components/GPXData.svelte';
import Map from '$lib/components/Map.svelte'; import Map from '$lib/components/Map.svelte';
import Menu from '$lib/components/Menu.svelte'; import Menu from '$lib/components/Menu.svelte';
import Toolbar from '$lib/components/Toolbar.svelte'; import Toolbar from '$lib/components/toolbar/Toolbar.svelte';
import LayerControl from '$lib/components/layer-control/LayerControl.svelte'; import LayerControl from '$lib/components/layer-control/LayerControl.svelte';
</script> </script>
@@ -17,7 +17,7 @@
<LayerControl /> <LayerControl />
<Data /> <Data />
</div> </div>
<div class="h-60 flex flex-row overflow-hidden"> <div class="h-60 flex flex-row overflow-hidden border">
<FileList /> <FileList />
<GPXData /> <GPXData />
<ElevationProfile /> <ElevationProfile />