tygerbytes

// src/main.js
import router from './router';
...
new Vue({
  render: h => h(App),
  router,
  store,
}).$mount('#app');

tygerbytes

import Vue from 'vue';
import Router from 'vue-router';

import RunbyPace from '@/components/RunbyPace.vue';
import TargetPace from '@/components/TargetPace.vue';
import About from '@/components/About.vue';

Vue.use(Router);

export default new Router({

tygerbytes

Rails.application.routes.draw do

  namespace :static_pages, path: '/' do
    get 'about'
    get 'health_check'
  end

  get 'target_pace/calc'

  root 'target_pace#index'

tygerbytes

<template>
  ...
  <input type="text"
         v-model="fiveKmRaceTime"
         v-bind:class="{
          'form-control': true,
          'is-invalid': this.invalidRaceTime }"
         placeholder="A recent 5K race time, like 21:30" />
  <div class="invalid-feedback">{{ this.raceTimeValidationMessage }}</div>
  ...

tygerbytes

<b-navbar fixed="bottom" toggleable="md" type="light" variant="light">
  <b-navbar-toggle target="nav_collapse"></b-navbar-toggle>
  <b-navbar-brand to="/">&#x1F3C3; Runby Pace</b-navbar-brand>
  <b-collapse is-nav id="nav_collapse">
    <b-navbar-nav>
      <b-nav-item to="/">Home</b-nav-item>
      <b-nav-item to="/about">About</b-nav-item>
    </b-navbar-nav>
  </b-collapse>
</b-navbar>

tygerbytes

<nav class="navbar navbar-default navbar-fixed-bottom">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
              data-target="#navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>

tygerbytes

<div class="form-group">
  <label for="run_type">Today, I plan on running:</label>
  <div class="input-group">
    <select name="run_type"
      @change="changeRunType()"
      class="form-control"
      v-model="runTypeOption">
      <option v-for="run in lib.runTypes"
              v-bind:value="run.code"
              v-bind:key="run.Code">

tygerbytes

<div class="form-group">
  <%= label_tag(:run_type, 'Today, I plan on running:') %>
  <div class="input-group">
    <%= select_tag(
      :run_type,
      options_for_select(TargetPaceHelper::all_run_types, :DistanceRun),
      {:class => 'form-control'})
    %>
  </div>
  <div class="text-muted" id="run_type_explanation">

tygerbytes

<div class="text-muted">{{ this.runType.description }}</div>

tygerbytes

<div class="text-muted"><%= run_type.description %></div>