EC5 Media API Demo

Vue 3

by ParanoidAndroid77

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Epicollect5 Entries</title>
  <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
  <div id="app">
    <div v-if="loading">Loading...</div>
    <div v-else>
      <div v-for="entry in entries" :key="entry.id">
        <img :src="entry.photoUrl" alt="Entry Photo">
      </div>
    </div>
  </div>

  <script defer>
    const authEndpoint = 'https://five.epicollect.net/api/oauth/token';
    const entriesEndpoint = 'https://five.epicollect.net/api/export/entries/ec5-media-api-demo';
    const mediaEndpoint = 'https://five.epicollect.net/api/export/media/ec5-media-api-demo';

    const app = Vue.createApp({
      data() {
        return {
          entries: [],
          loading: true
        };
      },
      async created() {
        await this.fetchEntries();
        this.loading = false;
      },
      methods: {
        async fetchEntries() {
          try {
            const token = await this.getToken();
            const response = await fetch(entriesEndpoint, {
              headers: {
                'Authorization': `Bearer ${token}`,
                'Content-Type': 'application/vnd.api+json'
              }
            });
            const data = await response.json();
            this.entries = data.data.entries.map(entry => ({
              id: entry.id,
              photoUrl: `${mediaEndpoint}?type=photo&format=entry_original&name=${entry.photo}`
            }));
          } catch (error) {
            console.error('Error fetching entries:', error);
          }
        },
        async getToken() {
          const response = await fetch(authEndpoint, {
            method: 'POST',
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded'
            },
            body: new URLSearchParams({
              grant_type: 'client_credentials',
              client_id:...