Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fixes and documentation #3

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
+111 −56
Open

Fixes and documentation #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
983fdce
add documentation
renaudpawlak Jul 14, 2022
24bed36
fix various issues (including CORS) and connect to the actual prod API
renaudpawlak Jul 14, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
*.iml
.idea
31 changes: 30 additions & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,30 @@
# boaviztapi-front
# Boaviztapi Front

This project aims at building small intuitive front ends for quick access to the https://api.boavizta.org/docs api.

Currently, the PoC frontend is built with the DLite low-code tool, so that it should be easy to adapt, style and extends, even for non-programmers.

## Get started

- Clone this repo
- With your favorite browser, go to https://platform.dlite.org
- Click on the ``Load project file`` button
- Select the ``boavizta.dlite`` file on your local disk

You should see the following screen:

![Input form](doc/screenshot-form.png)

## How to use

- Edit the form to enter the values (note that if you do not enter any value, the API will still return a default result)
- Press the ``Submit`` button

You should see a result looking like this:

![Result](doc/screenshot-result.png)

## How to modify/extend/style the frontend UI

Modifying the front can be done live by clicking on the edit button (top-right corner of the page). Please refer to the documentation at https://www.dlite.io to get started with DLite.

134 changes: 79 additions & 55 deletions boavizta.dlite
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -929,15 +929,16 @@
"type": "HttpConnector",
"eventHandlers": [],
"cid": "http-1",
"baseUrl": "http://localhost:5000",
"baseUrl": "https://api.boavizta.org",
"path": "v1/server/",
"resultType": "JSON",
"form": false,
"publicName": "",
"mode": "cors",
"init": "",
"body": "=$d(\"container-24\")",
"headers": "={\"Content-Type\": \"application/json\"}"
"headers": "={\"Content-Type\": \"application/json\"}",
"proxy": true
},
{
"layout": "block",
Expand Down Expand Up @@ -972,25 +973,28 @@
"eventHandlers": [],
"dataSource": "$parent",
"cid": "input-18",
"defaultValue": ""
"defaultValue": "",
"dataType": "string",
"size": "sm"
},
{
"label": "Name",
"inputType": "text",
"description": "",
"field": "name",
"size": "default",
"size": "sm",
"disabled": false,
"placeholder": "",
"type": "InputView",
"eventHandlers": [],
"dataSource": "$parent",
"cid": "input-19",
"defaultValue": ""
"defaultValue": "",
"dataType": "string"
},
{
"label": "Type",
"size": "default",
"size": "sm",
"description": "",
"field": "type",
"disabled": false,
Expand All @@ -1005,29 +1009,31 @@
"inputType": "number",
"description": "",
"field": "year",
"size": "default",
"size": "sm",
"disabled": false,
"placeholder": "aaaa",
"type": "InputView",
"eventHandlers": [],
"dataSource": "$parent",
"cid": "input-21",
"min": "1970",
"max": "2022"
"max": "2022",
"dataType": "number"
},
{
"label": "Archetype",
"inputType": "text",
"description": "",
"field": "archetype",
"size": "default",
"size": "sm",
"disabled": false,
"placeholder": "",
"type": "InputView",
"eventHandlers": [],
"dataSource": "$parent",
"cid": "input-22",
"defaultValue": ""
"defaultValue": "",
"dataType": "string"
}
],
"defaultValue": "={}",
Expand Down Expand Up @@ -1098,7 +1104,8 @@
],
"type": "ButtonView",
"cid": "button-27",
"icon": "chevron-expand"
"icon": "chevron-expand",
"hidden": null
}
],
"defaultValue": "={}",
Expand All @@ -1117,28 +1124,30 @@
"inputType": "text",
"description": "",
"field": "units",
"size": "default",
"size": "sm",
"disabled": false,
"placeholder": "",
"type": "InputView",
"eventHandlers": [],
"dataSource": "$parent",
"cid": "input-55",
"defaultValue": "2"
"defaultValue": "2",
"dataType": "string"
},
{
"label": "Cores per unit",
"inputType": "text",
"description": "",
"field": "core_units",
"size": "default",
"size": "sm",
"disabled": false,
"placeholder": "",
"type": "InputView",
"eventHandlers": [],
"dataSource": "$parent",
"cid": "input-56",
"defaultValue": "8"
"defaultValue": "8",
"dataType": "string"
}
],
"defaultValue": "={}",
Expand All @@ -1158,7 +1167,8 @@
"class": "",
"layoutClass": "",
"dataSource": "$parent",
"cid": "card-23"
"cid": "card-23",
"hidden": false
},
{
"title": "",
Expand Down Expand Up @@ -1225,7 +1235,8 @@
"class": "mr-2 mb-0",
"layoutClass": "align-self-end",
"dataSource": "$parent",
"cid": "input-57"
"cid": "input-57",
"dataType": "string"
},
{
"label": "Capacity",
Expand All @@ -1240,7 +1251,8 @@
"class": "mr-2 mb-0",
"layoutClass": "align-self-end",
"dataSource": "$parent",
"cid": "input-58"
"cid": "input-58",
"dataType": "string"
},
{
"dataSource": "$parent",
Expand Down Expand Up @@ -1424,7 +1436,8 @@
"class": "mr-2 mb-0",
"layoutClass": "align-self-end",
"dataSource": "$parent",
"cid": "input-59"
"cid": "input-59",
"dataType": "string"
},
{
"label": "Type",
Expand All @@ -1439,7 +1452,8 @@
"class": "mr-2 mb-0",
"layoutClass": "align-self-end",
"dataSource": "$parent",
"cid": "input-60"
"cid": "input-60",
"dataType": "string"
},
{
"label": "Capacity",
Expand All @@ -1454,7 +1468,8 @@
"class": "mr-2 mb-0",
"layoutClass": "align-self-end",
"dataSource": "$parent",
"cid": "input-61"
"cid": "input-61",
"dataType": "string"
},
{
"dataSource": "$parent",
Expand Down Expand Up @@ -1597,7 +1612,7 @@
"inputType": "range",
"description": "",
"field": "units",
"size": "default",
"size": "sm",
"disabled": false,
"placeholder": "",
"type": "InputView",
Expand All @@ -1618,28 +1633,34 @@
"cid": "input-62",
"defaultValue": "=1",
"min": "0",
"max": "10"
"max": "10",
"dataType": "number",
"hidden": null
},
{
"label": "Weight per unit",
"inputType": "text",
"description": "",
"field": "unit_weight",
"size": "default",
"size": "sm",
"disabled": false,
"placeholder": "",
"type": "InputView",
"eventHandlers": [],
"dataSource": "$parent",
"cid": "input-63"
"cid": "input-63",
"dataType": "string"
}
],
"defaultValue": "={}",
"type": "ContainerView",
"eventHandlers": [],
"field": "power_supply",
"dataSource": "$parent",
"cid": "container-41"
"cid": "container-41",
"direction": "row",
"columnGap": "2rem",
"hidden": null
},
"footer": {},
"type": "CardView",
Expand All @@ -1658,7 +1679,9 @@
"cid": "container-42",
"field": "configuration",
"style": "",
"class": "p-0"
"class": "p-0",
"form": null,
"showStateOnInput": null
},
{
"dataSource": "$parent",
Expand All @@ -1670,28 +1693,7 @@
"squared": false,
"block": true,
"disabled": false,
"eventHandlers": [
{
"global": false,
"name": "@click",
"actions": [
{
"targetId": "http-1",
"name": "update",
"description": "Submit form",
"argument": "",
"condition": ""
},
{
"targetId": "navbar",
"name": "setData",
"description": "Show results",
"argument": "({ showResults: true })",
"condition": "undefined"
}
]
}
],
"eventHandlers": [],
"type": "ButtonView",
"cid": "button-16",
"hidden": null,
Expand Down Expand Up @@ -1775,7 +1777,8 @@
"dataSource": "http-1",
"mapper": "([\n {\n title: \"GWP (kgCO2e)\",\n manufacture: dataModel.impacts.gwp.manufacture,\n use: dataModel.impacts.gwp.use,\n }\n])",
"stacked": true,
"aspectRatio": "1"
"aspectRatio": "1",
"fillHeight": true
},
{
"chartType": "bar",
Expand All @@ -1790,7 +1793,8 @@
"dataSource": "http-1",
"mapper": "([\n {\n title: \"Primary energy (MJ)\",\n manufacture: dataModel.impacts.pe.manufacture,\n use: dataModel.impacts.pe.use,\n }\n])",
"stacked": true,
"aspectRatio": "1"
"aspectRatio": "1",
"fillHeight": true
},
{
"chartType": "bar",
Expand All @@ -1805,7 +1809,8 @@
"dataSource": "http-1",
"mapper": "([\n {\n title: \"Abiotic resources\",\n manufacture: dataModel.impacts.adp.manufacture,\n use: dataModel.impacts.adp.use,\n }\n])",
"stacked": true,
"aspectRatio": "1"
"aspectRatio": "1",
"fillHeight": true
}
],
"defaultValue": "={}",
Expand All @@ -1826,11 +1831,30 @@
],
"defaultValue": "={}",
"type": "ContainerView",
"eventHandlers": [],
"eventHandlers": [
{
"global": false,
"name": "@submit",
"actions": [
{
"targetId": "http-1",
"name": "update",
"description": "Invoke API"
},
{
"targetId": "navbar",
"name": "setData",
"description": "Show results",
"argument": "({ showResults: true })"
}
]
}
],
"dataSource": "$parent",
"cid": "container-24",
"form": false,
"hidden": null
"form": true,
"hidden": null,
"showStateOnInput": true
}
],
"defaultValue": "={}",
Expand Down
Binary file added doc/screenshot-form.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added doc/screenshot-result.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.