Lucifer3/Server
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

ui stuff from laptop

Browse Source
This commit is contained in:
gisle
2023-02-04 11:15:22 +01:00
parent d2b2244e2f
commit da8fd03e8a
14 changed files with 4009 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/lib/components/Lamp.svelte
+140 -54
View File
@@ -1,76 +1,162 @@
<script lang="ts">
import type { ColorRGB } from "../models/color";
import { getSelectedContext } from "$lib/contexts/SelectContext.svelte";
import type Device from "$lib/models/device";
import { SupportFlags } from "$lib/models/device";
import { rgb, type ColorRGB } from "../models/color";
export let selected: boolean = false;
export let title: string;
export let color: ColorRGB;
export let intensity: number;
export let device: Device;
const {selectedMap, toggleSelection} = getSelectedContext();
function onSelect() {
toggleSelection(device.id);
}
// Process device
let deviceTitle: string;
let iconColor: ColorRGB | null;
let barColor: ColorRGB | null;
let barPercentage: number | null;
let roundboiText: string | null;
$: {
// TODO: Fix device.name on the backend
const nameAlias = device.aliases.find(a => a.startsWith("lucifer:name:"));
if (nameAlias != null) {
deviceTitle = nameAlias.slice("lucifer:name:".length);
} else {
deviceTitle = "";
}
barPercentage = null;
barColor = null;
iconColor = null;
if (device.hwState) {
const hws = device.hwState;
const sflags = hws.supportFlags;
if (deviceTitle == "") {
deviceTitle = device.hwState.internalName;
}
if (sflags & SupportFlags.Color) {
iconColor = device.activeColorRgb;
} else {
iconColor = null;
}
if (sflags & SupportFlags.SensorPresence) {
barColor = rgb(0.5,0.5,0.5);
barPercentage = Math.max(0, (300 - (device.sensors.lastMotion||300))/300) * 100;
}
if (sflags & SupportFlags.Temperature) {
barColor = rgb(1.000,0.2,0.2);
barPercentage = Math.min(1, Math.max(0, (device.desiredState.temperature||0) - 5) / 35) * 100;
}
if (sflags & SupportFlags.Intensity) {
if (sflags & SupportFlags.Color) {
barColor = device.activeColorRgb;
} else {
barColor = rgb(1.000,0.671,0.355);
}
barPercentage = device.desiredState.intensity;
}
if (sflags & SupportFlags.SensorTemperature && !!device.sensors.temperature) {
roundboiText = `${device.sensors.temperature.toFixed(0)}°`
}
}
}
// Make title visible
let displayTitle: string;
$: {
if (title.length > 12) {
let last = title.split(" ").pop() || title;
if (deviceTitle.length > 12) {
let last = deviceTitle.split(" ").pop() || deviceTitle;
if (last.length > 4) {
last = last.slice(-3);
}
displayTitle = `${(title.split(" ").shift()||"").slice(0, 10 - last.length)}... ${last}`
displayTitle = `${(deviceTitle.split(" ").shift()||"").slice(0, 10 - last.length)}... ${last}`
} else {
displayTitle = title;
displayTitle = deviceTitle;
}
}
</script>
<div class="lamp" class:selected>
<!-- svelte-ignore a11y-click-events-have-key-events -->
<div class="lamp" class:selected={$selectedMap[device.id]} on:click={onSelect}>
<div class="row">
<div style="background-color: rgb({color.red*255},{color.green*255},{color.blue*255})" class="roundboi"></div>
{#if iconColor != null}
<div style="background-color: rgb({iconColor.red*255},{iconColor.green*255},{iconColor.blue*255})" class="roundboi"></div>
{:else}
<div style="background-color: #223)" class="roundboi">
{#if !!roundboiText}
<div class="roundboi-text">{roundboiText}</div>
{/if}
</div>
{/if}
<div class="title">{displayTitle}</div>
</div>
<div class="flatboi">
<div style="width: {intensity*100}%; background-color: rgb({color.red*255},{color.green*255},{color.blue*255})" class="flatboi2"></div>
{#if barColor != null && barPercentage != null}
<div style="width: {barPercentage*100}%; background-color: rgb({barColor.red*255},{barColor.green*255},{barColor.blue*255})" class="flatboi2"></div>
{/if}
</div>
</div>
<style>
div.lamp {
width: 15ch;
height: 2em;
margin: 0.25em;
background: #18181c;
color: #84888f;
border-radius: 0.25em;
border-top-right-radius: 1em;
overflow: hidden;
}
div.lamp.selected {
background: #282833;
color: #cde;
}
div.lamp > div.row {
display: flex;
}
div.lamp > div.row > div.roundboi {
width: 1.25em;
height: 1.25em;
margin-left: 0.25em;
margin-top: 0.30em;
border-radius: 2em;
box-sizing: border-box;
border: 0.5px solid #000;
}
div.lamp > div.row > div.title {
font-size: 0.9em;
text-align: left;
margin-top: 0.4em;
margin-left: 0.75ch;
margin-right: 1ch;
height: 1.6em;
}
div.lamp > div.flatboi {
height: 0.2em;
background-color: #040408;
}
div.lamp > div.flatboi > div.flatboi2 {
height: 0.2em;
}
<style lang="sass">
div.lamp
cursor: pointer
width: 19ch
height: 2em
margin: 0.25em
background: #18181c
color: #84888f
border-radius: 0.25em
border-top-right-radius: 1em
overflow: hidden
box-shadow: 1px 1px 1px #000
@media screen and (max-width: 700px)
width: 100%
&.selected
background: #282833
color: #cde
> div.row
display: flex
> div.roundboi
width: 1.25em
height: 1.25em
margin-left: 0.25em
margin-top: 0.30em
border-radius: 2em
box-sizing: border-box
border: 0.5px solid #000
> div.roundboi-text
color: #abc
margin-top: 0.2em
font-size: 0.8em
> div.title
font-size: 0.9em
text-align: left
margin-top: 0.4em
margin-left: 0.75ch
margin-right: 1ch
height: 1.6em
> div.flatboi
height: 0.2em
> div.flatboi2
height: 0.2em
</style>