[NAT-2] Extra/Explanatory information field (#355)

added the ability to add extra information to fields - popover on desktop - modal on mobile Co-authored-by: octycs <[email protected]>
TUM-Dev · Feb 6, 2023 · d6f9ca4 · d6f9ca4
1 parent 04b7057
commit d6f9ca4
Show file tree

Hide file tree

Showing 6 changed files with 89 additions and 2 deletions.
diff --git a/openapi.yaml b/openapi.yaml
@@ -418,6 +418,10 @@ paths:
                           text: 'Boltzmannstr. 3, EG, 85748 Garching b. München'
                         - name: Sitzplätze
                           text: '522'
+                          extra:
+                            header: Genauere Angaben
+                            body: "für Prüfungen: 102 in eng, 71 in weit, 49 in corona"
+
                       calendar_url: 'https://campus.tum.de/tumonline/tvKalender.wSicht?cOrg=19691&cRes=12559&cReadonly=J'
                     ranking_factors:
                       rank_combined: 900
@@ -1155,6 +1159,15 @@ components:
         text:
           type: string
           example: 5602.EG.001
+        extra:
+          type: object
+          properties:
+            header:
+              type: string
+              example: Genauere Angaben
+            body:
+              type: string
+              example: "für Prüfungen: 102 in eng, 71 in weit, 49 in corona"
       required:
         - name
         - text

diff --git a/webclient/src/core.js b/webclient/src/core.js
@@ -168,6 +168,10 @@ navigatum = (() => {
           error: {
             msg: null,
           },
+          modal: {
+            header: null,
+            body: null,
+          },
         },
         methods: {
           searchFocus: function () {

diff --git a/webclient/src/index.html b/webclient/src/index.html
@@ -325,9 +325,29 @@
         </div>
       </footer>
 
+      <!-- General message modal -->
+      <div class="modal" :class="{'active': modal.body}">
+        <div class="modal-overlay" @click="modal.body = null"></div>
+        <div class="modal-container">
+          <div class="modal-header">
+            <button
+              class="btn btn-clear float-right"
+              aria-label="Close"
+              @click="modal.body = null"></button>
+            <div v-if="modal.header" class="modal-title h5">{{ modal.header }}</div>
+          </div>
+          <div class="modal-body">
+            <div class="content">
+              <p>{{ modal.body }}</p>
+            </div>
+          </div>
+        </div>
+      </div>
+
     </div>
     <!-- END of Vue.js template code -->
 
+
     <!-- Feedback modal -->
     <div class="modal" id="feedback-modal">
       <div id="feedback-overlay" class="modal-overlay"></div>

diff --git a/webclient/src/views/view/view-view.inc b/webclient/src/views/view/view-view.inc
@@ -396,7 +396,17 @@
         <tbody>
           <tr v-for="prop in view_data.props.computed">
             <td><strong>{{ prop.name }}</strong></td>
-            <td>{{ prop.text }}</td>
+            <td>{{ prop.text }}
+            <div
+              class="popover"
+              v-if="prop.extra?.body"
+              @click="showPropExtra(prop.extra)">
+              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-info-circle" viewBox="0 0 16 16">
+                <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
+                <path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/>
+              </svg>
+            </div>
+            </td>
           </tr>
           <tr v-if="view_data.props.links">
             <td><strong>${{ _.view_view.info_table.links }}$</strong></td>
@@ -440,7 +450,27 @@
             <tbody>
               <tr v-for="prop in view_data.props.computed">
                 <td><strong>{{ prop.name }}</strong></td>
-                <td>{{ prop.text }}</td>
+                <td>{{ prop.text }}
+                  <div class="popover" v-if="prop.extra?.body">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-info-circle" viewBox="0 0 16 16">
+                      <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
+                      <path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/>
+                    </svg>
+                    <div class="popover-container">
+                      <div class="card">
+                        <div class="card-header" v-if="prop.extra.header">
+                          {{ prop.extra.header }}
+                        </div>
+                        <div class="card-body">
+                          {{ prop.extra.body }}
+                        </div>
+                        <div class="card-footer" v-if="prop.extra.footer">
+                          {{ prop.extra.footer }}
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </td>
               </tr>
               <tr v-if="view_data.props.links">
                 <td><strong>${{ _.view_view.info_table.links }}$</strong></td>

diff --git a/webclient/src/views/view/view-view.js b/webclient/src/views/view/view-view.js
@@ -146,6 +146,10 @@ navigatum.registerView("view", {
     hideImageShowcase: function () {
       this.image.slideshow_open = false;
     },
+    showPropExtra: function(propExtra) {
+      navigatum.app.modal.header = propExtra.header;
+      navigatum.app.modal.body = propExtra.body;
+    },
     // This is called
     // - on initial page load
     // - when the view is loaded for the first time

diff --git a/webclient/src/views/view/view-view.scss b/webclient/src/views/view/view-view.scss
@@ -398,6 +398,22 @@
             &:last-child {
                 padding-left: 10px;
             }
+
+            .popover {
+                .card {
+                    box-shadow: 0px 0px 6px rgba(106, 106, 106, 0.08);
+                    border: .05rem solid #e1e1e1;
+
+                    .card-header {
+                        font-weight: bold;
+                    }
+                }
+
+                svg {
+                    margin-left: 5px;
+                    margin-bottom: -2px;
+                }
+            }
         }
 
         tr {