index.html 4.02 KB
Newer Older
Matija Obreza's avatar
Matija Obreza committed
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>

<head>
  <title>Embedded Genesys</title>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes" />
  <meta name="author" content="Genesys Team, helpdesk@genesys-pgr.org" />
  <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.20/lodash.min.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
    integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous" />
</head>

<body>
  <!--[if lt IE 7]>
        <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
  <![endif]-->

Matija Obreza's avatar
Matija Obreza committed
19
20
21
  <div class="container">
    <div class="jumbotron small">
      <h1 class="display-6">Embedded Genesys</h1>
Matija Obreza's avatar
Matija Obreza committed
22
23
24
25
26
      <p class="lead">This page demonstrates embedding Genesys data for <code>COL003</code> and <code>BEL084</code> 
        from <a href="https://www.genesys-pgr.org" target="_blank">Genesys</a> in a 3rd-party website.<br />
        <b>Note:</b> The example here is using data from our 
        <a href="https://sandbox.genesys-pgr.org" target="_blank">test environment</a>.<br />
        The current release of the Javascript library is available on <a
Matija Obreza's avatar
Matija Obreza committed
27
28
          href="https://www.npmjs.com/package/@genesys-pgr/ui-embedded">npmjs.com</a>.</p>
    </div>
Matija Obreza's avatar
Matija Obreza committed
29
30
31
32
33
    <ul class="nav">
      <li class="nav-item">
        <a class="nav-link active" href="#/">Home</a>
      </li>
      <li class="nav-item">
Matija Obreza's avatar
Matija Obreza committed
34
        <a class="nav-link" href="#/overview">Overview</a>
Matija Obreza's avatar
Matija Obreza committed
35
      </li>
Matija Obreza's avatar
Matija Obreza committed
36
37
38
      <li class="nav-item">
        <a class="nav-link" href="#/cart">Cart</a>
      </li>  
Matija Obreza's avatar
Matija Obreza committed
39
40
41
42
43
44
      <li class="nav-item">
        <a class="nav-link" href="index.html">EN</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="index.html?es">ES*</a>
      </li>
Matija Obreza's avatar
Matija Obreza committed
45
46
    </ul>
  </div>
Matija Obreza's avatar
Matija Obreza committed
47
48
49
50
51
52
53
54
55
  <hr />
  <div class="container mb-5" id="genesys-container"></div>
  <hr />
  <div class="container">
    <p>Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque cursus convallis fermentum. Fusce varius,
      massa ut dictum tempor, lacus eros eleifend eros, vel fringilla neque lacus sit amet lacus. Pellentesque habitant
      morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus condimentum tincidunt dolor at
      interdum. Mauris bibendum tellus quis leo finibus tempus. Nunc aliquam a ligula at mattis. Suspendisse tincidunt
      felis nec auctor ultrices.</p>
Matija Obreza's avatar
Matija Obreza committed
56
57
  </div>

Matija Obreza's avatar
Matija Obreza committed
58
59
  <script src="https://cdn.jsdelivr.net/npm/@genesys-pgr/ui-embedded@1.0.0-alpha12/dist/genesys-deps.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@genesys-pgr/ui-embedded@1.0.0-alpha12/dist/genesys-ui.js"></script>
Matija Obreza's avatar
Matija Obreza committed
60
  <script type="text/javascript">
61
62
63
    // Detect language from query string
    const queryLang = document.location.search && document.location.search.substr(1) || undefined;

Matija Obreza's avatar
Matija Obreza committed
64
65
66
67
68
    // Embedded Genesys configuration
    const genesysConfig = {
      apiUrl: 'https://api.sandbox.genesys-pgr.org', // Genesys API server
      clientId: 'TDlQz.LUmnd6YIOtWr4kjnVEFi@api.sandbox.genesys-pgr.org', // Client ID
      clientKey: 'gnE1dPz5CWnbn0IsFvL8iSP1QDxBpmU0', // Client key
Maksym Tishchenko's avatar
Maksym Tishchenko committed
69
      title: 'Alliance genebanks:', // HTML title prefix
70
      filter: {
71
72
73
        institute: { code: ['COL003', 'BEL084'] }, // Genesys data filter
      },
      language: queryLang,
Matija Obreza's avatar
Matija Obreza committed
74
75
76
77
78
      accession: {
        pdci: true, // Show PDCI
        subsets: true, // Show list of subsets
        datasets: true, // Show list of datasets
      },
79
      shoppingCart: {
Matija Obreza's avatar
Matija Obreza committed
80
        enabled: true, // Enable shopping cart
81
82
      },
      recaptchaSiteKey: '6LeGp-oSAAAAAAszCIVxG-wPmoOmDtdIc9Wgrzar', // Public ReCaptcha site key
Matija Obreza's avatar
Matija Obreza committed
83
    };
Matija Obreza's avatar
Matija Obreza committed
84

Matija Obreza's avatar
Matija Obreza committed
85
    // Show UI
86
    genesys.showGenesysUI(document.getElementById('genesys-container'), genesysConfig);
Matija Obreza's avatar
Matija Obreza committed
87
88

    // Or, to display ONLY "Collection Overview" use:
89
    // genesys.showOverview(document.getElementById('genesys-container'), genesysConfig);
Matija Obreza's avatar
Matija Obreza committed
90
91
  </script>
</body>
Matija Obreza's avatar
Matija Obreza committed
92

93
</html>