From 9308618e63e45b413c952576dcbcb6783ce0b0c4 Mon Sep 17 00:00:00 2001
From: Patrick Jentsch <p.jentsch@uni-bielefeld.de>
Date: Thu, 18 Nov 2021 12:09:15 +0100
Subject: [PATCH] New faq and service desk

---
 .env.tpl                                 |   6 -
 app/main/routes.py                       |   7 +-
 app/templates/_footer.html.j2            |   9 +-
 app/templates/main/_breadcrumbs.html.j2  |   4 +-
 app/templates/main/about_and_faq.html.j2 | 266 -----------------------
 app/templates/main/faq.html.j2           |  56 +++++
 config.py                                |   2 +-
 7 files changed, 66 insertions(+), 284 deletions(-)
 delete mode 100644 app/templates/main/about_and_faq.html.j2
 create mode 100644 app/templates/main/faq.html.j2

diff --git a/.env.tpl b/.env.tpl
index fc3649ed..e225c003 100644
--- a/.env.tpl
+++ b/.env.tpl
@@ -104,12 +104,6 @@ MAIL_USERNAME=
 # EXAMPLE: admin.nopaque@example.com
 NOPAQUE_ADMIN=
 
-# This email adress is used for the contact button in the nopaque footer. If
-# not set, no contact button is displayed.
-# DEFAULT: None
-# EXAMPLE: contact.nopaque@example.com
-# NOPAQUE_CONTACT=
-
 # DEFAULT: /mnt/nopaque
 # NOTE: This must be a network share and it must be available on all Docker
 #       Swarm nodes
diff --git a/app/main/routes.py b/app/main/routes.py
index 9edf5b99..a817362f 100644
--- a/app/main/routes.py
+++ b/app/main/routes.py
@@ -19,9 +19,10 @@ def index():
     return render_template('main/index.html.j2', form=form, title='nopaque')
 
 
-@bp.route('/about_and_faq')
-def about_and_faq():
-    return render_template('main/about_and_faq.html.j2', title='About and faq')
+@bp.route('/faq')
+def faq():
+    return render_template('main/faq.html.j2',
+                           title='Frequently Asked Questions')
 
 
 @bp.route('/dashboard')
diff --git a/app/templates/_footer.html.j2 b/app/templates/_footer.html.j2
index 4938c574..c03f795b 100644
--- a/app/templates/_footer.html.j2
+++ b/app/templates/_footer.html.j2
@@ -28,12 +28,9 @@
         <span>© 2020 Bielefeld University</span>
       </div>
       <div class="col s12 m9 right-align">
-        <a class="btn-small blue waves-effect waves-light" href="{{ url_for('main.about_and_faq') }}"><i class="left material-icons">info_outline</i>About and faq</a>
-        {% if config.NOPAQUE_CONTACT %}
-        <a class="btn-small pink waves-effect waves-light" href="mailto:{{ config.NOPAQUE_CONTACT }}?subject={{ config.NOPAQUE_MAIL_SUBJECT_PREFIX }} Contact"><i class="left material-icons">rate_review</i>Contact</a>
-        <a class="btn-small green waves-effect waves-light" href="mailto:{{ config.NOPAQUE_CONTACT }}?subject={{ config.NOPAQUE_MAIL_SUBJECT_PREFIX }} Feedback"><i class="left material-icons">feedback</i>Feedback</a>
-        {% endif %}
-        <a class="btn-small orange waves-effect waves-light" href="https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque"><i class="left material-icons">code</i>GitLab</a>
+        <a class="btn-small primary-variant-color waves-effect waves-light" href="{{ url_for('main.faq') }}"><i class="left material-icons">info_outline</i>Frequently Asked Questions</a>
+        <a class="btn-small primary-variant-color waves-effect waves-light" href="mailto:{{ config.NOPAQUE_SERVICE_DESK }}"><i class="left material-icons">mail</i>Report an issue</a>
+        <a class="btn-small primary-variant-color waves-effect waves-light" href="https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque" target="_blank"><i class="left material-icons">code</i>GitLab</a>
       </div>
     </div>
   </div>
