From 0557cb30d3581ca3613286df2d0d61087a00533c Mon Sep 17 00:00:00 2001
From: Christian Boettcher <c.boettcher@fz-juelich.de>
Date: Tue, 8 Jun 2021 12:04:33 +0200
Subject: [PATCH] first apicalls for the web frontend
---
README.md | 4 +-
frontend/js/apicalls.js | 109 +++++++++++++++++++++++++++++++++++++++-
2 files changed, 110 insertions(+), 3 deletions(-)
diff --git a/README.md b/README.md
index 1853a78..27b54ca 100644
--- a/README.md
+++ b/README.md
@@ -10,7 +10,7 @@ Find architecture in [arch](arch/arch.adoc) folder.
## Frontend Server for the Data Catalog
-[This](frontend/) part is the frontend for the Data Catalog. It will be the user interface, so that no one is forced to manually do http calls to the api. Since the content is managed by the [api-server}(apiserver/), this can be deployed as a static website, containing only html, css and javascript. To make the different pages more uniform and avoid duplicate code, the static pages will be generated by the [jinja2](https://jinja.palletsprojects.com/en/3.0.x/templates/) template engine.
+[This](frontend/) part is the frontend for the Data Catalog. It will be the user interface, so that no one is forced to manually do http calls to the api. Since the content is managed by the [api-server](apiserver/), this can be deployed as a static website, containing only html, css and javascript. To make the different pages more uniform and avoid duplicate code, the static pages will be generated by the [jinja2](https://jinja.palletsprojects.com/en/3.0.x/templates/) template engine.
To compile the static pages to the `./site/` directory (will be created if required), simply run
```bash
@@ -35,7 +35,7 @@ For deployment via [docker](https://www.docker.com/), a docker image is included
### Security
-Certain operations will only be possible, if the request is authenticated. The API has an endpoint at `/token` where a username/password login is possible. The endpoint will return a token, which is valid for 1 hour. This token ahs to be provided with every api call that requires authentication. Currently, these calls are `GET /me` - `PUT /dataset` - `PUT /dataset/dataset-id` - `DELETE /dataset/dataset-id`. The passwords are stored as bcrypt hashes and are not visible to anyone.
+Certain operations will only be possible, if the request is authenticated. The API has an endpoint at `/token` where a username/password login is possible. The endpoint will return a token, which is valid for 1 hour. This token has to be provided with every api call that requires authentication. Currently, these calls are `GET /me` - `PUT /dataset` - `PUT /dataset/dataset-id` - `DELETE /dataset/dataset-id`. The passwords are stored as bcrypt hashes and are not visible to anyone.
A CLI is provided for server admins to add new users. It will soon be extended to allow direct hash entry, so that the user does not have to provide their password in clear text.
diff --git a/frontend/js/apicalls.js b/frontend/js/apicalls.js
index ab01617..86af4d2 100644
--- a/frontend/js/apicalls.js
+++ b/frontend/js/apicalls.js
@@ -1 +1,108 @@
-// This file will contain the api calls, as well as transform the data into html-text (via a template)
\ No newline at end of file
+// This file will contain the api calls, as well as transform the data into html-text (via a template)
+
+var apiUrl = "http://zam024.fritz.box/api/";
+
+// get variable map from url
+function getUrlVars()
+{
+ var vars = [], hash;
+ var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
+ for(var i = 0; i < hashes.length; i++)
+ {
+ hash = hashes[i].split('=');
+ vars.push(hash[0]);
+ vars[hash[0]] = hash[1];
+ }
+ return vars;
+}
+
+// return the storage type
+function getType() {
+ var type = getUrlVars()["type"];
+ console.log("Type: " + type);
+ return type;
+}
+
+// return the dataset id
+function getId() {
+ var id = getUrlVars()["id"];
+ console.log("ID: " + id);
+ return id;
+}
+
+// set the text of the typetext element
+function setTypeText() {
+ $('#typetext').text(getType());
+}
+
+// get option-html string from typename and url suffix
+function getTypeHTMLString(name) {
+ return '<li><a class="dropdown-item" href="?type=' + name + '">' + name + '</a></li>';
+}
+
+// XMLHttpRequest EVENTLISTENER: if a dropdown-menu (a <ul> element) with the dropdownOptions id is present, update it with the available types
+function setTypeData() {
+ console.log("GET " + this.responseUrl + ": " + this.responseText);
+ var types = JSON.parse(this.responseText);
+ // types is now a list of {name : url} elements, where url starts with a slash, and is relative to the root
+ var keyName = "";
+ types.forEach(element => {
+ keyName = Object.keys(element)[0];
+ console.log("Detected location type: " + keyName);
+ $('#dropdownOptions').append(getTypeHTMLString(keyName));
+ });
+}
+
+// XMLHttpRequest EVENTLISTENER: append to the list of datasets
+function setDatasetList() {
+ console.log("GET " + this.responseUrl + ": " + this.responseText);
+ var datasets = JSON.parse(this.responseText);
+
+}
+
+// XMLHttpRequest EVENTLISTENER: show single datset
+function setDatasetList() {
+ console.log("GET " + this.responseUrl + ": " + this.responseText);
+ var datasets = JSON.parse(this.responseText);
+
+}
+
+// get available types from api, put them in the relevant dropdown
+function getTypes() {
+ var xmlhttp = new XMLHttpRequest();
+ xmlhttp.addEventListener("loadend", setTypeData);
+ xmlhttp.open("GET", apiUrl);
+ xmlhttp.send();
+}
+
+// get listing of datasets of the given type, put them in the list element
+function listDatasets(datatype) {
+ var fullUrl = apiUrl + datatype;
+ console.log("Full url for listing request is " + fullUrl)
+ var xmlhttp = new XMLHttpRequest();
+ xmlhttp.addEventListener("loadend", setDatasetList);
+ xmlhttp.open("GET", fullUrl);
+ xmlhttp.send();
+}
+
+// get details about given dataset, put them in the view element§
+function showDataset(datatype, dataset_id) {
+ var fullUrl = apiUrl + datatype + "/" + dataset_id;
+ console.log("Full url for showing request is " + fullUrl)
+ var xmlhttp = new XMLHttpRequest();
+ xmlhttp.addEventListener("loadend", setDatasetView);
+ xmlhttp.open("GET", fullUrl);
+ xmlhttp.send();
+}
+
+
+
+
+
+//either enable the dataset listing or enable the single dataset view
+function showListingOrSingleDataset() {
+ // compare getType with allowed types
+ // if none or illegal type: show first allowed one
+ // then check if dataset id is present, if yes, show that dataset
+ // if no id, or non-existent id, list all sets of type
+}
\ No newline at end of file
--
GitLab