14 changed files with 287 additions and 412 deletions
@ -1,37 +1,36 @@ |
|||||
import { writable } from 'svelte/store'; |
import { writable } from "svelte/store"; |
||||
|
|
||||
let _user = localStorage.getItem('user'); |
let _user = localStorage.getItem("user"); |
||||
export const store = writable(_user ? JSON.parse(_user) : null); |
export const store = writable(_user ? JSON.parse(_user) : null); |
||||
store.subscribe((value) => { |
store.subscribe((value) => { |
||||
if (value) localStorage.setItem('user', JSON.stringify(value)); |
if (value) localStorage.setItem("user", JSON.stringify(value)); |
||||
else localStorage.removeItem('user'); |
else localStorage.removeItem("user"); |
||||
}); |
}); |
||||
|
|
||||
export const API_URL = |
export const API_URL = |
||||
"http://" + import.meta.env.VITE_HOST + |
"http://" + import.meta.env.VITE_HOST + ":" + import.meta.env.VITE_BACK_PORT; |
||||
":" + import.meta.env.VITE_BACK_PORT; |
|
||||
|
|
||||
export async function getUser() { |
export async function getUser() { |
||||
const res = await fetch(API_URL, { |
const res = await fetch(API_URL, { |
||||
method: "get", |
method: "get", |
||||
mode: 'cors', |
mode: "cors", |
||||
cache: "no-cache", |
cache: "no-cache", |
||||
credentials: 'include', |
credentials: "include", |
||||
redirect: "follow", |
redirect: "follow", |
||||
referrerPolicy: "no-referrer", |
referrerPolicy: "no-referrer", |
||||
}) |
}); |
||||
let user = await res.json() |
let user = await res.json(); |
||||
if (user.username) { |
if (user.username) { |
||||
console.log(user) |
console.log(user); |
||||
store.set(user) |
store.set(user); |
||||
} |
} |
||||
} |
} |
||||
|
|
||||
export function login() { |
export function login() { |
||||
window.location.replace(API_URL + "/log/in") |
window.location.replace(API_URL + "/log/in"); |
||||
} |
} |
||||
|
|
||||
export function logout() { |
export function logout() { |
||||
window.location.replace(API_URL + "/log/out") |
window.location.replace(API_URL + "/log/out"); |
||||
store.set(null) |
store.set(null); |
||||
} |
} |
||||
|
|||||
@ -1,90 +1,92 @@ |
|||||
<script lang="ts" context="module"> |
<script lang="ts" context="module"> |
||||
import type { chatMessagesType } from "./Chat2.svelte"; |
import type { chatMessagesType } from "./Chat2.svelte"; |
||||
export interface ChannelsType { |
export interface ChannelsType { |
||||
id: string; |
id: string; |
||||
name: string; |
name: string; |
||||
privacy: string; |
privacy: string; |
||||
password: string; |
password: string; |
||||
messages: Array<chatMessagesType>; |
messages: Array<chatMessagesType>; |
||||
} |
} |
||||
</script> |
</script> |
||||
|
|
||||
<script lang="ts"> |
<script lang="ts"> |
||||
export let channels: Array<ChannelsType> = []; |
export let channels: Array<ChannelsType> = []; |
||||
export let onSelectChannel: (channel: ChannelsType) => void; |
export let onSelectChannel: (channel: ChannelsType) => void; |
||||
const selectChat = (id: string) => { |
const selectChat = (id: string) => { |
||||
const channel = channels.find(c => c.id === id); |
const channel = channels.find((c) => c.id === id); |
||||
if (channel) { |
if (channel) { |
||||
onSelectChannel(channel); |
onSelectChannel(channel); |
||||
} |
} |
||||
} |
}; |
||||
const createChannel = () => { |
const createChannel = () => { |
||||
const name = prompt("Enter a name for the new channel:"); |
const name = prompt("Enter a name for the new channel:"); |
||||
if (name) { |
if (name) { |
||||
const privacy = prompt("Enter a privacy setting for the new channel (public/private):"); |
const privacy = prompt( |
||||
if (privacy !== "public" && privacy !== "private") { |
"Enter a privacy setting for the new channel (public/private):" |
||||
alert("Invalid privacy setting"); |
); |
||||
} |
if (privacy !== "public" && privacy !== "private") { |
||||
let password = ""; |
alert("Invalid privacy setting"); |
||||
if (privacy === "private") { |
} |
||||
password = prompt("Enter a password for the new channel:"); |
let password = ""; |
||||
if (!password) { |
if (privacy === "private") { |
||||
alert("Invalid password"); |
password = prompt("Enter a password for the new channel:"); |
||||
} |
if (!password) { |
||||
} |
alert("Invalid password"); |
||||
if (privacy === "public" || password) { |
} |
||||
const newChannel: ChannelsType = { |
} |
||||
id: Math.random().toString(), |
if (privacy === "public" || password) { |
||||
name, |
const newChannel: ChannelsType = { |
||||
privacy, |
id: Math.random().toString(), |
||||
password, |
name, |
||||
messages: [] |
privacy, |
||||
}; |
password, |
||||
channels = [newChannel, ...channels]; |
messages: [], |
||||
} |
}; |
||||
} |
channels = [newChannel, ...channels]; |
||||
// TODO: save to database |
} |
||||
}; |
} |
||||
|
// TODO: save to database |
||||
|
}; |
||||
</script> |
</script> |
||||
|
|
||||
<div class="overlay"> |
<div class="overlay"> |
||||
<div class="channels" on:click|stopPropagation on:keydown|stopPropagation> |
<div class="channels" on:click|stopPropagation on:keydown|stopPropagation> |
||||
<div> |
<div> |
||||
{#if channels.length > 0} |
{#if channels.length > 0} |
||||
<h2>Channels</h2> |
<h2>Channels</h2> |
||||
{#each channels.slice(0, 10) as _channels} |
{#each channels.slice(0, 10) as _channels} |
||||
<li> |
<li> |
||||
<span>{_channels.name}</span> |
<span>{_channels.name}</span> |
||||
<button on:click={() => selectChat(_channels.id)}>Enter</button> |
<button on:click={() => selectChat(_channels.id)}>Enter</button> |
||||
</li> |
</li> |
||||
{/each} |
{/each} |
||||
{:else} |
{:else} |
||||
<p>No channels available</p> |
<p>No channels available</p> |
||||
{/if} |
{/if} |
||||
<button on:click={createChannel}>Create Channel</button> |
<button on:click={createChannel}>Create Channel</button> |
||||
</div> |
</div> |
||||
</div> |
</div> |
||||
</div> |
</div> |
||||
|
|
||||
<style> |
<style> |
||||
.overlay { |
.overlay { |
||||
position: fixed; |
position: fixed; |
||||
top: 0; |
top: 0; |
||||
left: 0; |
left: 0; |
||||
width: 100%; |
width: 100%; |
||||
height: 100%; |
height: 100%; |
||||
background-color: rgba(0, 0, 0, 0.5); |
background-color: rgba(0, 0, 0, 0.5); |
||||
z-index: 9998; |
z-index: 9998; |
||||
display: flex; |
display: flex; |
||||
justify-content: center; |
justify-content: center; |
||||
align-items: center; |
align-items: center; |
||||
} |
} |
||||
|
|
||||
.channels { |
.channels { |
||||
background-color: #fff; |
background-color: #fff; |
||||
border: 1px solid #ccc; |
border: 1px solid #ccc; |
||||
border-radius: 5px; |
border-radius: 5px; |
||||
padding: 1rem; |
padding: 1rem; |
||||
width: 300px; |
width: 300px; |
||||
} |
} |
||||
</style> |
</style> |
||||
|
|||||
Loading…
Reference in new issue