feat: first pass at filter and game screen + some bug fixes

gaseous-server/Classes/Metadata/Storage.cs

@@ -77,13 +77,16 @@ namespace gaseous_server.Classes.Metadata
 				{
 					fieldList = fieldList + ", ";
 					valueList = valueList + ", ";
-					updateFieldValueList = updateFieldValueList + ", ";
 				}
 				fieldList = fieldList + key.Key;
 				valueList = valueList + "@" + key.Key;
 				if ((key.Key != "id") && (key.Key != "dateAdded"))
-				{
-					updateFieldValueList = key.Key + " = @" + key.Key;
+                {
+                    if (updateFieldValueList.Length > 0)
+                    {
+                        updateFieldValueList = updateFieldValueList + ", ";
+                    }
+                    updateFieldValueList += key.Key + " = @" + key.Key;
 				}
 
 				// check property type

gaseous-server/Classes/MetadataManagement.cs

@@ -14,8 +14,15 @@ namespace gaseous_server.Classes
 
 			foreach (DataRow dr in dt.Rows)
 			{
-				Logging.Log(Logging.LogType.Information, "Metadata Refresh", "Refreshing metadata for game " + dr["name"] + " (" + dr["id"] + ")");
-				Metadata.Games.GetGame((long)dr["id"], true, forceRefresh);
+				try
+				{
+					Logging.Log(Logging.LogType.Information, "Metadata Refresh", "Refreshing metadata for game " + dr["name"] + " (" + dr["id"] + ")");
+					Metadata.Games.GetGame((long)dr["id"], true, forceRefresh);
+				}
+				catch (Exception ex)
+				{
+					Logging.Log(Logging.LogType.Critical, "Metadata Refresh", "An error occurred while refreshing metadata for " + dr["name"], ex);
+				}
 			}
         }
 	}

gaseous-server/Classes/Roms.cs

@@ -81,7 +81,9 @@ namespace gaseous_server.Classes
 
             Database db = new gaseous_tools.Database(Database.databaseType.MySql, Config.DatabaseConfiguration.ConnectionString);
             string sql = "DELETE FROM games_roms WHERE id = @id";
-			db.ExecuteCMD(sql);
+			Dictionary<string, object> dbDict = new Dictionary<string, object>();
+			dbDict.Add("id", RomId);
+			db.ExecuteCMD(sql, dbDict);
         }
 
 		private static GameRomItem BuildRom(DataRow romDR)

gaseous-server/Controllers/GamesController.cs

@@ -136,11 +136,11 @@ namespace gaseous_server.Controllers
         [Route("{GameId}")]
         [ProducesResponseType(typeof(Game), StatusCodes.Status200OK)]
         [ProducesResponseType(StatusCodes.Status404NotFound)]
