einundzwanzig/einundzwanzig-portal
1
0
Fork 0
mirror of https://github.com/Einundzwanzig-Podcast/einundzwanzig-portal.git synced 2025-12-11 06:46:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

plebchat added

Browse Source
This commit is contained in:
Benjamin Takats
2023-01-19 17:34:28 +01:00
parent 293980e37b
commit 3cb11c2de2
21 changed files with 349 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
app/Events/ChatMessageSentEvent.php Normal file
View File

@@ -0,0 +1,32 @@
<?php
namespace App\Events;
use Illuminate\Broadcasting\Channel;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Queue\SerializesModels;
class ChatMessageSentEvent implements ShouldBroadcast
{
use Dispatchable, InteractsWithSockets, SerializesModels;
/**
* Create a new event instance.
* @return void
*/
public function __construct()
{
//
}
/**
* Get the channels the event should broadcast on.
* @return \Illuminate\Broadcasting\Channel|array
*/
public function broadcastOn()
{
return new Channel('plebchannel');
}
}

2
app/Events/PlebLoggedInEvent.php
View File

@@ -27,6 +27,6 @@ class PlebLoggedInEvent implements ShouldBroadcast
*/
public function broadcastOn()
{
return new Channel('login');
return new Channel('plebchannel');
}
}

5
app/Http/Livewire/BookCase/HighscoreTable.php
View File

@@ -34,6 +34,11 @@ class HighscoreTable extends Component
]);
}
public function toggleChat()
{
$this->emit('toggleHighscoreChat');
}
public function openModal($id)
{
$this->modal = User::query()

68
app/Http/Livewire/Chat/HighscoreChat.php Normal file
View File

@@ -0,0 +1,68 @@
<?php
namespace App\Http\Livewire\Chat;
use App\Events\ChatMessageSentEvent;
use Livewire\Component;
class HighscoreChat extends Component
{
public bool $open = false;
public array $messages = [];
public string $myNewMessage = '';
public function rules()
{
return [
'myNewMessage' => 'required|min:1|max:255',
];
}
public function getListeners()
{
return [
'toggleHighscoreChat' => 'toggle',
'echo:plebchannel,.App\Events\ChatMessageSentEvent' => 'chatMessageSent',
];
}
public function mount()
{
$this->messages = cache()->get('highscore_chat_messages', []);
}
public function toggle()
{
$this->open = !$this->open;
}
public function chatMessageSent()
{
$this->messages = cache()->get('highscore_chat_messages', []);
$this->dispatchBrowserEvent('chat-updated');
}
public function sendMessage()
{
$this->validate();
$newMessages = collect($this->messages)
->push([
'fromId' => auth()->id(),
'fromName' => str(auth()->user()->name)->initials(),
'userImg' => str(auth()->user()->profile_photo_url)->replace('background=EBF4FF', 'background=F7931A'),
'message' => $this->myNewMessage,
'time' => now()->asDateTime(),
])
->toArray();
cache()->set('highscore_chat_messages', $newMessages);
event(new ChatMessageSentEvent());
$this->messages = $newMessages;
$this->myNewMessage = '';
}
public function render()
{
return view('livewire.chat.highscore-chat');
}
}

2
app/Http/Livewire/LaravelEcho.php
View File

@@ -9,7 +9,7 @@ class LaravelEcho extends Component
{
use Actions;
protected $listeners = ['echo:login,.App\Events\PlebLoggedInEvent' => 'plebLoggedIn'];
protected $listeners = ['echo:plebchannel,.App\Events\PlebLoggedInEvent' => 'plebLoggedIn'];
public function plebLoggedIn($data)
{

1
package.json
View File

@@ -8,6 +8,7 @@
},
"devDependencies": {
"@alpinejs/collapse": "^3.10.5",
"@alpinejs/intersect": "^3.11.1",
"@tailwindcss/forms": "^0.5.2",
"@tailwindcss/typography": "^0.5.0",
"alpinejs": "^3.0.6",

2
resources/js/app.js
View File

@@ -2,8 +2,10 @@ import './bootstrap';
import Alpine from 'alpinejs';
import collapse from '@alpinejs/collapse'
import intersect from '@alpinejs/intersect'
window.Alpine = Alpine;
Alpine.plugin(collapse)
Alpine.plugin(intersect)
Alpine.start();

7
resources/lang/de.json
View File

@@ -667,5 +667,10 @@
"Click to connect": "Direkt verbinden",
"Scan this code or copy & paste it to your lightning wallet. Or click to login with your wallet.": "Scanne diesen QR-Code oder kopiere ihn in deine Lightning-Wallet. Oder klicke, um dich mit deiner Wallet einzuloggen.",
"Entries": "Einträge",
"Payment Required": "Zahlung erforderlich"
"Payment Required": "Zahlung erforderlich",
"Parent": "Übergeordnet",
"PlebChat": "",
"Close panel": "Schließe Panel",
"This chat is limited by 100 messages.": "Dieser Chat ist auf 100 Nachrichten begrenzt. Die ältesten Nachrichten werden gelöscht und die Nachrichten werden nicht gespeichert.",
"Send": "Senden"
}

7
resources/lang/en.json
View File

@@ -661,5 +661,10 @@
"Click to connect": "",
"Scan this code or copy & paste it to your lightning wallet. Or click to login with your wallet.": "",
"Entries": "",
"Payment Required": ""
"Payment Required": "",
"Parent": "",
"PlebChat": "",
"Close panel": "",
"This chat is limited by 100 messages.": "",
"Send": ""
}

7
resources/lang/es.json
View File

@@ -661,5 +661,10 @@
"Node Id": "",
"Scan this code or copy & paste it to your lightning wallet. Or click to login with your wallet.": "",
"Entries": "",
"Payment Required": ""
"Payment Required": "",
"Parent": "",
"PlebChat": "",
"Close panel": "",
"This chat is limited by 100 messages.": "",
"Send": ""
}

