[WIP] Export html

.gitlab-ci.yml

@@ -0,0 +1,25 @@
+before_script:
+  - docker info
+
+build_backend_test_image:
+  stage: build
+  script:
+    - docker build ./backend/ -t docker.maxiv.lu.se/elogy_backend-test
+    - docker push docker.maxiv.lu.se/elogy_backend-test
+  only:
+    - master
+
+build_frontend_test_image:
+  stage: build
+  script:
+    - docker build ./frontend/ -t docker.maxiv.lu.se/elogy_frontend-test
+    - docker push docker.maxiv.lu.se/elogy_frontend-test
+  only:
+    - master
+
+deploy_test_image:
+  stage: deploy
+  script:
+    - 'curl -H "Authorization: Bearer $AWX_TOKEN" -XPOST https://ansible.maxiv.lu.se/api/v2/job_templates/22/launch/'
+  only:
+    - master

backend/backend/api/entries.py

@@ -1,4 +1,5 @@
 import logging
+from slugify import slugify
 
 from flask import request, send_file
 from flask_restful import Resource, marshal, marshal_with, abort
@@ -8,7 +9,7 @@
 
 from ..db import Entry, Logbook, EntryLock
 from ..attachments import handle_img_tags
-from ..export import export_entries_as_pdf
+from ..export import export_entries_as_pdf, export_entries_as_html
 from ..actions import new_entry, edit_entry
 from . import fields, send_signal
 
@@ -196,6 +197,16 @@ def get(self, args, logbook_id=None):
                              as_attachment=True,
                              attachment_filename=("{logbook.name}.pdf"
                                                   .format(logbook=logbook)))
+        elif args.get("download") == "html":
+            # return a PDF version
+            # TODO: not sure if this belongs in the API
+            html = export_entries_as_html(logbook, entries)
+            if html is None:
+                abort(400, message="Could not create HTML!")
+            return send_file(html, mimetype="text/html",
+                             as_attachment=False,
+                             attachment_filename=(slugify("{logbook.name}.html"
+                                                  .format(logbook=logbook))))
 
         return marshal(dict(logbook=logbook,
                             entries=list(entries)), fields.entries)

backend/backend/export.py

@@ -1,4 +1,5 @@
 from tempfile import NamedTemporaryFile
+from slugify import slugify
 
 try:
     import pdfkit
@@ -52,3 +53,35 @@ def export_entries_as_pdf(logbook, entries):
             # https://github.com/wkhtmltopdf/wkhtmltopdf/issues/2051
             pass
         return f.name
+
+def export_entries_as_html(logbook, entries):
+
+    """
+    Super basic "proof-of-concept" html export
+    No proper formatting, and does not embed images.
+    """
+
+#    export = ""
+    entries_html = [
+        """
+        <div><b>Created at:</b> {created_at}</div>
+        <div><b>Title:</b> {title}</div>
+        <div><b>Authors:</b> {authors}</div>
+        <div>{content}</div>
+        <hr/>
+        """.format(title=entry.title or "(No title)",
+                   authors=", ".join(a["name"] for a in entry.authors),
+                   created_at=entry.created_at,
+                   content=entry.content or "---")
+        for entry in entries
+    ]
+
+    with NamedTemporaryFile(prefix=slugify(logbook.name),
+                            suffix=".html",
+                            delete=False) as f:
+        f.write('<h1>{}</h1>'.format(logbook.name).encode('utf8'))
+        f.write('<div>{}</div><hr/>'.format(logbook.description).encode('utf8'))
+        for entry_html in entries_html:
+            f.write(entry_html.encode('utf8'))
+        f.close()
+    return f.name

backend/requirements.txt

@@ -14,6 +14,7 @@ peewee==2.10.2
 Pillow==5.0.0
 pyldap==2.4.45
 python-dateutil==2.6.1
+python-slugify==2.0.1
 pytz==2017.3
 six==1.11.0
 uWSGI==2.0.15

frontend/src/app.css

@@ -105,4 +105,17 @@ a {
     #entry .timestamp {
         display: block;
     }
+}
+
+.vertical-text {
+    writing-mode: tb-rl;
+    margin: 0px;
+}
+
+.showColumn{
+    margin: 5px;
+}
+.hiddenColumn{
+    background: #eee;
+    border-right: 1px solid #bbb;
 }

frontend/src/app.js

