From 1e4ff17a37371371e8aa9b3f589e54468c5a2f83 Mon Sep 17 00:00:00 2001
From: lllllllillllllillll <lllllllillllllillll@proton.me>
Date: Thu, 14 Dec 2023 00:40:10 -0800
Subject: [PATCH] Added card styles : Full or compact.

---
 README.md              | 30 ++++++++++++++++--------------
 components/dashCard.js | 16 +++++++++-------
 functions/system.js    |  2 +-
 3 files changed, 26 insertions(+), 22 deletions(-)

diff --git a/README.md b/README.md
index 1c8dc0a..1152a9c 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,5 @@
 # DweebUI
-DweebUI is a simple Docker web interface created with javascript and node.js
+DweebUI is a simple Docker web interface created using Javascript, Node.JS, and Express.
 
 Pre-Pre-Pre-Pre-Pre Alpha v0.08 ( :fire: Experimental. Don't install on any servers you care about :fire: )
 
@@ -9,8 +9,9 @@ Pre-Pre-Pre-Pre-Pre Alpha v0.08 ( :fire: Experimental. Don't install on any serv
 [![Docker Pulls](https://img.shields.io/docker/pulls/lllllllillllllillll/dweebui)](https://hub.docker.com/repository/docker/lllllllillllllillll/dweebui)
 
 
-* I haven't used Github very much and I'm still new to javascript.
+* This is a personal project that I decided to share.
 * This is the first project I've ever released and I'm sure it's full of plenty of bugs and mistakes.
+* I haven't used Github very much and I'm still new to Javascript.
 * I probably should have waited a lot longer to share this :|
 
 <a href="https://raw.githubusercontent.com//lllllllillllllillll/DweebUI/main/screenshots/dashboard.png"><img src="https://raw.githubusercontent.com/lllllllillllllillll/DweebUI/main/screenshots/dashboard.png" width="50%"/></a>
@@ -19,22 +20,22 @@ Pre-Pre-Pre-Pre-Pre Alpha v0.08 ( :fire: Experimental. Don't install on any serv
 
 
 ## Features
-* [x] Dashboard provides server metrics (cpu, ram, network, disk) and container controls on a single page.
+* [x] Dashboard provides server metrics, container metrics, and container controls, on a single page.
+* [x] View container logs.
+* [ ] Update containers (planned).
+* [ ] Manage your Docker networks, images, and volumes (planned).
 * [x] Light/Dark Mode.
 * [x] Easy to install app templates.
-* [x] Automatically persists data in docker volumes if bind mount isn't used. 
-* [x] Proxy manager for Caddy. (Optional)
-* [x] Partial Portainer Template Support (Network Mode, Ports, Volumes, Enviroment Variables, Labels, Commands, Restart Policy, Nvidia Hardware Acceleration).
+* [x] Proxy manager for Caddy (Optional).
 * [x] Multi-User built-in.
-* [ ] User pages: Shortcuts, Requests, Support. (planned)
+* [ ] User pages (planned).
 * [x] Support for Windows, Linux, and MacOS.
-* [ ] Import compose files. (planned)
-* [x] Pure javascript. No frameworks or typescript.
+* [ ] Docker compose support (planned).
 * [x] Templates.json maintains compatability with Portainer, allowing you to use the template without needing to use DweebUI.
-* [ ] Manage your Docker networks, images, and volumes. (planned)
-* [ ] Preset variables. (planned)
-* [ ] VPN, VPS, and Firewall Toggles. (planned)
-* [ ] Offline Mode. (planned)
+* [x] Automatically persists data in docker volumes if bind mount isn't used.
+* [ ] Preset variables (planned).
+* [ ] Offline/Local Only (planned).
+
 
 ## Setup
 
@@ -92,8 +93,9 @@ sudo ./setup.sh
 ```
 
 
-## Credit
+## Credits
 
+* Dockerode and dockerode-compose by Apocas: https://github.com/apocas/dockerode
 * UI was built using HTML and CSS elements from https://tabler.io/
 * Apps template based on Portainer template provided by Lissy93: https://github.com/Lissy93/portainer-templates
 * Icons from Walkxcode with some renames and additions: https://github.com/walkxcode/dashboard-icons
\ No newline at end of file
diff --git a/components/dashCard.js b/components/dashCard.js
index 3a3b6ca..0a74950 100644
--- a/components/dashCard.js
+++ b/components/dashCard.js
@@ -2,14 +2,16 @@ module.exports.dashCard = function dashCard(data) {
   
   let { name, service, id, state, image, external_port, internal_port, ports, volumes, environment_variables, labels, IPv4, style } = data;
 
-  let margin, icon, font = '';
+  let margin, iconSize, fontSize = '';
 
-  if (style = "Large") {
-    //Large cards
-  } else if (style = "Compact") {
+  if (style == "Large") {
+    iconSize = 'height="150px" width="150px"'
+  } else if (style == "Compact") {
+    iconSize = 'height="110px" width="110px"'
+    margin = 'style="margin-bottom: 0;"'
+  } else if (style == "Row") {
+    iconSize = 'height="50px" width="50px"'
     margin = 'style="margin-bottom: 0;"'
-  } else if (style = "Row") {
-    //Row cards
   }
 
 
@@ -126,7 +128,7 @@ module.exports.dashCard = function dashCard(data) {
       <div class="card">
         <div class="card-body">
           <div class="card-stamp card-stamp-sm">
-            <img heigh="150px" width="150px" src="https://raw.githubusercontent.com/lllllllillllllillll/DweebUI-Icons/main/${service}.png" onerror="this.onerror=null;this.src='https://raw.githubusercontent.com/lllllllillllllillll/DweebUI-Icons/main/dweebui.png';"></img>
+            <img ${iconSize} src="https://raw.githubusercontent.com/lllllllillllllillll/DweebUI-Icons/main/${service}.png" onerror="this.onerror=null;this.src='https://raw.githubusercontent.com/lllllllillllllillll/DweebUI-Icons/main/dweebui.png';"></img>
           </div>
           <div class="d-flex align-items-center">
             <div class="subheader text-yellow">${external_port}:${internal_port}</div>
diff --git a/functions/system.js b/functions/system.js
index 6b9a5c1..3e12d55 100644
--- a/functions/system.js
+++ b/functions/system.js
@@ -166,7 +166,7 @@ module.exports.containerList = async function () {
                 environment_variables: environment_variables,
                 labels: labels,
                 IPv4: IPv4,
-                style: "Large"
+                style: "Compact"
             }
 
             let dockerCard = dashCard(container_info);