diff --git a/app/templates/main/_breadcrumbs.html.j2 b/app/templates/main/_breadcrumbs.html.j2
index cd66b2ff..d65978d6 100644
--- a/app/templates/main/_breadcrumbs.html.j2
+++ b/app/templates/main/_breadcrumbs.html.j2
@@ -2,8 +2,8 @@
 {% if not (request.path == url_for('.index')) %}
 <li class="tab disabled"><i class="material-icons">navigate_next</i></li>
 {% endif %}
-{% if request.path == url_for('.about_and_faq') %}
-<li class="tab"><a class="active" href="{{ url_for('.about_and_faq') }}" target="_self">About and faq</a></li>
+{% if request.path == url_for('.faq') %}
+<li class="tab"><a class="active" href="{{ url_for('.faq') }}" target="_self">Frequently Asked Questions</a></li>
 {% elif request.path == url_for('.dashboard') %}
 <li class="tab"><a class="active" href="{{ url_for('.dashboard') }}" target="_self">Dashboard</a></li>
 {% elif request.path == url_for('.news') %}
diff --git a/app/templates/main/about_and_faq.html.j2 b/app/templates/main/about_and_faq.html.j2
deleted file mode 100644
index caea7e37..00000000
--- a/app/templates/main/about_and_faq.html.j2
+++ /dev/null
@@ -1,266 +0,0 @@
-{% extends "base.html.j2" %}
-{% from "main/_breadcrumbs.html.j2" import breadcrumbs with context %}
-
-{% block page_content %}
-<div class="container">
-  <div class="row">
-    <div class="col s12">
-      <h1 id="title">{{ title }}</h1>
-    </div>
-
-    <div class="col s12">
-      <div class="card">
-        <div class="card-content">
-          <span class="card-title">What is nopaque</span>
-          <p>
-            Our web application nopaque combines coordinated tools such as Optical
-            Character Recognition (OCR), Natrual Language Processing (NLP) and a
-            powerful Keyword In Context Search (KWIC) with the CQP query language.
-          </p>
-          <br>
-          <p>
-            nopaque offers the possibility to use all tools individually or as a
-            workflow. All work steps are coordinated in such a way that individual
-            services can be used on top of each other. The platform supports
-            researchers in converting their files into formats that can be further
-            processed, automatically enriching them with information and then
-            analyzing them, so that nopaque maps a large part of the research
-            processes in the humanities. With this toolbox we address researchers
-            in the humanities from all disciplines and levels of knowledge.
-            The data generated during the processes can be downloaded after each
-            step in order to evaluate or further process them with other (external) tools.
-          </p>
-        </div>
-      </div>
-    </div>
-
-    <div class="col s12">
-      <ul class="collapsible">
-        <li>
-          <div class="collapsible-header">1. Who is developing nopaque?</div>
-          <div class="collapsible-body">
-            <span>
-              <p>
-                <em>nopaque</em> is developed by a small, interdisciplinary Team at
-                <em>University Bielefeld</em> called <em>Data Infrastructure and
-                Digital Humanities (INF)</em>. We are part of the <em>SFB 1288 -
-                Practices of comparing. Ordering and changing the world</em>.
-              </p>
-              <p>For mor information <a href="https://www.uni-bielefeld.de/(en)/sfb1288/">
-                visit the SFB1288 web site</a> or
-                <a href="https://www.uni-bielefeld.de/(en)/sfb1288/projekte/inf.html">
-                  our team page</a>.
-              </p>
-            </span>
-          </div>
-        </li>
-        <li>
-          <div class="collapsible-header">2. Is nopaque free to use for everyone?</div>
-          <div class="collapsible-body">
-            <span>
-              <p>
-                Yes nopaque is free to use for everyone! It does not matter if you
-                are a researcher in the humanities, a student or just someone who
-                wants to learn something new. Just <a href="http://nopaque.localhost/auth/register">
-                sign up for it</a> and try it out!
-              </p>
-            </span>
-          </div>
-        </li>
-        <li>
-          <div class="collapsible-header">3. How much does it cost to use nopaque?</div>
-          <div class="collapsible-body">
-            <span>nopaque and the services provided by it are free of charge.</span>
-          </div>
-        <li>
-        <li>
-          <div class="collapsible-header">4. Why is nopaque written in lower case?</div>
-          <div class="collapsible-body">
-            <span>We just think that nopaque with a lower case first letter looks
-              better than Nopaque with an upper case first letter. Simple as that!
-            </span>
-          </div>
-        <li>
-        <li>
-          <div class="collapsible-header">5. Why the name nopaque?</div>
-          <div class="collapsible-body">
-            <span>
-              <p>
-                When we started developing nopaque we wanted to have a cool name
-                like <a href="https://voyant-tools.org/">voyant</a> which can be translated
-                to light or seeing. So we choose opaque thinking that it means that
-                something is transparent. After a while we realized that we misunderstood
-                the meaning of the word (opaque means non-transparent) and simply
-                negated it ending up with nopaque.
-              </p>
-              <p>
-                We also think nopaque fits pretty nicley because we want you to be
-                able to make your texts transparent and see through them with our
-                analysis tool to gain knew knowledge about them.
-              </p>
-              </span>
-          </div>
-        <li>
-          <div class="collapsible-header">6. Is nopaque FOSS/Open Source?</div>
-          <div class="collapsible-body">
-            <span>Yes nopaque only uses free and open source software (FOSS). You
-              can find the <a href="https://gitlab.ub.uni-bielefeld.de/sfb1288inf/opaque">
-              source code in our gitlab repository</a>.
-              </span>
-          </div>
-        </li>
-        <li>
-          <div class="collapsible-header">7. What software/technologies is nopaque using/build with?</div>
-          <div class="collapsible-body">
-            <span>
-              <p>
-                nopaques frontend (what the user sees) is written in HTML 5
-                and Javascript. The backend (stuff that happens on our servers)
-                is realized with <a href="https://palletsprojects.com/p/flask/">
-                Flask</a>, a python based lightweight WSGI web application
-                framework. We utilize <a href="https://www.docker.com/">Docker</a>
-                to easily deploy nopaque on our servers.
-              </p>
-              <p>
-                The client server real time comminication is implemented using
-                <a href="https://flask-socketio.readthedocs.io/en/latest/">Flask-SocketIO</a>.
-              </p>
-              <p>Every service (e.g. OCR or NLP) provided by nopaque is using
-                established opensource software. Take a look at their related
-                questions to learn more about them.</p>
-              <p>
-                For more details take a look at the
-                <a href="https://gitlab.ub.uni-bielefeld.de/sfb1288inf/opaque">source code</a>.
-              </p>
-            </span>
-          </div>
-        </li>
-        <li>
-          <div class="collapsible-header">8. What software/technology is used for the File Setup service?</div>
-          <div class="collapsible-body">
-            <span>
-              <p>
-                The File Setup service uses <a href="https://imagemagick.org/index.php">ImageMagick</a>
-                to merge your images into one file.
-              </p>
-              <p>
-                For more details take a look at the
-                <a href="https://gitlab.ub.uni-bielefeld.de/sfb1288inf/file-setup">source code</a>.
-              </p>
-            </span>
-        <li>
-          <div class="collapsible-header">9. What software/technology is used for the OCR service?</div>
-          <div class="collapsible-body">
-            <span>
-              <p>
-                The OCR service uses <a href="https://github.com/tesseract-ocr/tesseract">Tesseract OCR.</a>
-              </p>
-              <p>
-                For more details take a look at the
-                <a href="https://gitlab.ub.uni-bielefeld.de/sfb1288inf/ocr">source code</a>.
-              </p>
-            </span>
-          </div>
-        </li>
-        <li>
-          <div class="collapsible-header">10. What software/technology is used for the NLP service?</div>
-          <div class="collapsible-body">
-            <span>
-              <p>
-                The NLP service uses <a href="https://spacy.io/">spaCy</a>.
-              </p>
-              <p>
-                For more details take a look at the
-                <a href="https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nlp">source code</a>.
-              </p>
-            </span>
-          </div>
-        </li>
-        <li>
-          <div class="collapsible-header">11. What software/technology is used for the Analysis service?</div>
-          <div class="collapsible-body">
-            <span>
-              <p>
-                The Corpus Analysis service uses the <a href="http://cwb.sourceforge.net/">
-                IMS Open Corpus Workbench (CWB).</a> We developed a Python
-                library for the IMS Open Corpus Workbench (CWB) corpus query
-                interface (CQi) API to be able to request query results from the CWB
-                server using simple Python code. The library is
-                <a href="https://pypi.org/project/cqi/">avilable on PyPi.</a>
-              </p>
-              <p>
-                For more details take a look at the
-                <a href="https://gitlab.ub.uni-bielefeld.de/sfb1288inf/cqpweb">source code</a>.
-              </p>
-            </span>
-          </div>
-        <li>
-          <div class="collapsible-header">12. Can I download/export my results and processed files?</div>
-          <div class="collapsible-body">
-            <span>
-              <p>
-                Yes. You can download everything that is the result of a service
-                and save it somwhere else. You can download your results depending
-                on the service in easily reusable formats like TXT, PDF, JSON, XML
-                and many more. This also empowers you to use your results in other
-                third party software to continue you research beyond the capabiltiys
-                of nopaque.
-              </p>
-            </span>
-          </div>
-        </li>
-        <li>
-          <div class="collapsible-header">13. Is my research data private?</div>
-          <div class="collapsible-body">
-            <span>
-              <p>
-                Your uploaded research data cannot be accessed by any third party.
-                Take a look at our <a href="http://nopaque.localhost/privacy_policy">GDPR</a>
-                statement and <a href="http://nopaque.localhost/terms_of_use">terms of use</a>
-                if you want to learn more about how we handle your data.
-              <p>
-            </span>
-          </div>
-        </li>
-        <li>
-          <div class="collapsible-header">14. Could I use nopaque as a permant storage for my research data?</div>
-          <div class="collapsible-body">
-            <span>
-              <p>
-                nopaque saves your research data in theory as long as your account
-                exists. But nopaque is not a cloud storage solution! We encourage
-                you to permanently save your data somwhere else.
-              </p>
-            </span>
-          </div>
-        </li>
-        <li>
-          <div class="collapsible-header">15. What does OCR mean?</div>
-          <div class="collapsible-body">
-            <span>
-              <p>
-                OCR stands for Optical Character Recognition. OCR is the automatical
-                conversion of images of handwritten or printed text into machine-encoded text.
-              </p>
-            </span>
-          </div>
-        </li>
-        <li>
-          <div class="collapsible-header">16. What does NLP mean?</div>
-          <div class="collapsible-body">
-            <span>
-              <p>
-                NLP stands for natural language processing wich is a subfield of
-                linguistics, computer science and artificial intelligence concerned
-                with the interactions between computers and human language.
-                For example nopaque uses spaCy to automtically tag every word with
-                its part of speech tag which describes its grammatical property.
-              </p>
-            </span>
-          </div>
-        </li>
-      </ul>
-    </div>
-  </div>
-</div>
-{% endblock %}
diff --git a/app/templates/main/faq.html.j2 b/app/templates/main/faq.html.j2
new file mode 100644
index 00000000..308534d2
--- /dev/null
+++ b/app/templates/main/faq.html.j2
@@ -0,0 +1,56 @@
+{% extends "base.html.j2" %}
+{% from "main/_breadcrumbs.html.j2" import breadcrumbs with context %}
+
+{% block page_content %}
+<div class="container">
+  <div class="row">
+    <div class="col s12">
+      <h1 id="title">{{ title }}</h1>
+    </div>
+
+    <div class="col s12">
+      <ul class="collapsible">
+        <li>
+          <div class="collapsible-header">Who is developing nopaque?</div>
+          <div class="collapsible-body">
+            <p>nopaque is developed by a small, interdisciplinary Team at University Bielefeld called Data Infrastructure and Digital Humanities (INF). We are part of the SFB 1288 - Practices of comparing. Ordering and changing the world.</p>
+          </div>
+        </li>
+        <li>
+          <div class="collapsible-header">Why the name nopaque?</div>
+          <div class="collapsible-body">
+            <p>When we started developing nopaque we wanted to have a cool name like Voyant Tools which can be translated to light or seeing. So we choose opaque thinking that it means that something is transparent. After a while we realized that we misunderstood the meaning of the word (opaque means non-transparent) and simply negated it ending up with nopaque.</p>
+            <p>We also think nopaque fits pretty nicley because we want you to be able to make your texts transparent and see through them with our analysis tool to gain new knowledge about them.</p>
+          </div>
+        </li>
+        <li>
+          <div class="collapsible-header">Is nopaque free to use for everyone?</div>
+          <div class="collapsible-body">
+            <p>Yes nopaque is free to use for everyone! It does not matter if you are a researcher in the humanities, a student or just someone who wants to learn something new.</p>
+          </div>
+        <li>
+        <li>
+          <div class="collapsible-header">Where can i find nopaque's source code?</div>
+          <div class="collapsible-body">
+            <p>Our source code is spread over multiple Git repositories.</p>
+            <ul>
+              <li>nopaque frontend: <a href="https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque" target="_blank">https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque</a></li>
+              <li>File setup: <a href="https://gitlab.ub.uni-bielefeld.de/sfb1288inf/file-setup" target="_blank">https://gitlab.ub.uni-bielefeld.de/sfb1288inf/file-setup</a></li>
+              <li>OCR: <a href="https://gitlab.ub.uni-bielefeld.de/sfb1288inf/ocr" target="_blank">https://gitlab.ub.uni-bielefeld.de/sfb1288inf/ocr</a></li>
+              <li>NLP: <a href="https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nlp" target="_blank">https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nlp</a></li>
+              <li>Corpus analysis backend: <a href="https://gitlab.ub.uni-bielefeld.de/sfb1288inf/cqpserver" target="_blank">https://gitlab.ub.uni-bielefeld.de/sfb1288inf/cqpserver</a></li>
+              <li>Corpus analysis backend connector:  <a href="https://github.com/Pevtrick/cqi-py" target="_blank">https://github.com/Pevtrick/cqi-py</a></li>
+            </ul>
+          </div>
+        <li>
+        <li>
+          <div class="collapsible-header">Could I use nopaque as a permant storage for my research data?</div>
+          <div class="collapsible-body">
+            <p>nopaque saves your research data in theory as long as your account exists. But nopaque is not a cloud storage solution! We encourage you to permanently save your data somwhere else.</p>
+          </div>
+        </li>
+      </ul>
+    </div>
+  </div>
+</div>
+{% endblock %}
diff --git a/config.py b/config.py
index ec143c03..06c48173 100644
--- a/config.py
+++ b/config.py
@@ -43,7 +43,6 @@ class Config:
 
     ''' # nopaque # '''
     NOPAQUE_ADMIN = os.environ.get('NOPAQUE_ADMIN')
-    NOPAQUE_CONTACT = os.environ.get('NOPAQUE_CONTACT')
     NOPAQUE_DAEMON_ENABLED = \
         os.environ.get('NOPAQUE_DAEMON_ENABLED', 'true').lower() == 'true'
     NOPAQUE_DATA_DIR = os.environ.get('NOPAQUE_DATA_DIR', '/mnt/nopaque')
@@ -54,6 +53,7 @@ class Config:
     NOPAQUE_DOCKER_REGISTRY_PASSWORD = \
         os.environ.get('NOPAQUE_DOCKER_REGISTRY_PASSWORD')
     NOPAQUE_MAIL_SUBJECT_PREFIX = '[nopaque]'
+    NOPAQUE_SERVICE_DESK = 'gitlab-ub-incoming+sfb1288inf-nopaque-1324-issue-@jura.uni-bielefeld.de'  # noqa
     NOPAQUE_SOCKETIO_MESSAGE_QUEUE_URI = \
         os.environ.get('NOPAQUE_SOCKETIO_MESSAGE_QUEUE_URI')
 
-- 
GitLab