WIP of display modules. Vue parcel setup.

2020-08-26 00:44:22 +02:00
parent 43153bc697
commit 28cec0b7b4
11 changed files with 622 additions and 0 deletions
--- a/App.vue
+++ b/App.vue
@@ -0,0 +1,77 @@
+<template>
+  <div class="flex">
+    <colored-monitor v-for="hive in hives" v-bind="hive" />
+  </div>
+</template>
+
+<script>
+import ColoredMonitor from 'components/coloredMonitor'
+
+export default {
+  components: { ColoredMonitor },
+  data() {
+    return {
+      hives: [],
+      names: ['Lisa', 'Jeniffer', 'Becky', 'Margaret', 'Betty', 'Hellen', 'Dorothy', 'Deborah', 'Michelle'],
+      boxTypes: ['Brewed', 'Honey', 'Flow'],
+      sensorTypes: ['humidity', 'temperature', 'weight'],
+      severityLvls: ['ok', 'warning', 'error']
+    }
+  },
+  methods: {
+    randomFromList(list) {
+      return list[Math.floor(Math.random() * list.length)];
+    },
+    randomReading(type) {
+      if (type == 'humidity') {
+        const value = Math.floor(Math.random() * (100-70) + 70);
+        return `${value}%`
+      }  else if (type == 'temperature') {
+        const value = Math.floor(Math.random() * (35-28) + 28);
+        return `${value}°`
+      } else if (type == 'weight') {
+        const val =  Math.floor(Math.random() * (60-20) + 20);
+        return `${val}kg` 
+      } else {
+          return 'NaN'
+      }
+    },
+    randomSeverity() {
+      let chance = []
+      chance = chance.concat(new Array(4).fill(this.severityLvls[0]));
+      chance = chance.concat(new Array(2).fill(this.severityLvls[1]));
+      chance = chance.concat(new Array(1).fill(this.severityLvls[2]));
+      return this.randomFromList(chance)
+    },
+    getHiveData() {
+      let data = [];
+      const length = 5;
+      for (let i = 0; i < length; i++) {
+        let hive = this.randomFromList(this.names);
+        let box = this.randomFromList(this.boxTypes);
+        let type = this.randomFromList(this.sensorTypes);
+        let reading = this.randomReading(type);
+        let severity = this.randomSeverity();
+        console.log(severity)
+        data.push({ hive, box, type, reading, severity })
+      }
+      return Promise.resolve(data);
+    }
+  },
+  beforeMount() {
+    this.getHiveData()
+      .then(data => this.hives = data)
+  }
+}
+</script>
+
+<style scoped>
+.flex {
+  display: flex;
+  justify-content: space-around;
+  flex-wrap: wrap;
+}
+.name {
+  color: pink;
+}
+</style>
--- a/components/coloredMonitor.vue
+++ b/components/coloredMonitor.vue
@@ -0,0 +1,145 @@
+<template>
+  <div class="container" :class="colorMapper[severity]">
+    <div class="heading" v-if="hive != null && box == null">
+      <span class="title">{{ hive }}</span>
+    </div>
+    <div class="heading" v-else>
+      <span class="title">{{ hive || 'Becky' }}</span>
+      <span class="subtitle">Box: {{ box || 'Brewed' }}</span>
+    </div>
+
+    <div class="reading">
+      <i :class="'icon icon--' + typeMapper[type]"></i>
+      <span class="value">{{ reading }}</span>
+    </div>
+
+    <div class="status">
+      <label>Last reading:</label>
+      <span class="value">{{ Math.floor(Math.random() * 10) }} minutes ago</span>
+
+    <div class="indicator"></div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    severity: {
+      type: String,
+      required: false,
+    },
+    hive: {
+      type: String,
+      default: null
+    },
+    box: {
+      type: String,
+      default: null
+    },
+    type: {
+      type: String,
+      required: true
+    },
+    reading: {
+      type: String,
+      required: true
+    }
+  },
+  data() {
+    return {
+      colorMapper: {
+        'ok': 'green',
+        'warning': 'orange',
+        'error': 'red'
+      },
+      typeMapper: {
+        'humidity': 'raindrop',
+        'weight': 'barometer',
+        'temperature': 'thermometer'
+      }
+    }
+  }
+
+}
+</script>
+<style lang="scss" scoped>
+
+.green {
+  --primary: #8ad721;
+  --border: rgba(138, 215, 33, .4);
+  --background: #f7fef2;
+}
+
+.orange {
+  --primary: #e5ac59;
+  --border: rgba(229, 172, 89, .4);
+  --background: #fff4e6;
+}
+
+.red {
+  --primary: #da1f1e;
+  --border: rgba(218, 31, 30, .2);
+  --background: #feedef;
+}
+
+
+.container {
+  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
+
+  position: relative;
+  height: 100%;
+  margin: 0.5rem;
+  padding: 1rem;
+  font-weight: 500;
+
+  background-color: var(--background);
+  border: 2px solid var(--border);
+  border-radius: 6px;
+  box-shadow: 2px 2px 10px rgba(0,0,0,.1);
+
+  & > div:not(:first-of-type) {
+    margin-top: 1rem;
+  }
+}
+
+.indicator {
+  position: absolute;
+  top: 0.4rem;
+  right: 0.4rem;
+  background-color: var(--primary);
+  width: 1rem;
+  height: 1rem;
+  border-radius: 50%;
+}
+
+.heading {
+  display: flex;
+  flex-direction: column;
+
+  .title {
+    font-size: 1.8rem;
+  }
+  .subtitle {
+    color: rgba(0,0,0,.6);
+  }
+}
+
+.reading {
+  color: var(--primary);
+  .icon {
+    font-size: 2.4rem;
+  }
+  .value {
+    font-size: 3rem; 
+  }
+}
+
+.status {
+  display: flex;
+  flex-direction: column;
+
+  .value {
+    color: rgba(0,0,0,.7);
+  }
+}
+</style>
--- a/fonts/icomoon.eot
+++ b/fonts/icomoon.eot
--- a/fonts/icomoon.svg
+++ b/fonts/icomoon.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<svg xmlns="http://www.w3.org/2000/svg">
+<metadata>Generated by IcoMoon</metadata>
+<defs>
+<font id="icomoon" horiz-adv-x="1024">
+<font-face units-per-em="1024" ascent="960" descent="-64" />
+<missing-glyph horiz-adv-x="1024" />
+<glyph unicode="&#x20;" horiz-adv-x="512" d="" />
+<glyph unicode="&#xe900;" glyph-name="celsius" d="M7.042 683.342c0 48.089 17.309 89.446 50.977 123.114 34.63 34.63 75.025 50.977 123.114 50.977 47.126 0 88.486-17.309 122.149-50.977 33.668-34.63 50.977-75.025 50.977-123.114s-17.309-89.446-50.977-123.114c-33.668-34.63-75.025-50.977-122.149-50.977-48.089 0-89.446 17.309-123.114 50.977s-50.977 75.025-50.977 123.114zM91.682 683.342c0-25.012 8.655-46.17 25.969-64.444 18.271-18.271 39.435-26.926 64.444-26.926s46.17 8.655 64.444 26.926 26.926 39.435 26.926 64.444c0 25.012-8.655 46.17-26.926 64.444s-39.435 26.926-64.444 26.926c-25.012 0-46.17-8.655-64.444-26.926-17.309-17.309-25.969-39.435-25.969-64.444zM465.83 258.213c0-74.063 20.198-139.466 61.555-197.175 21.16-29.815 50.977-53.866 89.446-72.137 37.507-17.309 80.792-26.926 128.887-26.926 140.426 0 228.916 53.866 264.501 160.624 3.85 13.47 1.927 26.926-5.768 39.435s-18.271 19.236-31.741 22.124c-13.47 3.85-26.926 1.927-38.469-6.729-11.544-7.693-19.236-18.271-22.124-32.703 0-0.962 0-1.927-0.962-4.811l-1.927-6.729c-10.582-18.271-25.012-32.703-43.284-43.284-29.815-18.271-69.248-26.926-118.308-26.926-29.815 0-56.749 4.811-79.83 15.39-38.469 16.348-65.409 45.21-81.754 85.607-10.582 25.969-16.348 57.706-16.348 93.297v309.707c0 14.432 0.962 28.853 2.888 43.284 3.85 36.548 18.271 70.21 43.284 100.028 27.891 33.668 72.137 50.013 132.731 50.013 50.013 0 89.446-8.655 118.308-25.969 19.236-11.544 33.668-25.969 43.284-43.284 0.962-1.927 0.962-4.811 1.927-7.693s0.962-4.811 0.962-5.768c3.85-13.47 11.544-23.086 22.124-28.853 11.544-6.729 24.048-7.693 38.469-4.811 13.47 2.888 24.048 10.582 31.741 22.124s9.616 24.048 5.768 38.469v0.962l-7.693 22.124c-4.811 10.582-13.47 25.012-26.926 41.357-12.504 17.309-27.891 30.78-43.284 42.322-20.198 14.432-46.17 25.969-78.866 36.548-32.703 9.616-68.287 14.432-106.767 14.432-49.051 0-91.373-8.655-129.844-25.969-37.507-17.309-67.328-40.396-87.529-70.21-41.357-56.749-62.521-123.114-62.521-199.101v-308.745z" />
+<glyph unicode="&#xe901;" glyph-name="barometer" d="M85.748 536.172c0 57.728 11.079 113.122 33.821 166.184s53.063 97.961 91.548 135.864 83.967 68.223 136.447 90.966c52.479 22.742 107.874 33.821 165.601 33.821s113.122-11.079 166.184-33.821c52.479-22.742 97.961-53.063 135.864-90.966s68.223-83.384 90.966-135.864 33.821-107.874 33.821-166.184c0-94.463-27.99-178.43-83.967-253.069-55.978-74.054-128.284-124.784-216.334-152.19v-191.841h-247.236v189.509c-89.798 26.24-163.854 76.969-220.997 152.19s-85.717 160.353-85.717 255.399zM179.628 536.172c0-90.382 32.656-167.935 98.544-232.661 64.726-65.308 142.862-97.961 234.408-97.961 60.061 0 116.038 14.577 166.767 44.317 51.312 29.738 91.548 69.974 121.87 120.702 29.738 50.729 44.898 106.127 44.898 166.184 0 44.898-8.745 87.464-26.24 128.865s-41.401 76.386-71.138 106.127c-29.738 29.738-65.308 53.647-106.709 71.138s-83.967 26.24-128.865 26.24c-44.898 0-87.464-8.745-128.865-26.24s-76.386-41.401-106.127-71.138c-29.738-29.738-53.647-65.308-71.138-106.127-18.658-41.983-27.408-84.55-27.408-129.449zM213.45 515.18v41.983h126.534v-41.983h-126.534zM277.010 721.6l30.32 30.32 88.632-88.632-30.32-30.905-88.632 89.216zM424.536 434.127c0 24.49 8.745 45.481 25.656 63.558s37.903 27.408 61.808 27.99l159.189 261.815 38.486-20.409-117.788-281.639c10.496-14.577 15.161-31.488 15.161-51.312 0-25.656-8.745-47.231-26.823-64.726s-39.651-26.24-65.308-26.24c-25.072 0-46.649 8.745-64.143 26.24s-26.24 39.068-26.24 64.726zM500.921 706.438v125.951h40.233v-126.534h-40.233zM672.353 515.762v43.151h126.534v-43.151h-126.534z" />
+<glyph unicode="&#xe902;" glyph-name="humidity" d="M113.789 330.785c0 47.1 12.846 101.159 38.537 162.175s58.876 120.427 99.553 177.161c83.496 110.258 156.287 193.754 217.303 249.953l40.142 38.537c13.38-13.917 28.368-26.762 44.425-38.537 21.945-22.48 55.664-59.411 100.624-111.864s84.031-99.018 116.144-141.836c38.002-54.059 70.65-112.398 96.876-173.949s39.608-115.61 39.608-162.175c0-53.523-10.169-104.37-31.043-153.075s-48.705-90.99-84.031-126.315c-35.325-35.325-77.608-63.693-126.85-84.567s-101.159-31.579-155.752-31.579c-53.523 0-104.37 10.169-153.075 30.508s-90.99 47.636-126.315 82.961c-35.325 34.791-63.693 77.073-84.567 125.779s-31.579 101.159-31.579 156.823zM234.75 487.608c0-44.425 9.099-79.75 27.831-106.51 18.734-26.226 47.1-39.608 85.102-39.608 38.537 0 66.904 13.38 86.173 39.608 18.734 26.226 28.368 61.551 28.902 106.51-0.535 44.959-10.169 80.285-28.902 107.047-18.734 26.226-47.636 39.608-86.173 39.608-38.002 0-66.368-13.38-85.102-39.608-18.734-26.762-27.831-62.087-27.831-107.047zM318.782 487.608c0 8.028 0 14.451 0 18.734s0.535 10.169 1.071 17.663c0.535 7.494 1.071 13.38 2.677 17.128s2.677 8.563 4.817 12.846c2.14 4.282 4.817 8.028 8.028 9.634 3.746 2.14 7.494 3.211 12.311 3.211 7.494 0 13.38-2.14 17.663-6.423s7.494-11.24 9.099-20.339c1.606-9.634 2.677-17.128 3.211-24.085s0.535-16.057 0.535-27.831c0-12.311 0-21.409-0.535-27.831s-1.606-14.451-3.211-24.085c-1.606-9.099-4.817-16.057-9.099-20.339s-10.169-6.423-17.663-6.423c-4.817 0-8.563 1.071-12.311 3.211s-6.423 5.352-8.028 9.634c-2.14 4.282-3.746 9.099-4.817 12.846-1.071 4.282-2.14 10.169-2.677 17.128-0.535 7.494-1.071 13.38-1.071 17.128s0 10.169 0 18.197zM350.36 72.803h70.65l267.079 574.838h-72.256l-265.474-574.838zM580.51 232.837c0.535-44.959 10.705-80.285 29.437-107.047 18.734-26.226 47.636-39.608 85.636-39.608 38.537 0 66.904 13.38 85.636 39.608s27.831 62.087 28.368 107.047c-0.535 44.959-9.634 80.285-28.368 106.51s-47.1 39.608-85.636 39.608c-38.002 0-66.904-13.38-85.636-39.608-19.268-26.226-28.902-61.551-29.437-106.51zM664.541 232.837c0 12.311 0 21.409 0.535 27.831s1.606 14.451 3.211 24.085 4.817 16.057 9.099 20.339 10.169 6.423 17.663 6.423c4.817 0 9.099-1.071 12.846-3.211s6.423-5.352 8.563-10.169c2.14-4.817 3.746-9.099 5.352-12.846s2.14-9.634 2.677-17.128l0.535-17.128v-18.197c0-8.563 0-14.986 0-18.734l-0.535-17.128-2.677-17.128-5.352-12.846-8.563-10.169-12.846-3.211c-7.494 0-13.38 2.14-17.663 6.423s-7.494 11.24-9.099 20.339c-1.606 9.634-2.677 17.663-3.211 24.085s-0.535 16.057-0.535 28.368z" />
+<glyph unicode="&#xe903;" glyph-name="thermometer" d="M283.435 180.234c0 38.168 8.981 73.644 26.495 106.873s42.21 60.621 74.093 82.624v445.456c0 35.925 12.123 66.459 36.821 91.158s55.233 37.721 91.158 37.721c36.372 0 66.909-12.573 91.605-37.272 24.698-25.146 37.272-55.233 37.272-91.158v-445.456c31.883-22.003 56.132-49.844 73.644-82.624s26.045-68.705 26.045-106.873c0-41.314-10.328-79.931-30.535-114.956s-48.049-62.867-83.074-83.074-73.194-30.535-114.956-30.535c-41.314 0-79.482 10.328-114.507 30.535s-62.867 48.049-83.523 83.074-30.535 73.194-30.535 114.507zM362.467 180.234c0-41.761 14.819-77.686 44.007-107.323s64.663-44.456 105.977-44.456c41.761 0 77.686 14.819 107.772 44.905s45.353 65.562 45.353 106.424c0 27.842-7.184 53.886-21.554 77.686s-34.128 42.21-59.275 55.233l-12.573 6.288c-4.491 1.796-6.735 6.288-6.735 13.023v483.177c0 14.37-4.939 26.495-15.268 36.372-10.328 9.43-22.902 14.37-38.168 14.37-14.37 0-26.942-4.939-37.272-14.37s-15.268-21.554-15.268-36.372v-482.278c0-6.735-2.246-11.226-6.288-13.023l-12.123-6.288c-24.698-13.023-44.007-31.433-57.928-55.233s-20.656-49.395-20.656-78.135zM397.493 180.234c0-31.883 10.777-59.275 32.78-81.728s48.049-33.679 79.032-33.679 57.479 11.226 80.381 33.679c22.902 22.453 34.128 49.844 34.128 81.277 0 28.291-9.879 53.437-29.188 74.991s-43.109 34.577-70.951 38.168v330.499c0 2.695-1.347 5.837-4.491 8.531-3.142 3.142-6.288 4.491-9.879 4.491-4.042 0-7.184-1.347-9.43-3.593-2.246-2.695-3.593-5.388-3.593-9.43v-329.603c-27.391-4.042-50.744-16.614-70.051-38.168-19.31-22.003-28.738-46.702-28.738-75.44z" />
+<glyph unicode="&#xe904;" glyph-name="fahrenheit" d="M-0.891 687.946c0 48.114 17.321 89.491 51.001 123.172s75.057 51.001 123.172 51.001c47.15 0 88.53-17.321 122.207-51.001 33.68-34.642 51.001-75.057 51.001-123.172s-17.321-89.491-51.001-124.133c-33.68-34.642-75.057-51.963-122.207-51.963s-88.53 17.321-123.172 51.963c-33.68 34.642-51.001 76.018-51.001 124.133zM83.79 687.946c0-25.020 8.66-46.189 25.981-64.471 18.282-18.282 39.454-26.943 64.471-26.943s46.189 8.66 64.471 26.943 26.943 39.454 26.943 64.471c0 25.020-8.66 46.189-26.943 63.51s-39.454 26.943-64.471 26.943c-25.020 0-46.189-8.66-64.471-25.981-17.321-17.321-25.981-38.49-25.981-64.471zM508.152 24.94c0-13.473 4.812-25.981 14.434-35.603s22.133-14.434 35.603-14.434c13.473 0 25.981 4.812 35.603 14.434s14.434 22.133 14.434 35.603v364.7h275.209c13.473 0 25.981 4.812 35.603 15.395s14.434 22.133 14.434 36.567c0 14.434-4.812 25.981-14.434 36.567-9.622 9.622-22.133 14.434-36.567 14.434h-275.209v262.7h367.587c13.473 0 25.020 4.812 34.642 14.434s13.473 22.133 13.473 36.567-4.812 25.981-13.473 36.567-20.208 14.434-34.642 14.434h-459.003c-6.735 0-9.622-3.848-9.622-10.586v-821.78z" />
+<glyph unicode="&#xe905;" glyph-name="raindrop" d="M123.657 334.544c0-68.84 17.211-133.189 52.377-192.302s82.308-107.001 142.167-142.167c59.861-35.169 124.209-53.127 193.797-53.127s134.686 17.958 195.294 53.127c60.609 35.169 108.496 83.057 143.664 142.167 35.169 59.861 53.127 123.462 53.127 192.302 0 44.895-12.721 98.022-38.908 160.125s-57.616 119.72-94.28 172.099c-32.924 42.65-71.833 89.791-116.728 140.672s-123.462 129.448-141.42 147.407l-95.778-96.525c-46.393-44.895-91.288-96.525-133.938-155.636s-80.064-122.714-111.49-190.805c-32.924-68.090-47.888-127.204-47.888-177.336z" />
+</font></defs></svg>
--- a/fonts/icomoon.ttf
+++ b/fonts/icomoon.ttf
--- a/fonts/icomoon.woff
+++ b/fonts/icomoon.woff
--- a/fonts/style.css
+++ b/fonts/style.css
@@ -0,0 +1,45 @@
+@font-face {
+  font-family: 'icomoon';
+  src:  url('icomoon.eot?yivnrv');
+  src:  url('icomoon.eot?yivnrv#iefix') format('embedded-opentype'),
+    url('icomoon.ttf?yivnrv') format('truetype'),
+    url('icomoon.woff?yivnrv') format('woff'),
+    url('icomoon.svg?yivnrv#icomoon') format('svg');
+  font-weight: normal;
+  font-style: normal;
+  font-display: block;
+}
+
+.icon {
+  /* use !important to prevent issues with browser extensions that change fonts */
+  font-family: 'icomoon' !important;
+  speak: never;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon--celsius:before {
+  content: "\e900";
+}
+.icon--barometer:before {
+  content: "\e901";
+}
+.icon--humidity:before {
+  content: "\e902";
+}
+.icon--thermometer:before {
+  content: "\e903";
+}
+.icon--fahrenheit:before {
+  content: "\e904";
+}
+.icon--raindrop:before {
+  content: "\e905";
+}
--- a/index.html
+++ b/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Hive monitor</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+
+  <link rel="stylesheet" href="fonts/style.css">
+</head>
+<body>
+<div id="app">
+</div>
+</body>
+  <script src="main.js"></script>
+</html>
--- a/main.js
+++ b/main.js
@@ -0,0 +1,7 @@
+
+import Vue from 'vue';
+import App from './App.vue';
+
+new Vue({
+  render: h => h(App)
+}).$mount('#app');
--- a/package.json
+++ b/package.json
@@ -0,0 +1,12 @@
+{
+  "dependencies": {
+    "browserlist": "^1.0.1",
+    "vue": "^2.6.11",
+    "vue-hot-reload-api": "^2.3.4"
+  },
+  "devDependencies": {
+    "@vue/component-compiler-utils": "^3.1.2",
+    "sass": "^1.26.10",
+    "vue-template-compiler": "^2.6.11"
+  }
+}
--- a/yarn.lock
+++ b/yarn.lock
@@ -0,0 +1,305 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+"@vue/component-compiler-utils@^3.1.2":
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/@vue/component-compiler-utils/-/component-compiler-utils-3.2.0.tgz#8f85182ceed28e9b3c75313de669f83166d11e5d"
+  integrity sha512-lejBLa7xAMsfiZfNp7Kv51zOzifnb29FwdnMLa96z26kXErPFioSf9BMcePVIQ6/Gc6/mC0UrPpxAWIHyae0vw==
+  dependencies:
+    consolidate "^0.15.1"
+    hash-sum "^1.0.2"
+    lru-cache "^4.1.2"
+    merge-source-map "^1.1.0"
+    postcss "^7.0.14"
+    postcss-selector-parser "^6.0.2"
+    source-map "~0.6.1"
+    vue-template-es2015-compiler "^1.9.0"
+  optionalDependencies:
+    prettier "^1.18.2"
+
+ansi-styles@^3.2.1:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-3.2.1.tgz#41fbb20243e50b12be0f04b8dedbf07520ce841d"
+  integrity sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==
+  dependencies:
+    color-convert "^1.9.0"
+
+anymatch@~3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.1.tgz#c55ecf02185e2469259399310c173ce31233b142"
+  integrity sha512-mM8522psRCqzV+6LhomX5wgp25YVibjh8Wj23I5RPkPppSVSjyKD2A2mBJmWGa+KN7f2D6LNh9jkBCeyLktzjg==
+  dependencies:
+    normalize-path "^3.0.0"
+    picomatch "^2.0.4"
+
+binary-extensions@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.1.0.tgz#30fa40c9e7fe07dbc895678cd287024dea241dd9"
+  integrity sha512-1Yj8h9Q+QDF5FzhMs/c9+6UntbD5MkRfRwac8DoEm9ZfUBZ7tZ55YcGVAzEe4bXsdQHEk+s9S5wsOKVdZrw0tQ==
+
+bluebird@^3.1.1:
+  version "3.7.2"
+  resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.7.2.tgz#9f229c15be272454ffa973ace0dbee79a1b0c36f"
+  integrity sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==
+
+braces@~3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107"
+  integrity sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==
+  dependencies:
+    fill-range "^7.0.1"
+
+browserlist@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/browserlist/-/browserlist-1.0.1.tgz#8c52c4fd5ba49c7464b9e0f85d519598b5833ed9"
+  integrity sha512-nYq9jiWv+qXcgrJxQzivfEc7Wo2GvAKkeRViE5L3cUJpq4SZO6NZR710I/8T+OjE5BPECbzpm8rpUkwslE3nTg==
+  dependencies:
+    chalk "^2.4.1"
+
+chalk@^2.4.1, chalk@^2.4.2:
+  version "2.4.2"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
+  integrity sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==
+  dependencies:
+    ansi-styles "^3.2.1"
+    escape-string-regexp "^1.0.5"
+    supports-color "^5.3.0"
+
+"chokidar@>=2.0.0 <4.0.0":
+  version "3.4.2"
+  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.4.2.tgz#38dc8e658dec3809741eb3ef7bb0a47fe424232d"
+  integrity sha512-IZHaDeBeI+sZJRX7lGcXsdzgvZqKv6sECqsbErJA4mHWfpRrD8B97kSFN4cQz6nGBGiuFia1MKR4d6c1o8Cv7A==
+  dependencies:
+    anymatch "~3.1.1"
+    braces "~3.0.2"
+    glob-parent "~5.1.0"
+    is-binary-path "~2.1.0"
+    is-glob "~4.0.1"
+    normalize-path "~3.0.0"
+    readdirp "~3.4.0"
+  optionalDependencies:
+    fsevents "~2.1.2"
+
+color-convert@^1.9.0:
+  version "1.9.3"
+  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
+  integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==
+  dependencies:
+    color-name "1.1.3"
+
+color-name@1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
+  integrity sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=
+
+consolidate@^0.15.1:
+  version "0.15.1"
+  resolved "https://registry.yarnpkg.com/consolidate/-/consolidate-0.15.1.tgz#21ab043235c71a07d45d9aad98593b0dba56bab7"
+  integrity sha512-DW46nrsMJgy9kqAbPt5rKaCr7uFtpo4mSUvLHIUbJEjm0vo+aY5QLwBUq3FK4tRnJr/X0Psc0C4jf/h+HtXSMw==
+  dependencies:
+    bluebird "^3.1.1"
+
+cssesc@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
+  integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==
+
+de-indent@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/de-indent/-/de-indent-1.0.2.tgz#b2038e846dc33baa5796128d0804b455b8c1e21d"
+  integrity sha1-sgOOhG3DO6pXlhKNCAS0VbjB4h0=
+
+escape-string-regexp@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
+  integrity sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=
+
+fill-range@^7.0.1:
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-7.0.1.tgz#1919a6a7c75fe38b2c7c77e5198535da9acdda40"
+  integrity sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==
+  dependencies:
+    to-regex-range "^5.0.1"
+
+fsevents@~2.1.2:
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.1.3.tgz#fb738703ae8d2f9fe900c33836ddebee8b97f23e"
+  integrity sha512-Auw9a4AxqWpa9GUfj370BMPzzyncfBABW8Mab7BGWBYDj4Isgq+cDKtx0i6u9jcX9pQDnswsaaOTgTmA5pEjuQ==
+
+glob-parent@~5.1.0:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.1.tgz#b6c1ef417c4e5663ea498f1c45afac6916bbc229"
+  integrity sha512-FnI+VGOpnlGHWZxthPGR+QhR78fuiK0sNLkHQv+bL9fQi57lNNdquIbna/WrfROrolq8GK5Ek6BiMwqL/voRYQ==
+  dependencies:
+    is-glob "^4.0.1"
+
+has-flag@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd"
+  integrity sha1-tdRU3CGZriJWmfNGfloH87lVuv0=
+
+hash-sum@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/hash-sum/-/hash-sum-1.0.2.tgz#33b40777754c6432573c120cc3808bbd10d47f04"
+  integrity sha1-M7QHd3VMZDJXPBIMw4CLvRDUfwQ=
+
+he@^1.1.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
+  integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
+
+indexes-of@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/indexes-of/-/indexes-of-1.0.1.tgz#f30f716c8e2bd346c7b67d3df3915566a7c05607"
+  integrity sha1-8w9xbI4r00bHtn0985FVZqfAVgc=
+
+is-binary-path@~2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-2.1.0.tgz#ea1f7f3b80f064236e83470f86c09c254fb45b09"
+  integrity sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==
+  dependencies:
+    binary-extensions "^2.0.0"
+
+is-extglob@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2"
+  integrity sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=
+
+is-glob@^4.0.1, is-glob@~4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-4.0.1.tgz#7567dbe9f2f5e2467bc77ab83c4a29482407a5dc"
+  integrity sha512-5G0tKtBTFImOqDnLB2hG6Bp2qcKEFduo4tZu9MT/H6NQv/ghhy30o55ufafxJ/LdH79LLs2Kfrn85TLKyA7BUg==
+  dependencies:
+    is-extglob "^2.1.1"
+
+is-number@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/is-number/-/is-number-7.0.0.tgz#7535345b896734d5f80c4d06c50955527a14f12b"
+  integrity sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==
+
+lru-cache@^4.1.2:
+  version "4.1.5"
+  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-4.1.5.tgz#8bbe50ea85bed59bc9e33dcab8235ee9bcf443cd"
+  integrity sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==
+  dependencies:
+    pseudomap "^1.0.2"
+    yallist "^2.1.2"
+
+merge-source-map@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/merge-source-map/-/merge-source-map-1.1.0.tgz#2fdde7e6020939f70906a68f2d7ae685e4c8c646"
+  integrity sha512-Qkcp7P2ygktpMPh2mCQZaf3jhN6D3Z/qVZHSdWvQ+2Ef5HgRAPBO57A77+ENm0CPx2+1Ce/MYKi3ymqdfuqibw==
+  dependencies:
+    source-map "^0.6.1"
+
+normalize-path@^3.0.0, normalize-path@~3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65"
+  integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==
+
+picomatch@^2.0.4, picomatch@^2.2.1:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.2.2.tgz#21f333e9b6b8eaff02468f5146ea406d345f4dad"
+  integrity sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg==
+
+postcss-selector-parser@^6.0.2:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.2.tgz#934cf799d016c83411859e09dcecade01286ec5c"
+  integrity sha512-36P2QR59jDTOAiIkqEprfJDsoNrvwFei3eCqKd1Y0tUsBimsq39BLp7RD+JWny3WgB1zGhJX8XVePwm9k4wdBg==
+  dependencies:
+    cssesc "^3.0.0"
+    indexes-of "^1.0.1"
+    uniq "^1.0.1"
+
+postcss@^7.0.14:
+  version "7.0.32"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.32.tgz#4310d6ee347053da3433db2be492883d62cec59d"
+  integrity sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==
+  dependencies:
+    chalk "^2.4.2"
+    source-map "^0.6.1"
+    supports-color "^6.1.0"
+
+prettier@^1.18.2:
+  version "1.19.1"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.19.1.tgz#f7d7f5ff8a9cd872a7be4ca142095956a60797cb"
+  integrity sha512-s7PoyDv/II1ObgQunCbB9PdLmUcBZcnWOcxDh7O0N/UwDEsHyqkW+Qh28jW+mVuCdx7gLB0BotYI1Y6uI9iyew==
+
+pseudomap@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/pseudomap/-/pseudomap-1.0.2.tgz#f052a28da70e618917ef0a8ac34c1ae5a68286b3"
+  integrity sha1-8FKijacOYYkX7wqKw0wa5aaChrM=
+
+readdirp@~3.4.0:
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.4.0.tgz#9fdccdf9e9155805449221ac645e8303ab5b9ada"
+  integrity sha512-0xe001vZBnJEK+uKcj8qOhyAKPzIT+gStxWr3LCB0DwcXR5NZJ3IaC+yGnHCYzB/S7ov3m3EEbZI2zeNvX+hGQ==
+  dependencies:
+    picomatch "^2.2.1"
+
+sass@^1.26.10:
+  version "1.26.10"
+  resolved "https://registry.yarnpkg.com/sass/-/sass-1.26.10.tgz#851d126021cdc93decbf201d1eca2a20ee434760"
+  integrity sha512-bzN0uvmzfsTvjz0qwccN1sPm2HxxpNI/Xa+7PlUEMS+nQvbyuEK7Y0qFqxlPHhiNHb1Ze8WQJtU31olMObkAMw==
+  dependencies:
+    chokidar ">=2.0.0 <4.0.0"
+
+source-map@^0.6.1, source-map@~0.6.1:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
+  integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
+
+supports-color@^5.3.0:
+  version "5.5.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
+  integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==
+  dependencies:
+    has-flag "^3.0.0"
+
+supports-color@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-6.1.0.tgz#0764abc69c63d5ac842dd4867e8d025e880df8f3"
+  integrity sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==
+  dependencies:
+    has-flag "^3.0.0"
+
+to-regex-range@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/to-regex-range/-/to-regex-range-5.0.1.tgz#1648c44aae7c8d988a326018ed72f5b4dd0392e4"
+  integrity sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==
+  dependencies:
+    is-number "^7.0.0"
+
+uniq@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/uniq/-/uniq-1.0.1.tgz#b31c5ae8254844a3a8281541ce2b04b865a734ff"
+  integrity sha1-sxxa6CVIRKOoKBVBzisEuGWnNP8=
+
+vue-hot-reload-api@^2.3.4:
+  version "2.3.4"
+  resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz#532955cc1eb208a3d990b3a9f9a70574657e08f2"
+  integrity sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog==
+
+vue-template-compiler@^2.6.11:
+  version "2.6.12"
+  resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.6.12.tgz#947ed7196744c8a5285ebe1233fe960437fcc57e"
+  integrity sha512-OzzZ52zS41YUbkCBfdXShQTe69j1gQDZ9HIX8miuC9C3rBCk9wIRjLiZZLrmX9V+Ftq/YEyv1JaVr5Y/hNtByg==
+  dependencies:
+    de-indent "^1.0.2"
+    he "^1.1.0"
+
+vue-template-es2015-compiler@^1.9.0:
+  version "1.9.1"
+  resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz#1ee3bc9a16ecbf5118be334bb15f9c46f82f5825"
+  integrity sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==
+
+vue@^2.6.11:
+  version "2.6.12"
+  resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.12.tgz#f5ebd4fa6bd2869403e29a896aed4904456c9123"
+  integrity sha512-uhmLFETqPPNyuLLbsKz6ioJ4q7AZHzD8ZVFNATNyICSZouqP2Sz0rotWQC8UNBF6VGSCs5abnKJoStA6JbCbfg==
+
+yallist@^2.1.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/yallist/-/yallist-2.1.2.tgz#1c11f9218f076089a47dd512f93c6699a6a81d52"
+  integrity sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI=