Update report view style

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%;
+    background-color: #ebeef0;
-    margin: 0 auto;
-    padding: 2rem 0 5rem 0;
 }
 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;
 }

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

js/object.json

@@ -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"
+}

js/views/report.js

@@ -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) {
+            if (! boolValue) {
-                rowspan = Object.keys(report.resource[key]).length;
-
                 for (const k in report.resource[key]) {
                     const li = document.createElement('li');
                     li.innerHTML = 
@@ -52,7 +57,6 @@ document.addEventListener('readystatechange', async () => {
         }
 
         // TODO Pop coordinates before traversing the object
-        if (!key.includes('Coordinates')) {
         let value = innerList !== null ? 
             innerList.outerHTML : report.resource[key];
 
@@ -60,7 +64,6 @@ document.addEventListener('readystatechange', async () => {
             <td class="text-bold key">${key.replace(resType, '')}</td>
             <td>${value}</td>
         `;
-        }
 
         repTable.appendChild(row);
     }

package.json

@@ -6,6 +6,7 @@
   "author": "Nicolò Paraciani",
   "license": "MIT",
   "dependencies": {
+    "fontawesome-free": "^1.0.4",
     "spectre.css": "^0.5.9"
   }
 }

report/index.html

@@ -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">
+                <div class="column col-4 p-2">
-                    <h2 class="text-center mt-2">Map</h2>
+                    <img class="img-responsive mt-2" src="../img/map.png" />
-                    <img class="img-responsive" src="../img/map.png" />
                 </div>
             </div>
         </main>