Fixed apps.js pagnation and learn more modal

controllers/apps.js

@@ -35,6 +35,13 @@ export const Apps = async (req, res) => {
   let list_end = (page * 28);
   let last_page = '';
 
+  let pages = `<li class="page-item"><a class="page-link" href="/apps/1/${template_param}">1</a></li>
+                <li class="page-item"><a class="page-link" href="/apps/2/${template_param}">2</a></li>
+                <li class="page-item"><a class="page-link" href="/apps/3/${template_param}">3</a></li>
+                <li class="page-item"><a class="page-link" href="/apps/4/${template_param}">4</a></li>
+                <li class="page-item"><a class="page-link" href="/apps/5/${template_param}">5</a></li>`
+
+
   let prev = '/apps/' + (page - 1) + '/' + template_param;
   let next = '/apps/' + (page + 1) + '/' + template_param;
   if (page == 1) { prev = '/apps/' + (page) + '/' + template_param; }
@@ -76,6 +83,7 @@ export const Apps = async (req, res) => {
       for (let i = list_start; i < list_end && i < templates.length; i++) {
           let appCard = readFileSync('./views/partials/appCard.html', 'utf8');
           let name = templates[i].name || templates[i].title.toLowerCase();
+          let title = templates[i].title || templates[i].name;
           let desc = templates[i].description.slice(0, 60) + "...";
           let description = templates[i].description.replaceAll(". ", ".\n") || "no description available";
           let note = templates[i].note ? templates[i].note.replaceAll(". ", ".\n") : "no notes available";
@@ -91,6 +99,7 @@ export const Apps = async (req, res) => {
             categories += CatagoryColor(templates[i].categories[j]);
           }
           appCard = appCard.replace(/AppName/g, name);
+          appCard = appCard.replace(/AppTitle/g, title);
           appCard = appCard.replace(/AppShortName/g, name);
           appCard = appCard.replace(/AppDesc/g, desc);
           appCard = appCard.replace(/AppLogo/g, logo);
@@ -117,6 +126,7 @@ export const Apps = async (req, res) => {
     alert: alert,
     template_list: '',
     json_templates: json_templates,
+    pages: pages,
   });
   alert = '';
 }
@@ -459,8 +469,12 @@ export const InstallModal = async (req, res) => {
 export const LearnMore = async (req, res) => {
   let name = req.header('hx-trigger-name');
   let id = req.header('hx-trigger');
-
+  let result = templates_global.find(t => t.name == name);
+  
   let modal = readFileSync('./views/modals/learnmore.html', 'utf8');
+  modal = modal.replace(/AppName/g, result.title);
+  modal = modal.replace(/AppDesc/g, result.description);
+
   res.send(modal);
 }
 

views/apps.html

@@ -140,11 +140,9 @@
                     prev
                   </a>
                 </li>
-                <li class="page-item"><a class="page-link" href="/apps/1">1</a></li>
-                <li class="page-item"><a class="page-link" href="/apps/2">2</a></li>
-                <li class="page-item"><a class="page-link" href="/apps/3">3</a></li>
-                <li class="page-item"><a class="page-link" href="/apps/4">4</a></li>
-                <li class="page-item"><a class="page-link" href="/apps/5">5</a></li>
+
+                <%- pages %>
+                
                 <li class="page-item">
                   <a class="page-link" href="<%- next %>">
                     next <!-- Download SVG icon from http://tabler-icons.io/i/chevron-right -->
@@ -160,48 +158,9 @@
 
       </div>
     </div>
-    <!-- Libs JS -->
-    <!-- Tabler Core -->
+
     <script src="/js/tabler.min.js" defer></script>
     <script src="/js/demo.min.js" defer></script>
     
-    <!-- <script>
-      async function sendData(form) {
-        const formData = new FormData(form);
-        const jsonData = {};
-
-        for (let [key, value] of formData.entries()) {
-          jsonData[key] = value;
-        }
-
-        try {
-          const response = await fetch("/install", {
-            method: "POST",
-            headers: {
-              "Content-Type": "application/json",
-            },
-            body: JSON.stringify(jsonData),
-          });
-          console.log(await response.json());
-        } catch (e) {
-          console.error(e);
-        }
-      }
-
-      document.addEventListener("submit", (event) => {
-        event.preventDefault();
-
-        const buttonId = event.target.id;
-        console.log(buttonId);
-        const form = document.querySelector(`#${buttonId}`);
-
-        if (form) {
-          sendData(form);
-        } else {
-          console.error(`Form not found for button with ID: ${buttonId}`);
-        }
-      });
-    </script> -->
-    
   </body>
 </html>

views/modals/learnmore.html

@@ -2,8 +2,8 @@
     <div class="modal-dialog modal-sm modal-dialog-centered" role="document">
         <div class="modal-content">
             <div class="modal-body">
-            <div class="modal-title">${data.title}</div>
-            <div>${description}</div>
+            <div class="modal-title">AppName</div>
+            <div>AppDesc</div>
             </div>
             <div class="modal-footer">
             <button type="button" class="btn btn-link link-secondary me-auto" data-bs-dismiss="modal">Cancel</button>

views/partials/appCard.html

@@ -9,7 +9,7 @@
             </div>
         </div>
         <div class="d-flex">
-            <a href="#" class="card-btn" data-hx-get="/learn_more" data-hx-target="#modals-here" hx-swap="innerHTML" data-hx-trigger="click" data-bs-toggle="modal" data-bs-target="#modals-here">
+            <a href="#" class="card-btn" name="AppName" id="AppType" data-hx-get="/learn_more" data-hx-target="#modals-here" hx-swap="innerHTML" data-hx-trigger="click" data-bs-toggle="modal" data-bs-target="#modals-here">
             <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-article" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"></path> <path d="M3 4m0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z"></path> <path d="M7 8h10"></path> <path d="M7 12h10"></path> <path d="M7 16h10"></path></svg>
               Learn More
             </a>