visual-catalog/index.html at f9f8871001219100caa77fd8c3b7d7dcd823ce14 · frontyardprojects/visual-catalog · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Frontyard Ephemera Collection</title>
    <link rel="stylesheet" href="main.css">
    <script src="https://unpkg.com/vue"></script>
  </head>
  <body>
    <main id="catalog">
      <catalog-item
        v-for="item in catalog_items"
        v-bind:book="item"
        v-bind:key="item.id">
      </catalog-item>
    </main>
    <script>
      'use strict';

      function ImageUrl(id) {
        return "https://drive.google.com/uc?export=download&id=" + id;
      }

      function extractImageId(file_url) {
        return file_url.split("=")[1];
      }

      function getRandomInt(min, max) {
        min = Math.ceil(min);
        max = Math.floor(max);
        return Math.floor(Math.random() * (max - min)) + min; //The maximum is exclusive and the minimum is inclusive
      }

      function rowImageUrl(row) {
        return ImageUrl(extractImageId(row.gsx$coverimage.$t));
      }

      function pushRowToItemVisualiser(row) {
        ItemVisualiser.catalog_items.push(serializeItem(row));
      }

      function serializeItem(row) {
        return {
          id: extractImageId(row.gsx$coverimage.$t),
          image_url: rowImageUrl(row)
        }
      }

      function getRandomImage() {
        // get the data
        var sheetJsonUrl = "https://spreadsheets.google.com/feeds/list/1ipWHrciUS_b1kYWEJokNGVrDaTJsYS1LfpWY-nX0jag/1/public/full?alt=json";
        const request = new XMLHttpRequest();
        request.open("GET", sheetJsonUrl, true);

        request.onload = function() {
          if (request.status >= 200 && request.status < 400) {
            console.log("Request was a success!");
            const rows = JSON.parse(request.responseText).feed.entry;
            const selection = rows.slice(rows.length - 20).reverse();

            if (ItemVisualiser.catalog_items.length == 0) {
              selection.forEach(function(row) {
                pushRowToItemVisualiser(row);
              });
            } else {
              const row = selection[0]

              // if the latest item is still the newest contribtion, skip
              if (ItemVisualiser.catalog_items[0].id !== extractImageId(row.gsx$coverimage.$t)) {
                ItemVisualiser.catalog_items.pop();
                ItemVisualiser.catalog_items.unshift(serializeItem(row));
              }
            }
          } else {
            console.log("Hit the target URL, but error returned.");
          }
        };

        request.onerror = function() {
          console.log("There was an error in the request, it didn't make the target.");
        };

        request.send();
      }

      Vue.component('catalog-item', {
        props: ['book'],
        template: '<div><img :src="book.image_url" /></div>'
      })

      var ItemVisualiser = new Vue({
        el: '#catalog',
        data: {
          catalog_items: [ ]
        }
      })

      getRandomImage();
      // This shouldn't make a new request until the previous has finished
      window.setInterval(getRandomImage, 30000);
    </script>
  </body>
</html>