sendnrw/gaseous-server
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add ability to set games/roms as favouriteFixes #49

Browse Source 
* Add ability to set games/roms as favourite
Fixes #49
This commit is contained in:
Michael Green
2024-02-08 12:47:22 +11:00
committed by GitHub
parent 73174a30f0
commit b5511a3c51
12 changed files with 287 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
gaseous-server/wwwroot/images/favourite-empty.svg Normal file
View File

@@ -0,0 +1,2 @@
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg fill="#000000" width="800px" height="800px" viewBox="0 0 24 24" id="favourite" data-name="Line Color" xmlns="http://www.w3.org/2000/svg" class="icon line-color"><path id="primary" d="M19.57,5.44a4.91,4.91,0,0,1,0,6.93L12,20,4.43,12.37A4.91,4.91,0,0,1,7.87,4a4.9,4.9,0,0,1,3.44,1.44,4.46,4.46,0,0,1,.69.88,4.46,4.46,0,0,1,.69-.88,4.83,4.83,0,0,1,6.88,0Z" style="fill: none; stroke: rgb(0, 0, 0); stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 597 B

2
gaseous-server/wwwroot/images/favourite-filled.svg Normal file
View File

@@ -0,0 +1,2 @@
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg fill="#000000" width="800px" height="800px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" id="favourite" class="icon glyph"><path d="M20.28,4.74a5.82,5.82,0,0,0-8.28,0,5.82,5.82,0,0,0-8.28,0,5.94,5.94,0,0,0,0,8.34l7.57,7.62a1,1,0,0,0,1.42,0l7.57-7.62a5.91,5.91,0,0,0,0-8.34Z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 422 B

59
gaseous-server/wwwroot/pages/game.html
View File

@@ -72,6 +72,12 @@
<span class="gamestatistics_label">Total Play Time</span>
<span id="gamestatistics_timeplayed_value" class="gamestatistics_value">-</span>
</div>
<div id="gamestatistics_favourite" class="gamestatistics_box">
<div id="gamestatistics_favourite_button">
</div>
</div>
</div>
<div id="gamesummarytext">
<span id="gamesummarytext_label" class="line-clamp-4"></span>
@@ -128,8 +134,6 @@
var selectedScreenshot = 0;
ajaxCall('/api/v1.1/Games/' + gameId, 'GET', function (result) {
console.log(result);
// populate games page
gameData = result;
@@ -290,6 +294,27 @@
}
});
// load favourites
ajaxCall('/api/v1.1/games/' + gameId + '/favourite', 'GET', function (result) {
var gameFavButton = document.getElementById('gamestatistics_favourite_button');
var gameFavIcon = document.createElement('img');
gameFavIcon.id = "gamestatistics_favourite";
gameFavIcon.className = "favouriteicon";
gameFavIcon.title = "Favourite";
gameFavIcon.alt = "Favourite";
if (result == true) {
gameFavIcon.setAttribute("src", '/images/favourite-filled.svg');
gameFavIcon.setAttribute('onclick', "SetGameFavourite(false);");
} else {
gameFavIcon.setAttribute("src", '/images/favourite-empty.svg');
gameFavIcon.setAttribute('onclick', "SetGameFavourite(true);");
}
gameFavButton.innerHTML = '';
gameFavButton.appendChild(gameFavIcon);
});
// load release date
var gameSummaryRelease = document.getElementById('gamesummary_firstrelease');
if (result.firstReleaseDate) {
@@ -503,7 +528,6 @@
if (result.length == 0) {
mediaGroup.style.display = 'none';
} else {
console.log(result);
mediaGroup.style.display = '';
mediaGroupDiv.innerHTML = '';
var mgTable = document.createElement('table');
@@ -999,12 +1023,9 @@
$('#rom_edit_fixplatform').on('select2:select', function (e) {
var platformData = e.params.data;
console.log(platformData);
var gameValue = $('#rom_edit_fixgame').select2('data');
if (gameValue) {
console.log(gameValue[0]);
setRomFixGameDropDown();
}
});
@@ -1170,4 +1191,30 @@
JSON.stringify(romIds)
);
}
function SetGameFavourite(status) {
ajaxCall(
'/api/v1.1/games/' + gameId + '/favourite?favourite=' + status,
'POST',
function (result) {
var gameFavButton = document.getElementById('gamestatistics_favourite_button');
var gameFavIcon = document.createElement('img');
gameFavIcon.id = "gamestatistics_favourite";
gameFavIcon.className = "favouriteicon";
gameFavIcon.title = "Favourite";
gameFavIcon.alt = "Favourite";
if (result == true) {
gameFavIcon.setAttribute("src", '/images/favourite-filled.svg');
gameFavIcon.setAttribute('onclick', "SetGameFavourite(false);");
} else {
gameFavIcon.setAttribute("src", '/images/favourite-empty.svg');
gameFavIcon.setAttribute('onclick', "SetGameFavourite(true);");
}
gameFavButton.innerHTML = '';
gameFavButton.appendChild(gameFavIcon);
}
);
}
</script>