7
resources/lang/fr.json
View File

@@ -661,5 +661,10 @@
"Node Id": "",
"Scan this code or copy & paste it to your lightning wallet. Or click to login with your wallet.": "",
"Entries": "",
"Payment Required": ""
"Payment Required": "",
"Parent": "",
"PlebChat": "",
"Close panel": "",
"This chat is limited by 100 messages.": "",
"Send": ""
}

7
resources/lang/hr.json
View File

@@ -661,5 +661,10 @@
"Node Id": "",
"Scan this code or copy & paste it to your lightning wallet. Or click to login with your wallet.": "",
"Entries": "",
"Payment Required": ""
"Payment Required": "",
"Parent": "",
"PlebChat": "",
"Close panel": "",
"This chat is limited by 100 messages.": "",
"Send": ""
}

7
resources/lang/it.json
View File

@@ -661,5 +661,10 @@
"Node Id": "",
"Scan this code or copy & paste it to your lightning wallet. Or click to login with your wallet.": "",
"Entries": "",
"Payment Required": ""
"Payment Required": "",
"Parent": "",
"PlebChat": "",
"Close panel": "",
"This chat is limited by 100 messages.": "",
"Send": ""
}

7
resources/lang/mk.json
View File

@@ -661,5 +661,10 @@
"Node Id": "",
"Scan this code or copy & paste it to your lightning wallet. Or click to login with your wallet.": "",
"Entries": "",
"Payment Required": ""
"Payment Required": "",
"Parent": "",
"PlebChat": "",
"Close panel": "",
"This chat is limited by 100 messages.": "",
"Send": ""
}

7
resources/lang/pl.json
View File

@@ -661,5 +661,10 @@
"Node Id": "",
"Scan this code or copy & paste it to your lightning wallet. Or click to login with your wallet.": "",
"Entries": "",
"Payment Required": ""
"Payment Required": "",
"Parent": "",
"PlebChat": "",
"Close panel": "",
"This chat is limited by 100 messages.": "",
"Send": ""
}

7
resources/lang/pt.json
View File

@@ -661,5 +661,10 @@
"Node Id": "",
"Scan this code or copy & paste it to your lightning wallet. Or click to login with your wallet.": "",
"Entries": "",
"Payment Required": ""
"Payment Required": "",
"Parent": "",
"PlebChat": "",
"Close panel": "",
"This chat is limited by 100 messages.": "",
"Send": ""
}

7
resources/lang/tr.json
View File

@@ -635,5 +635,10 @@
"Node Id": "",
"Scan this code or copy & paste it to your lightning wallet. Or click to login with your wallet.": "",
"Entries": "",
"Payment Required": ""
"Payment Required": "",
"Parent": "",
"PlebChat": "",
"Close panel": "",
"This chat is limited by 100 messages.": "",
"Send": ""
}

65
resources/views/layouts/app.blade.php
View File

