eodashboard-notebooks/index.html at main · ESA-eodashboards/eodashboard-notebooks · 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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example Explorer</title>
  <script type="module">
    import "https://cdn.jsdelivr.net/npm/@eox/layout@0.5.1/dist/eox-layout.js";
    import "https://cdn.jsdelivr.net/npm/@eox/itemfilter@1.9.1/dist/eox-itemfilter.js";
  </script>
  <link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/@eox/ui/dist/style.min.css"
  />
  <script src="https://cdn.jsdelivr.net/npm/@luigi-project/client@2.21.1/luigi-client.js"></script>
</head>

<body class="light surface-container large-padding">
  <article class="surface-container-lowest large-padding">
    <h4>EARTH OBSERVING DASHBOARD Notebook Explorer</h1>
    <eox-itemfilter
      class="top-margin"
      id="catalog"
      style="--form-flex-direction: row; --card-gap: 10px; --card-width: 270px; --card-height: 200px; --card-border-radius: 8px;"
    >
    </eox-itemfilter>
  </article>

  <script type="module">
    const el = document.getElementById('catalog');

    // Fetch the JSON and pass it to the element
    fetch('./notebooks.json')
      .then(res => res.json())
      .then(data => {
        Object.assign(el, {
        items: data,
        titleProperty: "title",
        imageProperty: "image",
        resultType: "cards",
        filterProperties: [
          {
            "keys": [
              "title",
            ],
            "title": "Search",
            "type": "text",
            "placeholder": "Type Something...",
            "expanded": true,
          },
        ],
        enableResultAction: true,
        subTitleProperty: "description",
        resultType: "cards",
        resultActionIcon: '<svg style="width:24px;height:24px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>rocket-launch-outline</title><path d="M13.13 22.19L11.5 18.36C13.07 17.78 14.54 17 15.9 16.09L13.13 22.19M5.64 12.5L1.81 10.87L7.91 8.1C7 9.46 6.22 10.93 5.64 12.5M19.22 4C19.5 4 19.75 4 19.96 4.05C20.13 5.44 19.94 8.3 16.66 11.58C14.96 13.29 12.93 14.6 10.65 15.47L8.5 13.37C9.42 11.06 10.73 9.03 12.42 7.34C15.18 4.58 17.64 4 19.22 4M19.22 2C17.24 2 14.24 2.69 11 5.93C8.81 8.12 7.5 10.53 6.65 12.64C6.37 13.39 6.56 14.21 7.11 14.77L9.24 16.89C9.62 17.27 10.13 17.5 10.66 17.5C10.89 17.5 11.13 17.44 11.36 17.35C13.5 16.53 15.88 15.19 18.07 13C23.73 7.34 21.61 2.39 21.61 2.39S20.7 2 19.22 2M14.54 9.46C13.76 8.68 13.76 7.41 14.54 6.63S16.59 5.85 17.37 6.63C18.14 7.41 18.15 8.68 17.37 9.46C16.59 10.24 15.32 10.24 14.54 9.46M8.88 16.53L7.47 15.12L8.88 16.53M6.24 22L9.88 18.36C9.54 18.27 9.21 18.12 8.91 17.91L4.83 22H6.24M2 22H3.41L8.18 17.24L6.76 15.83L2 20.59V22M2 19.17L6.09 15.09C5.88 14.79 5.73 14.47 5.64 14.12L2 17.76V19.17Z" /></svg>',
        });
        el.addEventListener('click:result-action', (e) => {
          const urlObj = new URL(`${e.detail.gitpuller}`);
          LuigiClient.addCoreSearchParams(Object.fromEntries(urlObj.searchParams));
          LuigiClient.linkManager().preserveQueryParams(true).navigate(urlObj.pathname);
        });
        el.addEventListener('select', (e) => {
          window.location.href = e.detail.link;
        });
        // debugger;
      })
      .catch(err => {
        console.error('Failed to load notebook catalog:', err);
      });

  </script>

</body>
</html>