123 lines
2.7 KiB
JavaScript
123 lines
2.7 KiB
JavaScript
(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: `
|
|
<div class="media-track" @click="edit()">
|
|
<template v-if="editing">
|
|
<form method="patch" :action="patch_url">
|
|
<select v-model="track.tag" :disabled="saving">
|
|
<option v-for="tag in tags">
|
|
{{ tag }}
|
|
</option>
|
|
</select>
|
|
<input type="text" v-model="track.label" :disabled="saving">
|
|
<input type="submit" value="Save" @click.prevent.stop.once="save()" :disabled="saving">
|
|
</form>
|
|
</template>
|
|
<template v-else>{{ track.label }}</template>
|
|
</div>
|
|
`
|
|
};
|
|
|
|
const MediaLibrary = {
|
|
props: ['tracks', 'tags'],
|
|
components: {
|
|
'media-track': MediaTrack,
|
|
},
|
|
template: `
|
|
<div class="media-library">
|
|
<media-track v-for="track in tracks"
|
|
:key="track.uuid"
|
|
:track="track"
|
|
:tags="tags"
|
|
></media-track>
|
|
</div>
|
|
`,
|
|
};
|
|
|
|
var app = new Vue({
|
|
el: '#app',
|
|
data: appData,
|
|
components: {
|
|
'media-library': MediaLibrary,
|
|
},
|
|
});
|
|
|
|
var request = new Request('/api/tags');
|
|
fetch(request)
|
|
.then(response => {
|
|
return response.json();
|
|
})
|
|
.then(response => {
|
|
appData.tags = response.map(tag => tag.tag);
|
|
})
|
|
.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:
|