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

feat: Add hotel management functionality with serializer and UI integration

Browse source
This commit is contained in:
Sean Morley 2025-02-05 19:38:04 -05:00
parent 271cba9abc
commit d1f50dfa17
8 changed files with 425 additions and 541 deletions
Download patch file Download diff file Expand all files Collapse all files

27
backend/server/adventures/serializers.py
View file

@ -203,6 +203,17 @@ class TransportationSerializer(CustomModelSerializer):
]
read_only_fields = ['id', 'created_at', 'updated_at', 'user_id']
class HotelSerializer(CustomModelSerializer):
class Meta:
model = Hotel
fields = [
'id', 'user_id', 'name', 'description', 'rating', 'link', 'check_in', 'check_out',
'reservation_number', 'price', 'latitude', 'longitude', 'location', 'is_public',
'collection', 'created_at', 'updated_at'
]
read_only_fields = ['id', 'created_at', 'updated_at', 'user_id']
class NoteSerializer(CustomModelSerializer):
class Meta:
@ -289,10 +300,11 @@ class CollectionSerializer(CustomModelSerializer):
transportations = TransportationSerializer(many=True, read_only=True, source='transportation_set')
notes = NoteSerializer(many=True, read_only=True, source='note_set')
checklists = ChecklistSerializer(many=True, read_only=True, source='checklist_set')
hotels = HotelSerializer(many=True, read_only=True, source='hotel_set')
class Meta:
model = Collection
fields = ['id', 'description', 'user_id', 'name', 'is_public', 'adventures', 'created_at', 'start_date', 'end_date', 'transportations', 'notes', 'updated_at', 'checklists', 'is_archived', 'shared_with', 'link']
fields = ['id', 'description', 'user_id', 'name', 'is_public', 'adventures', 'created_at', 'start_date', 'end_date', 'transportations', 'notes', 'updated_at', 'checklists', 'is_archived', 'shared_with', 'link', 'hotels']
read_only_fields = ['id', 'created_at', 'updated_at', 'user_id']
def to_representation(self, instance):
@ -302,15 +314,4 @@ class CollectionSerializer(CustomModelSerializer):
for user in instance.shared_with.all():
shared_uuids.append(str(user.uuid))
representation['shared_with'] = shared_uuids
return representation
class HotelSerializer(CustomModelSerializer):
class Meta:
model = Hotel
fields = [
'id', 'user_id', 'name', 'description', 'rating', 'link', 'check_in', 'check_out',
'reservation_number', 'price', 'latitude', 'longitude', 'location', 'is_public',
'collection', 'created_at', 'updated_at'
]
read_only_fields = ['id', 'created_at', 'updated_at', 'user_id']
return representation

30
backend/server/worldtravel/management/commands/download-countries.py
View file

@ -45,8 +45,9 @@ class Command(BaseCommand):
force = options['force']
batch_size = 100
current_version_json = os.path.join(settings.MEDIA_ROOT, 'data_version.json')
cdn_version_json = requests.get(f'{ADVENTURELOG_CDN_URL}/data/version.json')
if cdn_version_json.status_code == 200:
try:
cdn_version_json = requests.get(f'{ADVENTURELOG_CDN_URL}/data/version.json')
cdn_version_json.raise_for_status()
cdn_version = cdn_version_json.json().get('version')
if os.path.exists(current_version_json):
with open(current_version_json, 'r') as f:
@ -62,8 +63,8 @@ class Command(BaseCommand):
else:
self.stdout.write(self.style.SUCCESS('Data is already up-to-date. Run with --force to re-download'))
return
else:
self.stdout.write(self.style.ERROR('Error downloading version.json'))
except requests.RequestException as e:
self.stdout.write(self.style.ERROR(f'Error fetching version from the CDN: {e}, skipping data import. Try restarting the container once CDN connection has been restored.'))
return
self.stdout.write(self.style.SUCCESS('Fetching latest data from the AdventureLog CDN located at: ' + ADVENTURELOG_CDN_URL))
@ -90,27 +91,6 @@ class Command(BaseCommand):
self.stdout.write(self.style.ERROR('Error downloading countries_states_cities.json'))
return
# if not os.path.exists(version_json) or force:
# res = requests.get(f'https://raw.githubusercontent.com/dr5hn/countries-states-cities-database/{COUNTRY_REGION_JSON_VERSION}/json/countries%2Bstates%2Bcities.json')
# if res.status_code == 200:
# with open(countries_json_path, 'w') as f:
# f.write(res.text)
# self.stdout.write(self.style.SUCCESS('countries+regions+states.json downloaded successfully'))
# else:
# self.stdout.write(self.style.ERROR('Error downloading countries+regions+states.json'))
# return
# elif not os.path.isfile(countries_json_path):
# self.stdout.write(self.style.ERROR('countries+regions+states.json is not a file'))
# return
# elif os.path.getsize(countries_json_path) == 0:
# self.stdout.write(self.style.ERROR('countries+regions+states.json is empty'))
# elif Country.objects.count() == 0 or Region.objects.count() == 0 or City.objects.count() == 0:
# self.stdout.write(self.style.WARNING('Some region data is missing. Re-importing all data.'))
# else:
# self.stdout.write(self.style.SUCCESS('Latest country, region, and state data already downloaded.'))
# return
with open(countries_json_path, 'r') as f:
f = open(countries_json_path, 'rb')
parser = ijson.items(f, 'item')

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

