☰

Garmin Connect Workout - Copy Workout Step

Adds a clickable '+' icon to top left of each workout step that creates a copy of that step.

// ==UserScript==
// @name     Garmin Connect Workout - Copy Workout Step
// @description Adds a clickable '+' icon to top left of each workout step that creates a copy of that step.
// @author Do Om
// @namespace https://connect.garmin.com
// @include https://connect.garmin.com/modern/workout/*
// @include https://connect.garmin.com/modern/workout/edit/*
// @version  1
// @grant    none
// ==/UserScript==

var style = document.createElement('style')
style.innerHTML = `
#cloneBtn {
  float: left;
  position: relative;
  margin-left: 6px;
  margin-top: 1px%;
  cursor: pointer;
}`;
document.head.appendChild(style)

idList = []
cloned = false
workoutType = null
workoutSelect = {
  "workout-step-warm": 0,
  "workout-step-run": 1,
  "workout-step-recover": 2,
  "workout-step-rest": 3,
  "workout-step-cool": 4,
  "workout-step-other": 5
}

durationSelect = {
  1:"step-duration-time",
  2:"step-duration-distance",
  3:"step-duration-lap-button",
  4:"step-duration-cal",
  5:"step-duration-hr"
}
durationIdx = null
durationTime = null
durationUnit = null

//#duration-distance
durationValue = null
durationOption = null

targetExists = false
stepTargetValue = null
stepTargetIdx = null
heartRateIdx = null
targetValue = null
targetFrom = null
targetTo = null

function createCloneBtn() {
  var div = document.createElement('span')
  div.setAttribute('id', 'cloneBtn')
  div.setAttribute('class', 'has-tooltip')
  //div.classList.add('pull-left')
 
  let clone = document.createElement('a')
  clone.classList.add('cloneBtn')
  clone.innerHTML = '+'
  div.append(clone)
  
  clone.onclick = function() {
    cloned = true
    let currStep = this.parentNode.parentNode
    workoutType = currStep.classList[1]
    
    //TODO: change these to value instead of index
    let duration = currStep.querySelector('.select-step-duration')
    durationIdx = duration.selectedIndex
    let durationDiv = currStep.querySelector('.step-duration')
    switch(duration.value) {
      case 'time':
        durationValue = durationDiv.querySelector('input[name="duration-time"]').value
        durationOption = null
        break
      case 'distance':
        durationValue = durationDiv.querySelector('input[name="duration-distance"]').value
        durationOption = durationDiv.querySelector('select[name="distanceUnit"]').value

        break
      case 'lap.button':
        durationValue = null
        durationOption = null
        break
      case 'calories':
        durationValue = durationDiv.querySelector('input[name="duration-calories"]').value
        durationOption = null
        break
      case 'heart.rate.zone':
        durationOption = durationDiv.querySelector('select[name="heart-rate-select"]').value
        durationValue = durationDiv.querySelector('input[name="duration-heart-rate-custom"]').value
        break
      default:
        durationValue = null
        durationOption = null
        break
    }
    
    var stepTargetSelect = currStep.querySelector('.select-step-target')
    stepTargetValue = stepTargetSelect.value
    stepTargetIdx = stepTargetSelect.selectedIndex
    
    var stepTargetDiv = currStep.querySelector('.step-target')
    addMore = currStep.querySelector('#add-step-target')
    if(addMore.classList.contains('hide') && stepTargetSelect.value != 'no.target') {

      targetValue = stepTargetSelect.value

      switch(targetValue) {
        case 'pace.zone':
          targetExists = true
          //console.log('pace.zone')
          targetFrom = stepTargetDiv.querySelector('input[name="target-pace-from"]').value
          targetTo = stepTargetDiv.querySelector('input[name="target-pace-to"]').value
          break
        case 'speed.zone':
          targetExists = true
          targetFrom = stepTargetDiv.querySelector('input[name="target-speed-from"]').value
          targetTo = stepTargetDiv.querySelector('input[name="target-speed-to"]').value
          break
        case 'cadence':
          targetExists = true
          targetFrom = stepTargetDiv.querySelector('input[name="target-cadence-from"]').value
          targetTo = stepTargetDiv.querySelector('input[name="target-cadence-to"]').value
          break
        case 'heart.rate.zone':
          targetExists = true
          heartRateIdx = stepTargetSelect.selectedIndex
          
          if(heartRateIdx == 9) {
            targetFrom = stepTargetDiv.querySelector('input[name="target-heart-rate-custom-from"]').value
            targetTo = stepTargetDiv.querySelector('input[name="target-heart-rate-custom-to"]').value
          }
          break
        default:
          targetExists = false
          break
      }
    } else {
      //console.log('nottarget')
    }
    
    var newStepBtn = document.querySelector('#new-step')
    newStepBtn.click()
   
  }
  return div
}

