samuelandert.eth/auth.andert.me
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

wired dummy messaging to use svelte stores.

Browse Source
This commit is contained in:
Samuel Andert 2023-07-21 13:13:45 +02:00
parent 4056f3ef8d
commit 5e827cd939
4 changed files with 84 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

88
src/lib/components/Messages.svelte
View File

@ -1,51 +1,48 @@
<!-- components/Chat.svelte -->
<script>
import { dummyMessages } from '$lib/data/dummyMessages.js';
import { writable } from 'svelte/store';
let messages = [];
// Dummy messages
const messagesList = [
"Believe you can, and you're halfway there.",
'The only way to do great work is to love what you do.',
'Success is not final, failure is not fatal: It is the courage to continue that counts.',
'The best way to predict the future is to create it.',
"Your time is limited, don't waste it living someone else's life.",
'Every moment is a fresh beginning.',
"Don't watch the clock; do what it does. Keep going.",
'Believe in yourself and all that you are. Know that there is something inside you that is greater than any obstacle.',
'You are never too old to set another goal or to dream a new dream.',
'The future belongs to those who believe in the beauty of their dreams.'
];
const addRandomMessage = () => {
const randomMessage = generateRandomMessage();
messages = [randomMessage, ...messages];
saveMessagesToLocalStorage(messages);
};
// Reactive store to store chat messages
const messages = writable([]);
const generateRandomMessage = () => {
const randomIndex = Math.floor(Math.random() * dummyMessages.length);
const randomMessage = dummyMessages[randomIndex];
const timestamp = new Date().toLocaleString(); // Get the current date and time
return { ...randomMessage, timestamp };
};
const loadMessages = () => {
if (typeof window !== 'undefined') {
const storedMessages = localStorage.getItem('chat_messages');
messages = storedMessages ? JSON.parse(storedMessages) : [];
}
};
const saveMessagesToLocalStorage = (messages) => {
if (typeof window !== 'undefined') {
localStorage.setItem('chat_messages', JSON.stringify(messages));
}
};
const clearMessages = () => {
messages = [];
saveMessagesToLocalStorage(messages);
};
// Load messages when the component mounts
loadMessages();
function addRandomMessage() {
const randomMessage = messagesList[Math.floor(Math.random() * messagesList.length)];
const currentDate = new Date().toLocaleString();
messages.update((oldMessages) => [
...oldMessages,
{ text: randomMessage, timestamp: currentDate }
]);
}
// Function to clear all messages
function clearMessages() {
messages.set([]);
}
</script>
<main class="p-4 flex flex-col-reverse overflow-y-auto pb-16">
{#each messages as message}
<div class="bg-white p-3 rounded-lg shadow-lg mb-4">
<p class="text-gray-800">{message.text}</p>
<small class="text-gray-600 text-sm">{message.timestamp}</small>
</div>
{/each}
<!-- HTML content -->
<main class="p-4 flex flex-col-reverse overflow-y-auto h-[calc(100vh-70px)]">
<div class="flex flex-col space-y-4">
<!-- Your messages, displayed in chronological order -->
{#each $messages as message}
<div class="bg-white p-3 rounded-lg shadow-lg">
<p class="text-gray-800">{message.text}</p>
<small class="text-gray-600 text-sm">{message.timestamp}</small>
</div>
{/each}
</div>
</main>
<footer class="fixed bottom-0 left-0 right-0 bg-white p-4 flex justify-end">
@ -62,10 +59,3 @@
Send Random Message
</button>
</footer>
<style>
main {
/* Set the minimum height of the main container to prevent the footer from overlapping the messages */
min-height: calc(100vh - 70px); /* Account for the fixed footer height */
}
</style>

12
src/lib/data/dummyMessages.js
View File

@ -1,12 +0,0 @@
export const dummyMessages = [
{ text: "Believe you can, and you're halfway there.", timestamp: '2023-07-21 12:34:56' },
{ text: "The only way to do great work is to love what you do.", timestamp: '2023-07-21 12:36:22' },
{ text: "Success is not final, failure is not fatal: It is the courage to continue that counts.", timestamp: '2023-07-21 12:40:10' },
{ text: "The best way to predict the future is to create it.", timestamp: '2023-07-21 12:45:34' },
{ text: "Your time is limited, don't waste it living someone else's life.", timestamp: '2023-07-21 13:01:05' },
{ text: "Every moment is a fresh beginning.", timestamp: '2023-07-21 13:10:22' },
{ text: "Don't watch the clock; do what it does. Keep going.", timestamp: '2023-07-21 13:25:45' },
{ text: "Believe in yourself and all that you are. Know that there is something inside you that is greater than any obstacle.", timestamp: '2023-07-21 13:40:15' },
{ text: "You are never too old to set another goal or to dream a new dream.", timestamp: '2023-07-21 14:05:07' },
{ text: "The future belongs to those who believe in the beauty of their dreams.", timestamp: '2023-07-21 14:20:59' },
];

11
src/lib/services/messages.js Normal file
View File

@ -0,0 +1,11 @@
// src/lib/messaging.js
import { messagesStore } from '$lib/data//stores';
export function addMessage(message) {
const timestamp = new Date().toLocaleString();
messagesStore.update((messages) => [{ text: message, timestamp }, ...messages]);
}
export function clearMessages() {
messagesStore.set([]);
}

34
src/routes/log/write/+page.svelte Normal file
View File

@ -0,0 +1,34 @@
<!-- src/routes/write.svelte -->
<script>
import { addMessage } from '$lib/services/messages';
import { messagesStore } from '$lib/data/stores';
let newMessage = '';
const handleSubmit = () => {
addMessage(newMessage);
newMessage = ''; // Reset the input field
};
// Subscribe to the messagesStore to reactively refresh messages
$: messages = $messagesStore;
</script>
<main class="p-4">
<input
type="text"
bind:value={newMessage}
placeholder="Type your message..."
class="p-2 border rounded"
/>
<button
class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded mt-2"
on:click={handleSubmit}
>
Send Message
</button>
</main>
<style>
/* Add any additional styles as needed */
</style>