brian/wanderer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

improves upload

Browse Source
This commit is contained in:
Christian Beutel
2025-01-10 16:16:30 +01:00
parent 4212a117e1
commit 94aa2f61c4
5 changed files with 93 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
web/package-lock.json generated
View File

@@ -1,12 +1,12 @@
{
"name": "wanderer",
"version": "0.13.0",
"version": "0.13.1",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "wanderer",
"version": "0.13.0",
"version": "0.13.1",
"dependencies": {
"@felte/validator-zod": "^1.0.18",
"@fortawesome/fontawesome-free": "^6.5.1",
@@ -27,6 +27,7 @@
"heic2any": "^0.0.4",
"instead": "^1.0.3",
"isomorphic-xml2js": "^0.1.3",
"js-confetti": "^0.12.0",
"jspdf": "^2.5.1",
"jszip": "^3.10.1",
"maplibre-gl": "^4.7.1",
@@ -3675,6 +3676,12 @@
"resolved": "https://registry.npmjs.org/jpeg-exif/-/jpeg-exif-1.1.4.tgz",
"integrity": "sha512-a+bKEcCjtuW5WTdgeXFzswSrdqi0jk4XlEtZlx5A94wCoBpFjfFTbo/Tra5SpNCl/YFZPvcV1dJc+TAYeg6ROQ=="
},
"node_modules/js-confetti": {
"version": "0.12.0",
"resolved": "https://registry.npmjs.org/js-confetti/-/js-confetti-0.12.0.tgz",
"integrity": "sha512-1R0Akxn3Zn82pMqW65N1V2NwKkZJ75bvBN/VAb36Ya0YHwbaSiAJZVRr/19HBxH/O8x2x01UFAbYI18VqlDN6g==",
"license": "MIT"
},
"node_modules/jsdom": {
"version": "24.1.0",
"resolved": "https://registry.npmjs.org/jsdom/-/jsdom-24.1.0.tgz",

1
web/package.json
View File

@@ -49,6 +49,7 @@
"heic2any": "^0.0.4",
"instead": "^1.0.3",
"isomorphic-xml2js": "^0.1.3",
"js-confetti": "^0.12.0",
"jspdf": "^2.5.1",
"jszip": "^3.10.1",
"maplibre-gl": "^4.7.1",

20
web/src/lib/assets/svgs/empty_states/empty_state_upload_dark.svg Normal file
View File

@@ -0,0 +1,20 @@
<svg width="118" height="104" viewBox="0 0 118 104" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M58.9712 82.07C59.5125 82.07 59.9512 81.6312 59.9512 81.09C59.9512 80.5487 59.5125 80.11 58.9712 80.11C58.43 80.11 57.9912 80.5487 57.9912 81.09C57.9912 81.6312 58.43 82.07 58.9712 82.07Z" fill="#CFCFCF"/>
<path d="M30.5012 8.28995V12.5899" stroke="#4A5059" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M28.3412 10.44H32.6512" stroke="#4A5059" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M79.4512 35.41C71.0812 35.41 62.5612 35.07 54.5912 32.85C46.7712 30.68 39.5912 26.47 33.1912 21.6C29.0012 18.43 25.1912 15.9 19.7512 16.28C14.4293 16.568 9.34 18.5553 5.23121 21.95C-1.68879 28.01 -0.648793 39.24 2.12121 47.1C6.28121 58.97 18.9412 67.24 29.7012 72.59C42.1312 78.8 55.7912 82.41 69.4812 84.48C81.4812 86.31 96.9012 87.63 107.301 79.8C116.851 72.59 119.471 56.15 117.131 45.05C116.563 41.7708 114.817 38.812 112.221 36.73C105.511 31.82 95.5012 35.1 87.9612 35.26C85.1612 35.32 82.3112 35.39 79.4512 35.41Z" fill="#272933"/>
<path d="M65.9112 2.42997C66.4525 2.42997 66.8912 1.99121 66.8912 1.44997C66.8912 0.908731 66.4525 0.469971 65.9112 0.469971C65.37 0.469971 64.9312 0.908731 64.9312 1.44997C64.9312 1.99121 65.37 2.42997 65.9112 2.42997Z" fill="#CFCFCF"/>
<path d="M14.9912 78.74V83.04" stroke="#4A5059" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M12.8412 80.89H17.1412" stroke="#4A5059" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M59.3712 103.94C79.6456 103.94 96.0812 102.915 96.0812 101.65C96.0812 100.385 79.6456 99.36 59.3712 99.36C39.0968 99.36 22.6612 100.385 22.6612 101.65C22.6612 102.915 39.0968 103.94 59.3712 103.94Z" fill="#272933"/>
<path d="M88.886 76.6199H88.8812H25.4716C25.1196 76.6197 24.7719 76.543 24.4525 76.3952C24.1332 76.2473 23.8497 76.0319 23.6218 75.7637C23.3938 75.4956 23.2269 75.1811 23.1324 74.8421C23.038 74.5032 23.0183 74.1479 23.0747 73.8007C23.0747 73.8005 23.0747 73.8003 23.0747 73.8002L31.1846 24.6213L31.1849 24.619C31.2757 24.0521 31.5658 23.5363 32.0031 23.1643C32.4403 22.7923 32.996 22.5886 33.5701 22.5899H33.5712H96.9812C97.3326 22.59 97.6798 22.6666 97.9987 22.8144C98.3175 22.9622 98.6004 23.1776 98.8275 23.4458C99.0547 23.714 99.2207 24.0284 99.314 24.3672C99.4074 24.706 99.4258 25.0611 99.368 25.4078L99.3678 25.409L91.2978 74.589L91.2977 74.5895C91.2047 75.1603 90.9103 75.6789 90.4679 76.0513C90.0255 76.4238 89.4643 76.6255 88.886 76.6199Z" fill="#2D333E" stroke="#4A5059"/>
<path d="M89.6625 20.8038L52.0237 3.9987C50.9142 3.50334 49.6133 4.00117 49.1179 5.11064L37.1888 31.8285C36.6934 32.938 37.1913 34.2389 38.3007 34.7343L75.9395 51.5394C77.049 52.0348 78.3499 51.5369 78.8453 50.4275L90.7744 23.7096C91.2698 22.6001 90.7719 21.2992 89.6625 20.8038Z" fill="#2D333E" stroke="#4A5059" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M71.9675 28.7747C70.9768 30.1648 69.5359 31.1697 67.889 31.619C66.2422 32.0683 64.4906 31.9345 62.9312 31.2401C61.3717 30.5457 60.1003 29.3335 59.3324 27.8089C58.5644 26.2843 58.3472 24.5411 58.7175 22.8747" stroke="#4A5059" stroke-width="0.68" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M75.5412 24.4699C76.1101 24.4699 76.5712 24.0088 76.5712 23.4399C76.5712 22.8711 76.1101 22.4099 75.5412 22.4099C74.9723 22.4099 74.5112 22.8711 74.5112 23.4399C74.5112 24.0088 74.9723 24.4699 75.5412 24.4699Z" fill="#4A5059"/>
<path d="M60.6212 17.81C61.1901 17.81 61.6512 17.3488 61.6512 16.78C61.6512 16.2111 61.1901 15.75 60.6212 15.75C60.0524 15.75 59.5912 16.2111 59.5912 16.78C59.5912 17.3488 60.0524 17.81 60.6212 17.81Z" fill="#4A5059"/>
<path d="M88.6012 77.1H24.8812C24.1058 77.0973 23.3632 76.7875 22.8158 76.2383C22.2685 75.6891 21.9612 74.9453 21.9612 74.17V29.24C21.9519 28.8502 22.0205 28.4625 22.1629 28.0995C22.3053 27.7366 22.5188 27.4057 22.7907 27.1263C23.0627 26.8469 23.3877 26.6246 23.7466 26.4724C24.1056 26.3202 24.4913 26.2412 24.8812 26.24H48.0912C48.6298 26.2419 49.1574 26.3923 49.616 26.6746C50.0747 26.9568 50.4467 27.3601 50.6912 27.84L54.0012 34.32C54.2448 34.8006 54.6166 35.2044 55.0754 35.4868C55.5343 35.7692 56.0624 35.9191 56.6012 35.92H88.6012C89.3756 35.92 90.1183 36.2276 90.6659 36.7752C91.2136 37.3228 91.5212 38.0655 91.5212 38.84V74.17C91.5212 74.9453 91.2139 75.6891 90.6666 76.2383C90.1192 76.7875 89.3765 77.0973 88.6012 77.1Z" fill="#2D333E" stroke="#4A5059" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M106.331 1.44995V5.75995" stroke="#4A5059" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M104.171 3.60995H108.481" stroke="#4A5059" stroke-linecap="round" stroke-linejoin="round"/>
<rect x="56" y="55.47" width="5" height="12" rx="1" fill="#4A5059"/>
<path d="M57.634 46.97C58.0189 46.3033 58.9811 46.3033 59.366 46.97L64.9952 56.72C65.3801 57.3866 64.899 58.22 64.1292 58.22H52.8708C52.101 58.22 51.6199 57.3866 52.0048 56.72L57.634 46.97Z" fill="#4A5059"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.8 KiB

20
web/src/lib/assets/svgs/empty_states/empty_state_upload_light.svg Normal file
View File

@@ -0,0 +1,20 @@
<svg width="118" height="104" viewBox="0 0 118 104" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M58.9712 81.6C59.5125 81.6 59.9512 81.1612 59.9512 80.62C59.9512 80.0787 59.5125 79.64 58.9712 79.64C58.43 79.64 57.9912 80.0787 57.9912 80.62C57.9912 81.1612 58.43 81.6 58.9712 81.6Z" fill="#CFCFCF"/>
<path d="M30.5012 7.81998V12.12" stroke="#BABABA" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M28.3412 9.97H32.6512" stroke="#BABABA" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M79.4512 34.94C71.0812 34.94 62.5612 34.6 54.5912 32.38C46.7712 30.21 39.5912 26 33.1912 21.13C29.0012 17.96 25.1912 15.43 19.7512 15.81C14.4293 16.098 9.34 18.0853 5.23121 21.48C-1.68879 27.54 -0.648793 38.77 2.12121 46.63C6.28121 58.5 18.9412 66.77 29.7012 72.12C42.1312 78.33 55.7912 81.94 69.4812 84.01C81.4812 85.84 96.9012 87.16 107.301 79.33C116.851 72.12 119.471 55.68 117.131 44.58C116.563 41.3009 114.817 38.3421 112.221 36.26C105.511 31.35 95.5012 34.63 87.9612 34.79C85.1612 34.85 82.3112 34.92 79.4512 34.94Z" fill="#F2F2F2"/>
<path d="M65.9112 1.96C66.4525 1.96 66.8912 1.52124 66.8912 0.98C66.8912 0.43876 66.4525 0 65.9112 0C65.37 0 64.9312 0.43876 64.9312 0.98C64.9312 1.52124 65.37 1.96 65.9112 1.96Z" fill="#CFCFCF"/>
<path d="M14.9912 78.27V82.57" stroke="#BABABA" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M12.8412 80.42H17.1412" stroke="#BABABA" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M59.3712 103.47C79.6456 103.47 96.0812 102.445 96.0812 101.18C96.0812 99.9153 79.6456 98.89 59.3712 98.89C39.0968 98.89 22.6612 99.9153 22.6612 101.18C22.6612 102.445 39.0968 103.47 59.3712 103.47Z" fill="#F2F2F2"/>
<path d="M88.8812 76.65H25.4712C25.0469 76.6497 24.6276 76.5572 24.2425 76.379C23.8574 76.2007 23.5156 75.9409 23.2408 75.6176C22.966 75.2942 22.7646 74.9151 22.6508 74.5063C22.5369 74.0975 22.5131 73.6688 22.5812 73.25L30.6912 24.07C30.8008 23.3855 31.1511 22.7626 31.6791 22.3135C32.2071 21.8643 32.878 21.6184 33.5712 21.62H96.9812C97.4053 21.62 97.8242 21.7124 98.2089 21.8908C98.5937 22.0691 98.9349 22.3291 99.209 22.6526C99.4831 22.9762 99.6834 23.3556 99.7961 23.7644C99.9087 24.1732 99.9309 24.6017 99.8612 25.02L91.7912 74.2C91.6789 74.8887 91.3237 75.5144 90.7899 75.9639C90.2561 76.4133 89.579 76.6567 88.8812 76.65Z" fill="#D2D2D2"/>
<path d="M89.6625 20.3338L52.0237 3.52873C50.9142 3.03337 49.6133 3.5312 49.1179 4.64067L37.1888 31.3585C36.6934 32.468 37.1913 33.769 38.3007 34.2643L75.9395 51.0694C77.049 51.5648 78.3499 51.067 78.8453 49.9575L90.7744 23.2396C91.2698 22.1302 90.7719 20.8292 89.6625 20.3338Z" fill="white" stroke="#BABABA" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M71.9675 28.3047C70.9768 29.6949 69.5359 30.6997 67.889 31.1491C66.2422 31.5984 64.4906 31.4645 62.9312 30.7701C61.3717 30.0757 60.1003 28.8635 59.3324 27.3389C58.5644 25.8143 58.3472 24.0711 58.7175 22.4047" stroke="#BABABA" stroke-width="0.68" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M75.5412 24C76.1101 24 76.5712 23.5388 76.5712 22.97C76.5712 22.4011 76.1101 21.94 75.5412 21.94C74.9723 21.94 74.5112 22.4011 74.5112 22.97C74.5112 23.5388 74.9723 24 75.5412 24Z" fill="#BABABA"/>
<path d="M60.6212 17.34C61.1901 17.34 61.6512 16.8789 61.6512 16.31C61.6512 15.7411 61.1901 15.28 60.6212 15.28C60.0524 15.28 59.5912 15.7411 59.5912 16.31C59.5912 16.8789 60.0524 17.34 60.6212 17.34Z" fill="#BABABA"/>
<path d="M88.6012 76.63H24.8812C24.1058 76.6273 23.3632 76.3175 22.8158 75.7683C22.2685 75.2191 21.9612 74.4753 21.9612 73.7V28.77C21.9519 28.3802 22.0205 27.9925 22.1629 27.6295C22.3053 27.2666 22.5188 26.9357 22.7907 26.6563C23.0627 26.3769 23.3877 26.1546 23.7466 26.0024C24.1056 25.8502 24.4913 25.7712 24.8812 25.77H48.0912C48.6298 25.772 49.1574 25.9223 49.616 26.2046C50.0747 26.4869 50.4467 26.8901 50.6912 27.37L54.0012 33.85C54.2448 34.3306 54.6166 34.7344 55.0754 35.0168C55.5343 35.2992 56.0624 35.4491 56.6012 35.45H88.6012C89.3756 35.45 90.1183 35.7576 90.6659 36.3052C91.2136 36.8528 91.5212 37.5956 91.5212 38.37V73.7C91.5212 74.4753 91.2139 75.2191 90.6666 75.7683C90.1192 76.3175 89.3765 76.6273 88.6012 76.63Z" fill="white" stroke="#BABABA" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M106.331 0.97998V5.28998" stroke="#BABABA" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M104.171 3.13998H108.481" stroke="#BABABA" stroke-linecap="round" stroke-linejoin="round"/>
<rect x="56" y="55" width="5" height="12" rx="1" fill="#D9D9D9"/>
<path d="M57.634 46.5C58.0189 45.8333 58.9811 45.8333 59.366 46.5L64.9952 56.25C65.3801 56.9167 64.899 57.75 64.1292 57.75H52.8708C52.101 57.75 51.6199 56.9167 52.0048 56.25L57.634 46.5Z" fill="#D9D9D9"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.6 KiB

46
web/src/routes/settings/export/+page.svelte
View File

@@ -14,6 +14,11 @@
import { _ } from "svelte-i18n";
import { linear } from "svelte/easing";
import { tweened } from "svelte/motion";
import emptyStateUploadDark from "$lib/assets/svgs/empty_states/empty_state_upload_dark.svg";
import emptyStateUploadLight from "$lib/assets/svgs/empty_states/empty_state_upload_light.svg";
import { theme } from "$lib/stores/theme_store";
import { onMount } from "svelte";
import JSConfetti from "js-confetti";
const uploadProgress = tweened(0, {
duration: 300,
@@ -25,6 +30,17 @@
let offerUpload: boolean = false;
let uploading: boolean = false;
let jsConfetti: JSConfetti;
onMount(() => {
jsConfetti = new JSConfetti({
canvas:
(document.getElementById(
"confetti-canvas",
) as HTMLCanvasElement | null) ?? undefined,
});
});
function openFileBrowser() {
document.getElementById("file-input")!.click();
}
@@ -40,6 +56,9 @@
function handleDrop(e: DragEvent) {
e.preventDefault();
if (uploading) {
return;
}
offerUpload = false;
handleFileSelection(e.dataTransfer?.files);
}
@@ -75,9 +94,20 @@
}
setTimeout(() => {
uploadProgress.set(0);
uploadProgress.set(0, { duration: 0 });
uploading = false;
}, 1000);
jsConfetti.addConfetti({
confettiRadius: 4,
confettiColors: [
"#F4C842",
"#3C9D9B",
"#D1C4E9",
"#FF6F61",
"#A9D9C1",
"#F2F2F2",
],
});
}, 500);
if (errorsThrown == 0) {
show_toast({
@@ -174,7 +204,17 @@
on:dragleave={handleDragLeave}
on:drop={handleDrop}
>
{$_("import-hint")}
<canvas id="confetti-canvas" class="absolute" style="width: 100%; height: 200%"> </canvas>
<div class="">
<img
class="rounded-full aspect-square mx-auto"
src={$theme === "light"
? emptyStateUploadLight
: emptyStateUploadDark}
alt="Empty State showing a wanderer going into the distance"
/>
{$_("import-hint")}
</div>
</button>
<input