pi-rfid-jukebox/static/library.js

146 lines
3.4 KiB
JavaScript
Raw Normal View History

(function() {
var appData = {
tracks: [],
tags: [],
};
const MediaTrack = {
props: ['track', 'tags'],
data: function() {
return {
editing: false,
saving: false,
trackForReset: {},
}
},
computed: {
patch_url: function() {
return '/api/tracks/' + this.track.uuid;
},
},
methods: {
edit: function() {
if (this.editing) {
return;
}
this.trackForReset = Object.assign({}, this.track);
this.saving = false;
this.editing = true;
},
cancel: function() {
this.track = Object.assign({}, this.trackForReset);
this.editing = false;
},
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" @keyup.27="cancel">
<select v-model="track.tag" :disabled="saving">
2019-12-17 17:12:53 +00:00
<option value=""></option>
<option :class="{unused: tag.tag_count == 0}" v-for="tag in tags">
{{ tag.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>
`,
};
2019-12-17 17:12:53 +00:00
const UploadBox = {
template: `
<div class="upload-box">
<h2>Upload File</h2>
<form method="post" action="/api/tracks" enctype="multipart/form-data">
<input name="track" type="file">
<input type="submit" value="Upload">
</form>
</div>
`
};
var app = new Vue({
el: '#app',
data: appData,
components: {
'media-library': MediaLibrary,
2019-12-17 17:12:53 +00:00
'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: