From d001c817369831b955861aea8aca61979530cea5 Mon Sep 17 00:00:00 2001
From: Luca Haid <luca.haid@xinon.eu>
Date: Tue, 6 May 2025 11:27:44 +0000
Subject: [PATCH] Add bookstack integration

---
 Layout/default/header.php                     |  1 +
 Layout/default/topbar.php                     |  7 +++
 Layout/default/vueHeader.php                  |  1 +
 public/assets/css/thetool.css                 | 45 +++++++++++++++--
 .../plugins/bookstack/bookstackIntegration.js | 50 +++++++++++++++++++
 5 files changed, 99 insertions(+), 5 deletions(-)
 create mode 100644 public/plugins/bookstack/bookstackIntegration.js

diff --git a/Layout/default/header.php b/Layout/default/header.php
index 45dc81f9b..46ac55f78 100644
--- a/Layout/default/header.php
+++ b/Layout/default/header.php
@@ -56,6 +56,7 @@
     <script type="text/javascript" src="<?=self::getResourcePath()?>js/bootstrap-autocomplete.min.js"></script>
     <script type="text/javascript" src="<?=self::getResourcePath()?>datatables/datatables.min.js?<?=$git_merge_ts?>"></script>
     <script type="text/javascript" src="<?=self::getResourcePath()?>plugins/notification/notify.js"></script>
+    <script type="text/javascript" src="<?=self::getResourcePath()?>plugins/bookstack/bookstackIntegration.js"></script>
     <script type="text/javascript" src="<?=self::getResourcePath()?>assets/libs/switchery/switchery.min.js"></script>
 
     <script type="text/javascript">
diff --git a/Layout/default/topbar.php b/Layout/default/topbar.php
index 858f71fd4..811bb578a 100644
--- a/Layout/default/topbar.php
+++ b/Layout/default/topbar.php
@@ -14,6 +14,13 @@
         </a>
         <!-- End mobile menu toggle-->
       </li>
+
+        <li id="bookstackLink" class="dropdown notification-list" style="display: none">
+            <a class="nav-link dropdown-toggle" href="" target="_blank">
+                <i class="fas fa-book"></i>
+                <span class="d-none d-sm-inline-block">Hilfe zu dieser Seite</span>
+            </a>
+        </li>
       
       <li class="dropdown notification-list">
         <a class="nav-link dropdown-toggle" data-toggle="adropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false">
diff --git a/Layout/default/vueHeader.php b/Layout/default/vueHeader.php
index b38520a5d..6d29c3b5a 100644
--- a/Layout/default/vueHeader.php
+++ b/Layout/default/vueHeader.php
@@ -43,6 +43,7 @@
     <script type="text/javascript" src="<?=self::getResourcePath()?>js/bootstrap.min.js"></script>
     <script type="text/javascript" src="<?=self::getResourcePath()?>assets/js/bootstrap-select.min.js"></script>
     <script type="text/javascript" src="<?=self::getResourcePath()?>plugins/notification/notify.js"></script>
+    <script type="text/javascript" src="<?=self::getResourcePath()?>plugins/bookstack/bookstackIntegration.js"></script>
 
     <?php if(isset($additionalJS) && is_array($additionalJS) && count($additionalJS)): ?>
         <?php foreach($additionalJS as $js): ?>
diff --git a/public/assets/css/thetool.css b/public/assets/css/thetool.css
index eda6f6491..913fde452 100644
--- a/public/assets/css/thetool.css
+++ b/public/assets/css/thetool.css
@@ -783,10 +783,45 @@ td.controls {
   max-width: 100% !important;
 }
 
-.chevron-icon::before {
-  content: "\f077";
+.bookstack-integration-modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0,0,0,0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 9999;
 }
 
-.collapsed .chevron-icon::before {
-  content: "\f078";
-}
\ No newline at end of file
+.bookstack-integration-modal-content {
+  background: white;
+  padding: 20px;
+  border-radius: 5px;
+  width: 80%;
+  height: 80%;
+  position: relative;
+  transition: opacity 0.3s ease;
+}
+
+.bookstack-integration-close-btn {
+  position: absolute;
+  right: -10px;
+  top: -10px;
+  background: red;
+  border: none;
+  color: white;
+  border-radius: 50%;
+  width: 25px;
+  height: 25px;
+  cursor: pointer;
+}
+
+.bookstack-integration-iframe {
+  width: 100%;
+  height: 100%;
+  border: 1px solid #ddd;
+  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+}
diff --git a/public/plugins/bookstack/bookstackIntegration.js b/public/plugins/bookstack/bookstackIntegration.js
new file mode 100644
index 000000000..23abfdde0
--- /dev/null
+++ b/public/plugins/bookstack/bookstackIntegration.js
@@ -0,0 +1,50 @@
+document.addEventListener('DOMContentLoaded', async () => {
+    const articleTag = (() => {
+        const path = window.location.pathname;
+        const segments = path.split('/').filter(Boolean);
+        return segments.length > 0 ? segments[0] : 'DefaultTag';
+    })();
+
+
+    const apiUrl = `https://bookstack.xinon.at/api/search?query=%5Bshowurl%3D${encodeURIComponent(articleTag)}%5D%7Btype%3Apage%7D`;
+    const linkElement = document.getElementById('bookstackLink');
+
+    try {
+        const response = await fetch(apiUrl, {
+            headers: {
+                'Authorization': 'Token XmGSDWlg3bZhHKXFchNXQ9LpXvCaBuM1:k6XNe6RUU1BIxkv5pxpZ9PSErqZbHJ4i'
+            }
+        });
+        const data = await response.json();
+
+        if (data.data && data.data.length > 0) {
+            const article = data.data[0];
+            linkElement.style.display = 'block';
+            linkElement.querySelector('a').addEventListener('click', (e) => {
+                e.preventDefault();
+                showArticleModal(article.url);
+            });
+        }
+    } catch (error) {
+        console.error('BookStack API error:', error);
+        linkElement.style.display = 'none';
+    }
+
+    function showArticleModal(url) {
+        const modal = document.createElement('div');
+        modal.className = 'bookstack-integration-modal';
+        modal.innerHTML = `
+            <div class="bookstack-integration-modal-content">
+                <button class="bookstack-integration-close-btn">×</button>
+                <iframe src="${url}?iframe=true" class="bookstack-integration-iframe"></iframe>
+            </div>
+        `;
+
+        modal.querySelector('.bookstack-integration-close-btn').addEventListener('click', () => modal.remove());
+        modal.addEventListener('click', (e) => {
+            if (e.target === modal) modal.remove();
+        });
+
+        document.body.appendChild(modal);
+    }
+});