README.md 3.25 KB
Newer Older
Matija Obreza's avatar
Matija Obreza committed
1
2
3

# Enhance your website with data from Genesys

Matija Obreza's avatar
Matija Obreza committed
4
This package allows for embedding [Genesys](https://www.genesys-pgr.org) into your website.
Matija Obreza's avatar
Matija Obreza committed
5

6
7
8
The demo at https://genesys-pgr.p.gitlab.croptrust.org/ui-embedded/ displays data from
`COL003` and `BEL084` in a single website.

Matija Obreza's avatar
Matija Obreza committed
9
## Quickstart
10

Matija Obreza's avatar
Matija Obreza committed
11
Add Javascript dependencies to your page:
Matija Obreza's avatar
Matija Obreza committed
12
13
14

```html
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.20/lodash.min.js"></script>
Matija Obreza's avatar
Matija Obreza committed
15
16
<script src="https://cdn.jsdelivr.net/npm/@genesys-pgr/ui-embedded@1.0.0-alpha8/dist/genesys-deps.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@genesys-pgr/ui-embedded@1.0.0-alpha8/dist/genesys-ui.js"></script>
Matija Obreza's avatar
Matija Obreza committed
17
18
19
20
<!-- Optionally use bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" />
```

Matija Obreza's avatar
Matija Obreza committed
21
Add a container `<div>` to your HTML page and initialize the Genesys UI with the `<script>`:
Matija Obreza's avatar
Matija Obreza committed
22
23

```html
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<div class="container-fluid mb-5" id="genesys-container"></div>

<script type="text/javascript">
  // Embedded Genesys configuration
  const genesysConfig = {
    apiUrl: 'https://api.sandbox.genesys-pgr.org', // Genesys API server
    clientId: 'clientid@genesys', // Client ID
    clientKey: 'changeme', // Client key
    filter: { 
      institute: {  code: [ 'ETH013' ] }, // Genesys data filter
    },
    shoppingCart: {
      enabled: true, // Enable shopping cart
    }
  };

  // Show UI
  genesys.showGenesysUI(document.getElementById('genesys-container'), genesysConfig);

  // Or, to display ONLY "Collection Overview" use:
  // genesys.showOverview(document.getElementById('genesys-container'), genesysConfig);
</script>
Matija Obreza's avatar
Matija Obreza committed
46
47
```

48
**Note:** Please contact helpdesk@genesys-pgr.org to obtain API keys for use in your environment.
Matija Obreza's avatar
Matija Obreza committed
49
50
51
52
53
54
55
56
57
58
59
60
61

## Configuration options

The `genesysConfig` argument to `showGenesysUI()` is a simple map of various settings you can pass 
to *@geneesys-pgr/ui-embedded*:


|Property|Default|Description|
|---|---|---|
|`apiUrl`       | *http://localhost:8080* | Production Genesys API is at https://api.genesys-pgr.org<br />Sandbox API is at https://api.sandbox.genesys-pgr.org |
|`clientId`     | **Required** | Please contact helpdesk@genesys-pgr.org to obtain API keys for use in your environment.<br />The API keys are limited to your website and will not work on a different domain. |
|`clientSecret` | **Required** | Ditto. |
|`filter`       |`undefined` | Allows for narrowing the scope of requested accession data from Genesys API. <br />To filter for accessions from your genebank, use: `{ institute: { code: ['XXX000'] } }` with the FAO WIEWS Code of your genebank. Default `undefined` value will return all accessions. |
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
|`language`|`'en'`| Specify the language of the user interface.<br />Fully supported: `en`<br />Partially supported: `es` |
| `shoppingCart` | `{ ... }` | See *Shopping cart* configuration |

Additional configuration options are described below.

### Shopping cart options

The shopping cart is **disabled by default**. To allow users to add accessions to the cart, access the cart and submit requests for material you must explicity enable it in your configuration:

```
const genesysConfig = {
  // Shopping cart enabled
  shoppingCart: {
    enabled: true,
  },
};
```

|Property|Default|Description|
|---|---|---|
|`enabled`|`false`| Toggle Shopping cart functionality |