ReactJS library for searching UiTPAS Promotions and WelcomeAdvantages.
This project was bootstrapped with Create React App.
The app uses React.js and all dependency libs can be installed using NPM or Yarn. Using Yarn ensures packages are locked to the correct version.
- Install all dependencies:
yarn install - Run the app using the local Node.js server:
yarn start - Go to http://localhost:3000/
NB: If you want to change the CSS source code, you need to make changes to the SASS files in src/sass and compile them to index.css. This can be done by running this command: yarn run watch-css
- Run the following command to create the production build:
yarn run build
The app can be configured using HTML data attributes on the div where the ReactJS app is loaded with javascript. The following configuration options are available:
type: string (pipe-separated), default: empty
Sets the list of card systems names that are selected as filters. The names should be exactly the same as in ElasticSearch. The names need to be separated with a pipe, i.e. '|'.
type: boolean, default: true
When set to true the owning card systems filter is visible. When set to false the filter is invisible.
type: string, default: 'https://test.uitid.be/uitid/rest/uitpas/promotions/es/'
Sets the url to the ElasticSearch service. After this URL you should put your received API key. For example: 'https://test.uitid.be/uitid/rest/uitpas/promotions/es/[API key]'
type: boolean, default: true
When this flag is set to true, the app runs as if it is embedded on a web page. This means it uses hash routing that does not interfere with the regular HTML page where it is embedded. Hash routing uses the # anchor of the url to store the react.js routing. This is needed when embedding the app on existing pages, e.g. an existing drupal page.
When the flag is set to false, the app will run as if it runs on a Node.js server that allows normal HTML formatting, e.g. http://example.com/voordelen.
type: boolean, default: true
If set to true, the query in the searchbox is appended with a '%'. This results in matching terms that start with the query, e.g. the query 'gla' will match 'glass', 'Glasgow', 'glamrock', etc. If the flag is false, 'gla' will only match 'gla'.
type: number, default: 2
Sets the number of weeks that is used to calculate when an advantage should be marked as 'last chance'.
type: string, default: 'Naam voordeel, organisator of gemeente'
Sets the placeholder string used in the search box.
type: boolean, default: true
If set to true, only advantages that are labelled as active will be shown in the search results. This appends each query with a search filter. The query checks whether the status.keyword field equals ACTIVE.
type: boolean, default: false
If set to true, only advantages that are published will be shown in the search results. This appends each query with a search filter.
type: boolean, default: true
If set to true, only advantages of card systems with the flag permanent set to true will be shown in the results. This appends each search query with a search filter.
type: string, default: 'https://io-acc.uitdatabank.be',
Sets the url to the UiTDatabank API.
type: boolean, default: true
If true the default ordering puts advantages that have a flag inSpotlight set to true higher.
type: string, default: window.location.origin + '/img/default-thumb.png'
Sets the url to the default thumbnail that is used when the advantage does not have a thumbnail.