From 552ba2c875a9d9bd80fc2d6754b40f8a0cb6914f Mon Sep 17 00:00:00 2001
From: Frank Elsinga <frank@elsinga.de>
Date: Tue, 17 Jan 2023 14:39:22 +0100
Subject: [PATCH] added the ability to add extra information to fields

---
 openapi.yaml                            | 13 ++++++++
 webclient/src/views/view/view-view.inc  | 41 +++++++++++++++++++++++--
 webclient/src/views/view/view-view.scss |  5 +++
 3 files changed, 57 insertions(+), 2 deletions(-)

diff --git a/openapi.yaml b/openapi.yaml
index 5179af297..b22688f15 100644
--- a/openapi.yaml
+++ b/openapi.yaml
@@ -423,6 +423,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
@@ -1089,6 +1093,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/views/view/view-view.inc b/webclient/src/views/view/view-view.inc
index 169bf81ee..8132dfe9a 100644
--- a/webclient/src/views/view/view-view.inc
+++ b/webclient/src/views/view/view-view.inc
@@ -396,7 +396,24 @@
         <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 ms-2" 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 h6" v-if="prop.extra.header">
+                    {{prop.extra.header}}
+                  </div>
+                  <div class="card-body">
+                    {{prop.extra.body}}
+                  </div>
+                </div>
+              </div>
+            </div>
+            </td>
           </tr>
           <tr v-if="view_data.props.links">
             <td><strong>${{ _.view_view.info_table.links }}$</strong></td>
@@ -440,7 +457,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.scss b/webclient/src/views/view/view-view.scss
index e87310770..919526d00 100644
--- a/webclient/src/views/view/view-view.scss
+++ b/webclient/src/views/view/view-view.scss
@@ -413,6 +413,11 @@
             &:last-child {
                 border-bottom: 0;
             }
+
+            &.popover svg {
+              margin-left: 5px;
+              margin-bottom: -2px;
+            }
         }
 
         ul {