Commit e0c3c1b0 authored by jackie / Andrea Ida Malkah Klaura's avatar jackie / Andrea Ida Malkah Klaura
Browse files

FIX: adapt and improve timeslots table

HTML rendering did not work anymore as before - probably due to changes in bootstrap-vue?
So now adapted and in the same time improved rendering.
Now with images for edit buttons.
And if no title is set, this is mentioned now.

Relevant bootstrap-vue docs:
* https://bootstrap-vue.js.org/docs/components/table#custom-data-rendering
parent d93865c2
...@@ -74,7 +74,24 @@ ...@@ -74,7 +74,24 @@
<br /> <br />
<div v-if="loaded.timeslots"> <div v-if="loaded.timeslots">
<b-table striped hover outlined :items="notesTableArray"></b-table> <b-table striped hover outlined :fields="notesTableArrayFields" :items="notesTableArray">
<template slot="title" slot-scope="data">
<span v-if="data.value">{{ data.value }}</span>
<span v-else><small><i>(none set)</i></small></span>
</template>
<template slot="starts" slot-scope="data">
{{ data.value }}
</template>
<template slot="duration" slot-scope="data">
{{ data.value }}
</template>
<template slot="options" slot-scope="data">
<span class="timeslotEditLink" @click="editTimeslotNote(data.item.options.id, data.item.options.schedule)"><img src="../assets/16x16/emblem-system.png" alt="Edit description" title="Edit description"></span>
<span class="timeslotEditLink" @click=""><img src="../assets/16x16/media-eject.png" alt="Upload audio file / Create playlist" title="Upload audio file / Create playlist"></span>
<span class="timeslotEditLink" @click=""><img src="../assets/16x16/media-playback-start.png" alt="Play audio file / playlist" title="Play audio file / playlist"></span>
<span class="timeslotEditLink" @click="">...</span>
</template>
</b-table>
<b-pagination align="center" :total-rows="current.timeslotmeta.count" :per-page="current.timeslotmeta.perpage" v-model="current.timeslotmeta.page" @change="timeslotsPage"></b-pagination> <b-pagination align="center" :total-rows="current.timeslotmeta.count" :per-page="current.timeslotmeta.perpage" v-model="current.timeslotmeta.page" @change="timeslotsPage"></b-pagination>
</div> </div>
<div v-else style="text-align: center;"><img src="../assets/radio.gif" alt="loading data" /><br /></div> <div v-else style="text-align: center;"><img src="../assets/radio.gif" alt="loading data" /><br /></div>
...@@ -302,7 +319,13 @@ export default { ...@@ -302,7 +319,13 @@ export default {
}, },
note: {}, note: {},
notes: [] notes: []
} },
notesTableArrayFields: [
{ key: 'title', label: 'Title of emission' },
{ key: 'starts', label: 'Emission start' },
{ key: 'duration', label: 'Duration' },
{ key: 'options', label: 'Edit' }
]
} }
}, },
mixins: [ timeslotSort, prettyDate ], mixins: [ timeslotSort, prettyDate ],
...@@ -324,13 +347,10 @@ export default { ...@@ -324,13 +347,10 @@ export default {
title: note, title: note,
starts: this.prettyDateTime(this.current.timeslots[i].start), starts: this.prettyDateTime(this.current.timeslots[i].start),
duration: this.prettyDuration(this.current.timeslots[i].start, this.current.timeslots[i].end), duration: this.prettyDuration(this.current.timeslots[i].start, this.current.timeslots[i].end),
// TODO: find out how to insert images or iconffont icons into b-table rows options: {
// options: '<img src="../assets/16x16/emblem-system.png" alt="edit note" v-on:click="' + this.editTimeslotNote(this.current.timeslots[i].id) + '" />' id: this.current.timeslots[i].id,
options: '<span class="timeslotEditLink" onclick="' + schedule: this.current.timeslots[i].schedule
'document.getElementById(\'app\').children[1].__vue__.' + }
'editTimeslotNote(' + this.current.timeslots[i].id + ', ' + this.current.timeslots[i].schedule + ')">edit</span> ' +
'<span class="timeslotEditLink" onclick="alert(\'notYetImplemented\')">upload</span>' +
'<span class="timeslotEditLink" onclick="alert(\'notYetImplemented\')">...</span>'
}) })
} }
return arr return arr
......
Supports Markdown
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