mirror of
https://github.com/fmhy/edit.git
synced 2026-02-18 09:11:33 +11:00
comment
This commit is contained in:
maropboia
parent
6da3e1f016
commit
1efd4b9194
1 changed files with 32 additions and 96 deletions
|
|
@ -1,20 +1,27 @@
|
|||
<script setup lang="ts">
|
||||
// Import necessary functions and components from Vue and VitePress
|
||||
import { reactive, ref } from 'vue'
|
||||
import { useRouter } from 'vitepress'
|
||||
import {
|
||||
type FeedbackType,
|
||||
getFeedbackOption,
|
||||
feedbackOptions
|
||||
} from '../../types/Feedback'
|
||||
import { type FeedbackType, getFeedbackOption, feedbackOptions } from '../../types/Feedback'
|
||||
|
||||
// Define reactive loading, error, and success states
|
||||
const loading = ref<boolean>(false)
|
||||
const error = ref<unknown>(null)
|
||||
const success = ref<boolean>(false)
|
||||
|
||||
// Initialize the router
|
||||
const router = useRouter()
|
||||
|
||||
// Initialize the reactive feedback object
|
||||
const feedback = reactive<FeedbackType>({ message: '' })
|
||||
|
||||
/*
|
||||
Define the handleSubmit function which accepts an optional type parameter
|
||||
of FeedbackType. This function sets the feedback.type property, sets
|
||||
the loading state to true, and then proceeds to send a POST request to
|
||||
the feedback API endpoint with the feedback data as JSON in the request
|
||||
body. It handles errors and updates the appropriate states accordingly.
|
||||
*/
|
||||
async function handleSubmit(type?: FeedbackType['type']) {
|
||||
if (type) feedback.type = type
|
||||
loading.value = true
|
||||
|
|
@ -53,29 +60,37 @@ async function handleSubmit(type?: FeedbackType['type']) {
|
|||
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<!-- Conditionally render the feedback steps based on the feedback states -->
|
||||
<Transition name="fade" mode="out-in">
|
||||
<div v-if="!feedback.type" class="step">
|
||||
<!-- Heading for the feedback page -->
|
||||
<div>
|
||||
<div>
|
||||
<p class="heading">Feedback</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Container for the feedback buttons -->
|
||||
<div class="button-container">
|
||||
<!-- Render the feedback buttons using v-for and pass the appropriate type value -->
|
||||
<button
|
||||
v-for="item in feedbackOptions"
|
||||
:key="item.value"
|
||||
class="btn"
|
||||
@click="handleSubmit(item.value as FeedbackType['type'])"
|
||||
>
|
||||
<!-- Button label -->
|
||||
<span>{{ item.label }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="feedback.type && !success" class="step">
|
||||
<!-- Page path and feedback type -->
|
||||
<div>
|
||||
<p class="desc">Page: {{ router.route.path }}</p>
|
||||
<div>
|
||||
<!-- Feedback type label -->
|
||||
<span>{{ getFeedbackOption(feedback.type)?.label }}</span>
|
||||
<!-- Button to close the current feedback type -->
|
||||
<button
|
||||
style="margin-left: 0.5rem"
|
||||
class="btn"
|
||||
|
|
@ -85,7 +100,9 @@ async function handleSubmit(type?: FeedbackType['type']) {
|
|||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Container for the textarea and additional information -->
|
||||
<div v-if="feedback.type === 'suggestion'" class="text-sm mb-2">
|
||||
<!-- Suggestions for different types of feedback -->
|
||||
<strong>🕹️ Emulators</strong>
|
||||
<p class="desc">
|
||||
They're already on the
|
||||
|
|
@ -96,6 +113,7 @@ async function handleSubmit(type?: FeedbackType['type']) {
|
|||
Game Tech Wiki.
|
||||
</a>
|
||||
</p>
|
||||
<!-- More suggestions for different types of feedback -->
|
||||
<strong>🔻 Leeches</strong>
|
||||
<p class="desc">
|
||||
They're already on the
|
||||
|
|
@ -106,6 +124,7 @@ async function handleSubmit(type?: FeedbackType['type']) {
|
|||
File Hosting Wiki.
|
||||
</a>
|
||||
</p>
|
||||
<!-- More suggestions for different types of feedback -->
|
||||
<strong>🐧 Distros</strong>
|
||||
<p class="desc">
|
||||
They're already on
|
||||
|
|
@ -116,22 +135,26 @@ async function handleSubmit(type?: FeedbackType['type']) {
|
|||
DistroWatch.
|
||||
</a>
|
||||
</p>
|
||||
<!-- Information about inappropriate feedback -->
|
||||
<strong>🎲 Mining / Betting Sites</strong>
|
||||
<p class="desc">
|
||||
Don't post anything related to betting, mining, BINs, CCs, etc.
|
||||
</p>
|
||||
<!-- Information about multiplayer game hacks -->
|
||||
<strong>🎮 Multiplayer Game Hacks</strong>
|
||||
<p class="desc">
|
||||
Don't post any hacks/exploits that give unfair advantages in
|
||||
multiplayer games.
|
||||
</p>
|
||||
</div>
|
||||
<!-- Textarea for user feedback -->
|
||||
<textarea
|
||||
v-model="feedback.message"
|
||||
autofocus
|
||||
class="input"
|
||||
placeholder="What a lovely wiki!"
|
||||
/>
|
||||
<!-- Additional information about contacting the team -->
|
||||
<p class="desc mb-2">
|
||||
If you want a reply to your feedback, feel free to mention a contact
|
||||
in the message or join our
|
||||
|
|
@ -142,6 +165,7 @@ async function handleSubmit(type?: FeedbackType['type']) {
|
|||
Discord.
|
||||
</a>
|
||||
</p>
|
||||
<!-- Button to submit the feedback -->
|
||||
<button
|
||||
type="submit"
|
||||
class="btn btn-primary"
|
||||
|
|
@ -150,10 +174,12 @@ async function handleSubmit(type?: FeedbackType['type']) {
|
|||
"
|
||||
@click="handleSubmit()"
|
||||
>
|
||||
<!-- Button label -->
|
||||
Submit
|
||||
</button>
|
||||
</div>
|
||||
<div v-else class="step">
|
||||
<!-- Heading for the success step -->
|
||||
<p class="heading">Thanks for your feedback!</p>
|
||||
</div>
|
||||
</Transition>
|
||||
|
|
@ -161,95 +187,5 @@ async function handleSubmit(type?: FeedbackType['type']) {
|
|||
</template>
|
||||
|
||||
<style scoped>
|
||||
.step > * + * {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
background-color: var(--vp-c-bg);
|
||||
border-radius: 8px;
|
||||
transition:
|
||||
border-color 0.25s,
|
||||
background-color 0.25s;
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: 1.5;
|
||||
margin: 0;
|
||||
padding: 0.375rem 0.75rem;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.btn:disabled {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
border-color: var(--vp-c-brand);
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
color: #fff;
|
||||
background-color: var(--vp-c-brand);
|
||||
border-color: var(--vp-c-brand);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background-color: var(--vp-c-brand-darker);
|
||||
border-color: var(--vp-c-brand-darker);
|
||||
}
|
||||
|
||||
.heading {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.button-container {
|
||||
display: grid;
|
||||
grid-gap: 0.5rem;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
margin: 2rem 0;
|
||||
padding: 1.5rem;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
background: var(--vp-c-bg-alt);
|
||||
}
|
||||
|
||||
.input {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
padding: 0.375rem 0.75rem;
|
||||
}
|
||||
|
||||
.contact-input {
|
||||
height: 50px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
padding: 0.375rem 0.75rem;
|
||||
}
|
||||
|
||||
.desc {
|
||||
display: block;
|
||||
line-height: 20px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: opacity 0.25s ease;
|
||||
}
|
||||
|
||||
.fade-enter-from,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
// Styling for the component
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue