Docker/AdventureLog
Docker/AdventureLog
1
0
Fork 0
mirror of https://github.com/seanmorley15/AdventureLog.git synced 2025-07-22 14:29:36 +02:00
Code Issues Releases Activity

Edit modal

Browse source
This commit is contained in:
Sean Morley 2024-08-17 13:30:00 -04:00
parent 0479026b11
commit 9c75af5b7f
2 changed files with 87 additions and 71 deletions
Download patch file Download diff file Expand all files Collapse all files

18
backend/server/adventures/views.py
View file

@ -534,7 +534,7 @@ class ChecklistViewSet(viewsets.ModelViewSet):
class AdventureImageViewSet(viewsets.ModelViewSet): class AdventureImageViewSet(viewsets.ModelViewSet):
serializer_class = AdventureImageSerializer serializer_class = AdventureImageSerializer
permission_classes = [IsAuthenticated]\ permission_classes = [IsAuthenticated]
# make sure that when creating and updating an image, the user is authenticated and the adventure user is the same as the authenticated user # make sure that when creating and updating an image, the user is authenticated and the adventure user is the same as the authenticated user
def create(self, request, *args, **kwargs): def create(self, request, *args, **kwargs):
@ -566,16 +566,16 @@ class AdventureImageViewSet(viewsets.ModelViewSet):
return super().update(request, *args, **kwargs) return super().update(request, *args, **kwargs)
def destroy(self, request, *args, **kwargs): # def destroy(self, request, *args, **kwargs):
if not request.user.is_authenticated: # if not request.user.is_authenticated:
return Response({"error": "User is not authenticated"}, status=status.HTTP_401_UNAUTHORIZED) # return Response({"error": "User is not authenticated"}, status=status.HTTP_401_UNAUTHORIZED)
instance = self.get_object() # instance = self.get_object()
adventure = instance.adventure # adventure = instance.adventure
if adventure.user_id != request.user: # if adventure.user_id != request.user:
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().destroy(request, *args, **kwargs) # return super().destroy(request, *args, **kwargs)
def partial_update(self, request, *args, **kwargs): def partial_update(self, request, *args, **kwargs):
if not request.user.is_authenticated: if not request.user.is_authenticated:

136
frontend/src/lib/components/EditAdventure.svelte
View file