@@ -31,52 +31,57 @@
<script src="https://unpkg.com/smoothscroll-polyfill@0.4.4/dist/smoothscroll.js"></script>
@mapscripts
<wireui:scripts/>
<x-comments::scripts />
<x-comments::scripts/>
@vite(['resources/css/app.css', 'resources/js/app.js'])
<!-- Styles -->
<x-comments::styles />
<x-comments::styles/>
@livewireStyles
@mapstyles
<style>
.comments {
--comments-color-background: rgb(34, 34, 34);
--comments-color-background: rgb(34, 34, 34);
--comments-color-background-nested: rgb(34, 34, 34);
--comments-color-background-paper: rgb(55, 51, 51);
--comments-color-background-info: rgb(104, 89, 214);
.comments {
--comments-color-background: rgb(34, 34, 34);
--comments-color-background: rgb(34, 34, 34);
--comments-color-background-nested: rgb(34, 34, 34);
--comments-color-background-paper: rgb(55, 51, 51);
--comments-color-background-info: rgb(104, 89, 214);
--comments-color-reaction: rgb(59, 59, 59);
--comments-color-reaction-hover: rgb(65, 63, 63);
--comments-color-reacted: rgba(67, 56, 202, 0.25);
--comments-color-reacted-hover: rgba(67, 56, 202, 0.5);
--comments-color-reaction: rgb(59, 59, 59);
--comments-color-reaction-hover: rgb(65, 63, 63);
--comments-color-reacted: rgba(67, 56, 202, 0.25);
--comments-color-reacted-hover: rgba(67, 56, 202, 0.5);
--comments-color-border: rgb(221, 221, 221);
--comments-color-border: rgb(221, 221, 221);
--comments-color-text:white;
--comments-color-text-dimmed: rgb(164, 164, 164);
--comments-color-text-inverse: white;
--comments-color-text: white;
--comments-color-text-dimmed: rgb(164, 164, 164);
--comments-color-text-inverse: white;
--comments-color-accent: rgba(67, 56, 202);
--comments-color-accent-hover: rgba(67, 56, 202, 0.75);
--comments-color-accent: rgba(67, 56, 202);
--comments-color-accent-hover: rgba(67, 56, 202, 0.75);
--comments-color-danger: rgb(225, 29, 72);
--comments-color-danger-hover: rgb(225, 29, 72, 0.75);
--comments-color-danger: rgb(225, 29, 72);
--comments-color-danger-hover: rgb(225, 29, 72, 0.75);
--comments-color-success: rgb(10, 200, 134);
--comments-color-success-hover: rgb(10, 200, 134, 0.75);
--comments-color-success: rgb(10, 200, 134);
--comments-color-success-hover: rgb(10, 200, 134, 0.75);
--comments-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}
.comments-button {
background-color: #F7931A !important;
}
--comments-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}
[x-cloak] {
display: none !important;
}
.comments-button {
background-color: #F7931A !important;
}
[x-cloak] {
display: none !important;
}
</style>
</head>
<body class="font-sans antialiased bg-21gray dark">
@if(auth()->user())
{{-- HIGHSCORE-CHAT --}}
<livewire:chat.highscore-chat/>
@endif
<livewire:laravel-echo/>
<x-notifications z-index="z-50" blur="md" align="center"/>
<x-jet-banner/>

12
resources/views/livewire/book-case/highscore-table.blade.php
View File

@@ -14,6 +14,18 @@
{{ __('Hall of fame of our honorable plebs') }}
</p>
</div>
<div class="w-1/2">
<x-button
class="relative"
primary
lg
wire:click="toggleChat">
<i class="fa-thin fa-comments"></i>
<span
class="animate-ping absolute inline-flex h-full w-full rounded-full bg-amber-400 opacity-75"></span>
Chat
</x-button>
</div>
</div>
<ul role="list" class="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">

127
resources/views/livewire/chat/highscore-chat.blade.php Normal file
View File

