(function() { var appData = { tracks: [], tags: [], }; const MediaTrack = { props: ['track', 'tags'], data: function() { return { editing: false, saving: false, } }, computed: { patch_url: function() { return '/api/tracks/' + this.track.uuid; }, }, methods: { edit: function() { this.saving = false; this.editing = true; }, save: function() { this.saving = true; var request = new Request(this.patch_url, { method: "PATCH", headers: { 'Accept': 'application/json', 'Content-Type': 'application/json', }, body: JSON.stringify({ tag: this.track.tag, label: this.track.label, }) }); fetch(request) .then(response => { return response.json(); }) .then(response => { this.editing = false; this.track.label = response.label; this.track.tag = response.tag; }) .catch(error => { console.error(error) }); }, }, template: `
` }; const MediaLibrary = { props: ['tracks', 'tags'], components: { 'media-track': MediaTrack, }, template: `
`, }; const UploadBox = { template: `

Upload File

` }; var app = new Vue({ el: '#app', data: appData, components: { 'media-library': MediaLibrary, 'upload-box': UploadBox, }, }); var request = new Request('/api/tags'); fetch(request) .then(response => { return response.json(); }) .then(response => { appData.tags = response; }) .catch(error => { console.error(error); }); var request = new Request('/api/tracks'); fetch(request) .then(response => { return response.json(); }) .then(response => { appData.tracks = response; }) .catch(error => { console.error(error); }); })(); // vim:ts=2 sw=2 et: