Add per platform game counts to the library (#164)

gaseous-server/Controllers/FilterController.cs

@@ -24,13 +24,18 @@ namespace gaseous_server.Controllers
             Dictionary<string, object> FilterSet = new Dictionary<string, object>();
 
             // platforms
-            List<Platform> platforms = new List<Platform>();
+            List<FilterPlatform> platforms = new List<FilterPlatform>();
-            string sql = "SELECT Platform.Id, Platform.Abbreviation, Platform.AlternativeName, Platform.`Name`, Platform.PlatformLogo, (SELECT COUNT(Games_Roms.Id) AS RomCount FROM Games_Roms WHERE Games_Roms.PlatformId = Platform.Id) AS RomCount FROM Platform HAVING RomCount > 0 ORDER BY `Name`";
+            //string sql = "SELECT Platform.Id, Platform.Abbreviation, Platform.AlternativeName, Platform.`Name`, Platform.PlatformLogo, (SELECT COUNT(Games_Roms.Id) AS RomCount FROM Games_Roms WHERE Games_Roms.PlatformId = Platform.Id) AS RomCount FROM Platform HAVING RomCount > 0 ORDER BY `Name`";
+            string sql = "SELECT Platform.Id, Platform.Abbreviation, Platform.AlternativeName, Platform.`Name`, Platform.PlatformLogo, (SELECT COUNT(Games_Roms.Id) AS RomCount FROM Games_Roms WHERE Games_Roms.PlatformId = Platform.Id) AS RomCount, (SELECT COUNT(*) AS GameCount FROM (SELECT DISTINCT Games_Roms.GameId AS ROMGameId, Games_Roms.PlatformId FROM Games_Roms LEFT JOIN Game ON Game.Id = Games_Roms.GameId) Game WHERE Game.PlatformId = Platform.Id) AS GameCount FROM Platform HAVING RomCount > 0 ORDER BY `Name`";
             DataTable dbResponse = db.ExecuteCMD(sql);
 
             foreach (DataRow dr in dbResponse.Rows)
             {
-                platforms.Add(Classes.Metadata.Platforms.GetPlatform((long)dr["id"]));
+                FilterPlatform platformItem = new FilterPlatform(Classes.Metadata.Platforms.GetPlatform((long)dr["id"]));
+                platformItem.RomCount = (int)(long)dr["RomCount"];
+                platformItem.GameCount = (int)(long)dr["GameCount"];
+                platforms.Add(platformItem);
+
             }
             FilterSet.Add("platforms", platforms);
 
@@ -80,5 +85,23 @@ namespace gaseous_server.Controllers
 
             return FilterSet;
         }
+
+        public class FilterPlatform : IGDB.Models.Platform
+        {
+            public FilterPlatform(Platform platform)
+            {
+                var properties = platform.GetType().GetProperties();
+                foreach (var prop in properties)
+                {
+                    if (prop.GetGetMethod() != null)
+                    {
+                        this.GetType().GetProperty(prop.Name).SetValue(this, prop.GetValue(platform));
+                    }
+                }
+            }
+
+            public int RomCount { get; set; }
+            public int GameCount { get; set; }
+        }
     }
 }

gaseous-server/wwwroot/pages/settings/system.html

@@ -222,7 +222,7 @@
 
             var legendLabel = document.createElement('div');
             legendLabel.className = 'legend_label';
-            legendLabel.innerHTML = LibraryStatistics[i].platform + '<br />' + formatBytes(LibraryStatistics[i].totalSize);
+            legendLabel.innerHTML = LibraryStatistics[i].platform + '<br />' + formatBytes(LibraryStatistics[i].totalSize) + '<br />Images: ' + LibraryStatistics[i].romCount;
 
             legend.appendChild(legendColour);
             legend.appendChild(legendLabel);

gaseous-server/wwwroot/scripts/filterformating.js

@@ -91,7 +91,17 @@ function buildFilterPanel(targetElement, headerString, friendlyHeaderString, val
         containerPanel.setAttribute('style', 'display: none;');
     }
     for (var i = 0; i < valueList.length; i++) {
-        containerPanel.appendChild(buildFilterPanelItem(headerString, valueList[i].id, valueList[i].name));
+        var tags;
+        switch(headerString) {
+            case 'platform':
+                tags = [
+                    {
+                        'label': valueList[i].gameCount
+                    }
+                ];
+                break;
+        }
+        containerPanel.appendChild(buildFilterPanelItem(headerString, valueList[i].id, valueList[i].name, tags));
     }
     targetElement.appendChild(containerPanel);
 }
@@ -142,7 +152,7 @@ function toggleFilterPanel(panelName) {
     setCookie("filter_panel_box_" + panelName, cookieVal);
 }
 
-function buildFilterPanelItem(filterType, itemString, friendlyItemString) {
+function buildFilterPanelItem(filterType, itemString, friendlyItemString, tags) {
     var checkCookie = getCookie('filter_panel_item_' + filterType + '_checkbox_' + itemString);
     var checkState = false;
     if (checkCookie) {
@@ -173,9 +183,12 @@ function buildFilterPanelItem(filterType, itemString, friendlyItemString) {
     filterPanelItemLabel.setAttribute('for', filterPanelItemCheckBoxItem.id);
     filterPanelItemLabel.innerHTML = friendlyItemString;
 
+    if (tags) {
+        filterPanelItem.appendChild(buildFilterTag(tags));
+    }
     filterPanelItem.appendChild(filterPanelItemCheckBox);
     filterPanelItem.appendChild(filterPanelItemLabel);
-
+    
     return filterPanelItem;
 }
 
@@ -265,4 +278,25 @@ function GetFilterQuery(filterName) {
     }
 
     return queryString;
+}
+
+function buildFilterTag(tags) {
+    // accepts an array of numbers + classes for styling (optional)
+    // example [ { label: "G: 13", class: "tag_Green" }, { label: "R: 17", class: "tag_Orange" } ]
+    
+    var boundingDiv = document.createElement('div');
+    boundingDiv.className = 'tagBox';
+
+    for (var i = 0; i < tags.length; i++) {
+        var tagBox = document.createElement('div');
+        tagBox.classList.add('tagBoxItem');
+        if (tags[i].class) {
+            tagBox.classList.add(tags[i].class);
+        }
+        tagBox.innerHTML = tags[i].label;
+
+        boundingDiv.appendChild(tagBox);
+    }
+
+    return boundingDiv;
 }

gaseous-server/wwwroot/styles/style.css

@@ -266,6 +266,7 @@ input[id='filter_panel_userrating_max'] {
 
 .filter_panel_item {
     display: flex;
+    position: relative;
     padding: 3px;
 }
 
@@ -273,6 +274,10 @@ input[id='filter_panel_userrating_max'] {
     margin-right: 10px;
 }
 
+.filter_panel_item_label {
+    margin-right: 15px;
+}
+
 #games_library {
     width: 90%;
     border-style: solid;
@@ -772,7 +777,7 @@ button:disabled {
 .legend_box {
     display: inline-block;
     width: 145px;
-    height: 50px;
+    height: 70px;
     vertical-align: top;
     margin-right: 5px;
     padding-right: 5px;
@@ -924,4 +929,27 @@ button:disabled {
 .null { color: magenta; }
 .key { color: greenyellow; }
 .brace { color: #888; }
-.square { color: #fff000; }
+.square { color: #fff000; }
+
+.tagBox {
+    position: absolute;
+    top: 0px;
+    right: 0px;
+    text-align: center;
+    font-size: 8px;
+}
+
+.tagBoxItem {
+    padding-left: 0px;
+    padding-right: 0px;
+    padding-top: 0px;
+    padding-bottom: 0px;
+    width: 10px;
+    height: 10px;
+    background-color: darkslategray;
+    color: white;
+    text-align: center;
+    border-radius: 5px;
+    border-color: darkslategray;
+    border-style: solid;
+}