@ -1,51 +1,35 @@
<script lang="ts">
import { createEventDispatcher } from 'svelte';
import type {
Adventure,
Attachment,
Category,
Collection,
OpenStreetMapPlace,
Point,
ReverseGeocode
} from '$lib/types';
import { onMount } from 'svelte';
import { createEventDispatcher, onMount } from 'svelte';
import type { Adventure, Attachment, Category, Collection } from '$lib/types';
import { addToast } from '$lib/toasts';
import { deserialize } from '$app/forms';
import { t } from 'svelte-i18n';
export let longitude: number | null = null;
export let latitude: number | null = null;
export let collection: Collection | null = null;
import { DefaultMarker, MapEvents, MapLibre } from 'svelte-maplibre';
const dispatch = createEventDispatcher();
let query: string = '';
let places: OpenStreetMapPlace[] = [];
let images: { id: string; image: string; is_primary: boolean }[] = [];
let warningMessage: string = '';
let constrainDates: boolean = false;
let categories: Category[] = [];
let fileInput: HTMLInputElement;
let immichIntegration: boolean = false;
import ActivityComplete from './ActivityComplete.svelte';
import { appVersion } from '$lib/config';
import CategoryDropdown from './CategoryDropdown.svelte';
import { findFirstValue } from '$lib';
import MarkdownEditor from './MarkdownEditor.svelte';
import ImmichSelect from './ImmichSelect.svelte';
import Star from '~icons/mdi/star';
import Crown from '~icons/mdi/crown';
import AttachmentCard from './AttachmentCard.svelte';
import LocationDropdown from './LocationDropdown.svelte';
let modal: HTMLDialogElement;
let wikiError: string = '';
let noPlaces: boolean = false;
let is_custom_location: boolean = false;
let reverseGeocodePlace: ReverseGeocode | null = null;
let adventure: Adventure = {
id: '',
name: '',
@ -100,38 +84,18 @@
attachments: adventureToEdit?.attachments || []
};
let markers: Point[] = [];
onMount(async () => {
modal = document.getElementById('my_modal_1') as HTMLDialogElement;
modal.showModal();
console.log('open');
});
let url: string = '';
let imageError: string = '';
let wikiImageError: string = '';
let old_display_name: string = '';
let triggerMarkVisted: boolean = false;
images = adventure.images || [];
if (longitude && latitude) {
adventure.latitude = latitude;
adventure.longitude = longitude;
reverseGeocode(true);
}
$: {
is_custom_location = adventure.location != reverseGeocodePlace?.display_name;
}
if (adventure.longitude && adventure.latitude) {
markers = [];
markers = [
{
lngLat: { lng: adventure.longitude, lat: adventure.latitude },
location: adventure.location || '',
name: adventure.name,
activity_type: ''
}
];
}
$: {
if (!adventure.rating) {
adventure.rating = NaN;
@ -229,11 +193,6 @@
}
}
function clearMap() {
console.log('CLEAR');
markers = [];
}
let imageSearch: string = adventure.name || '';
async function removeImage(id: string) {
@ -257,51 +216,6 @@
close();
}
let willBeMarkedVisited: boolean = false;
$: {
willBeMarkedVisited = false; // Reset before evaluating
const today = new Date(); // Cache today's date to avoid redundant calculations
for (const visit of adventure.visits) {
const startDate = new Date(visit.start_date);
const endDate = visit.end_date ? new Date(visit.end_date) : null;
// If the visit has both a start date and an end date, check if it started by today
if (startDate && endDate && startDate <= today) {
willBeMarkedVisited = true;
break; // Exit the loop since we've determined the result
}
// If the visit has a start date but no end date, check if it started by today
if (startDate && !endDate && startDate <= today) {
willBeMarkedVisited = true;
break; // Exit the loop since we've determined the result
}
}
console.log('WMBV:', willBeMarkedVisited);
}
let previousCoords: { lat: number; lng: number } | null = null;
$: if (markers.length > 0) {
const newLat = Math.round(markers[0].lngLat.lat * 1e6) / 1e6;
const newLng = Math.round(markers[0].lngLat.lng * 1e6) / 1e6;
if (!previousCoords || previousCoords.lat !== newLat || previousCoords.lng !== newLng) {
adventure.latitude = newLat;
adventure.longitude = newLng;
previousCoords = { lat: newLat, lng: newLng };
reverseGeocode();
}
if (!adventure.name) {
adventure.name = markers[0].name;
}
}
async function makePrimaryImage(image_id: string) {
let res = await fetch(`/api/images/${image_id}/toggle_primary`, {
method: 'POST'
@ -406,28 +320,6 @@
}
}
}
async function geocode(e: Event | null) {
if (e) {
e.preventDefault();
}
if (!query) {
alert($t('adventures.no_location'));
return;
}
let res = await fetch(`https://nominatim.openstreetmap.org/search?q=${query}&format=jsonv2`, {
headers: {
'User-Agent': `AdventureLog / ${appVersion} `
}
});
console.log(res);
let data = (await res.json()) as OpenStreetMapPlace[];
places = data;
if (data.length === 0) {
noPlaces = true;
} else {
noPlaces = false;
}
}
let new_start_date: string = '';
let new_end_date: string = '';
@ -458,93 +350,6 @@
new_notes = '';
}
async function markVisited() {
console.log(reverseGeocodePlace);
if (reverseGeocodePlace) {
if (!reverseGeocodePlace.region_visited && reverseGeocodePlace.region_id) {
let region_res = await fetch(`/api/visitedregion`, {
headers: { 'Content-Type': 'application/json' },
method: 'POST',
body: JSON.stringify({ region: reverseGeocodePlace.region_id })
});
if (region_res.ok) {
reverseGeocodePlace.region_visited = true;
addToast('success', `Visit to ${reverseGeocodePlace.region} marked`);
} else {
addToast('error', `Failed to mark visit to ${reverseGeocodePlace.region}`);
}
}
if (!reverseGeocodePlace.city_visited && reverseGeocodePlace.city_id != null) {
let city_res = await fetch(`/api/visitedcity`, {
headers: { 'Content-Type': 'application/json' },
method: 'POST',
body: JSON.stringify({ city: reverseGeocodePlace.city_id })
});
if (city_res.ok) {
reverseGeocodePlace.city_visited = true;
addToast('success', `Visit to ${reverseGeocodePlace.city} marked`);
} else {
addToast('error', `Failed to mark visit to ${reverseGeocodePlace.city}`);
}
}
}
}
async function reverseGeocode(force_update: boolean = false) {
let res = await fetch(
`/api/reverse-geocode/reverse_geocode/?lat=${adventure.latitude}&lon=${adventure.longitude}`
);
let data = await res.json();
if (data.error) {
console.log(data.error);
reverseGeocodePlace = null;
return;
}
reverseGeocodePlace = data;
console.log(reverseGeocodePlace);
console.log(is_custom_location);
if (
reverseGeocodePlace &&
reverseGeocodePlace.display_name &&
(!is_custom_location || force_update)
) {
old_display_name = reverseGeocodePlace.display_name;
adventure.location = reverseGeocodePlace.display_name;
}
console.log(data);
}
let fileInput: HTMLInputElement;
const dispatch = createEventDispatcher();
let modal: HTMLDialogElement;
let immichIntegration: boolean = false;
onMount(async () => {
modal = document.getElementById('my_modal_1') as HTMLDialogElement;
modal.showModal();
console.log('open');
let categoryFetch = await fetch('/api/categories/categories');
if (categoryFetch.ok) {
categories = await categoryFetch.json();
} else {
addToast('error', $t('adventures.category_fetch_error'));
}
// Check for Immich Integration
let res = await fetch('/api/integrations');
if (!res.ok) {
addToast('error', $t('immich.integration_fetch_error'));
} else {
let data = await res.json();
if (data.immich) {
immichIntegration = true;
}
}
});
function close() {
dispatch('close');
}
@ -566,20 +371,6 @@
}
}
async function addMarker(e: CustomEvent<any>) {
markers = [];
markers = [
...markers,
{
lngLat: e.detail.lngLat,
name: '',
location: '',
activity_type: ''
}
];
console.log(markers);
}
function imageSubmit() {
return async ({ result }: any) => {
if (result.type === 'success') {
@ -599,6 +390,8 @@
async function handleSubmit(event: Event) {
event.preventDefault();
triggerMarkVisted = true;
console.log(adventure);
if (adventure.id === '') {
console.log(categories);
@ -654,12 +447,6 @@
addToast('error', $t('adventures.adventure_update_error'));
}
}
if (
adventure.is_visited &&
(!reverseGeocodePlace?.region_visited || !reverseGeocodePlace?.city_visited)
) {
markVisited();
}
imageSearch = adventure.name;
}
</script>
@ -810,150 +597,7 @@
</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.location_information')}
</div>
<div class="collapse-content">
<!-- <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3"> -->
<div>
<label for="latitude">{$t('adventures.location')}</label><br />
<div class="flex items-center">
<input
type="text"
id="location"
name="location"
bind:value={adventure.location}
class="input input-bordered w-full"
/>
{#if is_custom_location}
<button
class="btn btn-primary ml-2"
type="button"
on:click={() => (adventure.location = reverseGeocodePlace?.display_name)}
>{$t('adventures.set_to_pin')}</button
>
{/if}
</div>
</div>
<div>
<form on:submit={geocode} class="mt-2">
<input
type="text"
placeholder={$t('adventures.search_for_location')}
class="input input-bordered w-full max-w-xs mb-2"
id="search"
name="search"
bind:value={query}
/>
<button class="btn btn-neutral -mt-1" type="submit">{$t('navbar.search')}</button>
<button class="btn btn-neutral -mt-1" type="button" on:click={clearMap}
>{$t('adventures.clear_map')}</button
>
</form>
</div>
{#if places.length > 0}
<div class="mt-4 max-w-full">
<h3 class="font-bold text-lg mb-4">{$t('adventures.search_results')}</h3>
<div class="flex flex-wrap">
{#each places as place}
<button
type="button"
class="btn btn-neutral mb-2 mr-2 max-w-full break-words whitespace-normal text-left"
on:click={() => {
markers = [
{
lngLat: { lng: Number(place.lon), lat: Number(place.lat) },
location: place.display_name,
name: place.name,
activity_type: place.type
}
];
}}
>
{place.display_name}
</button>
{/each}
</div>
</div>
{:else if noPlaces}
<p class="text-error text-lg">{$t('adventures.no_results')}</p>
{/if}
<!-- </div> -->
<div>
<MapLibre
style="https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json"
class="relative aspect-[9/16] max-h-[70vh] w-full sm:aspect-video sm:max-h-full rounded-lg"
standardControls
>
<!-- MapEvents gives you access to map events even from other components inside the map,
where you might not have access to the top-level `MapLibre` component. In this case
it would also work to just use on:click on the MapLibre component itself. -->
<MapEvents on:click={addMarker} />
{#each markers as marker}
<DefaultMarker lngLat={marker.lngLat} />
{/each}
</MapLibre>
{#if reverseGeocodePlace}
<div class="mt-2">
<p>
{reverseGeocodePlace.city
? reverseGeocodePlace.city + ', '
: ''}{reverseGeocodePlace.region},
{reverseGeocodePlace.country}
</p>
<p>
{reverseGeocodePlace.region}:
{reverseGeocodePlace.region_visited
? $t('adventures.visited')
: $t('adventures.not_visited')}
</p>
{#if reverseGeocodePlace.city}
<p>
{reverseGeocodePlace.city}:
{reverseGeocodePlace.city_visited
? $t('adventures.visited')
: $t('adventures.not_visited')}
</p>
{/if}
</div>
{#if !reverseGeocodePlace.region_visited || (!reverseGeocodePlace.city_visited && !willBeMarkedVisited)}
<button type="button" class="btn btn-neutral" on:click={markVisited}>
{$t('adventures.mark_visited')}
</button>
{/if}
{#if (willBeMarkedVisited && !reverseGeocodePlace.region_visited && reverseGeocodePlace.region_id) || (!reverseGeocodePlace.city_visited && willBeMarkedVisited && reverseGeocodePlace.city_id)}
<div role="alert" class="alert alert-info mt-2">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
class="h-6 w-6 shrink-0 stroke-current"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
></path>
</svg>
<span
>{reverseGeocodePlace.city
? reverseGeocodePlace.city + ', '
: ''}{reverseGeocodePlace.region},
{reverseGeocodePlace.country}
{$t('adventures.will_be_marked')}</span
>
</div>
{/if}
{/if}
</div>
</div>
</div>
<LocationDropdown bind:item={adventure} bind:triggerMarkVisted />
<div class="collapse collapse-plus bg-base-200 mb-4 overflow-visible">
<input type="checkbox" />

132
frontend/src/lib/components/HotelModal.svelte
View file

@ -6,6 +6,7 @@
import { appVersion } from '$lib/config';
import { DefaultMarker, MapEvents, MapLibre } from 'svelte-maplibre';
import type { Collection, Hotel, ReverseGeocode, OpenStreetMapPlace, Point } from '$lib/types';
import LocationDropdown from './LocationDropdown.svelte';
const dispatch = createEventDispatcher();
@ -17,7 +18,7 @@
let hotel: Hotel = { ...initializeHotel(hotelToEdit) };
let fullStartDate: string = '';
let fullEndDate: string = '';
let reverseGeocodePlace: ReverseGeocode | null = null;
let reverseGeocodePlace: any | null = null;
let query: string = '';
let places: OpenStreetMapPlace[] = [];
let noPlaces: boolean = false;
@ -83,34 +84,6 @@
if (event.key === 'Escape') close();
}
// Geocode location search
async function geocode(e: Event | null) {
if (e) e.preventDefault();
if (!query) {
alert($t('adventures.no_location'));
return;
}
const res = await fetch(`https://nominatim.openstreetmap.org/search?q=${query}&format=jsonv2`, {
headers: { 'User-Agent': `AdventureLog / ${appVersion}` }
});
const data = (await res.json()) as OpenStreetMapPlace[];
places = data;
noPlaces = data.length === 0;
}
// Set custom location flag based on hotel location
$: is_custom_location = hotel.location !== (reverseGeocodePlace?.display_name || '');
// Add marker to map
async function addMarker(e: CustomEvent<any>) {
markers = [{ lngLat: e.detail.lngLat, name: '', location: '', activity_type: '' }];
}
// Clear all markers from the map
function clearMap() {
markers = [];
}
// Handle form submission (save hotel)
async function handleSubmit(event: Event) {
event.preventDefault();
@ -325,106 +298,7 @@
</div>
<!-- Location Information -->
<div class="collapse collapse-plus bg-base-200 mb-4">
<input type="checkbox" />
<div class="collapse-title text-xl font-medium">
{$t('adventures.location_information')}
</div>
<div class="collapse-content">
<!-- <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3"> -->
<div>
<label for="latitude">{$t('adventures.location')}</label><br />
<div class="flex items-center">
<input
type="text"
id="location"
name="location"
bind:value={hotel.location}
class="input input-bordered w-full"
/>
{#if is_custom_location}
<button
class="btn btn-primary ml-2"
type="button"
on:click={() => (hotel.location = reverseGeocodePlace?.display_name)}
>{$t('adventures.set_to_pin')}</button
>
{/if}
</div>
</div>
<div>
<form on:submit={geocode} class="mt-2">
<input
type="text"
placeholder={$t('adventures.search_for_location')}
class="input input-bordered w-full max-w-xs mb-2"
id="search"
name="search"
bind:value={query}
/>
<button class="btn btn-neutral -mt-1" type="submit">{$t('navbar.search')}</button>
<button class="btn btn-neutral -mt-1" type="button" on:click={clearMap}
>{$t('adventures.clear_map')}</button
>
</form>
</div>
{#if places.length > 0}
<div class="mt-4 max-w-full">
<h3 class="font-bold text-lg mb-4">{$t('adventures.search_results')}</h3>
<div class="flex flex-wrap">
{#each places as place}
<button
type="button"
class="btn btn-neutral mb-2 mr-2 max-w-full break-words whitespace-normal text-left"
on:click={() => {
markers = [
{
lngLat: { lng: Number(place.lon), lat: Number(place.lat) },
location: place.display_name,
name: place.name,
activity_type: place.type
}
];
}}
>
{place.display_name}
</button>
{/each}
</div>
</div>
{:else if noPlaces}
<p class="text-error text-lg">{$t('adventures.no_results')}</p>
{/if}
<!-- </div> -->
<div>
<MapLibre
style="https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json"
class="relative aspect-[9/16] max-h-[70vh] w-full sm:aspect-video sm:max-h-full rounded-lg"
standardControls
>
<!-- MapEvents gives you access to map events even from other components inside the map,
where you might not have access to the top-level `MapLibre` component. In this case
it would also work to just use on:click on the MapLibre component itself. -->
<MapEvents on:click={addMarker} />
{#each markers as marker}
<DefaultMarker lngLat={marker.lngLat} />
{/each}
</MapLibre>
</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.location_information')}
</div>
<div class="collapse-content"></div>
</div>
<LocationDropdown bind:item={hotel} />
<!-- Form Actions -->
<div class="mt-4">

336
frontend/src/lib/components/LocationDropdown.svelte Normal file
View file

@ -0,0 +1,336 @@
<script lang="ts">
import { appVersion } from '$lib/config';
import { addToast } from '$lib/toasts';
import type { Adventure, Hotel, OpenStreetMapPlace, Point, ReverseGeocode } from '$lib/types';
import { t } from 'svelte-i18n';
import { DefaultMarker, MapEvents, MapLibre } from 'svelte-maplibre';
export let item: Adventure | Hotel;
export let triggerMarkVisted: boolean = false;
let reverseGeocodePlace: ReverseGeocode | null = null;
let markers: Point[] = [];
let query: string = '';
let is_custom_location: boolean = false;
let willBeMarkedVisited: boolean = false;
let previousCoords: { lat: number; lng: number } | null = null;
let old_display_name: string = '';
let places: OpenStreetMapPlace[] = [];
let noPlaces: boolean = false;
$: if (markers.length > 0) {
const newLat = Math.round(markers[0].lngLat.lat * 1e6) / 1e6;
const newLng = Math.round(markers[0].lngLat.lng * 1e6) / 1e6;
if (!previousCoords || previousCoords.lat !== newLat || previousCoords.lng !== newLng) {
item.latitude = newLat;
item.longitude = newLng;
previousCoords = { lat: newLat, lng: newLng };
reverseGeocode();
}
if (!item.name) {
item.name = markers[0].name;
}
}
$: {
console.log(triggerMarkVisted);
}
$: if (triggerMarkVisted && willBeMarkedVisited) {
markVisited();
triggerMarkVisted = false;
}
$: {
is_custom_location = Boolean(
item.location != reverseGeocodePlace?.display_name && item.location
);
}
if (item.longitude && item.latitude) {
markers = [];
markers = [
{
lngLat: { lng: item.longitude, lat: item.latitude },
location: item.location || '',
name: item.name,
activity_type: ''
}
];
}
$: {
if ('visits' in item) {
willBeMarkedVisited = false; // Reset before evaluating
const today = new Date(); // Cache today's date to avoid redundant calculations
for (const visit of item.visits) {
const startDate = new Date(visit.start_date);
const endDate = visit.end_date ? new Date(visit.end_date) : null;
// If the visit has both a start date and an end date, check if it started by today
if (startDate && endDate && startDate <= today) {
willBeMarkedVisited = true;
break; // Exit the loop since we've determined the result
}
// If the visit has a start date but no end date, check if it started by today
if (startDate && !endDate && startDate <= today) {
willBeMarkedVisited = true;
break; // Exit the loop since we've determined the result
}
}
console.log('WMBV:', willBeMarkedVisited);
}
}
async function markVisited() {
console.log(reverseGeocodePlace);
if (reverseGeocodePlace) {
if (!reverseGeocodePlace.region_visited && reverseGeocodePlace.region_id) {
let region_res = await fetch(`/api/visitedregion`, {
headers: { 'Content-Type': 'application/json' },
method: 'POST',
body: JSON.stringify({ region: reverseGeocodePlace.region_id })
});
if (region_res.ok) {
reverseGeocodePlace.region_visited = true;
addToast('success', `Visit to ${reverseGeocodePlace.region} marked`);
} else {
addToast('error', `Failed to mark visit to ${reverseGeocodePlace.region}`);
}
}
if (!reverseGeocodePlace.city_visited && reverseGeocodePlace.city_id != null) {
let city_res = await fetch(`/api/visitedcity`, {
headers: { 'Content-Type': 'application/json' },
method: 'POST',
body: JSON.stringify({ city: reverseGeocodePlace.city_id })
});
if (city_res.ok) {
reverseGeocodePlace.city_visited = true;
addToast('success', `Visit to ${reverseGeocodePlace.city} marked`);
} else {
addToast('error', `Failed to mark visit to ${reverseGeocodePlace.city}`);
}
}
}
}
async function addMarker(e: CustomEvent<any>) {
markers = [];
markers = [
...markers,
{
lngLat: e.detail.lngLat,
name: '',
location: '',
activity_type: ''
}
];
console.log(markers);
}
async function geocode(e: Event | null) {
if (e) {
e.preventDefault();
}
if (!query) {
alert($t('adventures.no_location'));
return;
}
let res = await fetch(`https://nominatim.openstreetmap.org/search?q=${query}&format=jsonv2`, {
headers: {
'User-Agent': `AdventureLog / ${appVersion} `
}
});
console.log(res);
let data = (await res.json()) as OpenStreetMapPlace[];
places = data;
if (data.length === 0) {
noPlaces = true;
} else {
noPlaces = false;
}
}
async function reverseGeocode(force_update: boolean = false) {
let res = await fetch(
`/api/reverse-geocode/reverse_geocode/?lat=${item.latitude}&lon=${item.longitude}`
);
let data = await res.json();
if (data.error) {
console.log(data.error);
reverseGeocodePlace = null;
return;
}
reverseGeocodePlace = data;
console.log(reverseGeocodePlace);
console.log(is_custom_location);
if (
reverseGeocodePlace &&
reverseGeocodePlace.display_name &&
(!is_custom_location || force_update)
) {
old_display_name = reverseGeocodePlace.display_name;
item.location = reverseGeocodePlace.display_name;
}
console.log(data);
}
function clearMap() {
console.log('CLEAR');
markers = [];
}
</script>
<div class="collapse collapse-plus bg-base-200 mb-4">
<input type="checkbox" />
<div class="collapse-title text-xl font-medium">
{$t('adventures.location_information')}
</div>
<div class="collapse-content">
<!-- <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3"> -->
<div>
<label for="latitude">{$t('adventures.location')}</label><br />
<div class="flex items-center">
<input
type="text"
id="location"
name="location"
bind:value={item.location}
class="input input-bordered w-full"
/>
{#if is_custom_location}
<button
class="btn btn-primary ml-2"
type="button"
on:click={() => (item.location = reverseGeocodePlace?.display_name)}
>{$t('adventures.set_to_pin')}</button
>
{/if}
</div>
</div>
<div>
<form on:submit={geocode} class="mt-2">
<input
type="text"
placeholder={$t('adventures.search_for_location')}
class="input input-bordered w-full max-w-xs mb-2"
id="search"
name="search"
bind:value={query}
/>
<button class="btn btn-neutral -mt-1" type="submit">{$t('navbar.search')}</button>
<button class="btn btn-neutral -mt-1" type="button" on:click={clearMap}
>{$t('adventures.clear_map')}</button
>
</form>
</div>
{#if places.length > 0}
<div class="mt-4 max-w-full">
<h3 class="font-bold text-lg mb-4">{$t('adventures.search_results')}</h3>
<div class="flex flex-wrap">
{#each places as place}
<button
type="button"
class="btn btn-neutral mb-2 mr-2 max-w-full break-words whitespace-normal text-left"
on:click={() => {
markers = [
{
lngLat: { lng: Number(place.lon), lat: Number(place.lat) },
location: place.display_name,
name: place.name,
activity_type: place.type
}
];
}}
>
{place.display_name}
</button>
{/each}
</div>
</div>
{:else if noPlaces}
<p class="text-error text-lg">{$t('adventures.no_results')}</p>
{/if}
<!-- </div> -->
<div>
<MapLibre
style="https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json"
class="relative aspect-[9/16] max-h-[70vh] w-full sm:aspect-video sm:max-h-full rounded-lg"
standardControls
>
<!-- MapEvents gives you access to map events even from other components inside the map,
where you might not have access to the top-level `MapLibre` component. In this case
it would also work to just use on:click on the MapLibre component itself. -->
<MapEvents on:click={addMarker} />
{#each markers as marker}
<DefaultMarker lngLat={marker.lngLat} />
{/each}
</MapLibre>
{#if reverseGeocodePlace}
<div class="mt-2">
<p>
{reverseGeocodePlace.city
? reverseGeocodePlace.city + ', '
: ''}{reverseGeocodePlace.region},
{reverseGeocodePlace.country}
</p>
<p>
{reverseGeocodePlace.region}:
{reverseGeocodePlace.region_visited
? $t('adventures.visited')
: $t('adventures.not_visited')}
</p>
{#if reverseGeocodePlace.city}
<p>
{reverseGeocodePlace.city}:
{reverseGeocodePlace.city_visited
? $t('adventures.visited')
: $t('adventures.not_visited')}
</p>
{/if}
</div>
{#if !reverseGeocodePlace.region_visited || (!reverseGeocodePlace.city_visited && !willBeMarkedVisited)}
<button type="button" class="btn btn-neutral" on:click={markVisited}>
{$t('adventures.mark_visited')}
</button>
{/if}
{#if (willBeMarkedVisited && !reverseGeocodePlace.region_visited && reverseGeocodePlace.region_id) || (!reverseGeocodePlace.city_visited && willBeMarkedVisited && reverseGeocodePlace.city_id)}
<div role="alert" class="alert alert-info mt-2">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
class="h-6 w-6 shrink-0 stroke-current"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
></path>
</svg>
<span
>{reverseGeocodePlace.city
? reverseGeocodePlace.city + ', '
: ''}{reverseGeocodePlace.region},
{reverseGeocodePlace.country}
{$t('adventures.will_be_marked')}</span
>
</div>
{/if}
{/if}
</div>
</div>
</div>

1
frontend/src/lib/types.ts
View file

@ -113,6 +113,7 @@ export type Collection = {
end_date: string | null;
transportations?: Transportation[];
notes?: Note[];
hotels?: Hotel[];
checklists?: Checklist[];
is_archived?: boolean;
shared_with: string[] | undefined;

1
frontend/src/locales/en.json
View file

@ -191,6 +191,7 @@
"no_description_found": "No description found",
"adventure_created": "Adventure created",
"adventure_create_error": "Failed to create adventure",
"hotel": "Hotel",
"create_adventure": "Create Adventure",
"adventure_updated": "Adventure updated",
"adventure_update_error": "Failed to update adventure",

49
frontend/src/routes/collections/[id]/+page.svelte
View file

@ -1,5 +1,5 @@
<script lang="ts">
import type { Adventure, Checklist, Collection, Note, Transportation } from '$lib/types';
import type { Adventure, Checklist, Collection, Hotel, Note, Transportation } from '$lib/types';
import { onMount } from 'svelte';
import type { PageData } from './$types';
import { marked } from 'marked'; // Import the markdown parser
@ -35,6 +35,7 @@
import TransportationModal from '$lib/components/TransportationModal.svelte';
import CardCarousel from '$lib/components/CardCarousel.svelte';
import { goto } from '$app/navigation';
import HotelModal from '$lib/components/HotelModal.svelte';
export let data: PageData;
console.log(data);
@ -115,6 +116,7 @@
let numAdventures: number = 0;
let transportations: Transportation[] = [];
let hotels: Hotel[] = [];
let notes: Note[] = [];
let checklists: Checklist[] = [];
@ -174,6 +176,9 @@
if (collection.transportations) {
transportations = collection.transportations;
}
if (collection.hotels) {
hotels = collection.hotels;
}
if (collection.notes) {
notes = collection.notes;
}
@ -243,6 +248,8 @@
let adventureToEdit: Adventure | null = null;
let transportationToEdit: Transportation | null = null;
let isShowingHotelModal: boolean = false;
let hotelToEdit: Hotel | null = null;
let isAdventureModalOpen: boolean = false;
let isNoteModalOpen: boolean = false;
let noteToEdit: Note | null;
@ -260,6 +267,11 @@
isShowingTransportationModal = true;
}
function editHotel(event: CustomEvent<Hotel>) {
hotelToEdit = event.detail;
isShowingHotelModal = true;
}
function saveOrCreateAdventure(event: CustomEvent<Adventure>) {
if (adventures.find((adventure) => adventure.id === event.detail.id)) {
adventures = adventures.map((adventure) => {
@ -355,6 +367,22 @@
}
isShowingTransportationModal = false;
}
function saveOrCreateHotel(event: CustomEvent<Hotel>) {
if (hotels.find((hotel) => hotel.id === event.detail.id)) {
// Update existing hotel
hotels = hotels.map((hotel) => {
if (hotel.id === event.detail.id) {
return event.detail;
}
return hotel;
});
} else {
// Create new hotel
hotels = [event.detail, ...hotels];
}
isShowingHotelModal = false;
}
</script>
{#if isShowingLinkModal}
@ -376,6 +404,15 @@
/>
{/if}
{#if isShowingHotelModal}
<HotelModal
{hotelToEdit}
on:close={() => (isShowingHotelModal = false)}
on:save={saveOrCreateHotel}
{collection}
/>
{/if}
{#if isAdventureModalOpen}
<AdventureModal
{adventureToEdit}
@ -501,6 +538,16 @@
>
{$t('adventures.checklist')}</button
>
<button
class="btn btn-primary"
on:click={() => {
isShowingHotelModal = true;
newType = '';
hotelToEdit = null;
}}
>
{$t('adventures.hotel')}</button
>
<!-- <button
class="btn btn-primary"