Add download links

Fix #3

Add download links
d60f67c6 · David Beniamine · ffa33faf · d60f67c6 · d60f67c6 · d60f67c6
Verified Commit d60f67c6 authored 5 years ago by David Beniamine
--- a/.gitignore
+++ b/.gitignore
 *.sw?
 .env
+node_modules/
--- a/Dockerfile
+++ b/Dockerfile
@@ -30,6 +30,7 @@ RUN apt-get install -y \
    apache2 \
    graphviz \
    libapache2-mod-wsgi-py3 \
+    npm \
    openjdk-11-jre \
    python-dev \
    python3-pip
@@ -51,4 +52,6 @@ RUN sed -i 's/^\(\s*MaxConnectionsPerChild\s*\) 0/\1 1/g' /etc/apache2/mods-enab

 WORKDIR /var/www/app/app

-ENTRYPOINT ["apache2ctl", "-DFOREGROUND"]
+COPY entrypoint.sh /
+
+ENTRYPOINT ["/entrypoint.sh"]
--- a/entrypoint.sh
+++ b/entrypoint.sh
+#!/bin/bash
+
+cd /var/www/app/app/static/
+npm install
+exec apache2ctl -DFOREGROUND
+
--- a/src/app/app.py
+++ b/src/app/app.py
@@ -65,15 +65,17 @@ def convertUnl(unl, outputs):
    if 'dot' in outputs:
        try:
            fname = '{}/{}.dot'.format(out_dir, out_name)
+            with open(fname, 'r') as f:
+                res['dot'] = f.read()
            cmd = ['dot', '-Tsvg', fname]
            with Popen(cmd, stdout=PIPE, stderr=PIPE) as p:
                p.wait()
                if p.returncode != 0:
                    res['error'] += "Dot: \n\n"+p.stderr.read().decode()
                else:
-                    res['dot'] = p.stdout.read().decode()
+                    res['svg'] = p.stdout.read().decode()
                os.remove(fname)
        except FileNotFoundError:
-            res['dot'] = 'Error : no dot file'
+            res['svg'] = 'Error : no dot file'

    return res
--- a/src/app/static/css/app.css
+++ b/src/app/static/css/app.css
+.hidden {
+    display:none;
+}
+
+.clickable {
+    cursor: pointer;
+    text-decoration: underline;
+    color: #0056b3;
+}
--- a/src/app/static/css/bootstrap.min.css
+++ b/src/app/static/css/bootstrap.min.css
--- a/src/app/static/js/app.js
+++ b/src/app/static/js/app.js
+function download(filename, id, mode, mime) {
+  var element = document.createElement('a');
+    var selector = document.getElementById(id)
+  if (mode != "text") {
+    var contents = selector.innerHTML
+  } else {
+    var contents = selector.textContent
+  }
+  var file = new File([contents], filename, {type: mime});
+  saveAs(file);
+}
--- a/src/app/static/package-lock.json
+++ b/src/app/static/package-lock.json
+{
+  "name": "unl-web-demo",
+  "version": "1.0.0",
+  "lockfileVersion": 1,
+  "requires": true,
+  "dependencies": {
+    "@fortawesome/fontawesome-free": {
+      "version": "5.13.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-5.13.0.tgz",
+      "integrity": "sha512-xKOeQEl5O47GPZYIMToj6uuA2syyFlq9EMSl2ui0uytjY9xbe8XS0pexNWmxrdcCyNGyDmLyYw5FtKsalBUeOg=="
+    },
+    "bootstrap": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.4.1.tgz",
+      "integrity": "sha512-tbx5cHubwE6e2ZG7nqM3g/FZ5PQEDMWmMGNrCUBVRPHXTJaH7CBDdsLeu3eCh3B1tzAxTnAbtmrzvWEvT2NNEA=="
+    },
+    "file-saver": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/file-saver/-/file-saver-2.0.2.tgz",
+      "integrity": "sha512-Wz3c3XQ5xroCxd1G8b7yL0Ehkf0TC9oYC6buPFkNnU9EnaPlifeAFCyCh+iewXTyFRcg0a6j3J7FmJsIhlhBdw=="
+    }
+  }
+}
--- a/src/app/static/package.json
+++ b/src/app/static/package.json
+{
+  "name": "unl-web-demo",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "@fortawesome/fontawesome-free": "^5.13.0",
+    "bootstrap": "^4.4.1",
+    "file-saver": "^2.0.2"
+  }
+}
--- a/src/app/templates/base.html
+++ b/src/app/templates/base.html
@@ -2,7 +2,11 @@
 <html lang="en">
 <head>
    {% block head %}
-    <link href="{{ url_for('static', filename='css/bootstrap.min.css') }}" rel="stylesheet">
+    <link href="{{ url_for('static', filename='node_modules/bootstrap/dist/css/bootstrap.min.css') }}" rel="stylesheet">
+    <link href="{{ url_for('static', filename='node_modules/@fortawesome/fontawesome-free/css/all.min.css') }}" rel="stylesheet">
+    <script src="{{ url_for('static', filename='node_modules/file-saver/dist/FileSaver.min.js')}}"></script>
+    <link href="{{ url_for('static', filename='css/app.css') }}" rel="stylesheet">
+    <script src="{{ url_for('static', filename='js/app.js') }}" ></script>
    <title>{% block title %}{% endblock %}</title>
    {% endblock %}
 </head>

--- a/src/app/templates/unl2rdf.html
+++ b/src/app/templates/unl2rdf.html
@@ -58,23 +58,36 @@ obj(when(icl>how,com>always,tim<uw,obj>uw),:01)
        </pre>
    {% endif %}

-    {% if output['dot'] %}
+    {% if output['svg'] %}
        <h2> Unl graph </h2>
-        {{ output['dot'] | safe }}
+        <span class='clickable' onclick="download('graph.svg', 'svg', 'html', 'image/svg+xml')">Download image <i class="fas fa-download" ></i></span><br />
+        <span class='clickable' onclick="download('graph.svg', 'dot', 'text', 'text/plain;charset=utf-8')">Download source <i class="fas fa-download" ></i></span>
+        <div id='svg'>
+        {{ output['svg'] | safe }}
+        </div>
+        <div class='hidden'>
+            <pre>
+            <code id='dot'>
+            {{ output['dot'] }}
+            </code>
+            </pre>
+        </div>
    {% endif %}

    {% if output['rdf'] %}
        <h2> RDF </h2>
+        <span class='clickable' onclick="download('out.ttl', 'rdf', 'text', 'application/x-turtle')">Download <i class="fas fa-download" ></i></span>
        <pre>
-            <code>
+            <code id='rdf'>
                {{ output['rdf'] }}
            </code>
        </pre>
    {% endif %}

    <h2> UNL </h2>
+    <span class='clickable' onclick="download('in.unl', 'unl', 'text', 'text/plain;charset=utf-8')">Download <i class="fas fa-download" ></i></span>
    <pre>
-        <code>
+        <code id='unl'>
            {{ unl }}
        </code>
    </pre>