Commit 3b2fe9a1 authored by Gautam Chitnis's avatar Gautam Chitnis

Refactor (playlist buttons): Vue Component for playlist buttons

This commit creates a Vue Component for playlist buttons.
The component has been used in the index.html accordingly.
Minor modification to playlist template in index.html is also included in this commit.

Gautam C.
parent 93f162c2
......@@ -63,20 +63,11 @@
<div id="playlistNav" class="playlistNav">
<div id="app" class="container">
<playlist ref="plist">
</playlist>
<div id="playlist" style="background-color: white;">
<ol type="1">
<li v-for="item in playlistItems">
<button v-on:click="play(item.src, item.id)" class="playlistItem">{{ item.title }}</button>
</li>
</ol>
</div>
<playlist></playlist>
</div>
</div>
<div id="playlistNavMobile" class="playlistNavMobile" onclick="bus.$emit('openPlaylist');">
<div id="playlistNavMobile" class="playlistNavMobile" onclick="bus.$emit('openPlaylist')">
Playlist
</div>
......@@ -105,20 +96,35 @@
</body>
<!-- Templates -->
<!-- Playlist Template -->
<script type="text/x-template" id="playlist-template">
<div>
<playlist-buttons></playlist-buttons>
<div class="d-flex justify-content-center">
<h1 style="color: black; padding-left: 5%;">Playlist</h1>
</div>
<div id="playlist" style="background-color: white;">
<ol type="1">
<li v-for="item in this.$parent.playlistItems">
<button v-on:click="play(item.src, item.id)" class="playlistItem">{{ item.title }}</button>
</li>
</ol>
</div>
</div>
</script>
<!-- Button Template -->
<script type="text/x-template" id="button-template">
<div>
<div class="playlistIcons">
<div class="row">
<button type="button" class="btn-circle col-xs"><i class="glyphicon glyphicon-random"></i></button>
<button type="button" class="btn-circle col-xs" onclick="toggleRepeat()"><i class="glyphicon glyphicon-repeat"></i></button>
<button type="button" class="btn-circle col-xs" onclick="bus.$emit('toggleRepeat')"><i class="glyphicon glyphicon-repeat"></i></button>
<button type="button" class="btn-circle col-xs"><i class="glyphicon glyphicon-play-circle"></i></button>
<button type="button" class="btn-circle col-xs"><i class="glyphicon glyphicon-plus"></i></button>
<button type="button" class="btn-circle col-xs" onclick="removeCurrent()"><i class="glyphicon glyphicon-trash"></i></button>
<button type="button" class="btn-circle col-xs" onclick="bus.$emit('removeCurrent')"><i class="glyphicon glyphicon-trash"></i></button>
</div>
</div>
<div class="d-flex justify-content-center">
<h1 style="color: black; padding-left: 5%;">Playlist</h1>
</div>
</div>
</script>
......
function toggleRepeat()
{
sendCommand(0,"command=pl_repeat");
}
Vue.component('playlist-buttons', {
template: '#button-template',
methods: {
toggleRepeat: function ()
{
sendCommand(0,"command=pl_repeat");
},
removeCurrent: function ()
{
sendCommand(0,"command=pl_delete&id="+data.children[0].children[0].id);
bus.$emit('removeItem',data.children[0].children[0].id);
}
},
created: function()
{
bus.$on('toggleRepeat', function()
{
this.toggleRepeat();
}.bind(this));
function removeCurrent()
{
sendCommand(0,"command=pl_delete&id="+data.children[0].children[0].id);
bus.$emit('removeItem',data.children[0].children[0].id);
bus.$emit('refreshPlaylist');
}
\ No newline at end of file
bus.$on('removeCurrent', function()
{
this.removeCurrent();
}.bind(this));
}
});
\ No newline at end of file
......@@ -2,8 +2,7 @@ var player;
var app;
var jsonData;
var xmlData;
var data;
var playlist;
var parseData;
var bus;
$(function() { // Handler for .ready() called.
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment