dashboard/frontend/src/components/manage/AutoCloseCard.svelte
2022-06-04 22:43:05 +01:00

127 lines
4.0 KiB
Svelte

<Card footer="{false}">
<span slot="title">
Auto Close
</span>
<div slot="body" class="body-wrapper">
<form class="form-wrapper" on:submit|preventDefault={submit}>
<div class="row do-margin">
<Checkbox col4={true} label="Enabled" bind:value={data.enabled}/>
<Checkbox col4={true} label="Close On User Leave" bind:value={data.on_user_leave}/>
</div>
<div class="row" style="justify-content: space-between">
<div class="col-2" style="flex-direction: row">
<Duration label="Since Open With No Response" badge="Premium" disabled={!isPremium}
bind:days={sinceOpenDays} bind:hours={sinceOpenHours} bind:minutes={sinceOpenMinutes}/>
</div>
<div class="col-2" style="flex-direction: row">
<Duration label="Since Last Message" badge="Premium" disabled={!isPremium}
bind:days={sinceLastDays} bind:hours={sinceLastHours} bind:minutes={sinceLastMinutes}/>
</div>
</div>
<div class="row">
<div class="col-1">
<Button icon="fas fa-paper-plane" fullWidth=true>Submit</Button>
</div>
</div>
</form>
</div>
</Card>
<style>
.form-wrapper {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
}
.row {
display: flex;
width: 100%;
height: 100%;
}
@media only screen and (max-width: 950px) {
.row {
flex-direction: column;
}
}
.form-wrapper > .row:not(:last-child) {
margin-bottom: 1%;
}
</style>
<script>
import Card from "../Card.svelte";
import Checkbox from "../form/Checkbox.svelte";
import {notifyError, notifySuccess, withLoadingScreen} from "../../js/util";
import axios from "axios";
import {API_URL} from "../../js/constants";
import Duration from "../form/Duration.svelte";
import {toDays, toHours, toMinutes} from "../../js/timeutil";
import Button from "../Button.svelte";
export let guildId;
let data = {};
let isPremium = false;
let sinceOpenDays = 0, sinceOpenHours = 0, sinceOpenMinutes = 0;
let sinceLastDays = 0, sinceLastHours = 0, sinceLastMinutes = 0;
async function submit() {
data.since_open_with_no_response = sinceOpenDays * 86400 + sinceOpenHours * 3600 + sinceOpenMinutes * 60;
data.since_last_message = sinceLastDays * 86400 + sinceLastHours * 3600 + sinceLastMinutes * 60;
const res = await axios.post(`${API_URL}/api/${guildId}/autoclose`, data);
if (res.status !== 200) {
notifyError(res.data.error);
return;
}
notifySuccess('Auto close settings updated successfully');
}
async function loadPremium() {
const res = await axios.get(`${API_URL}/api/${guildId}/premium`);
if (res.status !== 200) {
notifyError(res.data.error);
return;
}
isPremium = res.data.premium;
}
async function loadSettings() {
const res = await axios.get(`${API_URL}/api/${guildId}/autoclose`);
if (res.status !== 200) {
notifyError(res.data.error);
return;
}
data = res.data
update(res.data);
}
function update(data) {
if (data.since_open_with_no_response) {
sinceOpenDays = toDays(data.since_open_with_no_response);
sinceOpenHours = toHours(data.since_open_with_no_response);
sinceOpenMinutes = toMinutes(data.since_open_with_no_response);
}
if (data.since_last_message) {
sinceLastDays = toDays(data.since_last_message);
sinceLastHours = toHours(data.since_last_message);
sinceLastMinutes = toMinutes(data.since_last_message);
}
}
withLoadingScreen(async () => await Promise.all([
loadPremium(),
loadSettings()
]));
</script>