From 0621fad909382fbff89afc0ad0439471c07f1356 Mon Sep 17 00:00:00 2001
From: ge78fug <ge78fug@mytum.de>
Date: Mon, 28 Nov 2022 10:35:35 +0100
Subject: [PATCH 1/2] Added the calendar-modal

---
 webclient/src/views/view/i18n-view.yaml |  4 +++-
 webclient/src/views/view/view-view.inc  | 29 +++++++++++++++++++++++--
 webclient/src/views/view/view-view.js   |  3 +++
 webclient/src/views/view/view-view.scss | 10 +++++++++
 4 files changed, 43 insertions(+), 3 deletions(-)

diff --git a/webclient/src/views/view/i18n-view.yaml b/webclient/src/views/view/i18n-view.yaml
index 00326d0b6..70cde572f 100644
--- a/webclient/src/views/view/i18n-view.yaml
+++ b/webclient/src/views/view/i18n-view.yaml
@@ -10,7 +10,9 @@ view_view:
       share: { de: "Teilen", en: "Share" }
       share_link: { de: "Teilen mit ...", en: "Share with ..." }
       copied: { de: "Kopiert", en: "Copied" }
-    calendar: { de: "Kalender öffnen", en: "Open calendar" }
+    calendar:
+      open: { de: "Kalender öffnen", en: "Open calendar" }
+      close: { de: "Kalender schließen", en: "Close calendar" }
     feedback:
       de: "Problem melden oder Änderung vorschlagen"
       en: "Report issue or suggest changes"
diff --git a/webclient/src/views/view/view-view.inc b/webclient/src/views/view/view-view.inc
index 36198ae2a..781be5f0f 100644
--- a/webclient/src/views/view/view-view.inc
+++ b/webclient/src/views/view/view-view.inc
@@ -97,8 +97,6 @@
         <a
           class="btn btn-link btn-action btn-sm"
           v-if="view_data.props?.calendar_url"
-          v-bind:href="view_data.props.calendar_url"
-          target="_blank"
           title="${{ _.view_view.header.calendar }}$"
         >
           <svg
@@ -184,6 +182,33 @@
       </div>
     </div>
     <div class="divider"></div>
+    <!-- Modal-Calendar -->
+    <div
+      class="modal modal-lg"
+      id="modal-calendar"
+      v-bind:class="{active: calendar.modalOpen}"
+    >
+      <a
+        class="modal-overlay"
+        aria-label="Close"
+        @click="calendar.modalOpen=false"
+      >
+      </a>
+        <div class="modal-container modal-fullheight" id="calendarModal-container">
+          <div class="modal-header">
+            <button
+              class="btn btn-clear float-right"
+              aria-label="${{_.view_view.header.calendar.close}}$"
+              @click="calendar.modalOpen=false"
+            ></button>
+          </div>
+          <div class="modal-body">
+            <div class="content" id="modalCalendarContent">
+              <iframe src="view_data.props.calendar_url"></iframe>
+            </div>
+          </div>
+        </div>
+    </div>
   </div>
 
   <!-- First info section (map + infocard) -->
diff --git a/webclient/src/views/view/view-view.js b/webclient/src/views/view/view-view.js
index c049624b3..a398db617 100644
--- a/webclient/src/views/view/view-view.js
+++ b/webclient/src/views/view/view-view.js
@@ -117,6 +117,9 @@ navigatum.registerView("view", {
         body_backup: null,
         force_reopen: false,
       },
+      calendar: {
+        modalOpen: false,
+      },
       browser_supports_share: "share" in navigator,
     };
   },
diff --git a/webclient/src/views/view/view-view.scss b/webclient/src/views/view/view-view.scss
index f968c942f..3d12306c6 100644
--- a/webclient/src/views/view/view-view.scss
+++ b/webclient/src/views/view/view-view.scss
@@ -104,6 +104,16 @@
         }
     }
 
+    /* --- Modal Calendar --- */
+    #modal-calendar {
+        align-items: baseline;
+
+        & .modal-container {
+            position: relative;
+            top: 5em;
+        }
+    }
+
     /* --- Pending coordinates counter --- */
     .coord-counter {
         margin: 8px 0;

From bcacacf5df941d4ba47d867e49b84b775dd24a2b Mon Sep 17 00:00:00 2001
From: ge78fug <ge78fug@mytum.de>
Date: Fri, 9 Dec 2022 09:43:02 +0100
Subject: [PATCH 2/2] Adjusted the width of the iFrame

---
 webclient/src/views/view/view-view.inc  | 2 +-
 webclient/src/views/view/view-view.scss | 4 ++++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/webclient/src/views/view/view-view.inc b/webclient/src/views/view/view-view.inc
index 781be5f0f..f86c721db 100644
--- a/webclient/src/views/view/view-view.inc
+++ b/webclient/src/views/view/view-view.inc
@@ -204,7 +204,7 @@
           </div>
           <div class="modal-body">
             <div class="content" id="modalCalendarContent">
-              <iframe src="view_data.props.calendar_url"></iframe>
+              <iframe src="view_data.props.calendar_url" id="calendarModalIFrame"></iframe>
             </div>
           </div>
         </div>
diff --git a/webclient/src/views/view/view-view.scss b/webclient/src/views/view/view-view.scss
index 3d12306c6..108869eaa 100644
--- a/webclient/src/views/view/view-view.scss
+++ b/webclient/src/views/view/view-view.scss
@@ -114,6 +114,10 @@
         }
     }
 
+    #calendarModalIFrame {
+        width: 100%;
+    }
+
     /* --- Pending coordinates counter --- */
     .coord-counter {
         margin: 8px 0;