mirror of
https://github.com/seanmorley15/AdventureLog.git
synced 2025-07-21 13:59:36 +02:00
feat: enhance adventure handling with user ID support in serializers and attachment view; refactor saveEdit function and clean up Avatar component
This commit is contained in:
Sean Morley
parent
3f30819d25
commit
0eb4bc706a
6 changed files with 199 additions and 186 deletions
|
|
@ -8,8 +8,8 @@ from main.utils import CustomModelSerializer
|
||||||
class AdventureImageSerializer(CustomModelSerializer):
|
class AdventureImageSerializer(CustomModelSerializer):
|
||||||
class Meta:
|
class Meta:
|
||||||
model = AdventureImage
|
model = AdventureImage
|
||||||
fields = ['id', 'image', 'adventure', 'is_primary']
|
fields = ['id', 'image', 'adventure', 'is_primary', 'user_id']
|
||||||
read_only_fields = ['id']
|
read_only_fields = ['id', 'user_id']
|
||||||
|
|
||||||
def to_representation(self, instance):
|
def to_representation(self, instance):
|
||||||
representation = super().to_representation(instance)
|
representation = super().to_representation(instance)
|
||||||
|
|
@ -25,8 +25,8 @@ class AttachmentSerializer(CustomModelSerializer):
|
||||||
extension = serializers.SerializerMethodField()
|
extension = serializers.SerializerMethodField()
|
||||||
class Meta:
|
class Meta:
|
||||||
model = Attachment
|
model = Attachment
|
||||||
fields = ['id', 'file', 'adventure', 'extension', 'name']
|
fields = ['id', 'file', 'adventure', 'extension', 'name', 'user_id']
|
||||||
read_only_fields = ['id']
|
read_only_fields = ['id', 'user_id']
|
||||||
|
|
||||||
def get_extension(self, obj):
|
def get_extension(self, obj):
|
||||||
return obj.file.name.split('.')[-1]
|
return obj.file.name.split('.')[-1]
|
||||||
|
|
|
||||||
|
|
@ -35,3 +35,6 @@ class AttachmentViewSet(viewsets.ModelViewSet):
|
||||||
return Response({"error": "User does not own this adventure"}, status=status.HTTP_403_FORBIDDEN)
|
return Response({"error": "User does not own this adventure"}, status=status.HTTP_403_FORBIDDEN)
|
||||||
|
|
||||||
return super().create(request, *args, **kwargs)
|
return super().create(request, *args, **kwargs)
|
||||||
|
|
||||||
|
def perform_create(self, serializer):
|
||||||
|
serializer.save(user_id=self.request.user)
|
||||||
|
|
@ -173,16 +173,27 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
let selectedFile: File | null = null;
|
||||||
|
|
||||||
|
function handleFileChange(event: Event) {
|
||||||
|
const input = event.target as HTMLInputElement;
|
||||||
|
if (input.files && input.files.length) {
|
||||||
|
selectedFile = input.files[0];
|
||||||
|
console.log('Selected file:', selectedFile);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
async function uploadAttachment(event: Event) {
|
async function uploadAttachment(event: Event) {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
console.log('UPLOAD');
|
console.log('UPLOAD');
|
||||||
|
console.log(selectedFile);
|
||||||
|
|
||||||
if (!fileInput || !fileInput.files || fileInput.files.length === 0) {
|
if (!selectedFile) {
|
||||||
console.error('No files selected');
|
console.error('No files selected');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
const file = fileInput.files[0];
|
const file = selectedFile;
|
||||||
console.log(file);
|
console.log(file);
|
||||||
|
|
||||||
const formData = new FormData();
|
const formData = new FormData();
|
||||||
|
|
@ -962,69 +973,6 @@ it would also work to just use on:click on the MapLibre component itself. -->
|
||||||
<ActivityComplete bind:activities={adventure.activity_types} />
|
<ActivityComplete bind:activities={adventure.activity_types} />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="collapse collapse-plus bg-base-200 mb-4">
|
|
||||||
<input type="checkbox" />
|
|
||||||
<div class="collapse-title text-xl font-medium">
|
|
||||||
{$t('adventures.attachments')} ({adventure.attachments?.length || 0})
|
|
||||||
</div>
|
|
||||||
<div class="collapse-content">
|
|
||||||
<div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
|
|
||||||
{#each adventure.attachments as attachment}
|
|
||||||
<AttachmentCard
|
|
||||||
{attachment}
|
|
||||||
on:delete={deleteAttachment}
|
|
||||||
allowEdit
|
|
||||||
on:edit={(e) => (attachmentToEdit = e.detail)}
|
|
||||||
/>
|
|
||||||
{/each}
|
|
||||||
</div>
|
|
||||||
<form
|
|
||||||
on:submit={(e) => {
|
|
||||||
e.preventDefault();
|
|
||||||
uploadAttachment(e);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div class="flex gap-2 m-4">
|
|
||||||
<input
|
|
||||||
type="file"
|
|
||||||
id="fileInput"
|
|
||||||
class="file-input file-input-bordered w-full max-w-xs"
|
|
||||||
accept="image/*,video/*,audio/*,application/pdf,.gpx"
|
|
||||||
bind:this={fileInput}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
class="input input-bordered w-full"
|
|
||||||
placeholder={$t('adventures.attachment_name')}
|
|
||||||
bind:value={attachmentName}
|
|
||||||
/>
|
|
||||||
<button type="submit" class="btn btn-neutral">{$t('adventures.upload')}</button>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
{#if attachmentToEdit}
|
|
||||||
<form
|
|
||||||
on:submit={(e) => {
|
|
||||||
e.preventDefault();
|
|
||||||
editAttachment();
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div class="flex gap-2 m-4">
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
class="input input-bordered w-full"
|
|
||||||
placeholder={$t('adventures.attachment_name')}
|
|
||||||
bind:value={attachmentToEdit.name}
|
|
||||||
/>
|
|
||||||
<button type="submit" class="btn btn-neutral"
|
|
||||||
>{$t('transportation.edit')}</button
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="collapse collapse-plus bg-base-200 mb-4">
|
<div class="collapse collapse-plus bg-base-200 mb-4">
|
||||||
<input type="checkbox" />
|
<input type="checkbox" />
|
||||||
<div class="collapse-title text-xl font-medium">
|
<div class="collapse-title text-xl font-medium">
|
||||||
|
|
@ -1185,122 +1133,180 @@ it would also work to just use on:click on the MapLibre component itself. -->
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
{:else}
|
{:else}
|
||||||
<p class="text-lg">{$t('adventures.upload_images_here')}</p>
|
<div class="modal-action items-center">
|
||||||
|
<div class="collapse collapse-plus bg-base-200 mb-4">
|
||||||
<div class="mb-4">
|
<input type="checkbox" />
|
||||||
<label for="image" class="block font-medium mb-2">
|
<div class="collapse-title text-xl font-medium">
|
||||||
{$t('adventures.image')}
|
{$t('adventures.attachments')} ({adventure.attachments?.length || 0})
|
||||||
</label>
|
</div>
|
||||||
<form class="flex flex-col items-start gap-2">
|
<div class="collapse-content">
|
||||||
<input
|
<div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
|
||||||
type="file"
|
{#each adventure.attachments as attachment}
|
||||||
name="image"
|
<AttachmentCard
|
||||||
class="file-input file-input-bordered w-full max-w-sm"
|
{attachment}
|
||||||
bind:this={fileInput}
|
on:delete={deleteAttachment}
|
||||||
accept="image/*"
|
allowEdit
|
||||||
id="image"
|
on:edit={(e) => (attachmentToEdit = e.detail)}
|
||||||
multiple
|
/>
|
||||||
on:change={handleMultipleFiles}
|
{/each}
|
||||||
/>
|
|
||||||
<input type="hidden" name="adventure" value={adventure.id} id="adventure" />
|
|
||||||
<!-- <button class="btn btn-neutral w-full max-w-sm" type="submit">
|
|
||||||
{$t('adventures.upload_image')}
|
|
||||||
</button> -->
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="mb-4">
|
|
||||||
<label for="url" class="block font-medium mb-2">
|
|
||||||
{$t('adventures.url')}
|
|
||||||
</label>
|
|
||||||
<div class="flex gap-2">
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
id="url"
|
|
||||||
name="url"
|
|
||||||
bind:value={url}
|
|
||||||
class="input input-bordered flex-1"
|
|
||||||
placeholder="Enter image URL"
|
|
||||||
/>
|
|
||||||
<button class="btn btn-neutral" type="button" on:click={fetchImage}>
|
|
||||||
{$t('adventures.fetch_image')}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="mb-4">
|
|
||||||
<label for="name" class="block font-medium mb-2">
|
|
||||||
{$t('adventures.wikipedia')}
|
|
||||||
</label>
|
|
||||||
<div class="flex gap-2">
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
id="name"
|
|
||||||
name="name"
|
|
||||||
bind:value={imageSearch}
|
|
||||||
class="input input-bordered flex-1"
|
|
||||||
placeholder="Search Wikipedia for images"
|
|
||||||
/>
|
|
||||||
<button class="btn btn-neutral" type="button" on:click={fetchWikiImage}>
|
|
||||||
{$t('adventures.fetch_image')}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
{#if wikiImageError}
|
|
||||||
<p class="text-red-500">{$t('adventures.wiki_image_error')}</p>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{#if immichIntegration}
|
|
||||||
<ImmichSelect
|
|
||||||
on:fetchImage={(e) => {
|
|
||||||
url = e.detail;
|
|
||||||
fetchImage();
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
<div class="divider"></div>
|
|
||||||
|
|
||||||
{#if images.length > 0}
|
|
||||||
<h1 class="font-semibold text-xl mb-4">{$t('adventures.my_images')}</h1>
|
|
||||||
<div class="flex flex-wrap gap-4">
|
|
||||||
{#each images as image}
|
|
||||||
<div class="relative h-32 w-32">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
class="absolute top-1 right-1 btn btn-error btn-xs z-10"
|
|
||||||
on:click={() => removeImage(image.id)}
|
|
||||||
>
|
|
||||||
✕
|
|
||||||
</button>
|
|
||||||
{#if !image.is_primary}
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
class="absolute top-1 left-1 btn btn-success btn-xs z-10"
|
|
||||||
on:click={() => makePrimaryImage(image.id)}
|
|
||||||
>
|
|
||||||
<Star class="h-4 w-4" />
|
|
||||||
</button>
|
|
||||||
{:else}
|
|
||||||
<!-- crown icon -->
|
|
||||||
|
|
||||||
<div class="absolute top-1 left-1 bg-warning text-white rounded-full p-1 z-10">
|
|
||||||
<Crown class="h-4 w-4" />
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
<img
|
|
||||||
src={image.image}
|
|
||||||
alt={image.id}
|
|
||||||
class="w-full h-full object-cover rounded-md shadow-md"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
{/each}
|
<div class="flex gap-2 m-4">
|
||||||
</div>
|
<input
|
||||||
{:else}
|
type="file"
|
||||||
<h1 class="font-semibold text-xl text-gray-500">{$t('adventures.no_images')}</h1>
|
id="fileInput"
|
||||||
{/if}
|
class="file-input file-input-bordered w-full max-w-xs"
|
||||||
|
accept="image/*,video/*,audio/*,application/pdf,.gpx"
|
||||||
|
on:change={handleFileChange}
|
||||||
|
/>
|
||||||
|
|
||||||
<div class="mt-6">
|
<input
|
||||||
|
type="text"
|
||||||
|
class="input input-bordered w-full"
|
||||||
|
placeholder={$t('adventures.attachment_name')}
|
||||||
|
bind:value={attachmentName}
|
||||||
|
/>
|
||||||
|
<button class="btn btn-neutral" on:click={uploadAttachment}>
|
||||||
|
{$t('adventures.upload')}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{#if attachmentToEdit}
|
||||||
|
<form
|
||||||
|
on:submit={(e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
editAttachment();
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div class="flex gap-2 m-4">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
class="input input-bordered w-full"
|
||||||
|
placeholder={$t('adventures.attachment_name')}
|
||||||
|
bind:value={attachmentToEdit.name}
|
||||||
|
/>
|
||||||
|
<button type="submit" class="btn btn-neutral">{$t('transportation.edit')}</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="collapse collapse-plus bg-base-200 mb-4">
|
||||||
|
<input type="checkbox" checked />
|
||||||
|
<div class="collapse-title text-xl font-medium">
|
||||||
|
{$t('adventures.images')} ({adventure.images?.length || 0})
|
||||||
|
</div>
|
||||||
|
<div class="collapse-content">
|
||||||
|
<label for="image" class="block font-medium mb-2">
|
||||||
|
{$t('adventures.image')}
|
||||||
|
</label>
|
||||||
|
<form class="flex flex-col items-start gap-2">
|
||||||
|
<input
|
||||||
|
type="file"
|
||||||
|
name="image"
|
||||||
|
class="file-input file-input-bordered w-full max-w-sm"
|
||||||
|
bind:this={fileInput}
|
||||||
|
accept="image/*"
|
||||||
|
id="image"
|
||||||
|
multiple
|
||||||
|
on:change={handleMultipleFiles}
|
||||||
|
/>
|
||||||
|
<input type="hidden" name="adventure" value={adventure.id} id="adventure" />
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<div class="mb-4">
|
||||||
|
<label for="url" class="block font-medium mb-2">
|
||||||
|
{$t('adventures.url')}
|
||||||
|
</label>
|
||||||
|
<div class="flex gap-2">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
id="url"
|
||||||
|
name="url"
|
||||||
|
bind:value={url}
|
||||||
|
class="input input-bordered flex-1"
|
||||||
|
placeholder="Enter image URL"
|
||||||
|
/>
|
||||||
|
<button class="btn btn-neutral" type="button" on:click={fetchImage}>
|
||||||
|
{$t('adventures.fetch_image')}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mb-4">
|
||||||
|
<label for="name" class="block font-medium mb-2">
|
||||||
|
{$t('adventures.wikipedia')}
|
||||||
|
</label>
|
||||||
|
<div class="flex gap-2">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
id="name"
|
||||||
|
name="name"
|
||||||
|
bind:value={imageSearch}
|
||||||
|
class="input input-bordered flex-1"
|
||||||
|
placeholder="Search Wikipedia for images"
|
||||||
|
/>
|
||||||
|
<button class="btn btn-neutral" type="button" on:click={fetchWikiImage}>
|
||||||
|
{$t('adventures.fetch_image')}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
{#if wikiImageError}
|
||||||
|
<p class="text-red-500">{$t('adventures.wiki_image_error')}</p>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{#if immichIntegration}
|
||||||
|
<ImmichSelect
|
||||||
|
on:fetchImage={(e) => {
|
||||||
|
url = e.detail;
|
||||||
|
fetchImage();
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<div class="divider"></div>
|
||||||
|
|
||||||
|
{#if images.length > 0}
|
||||||
|
<h1 class="font-semibold text-xl mb-4">{$t('adventures.my_images')}</h1>
|
||||||
|
<div class="flex flex-wrap gap-4">
|
||||||
|
{#each images as image}
|
||||||
|
<div class="relative h-32 w-32">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="absolute top-1 right-1 btn btn-error btn-xs z-10"
|
||||||
|
on:click={() => removeImage(image.id)}
|
||||||
|
>
|
||||||
|
✕
|
||||||
|
</button>
|
||||||
|
{#if !image.is_primary}
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="absolute top-1 left-1 btn btn-success btn-xs z-10"
|
||||||
|
on:click={() => makePrimaryImage(image.id)}
|
||||||
|
>
|
||||||
|
<Star class="h-4 w-4" />
|
||||||
|
</button>
|
||||||
|
{:else}
|
||||||
|
<!-- crown icon -->
|
||||||
|
|
||||||
|
<div class="absolute top-1 left-1 bg-warning text-white rounded-full p-1 z-10">
|
||||||
|
<Crown class="h-4 w-4" />
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
<img
|
||||||
|
src={image.image}
|
||||||
|
alt={image.id}
|
||||||
|
class="w-full h-full object-cover rounded-md shadow-md"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
{:else}
|
||||||
|
<h1 class="font-semibold text-xl text-gray-500">{$t('adventures.no_images')}</h1>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="mt-4">
|
||||||
<button type="button" class="btn btn-primary w-full max-w-sm" on:click={saveAndClose}>
|
<button type="button" class="btn btn-primary w-full max-w-sm" on:click={saveAndClose}>
|
||||||
{$t('about.close')}
|
{$t('about.close')}
|
||||||
</button>
|
</button>
|
||||||
|
|
|
||||||
|
|
@ -36,7 +36,6 @@
|
||||||
</p>
|
</p>
|
||||||
<li><button on:click={() => goto('/profile')}>{$t('navbar.profile')}</button></li>
|
<li><button on:click={() => goto('/profile')}>{$t('navbar.profile')}</button></li>
|
||||||
<li><button on:click={() => goto('/adventures')}>{$t('navbar.my_adventures')}</button></li>
|
<li><button on:click={() => goto('/adventures')}>{$t('navbar.my_adventures')}</button></li>
|
||||||
<li><button on:click={() => goto('/activities')}>{$t('navbar.my_tags')}</button></li>
|
|
||||||
<li><button on:click={() => goto('/shared')}>{$t('navbar.shared_with_me')}</button></li>
|
<li><button on:click={() => goto('/shared')}>{$t('navbar.shared_with_me')}</button></li>
|
||||||
<li><button on:click={() => goto('/settings')}>{$t('navbar.settings')}</button></li>
|
<li><button on:click={() => goto('/settings')}>{$t('navbar.settings')}</button></li>
|
||||||
<form method="post">
|
<form method="post">
|
||||||
|
|
|
||||||
|
|
@ -91,6 +91,9 @@ export const actions: Actions = {
|
||||||
body: formData
|
body: formData
|
||||||
});
|
});
|
||||||
let data = await res.json();
|
let data = await res.json();
|
||||||
|
|
||||||
|
console.log(res);
|
||||||
|
console.log(data);
|
||||||
return data;
|
return data;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -102,9 +102,11 @@
|
||||||
await getGpxFiles();
|
await getGpxFiles();
|
||||||
});
|
});
|
||||||
|
|
||||||
function saveEdit(event: CustomEvent<Adventure>) {
|
async function saveEdit(event: CustomEvent<Adventure>) {
|
||||||
adventure = event.detail;
|
adventure = event.detail;
|
||||||
isEditModalOpen = false;
|
isEditModalOpen = false;
|
||||||
|
geojson = null;
|
||||||
|
await getGpxFiles();
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue