You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
147 lines
3.9 KiB
147 lines
3.9 KiB
<script lang="ts" context="module">
|
|
export const DARK_COLOR = rgb(0.5176470588235295/2, 0.5333333333333333/2, 0.5607843137254902/1.75);
|
|
export const DARK_COLOR_SELECTED = rgb(0.5176470588235295/1.5, 0.5333333333333333/1.5, 0.5607843137254902/1.25);
|
|
</script>
|
|
|
|
<script lang="ts">
|
|
import { getSelectedContext } from "$lib/contexts/SelectContext.svelte";
|
|
import type Device from "$lib/models/device";
|
|
import { rgb, type ColorRGB } from "../models/color";
|
|
import Icon from "./Icon.svelte";
|
|
import Lamp from "./Lamp.svelte";
|
|
|
|
export let name: string
|
|
export let devices: Device[];
|
|
|
|
let selected: boolean;
|
|
|
|
const {selectedMap, toggleMultiSelection} = getSelectedContext();
|
|
|
|
function onSelect() {
|
|
toggleMultiSelection(devices.map(d => d.id));
|
|
}
|
|
|
|
$: selected = !devices.find(d => !$selectedMap[d.id])
|
|
$: tiny = devices.length > 30;
|
|
$: allAliases = devices.flatMap(d => d.aliases).sort().filter((e, i, a) => a[i-1] !== e);
|
|
$: allTags = allAliases.filter(a => a.startsWith("lucifer:tag:")).map(a => a.split(":")[2]);
|
|
$: allRoles = allAliases.filter(a => a.startsWith("lucifer:role:")).map(a => a.split(":")[2]);
|
|
$: uncommon = allAliases.filter(a => devices.find(d => !d.aliases.includes(a)))
|
|
</script>
|
|
|
|
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
|
<div class="metalamp" class:selected>
|
|
<div class="row">
|
|
<div class="title" on:click={onSelect}>{name}</div>
|
|
</div>
|
|
<div class="row" class:tiny>
|
|
{#each devices as device (device.id)}
|
|
<Lamp compact device={device} />
|
|
{/each}
|
|
<!-- Skittent datasnok -->
|
|
{#each Array.from({length: 64}) as _}
|
|
<div style="width: 3.6ch"></div>
|
|
{/each}
|
|
</div>
|
|
<div class="row">
|
|
{#if allTags.length > 0 || allRoles.length > 0}
|
|
<div class="tag-list">
|
|
{#each allRoles as role}
|
|
<div class="tag" class:uncommon={uncommon.includes(`lucifer:role:${role}`)}>
|
|
<Icon block name="masks_theater" />
|
|
<div class="tag-name">
|
|
{role}
|
|
</div>
|
|
</div>
|
|
{/each}
|
|
{#each allTags as tag}
|
|
<div class="tag" class:uncommon={uncommon.includes(`lucifer:tag:${tag}`)}>
|
|
<Icon block name="tag" />
|
|
<div class="tag-name">
|
|
{tag}
|
|
</div>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
|
|
<style lang="sass">
|
|
div.metalamp
|
|
user-select: none
|
|
cursor: pointer
|
|
width: 19ch
|
|
margin: 0.5ch
|
|
background: #18181c
|
|
color: #84888f
|
|
border-radius: 0.5ch
|
|
border-top-right-radius: 1em
|
|
overflow: hidden
|
|
box-shadow: 1px 1px 1px #000
|
|
padding-bottom: 0.5ch
|
|
|
|
@media screen and (max-width: 1921px)
|
|
width: calc(20% - 1ch)
|
|
|
|
@media screen and (max-width: 1600px)
|
|
width: calc(25% - 1ch)
|
|
|
|
@media screen and (max-width: 1200px)
|
|
width: calc(33.3333333% - 1ch)
|
|
|
|
@media screen and (max-width: 700px)
|
|
width: calc(50% - 1ch)
|
|
margin-top: 0.75ch
|
|
margin-bottom: 0.75ch
|
|
|
|
@media screen and (max-width: 380px)
|
|
width: 100%
|
|
|
|
&.selected
|
|
background: #282833
|
|
color: #cde
|
|
|
|
> div.row
|
|
width: 100%
|
|
padding: 0 0.4ch
|
|
box-sizing: border-box
|
|
width: 100%
|
|
display: flex
|
|
flex-direction: row
|
|
flex-wrap: wrap
|
|
align-content: center
|
|
justify-content: space-between
|
|
|
|
&.tiny
|
|
margin-top: 0.2em
|
|
font-size: 0.4em
|
|
|
|
> div.tag-list
|
|
display: flex
|
|
flex-direction: row
|
|
font-size: 0.5em
|
|
margin-top: 0.5em
|
|
|
|
> div.tag
|
|
display: flex
|
|
flex-direction: row
|
|
padding: 0 0.5ch
|
|
padding-right: 1ch
|
|
|
|
&.uncommon
|
|
opacity: 0.333
|
|
|
|
div.tag-name
|
|
padding-left: 0.5ch
|
|
|
|
> div.title
|
|
font-size: 0.75em
|
|
text-align: left
|
|
margin-top: 0.4em
|
|
margin-right: 1ch
|
|
height: 1.6em
|
|
user-select: none
|
|
margin-left: 0.4ch
|
|
width: 100%
|
|
</style>
|