From ab8f8c06721638edb3d3376a7aec9e7f16230d6e Mon Sep 17 00:00:00 2001
From: Jan Schutte <4732389+SchutteJan@users.noreply.github.com>
Date: Sun, 7 Jul 2024 12:35:53 +0200
Subject: [PATCH] style: change look and feel of the "mark visited" button

---
 frontend/src/api/bars.ts           |   5 +-
 frontend/src/lib/BarItem.svelte    |  51 ++++++++++++--
 frontend/src/lib/Checkmark.svelte  | 105 +++++++++++++++++++++++++++++
 frontend/src/routes/+layout.svelte |   1 +
 4 files changed, 155 insertions(+), 7 deletions(-)
 create mode 100644 frontend/src/lib/Checkmark.svelte

diff --git a/frontend/src/api/bars.ts b/frontend/src/api/bars.ts
index ccdd3f6..b6f02a7 100644
--- a/frontend/src/api/bars.ts
+++ b/frontend/src/api/bars.ts
@@ -8,6 +8,9 @@ export async function get_bars(): Promise<Response> {
 
 export async function visitBar(id: number): Promise<Response> {
 	return fetch(get_api_base_url() + '/visit/bar/' + id, {
-		method: 'POST'
+		method: 'POST',
+		headers: {
+			Accept: 'application/json'
+		}
 	})
 }
diff --git a/frontend/src/lib/BarItem.svelte b/frontend/src/lib/BarItem.svelte
index aa1e5e0..cba4e05 100644
--- a/frontend/src/lib/BarItem.svelte
+++ b/frontend/src/lib/BarItem.svelte
@@ -3,6 +3,7 @@
 	import { localDate } from '$lib/time'
 	import { user } from '$lib/stores'
 	import { visitBar } from '../api/bars'
+	import Checkmark from './Checkmark.svelte'
 	export let bar: LocationResponse
 	export let isLoggedIn: boolean = false
 
@@ -10,8 +11,12 @@
 	const placeholder =
 		'https://images.jan.tf/ecmAqc89DiQEu0HlPMBcNxDFyigWMJI-xUJCNJAbklQ/fill/512/512/no/1/bG9jYWw6Ly8vYmFyLXBsYWNlaG9sZGVyLnBuZw.jpg'
 
-	function handleVisitBar(id: number) {
-		visitBar(id).then(() => {
+	function handleVisitBar() {
+		if (bar.visited_at) {
+			// TODO: Remove visit
+			return
+		}
+		visitBar(bar.id).then(() => {
 			bar.visited_at = new Date().toISOString()
 		})
 	}
@@ -22,11 +27,19 @@
 	<div class="bar-content">
 		<h3>{bar.name}</h3>
 		<p>{bar.description ?? 'No Description'}</p>
-		{#if bar.visited_at && isLoggedIn}
-			<p>Visited on: {localDate(bar.visited_at)}</p>
-		{:else if isLoggedIn}
+		{#if isLoggedIn}
 			<p>
-				<button on:click={() => handleVisitBar(bar.id)} class="outline">Mark Visited</button>
+				<button
+					on:click={() => handleVisitBar()}
+					class="visit-button outline"
+					class:visited={bar.visited_at}
+				>
+					{#if bar.visited_at}
+						<span class="checkmark"><Checkmark /></span> {localDate(bar.visited_at)}
+					{:else}
+						Mark Visited
+					{/if}
+				</button>
 			</p>
 		{/if}
 	</div>
@@ -51,4 +64,30 @@
 		object-fit: cover;
 		align-self: center;
 	}
+
+	.bar-content {
+		flex-grow: 1;
+	}
+
+	.visit-button {
+		border-radius: 999rem;
+		padding: 0.5rem 0.75rem 0.5rem 0.75rem;
+		float: right;
+		color: var(--pico-color-zinc-200);
+		border-color: var(--pico-color-zinc-200);
+	}
+
+	.visit-button.visited {
+		color: var(--pico-color-green-400);
+		border-color: var(--pico-color-green-400);
+		cursor: auto;
+	}
+
+	.checkmark {
+		width: 1em;
+		display: inline-block;
+		vertical-align: middle;
+		margin-right: 2px;
+		margin-bottom: 0.1em;
+	}
 </style>
diff --git a/frontend/src/lib/Checkmark.svelte b/frontend/src/lib/Checkmark.svelte
new file mode 100644
index 0000000..c224baa
--- /dev/null
+++ b/frontend/src/lib/Checkmark.svelte
@@ -0,0 +1,105 @@
+<script lang="ts">
+	// https://codepen.io/elevaunt/pen/JYRBzJ
+	export let success: boolean = true
+</script>
+
+{#if success}
+	<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 130.2 130.2">
+		<circle
+			class="path circle success"
+			fill="none"
+			stroke-width="10"
+			stroke-miterlimit="10"
+			cx="65.1"
+			cy="65.1"
+			r="62.1"
+		/>
+		<polyline
+			class="path check success"
+			fill="none"
+			stroke-width="10"
+			stroke-linecap="round"
+			stroke-miterlimit="10"
+			points="100.2,40.2 51.5,88.8 29.8,67.5 "
+		/>
+	</svg>
+{:else}
+	<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 130.2 130.2">
+		<circle
+			class="path circle error"
+			fill="none"
+			stroke-width="10"
+			stroke-miterlimit="10"
+			cx="65.1"
+			cy="65.1"
+			r="62.1"
+		/>
+		<line
+			class="path line error"
+			fill="none"
+			stroke-width="10"
+			stroke-linecap="round"
+			stroke-miterlimit="10"
+			x1="34.4"
+			y1="37.9"
+			x2="95.8"
+			y2="92.3"
+		/>
+		<line
+			class="path line error"
+			fill="none"
+			stroke-width="10"
+			stroke-linecap="round"
+			stroke-miterlimit="10"
+			x1="95.8"
+			y1="38"
+			x2="34.4"
+			y2="92.2"
+		/>
+	</svg>
+{/if}
+
+<style>
+	svg {
+		display: block;
+		overflow: visible;
+	}
+	.path {
+		stroke-dasharray: 1000;
+		stroke-dashoffset: 0;
+	}
+	.success {
+		stroke: var(--pico-color-green-400);
+	}
+	.error {
+		stroke: var(--pico-color-red-400);
+	}
+	.path.circle {
+		animation: dash 0.9s ease-in-out;
+	}
+	.path.line {
+		stroke-dashoffset: 1000;
+		animation: dash 0.9s 0.35s ease-in-out forwards;
+	}
+	.path.check {
+		stroke-dashoffset: -100;
+		animation: dash-check 0.9s 0.35s ease-in-out forwards;
+	}
+
+	@keyframes dash {
+		0% {
+			stroke-dashoffset: 1000;
+		}
+		100% {
+			stroke-dashoffset: 0;
+		}
+	}
+	@keyframes dash-check {
+		0% {
+			stroke-dashoffset: -100;
+		}
+		100% {
+			stroke-dashoffset: 900;
+		}
+	}
+</style>
diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte
index da4dd58..fa20180 100644
--- a/frontend/src/routes/+layout.svelte
+++ b/frontend/src/routes/+layout.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import '@picocss/pico'
+	import '@picocss/pico/css/pico.colors.css'
 	import '$lib/pico-settings.css'
 	import { user } from '$lib/stores'
 	import ThemeSwitcher from '$lib/ThemeSwitcher.svelte'