feat(chat): Create Room button + room filter + services filter (#42, #65)

webui-src/app/chat/chat.js

@@ -80,6 +80,7 @@ const ChatRoomsModel = {
   allRooms: [],
   knownSubscrIds: [], // to exclude subscribed from public rooms (subscribedRooms filled to late)
   subscribedRooms: {},
+  showCreateModal: false,
   loadPublicRooms() {
     // TODO: this doesn't preserve id of rooms,
     // use regex on response to extract ids.
@@ -539,11 +540,26 @@ const SubscribedLeftLobbies = {
 
 const SubscribedLobbies = {
   view() {
+    let filterText = '';
     return m('.widget', [
-      m('.widget__heading', m('h3', 'Subscribed chat rooms')),
+      m('.widget__heading', [
+        m('h3', 'Subscribed chat rooms'),
+        m('input.searchbar', {
+          type: 'text',
+          placeholder: 'filter...',
+          value: filterText,
+          oninput: (e) => {
+            filterText = e.target.value.toLowerCase();
+            m.redraw();
+          },
+          style: 'margin-left:.5rem;padding:.25rem .5rem;border:1px solid #ccc;border-radius:4px;width:120px',
+        }),
+      ]),
       m('.widget__body', [
         m(LobbyList, {
-          rooms: sortLobbies(Object.values(ChatRoomsModel.subscribedRooms)),
+          rooms: sortLobbies(Object.values(ChatRoomsModel.subscribedRooms)).filter(
+            (r) => r.lobby_name && r.lobby_name.toLowerCase().indexOf(filterText) > -1
+          ),
           tagname: '.lobby.subscribed',
           onclick: ChatLobbyModel.switchToEvent,
         }),
@@ -570,11 +586,27 @@ const PublicLeftLobbies = {
 
 const PublicLobbies = {
   view() {
+    let filterText = '';
     return m('.widget', [
-      m('.widget__heading', m('h3', 'Public chat rooms')),
+      m('.widget__heading', [
+        m('h3', 'Public chat rooms'),
+        m('input.searchbar', {
+          type: 'text',
+          placeholder: 'filter...',
+          value: filterText,
+          oninput: (e) => {
+            filterText = e.target.value.toLowerCase();
+            m.redraw();
+          },
+          style: 'margin-left:.5rem;padding:.25rem .5rem;border:1px solid #ccc;border-radius:4px;width:120px',
+        }),
+      ]),
       m('.widget__body', [
         m(LobbyList, {
-          rooms: (ChatRoomsModel.allRooms || []).filter((info) => !ChatRoomsModel.subscribed(info)),
+          rooms: (ChatRoomsModel.allRooms || []).filter(
+            (info) => !ChatRoomsModel.subscribed(info) &&
+            info.lobby_name && info.lobby_name.toLowerCase().indexOf(filterText) > -1
+          ),
           tagname: '.lobby.public',
           onclick: ChatLobbyModel.setupEvent,
         }),
@@ -651,10 +683,98 @@ const LobbyName = () => {
   );
 };
 
+
+
+// ***************************** Create Room Modal ******************************
+
+const CreateRoomModal = () => {
+  let roomName = '';
+  let roomTopic = '';
+  let isPrivate = false;
+
+  return {
+    view: () =>
+      m('.modal-overlay', {
+        onclick: (e) => {
+          if (e.target.classList.contains('modal-overlay')) {
+            ChatRoomsModel.showCreateModal = false;
+            m.redraw();
+          }
+        },
+      }, [
+        m('.modal-content', [
+          m('h3', 'Create Chat Room'),
+          m('label', 'Room Name'),
+          m('input', {
+            type: 'text',
+            placeholder: 'Enter room name',
+            value: roomName,
+            oninput: (e) => (roomName = e.target.value),
+          }),
+          m('label', 'Topic (optional)'),
+          m('input', {
+            type: 'text',
+            placeholder: 'Room topic',
+            value: roomTopic,
+            oninput: (e) => (roomTopic = e.target.value),
+          }),
+          m('label.checkbox-label', [
+            m('input', {
+              type: 'checkbox',
+              checked: isPrivate,
+              onchange: (e) => (isPrivate = e.target.checked),
+            }),
+            ' Private (invite only)',
+          ]),
+          m('.modal-actions', [
+            m('button', {
+              onclick: () => {
+                if (!roomName.trim()) return;
+                rs.rsJsonApiRequest(
+                  '/rsChats/createChatLobby',
+                  {
+                    lobby_name: roomName,
+                    lobby_topic: roomTopic,
+                    is_private: isPrivate,
+                    to: isPrivate ? '0000000000000000' : '',
+                    flag: isPrivate ? 1 : 0,
+                  },
+                  (res) => {
+                    if (res.retval) {
+                      ChatRoomsModel.showCreateModal = false;
+                      ChatRoomsModel.loadSubscribedRooms();
+                      m.redraw();
+                    }
+                  }
+                );
+              },
+            }, 'Create'),
+            m('button', {
+              onclick: () => {
+                ChatRoomsModel.showCreateModal = false;
+                m.redraw();
+              },
+            }, 'Cancel'),
+          ]),
+        ]),
+      ]),
+  };
+};
+
 // ***************************** Page Layouts ******************************
 
 const Layout = {
-  view: () => m('.node-panel.chat-panel.chat-hub', [m(SubscribedLobbies), m(PublicLobbies)]),
+  view: () =>
+    m('.node-panel.chat-panel.chat-hub', [
+      m('.chat-actions', [
+        m('button.create-room-btn', {
+          onclick: () => ChatRoomsModel.showCreateModal = true,
+        }, m('i.fas.fa-plus'), ' Create Room'),
+      ]),
+      m(SubscribedLobbies),
+      m(PublicLobbies),
+      ChatRoomsModel.showCreateModal && m(CreateRoomModal),
+    ]),
 };
 
 const LayoutSingle = () => {

webui-src/app/config/config_services.js

@@ -20,12 +20,19 @@ const Service = () => {
         },
         (retval) => (defaultAllowed = retval.permissions.mDefaultAllowed)
       ),
-    view: (v) =>
-      m(
+    view: (v) => {
+      const search = window._serviceFilter || '';
+      const name = v.attrs.data.value.mServiceName.toLowerCase();
+      const type = v.attrs.data.value.mServiceType.toLowerCase();
+      if (search && name.indexOf(search) < 0 && type.indexOf(search) < 0) {
+        return null;
+      }
+      return m(
         'tr',
         {
           key: v.attrs.data.key,
         },
+
         [
           m('td', v.attrs.data.value.mServiceName),
           m('td', v.attrs.data.value.mServiceType),
@@ -57,6 +64,18 @@ const MyServices = {
   view() {
     return m('.widget', [
       m('.widget__heading', m('h3', 'My Services')),
+      m('.widget__heading', [
+        m('h3', 'My Services'),
+        m('input.searchbar', {
+          type: 'text',
+          placeholder: 'search services...',
+          oninput: (e) => {
+            window._serviceFilter = e.target.value.toLowerCase();
+            m.redraw();
+          },
+          style: 'margin-left:.5rem;padding:.25rem .5rem;border:1px solid #ccc;border-radius:4px;width:150px',
+        }),
+      ]),
       m('.widget__body', [
         m('table', [
           m('tr', [