Add install button and functionality to mod dashboard for easier mod installation

StoppedwummSites · StoppedwummSites · commit 9d0881ebdea4 · 2025-05-09T10:35:11.000+02:00
diff --git a/ui/chrome/css/main.css b/ui/chrome/css/main.css
@@ -24,4 +24,22 @@ body {
 
 #terminal pre .error {
     color: red;
+}
+
+.project {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-top: 20px;
+    /** Add an outer border to the project section */
+    border: 1px solid #ccc;
+}
+
+.project h3 {
+    margin-bottom: 10px;
+}
+
+.project p {
+    margin: 0;
+    font-size: 14px;
 }
diff --git a/ui/chrome/js/moddashboard.js b/ui/chrome/js/moddashboard.js
@@ -17,6 +17,7 @@ document.getElementById("search").addEventListener("click", async function() {
             <p>Downloads: ${project.downloads}</p>
             <p>Follows: ${project.follows}</p>
             <a href="https://modrinth.com/${project.project_type}/${project.slug}" target="_blank">View on Modrinth</a>
+            <button class="install" onclick="installMod('${project.slug}')">Install</button>
         `
         resultDiv.appendChild(projectDiv)
     }
diff --git a/ui/chrome/moddashboard/index.html b/ui/chrome/moddashboard/index.html
@@ -1,11 +1,24 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Mod Dashboard</title>
     <link rel="stylesheet" href="../css/main.css">
+    <script>
+        async function installMod(modId) {
+            const modrinthUrl = "https://api.modrinth.com/v2/project/" + modId + "/version?loaders=[\"neoforge\"]&game_versions=[\"1.21.1\"]"
+            const modrinthResponse = await fetch(modrinthUrl)
+            const modrinthData = await modrinthResponse.json()
+            let latestversion = modrinthData[0]
+            const versionData = await fetch("https://api.modrinth.com/v2/version/" + latestversion.id)
+            const versionJson = await versionData.json()
+            console.log(versionJson)
+        }
+    </script>
 </head>
+
 <body>
     <header>
         <h1>Mod Dashboard</h1>
@@ -16,8 +29,9 @@ <h1>Mod Dashboard</h1>
             <button id="search">Search</button>
         </div>
         <div id="result">
-            
+
         </div>
     </main>
     <script src="../js/moddashboard.js" defer type="module"></script>
+
 </html>

Original file line number	Diff line number	Diff line change
`@@ -17,6 +17,7 @@ document.getElementById("search").addEventListener("click", async function() {`
`17`	`17`	`<p>Downloads: ${project.downloads}</p>`
`18`	`18`	`<p>Follows: ${project.follows}</p>`
`19`	`19`	`<a href="https://modrinth.com/${project.project_type}/${project.slug}" target="_blank">View on Modrinth</a>`
	`20`	`+ <button class="install" onclick="installMod('${project.slug}')">Install</button>`
`20`	`21`	`
`21`	`22`	`resultDiv.appendChild(projectDiv)`
`22`	`23`	`}`