-        public ActionResult Game(long GameId)
+        public ActionResult Game(long GameId, bool forceRefresh = false)
         {
             try
             {
-                IGDB.Models.Game gameObject = Classes.Metadata.Games.GetGame(GameId, false, false);
+                IGDB.Models.Game gameObject = Classes.Metadata.Games.GetGame(GameId, false, forceRefresh);
 
                 if (gameObject != null)
                 {

gaseous-server/gaseous-server.csproj

@@ -9,6 +9,10 @@
 
   <PropertyGroup Condition=" '$(RunConfiguration)' == 'https' " />
   <PropertyGroup Condition=" '$(RunConfiguration)' == 'http' " />
+  <PropertyGroup Condition=" '$(Configuration)|$(Platform)' == 'Debug|AnyCPU' ">
+    <WarningLevel>4</WarningLevel>
+    <DocumentationFile>bin\Debug\net7.0\gaseous-server.xml</DocumentationFile>
+  </PropertyGroup>
   <ItemGroup>
     <PackageReference Include="Microsoft.AspNetCore.OpenApi" Version="7.0.7" />
     <PackageReference Include="Swashbuckle.AspNetCore" Version="6.5.0" />
@@ -62,6 +66,9 @@
     <Folder Include="Assets\Ratings\ESRB\" />
     <Folder Include="Assets\Ratings\ACB\" />
     <Folder Include="Assets\Ratings\PEGI\" />
+    <Folder Include="wwwroot\scripts\" />
+    <Folder Include="wwwroot\images\" />
+    <Folder Include="wwwroot\styles\" />
   </ItemGroup>
   <ItemGroup>
     <ProjectReference Include="..\gaseous-tools\gaseous-tools.csproj">
@@ -78,6 +85,9 @@
     <Content Remove="Support\PlatformMap.json" />
     <Content Remove="wwwroot\" />
     <Content Remove="wwwroot\index.html" />
+    <Content Remove="wwwroot\scripts\" />
+    <Content Remove="wwwroot\images\" />
+    <Content Remove="wwwroot\styles\" />
   </ItemGroup>
   <ItemGroup>
     <EmbeddedResource Include="Support\PlatformMap.json" Condition="'$(ExcludeConfigFilesFromBuildOutput)'!='true'">

gaseous-server/wwwroot/index.html

@@ -2,9 +2,35 @@
 <html>
 <head>
     <meta charset="utf-8" />
-    <title></title>
+    <link type="text/css" rel="stylesheet" href="/styles/style.css" />
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+    <script src="/scripts/main.js" type="text/javascript"></script>
+    <script src="/scripts/filterformating.js" type="text/javascript"></script>
+    <script src="/scripts/gamesformating.js" type="text/javascript"></script>
+    <title>Gaseous</title>
 </head>
 <body>
-    Hello World!
+    <div id="banner_icon">
+        <img src="/images/logo.png" alt="Gaseous" id="banner_icon_image" />
+    </div>
+    <div id="banner_header">
+        <div id="banner_header_label"></div>
+    </div>
+
+    <div id="content">
+        <div id="games_filter"></div>
+        <div id="games_library"></div>
+    </div>
+    <script type="text/javascript">
+        ajaxCall('/api/v1/Filter', 'GET', function (result) {
+            var filterElement = document.getElementById('games_filter');
+            formatFilterPanel(filterElement, result);
+        });
+
+        ajaxCall('/api/v1/Games', 'GET', function (result) {
+            var gameElement = document.getElementById('games_library');
+            formatGamesPanel(gameElement, result);
+        });
+    </script>
 </body>
 </html>

gaseous-server/wwwroot/scripts/filterformating.js

@@ -0,0 +1,76 @@
+function formatFilterPanel(targetElement, result) {
+    var panel = document.createElement('div');
+    panel.id = 'filter_panel_box';
+
+    panel.appendChild(buildFilterPanelHeader('filter', 'Filter'));
+
+    var containerPanelSearch = document.createElement('div');
+    containerPanelSearch.className = 'filter_panel_box';
+    var containerPanelSearchField = document.createElement('input');
+    containerPanelSearchField.type = 'text';
+    containerPanelSearch.appendChild(containerPanelSearchField);
+
+    panel.appendChild(containerPanelSearch);
+
+    if (result.platforms) {
+        panel.appendChild(buildFilterPanelHeader('platforms', 'Platforms'));
+
+        var containerPanelPlatform = document.createElement('div');
+        containerPanelPlatform.className = 'filter_panel_box';
+        for (var i = 0; i < result.platforms.length; i++) {
+            containerPanelPlatform.appendChild(buildFilterPanelItem(result.platforms[i].id, result.platforms[i].name));
+        }
+        panel.appendChild(containerPanelPlatform);
+
+        targetElement.appendChild(panel);
+    }
+
+    if (result.genres) {
+        panel.appendChild(buildFilterPanelHeader('genres', 'Genres'));
+
+        var containerPanelGenres = document.createElement('div');
+        containerPanelGenres.className = 'filter_panel_box';
+        for (var i = 0; i < result.genres.length; i++) {
+            containerPanelGenres.appendChild(buildFilterPanelItem(result.genres[i].id, result.genres[i].name));
+        }
+        panel.appendChild(containerPanelGenres);
+
+        targetElement.appendChild(panel);
+    }
+
+    
+}
+
+function buildFilterPanelHeader(headerString, friendlyHeaderString) {
+    var header = document.createElement('div');
+    header.id = 'filter_panel_header_' + headerString;
+    header.className = 'filter_header';
+    header.innerHTML = friendlyHeaderString;
+
+    return header;
+}
+
+function buildFilterPanelItem(itemString, friendlyItemString) {
+    var filterPanelItem = document.createElement('div');
+    filterPanelItem.id = 'filter_panel_item_' + itemString;
+    filterPanelItem.className = 'filter_panel_item';
+
+    var filterPanelItemCheckBox = document.createElement('div');
+
+    var filterPanelItemCheckBoxItem = document.createElement('input');
+    filterPanelItemCheckBoxItem.id = 'filter_panel_item_checkbox_' + itemString;
+    filterPanelItemCheckBoxItem.type = 'checkbox';
+    filterPanelItemCheckBoxItem.className = 'filter_panel_item_checkbox';
+    filterPanelItemCheckBox.appendChild(filterPanelItemCheckBoxItem);
+
+    var filterPanelItemLabel = document.createElement('label');
+    filterPanelItemLabel.id = 'filter_panel_item_label_' + itemString;
+    filterPanelItemLabel.className = 'filter_panel_item_label';
+    filterPanelItemLabel.setAttribute('for', filterPanelItemCheckBoxItem.id);
+    filterPanelItemLabel.innerHTML = friendlyItemString;
+
+    filterPanelItem.appendChild(filterPanelItemCheckBox);
+    filterPanelItem.appendChild(filterPanelItemLabel);
+
+    return filterPanelItem;
+}

gaseous-server/wwwroot/scripts/gamesformating.js

@@ -0,0 +1,41 @@
+function formatGamesPanel(targetElement, result) {
+    for (var i = 0; i < result.length; i++) {
+        var game = renderGameIcon(result[i], true, false);
+        targetElement.appendChild(game);
+    }
+}
+
+function renderGameIcon(gameObject, showTitle, showRatings) {
+    var gameBox = document.createElement('div');
+    gameBox.className = 'game_tile';
+
+    var gameImage = document.createElement('img');
+    gameImage.className = 'game_tile_image';
+    if (gameObject.cover) {
+        gameImage.src = '/api/v1/Games/' + gameObject.id + '/cover/image';
+    } else {
+        gameImage.src = '/images/unknowngame.png';
+        gameImage.className = 'game_tile_image unknown';
+    }
+    gameBox.appendChild(gameImage);
+
+    if (showTitle == true) {
+        var gameBoxTitle = document.createElement('div');
+        gameBoxTitle.class = 'game_tile_label';
+        gameBoxTitle.innerHTML = gameObject.name;
+        gameBox.appendChild(gameBoxTitle);
+    }
+
+    if (showRatings == true) {
+        if (gameObject.ageRatings) {
+            for (var i = 0; i < gameObject.ageRatings.ids.length; i++) {
+                var ratingImage = document.createElement('img');
+                ratingImage.src = '/api/v1/Games/' + gameObject.id + '/agerating/' + gameObject.ageRatings.ids[i] + '/image';
+                ratingImage.className = 'rating_image_mini';
+                gameBox.appendChild(ratingImage);
+            }
+        }
+    }
+
+    return gameBox;
+}

gaseous-server/wwwroot/scripts/main.js

@@ -0,0 +1,24 @@
+function ajaxCall(endpoint, method, successFunction) {
+    $.ajax({
+
+        // Our sample url to make request
+        url:
+            endpoint,
+
+        // Type of Request
+        type: method,
+
+        // Function to call when to
+        // request is ok
+        success: function (data) {
+            var x = JSON.stringify(data);
+            console.log(x);
+            successFunction(data);
+        },
+
+        // Error handling
+        error: function (error) {
+            console.log(`Error ${error}`);
+        }
+    });
+}

gaseous-server/wwwroot/styles/style.css

@@ -0,0 +1,121 @@
+body {
+    background-color: #383838;
+    color: white;
+    font-family: "PT Sans", Arial, Helvetica, sans-serif;
+    font-kerning: normal;
+    font-style: normal;
+    font-weight: 100;
+    font-size: 13px;
+}
+
+#banner_icon {
+    background-color: white;
+    position: fixed;
+    top: 0px;
+    left: 0px;
+    width: 40px;
+    height: 40px;
+    align-items: center;
+    justify-content: center;
+    padding: 0px;
+    margin: 0px;
+    display: flex;
+}
+
+#banner_icon_image {
+    width: 30px;
+    height: 30px;
+}
+
+#banner_header {
+    background-color: #001638;
+    position: fixed;
+    top: 0px;
+    left: 40px;
+    height: 40px;
+    right: 0px;
+    align-items: center;
+    display: flex;
+}
+
+#banner_header_label {
+    display: inline;
+    padding: 10px;
+    font-size: 18pt;
+    font-weight: 700;
+    color: #edeffa;
+}
+
+#content {
+    display: flex;
+    padding-top: 45px;
+    padding-left: 5px;
+    padding-right: 5px;
+}
+
+#games_filter {
+    width: 200px;
+    border-style: solid;
+    border-width: 1px;
+    border-color: #2b2b2b;
+    margin-right: 10px;
+}
+
+.filter_header {
+    padding: 10px;
+    background-color: #2b2b2b;
+}
+
+.filter_panel_box {
+    padding: 10px;
+}
+
+.filter_panel_item {
+    display: flex;
+    padding: 3px;
+}
+
+.filter_panel_item_checkbox {
+    margin-right: 10px;
+}
+
+#games_library {
+    width: 90%;
+    border-style: solid;
+    border-width: 1px;
+    border-color: #2b2b2b;
+    padding: 10px;
+}
+
+.game_tile {
+    padding: 5px;
+    display: inline-block;
+    width: 220px;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    vertical-align: top;
+    margin-bottom: 10px;
+}
+
+.game_tile:hover {
+    cursor: pointer;
+    text-decoration: underline;
+    background-color: #2b2b2b;
+}
+
+.game_tile_image {
+    max-width: 200px;
+    max-height: 200px;
+}
+
+.game_tile_image, .unknown {
+    background-color: white;
+}
+
+.rating_image_mini {
+    display: inline-block;
+    max-width: 32px;
+    max-height: 32px;
+    margin-right: 2px;
+}

gaseous-signature-ingestor/gaseous-signature-ingestor.csproj.user

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<Project xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
+  <PropertyGroup Condition=" '$(RunConfiguration)' == 'Default' ">
+    <StartAction>Project</StartAction>
+    <StartArguments>-tosecpath ~/Downloads/TOSEC\ -\ DAT\ Pack\ -\ Complete\ \(3764\)\ \(TOSEC-v2023-01-23\)/TOSEC/</StartArguments>
+    <ExternalConsole>true</ExternalConsole>
+  </PropertyGroup>
+</Project>

gaseous-tools/Database/MySQL/gaseous-1000.sql

@@ -65,7 +65,7 @@ CREATE TABLE `alternativename` (
   `id` bigint NOT NULL,
   `checksum` varchar(45) DEFAULT NULL,
   `comment` longtext,
-  `game` int DEFAULT NULL,
+  `game` bigint DEFAULT NULL,
   `name` varchar(255) DEFAULT NULL,
   `dateAdded` datetime DEFAULT NULL,
   `lastUpdated` datetime DEFAULT NULL,