jovandeginste / workout-tracker

A workout tracking web application for personal use (or family, friends), geared towards running and other GPX-based activities
Other
945 stars 31 forks source link

Show tempo for running (speed for others) #254

Closed jovandeginste closed 1 month ago

jovandeginste commented 1 month ago

This show the tempo (km/min) instead of the speed (km/h) when the workout type is running. It keeps track of imperial units too.

Supercedes #251

pixelspark commented 1 month ago

Hi @jovandeginste, I think this is a nice and clean solution! (I just peeked at the code changes, didn't test it)

If we still want to add the <abbr> thing to be able to see the other unit by hovering over the element, it can be done like so (note, untested, may need some escaping):

func (wt *WorkoutType) PreferredSpeedMetricHTML(v float64, preferredUnits *UserPreferredUnits) template.HTML {
    speedUnit := preferredUnits.Speed()
    timeUnit := preferredUnits.Tempo() 
    speedFormatter := templatehelpers.HumanSpeedFor(u)
    tempoFormatter := templatehelpers.HumanTempoFor(u)
        secondaryText  := tempoFormatter(v)
    primaryText := speedFormatter(v)

    if *wt == WorkoutTypeRunning {
                // Swap tempo and speed, so that tempo is primarily shown for running
        primaryText, secondaryText = secondaryText, primaryText
    }

    return template.HTML(fmt.Sprintf("<abbr title="%s">%s</abbr>", secondaryText, primaryText))
}

Instead of <abbr> you could also use a <span>, then add the alternative text as <span data-tooltip="..."> and use CSS to show that on hover or click or whatever. Something like this (again, untested):

span[data-tooltip] {
  position:relative;
}

span[data-tooltip]:hover::after {
  position:absolute;
  bottom: 0;
  left: 0;
  background-color: white;
  border: solid 1px black;
  content: attr('data-tooltip');
}
jovandeginste commented 1 month ago

I need to look into abbr

jovandeginste commented 1 month ago

I think this more or less does it (and I did some other cosmetic changes)