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