7
gaseous-server/wwwroot/scripts/filterformating.js
View File

@@ -55,6 +55,11 @@ function formatFilterPanel(containerElement, result) {
"id": "savestatesavailable",
"name": "Game has save states avaialble",
"gameCount": 0
},
{
"id": "favourite",
"name": "Favourite",
"gameCount": 0
}
], true, true);
@@ -531,6 +536,7 @@ function executeFilter1_1(pageNumber, pageSize) {
model = {
"Name": document.getElementById('filter_panel_search').value,
"HasSavedGame": document.getElementById('filter_panel_item_settings_checkbox_savestatesavailable').checked,
"isFavourite": document.getElementById('filter_panel_item_settings_checkbox_favourite').checked,
"Platform": GetFilterQuery1_1('platform'),
"Genre": GetFilterQuery1_1('genre'),
"GameMode": GetFilterQuery1_1('gamemode'),
@@ -554,6 +560,7 @@ function executeFilter1_1(pageNumber, pageSize) {
"SortAscending": orderByDirection
}
};
console.log(model);
existingSearchModel = model;
} else {

10
gaseous-server/wwwroot/scripts/gamesformating.js
View File

@@ -330,6 +330,14 @@ function renderGameIcon(gameObject, showTitle, showRatings, showClassification,
gameImageBox.appendChild(gameSaveIcon);
}
// add favourite game icon
if (gameObject.isFavourite == true) {
var gameFavIcon = document.createElement('img');
gameFavIcon.src = '/images/favourite-filled.svg';
gameFavIcon.className = classes['game_tile_box_favouritegame favouriteicon'];
gameImageBox.appendChild(gameFavIcon);
}
if (gameObject.totalRating || displayClassification == true) {
var gameImageRatingBanner = document.createElement('div');
gameImageRatingBanner.className = classes['game_tile_box_ratingbanner'];
@@ -380,6 +388,7 @@ function getViewModeClasses(listView) {
"game_tile_image lazy": "game_tile_image lazy",
"game_tile_image unknown": "game_tile_image unknown",
"game_tile_box_savedgame savedstateicon": "game_tile_box_savedgame savedstateicon",
"game_tile_box_favouritegame favouriteicon": "game_tile_box_favouritegame favouriteicon",
"game_tile_box_ratingbanner": "game_tile_box_ratingbanner",
"rating_image_overlay": "rating_image_overlay",
"game_tile_label": "game_tile_label"
@@ -393,6 +402,7 @@ function getViewModeClasses(listView) {
"game_tile_image lazy": "game_tile_image_row lazy",
"game_tile_image unknown": "game_tile_image_row unknown",
"game_tile_box_savedgame savedstateicon": "game_tile_box_savedgame_row savedstateicon",
"game_tile_box_favouritegame favouriteicon": "game_tile_box_favouritegame_row favouriteicon",
"game_tile_box_ratingbanner": "game_tile_box_ratingbanner_row",
"rating_image_overlay": "rating_image_overlay_row",
"game_tile_label": "game_tile_label_row"

45
gaseous-server/wwwroot/styles/style.css
View File

@@ -671,6 +671,18 @@ input[name='filter_panel_range_max'] {
right: 10px;
}
.game_tile_box_favouritegame {
position: absolute;
top: 1px;
left: 5px;
}
.game_tile_box_favouritegame_row {
position: absolute;
top: 30%;
right: 10px;
}
.game_tile_image {
max-width: 200px;
min-width: 150px;
@@ -930,6 +942,31 @@ iframe {
padding: 3px;
}
#gamestatistics_favourite {
float: right;
}
#gamestatistics_favourite_button {
margin: 5px;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 2px;
padding-right: 7px;
width: 30px;
height: 30px;
text-align: center;
background-color: rgba(56, 56, 56, 0.3);
border-radius: 5px;
border-style: solid;
border-color: transparent;
border-width: 0px;
cursor: pointer;
}
#gamestatistics_favourite_button:hover {
background-color: rgba(56, 56, 56, 0.9);
}
#gamesummarytext_label {
}
@@ -969,6 +1006,14 @@ table .romrow:nth-child(odd) {
cursor: pointer;
}
.favouriteicon {
height: 24px;
width: 24px;
margin-top: 4px;
cursor: pointer;
filter: invert(11%) sepia(100%) saturate(6854%) hue-rotate(359deg) brightness(103%) contrast(122%) drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4));
}
th {
text-align: left;
padding: 5px;