matthiku / chatter Goto Github PK

• (1) BACK-END: update room_users table when user sends a message
• (2) show member names or avatars within the messages log
• (3) BACK-END + FRONT_END: update room_users table when user opens an existing chat
• (4) When another user is added to the chat, their reading progress should be the start of the chat
• (5) Don't show the current user as they are always up-to-date
• (6) when starting chatter, indicate the chatrooms with unread messages - The reading progress helps indicating how many messages a user has not read yet in a chat room
• (7) invalid calculation of unread messages
• (8) in message log, show indicator where new messages start

• () Stop scrolling of whole page, scroll only within the chatroom

• (26) Order the rooms by last update, with the newest at the top
• (25) include moment.js to show message dates/times
• (24) Enable switch of locale (between English or German)
• (23) show a little space between the rooms and better design of header area
• (22) set default name of a new room to the owner's name
• (21) Add option for chat members (not the owner) to leave a room on their own
• (20) instead of just removing a deleted chat, show a notification that it was deleted by the owner
• (19) Allow users to delete their own messages (being replaced by a 'deleted' comment)
• (18) not showing messages in a newly created room!
• (17) Open a newly created room (make it not collapsed)
• (16) when being added to an existing chat room, get all messages for this room
• (15) improve design of messages
• (14) indicate to others the owner of a room
• (13) Ask for confirmation before finally deleting a Chat Room
• (12) add a delete button to the Edit Room dialog
• (11) when a room is removed, the listening channel should also be closed
• (10) When a room is updated or added, check if the current user is member or not
• (9) add logic and UI elements to add/remove users to a chat room
• (8) Improve "Create new Room" dialog (button text, close the dialog)
• (7) add new online users also to the generic list of users
• (6) add logic and UI elements to delete a chat room (only by the owner)
• (5) add logic and UI elements to create a new chat room
• (4) provide simple list of all users
• (3) show currently online users
• (2) add logic to properly add messages to a chat
• (1) Allow for multiple chat rooms and use Vuex for state management

• (1) improve layout of list of chatrooms - choose alternating BG colours
• (2) improve layout of main dropdown menu icon/avatar
• (3) improve layout of main dropdown menu items
• (4) less padding for modal dialogs on smaller devices

• (1) adding manifest.json
• (2) adding icon files of various sizes
• (3) Add basic Service Workers
• (4) Remove Laravel Navbar after login
• (5) Service Worker for background notifications
• () Turn Login/Register into Vue components

https://medium.freecodecamp.org/how-you-can-make-a-progressive-web-app-in-an-hour-7e36d560610e

https://www.nativescript.org/vue

https://medium.freecodecamp.org/why-progressive-web-apps-are-the-future-of-web-development-13db7dd5f640

https://dev.to/remejuan/progressive-web-app-with-webpack-ecj

Caching strategies

https://dev.to/s1hofmann/the-road-to-pwa---part-3-398j

Background Sync

https://ponyfoo.com/articles/backgroundsync

Several resources

https://www.udemy.com/progressive-web-app-pwa-the-complete-guide/learn/v4/t/lecture/7867396?start=0

• (1) simplify Vue component registration using require.context
• (2) re-route '/' and '/index.php' always to '/home'
• () turn "reload" into a button for better visibility, change text "User Profile" to "Your Profile"
• () provide option to add/change avatar

• (1) page header with main menu, online-users list and add-new-chat button
• (2) separate component for single chatrooms

At first, only show the 25 newest messages and update the list once the user starts scrolling backwards

Frontend:

• (1) change button to edit room properties to be enabled for all users
• (2) add select box in modal dialog for this option
• (3) change layout of EditRoomProperties component to handle room owner vs. room member
• (4) move "leaveRoom" logic from ChatRoom component to EditRoomProperties component
• (5) add functionality to handle the change of this setting and sending it to the backend

Backend:

• (6) add POST route for "/api/rooms/{room_id}/setemailnotification"
• (7) add logic in Room controller to handle this setting
• (8) add field "emailNotification" in chat_user pivot table for this setting
• (9) add logic to handle the change of this field

Frontend:

• (10) read the setting from the backend and show it in the modal dialog box

Backend:

• (11) Add event listener for "MessagePosted" event
• (12) add logic to find out who is actually off-line and - see comment below
• (13) add logic to actually send email notifications to those users

Issues:

• (14) Frontend: Not properly remembering the setting after changing it
• (15) if message was an image, show it in the email - same for audio messages (voicemails)
• (16) Improve link in email to go directly to the corresponding chat room
• (17) make "Email Notification" the default setting for new chatrooms
• (18) GIF uploads causes PHP error "array to string conversion"

• (1) After renaming a chatroom it will appear twice in the list
• (2) missing dates in the room_user pivotal table
• (3) When deleting an open room, the displayed room list is empty, nothing is shown
• (4) regularly check for a working presence channel
• (5) properly handle success or error with subscribing to the chatroom presence channel
• (6) newly created chatroom should appear at the top of the list
• (7) clicking on the title of a just deleted chatroom should not open then next one
• (8) don't open chatroom when user clicks on 'leaving room' icon
• (9) Not properly removing a chat after being deleted
• (10) Not properly opening a new chat right after creating one while another chat is open
• (11) not properly updating reading progress after adding field to pivot table

