From b0607910573cb28684f0d77b7864997a2e15f6b2 Mon Sep 17 00:00:00 2001
From: Patrick Jentsch <pjentsch@sfb1288inf-Notebook.fritz.box>
Date: Mon, 2 Nov 2020 13:06:37 +0100
Subject: [PATCH] Add Roadmap

---
 web/app/templates/_roadmap.html.j2 | 28 -----------------------
 web/app/templates/nopaque.html.j2  | 36 +++++++++++++++++++++++++++++-
 2 files changed, 35 insertions(+), 29 deletions(-)
 delete mode 100644 web/app/templates/_roadmap.html.j2

diff --git a/web/app/templates/_roadmap.html.j2 b/web/app/templates/_roadmap.html.j2
deleted file mode 100644
index da756093..00000000
--- a/web/app/templates/_roadmap.html.j2
+++ /dev/null
@@ -1,28 +0,0 @@
-{% if current_user.is_authenticated %}
-<ul class="tabs tabs-transparent">
-  <li class="tab disabled"><a><i class="material-icons left">explore</i>Roadmap</a></li>
-  <li class="tab"><a{%if request.path == url_for('services.service', service='file-setup') %} class="active"{% endif %} href="{{ url_for('services.service', service='file-setup') }}" target="_self">File setup</a></li>
-  <li class="tab disabled"><i class="material-icons">navigate_next</i></li>
-  <li class="tab"><a{%if request.path == url_for('services.service', service='ocr') %} class="active"{% endif %} href="{{ url_for('services.service', service='ocr') }}" target="_self">OCR</a></li>
-  <li class="tab disabled"><i class="material-icons">navigate_next</i></li>
-  <li class="tab"><a{%if request.path == url_for('services.service', service='nlp') %} class="active"{% endif %} href="{{ url_for('services.service', service='nlp') }}" target="_self">NLP</a></li>
-  <li class="tab disabled"><i class="material-icons">navigate_next</i></li>
-  <li class="tab"><a{%if request.path == url_for('corpora.add_corpus') %} class="active"{% endif %} href="{{ url_for('corpora.add_corpus') }}" target="_self">Add corpus</a></li>
-  <li class="tab disabled"><i class="material-icons">navigate_next</i></li>
-  {% if corpus %}
-  <li class="tab"><a{%if request.path == url_for('corpora.add_corpus_file', corpus_id=corpus.id) %} class="active"{% endif %} href="{{ url_for('corpora.add_corpus_file', corpus_id=corpus.id) }}" target="_self">Add corpus file(s)</a></li>
-  {% else %}
-  <li class="tab disabled tooltipped" data-tooltip="Select a corpus first"><a>Add corpus file(s)</a></li>
-  {% endif %}
-  <li class="tab disabled"><i class="material-icons">navigate_next</i></li>
-  {% if corpus %}
-  {% if corpus.files.all() %}
-  <li class="tab"><a{%if request.path == url_for('corpora.analyse_corpus', corpus_id=corpus.id) %} class="active"{% endif %} href="{{ url_for('corpora.analyse_corpus', corpus_id=corpus.id) }}" target="_self">Corpus analysis</a></li>
-  {% else %}
-  <li class="tab disabled tooltipped" data-tooltip="Add at least one corpus file first"><a>Corpus analysis</a></li>
-  {% endif %}
-  {% else %}
-  <li class="tab disabled tooltipped" data-tooltip="Select a corpus first"><a>Corpus analysis</a></li>
-  {% endif %}
-</ul>
-{% endif %}
diff --git a/web/app/templates/nopaque.html.j2 b/web/app/templates/nopaque.html.j2
index 5b9a600b..af54a719 100644
--- a/web/app/templates/nopaque.html.j2
+++ b/web/app/templates/nopaque.html.j2
@@ -100,6 +100,9 @@
     </div>
     <div class="nav-content">
       {% block nav_content %}{% endblock nav_content %}
+      {% if current_user.is_authenticated %}
+      <a class="btn-floating btn-large halfway-fab modal-trigger tooltipped waves-effect waves-light" data-tooltip="Roadmap" href="#roadmap-modal"><i class="material-icons">explore</i></a>
+      {% endif %}
     </div>
   </nav>
 </div>
@@ -153,7 +156,38 @@
 {% block main_attribs %} class="grey lighten-5"{% endblock main_attribs %}
 
 {% block main %}
-  {% block page_content %}{% endblock page_content %}
+{% block page_content %}{% endblock page_content %}
+{% if current_user.is_authenticated %}
+<div id="roadmap-modal" class="modal">
+  <div class="modal-content">
+    <h2><i class="material-icons">explore</i>Roadmap</h2>
+    <p>The roadmap guides you through nopaque's workflow! If you have the necessary input fie formats, you can directly jump into the corresponding process. If not, you can use the roadmap to jump right to the preceding process.</p>
+    <ul class="tabs tabs-fixed-width">
+      <li class="tab"><a{%if request.path == url_for('services.service', service='file-setup') %} class="active"{% endif %} href="{{ url_for('services.service', service='file-setup') }}" target="_self">File setup</a></li>
+      <li class="tab"><a{%if request.path == url_for('services.service', service='ocr') %} class="active"{% endif %} href="{{ url_for('services.service', service='ocr') }}" target="_self">OCR</a></li>
+      <li class="tab"><a{%if request.path == url_for('services.service', service='nlp') %} class="active"{% endif %} href="{{ url_for('services.service', service='nlp') }}" target="_self">NLP</a></li>
+      <li class="tab"><a{%if request.path == url_for('corpora.add_corpus') %} class="active"{% endif %} href="{{ url_for('corpora.add_corpus') }}" target="_self">Add corpus</a></li>
+      {% if corpus %}
+      <li class="tab"><a{%if request.path == url_for('corpora.add_corpus_file', corpus_id=corpus.id) %} class="active"{% endif %} href="{{ url_for('corpora.add_corpus_file', corpus_id=corpus.id) }}" target="_self">Add corpus file(s)</a></li>
+      {% else %}
+      <li class="tab disabled tooltipped" data-tooltip="Select a corpus first" target="_self"><a>Add corpus file(s)</a></li>
+      {% endif %}
+      {% if corpus %}
+      {% if corpus.files.all() %}
+      <li class="tab"><a{%if request.path == url_for('corpora.analyse_corpus', corpus_id=corpus.id) %} class="active"{% endif %} href="{{ url_for('corpora.analyse_corpus', corpus_id=corpus.id) }}" target="_self">Corpus analysis</a></li>
+      {% else %}
+      <li class="tab disabled tooltipped" data-tooltip="Add at least one corpus file first"><a>Corpus analysis</a></li>
+      {% endif %}
+      {% else %}
+      <li class="tab disabled tooltipped" data-tooltip="Select a corpus first"><a>Corpus analysis</a></li>
+      {% endif %}
+    </ul>
+  </div>
+  <div class="modal-footer">
+    <a href="#!" class="modal-close waves-effect waves-green btn-flat">Close</a>
+  </div>
+</div>
+{% endif %}
 {% endblock main %}
 
 {% block footer_attribs %} class="page-footer footer-color"{% endblock footer_attribs %}