Docker/AdventureLog
Docker/AdventureLog
1
0
Fork 0
mirror of https://github.com/seanmorley15/AdventureLog.git synced 2025-07-24 23:39:37 +02:00
Code Issues Releases Activity

Transportation changes

Browse source
This commit is contained in:
Sean Morley 2024-08-19 16:32:08 -04:00
parent 2d4d98393c
commit dd8999a45f
9 changed files with 150 additions and 52 deletions
Download patch file Download diff file Expand all files Collapse all files

28
frontend/src/lib/components/AdventureModal.svelte
View file

@ -383,7 +383,7 @@
</div>
<div>
<label for="date">Date (or start date)</label><br />
<label for="date">{adventure.date ? 'Start Date' : 'Date'}</label><br />
<input
type="date"
id="date"
@ -394,18 +394,20 @@
class="input input-bordered w-full"
/>
</div>
<div>
<label for="end_date">End Date</label><br />
<input
type="date"
id="end_date"
name="end_date"
min={startDate || ''}
max={endDate || ''}
bind:value={adventure.end_date}
class="input input-bordered w-full"
/>
</div>
{#if adventure.date}
<div>
<label for="end_date">End Date</label><br />
<input
type="date"
id="end_date"
name="end_date"
min={startDate || ''}
max={endDate || ''}
bind:value={adventure.end_date}
class="input input-bordered w-full"
/>
</div>
{/if}
<div>
<!-- link -->
<div>

37
frontend/src/lib/components/EditTransportation.svelte
View file

@ -40,6 +40,9 @@
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');
@ -53,6 +56,20 @@
async function handleSubmit(event: Event) {
event.preventDefault();
// make sure end_date is not before start_date
if (
transportationToEdit.end_date &&
transportationToEdit.date &&
transportationToEdit.date > transportationToEdit.end_date
) {
addToast('error', 'End date cannot be before start date');
return;
}
// make sure end_date has a start_date
if (transportationToEdit.end_date && !transportationToEdit.date) {
addToast('error', 'Please provide a start date');
return;
}
const form = event.target as HTMLFormElement;
const formData = new FormData(form);
@ -147,7 +164,9 @@
</div>
<div class="mb-2">
<label for="start_date"
>Date & Time <Calendar class="inline-block mb-1 w-6 h-6" /></label
>{transportationToEdit.date ? 'Start' : ''}Date & Time <Calendar
class="inline-block mb-1 w-6 h-6"
/></label
><br />
<input
type="datetime-local"
@ -159,6 +178,22 @@
class="input input-bordered w-full max-w-xs mt-1"
/>
</div>
{#if transportationToEdit.date}
<div class="mb-2">
<label for="end_date"
>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">Rating <Star class="inline-block mb-1 w-6 h-6" /></label><br />
<input

23
frontend/src/lib/components/NewTransportation.svelte
View file

@ -72,6 +72,12 @@
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', 'Please provide a start date');
return;
}
const response = await fetch(`/api/transportations/`, {
method: 'POST',
body: formData
@ -168,7 +174,7 @@
</div>
<div class="mb-2">
<label for="start_date"
>Date & Time <Calendar class="inline-block mb-1 w-6 h-6" /></label
>Start Date & Time <Calendar class="inline-block mb-1 w-6 h-6" /></label
><br />
<input
type="datetime-local"
@ -179,6 +185,21 @@
class="input input-bordered w-full max-w-xs mt-1"
/>
</div>
<div class="mb-2">
<label for="end_date"
>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">Rating <Star class="inline-block mb-1 w-6 h-6" /></label><br />
<input

30
frontend/src/lib/components/TransportationCard.svelte
View file

@ -11,6 +11,7 @@
import { addToast } from '$lib/toasts';
import Plus from '~icons/mdi/plus';
import ArrowDownThick from '~icons/mdi/arrow-down-thick';
const dispatch = createEventDispatcher();
@ -39,19 +40,30 @@
</script>
<div
class="card min-w-max lg:w-96 md:w-80 sm:w-60 xs:w-40 bg-primary-content shadow-xl overflow-hidden text-base-content"
class="card w-full max-w-xs sm:max-w-sm md:max-w-md lg:max-w-md xl:max-w-md bg-primary-content shadow-xl text-base-content"
>
<div class="card-body">
<h2 class="card-title overflow-ellipsis">{transportation.name}</h2>
<div class="badge badge-secondary">{transportation.type}</div>
{#if transportation.from_location && transportation.to_location}
<p class="text-sm">
{transportation.from_location} to {transportation.to_location}
</p>
{/if}
{#if transportation.date}
{new Date(transportation.date).toLocaleString(undefined, { timeZone: 'UTC' })}
{/if}
<div>
{#if transportation.from_location}
<p class="break-words text-wrap">{transportation.from_location}</p>
{/if}
{#if transportation.to_location}
<ArrowDownThick class="w-6 h-6" />
<p class="break-words text-wrap">{transportation.to_location}</p>
{/if}
</div>
<div>
{#if transportation.date}
<p>{new Date(transportation.date).toLocaleString(undefined, { timeZone: 'UTC' })}</p>
{/if}
{#if transportation.end_date}
<ArrowDownThick class="w-6 h-6" />
<p>{new Date(transportation.end_date).toLocaleString(undefined, { timeZone: 'UTC' })}</p>
{/if}
</div>
{#if user?.pk === transportation.user_id}
<div class="card-actions justify-end">
<button on:click={deleteTransportation} class="btn btn-secondary"