resize feedback text field
This commit is contained in:
MuslemRahimi
parent
92a145f2e6
commit
cdd712d5da
@ -1,17 +1,18 @@
|
|||||||
<script lang='ts'>
|
<svelte:options immutable={true} />
|
||||||
import toast from 'svelte-french-toast';
|
|
||||||
import veryGoodEmoji from '$lib/assets/veryGoodEmoji.svg';
|
<script lang="ts">
|
||||||
import goodEmoji from '$lib/assets/goodEmoji.svg';
|
import toast from "svelte-french-toast";
|
||||||
import badEmoji from '$lib/assets/badEmoji.svg';
|
import veryGoodEmoji from "$lib/assets/veryGoodEmoji.svg";
|
||||||
import veryBadEmoji from '$lib/assets/veryBadEmoji.svg';
|
import goodEmoji from "$lib/assets/goodEmoji.svg";
|
||||||
|
import badEmoji from "$lib/assets/badEmoji.svg";
|
||||||
|
import veryBadEmoji from "$lib/assets/veryBadEmoji.svg";
|
||||||
export let data;
|
export let data;
|
||||||
|
|
||||||
let cloudFrontUrl = import.meta.env.VITE_IMAGE_URL;
|
let cloudFrontUrl = import.meta.env.VITE_IMAGE_URL;
|
||||||
|
|
||||||
|
let rating = "";
|
||||||
let rating = '';
|
let inputValue = "";
|
||||||
let inputValue = '';
|
|
||||||
|
|
||||||
/*
|
/*
|
||||||
async function handleReturn() {
|
async function handleReturn() {
|
||||||
rating = '';
|
rating = '';
|
||||||
@ -20,148 +21,176 @@
|
|||||||
}
|
}
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
async function sendFeedback() {
|
||||||
|
if (inputValue?.length === 0) {
|
||||||
|
toast.error("Please enter your feedback", {
|
||||||
|
style: "border-radius: 200px; background: #333; color: #fff;",
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
async function sendFeedback()
|
|
||||||
{
|
|
||||||
|
|
||||||
if (inputValue?.length === 0) {
|
|
||||||
toast.error('Please enter your feedback', {
|
|
||||||
style: 'border-radius: 200px; background: #333; color: #fff;',
|
|
||||||
});
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (rating?.length === 0) {
|
if (rating?.length === 0) {
|
||||||
toast.error('Please select an emoji', {
|
toast.error("Please select an emoji", {
|
||||||
style: 'border-radius: 200px; background: #333; color: #fff;',
|
style: "border-radius: 200px; background: #333; color: #fff;",
|
||||||
});
|
});
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
const closePopup = document.getElementById('feedbackInfo');
|
const closePopup = document.getElementById("feedbackInfo");
|
||||||
closePopup?.dispatchEvent(new MouseEvent('click'))
|
closePopup?.dispatchEvent(new MouseEvent("click"));
|
||||||
|
|
||||||
const userId = data?.user?.id ?? '';
|
const userId = data?.user?.id ?? "";
|
||||||
|
|
||||||
const postData = {'user': userId,
|
const postData = { user: userId, rating: rating, description: inputValue };
|
||||||
'rating': rating,
|
|
||||||
'description': inputValue};
|
const response = await fetch("/api/feedback", {
|
||||||
|
method: "POST",
|
||||||
|
|
||||||
const response = await fetch('/api/feedback', {
|
|
||||||
method: 'POST',
|
|
||||||
headers: {
|
headers: {
|
||||||
"Content-Type": "application/json"
|
"Content-Type": "application/json",
|
||||||
},
|
},
|
||||||
body: JSON.stringify(postData)
|
body: JSON.stringify(postData),
|
||||||
});
|
});
|
||||||
|
|
||||||
const output = (await response.json())?.items;
|
const output = (await response.json())?.items;
|
||||||
|
|
||||||
if (output === 'success') {
|
if (output === "success") {
|
||||||
toast.success('Thank you for your feedback', {
|
toast.success("Thank you for your feedback", {
|
||||||
style: 'border-radius: 200px; background: #333; color: #fff;'});
|
style: "border-radius: 200px; background: #333; color: #fff;",
|
||||||
inputValue = '';
|
});
|
||||||
|
inputValue = "";
|
||||||
} else {
|
} else {
|
||||||
toast.error('Something went wrong. Please try again later!', {
|
toast.error("Something went wrong. Please try again later!", {
|
||||||
style: 'border-radius: 200px; background: #333; color: #fff;'});
|
style: "border-radius: 200px; background: #333; color: #fff;",
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
rating = "";
|
||||||
rating = '';
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function handleInput(event) {
|
function handleInput(event) {
|
||||||
inputValue = event.target.value;
|
inputValue = event.target.value;
|
||||||
}
|
}
|
||||||
|
</script>
|
||||||
</script>
|
|
||||||
|
|
||||||
|
|
||||||
<svelte:head>
|
<svelte:head>
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
|
<meta
|
||||||
|
name="viewport"
|
||||||
|
content="width=device-width, initial-scale=1.0, maximum-scale=1.0"
|
||||||
|
/>
|
||||||
</svelte:head>
|
</svelte:head>
|
||||||
|
|
||||||
<svelte:options immutable={true}/>
|
|
||||||
|
|
||||||
|
<div class="fixed z-[100] bottom-8 sm:bottom-10 right-8 sm:right-16">
|
||||||
<div class="fixed z-[100] bottom-8 sm:bottom-10 right-8 sm:right-16">
|
<label
|
||||||
<label for="feedbackInfo" class="inline-flex items-center justify-center w-12 h-12 sm:w-full sm:h-10 font-medium bg-gray-700 sm:bg-[#FFEDE5] ml-1 mr-0 sm:mr-2 rounded-full cursor-pointer">
|
for="feedbackInfo"
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" class="sm:hidden sm:ml-4 w-6 h-6 text-white inline-block" viewBox="0 0 256 256"><path fill="white" d="M140 180a12 12 0 1 1-12-12a12 12 0 0 1 12 12M128 72c-22.06 0-40 16.15-40 36v4a8 8 0 0 0 16 0v-4c0-11 10.77-20 24-20s24 9 24 20s-10.77 20-24 20a8 8 0 0 0-8 8v8a8 8 0 0 0 16 0v-.72c18.24-3.35 32-17.9 32-35.28c0-19.85-17.94-36-40-36m104 56A104 104 0 1 1 128 24a104.11 104.11 0 0 1 104 104m-16 0a88 88 0 1 0-88 88a88.1 88.1 0 0 0 88-88"/></svg>
|
class="inline-flex items-center justify-center w-12 h-12 sm:w-full sm:h-10 font-medium bg-gray-700 sm:bg-[#FFEDE5] ml-1 mr-0 sm:mr-2 rounded-full cursor-pointer"
|
||||||
<span class="text-black hidden sm:block text-md px-3">
|
>
|
||||||
Feedback
|
<svg
|
||||||
</span>
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
<img class="hidden sm:inline-block w-12 -mt-6 opacity-[0.85]" src={cloudFrontUrl+"/assets/feedback_icon.png"} alt="feedback logo"/>
|
class="sm:hidden sm:ml-4 w-6 h-6 text-white inline-block"
|
||||||
</label>
|
viewBox="0 0 256 256"
|
||||||
</div>
|
><path
|
||||||
|
fill="white"
|
||||||
|
d="M140 180a12 12 0 1 1-12-12a12 12 0 0 1 12 12M128 72c-22.06 0-40 16.15-40 36v4a8 8 0 0 0 16 0v-4c0-11 10.77-20 24-20s24 9 24 20s-10.77 20-24 20a8 8 0 0 0-8 8v8a8 8 0 0 0 16 0v-.72c18.24-3.35 32-17.9 32-35.28c0-19.85-17.94-36-40-36m104 56A104 104 0 1 1 128 24a104.11 104.11 0 0 1 104 104m-16 0a88 88 0 1 0-88 88a88.1 88.1 0 0 0 88-88"
|
||||||
|
/></svg
|
||||||
|
>
|
||||||
<!--Start Create Watchlist Modal-->
|
<span class="text-black hidden sm:block text-md px-3"> Feedback </span>
|
||||||
<input type="checkbox" id="feedbackInfo" class="modal-toggle" />
|
<img
|
||||||
|
class="hidden sm:inline-block w-12 -mt-6 opacity-[0.85]"
|
||||||
<dialog id="feedbackInfo" class="modal modal-bottom sm:modal-middle overflow-hidden">
|
src={cloudFrontUrl + "/assets/feedback_icon.png"}
|
||||||
|
alt="feedback logo"
|
||||||
|
/>
|
||||||
<label for="feedbackInfo" class="cursor-pointer modal-backdrop bg-[#fff] bg-opacity-[0.05]"></label>
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="modal-box w-full bg-[#000]" >
|
<!--Start Create Watchlist Modal-->
|
||||||
|
<input type="checkbox" id="feedbackInfo" class="modal-toggle" />
|
||||||
<div class="flex flex-row items-center pt-5">
|
|
||||||
<h1 class="text-white text-xl sm:text-2xl font-bold">
|
<dialog
|
||||||
Your Feedback matters!
|
id="feedbackInfo"
|
||||||
</h1>
|
class="modal modal-bottom sm:modal-middle overflow-hidden"
|
||||||
</div>
|
>
|
||||||
|
<label
|
||||||
|
for="feedbackInfo"
|
||||||
<div class="p-2 mt-5 w-full ">
|
class="cursor-pointer modal-backdrop bg-[#fff] bg-opacity-[0.05]"
|
||||||
<textarea
|
></label>
|
||||||
class="textarea textarea-bordered placeholder-gray-300 w-full bg-[#09090B] text-white border border-gray-600"
|
|
||||||
placeholder="Your feedback..."
|
<div class="modal-box w-full bg-[#000]">
|
||||||
value={inputValue}
|
<div class="flex flex-row items-center pt-5">
|
||||||
on:input={handleInput}
|
<h1 class="text-white text-xl sm:text-2xl font-bold">
|
||||||
/>
|
Your Feedback matters!
|
||||||
|
</h1>
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<ul class="flex gap-5 justify-center mt-5 mb-5">
|
|
||||||
<li on:click={() => rating= 'Very Good'} class="cursor-pointer">
|
|
||||||
<div class="rounded-full w-16 h-16 relative {rating === 'Very Good' ? 'bg-[#333333]' : ''} hover:bg-[#333333] flex items-center justify-center">
|
|
||||||
<img class="w-8 h-8 sm:w-10 sm:h-10" src={veryGoodEmoji} loading="lazy" />
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li on:click={() => rating= 'Good'} class="cursor-pointer">
|
|
||||||
<div class="rounded-full w-16 h-16 relative {rating === 'Good' ? 'bg-[#333333]' : ''} hover:bg-[#333333] flex items-center justify-center">
|
|
||||||
<img class="w-8 h-8 sm:w-10 sm:h-10" src={goodEmoji} loading="lazy" />
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li on:click={() => rating= 'Bad'} class="cursor-pointer">
|
|
||||||
<div class="rounded-full w-16 h-16 relative {rating === 'Bad' ? 'bg-[#333333]' : ''} hover:bg-[#333333] flex items-center justify-center">
|
|
||||||
<img class="w-8 h-8 sm:w-10 sm:h-10" src={badEmoji} loading="lazy" />
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li on:click={() => rating= 'Very Bad'} class="cursor-pointer">
|
|
||||||
<div class="rounded-full w-16 h-16 relative {rating === 'Very Bad' ? 'bg-[#333333]' : ''} hover:bg-[#333333] flex items-center justify-center">
|
|
||||||
<img class="w-8 h-8 sm:w-10 sm:h-10" src={veryBadEmoji} loading="lazy" />
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<span class="hidden text-white flex justify-center text-lg sm:text-xl font-bold">
|
|
||||||
I think this website is {rating?.length !== 0 ? `"${rating}"` : ''}
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<button on:click={() => sendFeedback()} class="mb-4 px-3 py-2 bg-purple-600 smhover:bg-purple-700 {rating?.length !== 0 && inputValue?.length !== 0 ? 'opacity-100 cursor-pointer' : 'opacity-60 cursor-default'} w-11/12 rounded-lg m-auto text-white font-semibold text-md">
|
|
||||||
Send Feedback
|
|
||||||
</button>
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</dialog>
|
|
||||||
|
<div class="p-2 mt-5 w-full h-[200px] max-h-[1000px]">
|
||||||
|
<textarea
|
||||||
|
class="max-h-[1000px] h-[200px] textarea textarea-bordered placeholder-gray-300 w-full bg-[#09090B] text-white border border-gray-600"
|
||||||
|
placeholder="Your feedback..."
|
||||||
|
value={inputValue}
|
||||||
|
on:input={handleInput}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<ul class="flex gap-5 justify-center mt-5 mb-5">
|
||||||
|
<li on:click={() => (rating = "Very Good")} class="cursor-pointer">
|
||||||
|
<div
|
||||||
|
class="rounded-full w-16 h-16 relative {rating === 'Very Good'
|
||||||
|
? 'bg-[#333333]'
|
||||||
|
: ''} hover:bg-[#333333] flex items-center justify-center"
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
class="w-8 h-8 sm:w-10 sm:h-10"
|
||||||
|
src={veryGoodEmoji}
|
||||||
|
loading="lazy"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li on:click={() => (rating = "Good")} class="cursor-pointer">
|
||||||
|
<div
|
||||||
|
class="rounded-full w-16 h-16 relative {rating === 'Good'
|
||||||
|
? 'bg-[#333333]'
|
||||||
|
: ''} hover:bg-[#333333] flex items-center justify-center"
|
||||||
|
>
|
||||||
|
<img class="w-8 h-8 sm:w-10 sm:h-10" src={goodEmoji} loading="lazy" />
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li on:click={() => (rating = "Bad")} class="cursor-pointer">
|
||||||
|
<div
|
||||||
|
class="rounded-full w-16 h-16 relative {rating === 'Bad'
|
||||||
|
? 'bg-[#333333]'
|
||||||
|
: ''} hover:bg-[#333333] flex items-center justify-center"
|
||||||
|
>
|
||||||
|
<img class="w-8 h-8 sm:w-10 sm:h-10" src={badEmoji} loading="lazy" />
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li on:click={() => (rating = "Very Bad")} class="cursor-pointer">
|
||||||
|
<div
|
||||||
|
class="rounded-full w-16 h-16 relative {rating === 'Very Bad'
|
||||||
|
? 'bg-[#333333]'
|
||||||
|
: ''} hover:bg-[#333333] flex items-center justify-center"
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
class="w-8 h-8 sm:w-10 sm:h-10"
|
||||||
|
src={veryBadEmoji}
|
||||||
|
loading="lazy"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<span
|
||||||
|
class="hidden text-white flex justify-center text-lg sm:text-xl font-bold"
|
||||||
|
>
|
||||||
|
I think this website is {rating?.length !== 0 ? `"${rating}"` : ""}
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<button
|
||||||
|
on:click={() => sendFeedback()}
|
||||||
|
class="mb-4 px-3 py-2 bg-purple-600 smhover:bg-purple-700 {rating?.length !==
|
||||||
|
0 && inputValue?.length !== 0
|
||||||
|
? 'opacity-100 cursor-pointer'
|
||||||
|
: 'opacity-60 cursor-not-allowed'} w-11/12 rounded-lg m-auto text-white font-semibold text-md"
|
||||||
|
>
|
||||||
|
Send Feedback
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</dialog>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user