From 3cb11c2de2e0f54a62d4accab7c565e82d010dc7 Mon Sep 17 00:00:00 2001 From: Benjamin Takats Date: Thu, 19 Jan 2023 17:34:28 +0100 Subject: [PATCH] plebchat added --- app/Events/ChatMessageSentEvent.php | 32 +++++ app/Events/PlebLoggedInEvent.php | 2 +- app/Http/Livewire/BookCase/HighscoreTable.php | 5 + app/Http/Livewire/Chat/HighscoreChat.php | 68 ++++++++++ app/Http/Livewire/LaravelEcho.php | 2 +- package.json | 1 + resources/js/app.js | 2 + resources/lang/de.json | 7 +- resources/lang/en.json | 7 +- resources/lang/es.json | 7 +- resources/lang/fr.json | 7 +- resources/lang/hr.json | 7 +- resources/lang/it.json | 7 +- resources/lang/mk.json | 7 +- resources/lang/pl.json | 7 +- resources/lang/pt.json | 7 +- resources/lang/tr.json | 7 +- resources/views/layouts/app.blade.php | 65 ++++----- .../book-case/highscore-table.blade.php | 12 ++ .../livewire/chat/highscore-chat.blade.php | 127 ++++++++++++++++++ yarn.lock | 5 + 21 files changed, 349 insertions(+), 42 deletions(-) create mode 100644 app/Events/ChatMessageSentEvent.php create mode 100644 app/Http/Livewire/Chat/HighscoreChat.php create mode 100644 resources/views/livewire/chat/highscore-chat.blade.php diff --git a/app/Events/ChatMessageSentEvent.php b/app/Events/ChatMessageSentEvent.php new file mode 100644 index 00000000..dae773cf --- /dev/null +++ b/app/Events/ChatMessageSentEvent.php @@ -0,0 +1,32 @@ +emit('toggleHighscoreChat'); + } + public function openModal($id) { $this->modal = User::query() diff --git a/app/Http/Livewire/Chat/HighscoreChat.php b/app/Http/Livewire/Chat/HighscoreChat.php new file mode 100644 index 00000000..df2ba118 --- /dev/null +++ b/app/Http/Livewire/Chat/HighscoreChat.php @@ -0,0 +1,68 @@ + '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'); + } +} diff --git a/app/Http/Livewire/LaravelEcho.php b/app/Http/Livewire/LaravelEcho.php index 4aab3e68..d71ddfba 100644 --- a/app/Http/Livewire/LaravelEcho.php +++ b/app/Http/Livewire/LaravelEcho.php @@ -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) { diff --git a/package.json b/package.json index 3130f615..63b94a61 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/resources/js/app.js b/resources/js/app.js index 0b09d8bc..1176130c 100644 --- a/resources/js/app.js +++ b/resources/js/app.js @@ -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(); diff --git a/resources/lang/de.json b/resources/lang/de.json index a244ccbb..85d160e0 100644 --- a/resources/lang/de.json +++ b/resources/lang/de.json @@ -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" } diff --git a/resources/lang/en.json b/resources/lang/en.json index 2c8a8c0e..d9bd5ff3 100644 --- a/resources/lang/en.json +++ b/resources/lang/en.json @@ -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": "" } \ No newline at end of file diff --git a/resources/lang/es.json b/resources/lang/es.json index ca073084..644fde6b 100644 --- a/resources/lang/es.json +++ b/resources/lang/es.json @@ -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": "" } \ No newline at end of file diff --git a/resources/lang/fr.json b/resources/lang/fr.json index 8bc065f9..2661abc5 100644 --- a/resources/lang/fr.json +++ b/resources/lang/fr.json @@ -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": "" } \ No newline at end of file diff --git a/resources/lang/hr.json b/resources/lang/hr.json index bcbb74d6..e8e1d76d 100644 --- a/resources/lang/hr.json +++ b/resources/lang/hr.json @@ -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": "" } \ No newline at end of file diff --git a/resources/lang/it.json b/resources/lang/it.json index fd57eaf7..f0fe0a62 100644 --- a/resources/lang/it.json +++ b/resources/lang/it.json @@ -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": "" } \ No newline at end of file diff --git a/resources/lang/mk.json b/resources/lang/mk.json index 3b022ac4..e9c8f01f 100644 --- a/resources/lang/mk.json +++ b/resources/lang/mk.json @@ -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": "" } \ No newline at end of file diff --git a/resources/lang/pl.json b/resources/lang/pl.json index 822bf163..937de176 100644 --- a/resources/lang/pl.json +++ b/resources/lang/pl.json @@ -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": "" } \ No newline at end of file diff --git a/resources/lang/pt.json b/resources/lang/pt.json index 50cd2d8c..864348a0 100644 --- a/resources/lang/pt.json +++ b/resources/lang/pt.json @@ -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": "" } \ No newline at end of file diff --git a/resources/lang/tr.json b/resources/lang/tr.json index b35254b5..f21e162d 100644 --- a/resources/lang/tr.json +++ b/resources/lang/tr.json @@ -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": "" } \ No newline at end of file diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php index 22e98c2d..1ddd916d 100644 --- a/resources/views/layouts/app.blade.php +++ b/resources/views/layouts/app.blade.php @@ -31,52 +31,57 @@ @mapscripts - + @vite(['resources/css/app.css', 'resources/js/app.js']) - + @livewireStyles @mapstyles +@if(auth()->user()) + {{-- HIGHSCORE-CHAT --}} + +@endif diff --git a/resources/views/livewire/book-case/highscore-table.blade.php b/resources/views/livewire/book-case/highscore-table.blade.php index 396ccb76..25c6b58c 100644 --- a/resources/views/livewire/book-case/highscore-table.blade.php +++ b/resources/views/livewire/book-case/highscore-table.blade.php @@ -14,6 +14,18 @@ {{ __('Hall of fame of our honorable plebs') }}

+
+ + + + Chat + +
    diff --git a/resources/views/livewire/chat/highscore-chat.blade.php b/resources/views/livewire/chat/highscore-chat.blade.php new file mode 100644 index 00000000..4ec3f9b5 --- /dev/null +++ b/resources/views/livewire/chat/highscore-chat.blade.php @@ -0,0 +1,127 @@ +
    + +
    +
    +
    + +
    +
    +
    +
    +

    {{ __('PlebChat') }}

    +
    + +
    +
    +
    +

    + {{ __('This chat is limited by 100 messages.') }} +

    +
    +
    +
    + +
    +
    +
    +
    +
    +
    +
    +
    + + @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) +
    +
    +
    + {{ $message['fromName'] }} +
    +
    +
    +

    + {{ $message['message'] }} +

    +

    + {{ $message['time'] }} +

    +
    +
    +
    +
    + @endforeach +
    +
    +
    +
    +
    +
    +
    + + @error('myNewMessage')

    {{ $message }}

    @enderror +
    +
    +
    +
    + +
    +
    +
    +
    +
    +
    +
    + +
    +
    +
    + +
    +
    +
    +
    diff --git a/yarn.lock b/yarn.lock index 153891de..20937da2 100644 --- a/yarn.lock +++ b/yarn.lock @@ -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"