106 lines
5.3 KiB
Svelte
106 lines
5.3 KiB
Svelte
<script lang='ts'>
|
|
import { createEventDispatcher } from 'svelte';
|
|
|
|
export let ruleName;
|
|
export let title
|
|
export let value;
|
|
export let min;
|
|
export let max;
|
|
export let step;
|
|
export let unit = '';
|
|
export let condition;
|
|
|
|
const dispatch = createEventDispatcher();
|
|
|
|
function changeRuleCondition(newCondition) {
|
|
condition = newCondition
|
|
dispatch('changeCondition', { rule: ruleName, condition: newCondition });
|
|
}
|
|
|
|
function changeValue(val) {
|
|
dispatch('changeValue', { rule: ruleName, value: val });
|
|
}
|
|
</script>
|
|
|
|
<!--
|
|
<div class="w-full max-w-xl text-white font-medium text-sm sm:text-[1rem] flex flex-row justify-center items-center">
|
|
{title?.replace('[%]','')} {condition} {value} {unit}
|
|
|
|
<label on:click={() => changeRuleCondition('under')} class="ml-5 cursor-pointer flex flex-row mr-2 justify-center items-center">
|
|
<input type="radio" class="radio checked:bg-purple-600 bg-[#09090B] border border-slate-800 mr-2"
|
|
checked={condition === 'under'} name={ruleName} />
|
|
<span class="label-text text-white">Under</span>
|
|
</label>
|
|
<label on:click={() => changeRuleCondition('over')} class="cursor-pointer flex flex-row ml-2 justify-center items-center">
|
|
<input type="radio" class="radio checked:bg-purple-600 bg-[#09090B] border border-slate-800 mr-2"
|
|
checked={condition === 'over'} name={ruleName} />
|
|
<span class="label-text text-white">Over</span>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="w-full pt-5">
|
|
<input type="range" min={min} max={max} step={step} bind:value on:input={changeValue} class="range range-secondary" />
|
|
</div>
|
|
-->
|
|
|
|
|
|
<!--Start Added Rules-->
|
|
<div class="flex items-center justify-between space-x-2 px-1 py-1.5 text-smaller leading-tight text-default">
|
|
<div class="text-white text-[1rem]">
|
|
{title?.replace('[%]','')}
|
|
</div>
|
|
<div class="flex items-center">
|
|
<button class="mr-1.5 cursor-pointer text-gray-300 sm:hover:text-red-500 focus:outline-none" title="Remove filter">
|
|
<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="CurrentColor" style="max-width:40px">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
|
</svg>
|
|
</button>
|
|
<div class="relative inline-block text-left">
|
|
<div class="dropdown dropdown-end">
|
|
<button tabindex="0" class="bg-[#000] h-[33px] flex flex-row justify-between items-center w-[150px] xs:w-[140px] sm:w-[150px] px-3 text-white rounded-lg truncate">
|
|
<span class="truncate ml-2">
|
|
{#if value === '' || condition === ''}
|
|
Any
|
|
{:else}
|
|
{condition} {value}{unit}
|
|
{/if}
|
|
</span>
|
|
<svg class=" ml-1 h-6 w-6 xs:ml-2 inline-block" viewBox="0 0 20 20" fill="currentColor" style="max-width:40px" aria-hidden="true">
|
|
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
|
</svg>
|
|
</button>
|
|
|
|
<div class="dropdown-content absolute z-40 mt-2 rounded-md bg-[#181C1F] py-1 shadow-lg border border-gray-600 focus:outline-none" tabindex="0" role="menu">
|
|
|
|
<div class="select-none space-y-1 p-1 pb-2 pr-2 text-sm">
|
|
<div class="flex items-center justify-start gap-x-1">
|
|
<div class="relative inline-block flex flex-row items-center justify-center m-auto">
|
|
<label on:click={() => changeRuleCondition('under')} class="cursor-pointer flex flex-row mr-2 justify-center items-center">
|
|
<input type="radio" class="radio checked:bg-purple-600 bg-[#09090B] border border-slate-800 mr-2"
|
|
checked={condition === 'under'} name={ruleName} />
|
|
<span class="label-text text-white">Under</span>
|
|
</label>
|
|
<label on:click={() => changeRuleCondition('over')} class="cursor-pointer flex flex-row ml-2 justify-center items-center">
|
|
<input type="radio" class="radio checked:bg-purple-600 bg-[#09090B] border border-slate-800 mr-2"
|
|
checked={condition === 'over'} name={ruleName} />
|
|
<span class="label-text text-white">Over</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="thin-scrollbar dark:styled-scrollbar dark:right-scrollbar max-h-[250px] overflow-y-auto overflow-x-hidden overscroll-contain border-t border-gray-600
|
|
dark:border-dark-500 xl:max-h-[297px]">
|
|
{#each step as newValue}
|
|
<button on:click={() => changeValue(newValue)} class="block w-full border-b border-gray-600 px-4 py-2 text-left text-sm text-white last:border-0 sm:hover:bg-gray-100 sm:hover:text-gray-900
|
|
focus:bg-blue-100 focus:text-gray-900 focus:outline-none">
|
|
{condition} {newValue}{unit}
|
|
</button>
|
|
{/each}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--End Added Rules--> |