@@ -58,7 +58,7 @@ class NoEntry extends React.Component {
         console.log(this.props.match.location);
         return (
             <div className="empty">
-                <i className="fa fa-arrow-left" /> Select an entry to read it
+                <i className="fa fa-arrow-left" /> Select an entry to read it 
                 {logbookId ? (
                     <div>
                         {" "}
@@ -78,13 +78,61 @@ class NoEntry extends React.Component {
     }
 }
 
-const Elogy = () => (
+class HiddenColumn extends React.Component {
+
+    render() {
+        return (
+            <div className="hiddenColumn">
+                <a href="#">
+                    <i className="fa fa-plus showColumn"  onClick={() => this.props.show()}/>
+                </a>
+                <p className="vertical-text">{this.props.text}</p>
+            </div>
+        );
+    }
+}
+
+
+
+class Elogy extends React.Component {
+
+    constructor() {
+        super();
+        this.state = {
+            hideLogbookTree: false,
+            hideLogbook: false
+        };
+        this._hideLogbookTree = this._hideLogbookTree.bind(this);
+        this._hideLogbook = this._hideLogbook.bind(this);
+    }
+
+    componentDidMount() {
+        eventbus.subscribe("logbooktree.hide", this._hideLogbookTree);
+        eventbus.subscribe("logbook.hide", this._hideLogbook);
+    }
+
+    componentWillUnmount() {
+        eventbus.unsubscribe("logbooktree.hide", this._hideLogbookTree);
+        eventbus.unsubscribe("logbook.hide", this._hideLogbook);
+    }
+
+    _hideLogbookTree(hide) {
+        this.setState({hideLogbookTree: hide});
+    }
+
+    _hideLogbook(hide) {
+        this.setState({hideLogbook: hide});
+    }
+
+    render() { 
+
+    return (
     /* Set up a browser router that will render the correct component
        in the right places, all depending on the current URL.  */
 
     <Router>
         <div id="app">
-            <div id="logbooks">
+            {!this.state.hideLogbookTree ? <div id="logbooks">
                 <Switch>
                     <Route
                         path="/logbooks/:logbookId"
@@ -99,9 +147,9 @@ const Elogy = () => (
                     />
                     <Route component={QuickSearch} />
                 </Switch>
-            </div>
+            </div> : <HiddenColumn text={"Show LogbookTree"} show={this._hideLogbookTree.bind(this, false)}/>}
 
-            <div id="logbook">
+            {!this.state.hideLogbook ? <div id="logbook">
                 <Switch>
                     <Route
                         path="/logbooks/:logbookId/entries/:entryId"
@@ -113,7 +161,7 @@ const Elogy = () => (
                     />
                     <Route component={NoLogbook} />
                 </Switch>
-            </div>
+            </div> : <HiddenColumn text={"Show Logbook"} show={this._hideLogbook.bind(this, false)}/>}
 
             <div id="entry">
                 <Switch>
@@ -146,5 +194,6 @@ const Elogy = () => (
         </div>
     </Router>
 );
-
+}
+}
 export default Elogy;

frontend/src/logbook.css

@@ -21,6 +21,10 @@
     border-bottom: 1px solid #aaa;
 }
 
+#logbook header .commands {
+    float: right;
+}
+
 #logbook header .name {
     font-size: 120%;
     font-weight: bold;

frontend/src/logbook.js

@@ -188,6 +188,10 @@ class Logbook extends React.Component {
         this.props.history.push(`?sort_by=${sortBy}`);
     }
 
+    hide(){
+        this.props.eventbus.publish("logbook.hide", true);
+    }
+
     render() {
         const logbook = this.state.logbook,
             entryId = this.props.match.params.entryId
@@ -239,7 +243,12 @@ class Logbook extends React.Component {
                         <i className="fa fa-book" />
                         {logbook.id === 0 ? "[All logbooks]" : logbook.name}
                     </span>
-
+                    <div className="commands">
+                        <a href="#">
+                            <i className="fa fa-minus"  onClick={() => this.hide()}/>
+                        </a>
+                    &nbsp;
+                    </div>
                     <div>
                         {logbook.id ? (
                             <span>
@@ -264,6 +273,17 @@ class Logbook extends React.Component {
                                     Configure
                                 </Link>{" "}
                                 |&nbsp;
+                                <Link
+                                    to={{
+                                        pathname: `/api/logbooks/${logbook.id}/entries/?download=html`,
+                                        search: window.location.search
+                                    }}
+                                    title={`Export the logbook '${logbook.name}' to html`}
+                                    target="_blank"
+                                >
+                                    Export HTML
+                                </Link>{" "}
+                                |&nbsp;
                             </span>
                         ) : null}
                         <Link

frontend/src/logbookeditor.css

@@ -17,7 +17,6 @@
 
 #logbookeditor .attributes button {
     margin: 0;
-    padding: 0;
 }
 
 #logbookeditor .attribute label {