This commit is contained in:
Bozhidar 2024-04-26 21:53:15 +03:00
parent 8d231bf1b3
commit 85354f3b63
2 changed files with 75 additions and 54 deletions

View file

@ -16,6 +16,9 @@ class Modules extends Page
protected static ?int $navigationSort = 1;
public $installLogPulling = false;
public $installLog = '';
protected function getViewData(): array
{
@ -54,44 +57,18 @@ class Modules extends Page
'categories' => $modules,
];
}
return [
'categories' => [
'Security' => [
[
'name' => 'Lets Encrypt',
'description' => 'Automatically secure your website with a free SSL certificate from Lets Encrypt.',
'url' => url('admin/letsencrypt'),
'iconUrl' => url('images/modules/letsencrypt.png'),
'category' => 'Security',
],
],
'Content Management' => [
[
'name' => 'Microweber',
'description' => 'A drag and drop website builder and a powerful next-generation CMS.',
'url' => url('admin/microweber'),
'iconUrl' => url('images/modules/microweber.png'),
'category' => 'Content Management',
],
[
'name' => 'WordPress',
'description' => 'WordPress is a free and open-source content management system written in PHP and paired with a MySQL or MariaDB database.',
'url' => url('admin/wordpress'),
'iconUrl' => url('images/modules/wordpress.svg'),
'category' => 'Content Management',
],
],
'E-Commerce' => [
[
'name' => 'OpenCart',
'description' => 'A free shopping cart system. OpenCart is an open source PHP-based online e-commerce solution.',
'url' => url('admin/opencart'),
'iconUrl' => url('images/modules/opencart.png'),
'category' => 'E-Commerce',
],
],
],
];
public function getInstallLog()
{
$this->installLog = time();
}
public function openInstallModal($module)
{
$this->installLogPulling = true;
$this->dispatch('open-modal', id: 'install-module-modal', props: ['module' => $module]);
}
}

View file

@ -1,5 +1,33 @@
<x-filament-panels::page>
<x-filament::modal width="4xl" id="install-module-modal">
<x-filament::modal.heading>
Install Module
</x-filament::modal.heading>
<x-filament::modal.description>
<div class="">
@if ($this->installLogPulling)
<div class="w-full">
<div id="js-install-log" wire:poll="getInstallLog"
class="text-left text-sm font-medium text-gray-950 dark:text-yellow-500 h-[20rem] overflow-y-scroll">
{!! $this->installLog !!}
</div>
<script>
window.setInterval(function() {
var elem = document.getElementById('js-install-log');
elem.scrollTop = elem.scrollHeight;
}, 2000);
</script>
</div>
@endif
</div>
</x-filament::modal.description>
</x-filament::modal>
<div class="">
@foreach($categories as $categoryName=>$modules)
@ -10,31 +38,47 @@
<div class="grid grid-cols-3 gap-6 mb-6">
@foreach($modules as $module)
<x-filament::section>
<a href="{{$module['url']}}">
<div class="flex gap-3">
<div class="sm:flex gap-2 px-6 py-6 rounded-xl bg-white shadow-sm ring-1 ring-gray-950/5 dark:bg-gray-900 dark:ring-white/10">
<div class="mb-2">
<div class="w-12">
<x-filament::icon :icon="$module['logoIcon']"
class="w-12 h-12 text-primary-500"/>
</div>
</div>
<div class="flex justify-between w-full">
<div class="flex flex-col">
<p>
{{$module['name']}}
</p>
<div class="flex flex-col ">
<p>
{{$module['name']}}
</p>
<p class="text-xs mt-1">
{{$module['category']}}
</p>
<p class="text-xs mt-1">
{{$module['category']}}
</p>
</div>
<div>
<x-filament::dropdown>
<x-slot name="trigger">
<button>
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" viewBox="0 0 20 20">
<path fill="currentColor" d="M10 6a1.25 1.25 0 1 1 0-2.5A1.25 1.25 0 0 1 10 6m0 5.25a1.25 1.25 0 1 1 0-2.5a1.25 1.25 0 0 1 0 2.5m-1.25 4a1.25 1.25 0 1 0 2.5 0a1.25 1.25 0 0 0-2.5 0"></path>
</svg>
</button>
</x-slot>
<x-filament::dropdown.list>
<x-filament::dropdown.list.item wire:click="openInstallModal('{{$module['name']}}')">
<div class="flex gap-2 items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" viewBox="0 0 24 24">
<path fill="currentColor" d="M11 2v5H8l4 4l4-4h-3V2h7a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1zm8 14H5v4h14zm-2 1v2h-2v-2z"></path>
</svg>
Install
</div>
</x-filament::dropdown.list.item>
</x-filament::dropdown.list>
</x-filament::dropdown>
</div>
</div>
</div>
</a>
</x-filament::section>
</div>
@endforeach
</div>