nicolo/ds-front-test
1
1
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Brutal image handling...

Browse Source
This commit is contained in:
Nicolò P 2023-02-28 16:00:52 +01:00
parent b60eee43ea
commit 24186eabbc
8 changed files with 107 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.gitignore vendored
View File

@ -1,2 +1,3 @@
vendor/ vendor/
*.log *.log
.*.sw*

1
.yarnrc Normal file
View File

@ -0,0 +1 @@
--*.modules-folder "./vendor"

28
img/favicon_dataspace.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

43
js/ds.js
View File

@ -43,22 +43,57 @@ export function createLinks(links, id, replace)
/** /**
* Fetch JSON report... * Fetch JSON report...
* @param {string} uuid The resource's UUID in Arches * @param {string} uuid The resource's UUID in Arches
* @param {string} format Either 'json' or 'arches-json'
* *
* @return {object} * @return {object}
*/ */
export async function fetchReport(uuid) export async function fetchReport(uuid, format='json')
{ {
// TODO Errors!! // TODO Errors!!
const jsonRep = const jsonRep =
await fetch(`${BASE_URL}${RES_ENDPOINT}${uuid}?format=json&indent=2`) await fetch(`${BASE_URL}${RES_ENDPOINT}${uuid}?format=${format}&indent=2`)
.then(res => res.json()) .then(res => res.json())
.catch(); .catch();
// Arbitrary slice...
return jsonRep; return jsonRep;
} }
export function printReport() { export function printReport() {
document.querySelector('#print').onclick = window.print(); document.querySelector('#print').addEventListener('click', () => {
window.print();
});
}
/**
* @param {object} resource The resource object (Arches JSON!)
*
* @return {string[]}
*/
export function getImageSrc(resource) {
// TODO hardcoded...
const filesUri = `${BASE_URL}/files/uploadedfiles/`;
//let key = Object.keys(resource.tiles[11].data)[0];
// TODO don't filter this array, populate another one
let arr = resource.tiles
.filter(tile => {
let key = Object.keys(tile.data)[0]
return Array.isArray(tile.data[key]);
}).filter(o => {
let key = Object.keys(o.data)[0]
return Object.keys(o.data[key][0]).includes('file_id')
});
let fileNames = [],
dataObjects = [];
arr.forEach(d => dataObjects.push(d.data));
dataObjects.forEach(e => {
e[Object.keys(e)[0]].forEach(o => {
fileNames.push(filesUri + o.name)
});
});
return fileNames;
} }
/** /**
* Fetch file blob (CORS...) * Fetch file blob (CORS...)

BIN
js/views/.report.js.swp
View File

Binary file not shown.

25
js/views/report.js
View File

@ -1,17 +1,21 @@
'use strict'; 'use strict';
import { import {
BASE_URL,
fetchReport, fetchReport,
printReport, printReport,
getImageSrc
} from "../ds.js"; } from "../ds.js";
document.addEventListener('readystatechange', async () => { document.addEventListener('readystatechange', async () => {
const report = await fetchReport(location.search.replace("?id=", '')); const report = await fetchReport(location.search.replace("?id=", ''));
const resource = report.resource; const resource = report.resource;
const archesJson = await fetchReport(location.search.replace("?id=", ''), 'arches-json');
document.querySelector('#print').addEventListener('click', () => { // DEBUG
window.print(); const files = getImageSrc(archesJson);
});
printReport();
let resKeys = Object.keys(resource); let resKeys = Object.keys(resource);
// Default value... // Default value...
@ -52,7 +56,8 @@ document.addEventListener('readystatechange', async () => {
} }
} }
} else { } else {
innerList.innerHTML = `<li>${report.resource[key]['@value']}</li>`; innerList.innerHTML =
`<li>${report.resource[key]['@value']}</li>`;
} }
} }
@ -60,6 +65,18 @@ document.addEventListener('readystatechange', async () => {
let value = innerList !== null ? let value = innerList !== null ?
innerList.outerHTML : report.resource[key]; innerList.outerHTML : report.resource[key];
if (key.includes('Images')) {
let images = '';
for (const src of files) {
images += `<span style="max-width: 100px; padding: 5px">
<img class="img-fit-contain img-responsive" src="${src}" />
</span>`;
}
value = images;
}
row.innerHTML = ` row.innerHTML = `
<td class="text-bold key">${key.replace(resType, '')}</td> <td class="text-bold key">${key.replace(resType, '')}</td>
<td>${value}</td> <td>${value}</td>

4
report/index.html
View File

@ -1,8 +1,10 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>Dataspace | Report</title>
<link href="../vendor/spectre.css/dist/spectre.css" rel="stylesheet" /> <link href="../vendor/spectre.css/dist/spectre.css" rel="stylesheet" />
<link href="../css/ds.css" rel="stylesheet" /> <link href="../css/ds.css" rel="stylesheet" />
<link rel="shortcut icon" href="../img/favicon_dataspace.svg" />
<script src="../js/views/report.js" type="module"></script> <script src="../js/views/report.js" type="module"></script>
</head> </head>
<body> <body>
@ -32,7 +34,7 @@
<div class="column col-8"> <div class="column col-8">
<h2 class="mt-2 p-2" id="rep-tit"> <h2 class="mt-2 p-2" id="rep-tit">
</h2> </h2>
<table class="table mt-2 table-hover" id="resource"> <table class="table table-hover mt-2" id="resource">
<tbody> <tbody>
</tbody> </tbody>
</table> </table>

13
yarn.lock Normal file
View File

@ -0,0 +1,13 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
# yarn lockfile v1
fontawesome-free@^1.0.4:
version "1.0.4"
resolved "https://registry.yarnpkg.com/fontawesome-free/-/fontawesome-free-1.0.4.tgz#c7c499708dabd59eb5dedf232b590a862e05957b"
integrity sha512-7sX6Lbg2oQiClFFFFitJlKg20h3YTBON6rdmq3uGjNwDo8G6EjF2bfj2OjjcCUmf4OvZCgyHaXfW2JseqissLw==
spectre.css@^0.5.9:
version "0.5.9"
resolved "https://registry.yarnpkg.com/spectre.css/-/spectre.css-0.5.9.tgz#86c732d093036d9fdc0a2ba570f005e4023ae6ca"
integrity sha512-9jUqwZmCnvflrxFGcK+ize43TvjwDjqMwZPVubEtSIHzvinH0TBUESm1LcOJx3Ur7bdPaeOHQIjOqBl1Y5kLFw==