Skip to content

Commit

Permalink
move more of schedule to vue
Browse files Browse the repository at this point in the history
  • Loading branch information
@OmgImAlexis
OmgImAlexis committed Jun 13, 2018
1 parent 15a07fa commit fd5a57f
Show file tree
Hide file tree
Showing 6 changed files with 204 additions and 117 deletions.
26 changes: 24 additions & 2 deletions themes-default/slim/static/js/store.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -244,11 +244,33 @@ const store = new Puex({
});
},
getShows(store, shows) {
const { getShow } = this;
return shows.forEach(show => getShow(show));
const { dispatch } = store;

// If no shows are provided get all of them
if (!shows) {
return api.get('/series?limit=1000').then(res => {
const shows = res.data;
return shows.forEach(show => {
store.commit(ADD_SHOW, show);
});
});
}

return shows.forEach(show => dispatch('getShow', show));
},
testNotifications() {
return displayNotification('error', 'test', 'test<br><i class="test-class">hello <b>world</b></i><ul><li>item 1</li><li>item 2</li></ul>', 'notification-test--');
},
setLayout(store, { page, layout }) {
const { dispatch } = store;

return api.patch('config/main', {
layout: {
[page]: layout
}
}).then(setTimeout(() => {
dispatch('getConfig');
}, 500));
}
},
// @TODO Add logging here
Expand Down
81 changes: 44 additions & 37 deletions themes-default/slim/views/schedule.mako
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,8 @@ window.app = {};
const startVue = () => {
window.app = new Vue({
el: '#vue-wrap',
store,
router,
metaInfo: {
title: 'Schedule'
},
Expand All @@ -19,14 +21,34 @@ const startVue = () => {
header: 'Schedule'
};
},
computed: Object.assign(
puex.mapState(['config', 'shows']),
{
layout: {
get() {
const { config } = this;
return config.layout.schedule;
},
set(layout) {
const { $store } = this;
const page = 'schedule';
$store.dispatch('setLayout', { page, layout });
}
}
}
),
mounted() {
if ($.isMeta({ layout: 'schedule' }, ['list'])) {
const { $store, $route, config, layout } = this;
$store.dispatch('getConfig');
$store.dispatch('getShows');
if (layout == 'list') {
const sortCodes = {
date: 0,
show: 2,
network: 5
};
const sort = MEDUSA.config.comingEpsSort;
const sort = config.comingEpsSort;
const sortList = (sort in sortCodes) ? [[sortCodes[sort], 0]] : [[0, 0]];
$('#showListTable:has(tbody tr)').tablesorter({
Expand Down Expand Up @@ -58,7 +80,7 @@ const startVue = () => {
$.ajaxEpSearch();
}
if ($.isMeta({ layout: 'schedule' }, ['banner', 'poster'])) {
if (layout in ['banner', 'poster']) {
$.ajaxEpSearch({
size: 16,
loadingImage: 'loading16' + MEDUSA.config.themeSpinner + '.gif'
Expand All @@ -81,19 +103,6 @@ const startVue = () => {
// call this function to copy the column selection code into the popover
$.tablesorter.columnSelector.attachTo($('#showListTable'), '#popover-target');
});
$('.show-option select[name="layout"]').on('change', function() {
api.patch('config/main', {
layout: {
schedule: $(this).val()
}
}).then(response => {
log.info(response);
window.location.reload();
}).catch(err => {
log.info(err);
});
});
}
});
};
Expand All @@ -113,13 +122,13 @@ const startVue = () => {
<div class="row">
<div class="col-md-12">
<div class="key pull-left">
% if layout != 'calendar':
<b>Key:</b>
<span class="listing-key listing-overdue">Missed</span>
<span class="listing-key listing-current">Today</span>
<span class="listing-key listing-default">Soon</span>
<span class="listing-key listing-toofar">Later</span>
% endif
<template v-if="layout !== 'calendar'">
<b>Key:</b>
<span class="listing-key listing-overdue">Missed</span>
<span class="listing-key listing-current">Today</span>
<span class="listing-key listing-default">Soon</span>
<span class="listing-key listing-toofar">Later</span>
</template>
<app-link class="btn-medusa btn-inline forceBacklog" href="webcal://${sbHost}:${sbHttpPort}/calendar">
<i class="icon-calendar icon-white"></i>Subscribe</app-link>
</div>
Expand All @@ -135,29 +144,27 @@ const startVue = () => {
</div>
<div class="show-option">
<span>Layout:
<select name="layout" class="form-control form-control-inline input-sm">
<option value="poster" ${'selected="selected"' if app.COMING_EPS_LAYOUT == 'poster' else ''} >Poster</option>
<option value="calendar" ${'selected="selected"' if app.COMING_EPS_LAYOUT == 'calendar' else ''} >Calendar</option>
<option value="banner" ${'selected="selected"' if app.COMING_EPS_LAYOUT == 'banner' else ''} >Banner</option>
<option value="list" ${'selected="selected"' if app.COMING_EPS_LAYOUT == 'list' else ''} >List</option>
<select v-model="layout" name="layout" class="form-control form-control-inline input-sm">
<option value="poster" ${'selected="selected"' if app.COMING_EPS_LAYOUT == 'poster' else ''}>Poster</option>
<option value="calendar" ${'selected="selected"' if app.COMING_EPS_LAYOUT == 'calendar' else ''}>Calendar</option>
<option value="banner" ${'selected="selected"' if app.COMING_EPS_LAYOUT == 'banner' else ''}>Banner</option>
<option value="list" ${'selected="selected"' if app.COMING_EPS_LAYOUT == 'list' else ''}>List</option>
</select>
</span>
</div>
% if layout == 'list':
<div class="show-option">
<div v-if="layout === 'list'" class="show-option">
<button id="popover" type="button" class="btn-medusa btn-inline">Select Columns <b class="caret"></b></button>
</div>
% elif layout != 'calendar': # Calendar sorting is always by date
<div class="show-option">
<!-- Calendar sorting is always by date -->
<div v-else-if="layout !== 'calendar'" class="show-option">
<span>Sort By:
<select name="sort" class="form-control form-control-inline input-sm" onchange="location = this.options[this.selectedIndex].value;">
<option value="schedule/setScheduleSort/?sort=date" ${'selected="selected"' if app.COMING_EPS_SORT == 'date' else ''} >Date</option>
<option value="schedule/setScheduleSort/?sort=network" ${'selected="selected"' if app.COMING_EPS_SORT == 'network' else ''} >Network</option>
<option value="schedule/setScheduleSort/?sort=show" ${'selected="selected"' if app.COMING_EPS_SORT == 'show' else ''} >Show</option>
<select name="sort" class="form-control form-control-inline input-sm" onchange="location = 'schedule/setScheduleSort/?sort=' + this.options[this.selectedIndex].value;">
<option value="date" ${'selected="selected"' if app.COMING_EPS_SORT == 'date' else ''}>Date</option>
<option value="network" ${'selected="selected"' if app.COMING_EPS_SORT == 'network' else ''}>Network</option>
<option value="show" ${'selected="selected"' if app.COMING_EPS_SORT == 'show' else ''}>Show</option>
</select>
</span>
</div>
% endif
</div>
</div>
</div>
Expand Down
26 changes: 24 additions & 2 deletions themes/dark/assets/js/store.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -244,11 +244,33 @@ const store = new Puex({
});
},
getShows(store, shows) {
const { getShow } = this;
return shows.forEach(show => getShow(show));
const { dispatch } = store;

// If no shows are provided get all of them
if (!shows) {
return api.get('/series?limit=1000').then(res => {
const shows = res.data;
return shows.forEach(show => {
store.commit(ADD_SHOW, show);
});
});
}

return shows.forEach(show => dispatch('getShow', show));
},
testNotifications() {
return displayNotification('error', 'test', 'test<br><i class="test-class">hello <b>world</b></i><ul><li>item 1</li><li>item 2</li></ul>', 'notification-test--');
},
setLayout(store, { page, layout }) {
const { dispatch } = store;

return api.patch('config/main', {
layout: {
[page]: layout
}
}).then(setTimeout(() => {
dispatch('getConfig');
}, 500));
}
},
// @TODO Add logging here
Expand Down
81 changes: 44 additions & 37 deletions themes/dark/templates/schedule.mako
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,8 @@ window.app = {};
const startVue = () => {
window.app = new Vue({
el: '#vue-wrap',
store,
router,
metaInfo: {
title: 'Schedule'
},
Expand All @@ -19,14 +21,34 @@ const startVue = () => {
header: 'Schedule'
};
},
computed: Object.assign(
puex.mapState(['config', 'shows']),
{
layout: {
get() {
const { config } = this;
return config.layout.schedule;
},
set(layout) {
const { $store } = this;
const page = 'schedule';
$store.dispatch('setLayout', { page, layout });
}
}
}
),
mounted() {
if ($.isMeta({ layout: 'schedule' }, ['list'])) {
const { $store, $route, config, layout } = this;
$store.dispatch('getConfig');
$store.dispatch('getShows');
if (layout == 'list') {
const sortCodes = {
date: 0,
show: 2,
network: 5
};
const sort = MEDUSA.config.comingEpsSort;
const sort = config.comingEpsSort;
const sortList = (sort in sortCodes) ? [[sortCodes[sort], 0]] : [[0, 0]];
$('#showListTable:has(tbody tr)').tablesorter({
Expand Down Expand Up @@ -58,7 +80,7 @@ const startVue = () => {
$.ajaxEpSearch();
}
if ($.isMeta({ layout: 'schedule' }, ['banner', 'poster'])) {
if (layout in ['banner', 'poster']) {
$.ajaxEpSearch({
size: 16,
loadingImage: 'loading16' + MEDUSA.config.themeSpinner + '.gif'
Expand All @@ -81,19 +103,6 @@ const startVue = () => {
// call this function to copy the column selection code into the popover
$.tablesorter.columnSelector.attachTo($('#showListTable'), '#popover-target');
});
$('.show-option select[name="layout"]').on('change', function() {
api.patch('config/main', {
layout: {
schedule: $(this).val()
}
}).then(response => {
log.info(response);
window.location.reload();
}).catch(err => {
log.info(err);
});
});
}
});
};
Expand All @@ -113,13 +122,13 @@ const startVue = () => {
<div class="row">
<div class="col-md-12">
<div class="key pull-left">
% if layout != 'calendar':
<b>Key:</b>
<span class="listing-key listing-overdue">Missed</span>
<span class="listing-key listing-current">Today</span>
<span class="listing-key listing-default">Soon</span>
<span class="listing-key listing-toofar">Later</span>
% endif
<template v-if="layout !== 'calendar'">
<b>Key:</b>
<span class="listing-key listing-overdue">Missed</span>
<span class="listing-key listing-current">Today</span>
<span class="listing-key listing-default">Soon</span>
<span class="listing-key listing-toofar">Later</span>
</template>
<app-link class="btn-medusa btn-inline forceBacklog" href="webcal://${sbHost}:${sbHttpPort}/calendar">
<i class="icon-calendar icon-white"></i>Subscribe</app-link>
</div>
Expand All @@ -135,29 +144,27 @@ const startVue = () => {
</div>
<div class="show-option">
<span>Layout:
<select name="layout" class="form-control form-control-inline input-sm">
<option value="poster" ${'selected="selected"' if app.COMING_EPS_LAYOUT == 'poster' else ''} >Poster</option>
<option value="calendar" ${'selected="selected"' if app.COMING_EPS_LAYOUT == 'calendar' else ''} >Calendar</option>
<option value="banner" ${'selected="selected"' if app.COMING_EPS_LAYOUT == 'banner' else ''} >Banner</option>
<option value="list" ${'selected="selected"' if app.COMING_EPS_LAYOUT == 'list' else ''} >List</option>
<select v-model="layout" name="layout" class="form-control form-control-inline input-sm">
<option value="poster" ${'selected="selected"' if app.COMING_EPS_LAYOUT == 'poster' else ''}>Poster</option>
<option value="calendar" ${'selected="selected"' if app.COMING_EPS_LAYOUT == 'calendar' else ''}>Calendar</option>
<option value="banner" ${'selected="selected"' if app.COMING_EPS_LAYOUT == 'banner' else ''}>Banner</option>
<option value="list" ${'selected="selected"' if app.COMING_EPS_LAYOUT == 'list' else ''}>List</option>
</select>
</span>
</div>
% if layout == 'list':
<div class="show-option">
<div v-if="layout === 'list'" class="show-option">
<button id="popover" type="button" class="btn-medusa btn-inline">Select Columns <b class="caret"></b></button>
</div>
% elif layout != 'calendar': # Calendar sorting is always by date
<div class="show-option">
<!-- Calendar sorting is always by date -->
<div v-else-if="layout !== 'calendar'" class="show-option">
<span>Sort By:
<select name="sort" class="form-control form-control-inline input-sm" onchange="location = this.options[this.selectedIndex].value;">
<option value="schedule/setScheduleSort/?sort=date" ${'selected="selected"' if app.COMING_EPS_SORT == 'date' else ''} >Date</option>
<option value="schedule/setScheduleSort/?sort=network" ${'selected="selected"' if app.COMING_EPS_SORT == 'network' else ''} >Network</option>
<option value="schedule/setScheduleSort/?sort=show" ${'selected="selected"' if app.COMING_EPS_SORT == 'show' else ''} >Show</option>
<select name="sort" class="form-control form-control-inline input-sm" onchange="location = 'schedule/setScheduleSort/?sort=' + this.options[this.selectedIndex].value;">
<option value="date" ${'selected="selected"' if app.COMING_EPS_SORT == 'date' else ''}>Date</option>
<option value="network" ${'selected="selected"' if app.COMING_EPS_SORT == 'network' else ''}>Network</option>
<option value="show" ${'selected="selected"' if app.COMING_EPS_SORT == 'show' else ''}>Show</option>
</select>
</span>
</div>
% endif
</div>
</div>
</div>
Expand Down
26 changes: 24 additions & 2 deletions themes/light/assets/js/store.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -244,11 +244,33 @@ const store = new Puex({
});
},
getShows(store, shows) {
const { getShow } = this;
return shows.forEach(show => getShow(show));
const { dispatch } = store;

// If no shows are provided get all of them
if (!shows) {
return api.get('/series?limit=1000').then(res => {
const shows = res.data;
return shows.forEach(show => {
store.commit(ADD_SHOW, show);
});
});
}

return shows.forEach(show => dispatch('getShow', show));
},
testNotifications() {
return displayNotification('error', 'test', 'test<br><i class="test-class">hello <b>world</b></i><ul><li>item 1</li><li>item 2</li></ul>', 'notification-test--');
},
setLayout(store, { page, layout }) {
const { dispatch } = store;

return api.patch('config/main', {
layout: {
[page]: layout
}
}).then(setTimeout(() => {
dispatch('getConfig');
}, 500));
}
},
// @TODO Add logging here
Expand Down
Loading

0 comments on commit fd5a57f

Please sign in to comment.