@ -5,8 +5,6 @@
import { enhance } from '$app/forms'; import { enhance } from '$app/forms';
import { addToast } from '$lib/toasts'; import { addToast } from '$lib/toasts';
export let type: string = 'visited';
export let longitude: number | null = null; export let longitude: number | null = null;
export let latitude: number | null = null; export let latitude: number | null = null;
@ -19,6 +17,7 @@
import Earth from '~icons/mdi/earth'; import Earth from '~icons/mdi/earth';
import ActivityComplete from './ActivityComplete.svelte'; import ActivityComplete from './ActivityComplete.svelte';
import { appVersion } from '$lib/config'; import { appVersion } from '$lib/config';
import NewAdventure from './NewAdventure.svelte';
export let startDate: string | null = null; export let startDate: string | null = null;
export let endDate: string | null = null; export let endDate: string | null = null;
@ -39,6 +38,19 @@
} }
} }
async function removeImage(id: string) {
let res = await fetch(`/api/images/${id}/`, {
method: 'DELETE'
});
let data = await res.json();
if (data.id) {
images = images.filter((image) => image.id !== id);
addToast('success', 'Image removed');
} else {
addToast('error', 'Failed to remove image');
}
}
let isDetails: boolean = true; let isDetails: boolean = true;
function saveAndClose() { function saveAndClose() {
@ -172,7 +184,7 @@
<!-- svelte-ignore a11y-no-noninteractive-tabindex --> <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
<!-- svelte-ignore a11y-no-noninteractive-element-interactions --> <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
<div class="modal-box w-11/12 max-w-6xl" role="dialog" on:keydown={handleKeydown} tabindex="0"> <div class="modal-box w-11/12 max-w-6xl" role="dialog" on:keydown={handleKeydown} tabindex="0">
<h3 class="font-bold text-lg">Edit {type} Adventure</h3> <h3 class="font-bold text-lg">Edit {adventureToEdit.type} Adventure</h3>
{#if adventureToEdit.id === '' || isDetails} {#if adventureToEdit.id === '' || isDetails}
<div class="modal-action items-center"> <div class="modal-action items-center">
<form method="post" style="width: 100%;" on:submit={handleSubmit}> <form method="post" style="width: 100%;" on:submit={handleSubmit}>
@ -190,38 +202,33 @@
required required
/> />
</div> </div>
<div class="join">
<input
class="join-item btn btn-neutral"
type="radio"
name="type"
id="visited"
value="visited"
aria-label="Visited"
checked={adventureToEdit.type === 'visited'}
on:click={() => (type = 'visited')}
/>
<input
class="join-item btn btn-neutral"
type="radio"
name="type"
id="planned"
value="planned"
aria-label="Planned"
checked={adventureToEdit.type === 'planned'}
on:click={() => (type = 'planned')}
/>
</div>
<div> <div>
<label for="location">Location</label><br /> <div class="form-control">
<label class="label cursor-pointer">
<span class="label-text">Visited</span>
<input <input
type="text" type="radio"
id="location" name="radio-10"
name="location" class="radio checked:bg-red-500"
bind:value={adventureToEdit.location} on:click={() => (adventureToEdit.type = 'visited')}
class="input input-bordered w-full" checked={adventureToEdit.type == 'visited'}
/> />
</label>
</div> </div>
<div class="form-control">
<label class="label cursor-pointer">
<span class="label-text">Planned</span>
<input
type="radio"
name="radio-10"
class="radio checked:bg-blue-500"
on:click={() => (adventureToEdit.type = 'planned')}
checked={adventureToEdit.type == 'planned'}
/>
</label>
</div>
</div>
<div> <div>
<label for="date">Date</label><br /> <label for="date">Date</label><br />
<input <input
@ -234,6 +241,19 @@
class="input input-bordered w-full" class="input input-bordered w-full"
/> />
</div> </div>
<div>
<!-- link -->
<div>
<label for="link">Link</label><br />
<input
type="text"
id="link"
name="link"
bind:value={adventureToEdit.link}
class="input input-bordered w-full"
/>
</div>
</div>
<div> <div>
<label for="description">Description</label><br /> <label for="description">Description</label><br />
<textarea <textarea
@ -322,35 +342,6 @@
{/if} {/if}
</div> </div>
</div> </div>
<div>
<!-- link -->
<div>
<label for="link">Link</label><br />
<input
type="text"
id="link"
name="link"
bind:value={adventureToEdit.link}
class="input input-bordered w-full"
/>
</div>
</div>
<div>
<div>
<div>
<label for="is_public"
>Public <Earth class="inline-block -mt-1 mb-1 w-6 h-6" /></label
><br />
<input
type="checkbox"
class="toggle toggle-primary"
id="is_public"
name="is_public"
bind:checked={adventureToEdit.is_public}
/>
</div>
</div>
</div>
</div> </div>
<div class="divider"></div> <div class="divider"></div>
<h2 class="text-2xl font-semibold mb-2 mt-4">Location Information</h2> <h2 class="text-2xl font-semibold mb-2 mt-4">Location Information</h2>
@ -425,6 +416,23 @@ it would also work to just use on:click on the MapLibre component itself. -->
</MapLibre> </MapLibre>
</div> </div>
<div>
<div>
<div>
<label for="is_public"
>Public <Earth class="inline-block -mt-1 mb-1 w-6 h-6" /></label
><br />
<input
type="checkbox"
class="toggle toggle-primary"
id="is_public"
name="is_public"
bind:checked={adventureToEdit.is_public}
/>
</div>
</div>
</div>
<div class="mt-4"> <div class="mt-4">
<button type="submit" class="btn btn-primary">Save & Next</button> <button type="submit" class="btn btn-primary">Save & Next</button>
<button type="button" class="btn" on:click={close}>Close</button> <button type="button" class="btn" on:click={close}>Close</button>
@ -478,6 +486,14 @@ it would also work to just use on:click on the MapLibre component itself. -->
</div> </div>
<div class=" inline-flex gap-2"> <div class=" inline-flex gap-2">
{#each images as image} {#each images as image}
<!-- remove button -->
<button
type="button"
class="btn btn-error"
on:click={() => {
removeImage(image.id);
}}
/>
<img src={image.image} alt={image.id} class="w-32 h-32" /> <img src={image.image} alt={image.id} class="w-32 h-32" />
{/each} {/each}
</div> </div>