Compare commits
14 Commits
2d93fffa21
...
7c4bd5e879
| Author | SHA1 | Date |
|---|---|---|
 nicolas-arnaud
|
7c4bd5e879 | 2 years ago |
|
nicolas-arnaud
|
6d7d526ec2 | 2 years ago |
 WalidMoovin
|
73c9cdfc17 | 2 years ago |
|
WalidMoovin
|
f83ed35e6d | 2 years ago |
|
nicolas-arnaud
|
4dea52dfc2 | 2 years ago |
|
WalidMoovin
|
398dd4a21e | 2 years ago |
|
WalidMoovin
|
63176751f3 | 2 years ago |
|
nicolas-arnaud
|
5cd6d55390 | 2 years ago |
|
WalidMoovin
|
8c5a5ce018 | 2 years ago |
|
nicolas-arnaud
|
ebcda7b8d7 | 2 years ago |
|
nicolas-arnaud
|
807393ee8f | 2 years ago |
Cuter
|
772338a84d | 2 years ago |
vvandenb
|
39d3dec363 | 2 years ago |
|
vvandenb
|
409bda4e6a | 2 years ago |
20 changed files with 472 additions and 191 deletions
@ -1,2 +1,3 @@ |
|||
*.ts test=auto eol=lf |
|||
*.svelte test=auto eol=lf |
|||
*.sh test=auto eol=lf |
|||
|
|||
|
Before Width: | Height: | Size: 9.0 KiB |
@ -0,0 +1,36 @@ |
|||
import { writable } from "svelte/store"; |
|||
|
|||
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"); |
|||
}); |
|||
|
|||
export const API_URL = |
|||
"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", |
|||
cache: "no-cache", |
|||
credentials: "include", |
|||
redirect: "follow", |
|||
referrerPolicy: "no-referrer", |
|||
}); |
|||
let user = await res.json(); |
|||
if (user.username) { |
|||
console.log(user); |
|||
store.set(user); |
|||
} |
|||
} |
|||
|
|||
export function login() { |
|||
window.location.replace(API_URL + "/log/in"); |
|||
} |
|||
|
|||
export function logout() { |
|||
window.location.replace(API_URL + "/log/out"); |
|||
store.set(null); |
|||
} |
|||
@ -0,0 +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>; |
|||
} |
|||
</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 |
|||
}; |
|||
</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> |
|||
|
|||
<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; |
|||
} |
|||
|
|||
.channels { |
|||
background-color: #fff; |
|||
border: 1px solid #ccc; |
|||
border-radius: 5px; |
|||
padding: 1rem; |
|||
width: 300px; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue