mirror of https://github.com/cupcakearmy/ora.git
79 lines
2.2 KiB
Svelte
79 lines
2.2 KiB
Svelte
<script>
|
|
import { createEventDispatcher } from 'svelte'
|
|
import { cloneDeep } from 'lodash'
|
|
|
|
import { DB } from '../../shared/db'
|
|
import { checkForErrors, LimitValidator } from '../../shared/validation'
|
|
import DurationInput from './DurationInput.svelte'
|
|
|
|
const dispatch = createEventDispatcher()
|
|
const init = { limit: ['1', 'h'], every: [1, 'd'] }
|
|
|
|
export let limit = null
|
|
export let error = null
|
|
$: active = limit !== null
|
|
|
|
function add() {
|
|
limit.rules = [...limit.rules, cloneDeep(init)]
|
|
}
|
|
|
|
function del(i) {
|
|
return () => (limit.rules = limit.rules.filter((_, n) => n !== i))
|
|
}
|
|
|
|
function close() {
|
|
limit = null
|
|
}
|
|
|
|
async function save() {
|
|
const errors = checkForErrors(LimitValidator, limit)
|
|
if (errors) {
|
|
error = errors
|
|
return
|
|
}
|
|
await DB.limits.put(limit)
|
|
dispatch('update')
|
|
close()
|
|
}
|
|
</script>
|
|
|
|
<div class:active class="modal">
|
|
<a on:click={close} class="modal-overlay" aria-label="Close" />
|
|
<div class="modal-container">
|
|
<div class="modal-header">
|
|
<a on:click={close} class="btn btn-clear float-right" aria-label="Close" />
|
|
<div class="modal-title h5">{limit?._id ? 'Edit limit' : 'Create new limit'}</div>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="content">
|
|
{#if limit}
|
|
<label class="form-label">
|
|
Host
|
|
<input type="text" class="form-input" placeholder="google.com" bind:value={limit.host} />
|
|
</label>
|
|
|
|
<div class="form-label">Rules</div>
|
|
{#each limit.rules as rule, i}
|
|
<div class="input-group mb-3">
|
|
<DurationInput bind:value={rule.limit} />
|
|
<span class="input-group-addon">every</span>
|
|
<DurationInput bind:value={rule.every} />
|
|
<button class="btn btn-error input-group-btn" on:click={del(i)}>X</button>
|
|
</div>
|
|
{/each}
|
|
<button class="btn" on:click={add}>Add</button>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<div>
|
|
{#if error}
|
|
<span class="text-error">{error}</span>
|
|
{/if}
|
|
<button on:click={close} class="btn">Cancel</button>
|
|
<button on:click={save} class="btn btn-primary">Save</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|