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

Add i18n support for transportation, notes, checklist, and collection components

Browse source
This commit is contained in:
Sean Morley 2024-11-03 22:55:38 -05:00
parent c0aaec1436
commit 3df124b250
11 changed files with 305 additions and 213 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -6,6 +6,7 @@
import { onMount } from 'svelte';
import { addToast } from '$lib/toasts';
let modal: HTMLDialogElement;
import { t } from 'svelte-i18n';
console.log(transportationToEdit.id);
@ -64,7 +65,7 @@
transportationToEdit.date &&
transportationToEdit.date > transportationToEdit.end_date
) {
addToast('error', 'End date cannot be before start date');
addToast('error', $t('adventures.start_before_end_error'));
return;
}
// make sure end_date has a start_date
@ -83,11 +84,11 @@
transportationToEdit = result;
addToast('success', 'Transportation edited successfully!');
addToast('success', $t('transportation.transportation_edit_success'));
dispatch('saveEdit', transportationToEdit);
close();
} else {
addToast('error', 'Error editing transportaion');
addToast('error', $t('transportation.error_editing_transportation'));
}
}
</script>
@ -96,7 +97,7 @@
<!-- 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">Edit Transportation: {originalName}</h3>
<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%;"
@ -122,26 +123,28 @@
class="input input-bordered w-full max-w-xs mt-1"
/>
<div class="mb-2">
<label for="type">Type <PlaneCar class="inline-block mb-1 w-6 h-6" /></label><br />
<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>Transport Type</option>
<option value="car">Car</option>
<option value="plane">Plane</option>
<option value="train">Train</option>
<option value="bus">Bus</option>
<option value="boat">Boat</option>
<option value="bike">Bike</option>
<option value="walking">Walking</option>
<option value="other">Other</option>
<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">Name</label><br />
<label for="name">{$t('adventures.name')}</label><br />
<input
type="text"
name="name"
@ -151,7 +154,9 @@
/>
</div>
<div class="mb-2">
<label for="date">Description <Notebook class="inline-block -mt-1 mb-1 w-6 h-6" /></label
<label for="date"
>{$t('adventures.description')}
<Notebook class="inline-block -mt-1 mb-1 w-6 h-6" /></label
><br />
<div class="flex">
<input
@ -164,9 +169,10 @@
</div>
<div class="mb-2">
<label for="start_date"
>{transportationToEdit.date ? 'Start ' : ''}Date & Time <Calendar
class="inline-block mb-1 w-6 h-6"
/></label
>{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"
@ -181,7 +187,8 @@
{#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
>{$t('transportation.end_date_time')}
<Calendar class="inline-block mb-1 w-6 h-6" /></label
><br />
<input
type="datetime-local"
@ -195,7 +202,9 @@
</div>
{/if}
<div class="mb-2">
<label for="rating">Rating <Star class="inline-block mb-1 w-6 h-6" /></label><br />
<label for="rating"
>{$t('adventures.rating')} <Star class="inline-block mb-1 w-6 h-6" /></label
><br />
<input
type="number"
max="5"
@ -207,7 +216,9 @@
/>
</div>
<div class="mb-2">
<label for="rating">Link <LinkVariant class="inline-block mb-1 w-6 h-6" /></label><br />
<label for="rating"
>{$t('adventures.link')} <LinkVariant class="inline-block mb-1 w-6 h-6" /></label
><br />
<input
type="url"
id="link"
@ -220,7 +231,8 @@
{#if transportationToEdit.type == 'plane'}
<div class="mb-2">
<label for="flight_number"
>Flight Number <Airplane class="inline-block mb-1 w-6 h-6" /></label
>{$t('transportation.flight_number')}
<Airplane class="inline-block mb-1 w-6 h-6" /></label
><br />
<input
type="text"
@ -232,7 +244,9 @@
</div>
{/if}
<div class="mb-2">
<label for="rating">From Location <MapMarker class="inline-block mb-1 w-6 h-6" /></label
<label for="rating"
>{$t('transportation.from_location')}
<MapMarker class="inline-block mb-1 w-6 h-6" /></label
><br />
<input
type="text"
@ -243,7 +257,9 @@
/>
</div>
<div class="mb-2">
<label for="rating">To Location <MapMarker class="inline-block mb-1 w-6 h-6" /></label
<label for="rating"
>{$t('transportation.to_location')}
<MapMarker class="inline-block mb-1 w-6 h-6" /></label
><br />
<input
type="text"
@ -255,9 +271,9 @@
</div>
</div>
<button type="submit" class="btn btn-primary mr-4 mt-4">Edit</button>
<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}>Close</button>
<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>