<div id="app">
<div v-if="selectedMarket">
<button class="mt2 ml2 w2 h2 br-100 absolute bn dim white bg-dark-gray" v-on:click="back()">
<i class=" fa fa-arrow-left" aria-hidden="true"></i>
</button>
<div class="w-100 w-60-ns center shadow-2 pa3">
<div class="f3 flex justify-end">
<a href="test" class="link dim pl1 dark-gray">
<i class="fa fa-link" aria-hidden="true"></i>
</a>
<a href="test" class="link dim pl1 dark-gray">
<i class="fa fa-twitter" aria-hidden="true"></i>
</a>
</div>
<h1 class="tc">{{ selectedMarket.marketName }}</h1>
<p>{{ selectedMarket.description }}</p>
<p class="pa0 mv0">
<span class="fw6">Location: </span>
{{ selectedMarket.location }}
</p>
</br>
<p class="pa0 mv0">
<span class="fw6">Dates: </span>
{{ selectedMarket.originalDate }}
</p>
</br>
<p class="pa0 mv0">
<span class="fw6">Contact: </span>
{{ selectedMarket.contact }}: {{ selectedMarket.email }}
</p>
<hr/>
<div class="tc">
<a
class="mt2 fw6 link dim ph3 pv2 mb2 dib white bg-dark-blue"
href="#"
>Update your market</a>
</div>
<div class="mt2">
<span class="f6 "><span class="fw7">{{ selectedMarket.province }} growers, crafters, artisans and producers:</span> Increase your sales. Get more traffic. List your products on this page and the <a href="#">Buy Direct Directory</a></span>
</div>
</div>
</div>
<div v-else>
<h1 class="tc">{{ title }}</h1>
<div class="w-100 w-60-ns center">
<div
class="pa3 mb2 flex shadow-1 justify-between grow items-end"
v-for="item in markets"
v-on:click="selectMarket(item)"
>
<div>
<span class="f3 fw6">{{ item.marketName }}</span>
</br>
<span>{{ item.city }}, {{ item.province }}</span>
</div>
<div>
<span>{{getFirstMarketDay(item.schedules[0])}}</span>
</br>
<span>{{getFirstMarketTime(item.schedules[0])}}</span>
</div>
</div>
</div>
</div>
</div>@import url('https://fonts.googleapis.com/css?family=Noto+Serif');
body {
font-family: 'Noto Serif', serif;
}const WEEKDAYS = {
1: 'Sunday',
2: 'Monday',
3: 'Tuesday',
4: 'Wednesday',
5: 'Thursday',
6: 'Friday',
7: 'Saturday'
}
let leftPadCache = [
'',
' ',
' ',
' ',
' ',
' ',
' ',
' ',
' ',
' '
];
new Vue({
el: '#app',
methods: {
getFirstMarketDay(schedule) {
return `${WEEKDAYS[schedule.weekday]}`
},
getFirstMarketTime(schedule) {
let meridium = (schedule.startHours * 100 + schedule.startMinutes) >= 1200 ? 'PM' : 'AM'
let startTime = schedule.startHours > 12 ? schedule.startHours - 12 : schedule.startHours
return `${startTime}:${leftPad(schedule.startMinutes, 2, 0)} ${meridium}`
},
selectMarket(market) {
this.selectedMarket = market
},
showSellYours() {
this.sellYours = true
},
back() {
this.selectedMarket = null
}
},
data: function() {
return {
title: 'Upcoming Markets',
selectedMarket: undefined,
markets: [{
"description": "This is a year-round open air market.",
"location": "Belleville",
"originalDate": "Tuesdays, 7am - 6pm Thursdays, 7am - 6pm Saturdays, 7am - 6pm year-round",
"contact": "Belleville Farmers' Market 613-476-1255 email",
"marketName": "Belleville Farmers' Market",
"link": "http://farmersmarketonline.com/fm/BellevilleFarmersMarket.html",
"city": "Belleville",
"province": "Ontario",
"email": "jazzyj727@aol.com",
"schedules": [
{
"weekday": 3,
"startTime": 700,
"endTime": 1800,
"startHours": 7,
"startMinutes": 0,
"endHours": 18,
"endMinutes": 0,
"startMonth": 1,
"endMonth": 12
},
{
"weekday": 5,
"startTime": 700,
"endTime": 1800,
"startHours": 7,
"startMinutes": 0,
"endHours": 18,
"endMinutes": 0,
"startMonth": 1,
"endMonth": 12
},
{
"weekday": 7,
"startTime": 700,
"endTime": 1800,
"startMonth": 1,
"endMonth": 12,
"startHours": 7,
"startMinutes": 0,
"endHours": 18,
"endMinutes": 0
}
],
"incomplete": false
},{
"description": "This is a seasonal open air market featuring produce, meats, preserves, baked goods and crafts.",
"location": "Dryden",
"originalDate": "Alternate Thursdays, 3- 6pm July - September",
"contact": "Cloverbelt Country Farmers' Market 807.937.2000 email Dryden",
"marketName": "Cloverbelt Country Farmers Market",
"link": "http://farmersmarketonline.com/fm/CloverbeltCountryFarmersMarket.html",
"city": "Dryden",
"province": "Ontario",
"email": "cloverbeltfarmersmarket@gmail.com",
"schedules": [
{
"weekday": 5,
"startTime": 1500,
"endTime": 1800,
"startMonth": 7,
"endMonth": 9,
"startHours": 15,
"startMinutes": 0,
"endHours": 18,
"endMinutes": 0
}
],
"incomplete": false
}]
}
}
})
function leftPad (str, len, ch) {
// convert `str` to a `string`
str = str + '';
// `len` is the `pad`'s length now
len = len - str.length;
// doesn't need to pad
if (len <= 0) return str;
// `ch` defaults to `' '`
if (!ch && ch !== 0) ch = ' ';
// convert `ch` to a `string` cuz it could be a number
ch = ch + '';
// cache common use cases
if (ch === ' ' && len < 10) return leftPadCache[len] + str;
// `pad` starts with an empty string
var pad = '';
// loop
while (true) {
// add `ch` to `pad` if `len` is odd
if (len & 1) pad += ch;
// divide `len` by 2, ditch the remainder
len >>= 1;
// "double" the `ch` so this operation count grows logarithmically on `len`
// each time `ch` is "doubled", the `len` would need to be "doubled" too
// similar to finding a value in binary search tree, hence O(log(n))
if (len) ch += ch;
// `len` is 0, exit the loop
else break;
}
// pad `str`!
return pad + str;
}