Merge pull request #169 from dbrgn/133-location-details-buttons

Add buttons to location details page. Fixes #133.
dbrgn · May 5, 2024 · 166bdc6 · 166bdc6
2 parents e9ee4b5 + ba250a0
commit 166bdc6
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 14 deletions.
diff --git a/frontend/src/routes/flights/[id]/+page.svelte b/frontend/src/routes/flights/[id]/+page.svelte
@@ -34,15 +34,19 @@
   {#if landingAt}to {landingAt.name}{/if}
 </h2>
 
-<p class="content">
-  <a href="/flights/{flight.id}/edit/" class="button is-light">Edit this flight</a>
-  {#if flight.hasIgc}
-    <a href="/api/v1/flights/{flight.id}/igc/" class="button is-light" data-sveltekit-reload>
-      <span class="icon is-small"><i class="fa-solid fa-download"></i></span>&nbsp;&nbsp;Download
-      IGC
-    </a>
-  {/if}
-</p>
+<div class="is-flex is-justify-content-space-between mb-5">
+  <div class="left">
+    <a href="/flights/{flight.id}/edit/" class="button is-light">Edit this flight</a>
+  </div>
+  <div class="right">
+    {#if flight.hasIgc}
+      <a href="/api/v1/flights/{flight.id}/igc/" class="button is-light" data-sveltekit-reload>
+        <span class="icon is-small"><i class="fa-solid fa-download"></i></span>&nbsp;&nbsp;Download
+        IGC
+      </a>
+    {/if}
+  </div>
+</div>
 
 <section>
   <table class="table is-fullwidth is-striped is-hoverable">

diff --git a/frontend/src/routes/locations/+page.svelte b/frontend/src/routes/locations/+page.svelte
@@ -166,15 +166,15 @@
               <a
                 class="icon"
                 href="https://www.google.com/maps/place/{lat},{lon}/"
-                title="View in Google Maps"
+                title="View on Google Maps"
                 target="_blank"
               >
                 <i class="fa-solid fa-map-marker-alt"></i>
               </a>
               <a
                 class="icon"
                 href="https://www.openstreetmap.org/?mlat={lat}&mlon={lon}#map=16/{lat}/{lon}"
-                title="View in OpenStreetMap"
+                title="View on OpenStreetMap"
                 target="_blank"
               >
                 <i class="fa-solid fa-map-pin"></i>

diff --git a/frontend/src/routes/locations/[id]/+page.svelte b/frontend/src/routes/locations/[id]/+page.svelte
@@ -22,9 +22,43 @@
 
 <h2 class="title is-2">Location: {location.name}</h2>
 
-<p class="content">
-  <a href="/locations/{location.id}/edit/" class="button is-light">Edit this location</a>
-</p>
+<div class="is-flex is-justify-content-space-between mb-5">
+  <div class="left">
+    <a href="/locations/{location.id}/edit/" class="button is-light">Edit this location</a>
+  </div>
+  <div class="right">
+    {#if location.coordinates !== undefined}
+      {@const lon = location.coordinates.lon}
+      {@const lat = location.coordinates.lat}
+      <a
+        class="button is-light"
+        href="https://www.google.com/maps/place/{lat},{lon}/"
+        title="View on Google Maps"
+        target="_blank"
+      >
+        <i class="fa-solid fa-map-marker-alt"></i>&nbsp;View on Google Maps
+      </a>
+      <a
+        class="button is-light"
+        href="https://www.openstreetmap.org/?mlat={lat}&mlon={lon}#map=16/{lat}/{lon}"
+        title="View on OpenStreetMap"
+        target="_blank"
+      >
+        <i class="fa-solid fa-map-pin"></i>&nbsp;View on OpenStreetMap
+      </a>
+      {#if lat > 45.8 && lat < 48 && lon > 5.9 && lon < 11.4}
+        <a
+          class="button is-light"
+          href="https://map.geo.admin.ch/?swisssearch={lat},{lon}"
+          title="View on SwissTopo"
+          target="_blank"
+        >
+          <i class="fa-solid fa-map"></i>&nbsp;View on SwissTopo
+        </a>
+      {/if}
+    {/if}
+  </div>
+</div>
 
 <section class="data">
   <table class="table is-fullwidth is-striped is-hoverable">