20210782/travel-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added map @ itinerary page

Browse Source
This commit is contained in:
adeliptr 2025-05-31 23:39:27 +09:00
parent 5b0a51a6f4
commit e25f5f1897
6 changed files with 80 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
package-lock.json generated
View File

@ -8,8 +8,8 @@
"name": "travel-app",
"version": "0.0.1",
"dependencies": {
"@googlemaps/js-api-loader": "^1.16.8",
"d3": "^7.9.0",
"places-autocomplete-svelte": "^2.2.10",
"topojson-client": "^3.1.0",
"topojson-server": "^3.0.1"
},
@ -18,6 +18,7 @@
"@sveltejs/kit": "^2.16.0",
"@sveltejs/vite-plugin-svelte": "^5.0.0",
"@types/d3": "^7.4.3",
"@types/google.maps": "^3.58.1",
"@types/topojson-client": "^3.1.5",
"@types/topojson-server": "^3.0.4",
"nodemon": "^3.1.10",
@ -31,6 +32,7 @@
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.3.0.tgz",
"integrity": "sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==",
"dev": true,
"license": "Apache-2.0",
"dependencies": {
"@jridgewell/gen-mapping": "^0.3.5",
@ -475,6 +477,7 @@
"version": "0.3.8",
"resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.8.tgz",
"integrity": "sha512-imAbBGkb+ebQyxKgzv5Hu2nmROxoDOXHh80evxdoXNOrvAnVx7zimzc1Oo5h9RlfV4vPXaE2iM5pOFbvOCClWA==",
"dev": true,
"license": "MIT",
"dependencies": {
"@jridgewell/set-array": "^1.2.1",
@ -489,6 +492,7 @@
"version": "3.1.2",
"resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
"integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=6.0.0"
@ -498,6 +502,7 @@
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz",
"integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=6.0.0"
@ -507,12 +512,14 @@
"version": "1.5.0",
"resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
"integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==",
"dev": true,
"license": "MIT"
},
"node_modules/@jridgewell/trace-mapping": {
"version": "0.3.25",
"resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz",
"integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==",
"dev": true,
"license": "MIT",
"dependencies": {
"@jridgewell/resolve-uri": "^3.1.0",
@ -810,6 +817,7 @@
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/@sveltejs/acorn-typescript/-/acorn-typescript-1.0.5.tgz",
"integrity": "sha512-IwQk4yfwLdibDlrXVE04jTZYlLnwsTT2PIOQQGNLWfjavGifnk1JD1LcZjZaBTRcxZu2FfPfNLOE04DSu9lqtQ==",
"dev": true,
"license": "MIT",
"peerDependencies": {
"acorn": "^8.9.0"
@ -1192,6 +1200,7 @@
"version": "1.0.7",
"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.7.tgz",
"integrity": "sha512-w28IoSUCJpidD/TGviZwwMJckNESJZXFu7NBZ5YJ4mEUnNraUn9Pm8HSZm/jDF1pDWYKspWE7oVphigUPRakIQ==",
"dev": true,
"license": "MIT"
},
"node_modules/@types/geojson": {
@ -1201,6 +1210,13 @@
"dev": true,
"license": "MIT"
},
"node_modules/@types/google.maps": {
"version": "3.58.1",
"resolved": "https://registry.npmjs.org/@types/google.maps/-/google.maps-3.58.1.tgz",
"integrity": "sha512-X9QTSvGJ0nCfMzYOnaVs/k6/4L+7F5uCS+4iUmkLEls6J9S/Phv+m/i3mDeyc49ZBgwab3EFO1HEoBY7k98EGQ==",
"dev": true,
"license": "MIT"
},
"node_modules/@types/topojson-client": {
"version": "3.1.5",
"resolved": "https://registry.npmjs.org/@types/topojson-client/-/topojson-client-3.1.5.tgz",
@ -1237,6 +1253,7 @@
"version": "8.14.1",
"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.1.tgz",
"integrity": "sha512-OvQ/2pUDKmgfCg++xsTX1wGxfTaszcHVcTctW4UJB4hibJx2HXxxO5UmVgyjMa+ZDsiaf5wWLXYpRWMmBI0QHg==",
"dev": true,
"license": "MIT",
"bin": {
"acorn": "bin/acorn"
@ -1276,6 +1293,7 @@
"version": "5.3.2",
"resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.2.tgz",
"integrity": "sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==",
"dev": true,
"license": "Apache-2.0",
"engines": {
"node": ">= 0.4"
@ -1285,6 +1303,7 @@
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.1.0.tgz",
"integrity": "sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==",
"dev": true,
"license": "Apache-2.0",
"engines": {
"node": ">= 0.4"
@ -1354,6 +1373,7 @@
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
"integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=6"
@ -1875,12 +1895,14 @@
"version": "1.2.2",
"resolved": "https://registry.npmjs.org/esm-env/-/esm-env-1.2.2.tgz",
"integrity": "sha512-Epxrv+Nr/CaL4ZcFGPJIYLWFom+YeV1DqMLHJoEd9SYRxNbaFruBwfEX/kkHUJf55j2+TUbmDcmuilbP1TmXHA==",
"dev": true,
"license": "MIT"
},
"node_modules/esrap": {
"version": "1.4.6",
"resolved": "https://registry.npmjs.org/esrap/-/esrap-1.4.6.tgz",
"integrity": "sha512-F/D2mADJ9SHY3IwksD4DAXjTt7qt7GWUf3/8RhCNWmC/67tyb55dpimHmy7EplakFaflV0R/PC+fdSPqrRHAQw==",
"dev": true,
"license": "MIT",
"dependencies": {
"@jridgewell/sourcemap-codec": "^1.4.15"
@ -2030,6 +2052,7 @@
"version": "3.0.3",
"resolved": "https://registry.npmjs.org/is-reference/-/is-reference-3.0.3.tgz",
"integrity": "sha512-ixkJoqQvAP88E6wLydLGGqCJsrFUnqoH6HnaczB8XmDH1oaWU+xxdptvikTgaEhtZ53Ky6YXiBuUI2WXLMCwjw==",
"dev": true,
"license": "MIT",
"dependencies": {
"@types/estree": "^1.0.6"
@ -2049,12 +2072,14 @@
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/locate-character/-/locate-character-3.0.0.tgz",
"integrity": "sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA==",
"dev": true,
"license": "MIT"
},
"node_modules/magic-string": {
"version": "0.30.17",
"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.17.tgz",
"integrity": "sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==",
"dev": true,
"license": "MIT",
"dependencies": {
"@jridgewell/sourcemap-codec": "^1.5.0"
@ -2229,18 +2254,6 @@
"url": "https://github.com/sponsors/jonschlinkert"
}
},
"node_modules/places-autocomplete-svelte": {
"version": "2.2.10",
"resolved": "https://registry.npmjs.org/places-autocomplete-svelte/-/places-autocomplete-svelte-2.2.10.tgz",
"integrity": "sha512-P/+4m0lF1nzqH+fUVmxobVPODNapIXzKxEBHS3gj+FAuDyBZdsCi9z2fy+vpbjwMRualklFFB59nET93r4hWDw==",
"license": "MIT",
"dependencies": {
"@googlemaps/js-api-loader": "^1.16.8"
},
"peerDependencies": {
"svelte": "^5.1.4"
}
},
"node_modules/postcss": {
"version": "8.5.3",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.3.tgz",
@ -2437,6 +2450,7 @@
"version": "5.33.2",
"resolved": "https://registry.npmjs.org/svelte/-/svelte-5.33.2.tgz",
"integrity": "sha512-uiyusx2rUa9NmVMaIcShnZyDhOfFXxgkn5eXOcgjDBL3RYQGR1+7TctPcI6AWNbu4gHWF5xZ/TlFM7nnw5H+JQ==",
"dev": true,
"license": "MIT",
"dependencies": {
"@ampproject/remapping": "^2.3.0",
@ -2689,6 +2703,7 @@
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/zimmerframe/-/zimmerframe-1.1.2.tgz",
"integrity": "sha512-rAbqEGa8ovJy4pyBxZM70hg4pE6gDgaQ0Sl9M3enG3I0d6H4XSAM3GeNGLKnsBpuijUow064sf7ww1nutC5/3w==",
"dev": true,
"license": "MIT"
}
}

3
package.json
View File

@ -16,6 +16,7 @@
"@sveltejs/kit": "^2.16.0",
"@sveltejs/vite-plugin-svelte": "^5.0.0",
"@types/d3": "^7.4.3",
"@types/google.maps": "^3.58.1",
"@types/topojson-client": "^3.1.5",
"@types/topojson-server": "^3.0.4",
"nodemon": "^3.1.10",
@ -25,8 +26,8 @@
"vite": "^6.2.6"
},
"dependencies": {
"@googlemaps/js-api-loader": "^1.16.8",
"d3": "^7.9.0",
"places-autocomplete-svelte": "^2.2.10",
"topojson-client": "^3.1.0",
"topojson-server": "^3.0.1"
}

2
src/lib/components/Button.svelte
View File

@ -1,5 +1,5 @@
<script>
// import '../../app.css';
import '../../app.css';
export let text = 'Button';
export let type = 'single';
export let onClick = () => {};

8
src/lib/components/Nav.svelte
View File

@ -1,11 +1,15 @@
<script lang="ts">
<script lang>
import { Colors } from '$lib/constants/Colors';
import { goto } from '$app/navigation';
let title = "Travel App";
export let activeTab = "Home";
function handleNavigation(tab: "Home" | "Planner" | "Memory") {
/**
*
* @param tab {string}
*/
function handleNavigation(tab) {
activeTab = tab;
if (tab === 'Home') {
goto('/');

45
src/routes/itinerary/+page.svelte
View File

@ -3,11 +3,15 @@
import { goto } from '$app/navigation';
import { slide } from 'svelte/transition';
import { quintOut } from 'svelte/easing';
import { page } from '$app/state';
import { onMount } from 'svelte';
import { Loader } from '@googlemaps/js-api-loader';
import ProfilePicture from '$lib/components/ProfilePicture.svelte';
import BottomBar from '$lib/components/BottomBar.svelte';
import Button from '$lib/components/Button.svelte';
import ItineraryDate from '$lib/components/ItineraryDate.svelte';
import { page } from '$app/state';
import { browser } from '$app/environment';
// Placeholder data obtained from the popup
let destination = "Taiwan";
@ -17,6 +21,36 @@
let places: string[] = [];
const place_placeholder = { name: 'Somewhere'}
const places_placeholder = Array(3).fill(place_placeholder);
const GOOGLE_PLACES_API_KEY = import.meta.env.VITE_GOOGLE_PLACES_API_KEY;
let mapContainer: HTMLDivElement;
onMount(async () => {
if (!browser) return;
if (!GOOGLE_PLACES_API_KEY) {
console.error('Google Places API key is missing');
return;
}
const loader = new Loader({
apiKey: GOOGLE_PLACES_API_KEY,
version: "weekly",
libraries: ["places"],
language: 'en'
});
try {
await loader.importLibrary("maps");
const map = new google.maps.Map(mapContainer, {
center: { lat: 23.5, lng: 121 }, // Taiwan's coordinates
zoom: 8,
});
} catch (error) {
console.error('Error loading Google Maps:', error);
}
});
// Array of dates between startDate to endDate
let tripDates = ["27/04/2025", "28/04/2025", "29/04/2025", "30/04/2025"];
@ -148,7 +182,7 @@
</div>
<div class="map-section">
<div class="map"></div>
<div class="map-container" bind:this={mapContainer}></div>
<BottomBar title="Past Trips" desc={desc} onClick={handlePastTrip} />
</div>
</main>
@ -175,10 +209,10 @@
display: flex;
flex-direction: column;
height: 100vh;
background-color: var(--gray-50);
background-color: #84D7EB;
}
.map {
.map-container {
flex: 1;
position: relative;
}
@ -189,7 +223,6 @@
align-items: center;
gap: 1rem;
padding: 0 2rem 1.5rem 1rem;
margin-bottom: 1rem;
border-bottom: 1px solid var(--gray-100);
}
@ -238,7 +271,7 @@
}
.content {
padding: 0 1.5rem 0 1.5rem;
padding: 1rem 1.5rem 0 1.5rem;
flex: 1;
display: flex;
flex-direction: column;

5
vite.config.ts
View File

@ -2,5 +2,8 @@ import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';
export default defineConfig({
plugins: [sveltekit()]
plugins: [sveltekit()],
ssr: {
noExternal: ['@googlemaps/js-api-loader']
}
});