From b60eee43ea0644dcf3b625c6bec843ea76c8ae85 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nicol=C3=B2=20P?= <nicolo.paraciani@cnr.it>
Date: Mon, 27 Feb 2023 16:05:27 +0100
Subject: [PATCH] Update report view style

---
 css/.ds.css.swp         | Bin 0 -> 12288 bytes
 css/ds.css              |  25 +++++++++++++++++--------
 js/.ds.js.swp           | Bin 0 -> 12288 bytes
 js/ds.js                |   7 +++++--
 js/object.json          |   8 ++++++++
 js/views/.report.js.swp | Bin 0 -> 12288 bytes
 js/views/report.js      |  33 ++++++++++++++++++---------------
 package.json            |   1 +
 report/index.html       |  37 ++++++++++++++++++++++++++-----------
 9 files changed, 75 insertions(+), 36 deletions(-)
 create mode 100644 css/.ds.css.swp
 create mode 100644 js/.ds.js.swp
 create mode 100644 js/object.json
 create mode 100644 js/views/.report.js.swp

diff --git a/css/.ds.css.swp b/css/.ds.css.swp
new file mode 100644
index 0000000000000000000000000000000000000000..857f5af611f631574eb35745e2bf59bae932db3a
GIT binary patch
literal 12288
zcmeI2J#W)M7{{*&AqEPFiv8LG1r$3@LfR^k5E2N~0mK3W6@wk09k;g6vM;nDynhEq
zMud=<5PQYa4K^ku#5dpzAeI05C2awfiVgHw`PsR*$ItV-ERpS4x0kN-MYG9p9B0gU
z|GhV}@P=(R4zf7t$x!Nny^lmDhRpV!qemYV0qcICj3kvSqNlRDn;BjzV`V6jsd_Kd
zJti)H4o5S{02$b?fr0Xj#Yxs`HY~klc4nGSow&8%)ijR`kO4A42FL&zAOmE843L5U
zz<^37*kjajpsXeTbAay?WxKkTO}dZ)GC&5%02v?yWPl8i0Wv@a$N(821OK1_+r@MF
zBaGddMDlq4U;Y38c#N?RU=zFpZ^3Ku6s&-o;0Cw?=D`_o3LFN9z}8X5zJf2{6W9RH
z!87m#jDP?=und;KHE<PN1n0p?Fa@@d+c)qTY=BqbC3pcIfcqc=cfm5ywOj^tkO4A4
z2FL&zAOmE843GgbKnDK8z(dAyL_ut<1+MCMc+;|y^)544#gOU2{8Y>+zwYSybqya?
z!*=Q;s*(v}rXu3gL6pc;*|9?ONEyxX)Wmk(Aoe@Fq37vSH_ytkd#ipb2eE7D_qEdw
zpY=Si7>n}o9d2=Zpk&ckX0y;fjXR`5-wg|6We2fHf4-X$3QuAE&T!j(%H@L)OUh!#
z8Md_>jD*2BUKnJ`$kZ?t9UjYA<l~iv@xs;~Ri(aTpKaH8@v+SLb7fNS*B61`N1hk*
zUGbz;J4*SDAmIq%p{NK&k5jDdwOXxR+c08%VY>*JC3b8&Dz4hLZq%w)P}{A+aHLW)
z!hYpR=^s#8XR+Pe-HuEVetUkh4s)o-PsNaDG7Q{qb(6|iRdB<yu#Jv%hk6?>6+a$6
jXPWhUB6ek3_w>%LiA+WUFWL){zhZBPp?=4HuFHM^cfS`0

literal 0
HcmV?d00001

diff --git a/css/ds.css b/css/ds.css
index 4226c38..7709632 100644
--- a/css/ds.css
+++ b/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;
 }
