feat: Add nextcloud and immich api integration

2026-03-16 22:24:33 +11:00
parent d2db66d527
commit 5db23f0cd0
8 changed files with 211 additions and 3 deletions
--- a/templates/assets/css/index.css
+++ b/templates/assets/css/index.css
@@ -39,11 +39,13 @@ a:hover {
    flex-direction: column;
    align-items: center;
    gap: 10px;
+    text-decoration: none;
 }

 .service-card:hover {
    transform: translateY(-5px);
    background-color: #333;
+    text-decoration: none;
 }

 .service-icon {
@@ -66,6 +68,13 @@ a:hover {
    margin: 0;
 }

+.service-note {
+    font-size: 0.9em;
+    color: #555;
+    margin: 0;
+
+}
+
 .section-title {
    text-align: center;
    margin-top: 40px;
--- a/templates/assets/js/index.js
+++ b/templates/assets/js/index.js
@@ -0,0 +1,45 @@
+document.addEventListener("DOMContentLoaded", () => {
+    // If the user is logged in, fetch their cloud quota and display it
+    const cloudLink = document.getElementById("cloud");
+    if (cloudLink) {
+        fetch("/api/v1/cloud_quota")
+            .then(response => response.json())
+            .then(data => {
+                if (!data.error) {
+                    // Create a new span element to display the quota
+                    const quotaLabel = document.createElement("p");
+                    quotaLabel.classList.add("service-note");
+                    quotaLabel.textContent = `${data.used} GB used / ${data.total} GB total`;
+                    // Append the quota span to the cloud link
+                    cloudLink.appendChild(quotaLabel);
+                } else {
+                    console.error("Error fetching cloud quota:", data.error);
+                }
+            })
+            .catch(error => {
+                console.error("Error fetching cloud quota:", error);
+            });
+    }
+
+    // Fetch Immich stats and display them
+    const immichLink = document.getElementById("immich");
+    if (immichLink) {
+        fetch("/api/v1/immich")
+            .then(response => response.json())
+            .then(data => {
+                if (!data.error) {
+                    // Create a new span element to display the stats
+                    const statsLabel = document.createElement("p");
+                    statsLabel.classList.add("service-note");
+                    statsLabel.textContent = `Images: ${data.images}, Videos: ${data.videos}`;
+                    // Append the stats span to the Immich link
+                    immichLink.appendChild(statsLabel);
+                } else {
+                    console.error("Error fetching Immich stats:", data.error);
+                }
+            })
+            .catch(error => {
+                console.error("Error fetching Immich stats:", error);
+            });
+    }
+});
--- a/templates/index.html
+++ b/templates/index.html
@@ -7,6 +7,7 @@
    <title>Woodburn/</title>
    <link rel="icon" href="/assets/img/favicon.png" type="image/png">
    <link rel="stylesheet" href="/assets/css/index.css">
+    <script src="/assets/js/index.js" defer></script>
 </head>

 <body>
@@ -25,7 +26,7 @@
    </div>

    <div class="container">
-        <h3 class="section-title">External Services</h3>
+        <h3 class="section-title">Services</h3>
        <div class="services-grid">
            {% for service in services.external %}
            <a href="{{ service.url }}" class="service-card" target="_blank">
@@ -40,7 +41,7 @@
        <h3 class="section-title">Internal Services</h3>
        <div class="services-grid">
            {% for service in services.internal %}
-            <a href="{{ service.url }}" class="service-card" target="_blank">
+            <a href="{{ service.url }}" class="service-card" target="_blank" id="{{ service.id }}">
                <img src="/services/internal/{{ service.id }}.png" alt="{{ service.name }}" class="service-icon">
                <h4 class="service-name">{{ service.name }}</h4>
                <p class="service-desc">{{ service.description }}</p>