• (1) hide footer when room is open
• (2) improve UI of header bar
• (3) directly open a new chat when user clicks on another user name in the title bar
• (4) show number of online users in the browser title
• (5) if user has a proper avatar, don't show the rectangle around it in the header bar
• (6) make chat headerbar sticky to the top
• (7) Dropdown-menu is partly underneath the area below and needs a higher z-index
• (8) Better indication of chat owner in the list of chat members
• (9) Unable to edit chatroom that was just created
• (10) show 'Room Properties' menu item in main drop-down menu when a room is open
• (11) When all chats are closed and a new msg arrives, open that chat accordingly
• (12) Increase min height of Chatroom header on mobile devices
• (13) showing incorrect number of online users when more than 2
• (14) PHP error "Undefined variable: username" in LoginController line 147
• (15) Add sentence in Email Notification on how to unsubscribe from these kind of emails
• (16) Swap menu items 'Close Room' and 'Room settings' and add icons to the menu
• (17) not closing chat room from menu when just one exists - IGNORE FOR NOW
• (18) Chatroom name: in a chat with just 2 members, if name equals your username, use the other member as the room name
• (19) have more checkpoints to look for newer versions (continuous delivery)
• (20) provide option to add/change avatar
• (21) Show Avatar instead of username in chat header and online user list
• (22) Improve header alignment and list of room users / online users
• (23) Show name of user in page title when just one is online

e.g. to perform the login/register processes within Vue and API calls

• (1) Improve Laravel Mix setup (BrowserSync etc)
• (2) use username as login credential instead of email address
• (3) Email confirmation
• (4) Laravel Socialite with Google or GitHub authentication
• (5) Routes: Move API-like requests into the API route file
• (6) Add/integrate Laravel Passport
• (7) Allow for multiple chat rooms - create Migrations and Models
• (8) Allow for multiple chat rooms - create proper routes and controllers for rooms and messages
• (9) Allow for multiple chat rooms - provide multiple chat room channels
• (10) Provide simple list of all users
• (11) Add broadcasting event for adding/removing a room
• (12) Add functionality to update an existing room (name, members list)
• (13) Make main chatroom name configurable
• (14) Make Socialite callback URL more flexible: [app_url]/login/{provider}/callback
• (15) Error after Google login callback (username missing when creating new user)
• (16) Include Facebook as valid login provider
• (17) Enable switch of locale (between English or German)
• (18) choice of username is not working properly when logging in via Socialite
• (19) send email to admin whenever a new user gets added
• (20) use more random channel names to avoid clashes with other apps

• (1) Always push current chatroom to the top (basically when opening it)
• (2) chat room to remain open when moved because of updates (new messages)
• (3) show number of unread messages in the header and on the chatroom header
• (4) open chatroom when only one is available
• (5) Improve UI of dialog box for new chatrooms
• (6) show a popup-menu on smaller devices to make out for the missing Username-Dropdown menu
• (7) immediately open the newly created room
• (8) Go to (closed) list of all chats when clicking onto header title text
• (9) Go to new message and open chat when user clicks on red number of new messages
• (10) Show number of chats in Title area as well, e.g. "My Chat Rooms (3)"
• (11) Show name of current chat, number of unread messages and number of online users in page title
• (12) update Window title when a new message arrives into the currently open chatroom
• (13) When chatroom is open, use highlighted and bigger font in room header
• (14) convert text that looks like a link to a real link
• (15) Smileys support (convert ASCII smileys) and provide list of common ones
• (16) show date/time of message in a format depending on age, e.g. today only show time etc.
• (17) show "typing" besides user names if they are online and typing text into an open chatroom
• (18) make the 'bin' icon in own messages light red and only dark red on hovering
• (19) Show icons (avatar) of users in a chat
• (20) Allow change of username
• (21) keyboard - ESC - should get you out of a chatroom back to the chatrooms list
• (22) scroll to bottom of all messages when opening chat room
• (23) don't show name until the next msg is from a different user; don't show date of msgs from the same user written within 120 secs
• (24) discover and re-direct to login when session has expired
• (25) remove showing number of chatrooms in header bar and increase height of individ. chat header
• (26) use a versioning system to see if clients have an outdated version

Backend:

• (1) add upload method in Messages controller
• (2) add route for upload
• (3) extend Message model to allow fields 'filename' and 'filetype'
• (4) delete file when message is deleted
• (5) delete files when chatroom is deleted

Frontend:

• (6) add vue2-dropzone project via NPM
• (7) add modal to show dropzone
• (8) close modal after upload
• (9) reset dropzone after upload to always show only one item
• (10) click on image shows full-size image(s) as a slideshow
• () show preview of images also in notification email
• (11) show smaller previews on smaller devices

Vue-DropZone:
https://rowanwins.github.io/vue-dropzone/docs/dist/index.html#/props
https://appdividend.com/2018/04/18/vue-file-upload-using-vue-dropzone-tutorial/

Configuration:
http://www.dropzonejs.com/#configuration-options

MediaRecorder:
https://github.com/Mido22/MediaRecorder-sample