You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
153 lines
8.4 KiB
PHTML
153 lines
8.4 KiB
PHTML
2 years ago
|
<x-layout>
|
||
|
|
<x-slot name="scripts">
|
||
|
|
|
||
|
|
<script>
|
||
|
|
|
||
|
|
document.addEventListener('livewire:load', function () {
|
||
|
|
Livewire.on('gameSelected', function (game) {
|
||
|
|
populateGameDetails(game);
|
||
|
|
});
|
||
|
|
});
|
||
|
|
// Get the game details and populate the form
|
||
|
|
function populateGameDetails(game) {
|
||
|
|
// Update the form fields with game details
|
||
|
|
console.log(game);
|
||
|
|
document.getElementById("game_name").value = game['name'];
|
||
|
|
document.getElementById("category").value = formatCategoryToHumanReadable(game.category);
|
||
|
|
document.getElementById("summary").value = game.summary;
|
||
|
|
//document.getElementById("summary").value = "php translate(':summary', 'de') ".replace(':summary', game.summary);
|
||
|
|
|
||
|
|
document.getElementById("release_dates").value = game.release_dates;
|
||
|
|
document.getElementById("platforms").value = formatCollectPlatformAbbreviations(game.platforms);
|
||
|
|
document.getElementById("genres").value = game.genres;
|
||
|
|
|
||
|
|
//document.querySelector('[alt="Game Cover "]').src = game.cover_image_path;
|
||
|
|
}
|
||
|
|
|
||
|
|
function formatCategoryToHumanReadable(category) {
|
||
|
|
let formatedCategory = "";
|
||
|
|
switch (category) {
|
||
|
|
case 0 :
|
||
|
|
formatedCategory = "main_game";
|
||
|
|
break;
|
||
|
|
case 1 :
|
||
|
|
formatedCategory = "dlc_addon";
|
||
|
|
break;
|
||
|
|
case 2 :
|
||
|
|
formatedCategory = "expansion";
|
||
|
|
break;
|
||
|
|
case 3 :
|
||
|
|
formatedCategory = "bundle";
|
||
|
|
break;
|
||
|
|
case 4 :
|
||
|
|
formatedCategory = "standalone_expansion";
|
||
|
|
break;
|
||
|
|
case 5 :
|
||
|
|
formatedCategory = "mod";
|
||
|
|
break;
|
||
|
|
case 6 :
|
||
|
|
formatedCategory = "episode";
|
||
|
|
break;
|
||
|
|
case 7 :
|
||
|
|
formatedCategory = "season";
|
||
|
|
break;
|
||
|
|
case 8 :
|
||
|
|
formatedCategory = "remake";
|
||
|
|
break;
|
||
|
|
case 9 :
|
||
|
|
formatedCategory = "remaster";
|
||
|
|
break;
|
||
|
|
case 10 :
|
||
|
|
formatedCategory = "expanded_game";
|
||
|
|
break;
|
||
|
|
case 11 :
|
||
|
|
formatedCategory = "port";
|
||
|
|
break;
|
||
|
|
case 12 :
|
||
|
|
formatedCategory = "fork";
|
||
|
|
break;
|
||
|
|
case 13 :
|
||
|
|
formatedCategory = "pack";
|
||
|
|
break;
|
||
|
|
case 14 :
|
||
|
|
formatedCategory = "update";
|
||
|
|
break;
|
||
|
|
default :
|
||
|
|
formatedCategory = "undefined";
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
return formatedCategory;
|
||
|
|
}
|
||
|
|
|
||
|
|
function formatCollectPlatformAbbreviations(platforms) {
|
||
|
|
let formatedPlatformString = ""
|
||
|
|
|
||
|
|
platforms.forEach(platform => {
|
||
|
|
formatedPlatformString = formatedPlatformString + platform.abbreviation + ', ';
|
||
|
|
});
|
||
|
|
|
||
|
|
return formatedPlatformString;
|
||
|
|
}
|
||
|
|
|
||
|
|
</script>
|
||
|
|
</x-slot>
|
||
|
|
<x-slot name="title">Link a Game</x-slot>
|
||
|
|
|
||
|
|
<x-slot name="content">
|
||
|
|
<div class="p-4 sm:ml-64">
|
||
|
|
<div class="p-4 mb-5 border-2 border-gray-200 border-dashed rounded-lg dark:border-gray-700 mt-14">
|
||
|
|
<h1 class="font-semibold tracking-wide text-left text-blue-500 uppercase">Link Game</h1>
|
||
|
|
|
||
|
|
<form method="POST" action="{{ route('games.store') }}">
|
||
|
|
@csrf
|
||
|
|
<div class="grid grid-cols-1 gap-4 mt-2">
|
||
|
|
<div>
|
||
|
|
<label for="name" class="block text-sm font-medium text-gray-700 dark:text-gray-400">Game Name</label>
|
||
|
|
<div id='dropdown' class="flex">
|
||
|
|
<livewire:search-dropdown>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="p-4 mt-4 border-2 border-gray-200 border-dashed rounded-lg dark:border-gray-700">
|
||
|
|
<h2 class="font-semibold tracking-wide text-left text-blue-500 uppercase">Game Details</h2>
|
||
|
|
<div class="grid grid-cols-1 gap-4 mt-2">
|
||
|
|
<div>
|
||
|
|
<label for="game_name" class="block text-sm font-medium text-gray-700 dark:text-gray-400">Game Name</label>
|
||
|
|
<input type="text" name="game_name" id="game_name" x-model="gameDetails.name" readonly class="w-full p-2 border-gray-300 rounded-md focus:border-blue-500 focus:outline-none focus:shadow-outline-blue dark:bg-gray-700 dark:text-gray-100 dark:border-gray-600">
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<img x-bind:src="gameDetails.cover_image_path" alt="Game Cover " class="mt-2">
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<label for="category" class="block text-sm font-medium text-gray-700 dark:text-gray-400">Category</label>
|
||
|
|
<textarea name="category" id="category" placeholder="" x-model="gameDetails.category" readonly rows="3" class="w-full p-2 border-gray-300 rounded-md focus:border-blue-500 focus:outline-none focus:shadow-outline-blue dark:bg-gray-700 dark:text-gray-100 dark:border-gray-600"></textarea>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<label for="summary" class="block text-sm font-medium text-gray-700 dark:text-gray-400">summary</label>
|
||
|
|
<textarea name="summary" id="summary" placeholder="" x-model="gameDetails.summary" readonly rows="3" class="w-full p-2 border-gray-300 rounded-md focus:border-blue-500 focus:outline-none focus:shadow-outline-blue dark:bg-gray-700 dark:text-gray-100 dark:border-gray-600"></textarea>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<label for="release_dates" class="block text-sm font-medium text-gray-700 dark:text-gray-400">Release Dates</label>
|
||
|
|
<input type="text" name="release_dates" id="release_dates" x-model="gameDetails.release_dates" readonly class="w-full p-2 border-gray-300 rounded-md focus:border-blue-500 focus:outline-none focus:shadow-outline-blue dark:bg-gray-700 dark:text-gray-100 dark:border-gray-600">
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<label for="platforms" class="block text-sm font-medium text-gray-700 dark:text-gray-400">Platforms</label>
|
||
|
|
<input type="text" name="platforms" id="platforms" x-model="gameDetails.platforms" readonly class="w-full p-2 border-gray-300 rounded-md focus:border-blue-500 focus:outline-none focus:shadow-outline-blue dark:bg-gray-700 dark:text-gray-100 dark:border-gray-600">
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<label for="genres" class="block text-sm font-medium text-gray-700 dark:text-gray-400">Genres</label>
|
||
|
|
<input type="text" name="genres" id="genres" x-model="gameDetails.genres" readonly class="w-full p-2 border-gray-300 rounded-md focus:border-blue-500 focus:outline-none focus:shadow-outline-blue dark:bg-gray-700 dark:text-gray-100 dark:border-gray-600">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<button type="submit" class="px-4 py-2 mt-2 text-white bg-blue-500 rounded-md hover:bg-blue-600 focus:outline-none focus:bg-blue-600">Link Game</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</x-slot>
|
||
|
|
</x-layout>
|