From 32d3fa0eaea214c0c291ac6387cd4289b9cec69a Mon Sep 17 00:00:00 2001
From: Kjetil Orbekk <kjetil.orbekk@gmail.com>
Date: Mon, 10 Feb 2020 22:21:11 -0500
Subject: Work on table presentation

---
 src/template.rs       | 42 +++++++++++++++++++++++++++-------------
 static/default.css    | 53 +++++++++++++++++++++++++++++++++++++++++++++------
 templates/layout.hbs  |  1 +
 templates/profile.hbs | 36 ++++++++++++++++++++++++++++++----
 4 files changed, 109 insertions(+), 23 deletions(-)

diff --git a/src/template.rs b/src/template.rs
index f3985e2..0ac67fb 100644
--- a/src/template.rs
+++ b/src/template.rs
@@ -246,28 +246,44 @@ mod function {
 mod table {
     use super::*;
 
+    #[derive(Debug, Serialize, Deserialize, Clone)]
+    pub struct TableRow {
+        pub index: i32,
+        pub columns: Vec<Json>,
+    }
+
     #[derive(Debug, Serialize, Deserialize, Clone)]
     pub struct DisplayTable {
-        pub headings: Vec<String>,
-        pub rows: Vec<Vec<Json>>,
+        pub num_rows: usize,
+        pub num_columns: usize,
+        pub headings: TableRow,
+        pub rows: Vec<TableRow>,
     }
 
     pub fn apply(columns: &Vec<Column>, d: &Json) -> Result<DisplayTable, Error> {
         let rows = d
             .as_array()
-            .ok_or_else(|| Error::TemplateError("expected array".to_string(), d.clone()))?;
+            .ok_or_else(|| Error::TemplateError("expected array".to_string(), d.clone()))?
+            .iter()
+            .map(|d| {
+                columns
+                    .iter()
+                    .map(|c| function::eval(&c.field, d))
+                    .collect::<Result<Vec<_>, _>>()
+            })
+            .collect::<Result<Vec<_>, _>>()?;
 
         Ok(DisplayTable {
-            headings: columns.iter().map(|c| c.display_name.clone()).collect(),
-            rows: rows
-                .iter()
-                .map(|d| {
-                    columns
-                        .iter()
-                        .map(|c| function::eval(&c.field, d))
-                        .collect::<Result<Vec<_>, _>>()
-                })
-                .collect::<Result<Vec<_>, _>>()?,
+            num_rows: rows.len(),
+            num_columns: columns.len(),
+            headings: TableRow {
+                index: 1,
+                columns: columns.iter().map(|c| json!(c.display_name)).collect(),
+            },
+            rows: (2..).zip(rows.into_iter()).map(|(i, columns)| TableRow {
+                index: i,
+                columns: columns,
+            }).collect(),
         })
     }
 }
diff --git a/static/default.css b/static/default.css
index a35597c..2377d14 100644
--- a/static/default.css
+++ b/static/default.css
@@ -1,29 +1,30 @@
 /* Placement */
 body {
     display: grid;
-    margin: 0 auto;
-    grid-template-columns: auto 200px minmax(800px, 1024px) auto;
+    margin: auto;
+    max-width: 1224px;
+    grid-template-columns: 200px minmax(600px, auto);
     grid-template-rows: fit-content 1fr auto;
     grid-gap: 0;
 }
 
 header {
-    grid-column: 3;
+    grid-column: 2;
     grid-row: 1;
 }
 
 nav {
-    grid-column: 2;
+    grid-column: 1;
     grid-row: 2 / 4;
 }
 
 main {
-    grid-column: 3;
+    grid-column: 2;
     grid-row: 2;
 }
 
 footer {
-    grid-column: 2 / 4;
+    grid-column: 1 / 3;
     grid-row: 3;
 }
 
@@ -75,3 +76,43 @@ main {
 footer {
     text-align: center;
 }
+
+table {
+    display: grid;
+    width: 100%;
+    grid-auto-flow: row;
+}
+
+thead, tbody, tr {
+    display: contents;
+}
+
+th {
+    font-size: 14pt;
+    font-weight: normal;
+    text-align: left;
+}
+
+th, td {
+    padding: 8px;
+}
+
+.details {
+    max-height: 0;
+    padding: 0px 8px 0px 8px;
+    overflow-y: hidden;
+    transition: all 0.15s cubic-bezier(0, 1, 0, 1);
+}
+
+.details-visible {
+    padding: 8px;
+    max-height: 1000px;
+    transition: all 0.15s ease-in-out;
+}
+
+.details div {
+}
+
+tr:nth-child(2n + 1) td {
+    background-color: #fff;
+}
diff --git a/templates/layout.hbs b/templates/layout.hbs
index bd47622..25b558c 100644
--- a/templates/layout.hbs
+++ b/templates/layout.hbs
@@ -4,6 +4,7 @@
         <meta charset="utf8">
         <link href="/static/default.css" rel="stylesheet" type="text/css"/>
         <title>pj- {{ title }}</title>
+        {{ ~> extra_head }}
     </head>
 
     <body>
diff --git a/templates/profile.hbs b/templates/profile.hbs
index c7e75e9..a1c6ed1 100644
--- a/templates/profile.hbs
+++ b/templates/profile.hbs
@@ -1,20 +1,48 @@
-{{#*inline "page"~}}
+{{#*inline "extra_head"}}
+<style>
+table {
+  grid-template-columns:  repeat({{document.num_columns}}, auto);
+}
+.details {
+  grid-column: 1 / -1;
+}
+</style>
+<script>
+function toggleDetails(e) {
+   var d = e.querySelector(".details");
+   var toggled = d.classList.contains("details-visible");
+   if (toggled) {
+     d.classList.remove("details-visible");
+   } else {
+     d.classList.add("details-visible");
+   }
+}
+</script>
+{{/inline}}
+{{#*inline "page"}}
 {{#if user~}}
     <p>Profile for {{ user }}</p>
 {{/if~}}
 {{#with document ~}}
 <table>
     <thead>
-        {{#each headings ~}}
+        {{#with headings ~}}
+        {{#each columns ~}}
             <th>{{ this }}</th>
         {{/each ~}}
+        {{/with ~}}
     </thead>
     <tbody>
         {{#each rows ~}}
-            <tr>
-            {{#each this ~}}
+            <tr onclick="toggleDetails(this)">
+            {{#each columns ~}}
                 <td>{{ this }}</td>
             {{/each ~}}
+            <td class="details">
+                <div>
+                Hello
+                </div>
+            </td>
             </tr>
         {{/each ~}}
     </tbody>
-- 
cgit v1.2.3