move assets

Author: jthoms1

src/assets/img/appicon.png renamed to public/assets/img/appicon.png

@@ -0,0 +1,23 @@
+[
+  {
+    "id": 1,
+    "name": "Map Center",
+    "lat": 43.071584,
+    "lng": -89.380120
+  }, {
+    "id": 2,
+    "name": "Monona Terrace Convention Center",
+    "lat": 43.071584,
+    "lng": -89.380120
+  }, {
+    "id": 3,
+    "name": "Ionic HQ",
+    "lat": 43.074395,
+    "lng": -89.381056
+  }, {
+    "id": 4,
+    "name": "Afterparty - Brocach Irish Pub",
+    "lat": 43.07336,
+    "lng": -89.38335
+  }
+]

src/assets/img/appicon.svg renamed to public/assets/img/appicon.svg

@@ -1,8 +1,3 @@
-import locations from './data/locations.json';
-
-export async function getLocations() {
-  return Promise.resolve(locations);
-}
 
 export const loadLocalStore = () => {
   try {

src/assets/img/ica-slidebox-img-1.png renamed to public/assets/img/ica-slidebox-img-1.png

@@ -1,23 +1,41 @@
 import { Module } from 'vuex';
 
 export interface Location {
+  id: number;
   name?: string;
   lat: number;
   lng: number;
 }
 
 export interface LocationState {
-  mapCenter: Location,
+  mapCenterId: number
   locations: Location[]
 }
 
 const locationStore: Module<LocationState, {}> = {
   state: {
-    mapCenter: {
-      lat: 43.071584,
-      lng: -89.380120,
-    },
+    mapCenterId: 1,
     locations: []
+  },
+  mutations: {
+    updateLocations(state, locations: Location[]) {
+      state.locations = locations;
+    },
+  },
+  actions: {
+    async loadLocationData({ commit }) {
+      const response = await fetch('/data/locations.json');
+      const data = await response.json();
+      commit('updateSpeakers', data);
+    }
+  },
+  getters: {
+    mapCenter(state) {
+      return state.locations.find(l => l.id === state.mapCenterId)
+    },
+    allLocations(state) {
+      return state.locations.filter(l => l.id !== state.mapCenterId)
+    }
   }
 };
 

src/assets/img/ica-slidebox-img-2.png renamed to public/assets/img/ica-slidebox-img-2.png

@@ -35,6 +35,9 @@ const defaultState: SessionState = {
 const sessionStore: Module<SessionState, {}> = {
   state: defaultState,
   mutations: {
+    updateSessions(state, sessions: Session[]) {
+      state.sessions = sessions;
+    },
     setSearchText(state, searchText: string) {
       state.searchText = searchText;
     },
@@ -62,6 +65,11 @@ const sessionStore: Module<SessionState, {}> = {
     }
   },
   actions: {
+    async loadSessionData({ commit }) {
+      const response = await fetch('/data/sessions.json');
+      const data = await response.json();
+      commit('updateSessions', data);
+    },
     setSearchText({ commit }, searchText: string) {
       commit('setSearchText', searchText)
     },

src/assets/img/ica-slidebox-img-3.png renamed to public/assets/img/ica-slidebox-img-3.png

@@ -15,11 +15,22 @@ export interface SpeakerState {
   speakers: Speaker[]
 }
 
-
 const speakerStore: Module<SpeakerState, {}> = {
   state: {
     speakers: []
   },
+  mutations: {
+    updateSpeakers(state, speakers: Speaker[]) {
+      state.speakers = speakers;
+    },
+  },
+  actions: {
+    async loadSpeakerData({ commit }) {
+      const response = await fetch('/data/speakers.json');
+      const data = await response.json();
+      commit('updateSpeakers', data);
+    }
+  },
   getters: {
     allSpeakers(state) {
       return state.speakers.concat().sort((a, b) => {

src/assets/img/ica-slidebox-img-4.png renamed to public/assets/img/ica-slidebox-img-4.png

@@ -16,7 +16,7 @@
 
     <ion-content>
       <div class="about-header">
-        <img src="../assets/img/ionic-logo-white.svg" alt="ionic logo">
+        <img src="/assets/img/ionic-logo-white.svg" alt="ionic logo">
       </div>
       <div padding class="about-info">
         <h4>Ionic Conference</h4>

src/assets/img/ionic-logo-white.svg renamed to public/assets/img/ionic-logo-white.svg

@@ -5,14 +5,13 @@
         <ion-buttons slot="start">
           <ion-menu-button></ion-menu-button>
         </ion-buttons>
-
         <ion-title>Login</ion-title>
       </ion-toolbar>
     </ion-header>
 
     <ion-content>
       <div class="login-logo">
-        <img src="../assets/img/appicon.svg" alt="Ionic logo">
+        <img src="/assets/img/appicon.svg" alt="Ionic logo">
       </div>
 
       <form novalidate>

src/assets/img/speakers/bear.jpg renamed to public/assets/img/speakers/bear.jpg

@@ -10,7 +10,7 @@
     </ion-header>
 
     <ion-content>
-      <div class="map-canvas"></div>
+      <div ref="map" class="map-canvas"></div>
     </ion-content>
   </div>
 </template>
@@ -32,40 +32,42 @@
 
 <script lang="ts">
   import { Component, Prop, Vue } from 'vue-property-decorator';
+  import { mapGetters } from 'vuex';
 
-  @Component
+  @Component({
+    computed: mapGetters(['mapCenter', 'allLocations'])
+  })
   export default class Login extends Vue {
+    mounted() {
+      this.$store.dispatch('loadLocationData');
+
+      const mapEle = this.$refs.map;
 
-    ionViewDidEnter() {
       /*
-      this.confData.getMap().subscribe((mapData: any) => {
-        const mapEle = this.mapElement.nativeElement;
+      const map = new google.maps.Map(mapEle, {
+        center: this.$store.getters.mapCenter,
+        zoom: 16
+      });
 
-        const map = new google.maps.Map(mapEle, {
-          center: mapData.find((d: any) => d.center),
-          zoom: 16
+      mapData.forEach((markerData: any) => {
+        const infoWindow = new google.maps.InfoWindow({
+          content: `<h5>${markerData.name}</h5>`
         });
 
-        mapData.forEach((markerData: any) => {
-          const infoWindow = new google.maps.InfoWindow({
-            content: `<h5>${markerData.name}</h5>`
-          });
-
-          const marker = new google.maps.Marker({
-            position: markerData,
-            map,
-            title: markerData.name
-          });
-
-          marker.addListener('click', () => {
-            infoWindow.open(map, marker);
-          });
+        const marker = new google.maps.Marker({
+          position: markerData,
+          map,
+          title: markerData.name
         });
 
-        google.maps.event.addListenerOnce(map, 'idle', () => {
-          mapEle.classList.add('show-map');
+        marker.addListener('click', () => {
+          infoWindow.open(map, marker);
         });
       });
+
+      google.maps.event.addListenerOnce(map, 'idle', () => {
+        mapEle.classList.add('show-map');
+      });
       */
     }
   }

src/assets/img/speakers/cheetah.jpg renamed to public/assets/img/speakers/cheetah.jpg

@@ -36,12 +36,12 @@
             </ion-label>
           </ion-item-divider>
 
-          <ion-item-sliding v-for="session in group.sessions" :track="session.tracks[0] | lowercase" :key="session">
+          <ion-item-sliding v-for="session in group.sessions" :key="session.id">
             <ion-item button @click="goToSessionDetail(session)">
               <ion-label>
                 <h3>{{session.name}}</h3>
                 <p>
-                  {{session.timeStart}} &mdash; {{session.timeEnd}}: {{session.location}}
+                  {{session.dateTimeStart}} &mdash; {{session.dateTimeEnd}}: {{session.location}}
                 </p>
               </ion-label>
             </ion-item>
@@ -100,13 +100,19 @@
 <script lang="ts">
   import { Component, Prop, Vue } from 'vue-property-decorator';
   import { mapGetters } from 'vuex';
-  import { Speaker } from '../store/modules/speakers';
+  import { Session } from '../store/modules/sessions';
 
   @Component({
-    computed: mapGetters(['groupedByStartTime'])
+    computed: mapGetters(['groupedByStartTime', 'allSpeakers'])
   })
   export default class SessionList extends Vue {
+    mounted() {
+      this.$store.dispatch('loadSessionData');
+      this.$store.dispatch('loadSpeakerData');
+    }
     segment = 'all';
     queryText = '';
+    goToSessionDetail(session: Session) {
+    }
   }
 </script>

src/assets/img/speakers/duck.jpg renamed to public/assets/img/speakers/duck.jpg

@@ -11,7 +11,7 @@
 
     <ion-content>
       <div class="signup-logo">
-        <img src="../assets/img/appicon.svg" alt="Ionic Logo">
+        <img src="/assets/img/appicon.svg" alt="Ionic Logo">
       </div>
       <form>
         <ion-list lines="none">

src/assets/img/speakers/eagle.jpg renamed to public/assets/img/speakers/eagle.jpg

@@ -89,7 +89,9 @@
     computed: mapGetters(['allSpeakers'])
   })
   export default class SpeakerList extends Vue {
-    computed() {
+    mounted() {
+      this.$store.dispatch('loadSessionData');
+      this.$store.dispatch('loadSpeakerData');
     }
     goToSpeakerDetail(speaker: Speaker) {
 

src/assets/img/speakers/elephant.jpg renamed to public/assets/img/speakers/elephant.jpg

@@ -11,7 +11,7 @@
 
     <ion-content>
       <div class="support-logo">
-        <img src="../assets/img/appicon.svg" alt="Ionic Logo">
+        <img src="/assets/img/appicon.svg" alt="Ionic Logo">
       </div>
       <form novalidate @submit="submit(submitForm)">
         <ion-list lines="none">

src/assets/img/speakers/giraffe.jpg renamed to public/assets/img/speakers/giraffe.jpg

@@ -11,7 +11,7 @@
     <ion-content>
       <ion-slides @ionSlideDidChange="onSlideChangeStart($event)" pager="false">
         <ion-slide>
-          <img src="../assets/img/ica-slidebox-img-1.png" class="slide-image" />
+          <img src="/assets/img/ica-slidebox-img-1.png" class="slide-image" />
           <h2 class="slide-title">
             Welcome to
             <b>ICA</b>
@@ -24,23 +24,23 @@
         </ion-slide>
 
         <ion-slide>
-          <img src="../assets/img/ica-slidebox-img-2.png" class="slide-image" />
+          <img src="/assets/img/ica-slidebox-img-2.png" class="slide-image" />
           <h2 class="slide-title">What is Ionic?</h2>
           <p>
             <b>Ionic Framework</b> is an open source SDK that enables developers to build high quality mobile apps with web technologies
             like HTML, CSS, and JavaScript.</p>
         </ion-slide>
 
         <ion-slide>
-          <img src="../assets/img/ica-slidebox-img-3.png" class="slide-image" />
+          <img src="/assets/img/ica-slidebox-img-3.png" class="slide-image" />
           <h2 class="slide-title">What is Ionic Pro?</h2>
           <p>
             <b>Ionic Pro</b> is a powerful set of services and features built on top of Ionic Framework that brings a totally new
             level of app development agility to mobile dev teams.</p>
         </ion-slide>
 
         <ion-slide>
-          <img src="../assets/img/ica-slidebox-img-4.png" class="slide-image" />
+          <img src="/assets/img/ica-slidebox-img-4.png" class="slide-image" />
           <h2 class="slide-title">Ready to Play?</h2>
           <ion-button fill="clear" @click="endTutorial()">
             Continue