Vue and Mac Normalization

Vue and Mac Normalization

by Trever Shick

HTML

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vuex"></script>

<div id="app">
  <p>{{ message }}</p>
  <input v-model="unformatted" v-on:keyup.enter="calculate">
</div>

JavaScript

Vue.use(Vuex);

function normalizeMac(mac) {
  var filtered = _(mac).filter(function(x) {
      return (x >= 'a' && x <= 'f') || (x >= 'A' && x <= 'F') || (x >= '0' && x <= '9');
    })
    .map(function(c) {
      return c.toLowerCase();
    })
    .value();

  if (filtered.length != 12) {
    return null;
  }
  return _.map(_.range(0, 12, 2), function(i) {
    return filtered[i] + filtered[i + 1]
  }).join('-');

};

const store = new Vuex.Store({
  state: {
    inputValue: 'a0-bF-cc-dd-ee-ff'
  },
  mutations: {
    updateInputValue(state, val) {
      state.inputValue = val;
    }
  }
});

const app = new Vue({
  el: '#app',
  store,
  data: {
    unformatted: 'a0-bF-cc-dd-ee-ff',
  },
  computed: {
    message() {
      return normalizeMac(this.$store.state.inputValue);
    }
  },
  methods: {
    calculate() {
      this.$store.commit('updateInputValue', this.unformatted);
    }
  }
});