@@ -0,0 +1,127 @@
<div x-data="{ open: @entangle('open') }" x-show="open" class="relative z-50"
aria-labelledby="slide-over-title" x-ref="dialog" aria-modal="true">
<div class="fixed inset-0 overflow-hidden">
<div class="absolute inset-0 overflow-hidden">
<div class="pointer-events-none fixed inset-y-0 right-0 flex max-w-full pl-10">
<div x-show="open" x-transition:enter="transform transition ease-in-out duration-500 sm:duration-700"
x-transition:enter-start="translate-x-full" x-transition:enter-end="translate-x-0"
x-transition:leave="transform transition ease-in-out duration-500 sm:duration-700"
x-transition:leave-start="translate-x-0" x-transition:leave-end="translate-x-full"
class="pointer-events-auto w-screen max-w-md"
x-description="Slide-over panel, show/hide based on slide-over state.">
<div class="flex h-full flex-col overflow-y-scroll bg-white shadow-xl">
<div class="bg-amber-700 py-6 px-4 sm:px-6">
<div class="flex items-center justify-between">
<h2 class="text-lg font-medium text-gray-900" id="slide-over-title">{{ __('PlebChat') }}</h2>
<div class="ml-3 flex h-7 items-center">
<button type="button"
class="rounded-md bg-amber-700 text-amber-200 hover:text-white focus:outline-none focus:ring-2 focus:ring-white"
@click="open = false">
<span class="sr-only">{{ __('Close panel') }}</span>
<svg class="h-6 w-6" x-description="Heroicon name: outline/x-mark"
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round"
d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div>
</div>
<div class="mt-1">
<p class="text-sm text-gray-900">
{{ __('This chat is limited by 100 messages.') }}
</p>
</div>
</div>
<div class="relative flex-1">
<!-- Replace with your content -->
<div class="absolute inset-0">
<div class="flex antialiased text-gray-800 h-full">
<div class="flex flex-row w-full overflow-x-hidden">
<div class="flex flex-col flex-auto">
<div
class="flex flex-col h-full flex-auto flex-shrink-0 bg-21gray p-4"
>
<div
x-data="{ scroll: () => { $el.scrollTo(0, $el.scrollHeight); }}"
@chat-updated.window="scroll()"
x-intersect="scroll()"
class="flex flex-col overflow-x-auto mb-4">
<div class="flex flex-col">
<div class="grid grid-cols-12 gap-y-2">
@php
$myMessageClass = 'col-start-1 col-end-8 p-3 rounded-lg';
$otherMessageClass = 'col-start-6 col-end-13 p-3 rounded-lg';
@endphp
@foreach($messages as $message)
<div class="{{ auth()->id() === $message['fromId'] ? $myMessageClass : $otherMessageClass }}">
<div class="flex flex-row items-center">
<div
class="flex items-center justify-center h-10 w-10 rounded-full flex-shrink-0"
>
<img class="object-cover rounded" src="{{ $message['userImg'] }}" alt="{{ $message['fromName'] }}">
</div>
<div
class="relative ml-3 text-sm bg-white py-2 px-4 shadow rounded-xl"
>
<div>
<p>
{{ $message['message'] }}
</p>
<p class="text-xs text-gray-400 italic">
{{ $message['time'] }}
</p>
</div>
</div>
</div>
</div>
@endforeach
</div>
</div>
</div>
<div
class="flex flex-row items-center h-16 rounded-xl bg-white w-full px-4"
>
<div class="flex-grow ml-4">
<form wire:submit.prevent="sendMessage">
<div class="relative w-full">
<input
wire:model="myNewMessage"
type="text"
class="flex w-full border rounded-xl focus:outline-none focus:border-amber-300 pl-4 h-10"
/>
@error('myNewMessage')<p
class="text-red-500 text-xs">{{ $message }}</p>@enderror
</div>
</form>
</div>
<div class="ml-4">
<button
wire:click="sendMessage"
class="flex items-center justify-center bg-amber-500 hover:bg-amber-600 rounded-xl text-white px-4 py-1 flex-shrink-0"
>
<span>{{ __('Send') }}</span>
<span class="ml-2">
<i class="fa-thin fa-envelope w-4 h-4 transform rotate-45 -mt-px"></i>
</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /End replace -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>

5
yarn.lock
View File

@@ -7,6 +7,11 @@
resolved "https://registry.yarnpkg.com/@alpinejs/collapse/-/collapse-3.11.1.tgz#391b393f646f1c43787fcc7351d365a7ac0ae538"
integrity sha512-H5GQ4rEWN5Z5vKf4U+FtUdcRDdHSa+p4cAesiB+I2njfOxw0EDuobugiP1Pf3DpmyIk8iJx7feLmxeboqxbpRA==
"@alpinejs/intersect@^3.11.1":
version "3.11.1"
resolved "https://registry.yarnpkg.com/@alpinejs/intersect/-/intersect-3.11.1.tgz#858e0aa5689c459fbd22442bbe06c65b00fa4786"
integrity sha512-kY8MBSZhfgaaEQC94flhCUVX04RAEXpZRZSKFb8cToDNDFbVhVFF8HNPEAwH+SQOAI45A0LFjGbVaO9m89egVw==
"@esbuild/android-arm@0.15.18":
version "0.15.18"
resolved "https://registry.yarnpkg.com/@esbuild/android-arm/-/android-arm-0.15.18.tgz#266d40b8fdcf87962df8af05b76219bc786b4f80"