Compare commits

...

2 commits

Author SHA1 Message Date
hippoz
871ed87687
frontend: add "toast" system to tell the user of errors 2022-04-26 03:47:51 +03:00
hippoz
2ab2899529
frontend: improve directory structure 2022-04-26 03:09:16 +03:00
16 changed files with 84 additions and 26 deletions

View file

@ -196,7 +196,7 @@ body {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
background-color: transparent; background-color: transparent;
color: var(--foreground-color-3); color: var(--foreground-color-2);
text-align: center; text-align: center;
border: none; border: none;
border-radius: var(--radius-md); border-radius: var(--radius-md);

View file

@ -1,5 +1,5 @@
<script> <script>
import Main from "./pages/main/Main.svelte"; import Main from "./Main.svelte";
</script> </script>
<Main /> <Main />

View file

@ -1,8 +1,8 @@
<script> <script>
import { CloudIcon } from "svelte-feather-icons"; import { CloudIcon } from "svelte-feather-icons";
import { gatewayStatus, selectedChannel } from "../../../stores"; import { gatewayStatus, selectedChannel } from "../stores";
import ChannelView from "./ChannelView.svelte"; import ChannelView from "./ChannelView.svelte";
import OverlayProvider from "./OverlayProvider.svelte"; import OverlayProvider from "./overlays/OverlayProvider.svelte";
import Sidebar from "./Sidebar.svelte"; import Sidebar from "./Sidebar.svelte";
</script> </script>

View file

@ -1,7 +1,7 @@
<script> <script>
import request from "../../../request"; import request from "../request";
import { apiRoute } from "../../../storage"; import { apiRoute } from "../storage";
import { messagesStoreProvider, userInfoStore } from "../../../stores"; import { messagesStoreProvider, overlayStore, userInfoStore } from "../stores";
export let channel; export let channel;
let messageInput = ""; let messageInput = "";
@ -39,6 +39,9 @@
messages.deleteMessage({ messages.deleteMessage({
id: optimisticMessageId id: optimisticMessageId
}); });
overlayStore.open("toast", {
message: "Couldn't send message"
});
} }
}; };
</script> </script>

View file

@ -1,6 +1,6 @@
<script> <script>
import { afterUpdate, beforeUpdate, onMount } from "svelte"; import { afterUpdate, beforeUpdate, onMount } from "svelte";
import { messagesStoreProvider } from "../../../stores.js"; import { messagesStoreProvider } from "../stores.js";
import Message from "./Message.svelte"; import Message from "./Message.svelte";
export let channelId; export let channelId;

View file

@ -1,6 +1,6 @@
<script> <script>
import { HashIcon, PlusIcon, MoreVerticalIcon } from "svelte-feather-icons"; import { HashIcon, PlusIcon, MoreVerticalIcon } from "svelte-feather-icons";
import { channels, overlayStore, selectedChannel } from "../../../stores"; import { channels, overlayStore, selectedChannel } from "../stores";
import UserTopBar from "./UserTopBar.svelte"; import UserTopBar from "./UserTopBar.svelte";
</script> </script>

View file

@ -1,6 +1,6 @@
<script> <script>
import { AtSignIcon } from "svelte-feather-icons"; import { AtSignIcon } from "svelte-feather-icons";
import { userInfoStore } from "../../../stores"; import { userInfoStore } from "../stores";
</script> </script>
<div class="top-bar"> <div class="top-bar">

View file

@ -11,9 +11,14 @@
const close = () => overlayStore.close('createChannel'); const close = () => overlayStore.close('createChannel');
const create = async () => { const create = async () => {
createButtonEnabled = false; createButtonEnabled = false;
await request("POST", apiRoute("channels"), true, { const { ok } = await request("POST", apiRoute("channels"), true, {
name: channelName name: channelName
}); });
if (!ok) {
overlayStore.open("toast", {
message: "Couldn't create channel"
});
}
close(); close();
}; };
</script> </script>

