Lots of changes. Added footer, calendar is more interactive and now we can route to specific adventures and fields become populated. Started upload progress of images and 404 page.

2025-10-29 01:30:22 +00:00 · 2019-02-23 22:38:32 +01:00
parent 82a53ed9aa
commit b84cd100a7
23 changed files with 1106 additions and 157 deletions
--- a/package.json
+++ b/package.json
@@ -13,6 +13,9 @@
    "axios": "^0.18.0",
    "bootstrap": "^4.2.1",
    "bootstrap-vue": "^2.0.0-rc.11",
+    "mapbox-gl": "^0.53.0",
+    "mapbox-gl-vue": "^1.9.0",
+    "moment": "^2.24.0",
    "node-sass": "^4.9.2",
    "sass-loader": "^7.0.3",
    "vue": "^2.5.2",
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,17 +1,16 @@
 <template>
-  <div id="app" class="container">
+  <div id="app">

    <router-view />

-    <Popover class="popup" v-if="popoverState"></Popover>
-    
+    <Popover class="popup" v-if="popoverState" v-bind:class="[popoverState ? 'blur' : '', 'bk']"></Popover>
  </div>
 </template>

 <script>
 import Vue from 'vue'
-import Popover from '@/components/Popover'
 import routes from '@/routes'
+import Popover from '@/components/Popover'
 import { mapGetters, mapActions } from 'vuex'

 export default {
@@ -25,4 +24,13 @@ export default {

 <style lang="scss">
  @import './scss/main.scss';
+
+.bk {
+  transition: all 2s ease-out;
+}
+
+.blur {
+  // filter: blur(2px);
+  opacity: 1;
+}
 </style>
--- a/src/components/404.vue
+++ b/src/components/404.vue
@@ -0,0 +1,15 @@
+<template>
+  <div>
+    <h1>Opps! Denne siden fantes ikke</h1>
+  </div>
+</template>
+
+<script>
+
+</script>
+
+<style lang="scss" scoped>
+h1 {
+  text-transform: unset;
+}
+</style>
--- a/src/components/Calendar.vue
+++ b/src/components/Calendar.vue
@@ -1,38 +1,221 @@
 <template>
-  <div>
-    <h1>kalender</h1>
+  <div class="container">
+    <div class="header--inline">
+
+      <h1>{{ month }} {{ year }}</h1>
+
+      <!-- {{ short }}  if longlist we want to keep printing vertically  -->
+
+      <div class="navigation">
+        <button @click="decrement">{{ previousMonth }}</button>
+        <button @click="reset">Today</button>
+        <button @click="increment">{{ nextMonth }}</button>
+      </div>
+    </div>
+
+
+    <div class="calendar">
+      <div v-for="dayName in days" class="calendar--dayName">{{ dayName }}</div>
+      <div v-for="(day, index) in cal">
+        <day-element :key="index" :day="day" @click="clickedDay(day)"></day-element>
+      </div>
+
+    </div>
+
+    <div v-if="long">
+      <month-summary :events="eventsFound"></month-summary>
+    </div>

-    {{ longList }}
  </div>
 </template>

 <script>
+import DayElement from '@/components/calendar/DayElement'
+import MonthSummary from '@/components/calendar/MonthSummary'
+import moment from 'moment'

 export default {
+  components: { DayElement, MonthSummary },
  props: {
-    short: {
+    long: {
      default: true,
-      type: Boolean
+      type: Boolean,
+    }
+  },
+  computed: {
+    previousMonth: function() {
+      return moment().add(this.offset - 1, 'month').format('MMMM')
+    },
+    nextMonth: function() {
+      return moment().add(this.offset + 1, 'month').format('MMMM')
    }
  },
  data() {
    return {
+      days: ['man', 'tir', 'ons', 'tor', 'fre', 'lør', 'søn'],
+      offset: 0,
+      cal: [],
+      eventsFound: [],
    }
  },
-  created() {},
-  beforeMount() {},
+  beforeMount() {
+    this.initCalendar()
+  },
  methods: {
+    clickedDay(day) {
+      console.log('clicked', day)
+      if (day.events.length) {
+        this.$router.push({ name: 'EditEvent', query: { id: day.events[0].id } })
+      } else {
+        this.$router.push({name: 'EditEvent', params: { formData: {
+          title: undefined,
+          dateStart: day.m,
+          dateEnd: undefined,
+          locationName: undefined,
+          subtext: undefined
+        } } })
+        // this.$router.push({ name: 'EditEvent' })
+      }
+    },
+    initCalendar() {
+      const currentMonth = moment().add(this.offset, 'month')
+      const start = moment().add(this.offset, 'month').startOf('month')
+      const end = moment().add(this.offset, 'month').endOf('month')

+      this.startDate = start.subtract(start.day() - 1, 'days');
+      this.endDate = end.day() === 0 ? end : end.add(7 - end.day(), 'days')
+
+      this.month = currentMonth.format('MMMM')
+      this.year = currentMonth.format('YYYY')
+      this.currentMonth = currentMonth;
+
+      this.generateCalendar()
+
+      this.getEvents()
+        .then(events => this.populateCalendar(events))
+    },
+    getEvents() {
+      return fetch('http://localhost:5000/api/adventure')
+        .then(resp => resp.json())
+        .then(events => {
+          console.log('events', events)
+          this.eventsFound = events;
+          return events
+        })
+    },
+    generateCalendar(dates) {
+      console.log('got these dates', dates)
+      this.cal = []
+      let day = this.startDate;
+
+      while (day < this.endDate) {
+        if (day.isSame(this.currentMonth, 'month')) {
+          this.cal.push(this.addDay(day, 'current'))
+        } else if (day.isBefore(this.currentMonth, 'month')) {
+          this.cal.push(this.addDay(day, 'before'))
+        } else if (day.isAfter(this.currentMonth, 'month')) {
+          this.cal.push(this.addDay(day, 'after'))
+        }
+
+        day.add(1, 'days')
+      }
+
+      console.log(this.cal)
+    },
+    populateCalendar(events) {
+      const currentMonth = this.currentMonth;
+
+      console.log('populateCalendar starting, cal content', this.cal)
+      
+
+      this.cal.forEach(day => {
+        let m_day = moment(day.m);
+
+        events.forEach(event => {
+          if (m_day.isSame(moment(event.dateStart), 'day')) {
+            day.events = [...day.events, event];
+
+            console.log('day', day)
+          }
+        })
+      })
+
+      this.cal = JSON.parse(JSON.stringify(this.cal))
+    },
+
+    addDay(day, state) {
+      return {
+        name: day.format('dddd'),
+        date: day.format('DD'),
+        relativeDay: state,
+        currentDay: moment().isSame(day, 'day'),
+        events: [],
+        m: day.format()
+      }
+    },
+
+    increment() {
+      this.offset++;
+      this.initCalendar();
+    },
+    decrement() {
+      this.offset--;
+      this.initCalendar();
+    },
+    reset() {
+      this.offset = 0
+      this.initCalendar();
+    }
  }
 }
 </script>

 <style lang="scss" scoped>
-  
-  div {
-    width: 70%;
-    display: block;
-    margin: 6rem auto 0;
+.header--inline {
+  display: flex;
+
+  & .navigation {
+    margin-left: auto;
+    align-self: flex-end;
+    margin-bottom: 1rem;
+  }
+}
+
+
+h1 {
+  margin-top: 40px;
+  margin-bottom: 20px;
+}
+
+.navigation button{
+  &:first-child, &:last-child {
+    // padding: 0.1rem;
+    // background-color: red;
+    width: 4.5rem;
+  }
+}
+
+.calendar {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
+  width: 100%;
+  // height: 8rem;
+  background-color: white;
+
+  @media screen and (max-width: 400px) {
+    grid-template-columns: 1fr;
+    // width: calc(100% - 4rem);
+
+    &--dayName {
+      display: none;
+    }
  }

+  &--dayName {
+    text-align: right;
+    text-transform: capitalize;
+    margin-bottom: 0.45rem;
+    margin-right: 0.6rem;
+  }
+}
 </style>
--- a/src/components/EditEvent.vue
+++ b/src/components/EditEvent.vue
@@ -4,7 +4,8 @@
    <div class="container">
      <h1 class="slipping-left">registrer en ny opplevelse</h1>
      
-      <event-form></event-form>
+      <!-- {{ formData }} -->
+      <event-form v-if="notWaitingForFormdata || formData" :formData="formData"></event-form>
    </div>

    <!-- <div class="image-grid">
@@ -64,10 +65,17 @@ export default {
      if (this.imageGrid)
        return this.grid.rows[this.imageGrid.lastBreakpoint]
      return 150
+    },
+    notWaitingForFormdata: function() {
+      if (this.$route.query.id) {
+        return false;
+      }
+      return true;
    }
  },
  data() {
    return {
+      formData: undefined,
      timeout: undefined,
      features: [],
      showAutocompleted: false,
@@ -128,11 +136,25 @@ export default {
      }
    }
  },
-  created() {},
+  created() {
+    const id = this.$route.query.id
+    if (id) {
+      this.fetchById(id)
+    }
+  },
  mounted() {
    this.imageGrid = this.$refs.imageGrid;
  },
  methods: {
+    fetchById(id) {
+      fetch('http://localhost:5000/api/adventure/' + id)
+      .then(resp => resp.json())
+      .then(data => {
+        this.formData = data;
+        console.log('data', data)
+      })
+    },
+
    processForm: function() {
      let data = {
        title: this.title,
@@ -272,18 +294,4 @@ export default {
    }
  }

-
-  .container {
-    color: rgba(0, 0, 0, 0.701961);
-    line-height: 22.399999618530273px;
-    padding-right: 0px;
-    width: 100%;
-    max-width: 612px;
-
-    margin: 0 auto;
-
-
-    margin-bottom: 3rem;
-  }
-
 </style>
--- a/src/components/EventForm.vue
+++ b/src/components/EventForm.vue
@@ -1,53 +1,56 @@
 <template>
-  <form class="form" @submit.prevent="">
-  <!-- <form class="form" @submit.prevent="processForm"> -->
-    <div class="form-item required">
-      <label class="title">tittel <span class="required">*</span></label>
-      <input class="field-element" v-model="title" type="text" :tabindex="1">
-    </div>
-
-    <fieldset class="form-item">
-      <div class="title">dato <span class="required">*</span></div>
-      <div class="field first-name">
-        <label class="caption">
-          <input v-model="dateStart" type="date" spellcheck="false" maxlength="30" :tabindex="2">
-          fra dato
-        </label>
+  <div>
+    <form class="form" @submit.prevent="">
+    <!-- <form class="form" @submit.prevent="processForm"> -->
+      <div class="form-item required">
+        <label class="title">tittel <span class="required">*</span></label>
+        <input class="field-element" v-model="title" type="text" :tabindex="1">
      </div>

-      <div class="field last-name">
-        <label class="caption">
-          <input v-model="dateEnd" type="date" spellcheck="false" maxlength="30" :tabindex="3">
-          til dato
-        </label>
+      <fieldset class="form-item">
+        <div class="title">dato <span class="required">*</span></div>
+        <div class="field first-name">
+          <label class="caption">
+            <input v-model="dateStart" type="date" spellcheck="false" maxlength="30" :tabindex="2">
+            fra dato
+          </label>
+        </div>
+
+        <div class="field last-name">
+          <label class="caption">
+            <input v-model="dateEnd" type="date" spellcheck="false" maxlength="30" :tabindex="3">
+            til dato
+          </label>
+        </div>
+      </fieldset>
+
+      <form-element-location @newLocation="setLocation" :inputLocation="formData"></form-element-location>
+
+      <div class="form-item">
+        <label class="title">love letter <span class="required">*</span></label>
+        
+        <textarea v-model="subtext"></textarea>
      </div>
-    </fieldset>
-
-    <form-element-location @newLocation="setLocation"></form-element-location>
-
-    <div class="form-item">
-      <label class="title">love letter <span class="required">*</span></label>
-      
-      <textarea v-model="subtext"></textarea>
-    </div>


-    <form-element-upload @newFiles="setFiles"></form-element-upload>
+      <form-element-upload @newFiles="setFiles"></form-element-upload>
+
+
+  <!--         <div class="form-button-wrapper form-button-wrapper--align-left">
+        <button class="button sqs-system-button sqs-editable-button" @click="gridSettings">Settings</button>
+      </div> -->
+
+
+      <div class="hidden form-submission-text">Thank you!</div>
+
+      <div class="hidden form-submission-html" data-submission-html=""></div>
+
+    </form>

    <div>
-      <button class="button" type="submit">Legg til</button>
+      <button class="button" @click="processForm">Legg til</button>
    </div>
-
-<!--         <div class="form-button-wrapper form-button-wrapper--align-left">
-      <button class="button sqs-system-button sqs-editable-button" @click="gridSettings">Settings</button>
-    </div> -->
-
-
-    <div class="hidden form-submission-text">Thank you!</div>
-
-    <div class="hidden form-submission-html" data-submission-html=""></div>
-
-  </form>
+  </div>
 </template>

 <script>
@@ -55,20 +58,28 @@ import axios from 'axios'
 import ClickOutside from 'vue-click-outside'
 import FormElementLocation from './form/FormElementLocation'
 import FormElementUpload from './form/FormElementUpload'
+import { dateToDayMonthYearDashed } from '@/utils/dates'

 export default {
  components: {
    FormElementLocation,
    FormElementUpload
  },
+  props: {
+    formData: {
+      type: Object,
+      required: false,
+      default: undefined
+    }
+  },
  data() {
    return {
-      title: '',
-      dateStart: '',
-      dateEnd: '',
+      title: undefined,
+      dateStart: undefined,
+      dateEnd: undefined,
      chosenLocation: undefined,
      chosenFiles: undefined,
-      subtext: '',
+      subtext: undefined,
    }
  },
  computed: {
@@ -79,15 +90,21 @@ export default {
      return this.chosenLocation ? this.chosenLocation.geometry.coordinates : undefined;
    }
  },
+  beforeMount() {
+    const formData = this.formData || this.$route.params.formData;
+    
+    console.log('formData', formData)
+    if (formData) {
+      this.title = formData.title;
+      this.dateStart = dateToDayMonthYearDashed(formData.dateStart);
+      this.dateEnd = dateToDayMonthYearDashed(formData.dateEnd);
+      this.chosenLocation = formData.locationName;
+      this.subtext = formData.subtext;
+    }
+  },
  methods: {
-    setLocation(location) {
-      console.log('detected location changed')
-      console.log('inputLocation', location)
-      this.chosenLocation = location;
-    },
-    setFiles(files) {
-      this.chosenFiles = files;
-    },
+    setLocation(location) { this.chosenLocation = location },
+    setFiles(files) { this.chosenFiles = files },
    processForm: function() {
      let data = {
        title: this.title,
@@ -98,6 +115,8 @@ export default {
        geoposition: this.LocationGeoposition,
        mapboxData: this.chosenLocation
      }
+      console.log('Processing form to post to backend with data', data)
+

      fetch('http://localhost:5000/api/adventure', {
        method: 'POST',
@@ -107,6 +126,7 @@ export default {
        },
        body: JSON.stringify(data)
      })
+
      // axios.post('localhost:5000/api/adventure', {
      //   body: JSON.stringify(data)
      // })
@@ -136,7 +156,6 @@ export default {
  height: 42px;
  letter-spacing: 1px;
  line-height: 14px;
-  margin-left: -10px;
  padding: 0 1rem;
  text-align: center;
  text-decoration: none;
--- a/src/components/EventPage.vue
+++ b/src/components/EventPage.vue
@@ -1,19 +1,28 @@
 <template>
-  <div>
+  <div v-if="eventData">
    <div class="form">
-      <router-link to="edit">
-        <button class="button" type="submit">Rediger</button>
+      <router-link :to="{ name: 'EditEvent', query: { id: eventData.id }}">
+        
+        <button class="button" @click="">Rediger</button>
+        
      </router-link>
    </div>

    <div class="gallery">
      <div class="gallery--header">
-        <h1>Topptur til gaustadtoppen æøå {{ id }}</h1>
+        <h1>{{ eventData.title || title }}</h1>
        <div class="gallery--info">
-          <p>{{ eventDate.from }} - {{ eventDate.until }}</p>
-          <p>{{ eventLocation }}. <a href="#">Se kart</a></p>
+          <p>
+             {{ dateToDayMonthYear(eventData.dateStart) }}
+             - 
+             {{ dateToDayMonthYear(eventData.dateEnd) }}</p>
+          <p>{{ eventData.locationName }} <a v-if="eventData.locationName" @click="toggleMap"> {{ showMap ? 'Lukk kart' : 'Vis kart'}}</a></p>

-          <p>{{ subtext }}</p>
+          <transition name="slide" class="transition">
+            <map-view v-if="showMap" :mapboxData="mapboxData"></map-view>
+          </transition>
+
+          <p>{{ eventData.subtext }}</p>
        </div>
      </div>

@@ -27,19 +36,17 @@

 <script>
 import Gallery from '@/components/Gallery'
-import Calendar from '@/components/Calendar'
+import MapView from '@/components/MapView'
+import moment from 'moment'

 export default {
  components: {
-    Gallery, Calendar
+    Gallery, MapView
  },
-  props: ['id'],
-  data() {
-    return {
-      eventLocation: 'Oslo, Gardermoen, Norge',
-      startDate: undefined,
-      endDate: undefined,
-      subtext: 'On November 1, 2018, we embarked on our tour with Triathalon. Thank you so much to everyone who came to see us, for buying our merch, for saying hello after the shows, to the amazing hard-working people at the venues, and of course to our team + Live Nation, Ones to Watch, for booking us on our favorite tour this year. And thank you to Claud, Girl Ultra and Kevin Krauter for playing these shows with us. \n\n Here are some of our favorite moments captured by one of our favorite people, Meghan Cummings (@meghancummings). '
+  props: {
+    eventData: {
+      type: Object,
+      required: false
    }
  },
  computed: {
@@ -49,12 +56,79 @@ export default {
        until: this.endDate || '12.10.19'
      }
    }
+  },
+  data() {
+    return {
+      showMap: false,
+      mapboxData: undefined,
+
+      title: 'Topptur til gaustadtoppen',
+      eventLocation: 'Oslo, Gardermoen, Norge',
+      startDate: undefined,
+      endDate: undefined,
+      subtext: 'On November 1, 2018, we embarked on our tour with Triathalon. Thank you so much to everyone who came to see us, for buying our merch, for saying hello after the shows, to the amazing hard-working people at the venues, and of course to our team + Live Nation, Ones to Watch, for booking us on our favorite tour this year. And thank you to Claud, Girl Ultra and Kevin Krauter for playing these shows with us. \n\n Here are some of our favorite moments captured by one of our favorite people, Meghan Cummings (@meghancummings). ',
+      // mapboxData: {"id":"address.3598204582760676","type":"Feature","place_type":["address"],"relevance":1,"properties":{"accuracy":"point"},"text":"Rosendalsveien","place_name":"Rosendalsveien50b,1166Oslo,Norway","center":[10.799471,59.853973],"geometry":{"type":"Point","coordinates":[10.799471,59.853973]},"address":"50b","context":[{"id":"postcode.9489910510813950","text":"1166"},{"id":"place.17289044417596980","short_code":"NO-03","wikidata":"Q585","text":"Oslo"},{"id":"country.16020050790143780","short_code":"no","wikidata":"Q20","text":"Norway"}]}
+    }
+  },
+  created() {
+    const id = this.$route.params.id;
+    console.log('id found', id)
+    if (id) {
+      fetch('http://localhost:5000/api/adventure/' + id)
+      .then(resp => {
+        console.log('resp', resp)
+        resp.json()
+      })
+      .then(data => this.eventData = data)
+    }
+  },
+  methods: {
+    dateToDayMonthYear(date) {
+      return moment(date).format('DD.MM.YYYY')
+
+    },
+    toggleMap() {
+      if (this.showMap) {
+        this.showMap = false
+        return
+      }
+
+      var url = new URL('http://localhost:5000/api/location')
+      url.search = new URLSearchParams({ name: this.eventData.locationName })
+
+      fetch(url)
+      .then(resp => resp.json())
+      .then(data => {
+        this.mapboxData = data.mapboxData;
+        this.showMap = true;
+      })
+      .catch((err) => console.log('error fetching locations by name from server. Error:', err))
+    }
  }
 }
 </script>

 <style lang="scss" scoped>

+.slide-enter-active, .slide-leave-active {
+transition: margin-bottom .1s ease-out;
+}
+
+/*
+you set the css property before transition starts
+*/
+.slide-enter, .slide-leave-to {
+margin-bottom: -50vh;
+}
+
+/*
+you set the css property it will be when transition ends
+*/
+.slide-enter-to, .slide-leave {
+margin-bottom: 0px;
+}
+
+
 .gallery {
  // padding: 2.1rem;

@@ -76,6 +150,7 @@ export default {
    a {
      font-family: 'Ambroise std demi';
      font-style: normal;
+      color: #3b70a2;

      &:visited {
        color: #3b70a2;
--- a/src/components/Footer.vue
+++ b/src/components/Footer.vue
@@ -0,0 +1,37 @@
+<template>
+  <footer class="footer">
+    <div class="start"><a href="mailto:kevin.midboe@gmail.com?Subject=Ref Leifsopplevelser:%20">Kontakt</a></div>
+    <div class="middle">2</div>
+    <div class="end">© Kevin Midboe, 2019</div>
+  </footer>
+</template>
+
+<style lang="scss">
+  .footer {
+    height: 3.5rem;
+    width: calc(100% - 8rem);
+    background-color: #fafbfc;
+
+    color: rgb(88, 96, 105);
+    font-size: 1rem;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+
+    padding: 0 4rem;
+
+    > div:not(:last-child) {
+      // background-color: navajowhite;
+      margin-right: 2rem;
+
+      a, a:visited {
+        color: rgb(88, 96, 105);
+      }
+    }
+
+    .end {
+      margin-left: auto;
+    }
+  }
+</style>
--- a/src/components/Gallery.vue
+++ b/src/components/Gallery.vue
@@ -1,9 +1,15 @@
 <template>
-  <div class="gallery-container">
+  <div>
+    <button @click="toggleView">Toggle view</button>
+
+    <div class="gallery-container">
+
+      
+      <div v-for="(item, key) in gallery">
+        <gallery-image v-if="item.type === 'image'" :image="item" :index="key" :wide="wide" @click="imageSelected"></gallery-image> 
+        <gallery-text v-if="item.type === 'text'" :text="item"></gallery-text> 
+      </div>

-    <div v-for="(item, key) in gallery">
-      <gallery-image v-if="item.type === 'image'" :image="item" :index="key" @click="imageSelected"></gallery-image> 
-      <gallery-text v-if="item.type === 'text'" :text="item"></gallery-text> 
    </div>
  </div>
 </template>
@@ -27,6 +33,7 @@ export default {
  data() {
    return {
      selected: undefined,
+      wide: false,
      gallery: [
        {
          type: 'image',
@@ -74,7 +81,10 @@ export default {
      this.setPopoverAlbum(val)
    }
  },
-  methods: {    
+  methods: {
+    toggleView() {
+      this.wide = !this.wide;
+    },
    setPopoverAlbum: (album) => store.dispatch('setPopoverAlbum', album),

    imageSelected(image) {
--- a/src/components/GalleryImage.vue
+++ b/src/components/GalleryImage.vue
@@ -1,8 +1,9 @@
 <template>
-  <div>
-    {{ index }}
-      <img :src="image.url" @click="popover(image)"/>
-      <p>{{ image.name }}</p>
+  <div v-bind:class="{ isWide: wide }">
+    <transition name="fade">
+      <img :src="image.url" @click="popover(image)" v-on:load="onLoaded" v-show="loaded"/>
+    </transition>
+    <p>{{ image.name }}</p>
  </div>
 </template>

@@ -17,12 +18,22 @@ export default {
    },
    index: {
      type: Number,
+    },
+    wide: {
+      type: Boolean
+    }
+  },
+  data() {
+    return {
+      loaded: false
    }
  },
  methods: {
    showPopover: () => store.dispatch('showPopover'),
    setPopoverAlbumIndex: (index) => store.dispatch('setPopoverAlbumIndex', index),

+    onLoaded() { this.loaded = true },
+
    popover(image) {
      this.setPopoverAlbumIndex(this.index)
      this.showPopover()
@@ -33,15 +44,31 @@ export default {
 </script>

 <style lang="scss" scoped>
-  img {
-    height: 300px;
-    cursor: pointer;
-    margin: 0 0.5rem;

-    @media screen and (max-width: 600px) {
-      background-color: red;
-      height: unset;
-      width: 100%;
-    }
+.fade-enter-active, .fade-leave-active {
+  transition: opacity 0.8s ease-in-out;
+}
+.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
+  opacity: 0;
+}
+
+img {
+  max-height: 250px;
+  max-width: 250px;
+  cursor: pointer;
+  margin: 0 0.5rem;
+
+  @media screen and (max-width: 600px) {
+    background-color: red;
+    height: unset;
+    width: 100%;
  }
+}
+
+ .isWide img {
+    width: 100%;
+    height: unset;
+  }
+
+
 </style>
--- a/src/components/Home.vue
+++ b/src/components/Home.vue
@@ -6,39 +6,49 @@
    {{ date }} -->
    <!-- <Header></Header> -->
    
-    <div class="container">
-      <h1 class="header">leifs opplevelser</h1>
-      <event-page style="height: 100%; overflow: auto;"></event-page>
+    <div class="header">
+      <h1>{{ title }}</h1>
    </div>
+
+    <calendar :long="false"></calendar>
+    
+    <div class="container" v-for="event in events">
+      <event-page :eventData="event"></event-page>
+    </div>
+
+    <Footer></Footer>
  </div>
 </template>

 <script>
 import Header from '@/components/Header'
 import EventPage from '@/components/EventPage'
+import Calendar from '@/components/Calendar'
+import Footer from '@/components/Footer'

 export default {
-  components: { Header, EventPage },
+  components: { Header, EventPage, Calendar, Footer },
  data() {
    return {
-      title: 'Leifs opplevelser',
-      date: undefined,
-      bool: false,
+      title: 'leifs opplevelser',
+      events: undefined

    }
  },
+  beforeMount() {
+    this.fetchEvents()
+  },
 
  methods: {
-    // openPopover(url) {
-    //   console.log('popover received with', url)
-    //   this.popoverImage = url;
-    //   this.popoverShow = true;
-    //   document.body.classList.add('disableScroll');
-    // },
-    // closePopover(url) {
-    //   this.popoverShow = false;
-    //   document.body.classList.remove('disableScroll');
-    // },
+    fetchEvents() {
+      fetch('http://localhost:5000/api/adventure')
+      .then(resp => resp.json())
+      .then((data) => {
+        console.log('response from fetch events', data)
+        this.events = data;
+      })
+      .catch((error) => console.log('unable to fetch events from api; error message:', error))
+    },
    navigate: function() {
      console.log(this.$router)
      this.$router.push('/edit');
@@ -50,7 +60,10 @@ export default {
 <style language="scss" scoped>

  .header {
-    margin-bottom: 5rem;
+    margin: 0 auto;
+    max-width: 1200px;
+    padding: 2.5rem 0rem 2rem 3.5rem;
+    /*margin-bottom: 5rem;*/
  }

  h2 {
@@ -58,13 +71,4 @@ export default {
    font-weight: normal;
  }

-  .container {
-    min-height: 1029px;
-
-    margin: 25px auto 85px;
-    padding: 4em;
-    max-width: 888px;
-    /*max-width: 100%;*/
-    background-color: #fff;
-  }
 </style>
--- a/src/components/MapView.vue
+++ b/src/components/MapView.vue
@@ -0,0 +1,61 @@
+<template>
+  <div class="map">
+    {{ mapboxData.center }}
+    <mapbox
+      :access-token="accessToken"
+      :map-options="options"
+      @map-init="mapInitialized"
+      @map-load="mapLoaded"></mapbox>
+  </div>
+</template>
+
+<script>
+import mapboxgl from 'mapbox-gl';
+import Mapbox from 'mapbox-gl-vue';
+
+export default {
+  components: { Mapbox },
+  props: {
+    mapboxData: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      marker: undefined,
+      map: undefined,
+
+      accessToken: "pk.eyJ1Ijoia2V2aW5taWRib2UiLCJhIjoiY2pydWhlamQyMHJ2NTRhdGN1em5ndXVyMyJ9.Ejdo_3iuuGOD662Bh6es4w",
+      options: {
+          style: 'mapbox://styles/kevinmidboe/cjrvwyoft1tij1ftb94f75lqs',
+          sprite: 'mapbox://styles/kevinmidboe/cjrvwyoft1tij1ftb94f75lqs',
+          center: this.mapboxData.center,
+          zoom: 10,
+          minZoom: 0,
+          maxZoom: 18
+      }
+    }
+  },
+  methods: {
+    mapInitialized(map) { this.map = map },
+    mapLoaded() {
+      this.setLocationMarker()
+    },
+    setLocationMarker() {
+       if(this.marker != undefined) this.marker.remove();
+
+      this.marker = new mapboxgl.Marker()
+        .setLngLat(this.mapboxData.center)
+        .addTo(this.map);
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+#map {
+  width: 100%;
+  height: 50vh;
+}
+</style>
--- a/src/components/Popover.vue
+++ b/src/components/Popover.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="popover" @click="hidePopover" v-touch:swipe.left="backwards" v-touch:swipe.right="forwards">
-    <div class="popover-content">
+  <div class="popover">
+    <div class="popover-content" @click="hidePopover" v-touch:swipe.left="backwards" v-touch:swipe.right="forwards">
      <div class="image-container">
        <img :src="album[index].url" />
      
--- a/src/components/calendar/DayElement.vue
+++ b/src/components/calendar/DayElement.vue
@@ -0,0 +1,111 @@
+<template>
+  <div class="calendar--day" @click="$emit('click')">
+    <div 
+      class="calendar--date" 
+      v-bind:style="{ color: color }"
+      v-bind:class="{'currentDay': day.currentDay}">
+
+    {{ day.date }}
+  </div>
+
+    <div v-if="day.events.length" v-for="event in day.events" class="calendar--event">
+      {{ event.title }}
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  props: { 
+    day: {
+      type: Object,
+      required: true,
+      deep: true
+    },
+  },
+  watch: {
+    day: function() {
+      this.setColor()
+    }
+  },
+  data() {
+    return {
+      color: undefined,
+      states: {
+        'before': 'silver',
+        'current': 'black',
+        'after': 'dimgray',
+        'event': '#cb0b0b'
+      }
+    }
+  },
+  created() {
+    this.setColor()
+  },
+  methods: {
+    setColor() {
+      if (this.day.events.length) {
+        this.color = this.states['event']
+      }
+      else {
+        this.color = this.states[this.day.relativeDay]
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.calendar {
+  &--day {
+    border: 0.5px solid rgba(0,0,0,.2);
+    min-height: 2rem;
+    
+    @media screen and (min-width: 400px) {
+      min-height: 4rem;
+    }
+
+    @media screen and (min-width: 1100px) {
+      min-height: 5.6rem;
+    }
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
+
+  &--date {
+    display: inline-block;
+
+    text-align: right;
+    float: right;
+    margin-top: .6rem;
+    margin-right: .6rem;
+    font-weight: 600;
+    font-size: 0.95rem;
+  }
+
+  & .currentDay {
+    background-color: #cb0b0b;
+    border-radius: 50%;
+    height: 21px;
+    width: 24px;
+    margin-top: 0.35rem;
+    padding-top: 0.35rem;
+    margin-right: 0.3rem;
+    padding-right: 0.2rem;
+    color: ghostwhite !important;
+  }
+
+  &--event {
+    margin: 0.5rem;
+    font-size: 0.8rem;
+    width: 100%;
+
+    @media screen and (max-width: 400px) {
+      font-size: unset;
+    }
+  }
+}
+</style>
--- a/src/components/calendar/MonthSummary.vue
+++ b/src/components/calendar/MonthSummary.vue
@@ -0,0 +1,49 @@
+<template>
+  <div>
+    <h1>Summary</h1>
+
+    <div v-for="event in events" class="list-item">
+      <router-link :to="{ name: 'EventPage', query: { id: event.id }}">
+
+        <h2>{{event.title}}</h2>
+        <p>{{ dateToDayMonthYear(event.dateStart) }} - {{ dateToDayMonthYear(event.dateEnd) }}</p>
+        <p>{{ event.locationName}}</p>
+        <p>{{ event.subtext }}</p>
+        <!-- {{ event }} -->
+      </router-link>
+    </div>
+  </div>
+</template>
+
+<script>
+import { dateToDayMonthYear } from '@/utils/dates'
+
+export default {
+  props: {
+    events: {
+      type: Array,
+      required: false
+    }
+  },
+  methods: {
+    dateToDayMonthYear(date) { return dateToDayMonthYear(date) }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  p {
+    margin-bottom: 0.7rem;
+  }
+
+  .list-item {
+    margin-bottom: 3rem;
+    padding: 0.2rem;
+    width: 100%;
+    border: 1px solid transparent;
+
+    &:hover {
+      border: 1px solid black;
+    }
+  }
+</style>
--- a/src/components/form/FormElementLocation.vue
+++ b/src/components/form/FormElementLocation.vue
@@ -34,6 +34,12 @@ import axios from 'axios'
 import ClickOutside from 'vue-click-outside'

 export default {
+  props: {
+    inputLocation: {
+      type: Object,
+      required: false
+    }
+  },
  data() {
    return {
      timeout: undefined,
@@ -44,12 +50,17 @@ export default {
      highlightedLocation: -1
    }
  },
+  mounted() {
+    if (this.inputLocation) {
+      this.$refs.listInput.value = this.inputLocation.locationName;
+    }
+  },
  watch: {
    locationInput: function(newVal, preVal) {
      if (newVal === '') {
        this.resultMapboxLocations = []
        return
-      }      
+      }
      console.log('input changed')
      let place = this.chosenLocation ? this.LocationName : false

--- a/src/components/form/FormElementUpload.vue
+++ b/src/components/form/FormElementUpload.vue
@@ -14,6 +14,7 @@
 </template>

 <script>
+import axios from 'axios'
 import store from '@/store'

 export default {
@@ -33,8 +34,24 @@ export default {
    setPopoverAlbumIndex: (index) => store.dispatch('setPopoverAlbumIndex', index),
    showPopover: () => store.dispatch('showPopover'),

+    uploadFiles(fileList) {
+      console.log('sending fileList', fileList)
+      let formData = new FormData();
+      for( var i = 0; i < fileList.length; i++ ){
+        let file = fileList[i];
+        formData.append('images', file, file.name);
+      }
+
+      console.log('formdata', formData)
+      axios.post('http://localhost:5001/upload', formData, { onUploadProgress: progressEvent => console.log(100 * (progressEvent.loaded / progressEvent.totalSize))} )
+      .then((resp) => console.log('response from posting to server:', resp))
+      .catch((error) => console.error('error from post request:', error))
+    },
+
    processFiles(event) {
      const files = event.target.files;
+      this.uploadFiles(event.target.files)
+
      let mappedFiles = []
      let album = this.files || [];

--- a/src/index.html
+++ b/src/index.html
@@ -4,6 +4,12 @@
    <meta charset="utf-8">
    <meta name="viewport" content='width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0'>
    <title>Leifsopplevelser</title>
+
+    <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.51.0/mapbox-gl.js"></script>
+    <link
+      href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.51.0/mapbox-gl.css"
+      rel="stylesheet"
+    />
  </head>
  <body>
    <div id="app"></div>
--- a/src/routes.js
+++ b/src/routes.js
@@ -10,13 +10,13 @@ let routes = [
    components: require('@/components/Home')
  },
  {
-    name: 'Event page',
+    name: 'EventPage',
    path: '/event/:id',
-    props: { default: true },
+    // props: { default: true },
    components: require('@/components/EventPage')
  },
  {
-    name: 'Edit event',
+    name: 'EditEvent',
    path: '/edit',
    components: require('@/components/EditEvent')
  },
@@ -31,7 +31,7 @@ let routes = [
  {
    name: '404',
    path: '*',
-    // components: require('')
+    components: require('@/components/404')
  }
 ];

--- a/src/scss/form.scss
+++ b/src/scss/form.scss
@@ -14,6 +14,9 @@
  transition-property: box-shadow;
  transition-timing-function: ease-in-out;

+  @media screen and (min-width: 1100px) {
+    max-width: 581px;
+  }

  &-item {
    border-width: 0px;
--- a/src/scss/main.scss
+++ b/src/scss/main.scss
@@ -32,3 +32,19 @@ a {
  display: none;
 }

+
+.container {
+  max-width: 612px;
+
+  margin: 0 auto;
+  margin-bottom: 3rem;
+
+  @media screen and (max-width: 500px) {
+    padding: 0 1rem;
+    // max-width: unset;
+  }
+
+  @media screen and (min-width: 1100px) {
+    max-width: 1000px;
+  }
+}
--- a/src/utils/dates.js
+++ b/src/utils/dates.js
@@ -0,0 +1,15 @@
+import moment from 'moment'
+
+function dateToDayMonthYear(date) {
+  return date ? moment(date).format('DD.MM.YYYY') : undefined
+}
+
+function dateToDayMonthYearDashed(date) {
+  return date ? moment(date).format('DD-MM-YYYY') : undefined
+}
+
+function dateToYearMonthDay(date) {
+  return moment(date).format('YYYY.MM.DD')
+}
+
+export { dateToYearMonthDay, dateToDayMonthYear, dateToDayMonthYearDashed }
--- a/yarn.lock
+++ b/yarn.lock
@@ -2,6 +2,65 @@
 # yarn lockfile v1


+"@mapbox/geojson-area@0.2.2":
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/@mapbox/geojson-area/-/geojson-area-0.2.2.tgz#18d7814aa36bf23fbbcc379f8e26a22927debf10"
+  integrity sha1-GNeBSqNr8j+7zDefjiaiKSfevxA=
+  dependencies:
+    wgs84 "0.0.0"
+
+"@mapbox/geojson-rewind@^0.4.0":
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/@mapbox/geojson-rewind/-/geojson-rewind-0.4.0.tgz#0d3632d4c1b4a928cf10a06ade387e1c8a8c181b"
+  integrity sha512-b+1uPWBERW4Pet/969BNu61ZPDyH2ilIxBjJDFzxyS9TyszF9UrTQyYIl/G38clux3rtpAGGFSGTCSF/qR6UjA==
+  dependencies:
+    "@mapbox/geojson-area" "0.2.2"
+    concat-stream "~1.6.0"
+    minimist "1.2.0"
+    sharkdown "^0.1.0"
+
+"@mapbox/geojson-types@^1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@mapbox/geojson-types/-/geojson-types-1.0.2.tgz#9aecf642cb00eab1080a57c4f949a65b4a5846d6"
+  integrity sha512-e9EBqHHv3EORHrSfbR9DqecPNn+AmuAoQxV6aL8Xu30bJMJR1o8PZLZzpk1Wq7/NfCbuhmakHTPYRhoqLsXRnw==
+
+"@mapbox/jsonlint-lines-primitives@^2.0.2":
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/@mapbox/jsonlint-lines-primitives/-/jsonlint-lines-primitives-2.0.2.tgz#ce56e539f83552b58d10d672ea4d6fc9adc7b234"
+  integrity sha1-zlblOfg1UrWNENZy6k1vya3HsjQ=
+
+"@mapbox/mapbox-gl-supported@^1.4.0":
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/@mapbox/mapbox-gl-supported/-/mapbox-gl-supported-1.4.0.tgz#36946b22944fe2cfa43cfafd5ef36fdb54a069e4"
+  integrity sha512-ZD0Io4XK+/vU/4zpANjOtdWfVszAgnaMPsGR6LKsWh4kLIEv9qoobTVmJPPuwuM+ZI2b3BlZ6DYw1XHVmv6YTA==
+
+"@mapbox/point-geometry@0.1.0", "@mapbox/point-geometry@^0.1.0", "@mapbox/point-geometry@~0.1.0":
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/@mapbox/point-geometry/-/point-geometry-0.1.0.tgz#8a83f9335c7860effa2eeeca254332aa0aeed8f2"
+  integrity sha1-ioP5M1x4YO/6Lu7KJUMyqgru2PI=
+
+"@mapbox/tiny-sdf@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@mapbox/tiny-sdf/-/tiny-sdf-1.1.0.tgz#b0b8f5c22005e6ddb838f421ffd257c1f74f9a20"
+  integrity sha512-dnhyk8X2BkDRWImgHILYAGgo+kuciNYX30CUKj/Qd5eNjh54OWM/mdOS/PWsPeN+3abtN+QDGYM4G220ynVJKA==
+
+"@mapbox/unitbezier@^0.0.0":
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/@mapbox/unitbezier/-/unitbezier-0.0.0.tgz#15651bd553a67b8581fb398810c98ad86a34524e"
+  integrity sha1-FWUb1VOme4WB+zmIEMmK2Go0Uk4=
+
+"@mapbox/vector-tile@^1.3.1":
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/@mapbox/vector-tile/-/vector-tile-1.3.1.tgz#d3a74c90402d06e89ec66de49ec817ff53409666"
+  integrity sha512-MCEddb8u44/xfQ3oD+Srl/tNcQoqTw3goGk2oLsrFxOTc3dUp+kAnby3PvAeeBYSMSjSPD1nd1AJA6W49WnoUw==
+  dependencies:
+    "@mapbox/point-geometry" "~0.1.0"
+
+"@mapbox/whoots-js@^3.1.0":
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/@mapbox/whoots-js/-/whoots-js-3.1.0.tgz#497c67a1cef50d1a2459ba60f315e448d2ad87fe"
+  integrity sha512-Es6WcD0nO5l+2BOQS4uLfNPYQaNDfbot3X1XUoloz+x0mPDS3eeORZJl06HXjwBG1fOGwCRnzK88LMdxKRrd6Q==
+
 "@sindresorhus/is@^0.7.0":
  version "0.7.0"
  resolved "https://registry.yarnpkg.com/@sindresorhus/is/-/is-0.7.0.tgz#9a06f4f137ee84d7df0460c1fdb1135ffa6c50fd"
@@ -95,6 +154,11 @@ ansi-styles@^3.2.1:
  dependencies:
    color-convert "^1.9.0"

+ansicolors@~0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/ansicolors/-/ansicolors-0.2.1.tgz#be089599097b74a5c9c4a84a0cdbcdb62bd87aef"
+  integrity sha1-vgiVmQl7dKXJxKhKDNvNtivYeu8=
+
 anymatch@^2.0.0:
  version "2.0.0"
  resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-2.0.0.tgz#bcb24b4f37934d9aa7ac17b4adaf89e7c76ef2eb"
@@ -1206,6 +1270,14 @@ caniuse-lite@^1.0.30000792, caniuse-lite@^1.0.30000805, caniuse-lite@^1.0.300008
  version "1.0.30000916"
  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000916.tgz#3428d3f529f0a7b2bfaaec65e796037bdd433aab"

+cardinal@~0.4.2:
+  version "0.4.4"
+  resolved "https://registry.yarnpkg.com/cardinal/-/cardinal-0.4.4.tgz#ca5bb68a5b511b90fe93b9acea49bdee5c32bfe2"
+  integrity sha1-ylu2iltRG5D+k7ms6km97lwyv+I=
+  dependencies:
+    ansicolors "~0.2.1"
+    redeyed "~0.4.0"
+
 caseless@~0.12.0:
  version "0.12.0"
  resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc"
@@ -1460,7 +1532,7 @@ concat-map@0.0.1:
  version "0.0.1"
  resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"

-concat-stream@^1.5.0:
+concat-stream@^1.5.0, concat-stream@~1.6.0:
  version "1.6.2"
  resolved "https://registry.yarnpkg.com/concat-stream/-/concat-stream-1.6.2.tgz#904bdf194cd3122fc675c77fc4ac3d4ff0fd1a34"
  dependencies:
@@ -1685,6 +1757,11 @@ css-what@2.1:
  version "2.1.2"
  resolved "https://registry.yarnpkg.com/css-what/-/css-what-2.1.2.tgz#c0876d9d0480927d7d4920dcd72af3595649554d"

+csscolorparser@~1.0.2:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/csscolorparser/-/csscolorparser-1.0.3.tgz#b34f391eea4da8f3e98231e2ccd8df9c041f171b"
+  integrity sha1-s085HupNqPPpgjHizNjfnAQfFxs=
+
 cssesc@^0.1.0:
  version "0.1.0"
  resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-0.1.0.tgz#c814903e45623371a0477b40109aaafbeeaddbb4"
@@ -1977,6 +2054,11 @@ duplexify@^3.4.2, duplexify@^3.6.0:
    readable-stream "^2.0.0"
    stream-shift "^1.0.0"

+earcut@^2.1.5:
+  version "2.1.5"
+  resolved "https://registry.yarnpkg.com/earcut/-/earcut-2.1.5.tgz#829280a9a3a0f5fee0529f0a47c3e4eff09b21e4"
+  integrity sha512-QFWC7ywTVLtvRAJTVp8ugsuuGQ5mVqNmJ1cRYeLrSHgP3nycr2RHTJob9OtM0v8ujuoKN0NY1a93J/omeTL1PA==
+
 ecc-jsbn@~0.1.1:
  version "0.1.2"
  resolved "https://registry.yarnpkg.com/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz#3a83a904e54353287874c564b7549386849a98c9"
@@ -2162,6 +2244,11 @@ escope@^3.6.0:
    esrecurse "^4.1.0"
    estraverse "^4.1.1"

+esm@^3.0.84:
+  version "3.2.5"
+  resolved "https://registry.yarnpkg.com/esm/-/esm-3.2.5.tgz#036e410a2373ea81bfe62166c419ca0b0cf85c09"
+  integrity sha512-rukU6Nd3agbHQCJWV4rrlZxqpbO3ix8qhUxK1BhKALGS2E465O0BFwgCOqJjNnYfO/I2MwpUBmPsW8DXoe8tcA==
+
 esprima@^2.6.0:
  version "2.7.3"
  resolved "https://registry.yarnpkg.com/esprima/-/esprima-2.7.3.tgz#96e3b70d5779f6ad49cd032673d1c312767ba581"
@@ -2170,6 +2257,11 @@ esprima@^4.0.0:
  version "4.0.1"
  resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.1.tgz#13b04cdb3e6c5d19df91ab6987a8695619b0aa71"

+esprima@~1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/esprima/-/esprima-1.0.4.tgz#9f557e08fc3b4d26ece9dd34f8fbf476b62585ad"
+  integrity sha1-n1V+CPw7TSbs6d00+Pv0drYlha0=
+
 esrecurse@^4.1.0:
  version "4.2.1"
  resolved "https://registry.yarnpkg.com/esrecurse/-/esrecurse-4.2.1.tgz#007a3b9fdbc2b3bb87e4879ea19c92fdbd3942cf"
@@ -2264,6 +2356,11 @@ expand-range@^1.8.1:
  dependencies:
    fill-range "^2.1.0"

+expect.js@~0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/expect.js/-/expect.js-0.2.0.tgz#1028533d2c1c363f74a6796ff57ec0520ded2be1"
+  integrity sha1-EChTPSwcNj90pnlv9X7AUg3tK+E=
+
 express@^4.16.2:
  version "4.16.4"
  resolved "https://registry.yarnpkg.com/express/-/express-4.16.4.tgz#fddef61926109e24c515ea97fd2f1bdbf62df12e"
@@ -2603,6 +2700,11 @@ gaze@^1.0.0:
  dependencies:
    globule "^1.0.0"

+geojson-vt@^3.2.1:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/geojson-vt/-/geojson-vt-3.2.1.tgz#f8adb614d2c1d3f6ee7c4265cad4bbf3ad60c8b7"
+  integrity sha512-EvGQQi/zPrDA6zr6BnJD/YhwAkBP8nnJ9emh3EnHQKVMfg/MRVtPbMYdgVy/IaEmn4UfagD2a6fafPDL5hbtwg==
+
 get-caller-file@^1.0.1:
  version "1.0.3"
  resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-1.0.3.tgz#f978fa4c90d1dfe7ff2d6beda2a515e713bdcf4a"
@@ -2625,6 +2727,11 @@ getpass@^0.1.1:
  dependencies:
    assert-plus "^1.0.0"

+gl-matrix@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/gl-matrix/-/gl-matrix-3.0.0.tgz#888301ac7650e148c3865370e13ec66d08a8381f"
+  integrity sha512-PD4mVH/C/Zs64kOozeFnKY8ybhgwxXXQYGWdB4h68krAHknWJgk9uKOn6z8YElh5//vs++90pb6csrTIDWnexA==
+
 glob-base@^0.3.0:
  version "0.3.0"
  resolved "https://registry.yarnpkg.com/glob-base/-/glob-base-0.3.0.tgz#dbb164f6221b1c0b1ccf82aea328b497df0ea3c4"
@@ -2719,6 +2826,11 @@ graceful-fs@^4.1.11, graceful-fs@^4.1.2:
  version "4.1.15"
  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.1.15.tgz#ffb703e1066e8a0eeaa4c8b80ba9253eeefbfb00"

+grid-index@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/grid-index/-/grid-index-1.1.0.tgz#97f8221edec1026c8377b86446a7c71e79522ea7"
+  integrity sha512-HZRwumpOGUrHyxO5bqKZL0B0GlUpwtCAzZ42sgxUPniu33R1LSFH5yrIcBCHjkctCAh3mtWKcKd9J4vDDdeVHA==
+
 growly@^1.3.0:
  version "1.3.0"
  resolved "https://registry.yarnpkg.com/growly/-/growly-1.3.0.tgz#f10748cbe76af964b7c96c93c6bcc28af120c081"
@@ -2976,7 +3088,7 @@ icss-utils@^2.1.0:
  dependencies:
    postcss "^6.0.1"

-ieee754@^1.1.4:
+ieee754@^1.1.4, ieee754@^1.1.6:
  version "1.1.12"
  resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.1.12.tgz#50bf24e5b9c8bb98af4964c941cdb0918da7b60b"

@@ -3477,6 +3589,11 @@ jsprim@^1.2.2:
    json-schema "0.2.3"
    verror "1.10.0"

+kdbush@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/kdbush/-/kdbush-3.0.0.tgz#f8484794d47004cc2d85ed3a79353dbe0abc2bf0"
+  integrity sha512-hRkd6/XW4HTsA9vjVpY9tuXJYLSlelnkTmVFu4M9/7MIYQtFcHpbugAU7UbOfjOiVSVYl2fqgBuJ32JUmRo5Ew==
+
 keyv@3.0.0:
  version "3.0.0"
  resolved "https://registry.yarnpkg.com/keyv/-/keyv-3.0.0.tgz#44923ba39e68b12a7cec7df6c3268c031f2ef373"
@@ -3700,6 +3817,41 @@ map-visit@^1.0.0:
  dependencies:
    object-visit "^1.0.0"

+mapbox-gl-vue@^1.9.0:
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/mapbox-gl-vue/-/mapbox-gl-vue-1.9.0.tgz#49865e5ff20c2cbfee322e6339fbb13cb162bb20"
+  integrity sha512-f2IJGkp9aPwzCi1mDZFJJt1txKdLIvhjJ6nanDF22C8MplU0davxTtqk6q1zmMhhJPSCgNrS6nZt7VzHPwFdCw==
+
+mapbox-gl@^0.53.0:
+  version "0.53.0"
+  resolved "https://registry.yarnpkg.com/mapbox-gl/-/mapbox-gl-0.53.0.tgz#b5b7e1da7d839fa019be1ae2a36fa098d8c634ce"
+  integrity sha512-bqD0VTpjD9jS/oXoSiLcUYViFXDvjIDWxo08Pfq5cgCdnRHoLEboItuB2AKsx8OPK5fYme0qhPe/ogF5HICjiA==
+  dependencies:
+    "@mapbox/geojson-rewind" "^0.4.0"
+    "@mapbox/geojson-types" "^1.0.2"
+    "@mapbox/jsonlint-lines-primitives" "^2.0.2"
+    "@mapbox/mapbox-gl-supported" "^1.4.0"
+    "@mapbox/point-geometry" "^0.1.0"
+    "@mapbox/tiny-sdf" "^1.1.0"
+    "@mapbox/unitbezier" "^0.0.0"
+    "@mapbox/vector-tile" "^1.3.1"
+    "@mapbox/whoots-js" "^3.1.0"
+    csscolorparser "~1.0.2"
+    earcut "^2.1.5"
+    esm "^3.0.84"
+    geojson-vt "^3.2.1"
+    gl-matrix "^3.0.0"
+    grid-index "^1.1.0"
+    minimist "0.0.8"
+    murmurhash-js "^1.0.0"
+    pbf "^3.0.5"
+    potpack "^1.0.1"
+    quickselect "^2.0.0"
+    rw "^1.3.3"
+    supercluster "^6.0.1"
+    tinyqueue "^2.0.0"
+    vt-pbf "^3.1.1"
+
 math-expression-evaluator@^1.2.14:
  version "1.2.17"
  resolved "https://registry.yarnpkg.com/math-expression-evaluator/-/math-expression-evaluator-1.2.17.tgz#de819fdbcd84dccd8fae59c6aeb79615b9d266ac"
@@ -3851,6 +4003,11 @@ minimatch@^3.0.4, minimatch@~3.0.2:
  dependencies:
    brace-expansion "^1.1.7"

+minimist@0.0.5:
+  version "0.0.5"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.5.tgz#d7aa327bcecf518f9106ac6b8f003fa3bcea8566"
+  integrity sha1-16oye87PUY+RBqxrjwA/o7zqhWY=
+
 minimist@0.0.8:
  version "0.0.8"
  resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.8.tgz#857fcabfc3397d2625b8228262e86aa7a011b05d"
@@ -3907,6 +4064,11 @@ mkdirp@0.5.x, "mkdirp@>=0.5 0", mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.0, mkd
  dependencies:
    minimist "0.0.8"

+moment@^2.24.0:
+  version "2.24.0"
+  resolved "https://registry.yarnpkg.com/moment/-/moment-2.24.0.tgz#0d055d53f5052aa653c9f6eb68bb5d12bf5c2b5b"
+  integrity sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg==
+
 move-concurrently@^1.0.1:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/move-concurrently/-/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92"
@@ -3937,6 +4099,11 @@ multicast-dns@^6.0.1:
    dns-packet "^1.3.1"
    thunky "^1.0.2"

+murmurhash-js@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/murmurhash-js/-/murmurhash-js-1.0.0.tgz#b06278e21fc6c37fa5313732b0412bcb6ae15f51"
+  integrity sha1-sGJ44h/Gw3+lMTcysEEry2rhX1E=
+
 mute-stream@0.0.7:
  version "0.0.7"
  resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.7.tgz#3075ce93bc21b8fab43e1bc4da7e8115ed1e7bab"
@@ -4514,6 +4681,14 @@ path-type@^3.0.0:
  dependencies:
    pify "^3.0.0"

+pbf@^3.0.5:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/pbf/-/pbf-3.1.0.tgz#f70004badcb281761eabb1e76c92f179f08189e9"
+  integrity sha512-/hYJmIsTmh7fMkHAWWXJ5b8IKLWdjdlAFb3IHkRBn1XUhIYBChVGfVwmHEAV3UfXTxsP/AKfYTXTS/dCPxJd5w==
+  dependencies:
+    ieee754 "^1.1.6"
+    resolve-protobuf-schema "^2.0.0"
+
 pbkdf2@^3.0.3:
  version "3.0.17"
  resolved "https://registry.yarnpkg.com/pbkdf2/-/pbkdf2-3.0.17.tgz#976c206530617b14ebb32114239f7b09336e93a6"
@@ -4877,6 +5052,11 @@ postcss@^6.0.0, postcss@^6.0.1, postcss@^6.0.17, postcss@^6.0.8:
    source-map "^0.6.1"
    supports-color "^5.4.0"

+potpack@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/potpack/-/potpack-1.0.1.tgz#d1b1afd89e4c8f7762865ec30bd112ab767e2ebf"
+  integrity sha512-15vItUAbViaYrmaB/Pbw7z6qX2xENbFSTA7Ii4tgbPtasxm5v6ryKhKtL91tpWovDJzTiZqdwzhcFBCwiMVdVw==
+
 prepend-http@^1.0.0:
  version "1.0.4"
  resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-1.0.4.tgz#d4f4562b0ce3696e41ac52d0e002e57a635dc6dc"
@@ -4916,6 +5096,11 @@ promise-inflight@^1.0.1:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/promise-inflight/-/promise-inflight-1.0.1.tgz#98472870bf228132fcbdd868129bad12c3c029e3"

+protocol-buffers-schema@^3.3.1:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/protocol-buffers-schema/-/protocol-buffers-schema-3.3.2.tgz#00434f608b4e8df54c59e070efeefc37fb4bb859"
+  integrity sha512-Xdayp8sB/mU+sUV4G7ws8xtYMGdQnxbeIfLjyO9TZZRJdztBGhlmbI5x1qcY4TG5hBkIKGnc28i7nXxaugu88w==
+
 proxy-addr@~2.0.4:
  version "2.0.4"
  resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-2.0.4.tgz#ecfc733bf22ff8c6f407fa275327b9ab67e48b93"
@@ -5008,6 +5193,11 @@ querystringify@^2.0.0:
  version "2.1.0"
  resolved "https://registry.yarnpkg.com/querystringify/-/querystringify-2.1.0.tgz#7ded8dfbf7879dcc60d0a644ac6754b283ad17ef"

+quickselect@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/quickselect/-/quickselect-2.0.0.tgz#f19680a486a5eefb581303e023e98faaf25dd018"
+  integrity sha512-RKJ22hX8mHe3Y6wH/N3wCM6BWtjaxIyyUIkpHOvfFnxdI4yD4tBXEBKSbriGujF6jnSVkJrffuo6vxACiSSxIw==
+
 randomatic@^3.0.0:
  version "3.1.1"
  resolved "https://registry.yarnpkg.com/randomatic/-/randomatic-3.1.1.tgz#b776efc59375984e36c537b2f51a1f0aff0da1ed"
@@ -5108,6 +5298,16 @@ readable-stream@1.0:
    isarray "0.0.1"
    string_decoder "~0.10.x"

+readable-stream@~1.1.0:
+  version "1.1.14"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-1.1.14.tgz#7cf4c54ef648e3813084c636dd2079e166c081d9"
+  integrity sha1-fPTFTvZI44EwhMY23SB54WbAgdk=
+  dependencies:
+    core-util-is "~1.0.0"
+    inherits "~2.0.1"
+    isarray "0.0.1"
+    string_decoder "~0.10.x"
+
 readdirp@^2.0.0:
  version "2.2.1"
  resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-2.2.1.tgz#0e87622a3325aa33e892285caf8b4e846529a525"
@@ -5129,6 +5329,13 @@ redent@^1.0.0:
    indent-string "^2.1.0"
    strip-indent "^1.0.1"

+redeyed@~0.4.0:
+  version "0.4.4"
+  resolved "https://registry.yarnpkg.com/redeyed/-/redeyed-0.4.4.tgz#37e990a6f2b21b2a11c2e6a48fd4135698cba97f"
+  integrity sha1-N+mQpvKyGyoRwuakj9QTVpjLqX8=
+  dependencies:
+    esprima "~1.0.4"
+
 reduce-css-calc@^1.2.6:
  version "1.3.0"
  resolved "https://registry.yarnpkg.com/reduce-css-calc/-/reduce-css-calc-1.3.0.tgz#747c914e049614a4c9cfbba629871ad1d2927716"
@@ -5289,6 +5496,13 @@ resolve-from@^3.0.0:
  version "3.0.0"
  resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-3.0.0.tgz#b22c7af7d9d6881bc8b6e653335eebcb0a188748"

+resolve-protobuf-schema@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/resolve-protobuf-schema/-/resolve-protobuf-schema-2.1.0.tgz#9ca9a9e69cf192bbdaf1006ec1973948aa4a3758"
+  integrity sha512-kI5ffTiZWmJaS/huM8wZfEMer1eRd7oJQhDuxeCLe3t7N7mX3z94CN0xPxBQxFYQTSNz9T0i+v6inKqSdK8xrQ==
+  dependencies:
+    protocol-buffers-schema "^3.3.1"
+
 resolve-url@^0.2.1:
  version "0.2.1"
  resolved "https://registry.yarnpkg.com/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a"
@@ -5347,6 +5561,11 @@ run-queue@^1.0.0, run-queue@^1.0.3:
  dependencies:
    aproba "^1.1.1"

+rw@^1.3.3:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/rw/-/rw-1.3.3.tgz#3f862dfa91ab766b14885ef4d01124bfda074fb4"
+  integrity sha1-P4Yt+pGrdmsUiF700BEkv9oHT7Q=
+
 rx@^4.1.0:
  version "4.1.0"
  resolved "https://registry.yarnpkg.com/rx/-/rx-4.1.0.tgz#a5f13ff79ef3b740fe30aa803fb09f98805d4782"
@@ -5515,6 +5734,18 @@ shallow-clone@^1.0.0:
    kind-of "^5.0.0"
    mixin-object "^2.0.1"

+sharkdown@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/sharkdown/-/sharkdown-0.1.0.tgz#61d4fe529e75d02442127cc9234362265099214f"
+  integrity sha1-YdT+Up510CRCEnzJI0NiJlCZIU8=
+  dependencies:
+    cardinal "~0.4.2"
+    expect.js "~0.2.0"
+    minimist "0.0.5"
+    split "~0.2.10"
+    stream-spigot "~2.1.2"
+    through "~2.3.4"
+
 shebang-command@^1.2.0:
  version "1.2.0"
  resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea"
@@ -5691,6 +5922,13 @@ split-string@^3.0.1, split-string@^3.0.2:
  dependencies:
    extend-shallow "^3.0.0"

+split@~0.2.10:
+  version "0.2.10"
+  resolved "https://registry.yarnpkg.com/split/-/split-0.2.10.tgz#67097c601d697ce1368f418f06cd201cf0521a57"
+  integrity sha1-Zwl8YB1pfOE2j0GPBs0gHPBSGlc=
+  dependencies:
+    through "2"
+
 sprintf-js@~1.0.2:
  version "1.0.3"
  resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
@@ -5768,6 +6006,13 @@ stream-shift@^1.0.0:
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/stream-shift/-/stream-shift-1.0.0.tgz#d5c752825e5367e786f78e18e445ea223a155952"

+stream-spigot@~2.1.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/stream-spigot/-/stream-spigot-2.1.2.tgz#7de145e819f8dd0db45090d13dcf73a8ed3cc035"
+  integrity sha1-feFF6Bn43Q20UJDRPc9zqO08wDU=
+  dependencies:
+    readable-stream "~1.1.0"
+
 strict-uri-encode@^1.0.0:
  version "1.1.0"
  resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz#279b225df1d582b1f54e65addd4352e18faa0713"
@@ -5839,6 +6084,13 @@ strip-json-comments@~2.0.1:
  version "2.0.1"
  resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"

+supercluster@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/supercluster/-/supercluster-6.0.1.tgz#4c0177d96daa195d58a5bad9f55dbf12fb727a4c"
+  integrity sha512-NTth/FBFUt9mwW03+Z6Byscex+UHu0utroIe6uXjGu9PrTuWtW70LYv9I1vPSYYIHQL74S5zAkrXrHEk0L7dGA==
+  dependencies:
+    kdbush "^3.0.0"
+
 supports-color@^2.0.0:
  version "2.0.0"
  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
@@ -5908,7 +6160,7 @@ through2@^2.0.0:
    readable-stream "~2.3.6"
    xtend "~4.0.1"

-through@^2.3.6:
+through@2, through@^2.3.6, through@~2.3.4:
  version "2.3.8"
  resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"

@@ -5930,6 +6182,11 @@ timers-browserify@^2.0.4:
  dependencies:
    setimmediate "^1.0.4"

+tinyqueue@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/tinyqueue/-/tinyqueue-2.0.0.tgz#8c40ceddd977bf133ffb35e903e0abe99d9d4e97"
+  integrity sha512-CuwAcoAyhS73YgUpTVWI6t/t2mo9zfqbxTbnu4B1U6QPPhq3mxMxywSbo3cWykan4cBkXBfE8F7qulYrNcsHyQ==
+
 tmp@^0.0.33:
  version "0.0.33"
  resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9"
@@ -6222,6 +6479,15 @@ vm-browserify@0.0.4:
  dependencies:
    indexof "0.0.1"

+vt-pbf@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/vt-pbf/-/vt-pbf-3.1.1.tgz#b0f627e39a10ce91d943b898ed2363d21899fb82"
+  integrity sha512-pHjWdrIoxurpmTcbfBWXaPwSmtPAHS105253P1qyEfSTV2HJddqjM+kIHquaT/L6lVJIk9ltTGc0IxR/G47hYA==
+  dependencies:
+    "@mapbox/point-geometry" "0.1.0"
+    "@mapbox/vector-tile" "^1.3.1"
+    pbf "^3.0.5"
+
 vue-analytics@^5.16.0:
  version "5.16.1"
  resolved "https://registry.yarnpkg.com/vue-analytics/-/vue-analytics-5.16.1.tgz#2fa909a245e1cee9993a69f0b72caf1dd6126c10"
@@ -6465,6 +6731,11 @@ websocket-extensions@>=0.1.1:
  version "0.1.3"
  resolved "https://registry.yarnpkg.com/websocket-extensions/-/websocket-extensions-0.1.3.tgz#5d2ff22977003ec687a4b87073dfbbac146ccf29"

+wgs84@0.0.0:
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/wgs84/-/wgs84-0.0.0.tgz#34fdc555917b6e57cf2a282ed043710c049cdc76"
+  integrity sha1-NP3FVZF7blfPKigu0ENxDASc3HY=
+
 whet.extend@~0.9.9:
  version "0.9.9"
  resolved "https://registry.yarnpkg.com/whet.extend/-/whet.extend-0.9.9.tgz#f877d5bf648c97e5aa542fadc16d6a259b9c11a1"