pi-rfid-jukebox/static/library.js

(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: