<main role="main" class="calendar--page" id="main">
<div class="container">
<div class="row breadcrumbs">
<div class="col-md-10 offset-md-1 col-lg-8 offset-lg-2">
<div class="breadcrumbs-container row">
<div class="col-12 col-lg-8 breadcrumb-col">
<nav aria-label="Breadcrumbs" class="mr-auto">
<ol class="breadcrumb ">
<li class="breadcrumb-item"><a href="/">Hem</a></li>
<li class="breadcrumb-item"><a href="/utbildning">Utbildning</a></li>
<li class="breadcrumb-item"><a href="/utbildning">Utbildning</a></li>
<li class="breadcrumb-item active" aria-current="page">En sjukt lång text som egentligen inte borde vara här. Men så blir det när man behöver testa vissa saker. :)</li>
</ol>
</nav>
</div>
<div class="col-12 col-lg-4 breadcrumb-col enablevue">
<nav class="breadcrumbs-actions float-md-left float-lg-right" aria-label="Page functions" id="breadcrumbs">
<ul class="page-functions-list list-unstyled">
<li v-if="isSetAsFavourite" id='remove-bookmark-container' class="page-functions-list-item">
<a href="javascript:void(0)" id="bookmarkremove" class="small-font" v-on:click="removeFavourite()">
<i class="material-icons blue">favorite</i>
<span>Ta bort favorit</span>
</a>
</li>
<li v-else id="save-bookmark-container" class="page-functions-list-item">
<a href="javascript:void(0)" id="bookmarksave" class="small-font" v-on:click="addFavourite()">
<i class="material-icons">favorite_border</i>
<span>Spara</span>
</a>
</li>
<li class="page-functions-list-item">
<div id="readspeaker_button1" class="rs_skip rsbtn rs_preserve">
<a rel="nofollow" class="rsbtn_play" accesskey="L" title="webReader" href="//app-eu.readspeaker.com/cgi-bin/rsent?customerid=5305&lang=sv_se&readid=maincontent;url=">
<span class="rsbtn_left rsimg rspart"><span
class="rsbtn_text"><span>Lyssna</span></span></span>
<span class="rsbtn_right rsimg rsplay rspart"></span>
</a>
</div>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row title-container">
<div class="col-md-10 mt-xs offset-md-1 col-lg-8 offset-lg-2">
<h1 class="heading-level-1">Kalendarium</h1>
</div>
</div>
</div>
<div class="enablevue">
<calendarview url="http://localhost:2000/getEvents" request="{"request":{"Settings":{"ImageWidth":300,"ImageHeight":300,"PreviewLength":200,"PageIndex":0,"MonthFilterCount":6,"IsInit":true,"CalendarPageId":12418,"PageSize":50,"LanguageId":"sv-SE","DefaultCity":""}}}"
place-text="Location" place-select-text="Select location" place-select-all-text="All locations" time-text="Time" time-select-text="Select time" time-select-all-text="All times" show-more-text="Show more" no-hits-text="No results..."></calendarview>
</div>
</main>
{{!< ../_preview-page}}
<main role="main" class="calendar--page" id="main">
{{render '@breadcrumbs' }}
{{#if title.value}}
<div class="container">
<div class="row title-container">
<div class="col-md-10 mt-xs offset-md-1 col-lg-8 offset-lg-2">
<h1 class="heading-level-1" {{{title.epiEditAttribute}}}>{{title.value}}</h1>
</div>
</div>
</div>
{{/if}}
<div class="enablevue">
<calendarview url="{{url}}" request="{{request}}" place-text="{{componentTexts.placeText.value}}"
place-select-text="{{componentTexts.placeSelectText.value}}"
place-select-all-text="{{componentTexts.placeSelectAllText.value}}"
time-text="{{componentTexts.timeText.value}}" time-select-text="{{componentTexts.timeSelectText.value}}"
time-select-all-text="{{componentTexts.timeSelectAllText.value}}"
show-more-text="{{componentTexts.showMoreText.value}}" no-hits-text="{{componentTexts.noHitsText.value}}"></calendarview>
</div>
</main>
{
"title": {
"value": "Kalendarium",
"epiEditAttribute": ""
},
"componentTexts": {
"placeText": {
"value": "Location"
},
"placeSelectText": {
"value": "Select location"
},
"placeSelectAllText": {
"value": "All locations"
},
"timeText": {
"value": "Time"
},
"timeSelectText": {
"value": "Select time"
},
"timeSelectAllText": {
"value": "All times"
},
"showMoreText": {
"value": "Show more"
},
"noHitsText": {
"value": "No results..."
}
},
"url": "http://localhost:2000/getEvents",
"request": "{\"request\":{\"Settings\":{\"ImageWidth\":300,\"ImageHeight\":300,\"PreviewLength\":200,\"PageIndex\":0,\"MonthFilterCount\":6,\"IsInit\":true,\"CalendarPageId\":12418,\"PageSize\":50,\"LanguageId\":\"sv-SE\",\"DefaultCity\":\"\"}}}"
}
Vue.component("calendarview", {
props: [
"url",
"request",
"placeText",
"placeSelectText",
"placeSelectAllText",
"timeText",
"timeSelectText",
"timeSelectAllText",
"showMoreText",
"noHitsText",
],
data() {
return {
initRequest: {},
currentRequest: {},
events: [],
currentPageIndex: 0,
nextPageIndex: 0,
currentCitys: [],
currentDates: [],
currentCity: "allCities",
currentDate: "allDates",
loading: false,
langId: "",
PromotedEvent: null
}
},
async created() {
console.log({url: this.url})
console.log({request: JSON.parse(this.request)})
this.initRequest = JSON.parse(this.request)
if(this.initRequest.request.Settings.LanguageId) {
this.langId = this.initRequest.request.Settings.LanguageId
}
this.currentRequest = JSON.parse(this.request)
this.loading = true;
let req = JSON.parse(this.request);
if(req.request.Settings.DefaultCity || req.request.Settings.City) {
this.currentCity = req.request.Settings.DefaultCity ? req.request.Settings.DefaultCity : req.request.Settings.City;
}
if(req.request.Settings.Month) {
this.currentDate = req.request.Settings.Month ;
}
let response = await axios.post(this.url, JSON.parse(this.request));
console.log({response: response})
let data = response.data.d;
if(data.PromotedEvent) {
let dateTime = moment(data.PromotedEvent.StartDate).toDate();
data.PromotedEvent.date = dateTime;
let date = data.PromotedEvent.StartDate;
let newDate = moment(date).locale(this.langId).format("dddd D MMMM");
data.PromotedEvent.StartDate = newDate;
console.log(data.PromotedEvent.StartDate)
this.PromotedEvent = data.PromotedEvent;
}
if(data.Events && data.Events.length > 0) {
data.Events.map(event => {
//Hitta startdatumet och konvertera till ett läsbart datum beroende på LanguageID.
if(event && event.StartDate) {
let dateTime = moment(event.StartDate).toDate();
event.date = dateTime;
let date = event.StartDate;
let newDate = moment(date).locale(this.langId).format("dddd D MMMM");
event.StartDate = newDate;
console.log(event.StartDate)
}
});
this.events = data.Events;
console.log({createdEvents: data.Events})
}
if(data.CurrentPageIndex) {
this.currentPageIndex = data.CurrentPageIndex;
}
if(data.NextPageIndex) {
this.nextPageIndex = data.NextPageIndex;
}
if(data.AvailableCitys) {
this.currentCitys = data.AvailableCitys
}
if(data.AvailableDates) {
this.currentDates = data.AvailableDates
}
this.loading = false;
},
methods: {
async fetchData(increasePageIndex) {
try {
this.loading = true;
this.currentPageIndex = 0;
this.nextPageIndex = 0;
this.currentRequest.request.Settings.PageIndex = 0;
if(increasePageIndex) {
this.currentRequest.request.Settings.PageIndex = increasePageIndex;
}
const response = await axios.post(this.url, this.currentRequest);
const data = response.data.d;
if(data.Events && data.Events.length > 0) {
data.Events.map(event => {
//Hitta startdatumet och konvertera till ett läsbart datum beroende på LanguageID.
if(event && event.StartDate) {
let dateTime = moment(event.StartDate).toDate();
event.date = dateTime;
let date = event.StartDate;
let newDate = moment(date).locale(this.langId).format("dddd D MMMM");
event.StartDate = newDate;
console.log(event.StartDate)
}
});
if(!increasePageIndex){
this.events = data.Events;
} else {
data.Events.map(event => {
this.events.push(event);
})
}
}
if(data.CurrentPageIndex) {
this.currentPageIndex = data.CurrentPageIndex;
}
if(data.NextPageIndex) {
this.nextPageIndex = data.NextPageIndex;
}
if(data.AvailableCitys) {
this.currentCitys = data.AvailableCitys
}
if(data.AvailableDates) {
this.currentDates = data.AvailableDates
}
this.loading = false;
} catch (error) {
console.log(error)
this.loading = false;
}
},
async onChangeCity(event) {
console.log(event.target.value)
if(event.target.value !== "allCities") {
this.currentRequest.request.Settings.City = event.target.value
this.currentRequest.request.Settings.DefaultCity = event.target.value
this.fetchData();
} else {
this.currentRequest.request.Settings.City = "";
this.currentRequest.request.Settings.DefaultCity = "";
this.fetchData();
}
},
async fetchMoreData(nextPageNumber) {
if(nextPageNumber) {
this.currentRequest.request.Settings.PageIndex = nextPageNumber;
this.fetchData(nextPageNumber);
}
},
async onChangeDate(event) {
console.log(event.target.value)
if(event.target.value !== "allDates") {
this.currentRequest.request.Settings.Month = moment(event.target.value).format()
this.fetchData();
} else {
this.currentRequest.request.Settings.Month = "";
this.fetchData();
}
}
},
computed: {
eventsFilteredByDate: function() {
return _.orderBy(this.events, "date", ["asc"])
}
},
template: `
<div class="vld-parent container events--component">
<vloading :height="32" :can-cancel="false" :width="32" :color="'#404040'" :is-full-page="false" :active.sync="loading"></vloading>
<div class="row mb-md">
<div class="col-md-10 mt-xs offset-md-1 col-lg-8 offset-lg-2">
<div class="row ">
<div class="col-12 col-md-6">
<div class="d-flex flex-column">
<label class="font-weight-bold" for="citySelect" v-html="timeText"></label>
<select class="select-css" id="citySelect" v-if="currentCitys" v-model="currentCity" @change="onChangeCity($event)">
<option value="allCities" selected>{{this.placeSelectAllText}}</option>
<option v-for="(city, index) in currentCitys" :value="city.CityValue" :key="index">
{{city.CityName}}
</option>
</select>
<div class="d-block d-sm-none mb-3"></div>
</div>
</div>
<div class="col-12 col-md-6">
<div class="d-flex flex-column">
<label class="font-weight-bold" for="dateSelect" v-html="placeText"></label>
<select class="select-css" id="dateSelect" v-if="currentDates" v-model="currentDate" @change="onChangeDate($event)">
<option value="allDates" selected>{{this.timeSelectAllText}}</option>
<option v-for="(date, index) in currentDates" :value="date.MonthDateTime" :key="index">
{{date.MonthName}}
</option>
</select>
</div>
</div>
</div>
</div>
</div>
<div v-if="PromotedEvent" class="row event--container" >
<div class="col-md-10 offset-md-1 col-lg-8 offset-lg-2" >
<article role="article" class="d-flex flex-column event">
<div class="d-flex flex-row">
<div class="d-flex flex-fill align-items-center">
<time class="caption" v-if="PromotedEvent && PromotedEvent.StartDate">{{ PromotedEvent.StartDate | capitalize }}</time>
</div>
<div class="d-flex flex-fill"></div>
<div class="d-flex flex-fill"></div>
</div>
<a v-if="PromotedEvent.Url" :href="PromotedEvent.Url">
<h2 class="heading-level-3" v-if="PromotedEvent.Title" v-html="PromotedEvent.Title">
</h2>
</a>
<p v-if="PromotedEvent.Intro" v-html="PromotedEvent.Intro"></p>
<div class="d-flex flex-row align-items-center flex-wrap PromotedEvent--info">
<time class="mr-3" v-if="PromotedEvent && PromotedEvent.StartDate">{{ PromotedEvent.StartDate | capitalize }}</time>
<div class="d-flex flex-row align-items-center mr-3" v-if="PromotedEvent && PromotedEvent.StartTime && PromotedEvent.StopTime">
<time>{{PromotedEvent.StartTime}}</time> -
<time>{{PromotedEvent.StopTime}}</time>
</div>
<p class="mb-0" v-if="PromotedEvent.City" v-html="PromotedEvent.City">Sundsvall</p>
<p class="mb-0" v-if="PromotedEvent.City && PromotedEvent.Location">, </p>
<p class="mb-0" v-if="PromotedEvent.Location" v-html="PromotedEvent.Location"></p>
</div>
</article>
</div>
</div>
<div v-if="events" class="row event--container" v-for="(event, index) in eventsFilteredByDate" :key="index">
<div class="col-md-10 offset-md-1 col-lg-8 offset-lg-2" v-if="event">
<article role="article" class="d-flex flex-column event">
<div class="d-flex flex-row">
<div class="d-flex flex-fill align-items-center">
<time class="caption" v-if="event && event.StartDate">{{ event.StartDate | capitalize }}</time>
</div>
<div class="d-flex flex-fill"></div>
<div class="d-flex flex-fill"></div>
</div>
<a v-if="event.Url" :href="event.Url">
<h2 class="heading-level-3" v-if="event.Title" v-html="event.Title">
</h2>
</a>
<p v-if="event.Intro" v-html="event.Intro"></p>
<div class="d-flex flex-row align-items-center flex-wrap event--info">
<time class="mr-3" v-if="event && event.StartDate">{{ event.StartDate | capitalize }}</time>
<div class="d-flex flex-row align-items-center mr-3" v-if="event && event.StartTime && event.StopTime">
<time>{{event.StartTime}}</time> -
<time>{{event.StopTime}}</time>
</div>
<p class="mb-0" v-if="event.City" v-html="event.City">Sundsvall</p>
<p class="mb-0" v-if="event.City && event.Location">, </p>
<p class="mb-0" v-if="event.Location" v-html="event.Location"></p>
</div>
</article>
</div>
</div>
<div class="row mt-md mb-md">
<div class="col-12">
<div class="d-flex justify-content-center align-items-center">
<button class="button-small" v-if="nextPageIndex > currentPageIndex" @click="fetchMoreData(nextPageIndex)">{{this.showMoreText}}</button>
</div>
</div>
</div>
</div>
`
})
// Vue.component("calendarcomponent", {
// props: [
// "url",
// "request",
// "placeText",
// "placeSelectText",
// "placeSelectAllText",
// "timeText",
// "timeSelectText",
// "timeSelectAllText",
// "showMoreText",
// "noHitsText",
// ],
// data() {
// return {
// events: [],
// dates: [],
// cities: [],
// PromotedEvent: "",
// fetchUrl: "",
// loading: false,
// cPageIndex: 0,
// nPageIndex: 0,
// hasFilteredCity: false,
// hasFilteredDate: false,
// hasDefaultCity: "",
// place: this.placeText,
// fetchMoreLoading: false,
// placeSelect: this.placeSelectText,
// placeSelectAll: this.placeSelectAllText,
// time: this.timeText,
// timeSelect: this.timeSelectText,
// timeSelectAll: this.timeSelectAllText,
// showMore: this.showMoreText,
// noHits: this.noHitsText,
// req: {
// request: {
// Settings: {
// CalendarPageId: 0,
// Category: 0,
// City: "",
// DateFrom: "0001-01-01T00:00:00.000Z",
// DateTo: "0001-01-01T00:00:00.000Z",
// EventUniqueId: null,
// FromBlock: false,
// ImageHeight: 300,
// ImageWidth: 300,
// IsInit: false,
// IsStored: false,
// LanguageId: "",
// MaxDate: "0001-01-01T00:00:00.000Z",
// MinDate: "0001-01-01T00:00:00.000Z",
// Month: "0001-01-01T00:00:00.000Z",
// MonthFilterCount: 0,
// PageIndex: 0,
// PageSize: 0,
// PreviewLength: 0,
// SortDescending: false,
// SortProperty: null
// }
// }
// }
// };
// },
// mounted() {
// if (this.url && this.request) {
// console.log(JSON.parse(this.request))
// console.log("hello")
// let req = JSON.parse(this.request);
// let hasDefaultCity = req.request.Settings.DefaultCity;
// if(hasDefaultCity) {
// this.hasDefaultCity = hasDefaultCity;
// }
// this.fetchUrl = this.url;
// this.init(this.url, JSON.parse(this.request));
// }
// },
// methods: {
// async fetchMore() {
// try {
// this.fetchMoreLoading = true;
// let req = this.req.request.Settings;
// req.request.Settings.PageIndex++;
// const response = await fetch(this.fetchUrl, {
// method: "post",
// headers: {
// Accept: "application/json, text/plain, */*",
// "Content-Type": "application/json;charset=UTF-8"
// },
// body: JSON.stringify(req)
// });
// const data = await response.json();
// if (data.d) {
// this.cPageIndex = data.d.CurrentPageIndex;
// this.nPageIndex = data.d.NextPageIndex;
// if (data.d.Events && data.d.Events.length > 0) {
// data.d.Events.map(event => {
// event.StartDate = moment(event.StartDate)
// .locale(data.d.Settings.LanguageId)
// .format("dddd Do MMMM");
// console.log({event: event})
// if(event.UniqueId == this.PromotedEvent.UniqueId) {
// console.log("Event is not unique. Wont add to array")
// } else {
// this.events.push(event)
// }
// });
// }
// }
// this.fetchMoreLoading = false;
// } catch (error) {
// this.fetchMoreLoading = false;
// }
// },
// async fetchByCity(value) {
// this.cPageIndex = 0;
// this.nPageIndex = 0;
// this.req.request.Settings.City = value;
// try {
// this.loading = true;
// const response = await fetch(this.fetchUrl, {
// method: "post",
// headers: {
// Accept: "application/json, text/plain, */*",
// "Content-Type": "application/json;charset=UTF-8"
// },
// body: JSON.stringify(this.req)
// });
// const data = await response.json();
// if (data.d) {
// this.cPageIndex = data.d.CurrentPageIndex;
// this.nPageIndex = data.d.NextPageIndex;
// if (data.d.Events.length == 0 || data.d.Events === undefined) {
// this.events = [];
// }
// if (data.d.Events && data.d.Events.length > 0) {
// await data.d.Events.map(event => {
// //Hitta startdatumet och konvertera till ett läsbart datum beroende på LanguageID.
// event.StartDate = moment(event.StartDate)
// .locale(data.d.Settings.LanguageId)
// .format("dddd Do MMMM");
// });
// this.events = data.d.Events;
// }
// }
// this.hasFilteredCity = true;
// if (value == "") {
// this.hasFilteredCity = false;
// }
// this.loading = false;
// } catch (error) {
// this.loading = false;
// }
// },
// async fetchByDate(value) {
// this.cPageIndex = 0;
// this.nPageIndex = 0;
// this.req.request.Settings.Month = value;
// try {
// this.loading = true;
// const response = await fetch(this.fetchUrl, {
// method: "post",
// headers: {
// Accept: "application/json, text/plain, */*",
// "Content-Type": "application/json;charset=UTF-8"
// },
// body: JSON.stringify(this.req)
// });
// const data = await response.json();
// if (data.d) {
// this.cPageIndex = data.d.CurrentPageIndex;
// this.nPageIndex = data.d.NextPageIndex;
// if (data.d.Events.length == 0 || data.d.Events === undefined) {
// this.events = [];
// }
// if (data.d.Events && data.d.Events.length > 0) {
// await data.d.Events.map(event => {
// event.StartDate = moment(event.StartDate)
// .locale(data.d.Settings.LanguageId)
// .format("dddd Do MMMM");
// });
// this.events = data.d.Events;
// }
// }
// this.hasFilteredDate = true;
// if (value === "0001-01-01T00:00:00.000Z") {
// this.hasFilteredDate = false;
// }
// this.loading = false;
// } catch (error) {
// this.loading = false;
// }
// },
// async init(url, req) {
// try {
// this.loading = true;
// const response = await fetch(url, {
// method: "post",
// headers: {
// Accept: "application/json, text/plain, */*",
// "Content-Type": "application/json;charset=UTF-8"
// },
// body: JSON.stringify(req)
// });
// const data = await response.json();
// if(data.d.PromotedEvent) {
// data.d.PromotedEvent.PublishedDate = moment(
// data.d.PromotedEvent.PublishedDate
// )
// .locale(data.d.Settings.LanguageId)
// .format("dddd D MMMM YYYY");
// this.PromotedEvent = data.d.PromotedEvent;
// }
// if (data.d) {
// this.cPageIndex = data.d.CurrentPageIndex;
// this.nPageIndex = data.d.NextPageIndex;
// this.dates.push(...data.d.AvailableDates);
// this.cities.push(...data.d.AvailableCitys);
// if (data.d.AvailableCitys) {
// this.cities = data.d.AvailableCitys;
// }
// if (data.d.AvailableDates) {
// await data.d.AvailableDates.map(date => {
// let d = moment(date.MonthDateTime).endOf("month");
// date.MonthDateTime = new Date(d).toISOString();
// });
// this.dates = data.d.AvailableDates;
// }
// if (data.d.Settings) {
// this.req.request.Settings.CalendarPageId =
// data.d.Settings.CalendarPageId;
// this.req.request.Settings.Category = data.d.Settings.Category;
// this.req.request.Settings.City = data.d.Settings.City;
// this.req.request.Settings.EventUniqueId =
// data.d.Settings.EventUniqueId;
// this.req.request.Settings.FromBlock = data.d.Settings.FromBlock;
// this.req.request.Settings.ImageHeight = data.d.Settings.ImageHeight;
// this.req.request.Settings.ImageWidth = data.d.Settings.ImageWidth;
// this.req.request.Settings.IsInit = data.d.Settings.IsInit;
// this.req.request.Settings.IsStored = data.d.Settings.IsStored;
// this.req.request.Settings.LanguageId = data.d.Settings.LanguageId;
// this.req.request.Settings.MonthFilterCount =
// data.d.Settings.MonthFilterCount;
// this.req.request.Settings.PageIndex = data.d.Settings.PageIndex;
// this.req.request.Settings.PageSize = data.d.Settings.PageSize;
// this.req.request.Settings.PreviewLength =
// data.d.Settings.PreviewLength;
// this.req.request.Settings.SortDescending =
// data.d.Settings.SortDescending;
// this.req.request.Settings.SortProperty =
// data.d.Settings.SortProperty;
// }
// if (data.d.Events && data.d.Events.length > 0) {
// await data.d.Events.map(event => {
// //Hitta startdatumet och konvertera till ett läsbart datum beroende på LanguageID.
// event.StartDate = moment(event.StartDate)
// .locale(data.d.Settings.LanguageId)
// .format("dddd D MMMM");
// });
// this.events.push(...data.d.Events);
// }
// }
// this.loading = false;
// } catch (error) {
// this.loading = false;
// }
// }
// },
// template: `
// <div class="container events--component mb-5">
// <transition name="fade" mode="out-in">
// <filter-area
// :place="place"
// :placeSelect="placeSelect"
// :placeSelectAll="placeSelectAll"
// :time="time"
// :timeSelect="timeSelect"
// :timeSelectAll="timeSelectAll"
// :initWithDefaultCity="hasDefaultCity ? hasDefaultCity : ''"
// @fetchnewcity="this.fetchByCity" @fetchnewdate="this.fetchByDate" v-if="this.dates && this.cities" :dates="this.dates" :cities="this.cities" class="mb-3"/>
// </transition>
// <transition name="fade" mode="out-in">
// <event-list :fetchLoading="fetchMoreLoading" :showMore="showMore" @fetchMore="this.fetchMore" key="1" :hasFilteredCity="this.hasFilteredCity" :hasFilteredDate="this.hasFilteredDate" :cPageIndex="this.cPageIndex" :nPageIndex="this.nPageIndex" :promotedEvent="this.PromotedEvent" :events="this.events" :loading="this.loading" v-if="!this.loading"></event-list>
// <loading-comp v-else key="2" />
// </transition>
// </div>
// `
// });
// Vue.component("load-more-btn", {
// props: ["showMore"],
// template: `
// <div class="row mt-3" v-cloak>
// <div class="col-12 text-center">
// <button class="d-flex align-items-center button-small ml-auto mr-auto">
// {{this.showMore}}
// </button>
// </div>
// </div>
// `
// });
// Vue.component("filter-area", {
// props: {
// dates: {
// type: Array
// },
// cities: {
// type: Array
// },
// place: {
// type: String
// },
// placeSelect: {
// type: String
// },
// placeSelectAll: {
// type: String
// },
// time: {
// type: String
// },
// timeSelect: {
// type: String
// },
// timeSelectAll: {
// type: String
// },
// placeSelect: {
// type: String
// },
// initWithDefaultCity: {
// type: String,
// required: true
// }
// },
// data() {
// return {
// selectedCity: "",
// selectedDate: "",
// selectedCityAlt: ""
// };
// },
// mounted() {
// this.$nextTick(function () {
// this.selectedCityAlt = this.initWithDefaultCity
// })
// },
// methods: {
// hasDefaultCity() {
// if(this.initWithDefaultCity) {
// alert(this.initWithDefaultCity)
// }
// },
// fetchCity(event) {
// this.$emit("fetchnewcity", event.target.value);
// },
// fetchDate(event) {
// this.$emit("fetchnewdate", event.target.value);
// }
// },
// template: `
// <div class="row">
// <div class="col-md-10 mt-xs offset-md-1 col-lg-8 offset-lg-2">
// <div class="row">
// <div class="col-12 col-md-6" v-if="this.cities.length > 0">
// <div class="d-flex flex-column">
// <label class="font-weight-bold" for="location">{{this.place}}</label>
// <select class="select-css" id="location" name="location" v-model="selectedCityAlt ? selectedCityAlt : selectedCity" @change="fetchCity($event)">
// <option selected disabled value="">{{this.placeSelect}}</option>
// <option :value="null">{{this.placeSelectAll}}</option>
// <option :value="item.CityValue" v-for="(item, index) in this.cities" :key="index">{{item.CityName}}</option>
// </select>
// <div class=".d-block .d-sm-none mb-3"></div>
// </div>
// </div>
// <div class="col-12 col-md-6" v-if="this.dates.length > 0">
// <div class="d-flex flex-column">
// <label class="font-weight-bold" for="date">{{this.time}}</label>
// <select class="select-css" id="date" name="date" v-model="selectedDate" @change="fetchDate($event)">
// <option selected disabled value="">{{this.timeSelect}}</option>
// <option value="0001-01-01T00:00:00.000Z">{{this.timeSelectAll}}</option>
// <option :value="item.MonthDateTime" v-for="(item, index) in this.dates" :key="index">{{item.MonthName}}</option>
// </select>
// </div>
// </div>
// </div>
// </div>
// </div>
// `
// });
// Vue.component("event-list", {
// props: ["events", "fetchLoading", "loading", "promotedEvent", "cPageIndex", "nPageIndex", "showMore", "noHits"],
// methods: {
// fetchMore() {
// this.$emit("fetchMore");
// }
// },
// template: `
// <div class="row" v-cloak>
// <div class="col-12" v-if="this.events.length > 0 && !this.loading">
// <div class="row event--container" v-if="!this.loading && this.promotedEvent && !this.hasFilteredDate && !this.hasFilteredCity" v-cloak>
// <div class="col-md-10 offset-md-1 col-lg-8 offset-lg-2">
// <event :url="this.promotedEvent.Url" :city="this.promotedEvent.City" :title="this.promotedEvent.Title" :date="this.promotedEvent.StartDate" :location="this.promotedEvent.Location" :startclock="this.promotedEvent.StartTime" :endclock="this.promotedEvent.StopTime" :excerpt="this.promotedEvent.Intro"/>
// </div>
// </div>
// <div class="row event--container" v-for="(event, index) in this.events" :key="index">
// <div class="col-md-10 offset-md-1 col-lg-8 offset-lg-2">
// <event :url="event.Url" :city="event.City" :title="event.Title" :date="event.StartDate" :location="event.Location" :startclock="event.StartTime" :endclock="event.StopTime" :excerpt="event.Intro"/>
// </div>
// </div>
// <div class="row" v-cloak v-if="this.cPageIndex < this.nPageIndex || !this.cPageIndex == this.nPageIndex && !this.loading">
// <div class="col-12 text-center">
// <button @click="fetchMore" class="d-flex align-items-center button-small ml-auto mr-auto">
// <template v-if="!this.fetchLoading">{{this.showMore}}</template>
// <template v-else><i class="material-icons">cached</i></template>
// </button>
// </div>
// </div>
// </div>
// <div class="col-12" v-else>
// <div class="row mt-3">
// <div class="col-12 text-center">
// {{this.noHits}}
// </div>
// </div>
// </div>
// </div>
// `
// });
// Vue.component("event", {
// props: [
// "city",
// "title",
// "location",
// "date",
// "startclock",
// "endclock",
// "excerpt",
// "",
// "url"
// ],
// template: `
// <article class="d-flex flex-column event" role="article">
// <div class="d-flex flex-row">
// <div class="d-flex flex-fill align-items-center">
// <time class="caption" v-if="this.date">{{ this.date | capitalize }}</time>
// </div>
// <div class="d-flex flex-fill"></div>
// <div class="d-flex flex-fill"></div>
// </div>
// <a v-if="this.url" :href="this.url">
// <h2 class="heading-level-3" v-if="this.title">{{this.title}}</h2>
// </a>
// <p v-if="this.excerpt">{{this.excerpt}}</p>
// <div class="d-flex flex-row align-items-center flex-wrap event--info">
// <time class="mr-3" v-if="this.date">{{this.date | capitalize}}</time>
// <div class="d-flex flex-row align-items-center mr-3" v-if="this.startclock && this.endclock">
// <time>{{this.startclock}}</time> -
// <time>{{this.endclock}}</time>
// </div>
// <p class="mb-0" v-if="this.city">{{this.city}}</p>
// <p class="mb-0" v-if="this.city && this.location">, </p>
// <p class="mb-0" v-if="this.location">{{this.location}}</p>
// </div>
// </article>
// `
// });
// Vue.component("loading-comp", {
// template: `
// <div class="row">
// <div class="col-12 text-center">
// <button disabled class="d-flex align-items-center button-small ml-auto mr-auto mt-3">
// <i class="material-icons">cached</i>
// </button>
// </div>
// </div>
// `
// });
.events--component {
.event--container {
border-top: 1px solid #eee;
.event {
padding: $sm-space 0;
.event--info {
time,
p {
font-size: 16px;
line-height: 19px;
}
}
}
}
}
.calendar--page {
.calendarpage--location {
p {
font-family: "Lato Bold";
margin-bottom: 10px;
}
}
.calendarpage--time {
p {
font-family: "Lato Bold";
margin-bottom: 10px;
}
}
.spin {
transform: rotate(360);
}
.button-small {
cursor: pointer;
p {
margin-bottom: 0px;
}
.material-icons {
margin-bottom: 0px;
animation-name: spin;
animation-duration: 1000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
}
[v-cloak] {
display: none;
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
}
There are no notes for this item.