mirror of
https://github.com/seanmorley15/AdventureLog.git
synced 2025-07-23 14:59:36 +02:00
lodging beta
This commit is contained in:
Sean Morley
parent
acb7470fbb
commit
66a2e30711
6 changed files with 93 additions and 31 deletions
|
|
@ -9,6 +9,7 @@ ADVENTURE_TYPES = [
|
|||
('visited', 'Visited'),
|
||||
('planned', 'Planned'),
|
||||
('lodging', 'Lodging'),
|
||||
('dining', 'Dining')
|
||||
]
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -24,8 +24,20 @@
|
|||
|
||||
let isCollectionModalOpen: boolean = false;
|
||||
|
||||
let keyword: string = '';
|
||||
|
||||
export let adventure: Adventure;
|
||||
|
||||
if (adventure.type == 'visited') {
|
||||
keyword = 'Adventure';
|
||||
} else if (adventure.type == 'planned') {
|
||||
keyword = 'Adventure';
|
||||
} else if (adventure.type == 'lodging') {
|
||||
keyword = 'Lodging';
|
||||
} else if (adventure.type == 'dining') {
|
||||
keyword = 'Dining';
|
||||
}
|
||||
|
||||
let activityTypes: string[] = [];
|
||||
// makes it reactivty to changes so it updates automatically
|
||||
$: {
|
||||
|
|
@ -153,6 +165,8 @@
|
|||
<div class="badge badge-secondary">Planned</div>
|
||||
{:else if user?.pk == adventure.user_id && adventure.type == 'lodging'}
|
||||
<div class="badge badge-success">Lodging</div>
|
||||
{:else if user?.pk == adventure.user_id && adventure.type == 'dining'}
|
||||
<div class="badge badge-accent">Dining</div>
|
||||
{/if}
|
||||
|
||||
<div class="badge badge-neutral">{adventure.is_public ? 'Public' : 'Private'}</div>
|
||||
|
|
@ -197,7 +211,7 @@
|
|||
><Launch class="w-6 h-6" />Open Details</button
|
||||
>
|
||||
<button class="btn btn-neutral mb-2" on:click={editAdventure}>
|
||||
<FileDocumentEdit class="w-6 h-6" />Edit Adventure
|
||||
<FileDocumentEdit class="w-6 h-6" />Edit {keyword}
|
||||
</button>
|
||||
{#if adventure.type == 'visited'}
|
||||
<button class="btn btn-neutral mb-2" on:click={changeType('planned')}
|
||||
|
|
@ -216,7 +230,7 @@
|
|||
>
|
||||
{/if}
|
||||
<!-- change a non adventure to an adventure -->
|
||||
{#if adventure.collection && adventure.type == 'lodging'}
|
||||
{#if (adventure.collection && adventure.type == 'lodging') || adventure.type == 'dining'}
|
||||
<button class="btn btn-neutral mb-2" on:click={changeType('visited')}
|
||||
><CheckBold class="w-6 h-6" />Change to Visit</button
|
||||
>
|
||||
|
|
|
|||
|
|
@ -222,20 +222,22 @@
|
|||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<label for="activityTypes"
|
||||
>Activity Types <ClipboardList class="inline-block -mt-1 mb-1 w-6 h-6" /></label
|
||||
><br />
|
||||
<input
|
||||
type="text"
|
||||
id="activity_types"
|
||||
name="activity_types"
|
||||
hidden
|
||||
bind:value={adventureToEdit.activity_types}
|
||||
class="input input-bordered w-full max-w-xs mt-1"
|
||||
/>
|
||||
<ActivityComplete bind:activities={adventureToEdit.activity_types} />
|
||||
</div>
|
||||
{#if adventureToEdit.type == 'visited' || adventureToEdit.type == 'planned'}
|
||||
<div class="mb-2">
|
||||
<label for="activityTypes"
|
||||
>Activity Types <ClipboardList class="inline-block -mt-1 mb-1 w-6 h-6" /></label
|
||||
><br />
|
||||
<input
|
||||
type="text"
|
||||
id="activity_types"
|
||||
name="activity_types"
|
||||
hidden
|
||||
bind:value={adventureToEdit.activity_types}
|
||||
class="input input-bordered w-full max-w-xs mt-1"
|
||||
/>
|
||||
<ActivityComplete bind:activities={adventureToEdit.activity_types} />
|
||||
</div>
|
||||
{/if}
|
||||
<div class="mb-2">
|
||||
<label for="image">Image </label><br />
|
||||
<div class="flex">
|
||||
|
|
|
|||
|
|
@ -24,6 +24,7 @@
|
|||
import Wikipedia from '~icons/mdi/wikipedia';
|
||||
import ActivityComplete from './ActivityComplete.svelte';
|
||||
import { appVersion } from '$lib/config';
|
||||
import AdventureCard from './AdventureCard.svelte';
|
||||
|
||||
let newAdventure: Adventure = {
|
||||
id: NaN,
|
||||
|
|
@ -294,20 +295,22 @@
|
|||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<label for="activityTypes"
|
||||
>Activity Types <ClipboardList class="inline-block -mt-1 mb-1 w-6 h-6" /></label
|
||||
><br />
|
||||
<input
|
||||
type="text"
|
||||
id="activity_types"
|
||||
name="activity_types"
|
||||
hidden
|
||||
bind:value={newAdventure.activity_types}
|
||||
class="input input-bordered w-full max-w-xs mt-1"
|
||||
/>
|
||||
<ActivityComplete bind:activities={newAdventure.activity_types} />
|
||||
</div>
|
||||
{#if newAdventure.type == 'visited' || newAdventure.type == 'planned'}
|
||||
<div class="mb-2">
|
||||
<label for="activityTypes"
|
||||
>Activity Types <ClipboardList class="inline-block -mt-1 mb-1 w-6 h-6" /></label
|
||||
><br />
|
||||
<input
|
||||
type="text"
|
||||
id="activity_types"
|
||||
name="activity_types"
|
||||
hidden
|
||||
bind:value={newAdventure.activity_types}
|
||||
class="input input-bordered w-full max-w-xs mt-1"
|
||||
/>
|
||||
<ActivityComplete bind:activities={newAdventure.activity_types} />
|
||||
</div>
|
||||
{/if}
|
||||
<div class="mb-2">
|
||||
<label for="rating"
|
||||
>Rating <iconify-icon icon="mdi:star" class="text-xl -mb-1"></iconify-icon></label
|
||||
|
|
|
|||
|
|
@ -85,7 +85,9 @@
|
|||
if (!adventure.name) {
|
||||
adventure.name = markers[0].name;
|
||||
}
|
||||
adventure.activity_types = [...adventure.activity_types, markers[0].activity_type];
|
||||
if (adventure.type == 'visited' || adventure.type == 'planned') {
|
||||
adventure.activity_types = [...adventure.activity_types, markers[0].activity_type];
|
||||
}
|
||||
dispatch('submit', adventure);
|
||||
close();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@
|
|||
import EditAdventure from '$lib/components/EditAdventure.svelte';
|
||||
import NotFound from '$lib/components/NotFound.svelte';
|
||||
import NewAdventure from '$lib/components/NewAdventure.svelte';
|
||||
import { DefaultMarker, MapEvents, MapLibre, Popup } from 'svelte-maplibre';
|
||||
|
||||
export let data: PageData;
|
||||
|
||||
|
|
@ -239,6 +240,15 @@
|
|||
>
|
||||
Lodging</button
|
||||
>
|
||||
<button
|
||||
class="btn btn-primary"
|
||||
on:click={() => {
|
||||
isShowingCreateModal = true;
|
||||
newType = 'dining';
|
||||
}}
|
||||
>
|
||||
Dining</button
|
||||
>
|
||||
|
||||
<!-- <button
|
||||
class="btn btn-primary"
|
||||
|
|
@ -324,5 +334,35 @@
|
|||
<p class="text-center text-lg mt-2">No adventures planned for this day.</p>
|
||||
{/if}
|
||||
{/each}
|
||||
<div class="flex items-center justify-center w-10/12">
|
||||
<MapLibre
|
||||
style="https://basemaps.cartocdn.com/gl/positron-gl-style/style.json"
|
||||
class="relative aspect-[9/16] max-h-[70vh] w-full sm:aspect-video sm:max-h-full"
|
||||
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 adventures as adventure}
|
||||
{#if adventure.longitude && adventure.latitude}
|
||||
<DefaultMarker lngLat={{ lng: adventure.longitude, lat: adventure.latitude }}>
|
||||
<Popup openOn="click" offset={[0, -10]}>
|
||||
<div class="text-lg text-black font-bold">{adventure.name}</div>
|
||||
<p class="font-semibold text-black text-md">
|
||||
{adventure.type.charAt(0).toUpperCase() + adventure.type.slice(1)}
|
||||
</p>
|
||||
<p>
|
||||
{adventure.date
|
||||
? new Date(adventure.date).toLocaleDateString('en-US', { timeZone: 'UTC' })
|
||||
: ''}
|
||||
</p>
|
||||
</Popup>
|
||||
</DefaultMarker>
|
||||
{/if}
|
||||
{/each}
|
||||
</MapLibre>
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue