87 lines
2.3 KiB
Svelte
87 lines
2.3 KiB
Svelte
<form on:submit|preventDefault>
|
|
<div class="row">
|
|
<Input col1={true} label="Panel Title" placeholder="Click to open a ticket" bind:value={data.title}/>
|
|
</div>
|
|
<div class="row">
|
|
<Textarea col1={true} label="Panel Content" bind:value={data.content}
|
|
placeholder="Click on the button corresponding to the type of ticket you wish to open. Let users know which button responds to which category. You are able to use emojis here."/>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-1-3">
|
|
<Colour col1={true} label="Panel Colour" on:change={updateColour} bind:value={tempColour}/>
|
|
</div>
|
|
<div class="col-2-3">
|
|
<ChannelDropdown col1={true} {channels} label="Panel Channel" bind:value={data.channel_id}/>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-1">
|
|
<PanelDropdown label="Panels" bind:panels bind:selected={data.panels} />
|
|
</div>
|
|
</div>
|
|
</form>
|
|
|
|
<script>
|
|
import Input from "../form/Input.svelte";
|
|
import Textarea from "../form/Textarea.svelte";
|
|
import Colour from "../form/Colour.svelte";
|
|
import {colourToInt, intToColour} from "../../js/util";
|
|
import ChannelDropdown from "../ChannelDropdown.svelte";
|
|
import PanelDropdown from "../PanelDropdown.svelte";
|
|
import {onMount} from "svelte";
|
|
|
|
export let data = {};
|
|
|
|
export let guildId;
|
|
export let channels = [];
|
|
export let panels = [];
|
|
|
|
export let seedDefault = true;
|
|
if (seedDefault) {
|
|
data = {
|
|
colour: 0x7289da,
|
|
channels: channels[0].id,
|
|
panels: [],
|
|
}
|
|
}
|
|
|
|
let tempColour = '#7289da';
|
|
|
|
function updateColour() {
|
|
data.colour = colourToInt(tempColour);
|
|
}
|
|
|
|
function applyOverrides() {
|
|
tempColour = intToColour(data.colour);
|
|
}
|
|
|
|
onMount(() => {
|
|
if (!seedDefault) {
|
|
applyOverrides();
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style>
|
|
form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
@media only screen and (max-width: 950px) {
|
|
.row {
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
</style>
|