diff --git a/README.md b/README.md index b5b2950..f0c3e03 100644 --- a/README.md +++ b/README.md @@ -1,28 +1,22 @@ -# sv +# Travel App -Everything you need to build a Svelte project, powered by [`sv`](https://github.com/sveltejs/cli). +## How to Start -## Creating a project - -If you're seeing this, you've probably already done this step. Congrats! - -```bash -# create a new project in the current directory -npx sv create - -# create a new project in my-app -npx sv create my-app +First, you need to clone this repository by clicking the triple dots button → `Open with VS Code` or using the command below: +``` +git clone http://git.prototyping.id/20210782/travel-app.git ``` +Then, you need to download the project dependencies by typing this command: +``` +npm install +``` ## Developing -Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server: +Once you've created a project and installed dependencies, start a development server: ```bash npm run dev - -# or start the server and open the app in a new browser tab -npm run dev -- --open ``` ## Building @@ -35,4 +29,4 @@ npm run build You can preview the production build with `npm run preview`. -> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment. +> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment. \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index ca00852..d2365c8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,6 +9,7 @@ "version": "0.0.1", "dependencies": { "d3": "^7.9.0", + "places-autocomplete-svelte": "^2.2.10", "topojson-client": "^3.1.0", "topojson-server": "^3.0.1" }, @@ -30,7 +31,6 @@ "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", @@ -465,11 +465,16 @@ "node": ">=18" } }, + "node_modules/@googlemaps/js-api-loader": { + "version": "1.16.8", + "resolved": "https://registry.npmjs.org/@googlemaps/js-api-loader/-/js-api-loader-1.16.8.tgz", + "integrity": "sha512-CROqqwfKotdO6EBjZO/gQGVTbeDps5V7Mt9+8+5Q+jTg5CRMi3Ii/L9PmV3USROrt2uWxtGzJHORmByxyo9pSQ==", + "license": "Apache-2.0" + }, "node_modules/@jridgewell/gen-mapping": { "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", @@ -484,7 +489,6 @@ "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" @@ -494,7 +498,6 @@ "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" @@ -504,14 +507,12 @@ "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", @@ -809,7 +810,6 @@ "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,7 +1192,6 @@ "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": { @@ -1238,7 +1237,6 @@ "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" @@ -1278,7 +1276,6 @@ "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" @@ -1288,7 +1285,6 @@ "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" @@ -1358,7 +1354,6 @@ "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" @@ -1880,14 +1875,12 @@ "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" @@ -2037,7 +2030,6 @@ "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" @@ -2057,14 +2049,12 @@ "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" @@ -2239,6 +2229,18 @@ "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", @@ -2435,7 +2437,6 @@ "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", @@ -2688,7 +2689,6 @@ "version": "1.1.2", "resolved": "https://registry.npmjs.org/zimmerframe/-/zimmerframe-1.1.2.tgz", "integrity": "sha512-rAbqEGa8ovJy4pyBxZM70hg4pE6gDgaQ0Sl9M3enG3I0d6H4XSAM3GeNGLKnsBpuijUow064sf7ww1nutC5/3w==", - "dev": true, "license": "MIT" } } diff --git a/package.json b/package.json index 1c2ce8a..bce96d5 100644 --- a/package.json +++ b/package.json @@ -26,6 +26,7 @@ }, "dependencies": { "d3": "^7.9.0", + "places-autocomplete-svelte": "^2.2.10", "topojson-client": "^3.1.0", "topojson-server": "^3.0.1" } diff --git a/src/app.html b/src/app.html index 0446e3b..b316704 100644 --- a/src/app.html +++ b/src/app.html @@ -2,11 +2,11 @@ - + %sveltekit.head%
%sveltekit.body%
- + \ No newline at end of file diff --git a/src/lib/components/BottomBar.svelte b/src/lib/components/BottomBar.svelte new file mode 100644 index 0000000..ffd7fd8 --- /dev/null +++ b/src/lib/components/BottomBar.svelte @@ -0,0 +1,58 @@ + + +
+ + +
+

{title}

+

{desc}

+
+ + {#if typeof onButtonClick === 'function'} +
+ + \ No newline at end of file diff --git a/src/lib/components/Button.svelte b/src/lib/components/Button.svelte new file mode 100644 index 0000000..589d630 --- /dev/null +++ b/src/lib/components/Button.svelte @@ -0,0 +1,54 @@ + + + + + \ No newline at end of file diff --git a/src/lib/components/ItineraryDate.svelte b/src/lib/components/ItineraryDate.svelte new file mode 100644 index 0000000..4bcbe55 --- /dev/null +++ b/src/lib/components/ItineraryDate.svelte @@ -0,0 +1,106 @@ + + +
+ + + {#if isExpanded} +
+ {#each places as place} + + {/each} + + +
+ {/if} +
+ + \ No newline at end of file diff --git a/src/lib/components/PlaceCard.svelte b/src/lib/components/PlaceCard.svelte new file mode 100644 index 0000000..3dc20b1 --- /dev/null +++ b/src/lib/components/PlaceCard.svelte @@ -0,0 +1,94 @@ + + +
+ +
+
{fullPlace.name}
+ {#if fullPlace.desc} +

{fullPlace.desc}

+ {/if} +
+ +
+
+
+ + \ No newline at end of file diff --git a/src/lib/components/ProfilePicture.svelte b/src/lib/components/ProfilePicture.svelte new file mode 100644 index 0000000..6d3b2ac --- /dev/null +++ b/src/lib/components/ProfilePicture.svelte @@ -0,0 +1,32 @@ + + +
+ {#if image} + + {:else} + + {/if} +
+ + \ No newline at end of file diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 5f53533..a3eb35c 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -1,15 +1,42 @@ + const GOOGLE_PLACES_API_KEY = import.meta.env.VITE_GOOGLE_PLACES_API_KEY; + + function handleNewTrip() { + showNewTripPopup = true; + } + + function handleCancel() { + showNewTripPopup = false; + destination = ""; + startDate = ""; + endDate = ""; + friends = ""; + } + + function handleStart() { + console.log(destination, startDate, endDate, friends); + goto('/itinerary'); + } + + function handlePastTrip() { + console.log("let's see the past trip"); + } +
\ No newline at end of file diff --git a/src/routes/itinerary/+page.svelte b/src/routes/itinerary/+page.svelte new file mode 100644 index 0000000..e4f25eb --- /dev/null +++ b/src/routes/itinerary/+page.svelte @@ -0,0 +1,282 @@ + + +
+
+
+
+ +
+ +
+

Trip to {destination}

+

{startDate} - {endDate}

+
+ +
+ + +
+
+ +
+
+ + + +
+ +
+ + + +
+ +
+ + + {#if expandedSections.itinerary} +
+ {#each tripDates as date} + + {/each} +
+ {/if} +
+ +
+
+
+
+ +
+
+ +
+
+ + + \ No newline at end of file diff --git a/static/placeholder.jpeg b/static/placeholder.jpeg new file mode 100644 index 0000000..7279516 Binary files /dev/null and b/static/placeholder.jpeg differ diff --git a/static/profile-pic.png b/static/profile-pic.png new file mode 100644 index 0000000..3043b2d Binary files /dev/null and b/static/profile-pic.png differ