mirror of
https://github.com/seanmorley15/AdventureLog.git
synced 2025-07-25 15:59:38 +02:00
Add delete confirmation modals for notes, checklists, and transportation
This commit is contained in:
Sean Morley
parent
7c68dc839a
commit
c3fddb1889
7 changed files with 92 additions and 544 deletions
|
|
@ -8,11 +8,14 @@
|
||||||
import Launch from '~icons/mdi/launch';
|
import Launch from '~icons/mdi/launch';
|
||||||
import TrashCan from '~icons/mdi/trash-can';
|
import TrashCan from '~icons/mdi/trash-can';
|
||||||
import Calendar from '~icons/mdi/calendar';
|
import Calendar from '~icons/mdi/calendar';
|
||||||
|
import DeleteWarning from './DeleteWarning.svelte';
|
||||||
|
|
||||||
export let checklist: Checklist;
|
export let checklist: Checklist;
|
||||||
export let user: User | null = null;
|
export let user: User | null = null;
|
||||||
export let collection: Collection | null = null;
|
export let collection: Collection | null = null;
|
||||||
|
|
||||||
|
let isWarningModalOpen: boolean = false;
|
||||||
|
|
||||||
function editChecklist() {
|
function editChecklist() {
|
||||||
dispatch('edit', checklist);
|
dispatch('edit', checklist);
|
||||||
}
|
}
|
||||||
|
|
@ -23,6 +26,7 @@
|
||||||
});
|
});
|
||||||
if (res.ok) {
|
if (res.ok) {
|
||||||
addToast('success', $t('checklist.checklist_deleted'));
|
addToast('success', $t('checklist.checklist_deleted'));
|
||||||
|
isWarningModalOpen = false;
|
||||||
dispatch('delete', checklist.id);
|
dispatch('delete', checklist.id);
|
||||||
} else {
|
} else {
|
||||||
addToast($t('checklist.checklist_delete_error'), 'error');
|
addToast($t('checklist.checklist_delete_error'), 'error');
|
||||||
|
|
@ -30,6 +34,17 @@
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
{#if isWarningModalOpen}
|
||||||
|
<DeleteWarning
|
||||||
|
title={$t('adventures.delete_checklist')}
|
||||||
|
button_text="Delete"
|
||||||
|
description={$t('adventures.checklist_delete_confirm')}
|
||||||
|
is_warning={false}
|
||||||
|
on:close={() => (isWarningModalOpen = false)}
|
||||||
|
on:confirm={deleteChecklist}
|
||||||
|
/>
|
||||||
|
{/if}
|
||||||
|
|
||||||
<div
|
<div
|
||||||
class="card w-full max-w-xs sm:max-w-sm md:max-w-md lg:max-w-md xl:max-w-md bg-neutral text-neutral-content shadow-xl overflow-hidden"
|
class="card w-full max-w-xs sm:max-w-sm md:max-w-md lg:max-w-md xl:max-w-md bg-neutral text-neutral-content shadow-xl overflow-hidden"
|
||||||
>
|
>
|
||||||
|
|
@ -61,7 +76,7 @@
|
||||||
id="delete_adventure"
|
id="delete_adventure"
|
||||||
data-umami-event="Delete Checklist"
|
data-umami-event="Delete Checklist"
|
||||||
class="btn btn-warning"
|
class="btn btn-warning"
|
||||||
on:click={deleteChecklist}><TrashCan class="w-6 h-6" /></button
|
on:click={() => (isWarningModalOpen = true)}><TrashCan class="w-6 h-6" /></button
|
||||||
>
|
>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,281 +0,0 @@
|
||||||
<script lang="ts">
|
|
||||||
export let transportationToEdit: Transportation;
|
|
||||||
import { createEventDispatcher } from 'svelte';
|
|
||||||
import type { Transportation } from '$lib/types';
|
|
||||||
const dispatch = createEventDispatcher();
|
|
||||||
import { onMount } from 'svelte';
|
|
||||||
import { addToast } from '$lib/toasts';
|
|
||||||
let modal: HTMLDialogElement;
|
|
||||||
import { t } from 'svelte-i18n';
|
|
||||||
|
|
||||||
console.log(transportationToEdit.id);
|
|
||||||
|
|
||||||
let originalName = transportationToEdit.name;
|
|
||||||
|
|
||||||
export let startDate: string | null = null;
|
|
||||||
export let endDate: string | null = null;
|
|
||||||
|
|
||||||
let fullStartDate: string = '';
|
|
||||||
let fullEndDate: string = '';
|
|
||||||
|
|
||||||
if (startDate && endDate) {
|
|
||||||
fullStartDate = `${startDate}T00:00`;
|
|
||||||
fullEndDate = `${endDate}T23:59`;
|
|
||||||
}
|
|
||||||
|
|
||||||
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';
|
|
||||||
|
|
||||||
onMount(async () => {
|
|
||||||
modal = document.getElementById('my_modal_1') as HTMLDialogElement;
|
|
||||||
if (modal) {
|
|
||||||
modal.showModal();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
if (transportationToEdit.date) {
|
|
||||||
transportationToEdit.date = transportationToEdit.date.slice(0, 19);
|
|
||||||
}
|
|
||||||
if (transportationToEdit.end_date) {
|
|
||||||
transportationToEdit.end_date = transportationToEdit.end_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);
|
|
||||||
// make sure end_date is not before start_date
|
|
||||||
if (
|
|
||||||
transportationToEdit.end_date &&
|
|
||||||
transportationToEdit.date &&
|
|
||||||
transportationToEdit.date > transportationToEdit.end_date
|
|
||||||
) {
|
|
||||||
addToast('error', $t('adventures.start_before_end_error'));
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
// make sure end_date has a start_date
|
|
||||||
if (transportationToEdit.end_date && !transportationToEdit.date) {
|
|
||||||
transportationToEdit.end_date = null;
|
|
||||||
formData.set('end_date', '');
|
|
||||||
}
|
|
||||||
|
|
||||||
const response = await fetch(`/api/transportations/${transportationToEdit.id}/`, {
|
|
||||||
method: 'PUT',
|
|
||||||
body: formData
|
|
||||||
});
|
|
||||||
|
|
||||||
if (response.ok) {
|
|
||||||
const result = await response.json();
|
|
||||||
|
|
||||||
transportationToEdit = result;
|
|
||||||
|
|
||||||
addToast('success', $t('transportation.transportation_edit_success'));
|
|
||||||
dispatch('saveEdit', transportationToEdit);
|
|
||||||
close();
|
|
||||||
} else {
|
|
||||||
addToast('error', $t('transportation.error_editing_transportation'));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<dialog id="my_modal_1" class="modal">
|
|
||||||
<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
|
|
||||||
<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
|
|
||||||
<div class="modal-box" role="dialog" on:keydown={handleKeydown} tabindex="0">
|
|
||||||
<h3 class="font-bold text-lg">{$t('transportation.edit_transportation')}: {originalName}</h3>
|
|
||||||
<div
|
|
||||||
class="modal-action items-center"
|
|
||||||
style="display: flex; flex-direction: column; align-items: center; width: 100%;"
|
|
||||||
>
|
|
||||||
<form method="post" style="width: 100%;" on:submit={handleSubmit}>
|
|
||||||
<div class="mb-2">
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
id="id"
|
|
||||||
name="id"
|
|
||||||
hidden
|
|
||||||
readonly
|
|
||||||
bind:value={transportationToEdit.id}
|
|
||||||
class="input input-bordered w-full max-w-xs mt-1"
|
|
||||||
/>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
id="is_public"
|
|
||||||
name="is_public"
|
|
||||||
hidden
|
|
||||||
readonly
|
|
||||||
bind:value={transportationToEdit.is_public}
|
|
||||||
class="input input-bordered w-full max-w-xs mt-1"
|
|
||||||
/>
|
|
||||||
<div class="mb-2">
|
|
||||||
<label for="type"
|
|
||||||
>{$t('transportation.type')} <PlaneCar class="inline-block mb-1 w-6 h-6" /></label
|
|
||||||
><br />
|
|
||||||
<select
|
|
||||||
class="select select-bordered w-full max-w-xs"
|
|
||||||
name="type"
|
|
||||||
id="type"
|
|
||||||
bind:value={transportationToEdit.type}
|
|
||||||
>
|
|
||||||
<option disabled selected>{$t('transportation.type')}</option>
|
|
||||||
<option value="car">{$t('transportation.modes.car')}</option>
|
|
||||||
<option value="plane">{$t('transportation.modes.plane')}</option>
|
|
||||||
<option value="train">{$t('transportation.modes.train')}</option>
|
|
||||||
<option value="bus">{$t('transportation.modes.bus')}</option>
|
|
||||||
<option value="boat">{$t('transportation.modes.boat')}</option>
|
|
||||||
<option value="bike">{$t('transportation.modes.bike')}</option>
|
|
||||||
<option value="walking">{$t('transportation.modes.walking')}</option>
|
|
||||||
<option value="other">{$t('transportation.modes.other')}</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<label for="name">{$t('adventures.name')}</label><br />
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
name="name"
|
|
||||||
id="name"
|
|
||||||
bind:value={transportationToEdit.name}
|
|
||||||
class="input input-bordered w-full max-w-xs mt-1"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="mb-2">
|
|
||||||
<label for="date"
|
|
||||||
>{$t('adventures.description')}
|
|
||||||
<Notebook class="inline-block -mt-1 mb-1 w-6 h-6" /></label
|
|
||||||
><br />
|
|
||||||
<div class="flex">
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
id="description"
|
|
||||||
name="description"
|
|
||||||
bind:value={transportationToEdit.description}
|
|
||||||
class="input input-bordered w-full max-w-xs mt-1 mb-2"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="mb-2">
|
|
||||||
<label for="start_date"
|
|
||||||
>{transportationToEdit.date ? `${$t('transportation.start')} ` : ''}{$t(
|
|
||||||
'transportation.date_and_time'
|
|
||||||
)}
|
|
||||||
<Calendar class="inline-block mb-1 w-6 h-6" /></label
|
|
||||||
><br />
|
|
||||||
<input
|
|
||||||
type="datetime-local"
|
|
||||||
id="date"
|
|
||||||
name="date"
|
|
||||||
min={fullStartDate || ''}
|
|
||||||
max={fullEndDate || ''}
|
|
||||||
bind:value={transportationToEdit.date}
|
|
||||||
class="input input-bordered w-full max-w-xs mt-1"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
{#if transportationToEdit.date}
|
|
||||||
<div class="mb-2">
|
|
||||||
<label for="end_date"
|
|
||||||
>{$t('transportation.end_date_time')}
|
|
||||||
<Calendar class="inline-block mb-1 w-6 h-6" /></label
|
|
||||||
><br />
|
|
||||||
<input
|
|
||||||
type="datetime-local"
|
|
||||||
id="end_date"
|
|
||||||
name="end_date"
|
|
||||||
min={fullStartDate || ''}
|
|
||||||
max={fullEndDate || ''}
|
|
||||||
bind:value={transportationToEdit.end_date}
|
|
||||||
class="input input-bordered w-full max-w-xs mt-1"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
<div class="mb-2">
|
|
||||||
<label for="rating"
|
|
||||||
>{$t('adventures.rating')} <Star class="inline-block mb-1 w-6 h-6" /></label
|
|
||||||
><br />
|
|
||||||
<input
|
|
||||||
type="number"
|
|
||||||
max="5"
|
|
||||||
min="0"
|
|
||||||
id="rating"
|
|
||||||
name="rating"
|
|
||||||
bind:value={transportationToEdit.rating}
|
|
||||||
class="input input-bordered w-full max-w-xs mt-1"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="mb-2">
|
|
||||||
<label for="rating"
|
|
||||||
>{$t('adventures.link')} <LinkVariant class="inline-block mb-1 w-6 h-6" /></label
|
|
||||||
><br />
|
|
||||||
<input
|
|
||||||
type="url"
|
|
||||||
id="link"
|
|
||||||
name="link"
|
|
||||||
bind:value={transportationToEdit.link}
|
|
||||||
class="input input-bordered w-full max-w-xs mt-1"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{#if transportationToEdit.type == 'plane'}
|
|
||||||
<div class="mb-2">
|
|
||||||
<label for="flight_number"
|
|
||||||
>{$t('transportation.flight_number')}
|
|
||||||
<Airplane class="inline-block mb-1 w-6 h-6" /></label
|
|
||||||
><br />
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
id="flight_number"
|
|
||||||
name="flight_number"
|
|
||||||
bind:value={transportationToEdit.flight_number}
|
|
||||||
class="input input-bordered w-full max-w-xs mt-1"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
<div class="mb-2">
|
|
||||||
<label for="rating"
|
|
||||||
>{$t('transportation.from_location')}
|
|
||||||
<MapMarker class="inline-block mb-1 w-6 h-6" /></label
|
|
||||||
><br />
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
id="from_location"
|
|
||||||
name="from_location"
|
|
||||||
bind:value={transportationToEdit.from_location}
|
|
||||||
class="input input-bordered w-full max-w-xs mt-1"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="mb-2">
|
|
||||||
<label for="rating"
|
|
||||||
>{$t('transportation.to_location')}
|
|
||||||
<MapMarker class="inline-block mb-1 w-6 h-6" /></label
|
|
||||||
><br />
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
id="to_location"
|
|
||||||
name="to_location"
|
|
||||||
bind:value={transportationToEdit.to_location}
|
|
||||||
class="input input-bordered w-full max-w-xs mt-1"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button type="submit" class="btn btn-primary mr-4 mt-4">{$t('transportation.edit')}</button>
|
|
||||||
<!-- if there is a button in form, it will close the modal -->
|
|
||||||
<button class="btn mt-4" on:click={close}>{$t('about.close')}</button>
|
|
||||||
</form>
|
|
||||||
<div class="flex items-center justify-center flex-wrap gap-4 mt-4"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</dialog>
|
|
||||||
|
|
@ -1,256 +0,0 @@
|
||||||
<script lang="ts">
|
|
||||||
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;
|
|
||||||
import { t } from 'svelte-i18n';
|
|
||||||
|
|
||||||
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';
|
|
||||||
|
|
||||||
export let startDate: string | null = null;
|
|
||||||
export let endDate: string | null = null;
|
|
||||||
|
|
||||||
let fullStartDate: string = '';
|
|
||||||
let fullEndDate: string = '';
|
|
||||||
|
|
||||||
if (startDate && endDate) {
|
|
||||||
fullStartDate = `${startDate}T00:00`;
|
|
||||||
fullEndDate = `${endDate}T23:59`;
|
|
||||||
}
|
|
||||||
|
|
||||||
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);
|
|
||||||
|
|
||||||
// make sure there is a start date if there is an end date
|
|
||||||
if (formData.get('end_date') && !formData.get('date')) {
|
|
||||||
addToast('error', $t('transportation.provide_start_date'));
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const response = await fetch(`/api/transportations/`, {
|
|
||||||
method: 'POST',
|
|
||||||
body: formData
|
|
||||||
});
|
|
||||||
|
|
||||||
if (response.ok) {
|
|
||||||
const result = await response.json();
|
|
||||||
|
|
||||||
addToast('success', $t('transportation.transportation_added'));
|
|
||||||
dispatch('add', result);
|
|
||||||
close();
|
|
||||||
} else {
|
|
||||||
addToast('error', $t('transportation.error_editing_transportation'));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<dialog id="my_modal_1" class="modal">
|
|
||||||
<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
|
|
||||||
<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
|
|
||||||
<div class="modal-box" role="dialog" on:keydown={handleKeydown} tabindex="0">
|
|
||||||
<h3 class="font-bold text-lg">{$t('transportation.new_transportation')}</h3>
|
|
||||||
<div
|
|
||||||
class="modal-action items-center"
|
|
||||||
style="display: flex; flex-direction: column; align-items: center; width: 100%;"
|
|
||||||
>
|
|
||||||
<form method="post" style="width: 100%;" on:submit={handleSubmit}>
|
|
||||||
<div class="mb-2">
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
id="collection"
|
|
||||||
name="collection"
|
|
||||||
hidden
|
|
||||||
readonly
|
|
||||||
bind:value={collection.id}
|
|
||||||
class="input input-bordered w-full max-w-xs mt-1"
|
|
||||||
/>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
id="is_public"
|
|
||||||
name="is_public"
|
|
||||||
hidden
|
|
||||||
readonly
|
|
||||||
bind:value={collection.is_public}
|
|
||||||
class="input input-bordered w-full max-w-xs mt-1"
|
|
||||||
/>
|
|
||||||
<div class="mb-2">
|
|
||||||
<label for="type"
|
|
||||||
>{$t('transportation.type')} <PlaneCar class="inline-block mb-1 w-6 h-6" /></label
|
|
||||||
><br />
|
|
||||||
<select
|
|
||||||
class="select select-bordered w-full max-w-xs"
|
|
||||||
name="type"
|
|
||||||
id="type"
|
|
||||||
bind:value={type}
|
|
||||||
>
|
|
||||||
<option disabled selected>{$t('transportation.type')}</option>
|
|
||||||
<option value="car">{$t('transportation.modes.car')}</option>
|
|
||||||
<option value="plane">{$t('transportation.modes.plane')}</option>
|
|
||||||
<option value="train">{$t('transportation.modes.train')}</option>
|
|
||||||
<option value="bus">{$t('transportation.modes.bus')}</option>
|
|
||||||
<option value="boat">{$t('transportation.modes.boat')}</option>
|
|
||||||
<option value="bike">{$t('transportation.modes.bike')}</option>
|
|
||||||
<option value="walking">{$t('transportation.modes.walking')}</option>
|
|
||||||
<option value="other">{$t('transportation.modes.other')}</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<label for="name">{$t('adventures.name')}</label><br />
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
name="name"
|
|
||||||
id="name"
|
|
||||||
class="input input-bordered w-full max-w-xs mt-1"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="mb-2">
|
|
||||||
<label for="date"
|
|
||||||
>{$t('adventures.description')}
|
|
||||||
<Notebook class="inline-block -mt-1 mb-1 w-6 h-6" /></label
|
|
||||||
><br />
|
|
||||||
<div class="flex">
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
id="description"
|
|
||||||
name="description"
|
|
||||||
class="input input-bordered w-full max-w-xs mt-1 mb-2"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="mb-2">
|
|
||||||
<label for="start_date"
|
|
||||||
>{$t('transportation.date_time')}
|
|
||||||
<Calendar class="inline-block mb-1 w-6 h-6" /></label
|
|
||||||
><br />
|
|
||||||
<input
|
|
||||||
type="datetime-local"
|
|
||||||
id="date"
|
|
||||||
name="date"
|
|
||||||
min={fullStartDate || ''}
|
|
||||||
max={fullEndDate || ''}
|
|
||||||
class="input input-bordered w-full max-w-xs mt-1"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="mb-2">
|
|
||||||
<label for="end_date"
|
|
||||||
>{$t('transportation.end_date_time')}
|
|
||||||
<Calendar class="inline-block mb-1 w-6 h-6" /></label
|
|
||||||
><br />
|
|
||||||
<input
|
|
||||||
type="datetime-local"
|
|
||||||
id="end_date"
|
|
||||||
name="end_date"
|
|
||||||
min={fullStartDate || ''}
|
|
||||||
max={fullEndDate || ''}
|
|
||||||
class="input input-bordered w-full max-w-xs mt-1"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="mb-2">
|
|
||||||
<label for="rating"
|
|
||||||
>{$t('adventures.rating')} <Star class="inline-block mb-1 w-6 h-6" /></label
|
|
||||||
><br />
|
|
||||||
<input
|
|
||||||
type="number"
|
|
||||||
max="5"
|
|
||||||
min="0"
|
|
||||||
id="rating"
|
|
||||||
name="rating"
|
|
||||||
class="input input-bordered w-full max-w-xs mt-1"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="mb-2">
|
|
||||||
<label for="rating"
|
|
||||||
>{$t('adventures.link')} <LinkVariant class="inline-block mb-1 w-6 h-6" /></label
|
|
||||||
><br />
|
|
||||||
<input
|
|
||||||
type="url"
|
|
||||||
id="link"
|
|
||||||
name="link"
|
|
||||||
class="input input-bordered w-full max-w-xs mt-1"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{#if type == 'plane'}
|
|
||||||
<div class="mb-2">
|
|
||||||
<label for="flight_number"
|
|
||||||
>{$t('transportation.flight_number')}
|
|
||||||
<Airplane class="inline-block mb-1 w-6 h-6" /></label
|
|
||||||
><br />
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
id="flight_number"
|
|
||||||
name="flight_number"
|
|
||||||
class="input input-bordered w-full max-w-xs mt-1"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
<div class="mb-2">
|
|
||||||
<label for="rating"
|
|
||||||
>{$t('transportation.from_location')}
|
|
||||||
<MapMarker class="inline-block mb-1 w-6 h-6" /></label
|
|
||||||
><br />
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
id="from_location"
|
|
||||||
name="from_location"
|
|
||||||
class="input input-bordered w-full max-w-xs mt-1"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="mb-2">
|
|
||||||
<label for="rating"
|
|
||||||
>{$t('transportation.to_location')}
|
|
||||||
<MapMarker class="inline-block mb-1 w-6 h-6" /></label
|
|
||||||
><br />
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
id="to_location"
|
|
||||||
name="to_location"
|
|
||||||
class="input input-bordered w-full max-w-xs mt-1"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button type="submit" class="btn btn-primary mr-4 mt-4">{$t('collection.create')}</button>
|
|
||||||
<!-- if there is a button in form, it will close the modal -->
|
|
||||||
<button class="btn mt-4" on:click={close}>{$t('about.close')}</button>
|
|
||||||
</form>
|
|
||||||
<div class="flex items-center justify-center flex-wrap gap-4 mt-4"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</dialog>
|
|
||||||
|
|
@ -8,11 +8,14 @@
|
||||||
import Launch from '~icons/mdi/launch';
|
import Launch from '~icons/mdi/launch';
|
||||||
import TrashCan from '~icons/mdi/trash-can';
|
import TrashCan from '~icons/mdi/trash-can';
|
||||||
import Calendar from '~icons/mdi/calendar';
|
import Calendar from '~icons/mdi/calendar';
|
||||||
|
import DeleteWarning from './DeleteWarning.svelte';
|
||||||
|
|
||||||
export let note: Note;
|
export let note: Note;
|
||||||
export let user: User | null = null;
|
export let user: User | null = null;
|
||||||
export let collection: Collection | null = null;
|
export let collection: Collection | null = null;
|
||||||
|
|
||||||
|
let isWarningModalOpen: boolean = false;
|
||||||
|
|
||||||
function editNote() {
|
function editNote() {
|
||||||
dispatch('edit', note);
|
dispatch('edit', note);
|
||||||
}
|
}
|
||||||
|
|
@ -23,6 +26,7 @@
|
||||||
});
|
});
|
||||||
if (res.ok) {
|
if (res.ok) {
|
||||||
addToast('success', $t('notes.note_deleted'));
|
addToast('success', $t('notes.note_deleted'));
|
||||||
|
isWarningModalOpen = false;
|
||||||
dispatch('delete', note.id);
|
dispatch('delete', note.id);
|
||||||
} else {
|
} else {
|
||||||
addToast($t('notes.note_delete_error'), 'error');
|
addToast($t('notes.note_delete_error'), 'error');
|
||||||
|
|
@ -30,6 +34,17 @@
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
{#if isWarningModalOpen}
|
||||||
|
<DeleteWarning
|
||||||
|
title={$t('adventures.delete_note')}
|
||||||
|
button_text="Delete"
|
||||||
|
description={$t('adventures.note_delete_confirm')}
|
||||||
|
is_warning={false}
|
||||||
|
on:close={() => (isWarningModalOpen = false)}
|
||||||
|
on:confirm={deleteNote}
|
||||||
|
/>
|
||||||
|
{/if}
|
||||||
|
|
||||||
<div
|
<div
|
||||||
class="card w-full max-w-xs sm:max-w-sm md:max-w-md lg:max-w-md xl:max-w-md overflow-hidden bg-neutral text-neutral-content shadow-xl"
|
class="card w-full max-w-xs sm:max-w-sm md:max-w-md lg:max-w-md xl:max-w-md overflow-hidden bg-neutral text-neutral-content shadow-xl"
|
||||||
>
|
>
|
||||||
|
|
@ -64,7 +79,7 @@
|
||||||
id="delete_adventure"
|
id="delete_adventure"
|
||||||
data-umami-event="Delete Adventure"
|
data-umami-event="Delete Adventure"
|
||||||
class="btn btn-warning"
|
class="btn btn-warning"
|
||||||
on:click={deleteNote}><TrashCan class="w-6 h-6" /></button
|
on:click={() => (isWarningModalOpen = true)}><TrashCan class="w-6 h-6" /></button
|
||||||
>
|
>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -5,6 +5,7 @@
|
||||||
import type { Collection, Transportation, User } from '$lib/types';
|
import type { Collection, Transportation, User } from '$lib/types';
|
||||||
import { addToast } from '$lib/toasts';
|
import { addToast } from '$lib/toasts';
|
||||||
import { t } from 'svelte-i18n';
|
import { t } from 'svelte-i18n';
|
||||||
|
import DeleteWarning from './DeleteWarning.svelte';
|
||||||
// import ArrowDownThick from '~icons/mdi/arrow-down-thick';
|
// import ArrowDownThick from '~icons/mdi/arrow-down-thick';
|
||||||
|
|
||||||
const dispatch = createEventDispatcher();
|
const dispatch = createEventDispatcher();
|
||||||
|
|
@ -13,6 +14,8 @@
|
||||||
export let user: User | null = null;
|
export let user: User | null = null;
|
||||||
export let collection: Collection | null = null;
|
export let collection: Collection | null = null;
|
||||||
|
|
||||||
|
let isWarningModalOpen: boolean = false;
|
||||||
|
|
||||||
function editTransportation() {
|
function editTransportation() {
|
||||||
dispatch('edit', transportation);
|
dispatch('edit', transportation);
|
||||||
}
|
}
|
||||||
|
|
@ -28,11 +31,23 @@
|
||||||
console.log($t('transportation.transportation_delete_error'));
|
console.log($t('transportation.transportation_delete_error'));
|
||||||
} else {
|
} else {
|
||||||
addToast('info', $t('transportation.transportation_deleted'));
|
addToast('info', $t('transportation.transportation_deleted'));
|
||||||
|
isWarningModalOpen = false;
|
||||||
dispatch('delete', transportation.id);
|
dispatch('delete', transportation.id);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
{#if isWarningModalOpen}
|
||||||
|
<DeleteWarning
|
||||||
|
title={$t('adventures.delete_transportation')}
|
||||||
|
button_text="Delete"
|
||||||
|
description={$t('adventures.transportation_delete_confirm')}
|
||||||
|
is_warning={false}
|
||||||
|
on:close={() => (isWarningModalOpen = false)}
|
||||||
|
on:confirm={deleteTransportation}
|
||||||
|
/>
|
||||||
|
{/if}
|
||||||
|
|
||||||
<div
|
<div
|
||||||
class="card w-full max-w-xs sm:max-w-sm md:max-w-md lg:max-w-md xl:max-w-md bg-neutral text-neutral-content shadow-xl"
|
class="card w-full max-w-xs sm:max-w-sm md:max-w-md lg:max-w-md xl:max-w-md bg-neutral text-neutral-content shadow-xl"
|
||||||
>
|
>
|
||||||
|
|
@ -91,7 +106,7 @@
|
||||||
<span>{$t('transportation.edit')}</span>
|
<span>{$t('transportation.edit')}</span>
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
on:click={deleteTransportation}
|
on:click={() => (isWarningModalOpen = true)}
|
||||||
class="btn btn-secondary btn-sm flex items-center gap-1"
|
class="btn btn-secondary btn-sm flex items-center gap-1"
|
||||||
title="Delete"
|
title="Delete"
|
||||||
>
|
>
|
||||||
|
|
|
||||||
|
|
@ -14,6 +14,8 @@
|
||||||
export let collection: Collection;
|
export let collection: Collection;
|
||||||
export let transportationToEdit: Transportation | null = null;
|
export let transportationToEdit: Transportation | null = null;
|
||||||
|
|
||||||
|
let constrainDates: boolean = false;
|
||||||
|
|
||||||
function toLocalDatetime(value: string | null): string {
|
function toLocalDatetime(value: string | null): string {
|
||||||
if (!value) return '';
|
if (!value) return '';
|
||||||
const date = new Date(value);
|
const date = new Date(value);
|
||||||
|
|
@ -163,6 +165,24 @@
|
||||||
Math.round(transportation.destination_longitude * 1e6) / 1e6;
|
Math.round(transportation.destination_longitude * 1e6) / 1e6;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (transportation.end_date && !transportation.date) {
|
||||||
|
transportation.date = null;
|
||||||
|
transportation.end_date = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (transportation.date && !transportation.end_date) {
|
||||||
|
transportation.end_date = transportation.date;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (
|
||||||
|
transportation.date &&
|
||||||
|
transportation.end_date &&
|
||||||
|
transportation.date > transportation.end_date
|
||||||
|
) {
|
||||||
|
addToast('error', $t('adventures.start_before_end_error'));
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
if (transportation.id === '') {
|
if (transportation.id === '') {
|
||||||
let res = await fetch('/api/transportations', {
|
let res = await fetch('/api/transportations', {
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
|
|
@ -351,14 +371,28 @@
|
||||||
<label for="date">
|
<label for="date">
|
||||||
{$t('adventures.start_date')}
|
{$t('adventures.start_date')}
|
||||||
</label>
|
</label>
|
||||||
|
|
||||||
|
{#if collection && collection.start_date && collection.end_date}<label
|
||||||
|
class="label cursor-pointer flex items-start space-x-2"
|
||||||
|
>
|
||||||
|
<span class="label-text">{$t('adventures.date_constrain')}</span>
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
class="toggle toggle-primary"
|
||||||
|
id="constrain_dates"
|
||||||
|
name="constrain_dates"
|
||||||
|
on:change={() => (constrainDates = !constrainDates)}
|
||||||
|
/></label
|
||||||
|
>
|
||||||
|
{/if}
|
||||||
<div>
|
<div>
|
||||||
<input
|
<input
|
||||||
type="datetime-local"
|
type="datetime-local"
|
||||||
id="date"
|
id="date"
|
||||||
name="date"
|
name="date"
|
||||||
bind:value={transportation.date}
|
bind:value={transportation.date}
|
||||||
min={fullStartDate || ''}
|
min={constrainDates ? fullStartDate : ''}
|
||||||
max={fullEndDate || ''}
|
max={constrainDates ? fullEndDate : ''}
|
||||||
class="input input-bordered w-full max-w-xs mt-1"
|
class="input input-bordered w-full max-w-xs mt-1"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -374,8 +408,8 @@
|
||||||
type="datetime-local"
|
type="datetime-local"
|
||||||
id="end_date"
|
id="end_date"
|
||||||
name="end_date"
|
name="end_date"
|
||||||
min={fullStartDate || ''}
|
min={constrainDates ? transportation.date : ''}
|
||||||
max={fullEndDate || ''}
|
max={constrainDates ? fullEndDate : ''}
|
||||||
bind:value={transportation.end_date}
|
bind:value={transportation.end_date}
|
||||||
class="input input-bordered w-full max-w-xs mt-1"
|
class="input input-bordered w-full max-w-xs mt-1"
|
||||||
/>
|
/>
|
||||||
|
|
|
||||||
|
|
@ -64,6 +64,12 @@
|
||||||
"no_image_found": "No image found",
|
"no_image_found": "No image found",
|
||||||
"collection_link_error": "Error linking adventure to collection",
|
"collection_link_error": "Error linking adventure to collection",
|
||||||
"adventure_delete_confirm": "Are you sure you want to delete this adventure? This action cannot be undone.",
|
"adventure_delete_confirm": "Are you sure you want to delete this adventure? This action cannot be undone.",
|
||||||
|
"checklist_delete_confirm": "Are you sure you want to delete this checklist? This action cannot be undone.",
|
||||||
|
"note_delete_confirm": "Are you sure you want to delete this note? This action cannot be undone.",
|
||||||
|
"transportation_delete_confirm": "Are you sure you want to delete this transportation? This action cannot be undone.",
|
||||||
|
"delete_checklist": "Delete Checklist",
|
||||||
|
"delete_note": "Delete Note",
|
||||||
|
"delete_transportation": "Delete Transportation",
|
||||||
"open_details": "Open Details",
|
"open_details": "Open Details",
|
||||||
"edit_adventure": "Edit Adventure",
|
"edit_adventure": "Edit Adventure",
|
||||||
"remove_from_collection": "Remove from Collection",
|
"remove_from_collection": "Remove from Collection",
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue