end creating adminChat on BroadcastingChannel

Author: pashaapsky

app/Events/PostUpdated.php

@@ -4,12 +4,10 @@
 
 use App\Post;
 use Illuminate\Broadcasting\InteractsWithSockets;
-use Illuminate\Broadcasting\PrivateChannel;
-use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
 use Illuminate\Foundation\Events\Dispatchable;
 use Illuminate\Queue\SerializesModels;
 
-class PostUpdated implements ShouldBroadcast
+class PostUpdated
 {
  use Dispatchable, InteractsWithSockets, SerializesModels;
 
@@ -19,19 +17,4 @@ public function __construct(Post $post)
  {
  $this->post = $post;
  }
-
- /**
- * Get the channels the event should broadcast on.
- *
- * @return \Illuminate\Broadcasting\Channel|\Illuminate\Broadcasting\Channel[]
- */
- public function broadcastOn()
- {
- return new PrivateChannel('admin-chat-channel');
- }
-
- public function broadcastWith()
- {
- return ['hi' => 'hello', 'changes' => $this->post->getChanges(), 'origin' => $this->post->getOriginal()];
- }
 }

app/Events/PostUpdatedAdminChat.php

@@ -0,0 +1,28 @@
+<?php
+
+namespace App\Events;
+
+use Illuminate\Broadcasting\InteractsWithSockets;
+use Illuminate\Broadcasting\PrivateChannel;
+use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
+use Illuminate\Foundation\Events\Dispatchable;
+use Illuminate\Queue\SerializesModels;
+
+class PostUpdatedAdminChat implements ShouldBroadcast
+{
+ use Dispatchable, InteractsWithSockets, SerializesModels;
+
+ public $post;
+ public $data;
+
+ public function __construct($post, $data)
+ {
+ $this->post = $post;
+ $this->data = $data;
+ }
+
+ public function broadcastOn()
+ {
+ return new PrivateChannel('admin-chat-channel');
+ }
+}

app/Listeners/AddHistoryOnUpdatePost.php

@@ -3,6 +3,7 @@
 namespace App\Listeners;
 
 use App\Events\PostUpdated;
+use App\Events\PostUpdatedAdminChat;
 
 class AddHistoryOnUpdatePost
 {
@@ -33,5 +34,7 @@ public function handle(PostUpdated $event)
  ];
 
  $event->post->history()->create($values);
+
+ event(new PostUpdatedAdminChat($event->post, $result));
  }
 }

public/css/app.css

@@ -10922,3 +10922,9 @@ a.text-dark:focus {
  overflow: auto;
 }
 
+.message-link {
+ color: white;
+ font-weight: bold;
+ text-decoration: underline;
+}
+

public/js/app.js

@@ -76149,16 +76149,31 @@ var AdminChat = /*#__PURE__*/function (_React$Component) {
 
  _this = _super.call(this, props);
  _this.state = {
- postUpdateMessage: ''
+ message: ''
  };
  return _this;
  }
 
  _createClass(AdminChat, [{
+ key: "addMessage",
+ value: function addMessage(data) {
+ this.setState({
+ message: this.state.message + data
+ });
+ var chat = document.querySelector('.admin-chat__message-block');
+ chat.innerHTML = this.state.message;
+ }
+ }, {
  key: "componentDidMount",
  value: function componentDidMount() {
- Echo["private"]('admin-chat-channel').listen('PostUpdated', function (data) {
- console.log(data);
+ var _this2 = this;
+
+ Echo["private"]('admin-chat-channel').listen('PostUpdatedAdminChat', function (event) {
+ var time = new Date(event.post.updated_at).toTimeString();
+ time = time.slice(0, time.indexOf(' '));
+ var result = "<div class=\"message\">\n <time>".concat(time, "</time>\n <p>\u0411\u044B\u043B\u0430 \u0438\u0437\u043C\u0435\u043D\u0435\u043D\u0430 \n <a class=\"message-link\" href=\"/posts/").concat(event.post.id, "\">\u0441\u0442\u0430\u0442\u044C\u044F #").concat(event.post.id, "</a>\n </p>\n \n <p>").concat(event.data, "</p>\n </div>");
+
+ _this2.addMessage(result);
  });
  }
  }, {
@@ -76175,7 +76190,7 @@ var AdminChat = /*#__PURE__*/function (_React$Component) {
  className: "admin-chat_header text-center"
  }, "\u0421\u043E\u043E\u0431\u0449\u0435\u043D\u0438\u044F"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
  className: "admin-chat__message-block"
- }, this.state.postUpdateMessage)), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("a", {
+ })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("a", {
  className: "admin-chat-btn btn btn-primary",
  "data-toggle": "collapse",
  href: "#adminChatCollapse",

resources/js/components/AdminChat.js

@@ -5,14 +5,35 @@ class AdminChat extends React.Component {
  constructor(props) {
  super(props);
  this.state = {
- postUpdateMessage : '',
+ message : '',
  };
  }
 
+ addMessage(data) {
+ this.setState({
+ message : this.state.message + data
+ });
+ const chat = document.querySelector('.admin-chat__message-block');
+ chat.innerHTML = this.state.message;
+ }
+
  componentDidMount() {
  Echo.private('admin-chat-channel')
- .listen('PostUpdated', (data) => {
- console.log(data);
+ .listen('PostUpdatedAdminChat', (event) => {
+
+ let time = new Date(event.post.updated_at).toTimeString();
+ time = time.slice(0, time.indexOf(' '));
+
+ let result = `<div class="message">
+ <time>${time}</time>
+ <p>Была изменена 
+ <a class="message-link" href="/posts/${event.post.id}">статья #${event.post.id}</a>
+ </p>
+ 
+ <p>${event.data}</p>
+ </div>`;
+
+ this.addMessage(result);
  });
  }
 
@@ -25,7 +46,7 @@ class AdminChat extends React.Component {
  <h5 className="admin-chat_header text-center">Сообщения</h5>
 
  <div className="admin-chat__message-block">
- {this.state.postUpdateMessage}
+
  </div>
  </div>
 

resources/sass/admin-chat.scss

@@ -16,7 +16,9 @@
  overflow: auto;
 }
 
-.admin-chat-btn {
- //max-width: 100px;
+.message-link {
+ color: white;
+ font-weight: bold;
+ text-decoration: underline;
 }
 

resources/views/layouts/app.blade.php

@@ -27,9 +27,11 @@
 
  @yield('content')
 
+ @if (auth()->user() && auth()->user()->hasRole('admin'))
  <div class="admin-channel position-fixed border border-primary" id="admin-channel">
 
  </div>
+ @endif
 
  <footer class="footer mt-auto">
  @yield('footer')