create server modal added

public/js/fetchPlans.js

@@ -0,0 +1,40 @@
+document.addEventListener('DOMContentLoaded', function() {
+    const eggSelect = document.getElementById('egg');
+    const nodeSelect = document.getElementById('node');
+    const planDetailsDiv = document.getElementById('plan-details');
+
+    eggSelect.addEventListener('change', updatePlans);
+    nodeSelect.addEventListener('change', updatePlans);
+
+    function updatePlans() {
+        const selectedEgg = eggSelect.value;
+        const selectedNode = nodeSelect.value;
+
+        if (selectedEgg && selectedNode) {
+            fetch(`/api/plans?egg=${selectedEgg}&node=${selectedNode}`)
+                .then(response => response.json())
+                .then(plans => {
+                    // Clear existing plan details
+                    planDetailsDiv.innerHTML = '';
+                    // Populate new plan details
+                    plans.forEach(plan => {
+                        const planDiv = document.createElement('div');
+                        planDiv.classList.add('p-4', 'bg-slate-600', 'rounded-md', 'text-center');
+                        planDiv.innerHTML = `
+                                <h1 class="text-lg text-white">${plan.name}</h1>
+                                <ul class="text-base text-white">
+                                    <li><i class="fa-solid fa-microchip"></i>&nbsp;CPU: ${plan.cpu} %</li>
+                                    <li><i class="fa-solid fa-memory"></i>&nbsp;RAM: ${plan.ram} MB</li>
+                                    <li><i class="fa-solid fa-hdd"></i>&nbsp;Disk: ${plan.disk} MB</li>
+                                    <li><i class="fa-solid fa-wifi"></i>&nbsp;Ports: ${plan.allocations}</li>
+                                    <li><i class="fa-solid fa-clock"></i>&nbsp;Databases: ${plan.databases}</li>
+                                    <li><i class="fa-solid fa-arrow-up"></i>&nbsp;Backups: ${plan.backups}</li>
+                                    <li><i class="fa-solid fa-money-bill"></i>&nbsp;${plan.price}/mo</li>
+                                </ul>`;
+                        planDetailsDiv.appendChild(planDiv);
+                    });
+                })
+                .catch(error => console.error('Error fetching plans:', error));
+        }
+    }
+});

routes/servers.js

@@ -6,7 +6,8 @@ const Egg = require("../models/Egg");
 const Plan = require("../models/Plan");
 const SettingsModel = require("../models/Settings");
 const { sha256 } = require('js-sha256');
-
+const Nest = require('../models/Nest');
+const Node = require('../models/Node');
 
 router.get("/", checkSetup, checkAuth, async function (req, res) {
     const servers = await Server.findAll({where: {ownerId: req.user.id}})
@@ -18,11 +19,35 @@ router.get("/", checkSetup, checkAuth, async function (req, res) {
             plan: plan.name,
             egg: (await Egg.findOne({where: {id: server.eggId}})).name,
             price: plan.price,
-            hourPrice: (plan.price / 720).toFixed(2)
+            hourPrice: (plan.price / 720).toFixed(2),
+            node: (await Node.findOne({where: {id: server.nodeId}})).name,
         }
         return serverObject;
     }))
-    res.render("dash/servers.html", {hostname: (await SettingsModel.findOne({where: {name: "hostname"}})).value, servers: serversArray, username: req.user.username, gravatarhash: sha256(req.user.email), credits: req.user.credits, pterourl: (await SettingsModel.findOne({where: {name: "pterourl"}})).value, isAdmin: req.user.admin, page: "Your servers"})
+
+    // GET DATA
+    const plans = await Plan.findAll();
+    let usedEggs = [];
+    let usedNests = [];
+    plans.forEach((plan) => plan.eggs.split(",").forEach((egg) => usedEggs.push(parseInt(egg))));
+    const eggs = await Egg.findAll({ where: { id:  usedEggs} });
+    eggs.forEach((egg) => usedNests.push(egg.nestId));
+    const nests = await Nest.findAll({ where: { id: usedNests } });
+    const nodes = await Node.findAll();
+
+    res.render("dash/servers.html", 
+        {hostname: (await SettingsModel.findOne({where: {name: "hostname"}})).value, 
+        servers: serversArray,
+         username: req.user.username, 
+         gravatarhash: sha256(req.user.email), 
+         credits: req.user.credits, 
+         pterourl: (await SettingsModel.findOne({where: {name: "pterourl"}})).value, 
+         isAdmin: req.user.admin, 
+         page: "Your servers",
+        nests: nests,
+        eggs: eggs,
+        nodes: nodes,
+        })
 })
 
 

views/modals/createserver.html

@@ -0,0 +1,42 @@
+{% extends "modals/modal.html" %}
+
+
+{% block content %}
+<form class="grid grid-cols-2 gap-4 p-5" action="/auth/login" method="post">
+    <div class="flex flex-col gap-2 col-span-1">
+        <label for="servername" class="text-white mr-2">Server name</label>
+        <input type="text" class="rounded-md h-10 pl-2 bg-slate-700 border-2 border-slate-400 text-white" placeholder="Server name" id="servername" name="servername" required>
+    </div>
+    <div class="flex flex-col gap-2 col-span-1">
+        <label for="egg" class="text-white mr-2">Egg</label>
+        <select class="text-white bg-slate-700 border-2 border-slate-400 rounded-md h-10" id="egg" name="egg" required>
+            <option value="" disabled selected>Select an egg</option>
+            {% for nest in nests %}
+            <optgroup label="{{ nest.name }}">
+                {% for egg in eggs %}
+                    {% if egg.nestId == nest.id %}
+                    <option value="{{ egg.id }}">{{ egg.name }}</option>
+                    {% endif %}
+                {% endfor %}
+            </optgroup>
+            {% endfor %}
+        </select>
+    </div>
+    <div class="flex flex-col gap-2 col-span-2">
+        <label for="node" class="text-white mr-2">Node</label>
+        <select class="text-white bg-slate-700 border-2 border-slate-400 rounded-md h-10" id="node" name="node" required>
+            <option value="" disabled selected>Select a node</option>
+            {% for node in nodes %}
+            <option value="{{ node.id }}">{{ node.name }}</option>
+            {% endfor %}
+        </select>
+    </div>
+    <div id="plan-details" class="grid grid-cols-3 gap-2 col-span-2 text-white">
+    </div>
+    <button class="bg-slate-800 hover:bg-slate-600 duration-300 text-white font-bold rounded-md h-10 w-40 mt-5" type="submit">Create a server</button>
+</form>
+
+
+
+<script src="/js/fetchPlans.js"></script>
+{% endblock %}

views/modals/modal.html

@@ -2,7 +2,7 @@
 <div id="createserver" aria-hidden="true" class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 max-h-full">
     <div class="relative p-4 w-full max-w-md max-h-full">
         <!-- Modal content -->
-        <div class="relative bg-slate-700 rounded-lg shadow">
+        <div class="relative bg-slate-700 rounded-lg shadow min-w-max">
             <!-- Modal header -->
             <div class="flex items-center justify-between p-4 md:p-5 border-b rounded-t ">
                 <h3 class="text-lg font-semibold text-white">