From 6155d531ab49833e09425bd21489d991ff564ed2 Mon Sep 17 00:00:00 2001 From: Sean Morley Date: Sun, 28 Jul 2024 09:10:59 -0400 Subject: [PATCH] add transportation --- backend/server/adventures/serializers.py | 2 +- .../lib/components/EditTransportation.svelte | 37 +-- .../lib/components/NewTransportation.svelte | 232 ++++++++++++++++++ frontend/src/lib/types.ts | 2 +- .../src/routes/collections/[id]/+page.svelte | 22 ++ 5 files changed, 267 insertions(+), 28 deletions(-) create mode 100644 frontend/src/lib/components/NewTransportation.svelte diff --git a/backend/server/adventures/serializers.py b/backend/server/adventures/serializers.py index 53541b4..3a36575 100644 --- a/backend/server/adventures/serializers.py +++ b/backend/server/adventures/serializers.py @@ -30,7 +30,7 @@ class TransportationSerializer(serializers.ModelSerializer): fields = [ 'id', 'user_id', 'type', 'name', 'description', 'rating', 'link', 'date', 'flight_number', 'from_location', 'to_location', - 'is_public', 'collection', 'collection_id', 'created_at', 'updated_at' + 'is_public', 'collection', 'created_at', 'updated_at' ] read_only_fields = ['id', 'created_at', 'updated_at'] diff --git a/frontend/src/lib/components/EditTransportation.svelte b/frontend/src/lib/components/EditTransportation.svelte index a9cfe3a..c4b3901 100644 --- a/frontend/src/lib/components/EditTransportation.svelte +++ b/frontend/src/lib/components/EditTransportation.svelte @@ -11,18 +11,13 @@ let originalName = transportationToEdit.name; - let isPointModalOpen: boolean = false; - import MapMarker from '~icons/mdi/map-marker'; import Calendar from '~icons/mdi/calendar'; import Notebook from '~icons/mdi/notebook'; - import ClipboardList from '~icons/mdi/clipboard-list'; - import Image from '~icons/mdi/image'; import Star from '~icons/mdi/star'; - import Attachment from '~icons/mdi/attachment'; - import PointSelectionModal from './PointSelectionModal.svelte'; - import Earth from '~icons/mdi/earth'; - import TransportationCard from './TransportationCard.svelte'; + import PlaneCar from '~icons/mdi/plane-car'; + import LinkVariant from '~icons/mdi/link-variant'; + import Airplane from '~icons/mdi/airplane'; onMount(async () => { modal = document.getElementById('my_modal_1') as HTMLDialogElement; @@ -99,7 +94,7 @@ class="input input-bordered w-full max-w-xs mt-1" />
-
+
-
-
- -
+ {#if transportationToEdit.type == 'plane'}
Flight Number
{/if}
-
+
-
+
+ // let newTransportation: Transportation = { + // id:NaN, + // user_id: NaN, + // type: '', + // name: '', + // description: null, + // rating: NaN, + // link: null, + // date: null, + // flight_number: null, + // from_location: null, + // to_location: null, + // is_public: false, + // collection: null, + // created_at: '', + // updated_at: '' + // }; + import { createEventDispatcher } from 'svelte'; + import type { Collection, Transportation } from '$lib/types'; + const dispatch = createEventDispatcher(); + import { onMount } from 'svelte'; + import { addToast } from '$lib/toasts'; + let modal: HTMLDialogElement; + + export let collection: Collection; + + import MapMarker from '~icons/mdi/map-marker'; + import Calendar from '~icons/mdi/calendar'; + import Notebook from '~icons/mdi/notebook'; + import Star from '~icons/mdi/star'; + import PlaneCar from '~icons/mdi/plane-car'; + import LinkVariant from '~icons/mdi/link-variant'; + import Airplane from '~icons/mdi/airplane'; + + let type: string = ''; + + onMount(async () => { + modal = document.getElementById('my_modal_1') as HTMLDialogElement; + if (modal) { + modal.showModal(); + } + }); + + // if (newTransportation.date) { + // newTransportation.date = newTransportation.date.slice(0, 19); + // } + + function close() { + dispatch('close'); + } + + function handleKeydown(event: KeyboardEvent) { + if (event.key === 'Escape') { + close(); + } + } + + async function handleSubmit(event: Event) { + event.preventDefault(); + const form = event.target as HTMLFormElement; + const formData = new FormData(form); + + const response = await fetch(`/api/transportations/`, { + method: 'POST', + body: formData + }); + + if (response.ok) { + const result = await response.json(); + + addToast('success', 'Transportation added successfully!'); + dispatch('add', result); + close(); + } else { + addToast('error', 'Error editing transportation'); + } + } + + + + + + + diff --git a/frontend/src/lib/types.ts b/frontend/src/lib/types.ts index a53fc15..ce66789 100644 --- a/frontend/src/lib/types.ts +++ b/frontend/src/lib/types.ts @@ -88,7 +88,7 @@ export type OpenStreetMapPlace = { export type Transportation = { id: number; - user_id: User; + user_id: number; type: string; name: string; description: string | null; diff --git a/frontend/src/routes/collections/[id]/+page.svelte b/frontend/src/routes/collections/[id]/+page.svelte index 64555c9..a83bfd6 100644 --- a/frontend/src/routes/collections/[id]/+page.svelte +++ b/frontend/src/routes/collections/[id]/+page.svelte @@ -14,6 +14,7 @@ import { DefaultMarker, MapLibre, Popup } from 'svelte-maplibre'; import TransportationCard from '$lib/components/TransportationCard.svelte'; import EditTransportation from '$lib/components/EditTransportation.svelte'; + import NewTransportation from '$lib/components/NewTransportation.svelte'; export let data: PageData; @@ -32,6 +33,7 @@ let notFound: boolean = false; let isShowingLinkModal: boolean = false; let isShowingCreateModal: boolean = false; + let isShowingTransportationModal: boolean = false; onMount(() => { if (data.props.adventure) { @@ -190,6 +192,17 @@ /> {/if} +{#if isShowingTransportationModal} + (isShowingTransportationModal = false)} + on:add={(event) => { + transportations = [event.detail, ...transportations]; + isShowingTransportationModal = false; + }} + {collection} + /> +{/if} + {#if notFound}
Dining +