Skip to content

Commit

Permalink
Data transferred using cms api
Browse files Browse the repository at this point in the history
  • Loading branch information
baris.esen committed Feb 12, 2020
1 parent faf5d09 commit d8ca178
Show file tree
Hide file tree
Showing 3 changed files with 58 additions and 80 deletions.
78 changes: 32 additions & 46 deletions app.js
View file
Original file line number Diff line number Diff line change
@@ -1,59 +1,45 @@
var dataURL = 'data.json';
const API_URL = 'https://cms.kommunity.com/api/events/phpkonf-2020?with[]=speakers&with[]=sessions&with[]=days&with[]=tracks&with[]=sponsorships&with[]=photos'

var App = new Vue({
el: '#app',
data: {
days: [
{
dayNumber: 1,
date: '11th April, 2020',
isSelected: true,
tracks: [
{ trackNumber: 1, isSelected: true },
{ trackNumber: 2, isSelected: false },
],
}
],
days: [],
speakers: [],
sessions: [],
},
mounted() {
axios.get(
dataURL
).then(
response => {
this.speakers = response.data;
}
);
this.getData()
},
methods: {
getSchedule: function (day, track) {
const schedules = [];

const speakersWithSessions = this.speakers.filter(x => x.sessions.find(y => y.day === day && y.track === track) !== undefined);

for (const speakerWithSessions of speakersWithSessions) {
for (const session of speakerWithSessions.sessions) {
if (session.day !== day || session.track !== track) {
continue;
}

const schedule = {
sessionNumber: session.session,
time: session.time,
language: session.language,
title: session.title,
description: session.description,
speaker: speakerWithSessions.name,
avatar: speakerWithSessions.avatar,
};

schedules.push(schedule);
getData: function () {
axios.get(API_URL).then(response => {
const { days, speakers } = response.data.data;
this.days = days
this.days[0].isSelected = true;
this.days[0].tracks[0].isSelected = true;
this.speakers = speakers;

this.getAllSessions();
this.addSessionsForSpeakers();
}
}

schedules.sort((a, b) => a.sessionNumber - b.sessionNumber);

return schedules;
);
},
getAllSessions: function () {
this.days.forEach(day => {
this.sessions = [...day.sessions, ...this.sessions]
});
},
addSessionsForSpeakers: function () {
this.speakers.forEach(speaker => {
speaker.sessions = this.sessions.filter(session => {
if (session.speaker.id === speaker.id) {
return session;
}
})
});
},
getSortedSpeakers: function () {
return _.sortBy(this.speakers, 'name')
},
getRandomSpeakers: function() {
return _.sampleSize(this.speakers, 6);
Expand Down
45 changes: 19 additions & 26 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -161,18 +161,16 @@ <h3>Speakers</h3>
<br/>
<br/>

<div class="col-sm-4" v-for="item in getRandomSpeakers()">
<div class="col-sm-4" v-for="speaker in getRandomSpeakers()">
<div class="speaker">
<div class="photo-wrapper rounded"><img width="200px" height="200px" :src="item.avatar"
:alt="item.name" class="img-responsive"></div>
<h3 class="name">{{ item.name }}</h3>
<div class="photo-wrapper rounded"><img width="200px" height="200px" :src="speaker.photo"
:alt="speaker.name" class="img-responsive"></div>
<h3 class="name">{{ speaker.name }}</h3>
<p class="text-alt">
<small>{{ item.title }}</small>
<small>{{ speaker.title }}</small>
</p>
<ul class="speaker-socials">
<li><a target="_blank" :href="item.social.twitter"><span class="fa fa-twitter"></span></a></li>
<li><a target="_blank" :href="item.social.github"><span class="fa fa-github"></span></a></li>
<!-- <li><a target="_blank" :href="item.social.linkedin"><span class="fa fa-linkedin"></span></a> -->
<li v-for="social in speaker.social_profiles"><a target="_blank" :href="'https://' + social.platform + '.com/' + social.username"><span :class="'fa fa-' + social.platform"></span></a></li>
</li>
</ul>
</div>
Expand All @@ -197,53 +195,48 @@ <h3>Schedule</h3>

<!-- Navigation by day start -->
<div class="nav-wrapper"><ul class="nav nav-schedule">
<li v-bind:class="{ active: day.isSelected }" v-for="day of days"><a v-bind:href="`#day${day.dayNumber}`" data-toggle="tab"><h5 class="highlight">{{ day.date }}</h5><p class="text-alt">Sessions</p></a></li>
<li v-bind:class="{ active: day.isSelected }" v-for="day of days"><a v-bind:href="`#day${day.id}`" data-toggle="tab"><h5 class="highlight">{{ day.date }}</h5><p class="text-alt">Sessions</p></a></li>
</ul></div>
<!-- Navigation by day end -->

<!-- First level content start -->
<div class="tab-content">

<!-- Day content start -->
<div v-bind:id="`day${day.dayNumber}`" v-bind:class="{ active: day.isSelected, 'tab-pane fade in': true }" v-for="day of days">
<div v-bind:id="`day${day.id}`" v-bind:class="{ active: day.isSelected, 'tab-pane fade in': true }" v-for="day of days">

<!-- Navigation by auditorium start -->
<div class="nav-wrapper"><ul class="nav nav-schedule">
<li v-bind:class="{ active: track.isSelected }" v-for="track of day.tracks">
<a v-bind:href="`#day${day.dayNumber}_auditorium${track.trackNumber}`" data-toggle="tab">
<div v-if="track.trackNumber == 1">
Track Sponsor 1
</div>
<div v-else>
Track Sponsor 2
</div>
<a v-bind:href="`#day${day.id}_auditorium${track.id}`" data-toggle="tab">
<div>{{ track.name }}</div>
</a>
</li>
</ul></div>
<!-- Navigation by auditorium start -->

<!-- Second level content start -->
<div v-if="false" class="tab-content tab-content-schedule">
<div class="tab-content tab-content-schedule">

<!-- Auditorium content start -->
<div v-bind:id="`day${day.dayNumber}_auditorium${track.trackNumber}`" v-bind:class="{ active: track.isSelected, 'tab-pane fade in': true }" v-for="track of day.tracks">
<div v-bind:id="`day${day.id}_auditorium${track.id}`" v-bind:class="{ active: track.isSelected, 'tab-pane fade in': true }" v-for="track of day.tracks">

<!-- Accordion start -->
<div class="panel-group" v-bind:id="`day${day.dayNumber}_auditorium${track.trackNumber}_timeline`">
<div class="panel-group" v-bind:id="`day${day.id}_auditorium${track.id}_timeline`">

<!-- Lecture start -->
<div class="panel schedule-item" v-for="session of getSchedule(day.dayNumber, track.trackNumber)">
<div class="panel schedule-item" v-for="session of track.sessions">
<div class="lecture-icon-wrapper">
<img :src="session.avatar">
<img :src="session.speaker.photo">
</div>
<a data-toggle="collapse" v-bind:data-parent="`#day${day.dayNumber}_auditorium${track.trackNumber}_timeline`" v-bind:href="`#day${day.dayNumber}_auditorium${track.trackNumber}_time_${session.sessionNumber}`" class="schedule-item-toggle collapsed">
<strong class="time highlight"><span class="icon icon-office-24"></span>{{ session.time }}, {{ session.language }}</strong>
<a data-toggle="collapse" v-bind:data-parent="`#day${day.id}_auditorium${track.id}_timeline`" v-bind:href="`#day${day.id}_auditorium${track.id}_time_${session.id}`" class="schedule-item-toggle collapsed">
<strong class="time highlight"><span class="icon icon-office-24"></span>{{ session.start_at }} - {{ session.end_at }}, {{ session.language }}</strong>
<h6 class="title">{{ session.title }}<i class="icon icon-arrows-06"></i></h6>
</a>
<div v-bind:id="`day${day.dayNumber}_auditorium${track.trackNumber}_time_${session.sessionNumber}`" class="panel-collapse collapse schedule-item-body">
<div v-bind:id="`day${day.id}_auditorium${track.id}_time_${session.id}`" class="panel-collapse collapse schedule-item-body">
<article>
<p class="description">{{ session.description }}</p>
<strong class="highlight speaker-name">{{ session.speaker }}</strong>
<strong class="highlight speaker-name">{{ session.speaker.name }}</strong>
</article>
</div>
</div>
Expand Down
15 changes: 7 additions & 8 deletions speakers.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,24 +63,22 @@ <h3>Speakers / Sessions</h3>
<p>A-Z ordered</p>
<hr/>

<div class="media" v-for="item in speakers">
<div class="media" v-for="speaker in getSortedSpeakers()">
<div class="media-left">
<a href="#">
<img style="margin-right: 15px;" width="150px" height="150px" align="left" :alt="item.name" class="img img-circle" :src="item.avatar">
<img style="margin-right: 15px;" width="150px" height="150px" align="left" :alt="speaker.name" class="img img-circle" :src="speaker.photo">
</a>
</div>
<div class="align-left media-body">
<p style="font-weight: bold">{{ item.name }} / {{ item.title }}</p>
<p>{{ item.bio }}</p>
<p style="font-weight: bold">{{ speaker.name }} / {{ speaker.title }}</p>
<p>{{ speaker.bio }}</p>
<ul class="speaker-socials list-inline pull-right">
<li><a target="_blank" :href="item.social.twitter"><span class="fa fa-twitter"></span></a></li>
<li><a target="_blank" :href="item.social.github"><span class="fa fa-github"></span></a></li>
</li>
<li v-for="social in speaker.social_profiles"><a target="_blank" :href="'https://' + social.platform + '.com/' + social.username"><span :class="'fa fa-' + social.platform"></span></a></li>
</ul>
</div>
<div class="clearfix"></div>
<div class="align-left media-body">
<ul v-for="session in item.sessions">
<ul v-for="session in speaker.sessions">
<li>
<p style="font-weight: bold">{{ session.title }} / Language: {{ session.language }}</p>
<p>{{ session.description }}</p>
Expand Down Expand Up @@ -152,6 +150,7 @@ <h3>Speakers / Sessions</h3>

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.min.js"></script>
<script src="app.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3&libraries=places&key=AIzaSyCdwGRqSLKdTXSBL8r7xoHy5z05877Cuss"></script>
<script type="text/javascript" src="assets/js/bootstrap.min.js"></script>
Expand Down

0 comments on commit d8ca178

Please sign in to comment.