<!-- index.html @ sitename/index.html -->
<head>
<script>
// pass to js
var propertyData = {};
propertyData['images'] = 'http://lc.org/images/1.jpg,http://lc.org/images/2.jpg';
propertyData['documents'] = 'http://lc.org/doc/go.pdf';
propertyData['property-detail'] = '<p>Property detail contents goes here</p>';
propertyData['events-timeline'] = '[{"date":"13th October 2017","description":"Property listed on resale market"},{"date":"12th October 2017","description":"Purchase completed"},{"date":"8th September 2017","description":"Contracts exchanged"},{"date":"23rd August 2017","description":"Property fully funded"},{"date":"16th August 2017","description":"Investment opened"}]';
propertyData['events-timeline'] = JSON.parse('[{"date":"13th October 2017","description":"Property listed on resale market"},{"date":"12th October 2017","description":"Purchase completed"},{"date":"8th September 2017","description":"Contracts exchanged"},{"date":"23rd August 2017","description":"Property fully funded"},{"date":"16th August 2017","description":"Investment opened"}]');
</script>
</head>
<!-- template @ sitename/src/components/MainPanel.vue -->
<!--use v-for to get value from data array-->
<li v-for="event in propertyData['events-timeline']">
<span class="title">{{event.description}}</span>
<span class="date">{{event.date}}</span>
</li>
<!--fotorama-->
<div class="fotorama" data-nav="thumbs">
<a v-for="img in images" :key="img" v-bind:href="img"><img :src="img" width="144" height="96"></a>
</div>
<!--document-->
<div class="col-md-6" v-for="d in documents" :key="d">
<a :href="d" target="_blank">
<i class="icon-download ion-ios-download-outline"></i> {{decodeURIComponent(d.split('/').pop())}}</a>
</div>
<!--show more/less-->
<truncate clamp="+ Show more" :length="200" less=" - Show Less" :text="propertyData['floorplan']" type="html"></truncate>
<script>
data() {
return {
propertyData: window.propertyData,
};
},
methods: {
filesToArray(propertyDataKey) {
if (!this.propertyData[propertyDataKey].trim()) return [];
return this.propertyData[propertyDataKey].split(",").map(img => {
return img.trim();
});
}
},
computed: {
images() {
return this.filesToArray("images");
},
documents() {
return this.filesToArray("documents");
}
}
};
</script>
