Update report view style
This commit is contained in:
parent
92329c1a57
commit
b60eee43ea
BIN
css/.ds.css.swp
Normal file
BIN
css/.ds.css.swp
Normal file
Binary file not shown.
25
css/ds.css
25
css/ds.css
@ -1,18 +1,21 @@
|
||||
@import '../vendor/fontawesome-free/css/all.css';
|
||||
|
||||
body {
|
||||
height: 100%;
|
||||
}
|
||||
header {
|
||||
background-image: url('http://150.145.56.132/static/img/logos/dataspace_icon.svg');
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
min-height: 200px;
|
||||
border-bottom: 1px lightgrey solid;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
header i,
|
||||
header a.btn,
|
||||
header span.btn
|
||||
{
|
||||
color: #333 !important;
|
||||
}
|
||||
main {
|
||||
width: 75%;
|
||||
margin: 0 auto;
|
||||
padding: 2rem 0 5rem 0;
|
||||
background-color: #ebeef0;
|
||||
}
|
||||
footer {
|
||||
min-height: 40px;
|
||||
@ -30,6 +33,12 @@ td ul {
|
||||
margin-left: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
.report-container {
|
||||
width: 75%;
|
||||
margin: 0 auto;
|
||||
background-color: #fff;
|
||||
padding: 1rem 1rem;
|
||||
}
|
||||
.mt-2 {
|
||||
margin-top: 2rem !important;
|
||||
}
|
||||
|
||||
BIN
js/.ds.js.swp
Normal file
BIN
js/.ds.js.swp
Normal file
Binary file not shown.
5
js/ds.js
5
js/ds.js
@ -1,6 +1,6 @@
|
||||
'use strict';
|
||||
|
||||
export const BASE_URL = 'http://150.145.56.132';
|
||||
export const BASE_URL = 'http://dataspace.ispc.cnr.it';
|
||||
const RES_ENDPOINT = '/resources/';
|
||||
|
||||
/**
|
||||
@ -57,6 +57,9 @@ export async function fetchReport(uuid)
|
||||
// Arbitrary slice...
|
||||
return jsonRep;
|
||||
}
|
||||
export function printReport() {
|
||||
document.querySelector('#print').onclick = window.print();
|
||||
}
|
||||
/**
|
||||
* Fetch file blob (CORS...)
|
||||
* @todo
|
||||
|
||||
8
js/object.json
Normal file
8
js/object.json
Normal file
@ -0,0 +1,8 @@
|
||||
{
|
||||
"name": "Object M.P. Report",
|
||||
"component": "reports/object",
|
||||
"defaultconfig": {},
|
||||
"description": "Custom report for the Marmora Phrygiae Object Model.",
|
||||
"componentname": "object",
|
||||
"templateid": "e4e8d54f-c666-193c-1404-ab4ee0204b13"
|
||||
}
|
||||
BIN
js/views/.report.js.swp
Normal file
BIN
js/views/.report.js.swp
Normal file
Binary file not shown.
@ -2,14 +2,20 @@
|
||||
|
||||
import {
|
||||
fetchReport,
|
||||
printReport,
|
||||
} from "../ds.js";
|
||||
|
||||
document.addEventListener('readystatechange', async () => {
|
||||
const report = await fetchReport(location.search.replace("?id=", ''));
|
||||
const resKeys = Object.keys(report.resource);
|
||||
const resource = report.resource;
|
||||
|
||||
document.querySelector('#print').addEventListener('click', () => {
|
||||
window.print();
|
||||
});
|
||||
|
||||
let resKeys = Object.keys(resource);
|
||||
// Default value...
|
||||
let resType = 'Object';
|
||||
|
||||
// TODO
|
||||
if (!resKeys.length) {
|
||||
location.href = '/404.html';
|
||||
@ -17,6 +23,8 @@ document.addEventListener('readystatechange', async () => {
|
||||
}
|
||||
|
||||
resType = resKeys[0].split(' ')[0];
|
||||
const coordinates = resource['Coordinates'];
|
||||
resKeys = resKeys.filter(e => !e.includes('Coordinates'));
|
||||
|
||||
document.querySelector('#rep-tit')
|
||||
.innerText = `${resType} ${report.displayname}`;
|
||||
@ -25,7 +33,6 @@ document.addEventListener('readystatechange', async () => {
|
||||
// TODO manage files and nested objects
|
||||
for (const key of resKeys) {
|
||||
const row = document.createElement('tr');
|
||||
let rowspan = '';
|
||||
let innerList = null;
|
||||
|
||||
// TODO refactor
|
||||
@ -33,9 +40,7 @@ document.addEventListener('readystatechange', async () => {
|
||||
const boolValue = '@value' in report.resource[key];
|
||||
innerList = document.createElement('ul');
|
||||
|
||||
if (!boolValue) {
|
||||
rowspan = Object.keys(report.resource[key]).length;
|
||||
|
||||
if (! boolValue) {
|
||||
for (const k in report.resource[key]) {
|
||||
const li = document.createElement('li');
|
||||
li.innerHTML =
|
||||
@ -52,15 +57,13 @@ document.addEventListener('readystatechange', async () => {
|
||||
}
|
||||
|
||||
// TODO Pop coordinates before traversing the object
|
||||
if (!key.includes('Coordinates')) {
|
||||
let value = innerList !== null ?
|
||||
innerList.outerHTML : report.resource[key];
|
||||
let value = innerList !== null ?
|
||||
innerList.outerHTML : report.resource[key];
|
||||
|
||||
row.innerHTML = `
|
||||
<td class="text-bold key">${key.replace(resType, '')}</td>
|
||||
<td>${value}</td>
|
||||
`;
|
||||
}
|
||||
row.innerHTML = `
|
||||
<td class="text-bold key">${key.replace(resType, '')}</td>
|
||||
<td>${value}</td>
|
||||
`;
|
||||
|
||||
repTable.appendChild(row);
|
||||
}
|
||||
|
||||
@ -6,6 +6,7 @@
|
||||
"author": "Nicolò Paraciani",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"fontawesome-free": "^1.0.4",
|
||||
"spectre.css": "^0.5.9"
|
||||
}
|
||||
}
|
||||
|
||||
@ -6,24 +6,39 @@
|
||||
<script src="../js/views/report.js" type="module"></script>
|
||||
</head>
|
||||
<body>
|
||||
<header class="text-center">
|
||||
<header class="navbar">
|
||||
<section class="navbar-section">
|
||||
<span class="btn btn-link">
|
||||
<i class="fa fa-archive"></i>
|
||||
</span>
|
||||
<span class="btn btn-link text-large">Report</span>
|
||||
</section>
|
||||
<section class="navbar-section">
|
||||
<a href="http://dataspace.ispc.cnr.it/auth" class="btn btn-link">Login</a>
|
||||
<a href="http://dataspace.ispc.cnr.it" class="btn btn-link" title="Home">
|
||||
<i class="fa fa-home"></i>
|
||||
</a>
|
||||
<a href="http://dataspace.ispc.cnr.it/search" class="btn btn-link" title="Search">
|
||||
<i class="fa fa-search"></i>
|
||||
</a>
|
||||
<a class="btn btn-link" id="print">
|
||||
<i class="fa fa-print"></i>
|
||||
</a>
|
||||
<a class="btn btn-link"></a>
|
||||
</section>
|
||||
</header>
|
||||
<h1 class="text-center mt-2">
|
||||
Report Light
|
||||
</h1>
|
||||
<main>
|
||||
<div class="columns">
|
||||
<div class="columns report-container">
|
||||
<div class="column col-8">
|
||||
<h2 class="text-center mt-2" id="rep-tit">
|
||||
<h2 class="mt-2 p-2" id="rep-tit">
|
||||
</h2>
|
||||
<table class="table" id="resource">
|
||||
<table class="table mt-2 table-hover" id="resource">
|
||||
<tbody>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="column col-4">
|
||||
<h2 class="text-center mt-2">Map</h2>
|
||||
<img class="img-responsive" src="../img/map.png" />
|
||||
<div class="column col-4 p-2">
|
||||
<img class="img-responsive mt-2" src="../img/map.png" />
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user