Skip to content

Commit

Permalink
Merge pull request #130 from seanmorley15/development
Browse files Browse the repository at this point in the history
Development
  • Loading branch information
seanmorley15 authored Jul 16, 2024
2 parents 17fe400 + a5c2489 commit 5b886fd
Show file tree
Hide file tree
Showing 7 changed files with 296 additions and 79 deletions.
31 changes: 30 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ _**⚠️ AdventureLog is in early development and is not recommended for produc

# Docker 🐋

Docker is the perffered way to run AdventureLog on your local machine. It is a lightweight containerization technology that allows you to run applications in isolated environments called containers.
Docker is the preferred way to run AdventureLog on your local machine. It is a lightweight containerization technology that allows you to run applications in isolated environments called containers.
**Note**: This guide mainly focuses on installation with a linux based host machine, but the steps are similar for other operating systems.

## Prerequisites
Expand Down Expand Up @@ -53,6 +53,35 @@ Here is a summary of the configuration options available in the `docker-compose.
| `PUBLIC_URL` | Yes | This is the publically accessible url to the **nginx** container. You should be able to acess nginx from this url where you access your app. | http://127.0.0.1:81 |
| `CSRF_TRUSTED_ORIGINS` | Yes | Need to be changed to the orgins where you use your backend server and frontend. These values are comma seperated. | Needs to be changed. |

### Proxy Container (nginx) Configuration

In order to use media files in a production environment, you need to configure the `nginx` container to serve the media files. The container is already in the docker compose file but you need to do a few things to make it work.

1. Create a directory called `proxy` in the same directory as the `docker-compose.yml` file.
2. Create a file called `nginx.conf` in the `proxy` directory.
3. Add the following configuration to the `nginx.conf` file:

```nginx
server {
listen 80;
server_name localhost;
location /media/ {
alias /app/media/;
}
}
```

## Running the Containers

To start the containers, run the following command:

```bash
docker compose up -d
```

Enjoy AdventureLog! 🎉

# About AdventureLog

AdventureLog is a Svelte Kit and Django application that utilizes a PostgreSQL database. Users can log the adventures they have experienced, as well as plan future ones. Key features include:
Expand Down
113 changes: 57 additions & 56 deletions frontend/src/lib/components/AdventureCard.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@
import LinkVariantRemove from '~icons/mdi/link-variant-remove';
import Plus from '~icons/mdi/plus';
import CollectionLink from './CollectionLink.svelte';
import DotsHorizontal from '~icons/mdi/dots-horizontal';
export let type: string;
Expand Down Expand Up @@ -108,7 +109,7 @@
{/if}

<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-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"
>
<figure>
<!-- svelte-ignore a11y-img-redundant-alt -->
Expand All @@ -124,16 +125,18 @@
</figure>

<div class="card-body">
<h2 class="card-title break-words text-wrap">
{adventure.name}
</h2>
<div>
{#if adventure.type == 'visited'}
<div class="badge badge-primary">Visited</div>
{:else}
<div class="badge badge-secondary">Planned</div>
{/if}
<div class="badge badge-neutral">{adventure.is_public ? 'Public' : 'Private'}</div>
<div class="flex justify-between">
<h2 class="text-2xl font-semibold -mt-2 break-words text-wrap">
{adventure.name}
</h2>
<div>
{#if adventure.type == 'visited'}
<div class="badge badge-primary">Visited</div>
{:else}
<div class="badge badge-secondary">Planned</div>
{/if}
<div class="badge badge-neutral">{adventure.is_public ? 'Public' : 'Private'}</div>
</div>
</div>
{#if adventure.location && adventure.location !== ''}
<div class="inline-flex items-center">
Expand All @@ -157,52 +160,50 @@
</ul>
{/if}
<div class="card-actions justify-end mt-2">
{#if type == 'visited'}
<button class="btn btn-primary" on:click={() => goto(`/adventures/${adventure.id}`)}
><Launch class="w-6 h-6" /></button
>
<button class="btn btn-primary" on:click={editAdventure}>
<FileDocumentEdit class="w-6 h-6" />
</button>
<button class="btn btn-warning" on:click={deleteAdventure}
><TrashCan class="w-6 h-6" /></button
>
{/if}
{#if type == 'planned'}
<button class="btn btn-primary" on:click={() => goto(`/adventures/${adventure.id}`)}
><Launch class="w-6 h-6" /></button
>
<button class="btn btn-primary" on:click={editAdventure}>
<FileDocumentEdit class="w-6 h-6" />
</button>
<button class="btn btn-warning" on:click={deleteAdventure}
><TrashCan class="w-6 h-6" /></button
>
{/if}
{#if type == 'link'}
<button class="btn btn-primary" on:click={link}><Link class="w-6 h-6" /></button>
{/if}
{#if adventure.type == 'visited'}
<button class="btn btn-secondary" on:click={changeType('planned')}
><FormatListBulletedSquare class="w-6 h-6" /></button
<!-- action options dropdown -->
<div class="dropdown dropdown-end">
<div tabindex="0" role="button" class="btn btn-neutral">
<DotsHorizontal class="w-6 h-6" />
</div>
<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
<ul
tabindex="0"
class="dropdown-content menu bg-base-100 rounded-box z-[1] w-52 p-2 shadow"
>
{/if}

{#if adventure.type == 'planned'}
<button class="btn btn-secondary" on:click={changeType('visited')}
><CheckBold class="w-6 h-6" /></button
>
{/if}
{#if adventure.collection}
<button class="btn btn-secondary" on:click={removeFromCollection}
><LinkVariantRemove class="w-6 h-6" /></button
>
{/if}
{#if !adventure.collection}
<button class="btn btn-secondary" on:click={() => (isCollectionModalOpen = true)}
><Plus class="w-6 h-6" /></button
>
{/if}
<button class="btn btn-neutral mb-2" on:click={() => goto(`/adventures/${adventure.id}`)}
><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
</button>
{#if adventure.type == 'visited'}
<button class="btn btn-neutral mb-2" on:click={changeType('planned')}
><FormatListBulletedSquare class="w-6 h-6" />Change to Plan</button
>
{/if}
{#if adventure.type == 'planned'}
<button class="btn btn-neutral mb-2" on:click={changeType('visited')}
><CheckBold class="w-6 h-6" />Mark Visited</button
>
{/if}
{#if adventure.collection}
<button class="btn btn-neutral mb-2" on:click={removeFromCollection}
><LinkVariantRemove class="w-6 h-6" />Remove from Collection</button
>
{/if}
{#if !adventure.collection}
<button class="btn btn-neutral mb-2" on:click={() => (isCollectionModalOpen = true)}
><Plus class="w-6 h-6" />Add to Collection</button
>
{/if}
{#if type == 'link'}
<button class="btn btn-primary" on:click={link}><Link class="w-6 h-6" /></button>
{/if}
<button class="btn btn-warning" on:click={deleteAdventure}
><TrashCan class="w-6 h-6" />Delete</button
>
</ul>
</div>
</div>
</div>
</div>
52 changes: 43 additions & 9 deletions frontend/src/lib/components/EditAdventure.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -12,17 +12,21 @@
let originalName = adventureToEdit.name;
let isPointModalOpen: boolean = false;
let isImageFetcherOpen: boolean = false;
let fileInput: HTMLInputElement;
let image: File;
import MapMarker from '~icons/mdi/map-marker';
import Calendar from '~icons/mdi/calendar';
import Notebook from '~icons/mdi/notebook';
import ClipboardList from '~icons/mdi/clipboard-list';
import Image from '~icons/mdi/image';
import Star from '~icons/mdi/star';
import Attachment from '~icons/mdi/attachment';
import PointSelectionModal from './PointSelectionModal.svelte';
import Earth from '~icons/mdi/earth';
import Wikipedia from '~icons/mdi/wikipedia';
import ImageFetcher from './ImageFetcher.svelte';
onMount(async () => {
modal = document.getElementById('my_modal_1') as HTMLDialogElement;
Expand Down Expand Up @@ -88,6 +92,23 @@
}
}
}
function handleImageFetch(event: CustomEvent) {
const file = event.detail.file;
if (file && fileInput) {
// Create a DataTransfer object and add the file
const dataTransfer = new DataTransfer();
dataTransfer.items.add(file);
// Set the files property of the file input
fileInput.files = dataTransfer.files;
// Update the adventureToEdit object
adventureToEdit.image = file;
}
isImageFetcherOpen = false;
}
function setLongLat(event: CustomEvent<[number, number]>) {
console.log(event.detail);
adventureToEdit.latitude = event.detail[1];
Expand All @@ -105,6 +126,10 @@
/>
{/if}

{#if isImageFetcherOpen}
<ImageFetcher on:image={handleImageFetch} on:close={() => (isImageFetcherOpen = false)} />
{/if}

<dialog id="my_modal_1" class="modal">
<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
Expand Down Expand Up @@ -193,14 +218,23 @@
/>
</div>
<div class="mb-2">
<label for="image">Image <Image class="inline-block -mt-1 mb-1 w-6 h-6" /></label><br />
<input
type="file"
id="image"
name="image"
bind:value={adventureToEdit.image}
class="file-input file-input-bordered w-full max-w-xs mt-1"
/>
<label for="image">Image </label><br />
<div class="flex">
<input
type="file"
id="image"
name="image"
bind:value={image}
bind:this={fileInput}
class="file-input file-input-bordered w-full max-w-xs mt-1"
/>
<button
class="btn btn-neutral ml-2"
type="button"
on:click={() => (isImageFetcherOpen = true)}
><Wikipedia class="inline-block -mt-1 mb-1 w-6 h-6" />Image Search</button
>
</div>
</div>
<div class="mb-2">
<label for="link">Link <Attachment class="inline-block -mt-1 mb-1 w-6 h-6" /></label><br
Expand Down
90 changes: 90 additions & 0 deletions frontend/src/lib/components/ImageFetcher.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,90 @@
<script lang="ts">
import { addToast } from '$lib/toasts';
import { createEventDispatcher } from 'svelte';
const dispatch = createEventDispatcher();
import { onMount } from 'svelte';
let modal: HTMLDialogElement;
let url: string = '';
let query: string = '';
let error = '';
onMount(() => {
modal = document.getElementById('my_modal_1') as HTMLDialogElement;
if (modal) {
modal.showModal();
}
});
async function fetchImage() {
let res = await fetch(url);
let data = await res.blob();
if (!data) {
error = 'No image found at that URL.';
return;
}
let file = new File([data], 'image.jpg', { type: 'image/jpeg' });
close();
dispatch('image', { file });
}
async function fetchWikiImage() {
let res = await fetch(`/api/generate/img/?name=${query}`);
let data = await res.json();
if (data.source) {
let imageUrl = data.source;
let res = await fetch(imageUrl);
let blob = await res.blob();
let file = new File([blob], `${query}.jpg`, { type: 'image/jpeg' });
close();
dispatch('image', { file });
} else {
error = 'No image found for that Wikipedia article.';
}
}
function close() {
dispatch('close');
}
function handleKeydown(event: KeyboardEvent) {
if (event.key === 'Escape') {
dispatch('close');
}
}
</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">Image Fetcher with URL</h3>
<form>
<input
type="text"
class="input input-bordered w-full max-w-xs"
bind:value={url}
placeholder="Enter a URL"
/>
<button class="btn btn-primary" on:click={fetchImage}>Submit</button>
</form>

<h3 class="font-bold text-lg">Image Fetcher from Wikipedia</h3>
<form>
<input
type="text"
class="input input-bordered w-full max-w-xs"
bind:value={query}
placeholder="Enter a Wikipedia Article Name"
/>
<button class="btn btn-primary" on:click={fetchWikiImage}>Submit</button>
</form>

{#if error}
<p class="text-red-500">{error}</p>
{/if}

<button class="btn btn-primary" on:click={close}>Close</button>
</div>
</dialog>
Loading

0 comments on commit 5b886fd

Please sign in to comment.