changes while integating with server

Author: samuelcolvin

config.js

@@ -41,7 +41,8 @@ module.exports = {
     env: {
       NODE_ENV: '"development"',
       RELEASE: '"development"',
-      SOCKET_API_URL: '"api/"',
+      // SOCKET_API_URL: '"api/"',
+      SOCKET_API_URL: '"https://socket.tutorcruncher.com"',
     },
     port: 8000,
     build_dir: path.resolve(__dirname, 'dev'),

index.html

@@ -24,6 +24,6 @@
     </main>
   </body>
   <script>
-    socket()
+    socket('115d3deb0a41c7b85d6c')
   </script>
 </html>

src/components/grid.vue

@@ -1,8 +1,8 @@
 <template>
   <div id="tcs-grid">
     <div v-for="contractor in contractors" class="tcs-col">
-      <router-link :to="{name: 'modal', params: {slug: contractor.slug}}" class="tcs-box">
-        <img :src="contractor.img" :alt="contractor.name">
+      <router-link :to="{name: 'modal', params: {link: contractor.link}}" class="tcs-box">
+        <img :src="contractor.photo" :alt="contractor.name">
         <h3 class="tcs-name">{{ contractor.name }}</h3>
       </router-link>
     </div>
@@ -15,7 +15,7 @@ export default {
   name: 'grid',
   created: function () {
     // called here so get_data can be passed an argument for extra pages
-    this.$root.get_data()
+    this.$root.get_list()
   },
   data: function () {
     return {contractors: this.$root.contractors}

src/components/modal.vue

@@ -22,20 +22,25 @@
                     179l-364 774q-16 33-47.5 52t-67.5 19-67.5-19-46.5-52l-365-774q-33-70-33-179 0-212 150-362t362-150
                     362 150 150 362z"/>
                 </svg>
-                <span>{{ contractor.location }}</span>
+                <span>{{ contractor.town }}, {{ contractor.country }}</span>
               </div>
 
               <div class="tcs-aside">{{ contractor.tag_line }}</div>
-              <div v-for="text_attribute in contractor.text_attributes">
-                <h3>{{ text_attribute.name }}</h3>
-                {{ text_attribute.value }}
+
+              <div>
+                {{ contractor.primary_description }}
+              </div>
+
+              <div v-for="attr in contractor_extra.extra_attributes">
+                <h3>{{ attr.name }}</h3>
+                {{ attr.value }}
               </div>
 
-              <table class="tcs-skills" v-if="contractor.skills">
+              <table class="tcs-skills" v-if="contractor_extra.skills">
                 <caption>
                   <h3>{{ $root.config.skills_label }}</h3>
                 </caption>
-                <tr v-for="skill in contractor.skills">
+                <tr v-for="skill in contractor_extra.skills">
                   <th scope="row">{{ skill.subject }}</th>
                   <td>
                   <span v-for="qual_level in skill.qual_levels">
@@ -46,14 +51,17 @@
               </table>
             </div>
             <div class="tcs-extra">
-              <img :src="contractor.img" :alt="contractor.name">
+              <img :src="contractor.photo" :alt="contractor.name">
               <!--<button>Contact {{ contractor.name }}</button>-->
               <p v-html="contact_html"></p>
             </div>
           </div>
         </div>
 
       </div>
+      <div v-else class="tcs-container">
+        <p>Could not find contractor.</p>
+      </div>
     </div>
   </transition>
 </template>
@@ -68,13 +76,17 @@ export default {
   },
   computed: {
     contractor: function () {
-      // return _.find(this.$root.contractors, {'slug': this.$route.params.slug})
       for (var contractor of this.$root.contractors) {
-        if (contractor.slug === this.$route.params.slug) {
+        if (contractor.link === this.$route.params.link) {
+          console.log('con', contractor)
+          this.$root.get_details(contractor.url, contractor.link)
           return contractor
         }
       }
     },
+    contractor_extra: function () {
+      return this.$root.contractors_extra[this.$route.params.link] || {}
+    },
     contact_html: function () {
       let raw = this.$root.config.contact_html
       return raw.replace('{name}', this.contractor.name).replace('{contact_link}', this.$root.config.contact_link)
@@ -142,7 +154,7 @@ $back-colour: 35;
 .tcs-location {
   margin-bottom: 10px;
   float: right;
-  $svg-size: 24px;
+  $svg-size: 22px;
   svg {
     width: $svg-size;
     height: $svg-size;

src/main.js

@@ -20,7 +20,7 @@ const ConfiguredVueRouter = config => new VueRouter({
       component: grid,
       children: [
         {
-          path: '/:slug',
+          path: '/:link',
           name: 'modal',
           component: modal,
         }
@@ -29,7 +29,7 @@ const ConfiguredVueRouter = config => new VueRouter({
   ]
 })
 
-module.exports = function (config) {
+module.exports = function (public_key, config) {
   config = config || {}
 
   if (config.api_root === undefined) {
@@ -62,17 +62,19 @@ module.exports = function (config) {
     render: h => h(app),
     data: {
       contractors: [],
+      contractors_extra: {},
       config: config,
       error: null,
+      public_key: public_key,
     },
     components: {
       app
     },
     methods: {
       // get_data is called by components, eg. grid
-      get_data: function () {
+      get_list: function () {
         let xhr = new window.XMLHttpRequest()
-        let url = config.api_root + '/contractors.json'
+        let url = `${config.api_root}/${public_key}/contractors`
         xhr.open('GET', url)
         xhr.onload = () => {
           let contractors
@@ -83,9 +85,7 @@ module.exports = function (config) {
               contractors = JSON.parse(xhr.responseText)
             }
             this.contractors.splice(0)
-            contractors.forEach(con => {
-              this.contractors.push(con)
-            })
+            contractors.forEach(con => this.contractors.push(con))
           } catch (e) {
             this.error = `\
 ${e.toString()}
@@ -101,10 +101,26 @@ ${xhr.responseText}`
 Connection error
 requested url:   "${url}"
 response status: ${xhr.status}
-response text: "${xhr.responseText}"`
+response text:   "${xhr.responseText}"`
           Raven.captureException(new Error(this.error))
         }
         xhr.send()
+      },
+      get_details: function (url, link) {
+        if (this.contractors_extra[link] !== undefined) {
+          return
+        }
+        let xhr = new window.XMLHttpRequest()
+        xhr.open('GET', url)
+        xhr.onload = () => {
+          if (xhr.status !== 200) {
+            throw new Error(`bad response ${xhr.status}`)
+          } else {
+            let con = JSON.parse(xhr.responseText)
+            Vue.set(this.contractors_extra, link, con)
+          }
+        }
+        xhr.send()
       }
     }
   })