CLASSROOMIO-T-80: Replace sapper with sveltekit
This commit is contained in:
Rotimi Best
@@ -0,0 +1,112 @@
|
||||
<script>
|
||||
import { marked } from 'marked';
|
||||
import PageNav from '$lib/components/PageNav/index.svelte';
|
||||
import CloseButton from '$lib/components/Buttons/Close/index.svelte';
|
||||
import TextField from '$lib/components/Form/TextField.svelte';
|
||||
// import SendButton from "$lib/components/Buttons/Send/index.svelte";
|
||||
|
||||
export let handleClose;
|
||||
|
||||
let message = '';
|
||||
let bodyRef;
|
||||
let chats = [
|
||||
{
|
||||
avatar: 'https://picsum.photos/32/32/?random',
|
||||
name: 'Evgeniy',
|
||||
message: "I'am looking at this and it looks great",
|
||||
},
|
||||
{
|
||||
avatar: 'https://picsum.photos/32/32/?random',
|
||||
name: 'Sergey Semko',
|
||||
message:
|
||||
'Thanks for the feedback, what do you think about my website. https://rotimibest.com',
|
||||
},
|
||||
{
|
||||
avatar: 'https://picsum.photos/32/32/?random',
|
||||
name: 'Vitalii Marushko',
|
||||
message: 'Всем привет',
|
||||
},
|
||||
{
|
||||
avatar: 'https://picsum.photos/32/32/?random',
|
||||
name: 'Natasha',
|
||||
message: 'Привет Виталий',
|
||||
},
|
||||
];
|
||||
|
||||
function handleSend() {
|
||||
if (!message) {
|
||||
return;
|
||||
}
|
||||
|
||||
chats = [
|
||||
...chats,
|
||||
{
|
||||
avatar: 'https://picsum.photos/32/32/?random',
|
||||
name: 'You',
|
||||
message,
|
||||
},
|
||||
];
|
||||
|
||||
message = null;
|
||||
|
||||
setTimeout(() => {
|
||||
bodyRef.scrollTo({
|
||||
top: bodyRef.scrollHeight,
|
||||
});
|
||||
}, 100);
|
||||
}
|
||||
|
||||
function handleKeyDown(e) {
|
||||
if (e.key === 'Enter') {
|
||||
handleSend();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<PageNav title="LiveChat" overidableStyle="padding: 0 10px">
|
||||
<div slot="widget">
|
||||
<CloseButton onClick={handleClose} />
|
||||
</div>
|
||||
</PageNav>
|
||||
|
||||
<div bind:this={bodyRef} class="overflow-auto body">
|
||||
{#each chats as chat}
|
||||
<div class="pl-2 pb-4">
|
||||
<div class="flex items-center no-underline hover:underline text-black">
|
||||
<img
|
||||
alt="Placeholder"
|
||||
class="block rounded-full"
|
||||
width="24"
|
||||
height="20"
|
||||
src={chat.avatar}
|
||||
/>
|
||||
<p class="dark:text-white ml-2 text-sm font-bold">{chat.name}</p>
|
||||
</div>
|
||||
<article class="prose prose-sm sm:prose pt-2 pl-8">
|
||||
{@html marked(chat.message)}
|
||||
</article>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<!-- <div class="flex items-center justify-between leading-none pl-2"> -->
|
||||
<TextField
|
||||
placeholder="Say something"
|
||||
bind:value={message}
|
||||
onKeyDown={handleKeyDown}
|
||||
/>
|
||||
<!-- <SendButton onClick={handleSend} /> -->
|
||||
<!-- </div> -->
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.body {
|
||||
height: 90%;
|
||||
}
|
||||
.footer {
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,12 @@
|
||||
<script>
|
||||
import PageNav from '$lib/components/PageNav/index.svelte';
|
||||
import CloseButton from '$lib/components/Buttons/Close/index.svelte';
|
||||
|
||||
export let handleClose;
|
||||
</script>
|
||||
|
||||
<PageNav title="Note" overidableStyle="padding: 0 10px">
|
||||
<div slot="widget">
|
||||
<CloseButton onClick={handleClose} />
|
||||
</div>
|
||||
</PageNav>
|
||||
@@ -0,0 +1,11 @@
|
||||
<script>
|
||||
export let name;
|
||||
export let src;
|
||||
export let className;
|
||||
</script>
|
||||
|
||||
<img
|
||||
alt={name}
|
||||
{src}
|
||||
class="w-10 h-10 rounded-full bg-light-blue-100 {className}"
|
||||
/>
|
||||
@@ -0,0 +1,77 @@
|
||||
<script>
|
||||
import FormSection from './FormSection.svelte';
|
||||
import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
|
||||
import { VARIANTS } from '$lib/components/PrimaryButton/constants';
|
||||
|
||||
export let title = 'Poll';
|
||||
export let onSubmit;
|
||||
export let onCancel;
|
||||
|
||||
let values = {
|
||||
question: '',
|
||||
author: '',
|
||||
isPublic: false,
|
||||
expiration: '',
|
||||
options: [
|
||||
{
|
||||
label: '',
|
||||
selectedBy: [],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
function handleAddOptions() {
|
||||
values = {
|
||||
...values,
|
||||
options: [
|
||||
...values.options,
|
||||
{
|
||||
label: '',
|
||||
selectedBy: [],
|
||||
},
|
||||
],
|
||||
};
|
||||
}
|
||||
|
||||
function handleRemoveOptions(index) {
|
||||
return () => {
|
||||
values.options = values.options.filter((o, i) => i !== index);
|
||||
};
|
||||
}
|
||||
|
||||
function finishPoll() {
|
||||
onSubmit(values);
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="border rounded-md">
|
||||
<div class="border-b-2 p-4 text-center">
|
||||
{title}
|
||||
</div>
|
||||
<div class="p-3">
|
||||
<FormSection label="Question" bind:value={values.question} />
|
||||
<FormSection
|
||||
label="Expiration"
|
||||
bind:value={values.expiration}
|
||||
type="date"
|
||||
/>
|
||||
|
||||
{#each values.options as option, index}
|
||||
<FormSection
|
||||
label={index === 0 && 'Options'}
|
||||
bind:value={option.label}
|
||||
handleLabelButton={handleAddOptions}
|
||||
handleInputButton={handleRemoveOptions(index)}
|
||||
/>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<div class="w-full flex justify-center mb-3">
|
||||
<PrimaryButton label="Create poll" onClick={finishPoll} />
|
||||
<PrimaryButton
|
||||
label="Cancel"
|
||||
variant={VARIANTS.OUTLINED}
|
||||
onClick={onCancel}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,40 @@
|
||||
<script>
|
||||
export let value;
|
||||
export let label;
|
||||
export let type = 'text';
|
||||
export let name = 'text';
|
||||
export let handleLabelButton;
|
||||
export let handleInputButton;
|
||||
</script>
|
||||
|
||||
<div class="mb-3">
|
||||
{#if label}
|
||||
<p
|
||||
class="dark:text-white p-0 m-0 mb-1 uppercase text-sm font-bold text-gray-600"
|
||||
>
|
||||
{label}
|
||||
|
||||
{#if typeof handleLabelButton === 'function'}
|
||||
<button class="text-xl px-3 ml-5" on:click={handleLabelButton}>
|
||||
+
|
||||
</button>
|
||||
{/if}
|
||||
</p>
|
||||
{/if}
|
||||
|
||||
<div class="w-full">
|
||||
{#if type === 'text'}
|
||||
<input type="text" {name} class="p-2 rounded-md w-4/5" bind:value />
|
||||
{/if}
|
||||
|
||||
{#if type === 'date'}
|
||||
<input type="date" {name} class="p-2 rounded-md w-4/5" bind:value />
|
||||
{/if}
|
||||
|
||||
{#if typeof handleInputButton === 'function'}
|
||||
<button class="text-xl px-3 ml-5" on:click={handleInputButton}>
|
||||
-
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,5 @@
|
||||
<p
|
||||
class="dark:text-white p-0 m-0 mb-1 uppercase text-sm font-bold text-gray-600"
|
||||
>
|
||||
<slot />
|
||||
</p>
|
||||
@@ -0,0 +1,209 @@
|
||||
<script>
|
||||
import Label from './Label.svelte';
|
||||
import Avatar from './Avatar.svelte';
|
||||
|
||||
export let poll = {};
|
||||
export let onSelect = () => {};
|
||||
export let handlePollDelete = () => {};
|
||||
export let currentUserId;
|
||||
let viewResult = false;
|
||||
let selectedOptionToView;
|
||||
let isAuthor = false;
|
||||
let totalVotes = 0;
|
||||
let hasUserVoted = false;
|
||||
|
||||
function handleSelect(optionIndex) {
|
||||
return () => {
|
||||
onSelect(optionIndex);
|
||||
};
|
||||
}
|
||||
|
||||
function getSelectedUsers(users) {
|
||||
return users.map((o) => o.label).join(', ');
|
||||
}
|
||||
|
||||
function getTotalVotes(options) {
|
||||
return options.reduce((acc, cur) => acc + cur.selectedBy.length, 0);
|
||||
}
|
||||
|
||||
function calculatePercent(options, currentOption) {
|
||||
const totalVoteOfAllOptions = getTotalVotes(options);
|
||||
const totalVotesOfCurrentOption = currentOption.selectedBy.length;
|
||||
|
||||
return (
|
||||
Math.round((totalVotesOfCurrentOption / totalVoteOfAllOptions) * 100) || 0
|
||||
);
|
||||
}
|
||||
|
||||
function didUserSelect(option) {
|
||||
return option.selectedBy.find((user) => user.value === currentUserId);
|
||||
}
|
||||
|
||||
$: isAuthor = currentUserId === poll.author.value;
|
||||
$: totalVotes = getTotalVotes(poll.options);
|
||||
$: {
|
||||
hasUserVoted = poll.options.some((option) =>
|
||||
option.selectedBy.find((u) => u.value === currentUserId)
|
||||
);
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="p-4 bg-white dark:bg-gray-800 border-2 rounded-md mb-3">
|
||||
{#if selectedOptionToView}
|
||||
<div>
|
||||
<div class="flex items-center mb-5">
|
||||
<button
|
||||
class="text-xl w-10 px-3"
|
||||
on:click={() => (selectedOptionToView = null)}
|
||||
>
|
||||
{`<`}
|
||||
</button>
|
||||
<div class="flex-grow text-center">
|
||||
<h3 class="dark:text-white font-bold">Voted</h3>
|
||||
</div>
|
||||
</div>
|
||||
{#each selectedOptionToView.selectedBy as user}
|
||||
<div class="flex items-center mb-2">
|
||||
<Avatar src={user.avatar} name={user.label} className="mr-2" />
|
||||
<p class="dark:text-white">
|
||||
{user.label}
|
||||
</p>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{:else}
|
||||
<div class="flex mb-3 justify-between">
|
||||
<div>
|
||||
<h3 class="dark:text-white font-bold">
|
||||
{poll.question}
|
||||
</h3>
|
||||
<p class="dark:text-white text-sm italic">
|
||||
Created by <a
|
||||
class="text-blue-500"
|
||||
href="https://twitter.com/rotimi_best"
|
||||
target="_blank">@{poll.author.label}</a
|
||||
>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{#if isAuthor}
|
||||
<div class="flex mb-3 justify-end items-center">
|
||||
<label class="mr-2 font-bold" for="user-select">Status:</label>
|
||||
|
||||
<select name="users" id="user-select" bind:value={poll.status}>
|
||||
<option value="draft">Draft</option>
|
||||
<option value="Public">Public</option>
|
||||
</select>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
{#if viewResult}
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="mr-5">
|
||||
<Label>Expiration</Label>
|
||||
<p class="dark:text-white text-sm text-gray-600 mb-4">
|
||||
{poll.expiration || 'Today'}
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex flex-col items-center">
|
||||
<Label>Total Votes</Label>
|
||||
<p class="dark:text-white text-sm text-gray-600 mb-4">
|
||||
{totalVotes}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Label>Responses</Label>
|
||||
{#each poll.options as option, index}
|
||||
<div class="border-b p-5">
|
||||
<p class="dark:text-white">
|
||||
{option.label}
|
||||
</p>
|
||||
|
||||
<div class="flex items-center">
|
||||
<div class="w-4/5 h-2 bg-gray-200 relative">
|
||||
<span
|
||||
class="absolute top-0 left-0 bg-blue-700 h-full"
|
||||
style="width: {calculatePercent(poll.options, option)}%;"
|
||||
/>
|
||||
</div>
|
||||
{#if option.selectedBy.length}
|
||||
<button
|
||||
class="text-xl px-3 ml-5"
|
||||
on:click={() => (selectedOptionToView = option)}
|
||||
>
|
||||
>
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="flex items-center">
|
||||
{#each option.selectedBy.slice(0, 3) as user}
|
||||
<Avatar src={user.avatar} name={user.label} className="mr-2" />
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
{:else}
|
||||
{#each poll.options as option, index}
|
||||
<button
|
||||
class="bg-white dark:bg-gray-800 rounded-md border-2 border-gray-500 {didUserSelect(
|
||||
option
|
||||
) &&
|
||||
'focus:border-blue-700 border-blue-700'} text-black p-2 w-full mb-3 text-left relative"
|
||||
on:click={handleSelect(index)}
|
||||
>
|
||||
{#if hasUserVoted}
|
||||
<span
|
||||
class="progress absolute top-0 left-0 {didUserSelect(option)
|
||||
? 'bg-blue-700'
|
||||
: 'bg-gray-300'} h-full bg-opacity-25"
|
||||
style="width: {calculatePercent(poll.options, option)}%;"
|
||||
/>
|
||||
<strong class="mr-3"
|
||||
>{calculatePercent(poll.options, option)}%</strong
|
||||
>
|
||||
{/if}
|
||||
{option.label}
|
||||
</button>
|
||||
{/each}
|
||||
<div class="flex items-center">
|
||||
<p class="dark:text-white text-sm text-gray-600">
|
||||
Expires: {poll.expiration || 'Today'}
|
||||
</p>
|
||||
<span class="mx-2">|</span>
|
||||
<p class="dark:text-white text-sm text-gray-600">
|
||||
Voted: {totalVotes}
|
||||
</p>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if isAuthor}
|
||||
<div class="w-full text-center mt-3">
|
||||
<button
|
||||
class="px-5 py-3 bg-blue-700 text-white"
|
||||
on:click={() => (viewResult = !viewResult)}
|
||||
>
|
||||
{#if viewResult}
|
||||
Back to poll
|
||||
{:else}
|
||||
View results
|
||||
{/if}
|
||||
</button>
|
||||
<button
|
||||
class="px-5 py-3 bg-red-500 text-white"
|
||||
on:click={handlePollDelete}
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.progress {
|
||||
transition: width 0.5s linear;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,19 @@
|
||||
<script>
|
||||
export let tabs = [];
|
||||
|
||||
export let selectedTab;
|
||||
</script>
|
||||
|
||||
<div class="mb-3">
|
||||
{#each tabs as tab}
|
||||
<button
|
||||
class="mr-3 pb-2 border-t-0 border-l-0 border-r-0 {selectedTab ===
|
||||
tab.value
|
||||
? 'border-b-4 border-indigo-600 focus:border-indigo-600'
|
||||
: 'border-b-0'}"
|
||||
on:click={() => (selectedTab = tab.value)}
|
||||
>
|
||||
{tab.label}
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
@@ -0,0 +1,196 @@
|
||||
<script>
|
||||
import PageNav from '$lib/components/PageNav/index.svelte';
|
||||
import CloseButton from '$lib/components/Buttons/Close/index.svelte';
|
||||
import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
|
||||
import { VARIANTS } from '$lib/components/PrimaryButton/constants';
|
||||
import CreatePollForm from './components/CreatePollForm.svelte';
|
||||
import Poll from './components/Poll.svelte';
|
||||
import Tabs from './components/Tabs.svelte';
|
||||
|
||||
export let handleClose;
|
||||
|
||||
const users = [
|
||||
{
|
||||
label: 'Rich Harris',
|
||||
value: 'rich-harris',
|
||||
avatar: 'https://i.pravatar.cc/150?img=1',
|
||||
},
|
||||
{
|
||||
label: 'Linus Torvalds',
|
||||
value: 'linus-torvalds',
|
||||
avatar: 'https://i.pravatar.cc/150?img=2',
|
||||
},
|
||||
{
|
||||
label: 'Elon Musk',
|
||||
value: 'elon-musk',
|
||||
avatar: 'https://i.pravatar.cc/150?img=3',
|
||||
},
|
||||
{
|
||||
label: 'Satoshi Nakamoto',
|
||||
value: 'satoshi-nakamoto',
|
||||
avatar: 'https://i.pravatar.cc/150?img=4',
|
||||
},
|
||||
];
|
||||
const tabs = [
|
||||
{
|
||||
label: 'My polls',
|
||||
value: 0,
|
||||
},
|
||||
{
|
||||
label: 'Other polls',
|
||||
value: 1,
|
||||
},
|
||||
];
|
||||
|
||||
let selectedTab = 0;
|
||||
let userId = users[0].value;
|
||||
let shouldCreatePoll = false;
|
||||
let polls = [
|
||||
{
|
||||
question: 'Who is the creator of Svelte?',
|
||||
author: users[0],
|
||||
status: 'draft', // public
|
||||
expiration: new Date().toDateString(),
|
||||
options: [
|
||||
{
|
||||
label: 'Dan Abrahmov',
|
||||
selectedBy: [],
|
||||
},
|
||||
{
|
||||
label: 'Evan You',
|
||||
selectedBy: [
|
||||
{
|
||||
label: 'Rich Harris',
|
||||
value: 'rich-harris',
|
||||
avatar: 'https://i.pravatar.cc/150?img=1',
|
||||
},
|
||||
{
|
||||
label: 'Linus Torvalds',
|
||||
value: 'linus-torvalds',
|
||||
avatar: 'https://i.pravatar.cc/150?img=2',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: 'Rich Harris',
|
||||
selectedBy: [],
|
||||
},
|
||||
{
|
||||
label: 'Yehuda Katz',
|
||||
selectedBy: [],
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
function handleCreatePoll() {
|
||||
shouldCreatePoll = !shouldCreatePoll;
|
||||
}
|
||||
|
||||
function handlePollCreate(poll) {
|
||||
if (poll) {
|
||||
polls = [
|
||||
{
|
||||
...poll,
|
||||
author: users.find((u) => u.value === userId),
|
||||
},
|
||||
...polls,
|
||||
];
|
||||
}
|
||||
|
||||
handleCreatePoll();
|
||||
}
|
||||
|
||||
function handlePollDelete(pollId) {
|
||||
return () => {
|
||||
polls = [...polls.filter((p, i) => i !== pollId)];
|
||||
};
|
||||
}
|
||||
|
||||
function handleVote(pollId) {
|
||||
return (optionId) => {
|
||||
polls = [
|
||||
...polls.map((poll, index) => {
|
||||
if (index === pollId) {
|
||||
poll.options = poll.options.map((option, optionIndex) => {
|
||||
if (optionIndex === optionId) {
|
||||
if (option.selectedBy.find((user) => user.value === userId)) {
|
||||
// Unselect if already selected
|
||||
// <<update: let me keep this commented so after a user selects an answer it can't be unselected>>
|
||||
// option.selectedBy = option.selectedBy.filter(user => user.value !== userId)
|
||||
} else {
|
||||
// Select if already selected
|
||||
option.selectedBy = [
|
||||
...option.selectedBy,
|
||||
users.find((user) => user.value === userId),
|
||||
];
|
||||
}
|
||||
} else if (
|
||||
option.selectedBy.find((user) => user.value === userId)
|
||||
) {
|
||||
// This makes the user to select only one option
|
||||
option.selectedBy = option.selectedBy.filter(
|
||||
(user) => user.value !== userId
|
||||
);
|
||||
}
|
||||
|
||||
return option;
|
||||
});
|
||||
}
|
||||
|
||||
return poll;
|
||||
}),
|
||||
];
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
<PageNav title="Poll" overidableStyle="padding: 0 10px">
|
||||
<div slot="widget">
|
||||
<CloseButton onClick={handleClose} />
|
||||
</div>
|
||||
</PageNav>
|
||||
|
||||
<div class="m-2 overlow-auto">
|
||||
{#if shouldCreatePoll}
|
||||
<CreatePollForm onSubmit={handlePollCreate} onCancel={handleCreatePoll} />
|
||||
{:else}
|
||||
<div>
|
||||
<Tabs {tabs} bind:selectedTab />
|
||||
|
||||
{#if selectedTab === tabs[0].value}
|
||||
<div class="w-full flex justify-center mb-3">
|
||||
<PrimaryButton
|
||||
label="Create poll"
|
||||
variant={VARIANTS.CONTAINED}
|
||||
onClick={handleCreatePoll}
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#each polls as poll, index}
|
||||
{#if selectedTab === tabs[0].value && poll.author.value === userId}
|
||||
<Poll
|
||||
bind:poll
|
||||
onSelect={handleVote(index)}
|
||||
handlePollDelete={handlePollDelete(index)}
|
||||
currentUserId={userId}
|
||||
/>
|
||||
{:else if selectedTab === tabs[1].value && poll.author.value !== userId}
|
||||
<Poll
|
||||
bind:poll
|
||||
onSelect={handleVote(index)}
|
||||
handlePollDelete={handlePollDelete(index)}
|
||||
currentUserId={userId}
|
||||
/>
|
||||
{/if}
|
||||
{:else}
|
||||
<div
|
||||
class="bg-gray-100 dark:bg-gray-700 border rounded-md h-60 flex items-center justify-center"
|
||||
>
|
||||
<h2 class="text-xl font-bold">No polls to display</h2>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
@@ -0,0 +1,143 @@
|
||||
<script>
|
||||
import { marked } from 'marked';
|
||||
import CheckmarkOutline from 'carbon-icons-svelte/lib/CheckmarkOutline.svelte';
|
||||
import PageNav from '$lib/components/PageNav/index.svelte';
|
||||
import CloseButton from '$lib/components/Buttons/Close/index.svelte';
|
||||
import Vote from '$lib/components/Vote/index.svelte';
|
||||
import TextField from '$lib/components/Form/TextField.svelte';
|
||||
|
||||
export let handleClose;
|
||||
let bodyRef;
|
||||
let question;
|
||||
|
||||
let questions = [
|
||||
{
|
||||
id: 1,
|
||||
name: 'Evgeniy',
|
||||
question: "I'am looking at this and it looks great",
|
||||
vote: 1,
|
||||
answered: false,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: 'Sergey Semko',
|
||||
question:
|
||||
'Thanks for the feedback, what do you think about my website. https://rotimibest.com',
|
||||
vote: 4,
|
||||
answered: false,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: 'Vitalii Marushko',
|
||||
question: 'Всем привет',
|
||||
vote: 20,
|
||||
answered: false,
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: 'Natasha',
|
||||
question: 'Привет Виталий',
|
||||
vote: 0,
|
||||
answered: false,
|
||||
},
|
||||
];
|
||||
|
||||
function handleSend() {
|
||||
if (!question) {
|
||||
return;
|
||||
}
|
||||
|
||||
questions = [
|
||||
...questions,
|
||||
{
|
||||
id: questions.length,
|
||||
name: 'You',
|
||||
question,
|
||||
vote: 0,
|
||||
answered: false,
|
||||
},
|
||||
];
|
||||
|
||||
question = null;
|
||||
|
||||
setTimeout(() => {
|
||||
bodyRef.scrollTo({
|
||||
top: bodyRef.scrollHeight,
|
||||
});
|
||||
}, 100);
|
||||
}
|
||||
|
||||
function handleMarkAnswered(id) {
|
||||
return () => {
|
||||
questions = questions
|
||||
.map((question) => {
|
||||
if (question.id === id) {
|
||||
question.answered = !question.answered;
|
||||
}
|
||||
|
||||
return question;
|
||||
})
|
||||
.sort((a, b) => Number(a.answered) - Number(b.answered));
|
||||
};
|
||||
}
|
||||
|
||||
function handleKeyDown(e) {
|
||||
if (e.key === 'Enter') {
|
||||
handleSend();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<PageNav title="Q/A" overidableStyle="padding: 0 10px">
|
||||
<div slot="widget">
|
||||
<CloseButton onClick={handleClose} />
|
||||
</div>
|
||||
</PageNav>
|
||||
|
||||
<div bind:this={bodyRef} class="body">
|
||||
{#each questions as question}
|
||||
<div class="flex items-start ml-2 mb-2 mt-2">
|
||||
<Vote bind:value={question.vote} />
|
||||
<div class="ml-2 flex-grow">
|
||||
<p class="dark:text-white text-sm font-bold">{question.name}</p>
|
||||
<article class="prose prose-sm sm:prose">
|
||||
{@html marked(question.question)}
|
||||
</article>
|
||||
</div>
|
||||
<button
|
||||
class={`${question.answered && 'active'}`}
|
||||
on:click={handleMarkAnswered(question.id)}
|
||||
>
|
||||
<CheckmarkOutline size={20} class="carbon-icon" />
|
||||
</button>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<TextField
|
||||
placeholder="Say something"
|
||||
bind:value={question}
|
||||
onKeyDown={handleKeyDown}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.body {
|
||||
overflow: auto;
|
||||
height: 80%;
|
||||
|
||||
& button {
|
||||
display: none;
|
||||
}
|
||||
& div:hover button,
|
||||
& button.active {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.footer {
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,8 @@
|
||||
export default {
|
||||
APPS: {
|
||||
QANDA: 'QANDA',
|
||||
NOTES: 'NOTES',
|
||||
LIVE_CHAT: 'LIVE_CHAT',
|
||||
POLL: 'POLL',
|
||||
},
|
||||
};
|
||||
@@ -0,0 +1,132 @@
|
||||
<script>
|
||||
import { onMount } from 'svelte';
|
||||
import hotkeys from 'hotkeys-js';
|
||||
import Forum from 'carbon-icons-svelte/lib/Forum.svelte';
|
||||
import AlignBoxTopLeft from 'carbon-icons-svelte/lib/AlignBoxTopLeft.svelte';
|
||||
import SendAlt from 'carbon-icons-svelte/lib/SendAlt.svelte';
|
||||
import ChartPie from 'carbon-icons-svelte/lib/ChartPie.svelte';
|
||||
import IconButton from '$lib/components/IconButton/index.svelte';
|
||||
|
||||
import QandA from './components/QandA/index.svelte';
|
||||
import LiveChat from './components/LiveChat/index.svelte';
|
||||
import Notes from './components/Notes/index.svelte';
|
||||
import Poll from './components/Poll/index.svelte';
|
||||
import APPS_CONSTANTS from './constants';
|
||||
|
||||
let selectedApp;
|
||||
|
||||
function handleClose() {
|
||||
selectedApp = null;
|
||||
}
|
||||
|
||||
function handleAppClick(appName) {
|
||||
if (appName === selectedApp) {
|
||||
handleClose();
|
||||
} else {
|
||||
selectedApp = appName;
|
||||
}
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
hotkeys('A+1,A+2,A+3,A+4', function (event, handler) {
|
||||
event.preventDefault();
|
||||
switch (handler.key) {
|
||||
case 'A+1':
|
||||
handleAppClick(APPS_CONSTANTS.APPS.LIVE_CHAT);
|
||||
break;
|
||||
case 'A+2':
|
||||
handleAppClick(APPS_CONSTANTS.APPS.QANDA);
|
||||
break;
|
||||
case 'A+3':
|
||||
handleAppClick(APPS_CONSTANTS.APPS.NOTES);
|
||||
break;
|
||||
case 'A+4':
|
||||
handleAppClick(APPS_CONSTANTS.APPS.POLL);
|
||||
break;
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="root">
|
||||
<div class="apps">
|
||||
<IconButton
|
||||
toolTipProps={{ title: 'Live Chat', hotkeys: ['A', '1'] }}
|
||||
value={APPS_CONSTANTS.APPS.LIVE_CHAT}
|
||||
onClick={handleAppClick}
|
||||
selected={APPS_CONSTANTS.APPS.LIVE_CHAT === selectedApp}
|
||||
>
|
||||
<SendAlt size={24} class="carbon-icon" />
|
||||
</IconButton>
|
||||
|
||||
<IconButton
|
||||
toolTipProps={{ title: 'QandA', hotkeys: ['A', '2'] }}
|
||||
value={APPS_CONSTANTS.APPS.QANDA}
|
||||
onClick={handleAppClick}
|
||||
selected={APPS_CONSTANTS.APPS.QANDA === selectedApp}
|
||||
>
|
||||
<Forum size={24} class="carbon-icon" />
|
||||
</IconButton>
|
||||
|
||||
<IconButton
|
||||
toolTipProps={{ title: 'Notes', hotkeys: ['A', '3'] }}
|
||||
value={APPS_CONSTANTS.APPS.NOTES}
|
||||
onClick={handleAppClick}
|
||||
selected={APPS_CONSTANTS.APPS.NOTES === selectedApp}
|
||||
>
|
||||
<AlignBoxTopLeft size={24} class="carbon-icon" />
|
||||
</IconButton>
|
||||
|
||||
<IconButton
|
||||
toolTipProps={{ title: 'Poll', hotkeys: ['A', '4'] }}
|
||||
value={APPS_CONSTANTS.APPS.POLL}
|
||||
onClick={handleAppClick}
|
||||
selected={APPS_CONSTANTS.APPS.POLL === selectedApp}
|
||||
>
|
||||
<ChartPie size={24} class="carbon-icon" />
|
||||
</IconButton>
|
||||
</div>
|
||||
|
||||
{#if !!selectedApp}
|
||||
<div class="app">
|
||||
{#if selectedApp === APPS_CONSTANTS.APPS.QANDA}
|
||||
<QandA {handleClose} />
|
||||
{:else if selectedApp === APPS_CONSTANTS.APPS.LIVE_CHAT}
|
||||
<LiveChat {handleClose} />
|
||||
{:else if selectedApp === APPS_CONSTANTS.APPS.POLL}
|
||||
<Poll {handleClose} />
|
||||
{:else if selectedApp === APPS_CONSTANTS.APPS.NOTES}
|
||||
<Notes {handleClose} />
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.root {
|
||||
height: 93vh;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
border-left: 1px solid var(--border-color);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
z-index: 1;
|
||||
|
||||
& .apps {
|
||||
padding-top: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 60px;
|
||||
border-right: 1px solid var(--border-color);
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
& .app {
|
||||
width: 400px;
|
||||
transition: all 1s ease-out;
|
||||
position: relative;
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user