diff --git a/js/.ds.js.swp b/js/.ds.js.swp
new file mode 100644
index 0000000000000000000000000000000000000000..37c9de526a387600a4c7ce0f7ef828619439f15f
GIT binary patch
literal 12288
zcmeI2O^g&p6vqn`zfq$xF`f$8I6dob_v{)KSO!?wB`od-?Cuy7LYSWJ8m8BtuBNI+
z*h~gaekC4^Q7;~hXH8Iy2Te55gLe<a#2BucaFT=Zz`_6P?irS4gAlzKtCHXJbaj2a
z_kZtIXS36&yfib%ce>*Y?NP?W_t%1_Uig&#Fm^XfqCm!y9^AU6G98ur)??`DxqLzI
zRAfd|C09gXv={2prjm&nH9{M2g*x1o+gR-Hx3eRx0#<>(0v*#F-MO{)?D$xPx^`^e
z#vgyI)_-cRRspMkRlq7>6|f3e1*`&A0jt3OKmn6(V&~!K=EBz_#dXuVYjJBYRspMk
zRlq7>6|f3e1*`&A0jq#jz$#!BunPPK74SpGR_|r(oBLoq{{P?q`~T`AjQtM20`G(O
zz&qe&Fa)kW%-EmcTkth_6TA*igXh5$;4ZKk{I->`&%p)o3HSii!5Fym5M#fBOW;TF
zG583a2eaTsFa~~k5dGk7a1<N?hrtvW0e?Ke*i~>D{0uIF&%lS^4X_J53GM+~z?J(M
z`w3hEUxF{d1@JC-3%mx7fjO`XJO{RbP2e)L`VNq0=fDcE%_?9OunJfOtO8bnjTGR+
z9^=DY2`xJ+5Ijn>*{IJ?@X)NL!gXDmaI7QLDyF4U86HQ;E1Db0Lt%vahtu0pBA7Qk
z%sfw=&6fA|Y7+2fCkad>6W$aiXdQ}TaUhlrr-?5$6_qDoRp!cmB}_*pyek{@TgDz)
zOYBd5<+piP8x<v|dc2s(ms=wHUedg_I0FIrqzYO>59S#eO1e2j`({IV13Po);KJe(
z<S1v>_E=%<z|Iu=n8i#Xr_8$ymY@~Zt!SCx8LUS0JnY$sjPjwWj-wz`IeSEp-N47r
z4!Kw~*R(|9AZWb0mtu$CX3E4Vmj?s<Gk#=prJVXu_rT=R^vT-dY;UN$IK6aodVcEY
z!p!_KZabYQ?Conx)%H!5R(U!~LXnv2cs*Y&kdzUHxxAX~0DG4grWW|LQc~${+gP{n
z{6?WFB%qzJ<edeHCS?)oCn!a!HZyf&nDWRRSz4Hf7?d)Uq?AIr<oPE_7s{a1hIj61
zO5Y_BBSEBc>N|$IkfC07{WKLxc(4`4p%WR=UZXk9-{bjv>(|3TUDSrUQ~|E;H1gzf
zvfJ3#W(H!OU1&NbuT<vG@UilBTWDf^kI!35G^^W-C18H+2f`_}j7fKUUMvGYZb@x+
z@2pfRUS9?6l}5-_8e8sd-^*w*YGkt;C5cdnm*-}Al{1$0<0B6w4M6umh(HP7i0N36
zEKVtoN`=cv3GU=`$Qv%3d6`ot55hgj^?aFGItMc6^$3r`>n7e5_E#nJ9#q)6$}Akq
z;+_l2P0Kf2w`3;{`+oCS=F$`=()#)?5(l{g(@`(HHp>xk@{=~carp5Qz2X$hjsvQ6
zK|2+vA}Np^2nRE{ilK3&&6+eTDw}$bm*Ozp4fTwV1GRL*&5GI?t5imK+doU0P^lC`
z|GUNCj~HsU%5U=&C@TF<t2)<a7VbLaQ<aZb*4MY@-ASeV)gGTrxKH2snaH%b&MI$1
zg()^SHAneLDBCek$6_Y!G>9S2*<PmW9PCIs?FL>#2zoz!*{dlF7R{mK{8q0odjAZj
zX0N<`S&&&S?b`DbK9|<k<V61%%!l?*T^d%@bLbmir>I&t(rMrZiE<-TnqaKd(SlR5
H2Xy-vNkFWg

literal 0
HcmV?d00001

diff --git a/js/ds.js b/js/ds.js
index e53146d..d16308e 100644
--- a/js/ds.js
+++ b/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
@@ -69,4 +72,4 @@ export async function fetchReport(uuid)
 /**
  * Query report links to determine
  * resource instance type...
- */
\ No newline at end of file
+ */
diff --git a/js/object.json b/js/object.json
new file mode 100644
index 0000000..d6b1a3c
--- /dev/null
+++ b/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"
+}
diff --git a/js/views/.report.js.swp b/js/views/.report.js.swp
new file mode 100644
index 0000000000000000000000000000000000000000..a05a014dd2617b1950049657044d15cd44554770
GIT binary patch
literal 12288
zcmeHNONbmr7_Ml1Caa=?pa*Mb)t=Frp3NFC>?092F^XAMbPVXSaeKOJW@@*lYtmh_
zlOc>Ayu_nd1p^)g!IR*@oORKYf(I{>TtyI!-o%4n^>b!+b`9u7wi>?eM^*ig?|&4-
zR(<yTODpt*Jx6doK*)uizucMUJ|jEF4ilfdQb;|p|J9M5iVXLkqetJ41y-9}RXTy(
zWUdOUURY@a(pMG5LRH-itJ|FQ!fL=eGEnyBEr|VR#b$<K;Gi?mRgKDtDe~;xu~|*U
zOktWn^x*3UofYH1VZbn87%&VN1`Gp+0mFb{;6O2;I)}(R@c6dG>lc#yp|N}NYHo%B
z!+>GHFkl!k3>XFs1BL;^fMLKeU>GnA{0|v$JVNI0B*ec9#^eA0>F@vF?<eFY@H6lu
z@Huc5_z0*2j{rCCBjh*WQ{a8zJ>UxP7H}4L26!Ae4BVI^<U8P7;2Yp7@FwsW@F?)d
zQ9`Z(Ujlt#1t<f59wFo>;0NFu@Gh_nOaVuMU+*R43*Zt^10Du$+(XE9;A21nZvbb3
zIpF%;gnSR|0AB-FfD6D=z>~lc;45(P3GgBC0nh_30-B>XAb_U<a~TE<1BQWv%D|vR
zD6T>DS3lv<R?VpkW;>k@^S$L37hW-tw>qy^S|FLMMCzoqlfM18dM9a^^lg&X5id3t
zGKWCa;NQ!jbWwRHpSZm3h%Or}R`D{VAsVHwaKdn@px7l<sY~I}E!Hn!4Q@6<BpjC&
z0~Xf$9ag56RT>i$$ezu8p9L@0R?g8Sx{(J3F{aVbIUXuoc2zQIUWZ<v*MnHu4P3Sc
zUF*5;f+-qV3~||dI=!?+{jL!76wQ37R%vbZ^eTNtcBm_5;Bnu<$v|3X4H+=10%w~A
zA@`e9wHTFkeTXo(FHc2n>FAsOlIb3Ga8Yp3Gs%TD>-orTYaJwE)<`^|fie*?dYNe9
z!`E)rdUWzvJ(3$XTsnfIBJ}Y1#Tyh6+|Bsf)_TTj31*S;h3Weq-fpcA#ym_H==;WE
zsBl!XsZ%LSBm}w~=TI^@Plnf|&w`IoK5>pK{ZLWCktCjUyKUwx+YK1ve?~C<R<s1S
zCQyRZpv8Fg7O0$<jGB(r7=70iPSd)S;=C@UU2J6$*~gl$7`G-iB9n@>X#(wKR~}$(
zkwQ(%#zY4ws>O;E-Wql$t(br{99PL8^D=wT)i>;puDM)oY%+>|A4gS?Iyy`>>(j{A
z@MYEyQ<GA2+K%ru8EtTZ>UDgN`Z(Xqyrg8q$hbsxvTF?Mzu09#|1~C1-7+XzGihI;
zsxH00HYW2f&Z`=l9RzIX#Ev@KfMz-F@eoa~?>lXlrgxTKyA^dRiYu!WD}XTV93&@C
zHXK6ND>Axtl1?)ycSYA@VbNO7yOmW+k~DU3xQ|7G;ublw0?iV?W+MD@J0a=6Un#D{
zq1=YG*>xKpanu8~N_bnKv9)=B37F~zeja2YT}N^0+byICBw5wtv&Ze0Y6~l#6qQ5j
zqhNkhwZ<YE5w24yx5rwI`fnlvkw1+b?24q<+qONtCgCw&Vxw(@dJ~GMNW(c8s_h>4
zJ#0jsfTQk{?|Viqnq`%2$Meo?qfzMXiD3sTTCU*kmQ|+3k`7qX5!1YjwMWE`^wOA;
zbe0~%9H-}SMH@`HtyiPgTg*renG?9JtR)ssac`**ZLKgoGkUji=xts<RA_K+%ki5G
zb~<6-cXMk86o=#6v|!sfD38<dh1j&n-`I*WxnqyK88Wp@csp_f1Xx|{Sm@Q<RS4YQ
DWsDDr

literal 0
HcmV?d00001

diff --git a/js/views/report.js b/js/views/report.js
index 9e617df..30833f5 100644
--- a/js/views/report.js
+++ b/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) {
-                rowspan = Object.keys(report.resource[key]).length;
-
+            if (! boolValue) {
                 for (const k in report.resource[key]) {
                     const li = document.createElement('li');
                     li.innerHTML = 
@@ -52,16 +57,14 @@ 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);
     }
-})
\ No newline at end of file
+})
diff --git a/package.json b/package.json
index 5022b6c..dfac820 100644
--- a/package.json
+++ b/package.json
@@ -6,6 +6,7 @@
   "author": "Nicolò Paraciani",
   "license": "MIT",
   "dependencies": {
+    "fontawesome-free": "^1.0.4",
     "spectre.css": "^0.5.9"
   }
 }
diff --git a/report/index.html b/report/index.html
index 384c1be..17e17d1 100644
--- a/report/index.html
+++ b/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">
-                    <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>
@@ -32,4 +47,4 @@
         </footer>
     </body>
 <!-- Templates? -->
-</html>
\ No newline at end of file
+</html>