View file

@ -13,14 +13,24 @@
const close = () => overlayStore.close('editChannel'); const close = () => overlayStore.close('editChannel');
const save = async () => { const save = async () => {
buttonsEnabled = false; buttonsEnabled = false;
await request("PUT", apiRoute(`channels/${channel.id}`), true, { const { ok } = await request("PUT", apiRoute(`channels/${channel.id}`), true, {
name: channelName name: channelName
}); });
if (!ok) {
overlayStore.open("toast", {
message: "Couldn't edit channel"
});
}
close(); close();
}; };
const deleteChannel = async () => { const deleteChannel = async () => {
buttonsEnabled = false; buttonsEnabled = false;
await request("DELETE", apiRoute(`channels/${channel.id}`), true); const { ok } = await request("DELETE", apiRoute(`channels/${channel.id}`), true);
if (!ok) {
overlayStore.open("toast", {
message: "Couldn't delete channel"
});
}
close(); close();
}; };
</script> </script>
@ -48,7 +58,7 @@
<div class="modal-footer"> <div class="modal-footer">
<button class="button modal-secondary-action" on:click="{ close }">Cancel</button> <button class="button modal-secondary-action" on:click="{ close }">Cancel</button>
<button class="button modal-secondary-action delete-button" on:click="{ deleteChannel }">Delete</button> <button class="button modal-secondary-action delete-button" on:click="{ deleteChannel }" disabled="{ !buttonsEnabled }">Delete</button>
<button class="button button-accent modal-primary-action" on:click="{ save }" disabled="{ !buttonsEnabled }">Save</button> <button class="button button-accent modal-primary-action" on:click="{ save }" disabled="{ !buttonsEnabled }">Save</button>
</div> </div>
</div> </div>

View file

@ -0,0 +1,16 @@
<script>
import { overlayStore } from "../../stores";
import EditChannel from "./EditChannel.svelte";
import CreateChannel from "./CreateChannel.svelte";
import Toast from "./Toast.svelte";
</script>
{#if $overlayStore.createChannel}
<CreateChannel { ...$overlayStore.createChannel } />
{/if}
{#if $overlayStore.editChannel}
<EditChannel { ...$overlayStore.editChannel } />
{/if}
{#if $overlayStore.toast}
<Toast { ...$overlayStore.toast } />
{/if}

View file

@ -0,0 +1,32 @@
<script>
import { XIcon } from "svelte-feather-icons";
import { quintInOut } from "svelte/easing";
import { fly } from "svelte/transition";
import { overlayStore } from "../../stores";
export let message;
</script>
<style>
.toast {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 5.5em;
left: 50%;
background-color: var(--purple-1);
transform: translate(-50%, -50%);
padding: var(--space-sm);
border-radius: var(--radius-md);
}
</style>
{#key message}
<div class="toast" transition:fly="{{ duration: 300, easing: quintInOut, y: 10 }}">
<span>{ message }</span>
<button class="icon-button" on:click="{ () => overlayStore.close('toast') }">
<XIcon />
</button>
</div>
{/key}

View file

@ -1,12 +0,0 @@
<script>
import { overlayStore } from "../../../stores";
import EditChannel from "../../modals/EditChannel.svelte";
import CreateChannel from "../../modals/CreateChannel.svelte";
</script>
{#if $overlayStore.createChannel}
<CreateChannel { ...$overlayStore.createChannel } />
{/if}
{#if $overlayStore.editChannel}
<EditChannel { ...$overlayStore.editChannel } />
{/if}

View file

@ -182,6 +182,10 @@ class MessageStore extends Store {
res.json.reverse(); res.json.reverse();
this.value = res.json.concat(this.value); this.value = res.json.concat(this.value);
this.updated(); this.updated();
} else {
overlayStore.open("toast", {
message: "Messages failed to load"
});
} }
} }