From c79bc1ed5735f261681c65cba213308e2e37f4d3 Mon Sep 17 00:00:00 2001
From: Patrick Jentsch <p.jentsch@uni-bielefeld.de>
Date: Wed, 21 Dec 2022 14:34:53 +0100
Subject: [PATCH] Update Dashboard2

---
 app/static/js/RessourceLists/RessourceList.js |   5 +-
 app/templates/_scripts.html.j2                |   1 -
 app/templates/main/dashboard2.html.j2         | 116 ++++++++++++++++--
 3 files changed, 108 insertions(+), 14 deletions(-)

diff --git a/app/static/js/RessourceLists/RessourceList.js b/app/static/js/RessourceLists/RessourceList.js
index e53367fd..e1f47f2f 100644
--- a/app/static/js/RessourceLists/RessourceList.js
+++ b/app/static/js/RessourceLists/RessourceList.js
@@ -10,14 +10,13 @@ class RessourceList {
     JobList.autoInit();
     JobInputList.autoInit();
     JobResultList.autoInit();
-    PublicCorporaList.autoInit();
     PublicUserList.autoInit();
     SpaCyNLPPipelineModelList.autoInit();
     TesseractOCRPipelineModelList.autoInit();
     UserList.autoInit();
   }
 
-  static options = {page: 5, pagination: {innerWindow: 4, outerWindow: 1}};
+  static options = {page: 5, pagination: {innerWindow: 2, outerWindow: 2}};
 
   constructor(listElement, options = {}) {
     if (!(listElement.hasAttribute('id'))) {
@@ -29,7 +28,7 @@ class RessourceList {
       }
     }
     options = {
-      ...{pagination: {item: `<li><a class="page" href="#${listElement.id}"></a></li>`}},
+      ...RessourceList.options,
       ...options
     }
     if ('ressourceMapper' in options && typeof options.ressourceMapper === 'function') {
diff --git a/app/templates/_scripts.html.j2 b/app/templates/_scripts.html.j2
index 84b03e62..b86d4cdb 100644
--- a/app/templates/_scripts.html.j2
+++ b/app/templates/_scripts.html.j2
@@ -24,7 +24,6 @@
   'js/RessourceLists/JobList.js',
   'js/RessourceLists/JobInputList.js',
   'js/RessourceLists/JobResultList.js',
-  'js/RessourceLists/PublicCorporaList.js',
   'js/RessourceLists/PublicUserList.js',
   'js/RessourceLists/SpacyNLPPipelineModelList.js',
   'js/RessourceLists/TesseractOCRPipelineModelList.js',
diff --git a/app/templates/main/dashboard2.html.j2 b/app/templates/main/dashboard2.html.j2
index 47a7e236..c03834e3 100644
--- a/app/templates/main/dashboard2.html.j2
+++ b/app/templates/main/dashboard2.html.j2
@@ -2,6 +2,25 @@
 {% from "main/_breadcrumbs.html.j2" import breadcrumbs with context %}
 
 {% block page_content %}
+<div class="section scrollspy" id="dashboard">
+  <div class="row">
+    <div class="col s1"></div>
+    <div class="col s11">
+      <h1 id="title">Dashboard</h1>
+    </div>
+    <div class="col s1"></div>
+    <div class="col s3">
+      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
+    </div>
+    <div class="col s8">
+      <a class="btn waves-effect waves-light" href="#my-corpora"><i class="nopaque-icons left">I</i>My Corpora</a>
+      <a class="btn waves-effect waves-light" href="#my-jobs"><i class="nopaque-icons left">J</i>My Jobs</a>
+      <a class="btn waves-effect waves-light" href="#my-groups"><i class="material-icons left">groups</i>My Groups</a>
+    </div>
+  </div>
+</div>
+
+
 <div class="corpus-list no-autoinit" id="corpus-list" data-user-id="{{ current_user.hashid }}">
   <div class="parallax-container">
     <div class="parallax"><img src="{{ url_for('static', filename='images/parallax_hq/canvas.png') }}"></div>
@@ -18,15 +37,15 @@
     </div>
   </div>
 
-  <div class="section">
+  <div class="section scrollspy" id="my-corpora">
     <div class="row">
       <div class="col s1"></div>
-      <div class="col s3">
-          <h2 id="corpora">My Corpora</h1>
-          <p>Create a corpus to interactively perform linguistic analysis.</p>
-          <p>Or browse our users public corpora.<span class="new badge"></span></p>
+      <div class="col s2">
+        <h2>My Corpora</h2>
+        <p>Create a corpus to interactively perform linguistic analysis.</p>
+        <p>Or browse our users public corpora.<span class="new badge"></span></p>
       </div>
-      <div class="col s7">
+      <div class="col s6">
         <div class="card">
           <div class="card-content">
             <div>
@@ -50,6 +69,15 @@
           </div>
         </div>
       </div>
+      <div class="col s1"></div>
+      <div class="col s2">
+        <ul class="section table-of-contents">
+          <li><a href="#dashboard">Dashboard</a></li>
+          <li><a href="#my-corpora">My Corpora</a></li>
+          <li><a href="#my-jobs">My Jobs</a></li>
+          <li><a href="#my-groups">My Groups</a></li>
+        </ul>
+      </div>
     </div>
   </div>
 </div>
@@ -70,11 +98,11 @@
     </div>
   </div>
 
-  <div class="section">
+  <div class="section scrollspy" id="my-jobs">
     <div class="row">
       <div class="col s1"></div>
-      <div class="col s3">
-        <h2 id="jobs">My Jobs</h1>
+      <div class="col s2">
+        <h2>My Jobs</h2>
         <p>
           A job is the execution of a service provided by nopaque. You can
           create any number of jobs and let them be processed simultaneously. We
@@ -85,7 +113,7 @@
         </p>
         <p><b>Where is my Job data?</b> Don't worry, please read <a href="{{ url_for('main.news', _anchor='april-2022-update') }}">this news</a> entry</p>
       </div>
-      <div class="col s7">
+      <div class="col s6">
         <div class="card">
           <div class="card-content">
             <div>
@@ -108,6 +136,74 @@
           </div>
         </div>
       </div>
+      <div class="col s1"></div>
+      <div class="col s2">
+        <ul class="section table-of-contents">
+          <li><a href="#dashboard">Dashboard</a></li>
+          <li><a href="#my-corpora">My Corpora</a></li>
+          <li><a href="#my-jobs">My Jobs</a></li>
+          <li><a href="#my-groups">My Groups</a></li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="group-list no-autoinit" id="group-list" data-user-id="{{ current_user.hashid }}">
+  <div class="parallax-container">
+    <div class="parallax"><img src="{{ url_for('static', filename='images/parallax_hq/canvas.png') }}"></div>
+    <div style="position: absolute; bottom: 0; width: 100%;">
+      <div class="container">
+        <div class="white" style="padding: 1px 35px 0 10px; border-radius: 35px;">
+          <div class="input-field">
+            <i class="material-icons prefix">search</i>
+            <input class="search" id="group-list-search" type="text">
+            <label for="group-list-search">Search Group</label>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="section scrollspy" id="my-groups">
+    <div class="row">
+      <div class="col s1"></div>
+      <div class="col s2">
+        <h2>My Groups</h2>
+        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
+      </div>
+      <div class="col s6">
+        <div class="card">
+          <div class="card-content">
+            <div>
+              <table>
+                <thead>
+                  <tr>
+                    <th></th>
+                    <th>Title and Description</th>
+                    <th>Status</th>
+                    <th></th>
+                  </tr>
+                </thead>
+                <tbody class="list"></tbody>
+              </table>
+              <ul class="pagination"></ul>
+            </div>
+          </div>
+          <div class="card-action right-align">
+            <a class="btn waves-effect waves-light"><i class="material-icons left">add</i>Create group</a>
+          </div>
+        </div>
+      </div>
+      <div class="col s1"></div>
+      <div class="col s2">
+        <ul class="section table-of-contents">
+          <li><a href="#dashboard">Dashboard</a></li>
+          <li><a href="#my-corpora">My Corpora</a></li>
+          <li><a href="#my-jobs">My Jobs</a></li>
+          <li><a href="#my-groups">My Groups</a></li>
+        </ul>
+      </div>
     </div>
   </div>
 </div>