From 458a722f7c7d587fa5aee69fac8269c617e70973 Mon Sep 17 00:00:00 2001 From: nelsonic Date: Wed, 23 Nov 2022 23:55:04 +0000 Subject: [PATCH] significantly simplify app.js #54 / #121 --- assets/js/app.js | 130 ++++++------------- lib/chat_web/templates/layout/root.html.heex | 13 +- lib/chat_web/templates/page/index.html.heex | 57 +++----- 3 files changed, 65 insertions(+), 135 deletions(-) diff --git a/assets/js/app.js b/assets/js/app.js index 43c59b5..d49028c 100644 --- a/assets/js/app.js +++ b/assets/js/app.js @@ -1,113 +1,48 @@ -// We import the CSS which is extracted to its own file by esbuild. -// Remove this line if you add a your own CSS build pipeline (e.g postcss). - -// If you want to use Phoenix channels, run `mix help phx.gen.channel` -// to get started and then uncomment the line below. import socket from "./user_socket.js" -// You can include dependencies in two ways. -// -// The simplest option is to put them in assets/vendor and -// import them using relative paths: -// -// import "../vendor/some-package.js" -// -// Alternatively, you can `npm install some-package --prefix assets` and import -// them using a path starting with the package name: -// -// import "some-package" -// - -// Include phoenix_html to handle method=PUT/DELETE in forms and buttons. -import "phoenix_html" -// Establish Phoenix Socket and LiveView configuration. +// Establish Phoenix Socket: import {Socket} from "phoenix" -import {LiveSocket} from "phoenix_live_view" -import topbar from "../vendor/topbar" -function formatInsertedAtString(datetime) { - const m = new Date(datetime) +const ul = document.getElementById('msg-list'); // list of messages. +const name = document.getElementById('name'); // name of message sender +const msg = document.getElementById('msg'); // message input field +let channel = socket.channel('room:lobby', {}); // connect to chat "room" - let dateString = m.getUTCFullYear() + "/" + - ("0" + (m.getUTCMonth()+1)).slice(-2) + "/" + - ("0" + m.getUTCDate()).slice(-2); +channel.on('shout', function (payload) { // listen for 'shout' event + render_message(payload) +}); - let timeString = ("0" + m.getUTCHours()).slice(-2) + ":" + - ("0" + m.getUTCMinutes()).slice(-2) + ":" + - ("0" + m.getUTCSeconds()).slice(-2); +channel.join(); // join the channel. - return { - date: dateString, - time: timeString - } +function sendMessage() { + channel.push('shout', { // send the message to the server on "shout" channel + name: name.value || "guest", // get value of "name" of person sending the message. Set guest as default + message: msg.value, // get message text (value) from msg input field. + inserted_at: new Date() // datetime of when the message was isnerted + }); + msg.value = ''; // reset the message input field for next message. + window.scrollTo(0, document.body.scrollHeight); // scroll to the end of the page on send } -formatInsertedAtString("2022-10-12T12:28:19") - -let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content") -let liveSocket = new LiveSocket("/live", Socket, {params: {_csrf_token: csrfToken}}) - -// Show progress bar on live navigation and form submits -topbar.config({barColors: {0: "#29d"}, shadowColor: "rgba(0, 0, 0, .3)"}) -window.addEventListener("phx:page-loading-start", info => topbar.show()) -window.addEventListener("phx:page-loading-stop", info => topbar.hide()) - -// connect if there are any LiveViews on the page -liveSocket.connect() - -// expose liveSocket on window for web console debug logs and latency simulation: -// >> liveSocket.enableDebug() -// >> liveSocket.enableLatencySim(1000) // enabled for duration of browser session -// >> liveSocket.disableLatencySim() -window.liveSocket = liveSocket - - -let channel = socket.channel('room:lobby', {}); // connect to chat "room" - -channel.on('shout', function (payload) { // listen to the 'shout' event - // Get information from payload - const name = payload.name || 'guest'; - const message = payload.message - const date = formatInsertedAtString(payload.inserted_at).date - const time = formatInsertedAtString(payload.inserted_at).time - - let li = document.createElement("li"); // create new list item DOM element - // Message HTML with Tailwind CSS: +function render_message(payload) { + const li = document.createElement("li"); // create new list item DOM element + // Message HTML with Tailwind CSS Classes for layout/style: li.innerHTML = ` -
+
- ${name} + ${payload.name}
- ${date} - ${time} + ${formatDate(payload.inserted_at)} + ${formatTime(payload.inserted_at)}
- ${message} + ${payload.message}
` // Append to list ul.appendChild(li); -}); - -channel.join(); // join the channel. - - -let ul = document.getElementById('msg-list'); // list of messages. -let name = document.getElementById('name'); // name of message sender -let msg = document.getElementById('msg'); // message input field - -// function to be called on send -function sendMessage() { - console.log('sendMessage') - channel.push('shout', { // send the message to the server on "shout" channel - name: name.value || "guest", // get value of "name" of person sending the message. Set guest as default - message: msg.value, // get message text (value) from msg input field. - inserted_at: new Date() // datetime of when the message was isnerted - }); - msg.value = ''; // reset the message input field for next message. - window.scrollTo(0, document.body.scrollHeight); // scroll to the end of the page on send } // "listen" for the [Enter] keypress event to send a message: @@ -123,3 +58,18 @@ window.onload = function() { sendMessage() }); } + +// Date & Time Formatting +function formatDate(datetime) { + const m = new Date(datetime); + return m.getUTCFullYear() + "/" + + ("0" + (m.getUTCMonth()+1)).slice(-2) + "/" + + ("0" + m.getUTCDate()).slice(-2); +} + +function formatTime(datetime) { + const m = new Date(datetime); + return ("0" + m.getUTCHours()).slice(-2) + ":" + + ("0" + m.getUTCMinutes()).slice(-2) + ":" + + ("0" + m.getUTCSeconds()).slice(-2); +} diff --git a/lib/chat_web/templates/layout/root.html.heex b/lib/chat_web/templates/layout/root.html.heex index 3d63ab5..e1e57b4 100644 --- a/lib/chat_web/templates/layout/root.html.heex +++ b/lib/chat_web/templates/layout/root.html.heex @@ -6,23 +6,24 @@ <%= live_title_tag assigns[:page_title] || "Phoenix Chat", suffix: " ยท Tutorial!" %> - +
-