var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    
      if(mutation.target.classList.contains('workout-edit')) {
      //if (!mutation.addedNodes) return
      var steps = mutation.target.querySelectorAll('.workout-step')
    
    
      for (var i = 0; i < steps.length; i++) {
       var node = steps[i]
      
       if(node.querySelector('#cloneBtn') == null) {
          node.prepend(createCloneBtn())
        }
      }     
  }
    

    
    for (var i = 0; i < mutation.addedNodes.length; i++) {
      var node = mutation.addedNodes[i]
      
      if(node.classList.contains('workout-step') && cloned == true) {
        let workoutIdx = workoutSelect[workoutType]
        let stepType = node.querySelector('.select-step-type')
        stepType.selectedIndex = workoutIdx
        stepType.dispatchEvent(new Event('change', { bubbles: true }))
        let stepDefine = node.querySelector('.step-define')
        
        let duration = node.querySelector('.select-step-duration')
        duration.selectedIndex = durationIdx
        duration.dispatchEvent(new Event('change', { bubbles: true }))
        let durationDiv = node.querySelector('.step-duration')

        switch(duration.value) {
          case 'time': {
            let input = durationDiv.querySelector('input[name="duration-time"]')
            input.value = durationValue
            input.dispatchEvent(new Event('change', { bubbles: true }))
            
          } break
          case 'distance': {
            let input = durationDiv.querySelector('input[name="duration-distance"]') 
            input.value = durationValue
            input.dispatchEvent(new Event('change', { bubbles: true }))
            let option = durationDiv.querySelector('select[name="distanceUnit"]') 
            option.value = durationOption
            option.dispatchEvent(new Event('change', { bubbles: true }))
          } break
          case 'lap.button':
            break
          case 'calories': {
            let input = durationDiv.querySelector('input[name="duration-calories"]')
            input.value = durationValue
            input.dispatchEvent(new Event('change', { bubbles: true }))            
          } break
          case 'heart.rate.zone': {
            let option = durationDiv.querySelector('select[name="heart-rate-select"]')
            option.value = durationOption
            option.dispatchEvent(new Event('change', { bubbles: true }))

            let input = durationDiv.querySelector('input[name="duration-heart-rate-custom"]')
            input.value = durationValue
            input.dispatchEvent(new Event('change', { bubbles: true }))
          } break
          default:
            break
        }
        
        var stepTargetSelect = node.querySelector('.select-step-target')
        
        var stepTargetDiv = node.querySelector('.step-target')
        
        if(targetExists == true) {
           let addMore = node.querySelector('#add-step-target')
           addMore.click()
        }
        stepTargetSelect.selectedIndex = stepTargetIdx
        stepTargetSelect.dispatchEvent(new Event('change', { bubbles: true }));
        stepTargetDiv.dispatchEvent(new Event('change', { bubbles: true }));
        let targetValue = stepTargetSelect.value 
        switch(targetValue) {
          case 'pace.zone': {
            let inputFrom = stepTargetDiv.querySelector('input[name="target-pace-from"]')
            inputFrom.value = targetFrom
            inputFrom.dispatchEvent(new Event('change', { bubbles: true }))
            let inputTo = stepTargetDiv.querySelector('input[name="target-pace-to"]')
            inputTo.value = targetTo
            inputTo.dispatchEvent(new Event('change', { bubbles: true }))
          } break
          case 'speed.zone': {
            let inputFrom = stepTargetDiv.querySelector('input[name="target-speed-from"]')
            inputFrom.value = targetFrom
            inputFrom.dispatchEvent(new Event('change', { bubbles: true }))
            
            let inputTo = stepTargetDiv.querySelector('input[name="target-speed-to"]')
            inputTo.value = targetTo
            inputTo.dispatchEvent(new Event('change', { bubbles: true }))
          } break
          case 'cadence': {
            let inputFrom = stepTargetDiv.querySelector('input[name="target-cadence-from"]')
            inputFrom.value = targetFrom
            inputFrom.dispatchEvent(new Event('change', { bubbles: true }))
            
            let inputTo = stepTargetDiv.querySelector('input[name="target-cadence-to"]')
            inputTo.value = targetTo
            inputTo.dispatchEvent(new Event('change', { bubbles: true }))
          } break
          case 'heart.rate.zone': {
            if(heartRateIdx == 9) {
              let inputFrom = stepTargetDiv.querySelector('input[name="target-heart-rate-custom-from"]')
              inputFrom.value = targetFrom
              inputFrom.dispatchEvent(new Event('change', { bubbles: true }))
              
              let inputTo = stepTargetDiv.querySelector('input[name="target-heart-rate-custom-to"]')
              inputTo.value = targetTo
              inputTo.dispatchEvent(new Event('change', { bubbles: true }))
            }
          } break
          default:
            break
        }
        // Add clone button
        let div = createCloneBtn()
        node.prepend(div)
        
      }
      targetExists = false
      cloned = false
      
    }
  })
})

observer.observe(document.body, {
    childList: true
  , subtree: true
  , attributes: false
  , characterData: false
})

//observer.disconnect()