From 31ce368b5f0bd45463ae2eb1597fade558233d6e Mon Sep 17 00:00:00 2001
From: sanderisbestok <sanderisbestok@gmail.com>
Date: Fri, 9 Aug 2024 15:46:29 +0200
Subject: [PATCH] feat: now possible to uncheck on the map

---
 frontend/src/lib/MapBarItem.svelte   | 25 +++++++++++++++++++------
 frontend/src/routes/map/+page.svelte |  4 ++++
 2 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/frontend/src/lib/MapBarItem.svelte b/frontend/src/lib/MapBarItem.svelte
index 2a50538..1475220 100644
--- a/frontend/src/lib/MapBarItem.svelte
+++ b/frontend/src/lib/MapBarItem.svelte
@@ -2,10 +2,11 @@
 	import type { LocationResponse, WhoResponse } from '../models/schemas'
 	import { user } from '$lib/stores'
 	import Checkmark from './Checkmark.svelte'
-	import { visitBar } from '../api/bars'
+	import { visitBar, deleteVisit } from '../api/bars'
 
 	export let bar: LocationResponse
 	export let onVisitCallback: CallableFunction
+	export let onDeleteVisitCallback: CallableFunction
 
 	let isLoggedIn: boolean = false
 
@@ -13,11 +14,16 @@
 		isLoggedIn = value !== undefined
 	})
 
-	function handleVisitBar() {
-		if (bar.visited_at) {
-			// TODO: Remove visit
-			return
+	function handleDeleteBarVisit() {
+		if (confirm(`Are you sure you want to remove your visit to ${bar.name}?`)) {
+			deleteVisit(bar.id).then(() => {
+				bar.visited_at = null
+				onDeleteVisitCallback()
+			})
 		}
+	}
+
+	function handleVisitBar() {
 		visitBar(bar.id).then(() => {
 			bar.visited_at = new Date().toISOString()
 			onVisitCallback()
@@ -32,7 +38,9 @@
 	{#if isLoggedIn}
 		<div>
 			{#if bar.visited_at}
-				<span class="checkmark"><Checkmark /></span>
+				<button on:click={handleDeleteBarVisit} class="hidden-button"
+					><span class="checkmark"><Checkmark /></span></button
+				>
 			{:else}
 				<button on:click={handleVisitBar} class="visit-button outline">Check in</button>
 			{/if}
@@ -53,4 +61,9 @@
 	.content {
 		text-align: center;
 	}
+	.hidden-button {
+		all: unset;
+		display: inline-block;
+		cursor: pointer;
+	}
 </style>
diff --git a/frontend/src/routes/map/+page.svelte b/frontend/src/routes/map/+page.svelte
index c78e863..8f6c1c1 100644
--- a/frontend/src/routes/map/+page.svelte
+++ b/frontend/src/routes/map/+page.svelte
@@ -19,6 +19,10 @@
 				onVisitCallback: () => {
 					layer._path.style.stroke = GREEN
 					layer._path.style.fill = GREEN
+				},
+				onDeleteVisitCallback: () => {
+					layer._path.style.stroke = RED
+					layer._path.style.fill = RED
 				}
 			}
 		})