PyCS/webui/src/components/media/media-control.vue

<template>
  <div class="media-control">
    <button-input ref="previousPage"
                  type="transparent"
                  title="previous page (Y)"
                  style="color: var(--on_error)"
                  :class="{disabled: !hasPreviousPage}"
                  @click="$emit('previousPage', true)">
      <img alt="next" :class="{disabled: !hasPreviousPage}" src="@/assets/icons/chevron-left.svg">
      <img alt="next" :class="{disabled: !hasPreviousPage}" src="@/assets/icons/chevron-left.svg">
    </button-input>

    <button-input ref="previousElement"
                  type="transparent"
                  title="previous element (A)"
                  style="color: var(--on_error)"
                  :class="{disabled: !hasPreviousElement}"
                  @click="$emit('previousElement', true)">

      <img alt="next" :class="{disabled: !hasPreviousElement}" src="@/assets/icons/chevron-left.svg">
    </button-input>

    <select v-if="collections.length > 0"
            @change="filter">
      <option>no filter</option>
      <option>without collection</option>

      <option v-for="collection in collections" :key="collection.identifier"
              :value="collection.identifier"
              :selected="collection.autoselect">
        {{ collection.name }}
      </option>
    </select>

    <select v-else @change="only_annotations">
      <option>all images</option>
      <option>images with annotations</option>
      <option>images without annotations</option>
    </select>

    <button-input ref="nextElement"
                  type="transparent"
                  title="next element (D)"
                  style="color: var(--on_error)"
                  :class="{disabled: !hasNextElement}"
                  @click="$emit('nextElement', true)">
      <img alt="next" :class="{disabled: !hasNextElement}" src="@/assets/icons/chevron-right.svg">
    </button-input>

    <button-input ref="nextPage"
                  type="transparent"
                  title="next page (C)"
                  style="color: var(--on_error)"
                  :class="{disabled: !hasNextPage}"
                  @click="$emit('nextPage', true)">
      <img alt="next" :class="{disabled: !hasNextPage}" src="@/assets/icons/chevron-right.svg">
      <img alt="next" :class="{disabled: !hasNextPage}" src="@/assets/icons/chevron-right.svg">

    </button-input>
  </div>
</template>

<script>
import ButtonInput from "@/components/base/button-input";

export default {
  name: "media-control",
  components: {ButtonInput},
  props: ['current', 'hasPreviousPage', 'hasNextPage', 'hasPreviousElement', 'hasNextElement'],
  created: function () {
    window.addEventListener('keypress', this.keypressEvent);

    // receive collections
    this.$root.socket.get(`/projects/${this.$root.project.identifier}/collections`)
        .then(response => response.json())
        .then(collections => {
          this.collections = collections;

          for (let collection of collections)
            if (collection.autoselect)
              this.$emit('filter', collection.identifier);
        });
  },
  destroyed: function () {
    window.removeEventListener('keypress', this.keypressEvent);
  },
  data: function () {
    return {
      collections: []
    }
  },
  methods: {
    keypressEvent: function (event) {
      switch (event.key) {
        case 'y':
          this.$refs.previousPage.click();
          break;
        case 'a':
          this.$refs.previousElement.click();
          break;
        case 'd':
          this.$refs.nextElement.click();
          break;
        case 'c':
          this.$refs.nextPage.click();
          break;
      }
    },
    filter: function (e) {
      const select = e.target;
      switch (select.selectedIndex) {
          // no filter
        case 0:
          this.$emit('filter', false);
          break;

          // without collection
        case 1:
          this.$emit('filter', null);
          break;

          // other
        default:
          this.$emit('filter', select.options[select.selectedIndex].value);
          break;
      }
    },

    only_annotations: function(e) {
      const select = e.target;

      switch (select.selectedIndex) {
          // no filter
        case 0:
          this.$emit('only_annotations', null);
          break;

          // only with annotations
        case 1:
          this.$emit('only_annotations', true);
          break;

          // only without annotations
        default:
          this.$emit('only_annotations', false);
          break;
      }
    }
  }
}
</script>

<style scoped>
.media-control {
  background-color: rgba(0, 0, 0, 0.75);
  color: whitesmoke;

  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.button-input {
  font-size: 110%;
  font-weight: bold;
}

.disabled {
  opacity: 0.4;
}

img {
  filter: invert(1);
}
img.disabled {
  filter: invert(1);
  background-color: transparent;
}

select {
  flex-grow: 1;
  max-width: 15rem;
  margin: 0 1rem;
}
</style>