Merge pull request #787 from jovandeginste/rs-from-climb

feat(route-segment): Create route segment from climb/descent

Author: jovandeginste

frontend/src/views/workouts/create_route_segment.js

@@ -19,7 +19,7 @@ class CreateRouteSegmentMap extends HTMLElement {
     }
 
     document.addEventListener("DOMContentLoaded", () => {
-      this.updateInfo();
+      this.updateAll();
     });
   }
 
@@ -91,7 +91,7 @@ class CreateRouteSegmentMap extends HTMLElement {
 
     document.getElementById("start-show").textContent = start;
     this.startMarker.setLatLng(
-      new L.LatLng(this.points[start].lat, this.points[start].lng),
+      new L.LatLng(this.points[start - 1].lat, this.points[start - 1].lng),
     );
 
     if (start > end) {
@@ -136,7 +136,7 @@ class CreateRouteSegmentMap extends HTMLElement {
     const start = Number(document.getElementById("start").value);
     const end = Number(document.getElementById("end").value);
 
-    const d = this.points[end - 1].distance - this.points[start].distance;
+    const d = this.points[end - 1].distance - this.points[start - 1].distance;
     document.getElementById("distance-show").textContent = d.toFixed(2) + " m";
   }
 

pkg/database/workouts_map.go

@@ -119,6 +119,10 @@ func (m *MapPoint) ToOrbPoint() *orb.Point {
 	return &orb.Point{m.Lng, m.Lat}
 }
 
+func (m *MapPoint) IsZero() bool {
+	return m.Lat == 0 && m.Lng == 0
+}
+
 func (d *MapDataDetails) Save(db *gorm.DB) error {
 	return db.Save(d).Error
 }

translations/en.yaml

@@ -106,6 +106,7 @@ en:
     category: Cat.
   translation:
     Climbs: Climbs
+    Create_route_segment_from_climb: Create route segment from this segment
     Latest_measurements: Latest measurements
     Update_measurement: Update measurement
     Steps: Steps

translations/nl.yaml

@@ -103,6 +103,7 @@ nl:
     update: Instellingen bijwerken
   translation:
     Climbs: Beklimmingen
+    Create_route_segment_from_climb: Maak route segment van dit segment
     Latest_measurements: Laatste metingen
     Update_measurement: Meting aanpassen
     Steps: Stappen

views/workouts/create_route_segment.templ

@@ -24,17 +24,24 @@ templ CreateRouteSegment(w *database.Workout) {
 				<div class="inner-form">
 					{{
 						type mapPoint struct {
-							Lat           float64 `json:"lat"`
-							Lng           float64 `json:"lng"`
-							TotalDistance float64 `json:"distance"`
+							Lat           *float64 `json:"lat"`
+							Lng           *float64 `json:"lng"`
+							TotalDistance *float64 `json:"distance"`
 						}
 
 						points := []mapPoint{}
 						for _, p := range w.Details().Points {
+							if p.IsZero() {
+								if len(points) > 0 {
+									points = append(points, points[len(points)-1])
+								}
+								continue
+							}
+
 							points = append(points, mapPoint{
-								Lat:           p.Lat,
-								Lng:           p.Lng,
-								TotalDistance: p.TotalDistance,
+								Lat:           &p.Lat,
+								Lng:           &p.Lng,
+								TotalDistance: &p.TotalDistance,
 							})
 						}
 					}}
@@ -74,7 +81,7 @@ templ CreateRouteSegment(w *database.Workout) {
 										id="start"
 										name="start"
 										min="1"
-										max={ helpers.A2S(len(w.Details().Points)) }
+										max={ helpers.A2S(len(points)) }
 										value="1"
 										oninput="getElementById('segment-map').updateStart()"
 									/>
@@ -90,8 +97,8 @@ templ CreateRouteSegment(w *database.Workout) {
 										id="end"
 										name="end"
 										min="1"
-										max={ helpers.A2S(len(w.Details().Points)) }
-										value={ helpers.A2S(len(w.Details().Points)) }
+										max={ helpers.A2S(len(points)) }
+										value={ helpers.A2S(len(points)) }
 										oninput="getElementById('segment-map').updateEnd()"
 									/>
 									<span id="end-show"></span>
@@ -115,6 +122,17 @@ templ CreateRouteSegment(w *database.Workout) {
 							</tr>
 						</tfoot>
 					</table>
+					<script>
+						const urlParams = new URLSearchParams(window.location.search);
+						const start = urlParams.get("start");
+						if (start) {
+						  document.getElementById("start").value = start;
+						}
+						const end = urlParams.get("end");
+						if (end) {
+						  document.getElementById("end").value = end;
+						}
+					</script>
 				</form>
 			</div>
 		</div>

views/workouts/create_route_segment_templ.go

@@ -6,6 +6,7 @@ import (
 	"github.com/jovandeginste/workout-tracker/v2/views/helpers"
 	"github.com/jovandeginste/workout-tracker/v2/views/partials"
 	"math"
+	"strconv"
 )
 
 templ Show(w *database.Workout) {
@@ -117,7 +118,8 @@ templ renderNotes(w *database.Workout) {
 }
 
 templ renderClimbs(w *database.Workout) {
-	{{ pu := helpers.CurrentUser(ctx).PreferredUnits() }}
+	{{ currentUser := helpers.CurrentUser(ctx) }}
+	{{ pu := currentUser.PreferredUnits() }}
 	<div class="print:w-full overflow-y-auto max-h-[300px] sm:max-h-[400px] md:max-h-[600px] print:max-h-[600px]">
 		<table>
 			<thead>
@@ -151,6 +153,7 @@ templ renderClimbs(w *database.Workout) {
 						@helpers.IconFor("slope_cat")
 						{ i18n.T(ctx, "climb.category") }
 					</th>
+					<th></th>
 				</tr>
 			</thead>
 			<tbody class="font-mono">
@@ -184,6 +187,14 @@ templ renderClimbs(w *database.Workout) {
 							{ helpers.SpeedUnitForWorkout(ctx, w) }
 						</td>
 						<td class="hidden sm:table-cell">{ climb.Category }</td>
+						<td class="text-right">
+							<a
+								href={ templ.SafeURL(helpers.RouteFor(ctx, "workout-route-segment", w.ID) + "?start=" + strconv.Itoa(climb.StartIdx+1) + "&end=" + strconv.Itoa(climb.EndIdx+1)) }
+								title={ i18n.T(ctx, "translation.Create_route_segment_from_climb") }
+							>
+								@helpers.IconFor("route-segment-add")
+							</a>
+						</td>
 					</tr>
 				}
 			</tbody>