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

stuff

Browse Source
This commit is contained in:
gisle
2023-09-09 17:39:13 +02:00
parent 4fc7d2d475
commit c7d3a3200e
7 changed files with 416 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/lib/components/Modal.svelte
+274
View File
@@ -0,0 +1,274 @@
<script lang="ts">
import { getModalContext, type ModalSelection } from "$lib/contexts/ModalContext.svelte";
export let show: boolean = false;
export let verb: string = "Submit";
export let noun: string = "Form";
export let cancelLabel: string = "Cancel";
export let wide: boolean = false;
export let error: string | null = null;
export let closable: boolean = false;
export let disabled: boolean = false;
export let nobody: boolean = false;
export let closeInstruction: ModalSelection = { kind: "closed" };
const { modal } = getModalContext();
function onClose() {
modal.set(closeInstruction);
}
function onKeyPress(e: KeyboardEvent) {
if (e.key.toLocaleLowerCase() === "escape") {
onClose();
}
}
</script>
{#if show}
<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
<div role="dialog" class="modal-background" on:keypress={onKeyPress}>
<div class="modal" class:wide class:nobody>
<div class="header" class:nobody>
<div class="title" class:noclose={!closable}>{verb} {noun}</div>
{#if (closable)}
<div class="x">
<!-- svelte-ignore a11y-click-events-have-key-events -->
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div class="button" on:click={onClose} class:nobody>&times;</div>
</div>
{/if}
</div>
{#if (error != null)}
<div class="error">{error}</div>
{/if}
<div class="body" class:nobody>
<slot></slot>
</div>
<div class="button-row" class:nobody>
<button disabled={disabled} type="submit">{verb} {noun}</button>
<slot name="secondary-button-1"></slot>
<slot name="secondary-button-2"></slot>
<button disabled={!closable} on:click|preventDefault={onClose}>{cancelLabel}</button>
</div>
</div>
</div>
{/if}
<style lang="scss">
@import "$lib/css/colors.sass";
div.modal-background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
}
div.modal {
position: absolute;
left: 50%;
top: 50%;
width: calc(100vw - 4em);
max-width: 40ch;
max-height: calc(100vh - 4em);
overflow: auto;
transform: translate(-50%,-50%);
border-radius: 0.5em;
box-shadow: 1px 1px 1px $color-main0;
background: $color-main1;
&.nobody {
background: none;
}
}
div.modal.wide {
max-width: 80ch;
}
div.header {
padding: 1em;
padding-bottom: 0;
}
div.error {
margin: 0.5em;
padding: 0.5em;
border: 1px solid rgb(204, 65, 65);
border-radius: 0.2em;
background-color: rgb(133, 39, 39);
color: rgb(211, 141, 141);
animation: fadein 0.5s;
}
div.body {
padding: 1em 0;
margin-top: 0;
padding-top: 0;
display: flex;
flex-direction: row;
@media screen and (max-width: 749px) {
display: block;
}
}
div.title {
color: $color-main9;
line-height: 1em;
}
div.x {
position: relative;
line-height: 1em;
top: -1em;
text-align: right;
}
div.x div.button {
color: $color-main9;
display: inline-block;
padding: 0em 0.5ch 0.1em 0.5ch;
line-height: 1em;
user-select: none;
cursor: pointer;
}
div.x div.button:hover {
color: $color-main9;
}
div.button-row {
display: flex;
flex-direction: row;
border-top: 0.5px solid #000;
:global(button) {
display: inline-block;
padding: 0.25em 1ch;
font-size: 1.25em;
background: none;
border: none;
color: $color-main9;
border-left : 0.5px solid #111;
cursor: pointer;
}
:global(button:first-of-type) {
margin-left: auto;
}
:global(button:hover) {
background-color: #111;
}
:global(button:disabled) {
color: #444;
}
&.nobody {
display: none;
}
}
div.modal :global(label) {
padding: 1em 0 0.125em 0.25ch;
font-size: 0.9em;
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
}
div.modal :global(input), div.modal :global(select), div.modal :global(textarea) {
width: calc(100% - 2ch);
margin-bottom: 1em;
margin-top: 0.25em;
background: #121418;
color: #789;
border: none;
outline: none;
resize: vertical;
padding: 0.5em 1ch;
}
div.modal :global(select) {
padding-left: 0.5ch;
padding: 0.45em 1ch;
width: 100%;
}
div.modal :global(select option), div.modal :global(select optgroup) {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding: 0.5em 0;
}
div.modal :global(input)::placeholder {
opacity: 0.5;
}
div.modal :global(select:disabled) {
background: #1a1c1f;
opacity: 1;
color: #789;
}
div.modal :global(input:disabled) {
background: #1a1c1f;
color: #789;
}
div.modal :global(textarea) {
min-height: 6em;
height: 6em;
font-family: inherit;
resize: none0;
}
div.modal :global(textarea:disabled) {
background: #444;
color: #aaa;
}
div.modal :global(input.nolast) {
margin-bottom: 0.5em;
}
div.modal :global(input[type="checkbox"]) {
width: initial;
display: inline-block;
}
div.modal :global(input[type="checkbox"] + label) {
width: initial;
display: inline-block;
padding: 0;
margin: 0;
}
div.modal :global(input:focus), div.modal :global(select:focus), div.modal :global(textarea:focus) {
background: #121418;
color: $color-main9;
border: none;
outline: none;
}
div.modal :global(p) {
margin: 0.25em 1ch 1em 1ch;
font-size: 0.9em;
}
div.modal :global(input::-webkit-outer-spin-button),
div.modal :global(input::-webkit-inner-spin-button) {
-webkit-appearance: none;
margin: 0;
}
div.modal :global(input[type=number]) {
appearance: textfield;
-moz-appearance: textfield;
}
@keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
</style>
frontend/src/lib/contexts/ModalContext.svelte
+32
View File
@@ -0,0 +1,32 @@
<script lang="ts" context="module">
import type { DeviceEditOp } from "$lib/models/device";
import type Device from "$lib/models/device";
import type Script from "$lib/models/script";
import type { ScriptLine } from "$lib/models/script";
import { getContext, setContext } from "svelte";
import { writable, type Writable } from "svelte/store";
const ctxKey = {ctx: "ModalContext"};
export type ModalSelection =
| { kind: "closed" }
| { kind: "device.edit", images: Device[], op: DeviceEditOp }
| { kind: "script.edit", id: string | null, lines: ScriptLine[] }
| { kind: "script.execute", script: Script }
export interface ModalContextState {
modal: Writable<ModalSelection>
}
export function getModalContext(): ModalContextState {
return getContext(ctxKey)
}
</script>
<script lang="ts">
setContext<ModalContextState>(ctxKey, {
modal: writable({kind: "closed"}),
});
</script>
<slot></slot>
frontend/src/lib/contexts/SelectContext.svelte
+72 -1
View File
@@ -8,6 +8,7 @@
export interface SelectContextData {
toggleSelection(id: string): void
toggleMultiSelection(ids: string[]): void
selectedMasks: Readable<string[]>
selectedList: Readable<string[]>
selectedMap: Readable<{[id:string]: boolean}>
}
@@ -20,8 +21,9 @@
<script lang="ts">
const selectedList = writable<string[]>([]);
const selectedMap = writable<{[id:string]: boolean}>({});
const selectedMasks = writable<string[]>([]);
const {state} = getStateContext();
const {state, deviceList} = getStateContext();
function toggleSelection(id: string) {
selectedMap.update(m => ({...m, [id]: !m[id]}));
@@ -55,9 +57,78 @@
// Effect: sync list
$: $selectedList = Object.keys($selectedMap).filter(id => !!$selectedMap[id]);
$: {
const firstDevice = $deviceList.find(d => $selectedMap[d.id]);
const nextMasks: string[] = [];
if (!$deviceList.find(d => !$selectedMap[d.id])) {
nextMasks.push("*");
}
if (firstDevice != null) {
// Common aliases first
for (const alias of firstDevice.aliases) {
if (alias.startsWith("lucifer:name") || alias.startsWith("lucifer:icon:")) {
continue;
}
let qualified = true;
for (const device of $deviceList) {
const isSelected = $selectedMap[device.id] || false;
const hasAlias = device.aliases.includes(alias);
if (alias === "lucifer:group:Squares") {
console.log(device.name, isSelected, hasAlias);
}
if (isSelected !== hasAlias) {
qualified = false;
break
}
}
if (qualified) {
nextMasks.push(alias);
}
}
let shortestIdPrefix = firstDevice.id;
let shortestNamePrefix = firstDevice.name;
for (const device of $deviceList) {
if (!$selectedMap[device.id]) {
continue
}
let longestIdMatch = 0;
for (let i = 1; i <= shortestIdPrefix.length; ++i) {
if (device.id.startsWith(shortestIdPrefix.slice(0, i))) {
longestIdMatch = i;
}
}
let longestNameMatch = 0;
for (let i = 1; i <= shortestNamePrefix.length; ++i) {
if (device.name.startsWith(shortestNamePrefix.slice(0, i))) {
longestNameMatch = i;
}
}
shortestIdPrefix = shortestIdPrefix.substring(0, longestIdMatch);
shortestNamePrefix = shortestNamePrefix.substring(0, longestNameMatch);
}
nextMasks.push(`${shortestIdPrefix}{${$selectedList.map(s => s.substring(shortestIdPrefix.length)).sort().join(",")}}`)
nextMasks.push(`lucifer:name:${shortestNamePrefix}{${$selectedList.map(id => $state.devices[id].name).map(s => s.substring(shortestNamePrefix.length)).sort().join(",")}}`)
}
$selectedMasks = nextMasks.map(m => m.endsWith("{}") ? m.slice(0, -2) : m);
}
setContext(ctxKey, {
selectedList: {subscribe: selectedList.subscribe},
selectedMap: {subscribe: selectedMap.subscribe},
selectedMasks: {subscribe: selectedMasks.subscribe},
toggleSelection,
toggleMultiSelection,
});
frontend/src/lib/css/colors.sass
+27
View File
@@ -0,0 +1,27 @@
$color-maindark: hsl(240, 8%, 3.5%)
$color-main0: hsl(240, 8%, 7%)
$color-main0-transparent: hsla(240, 8%, 10%, 0.7)
$color-mainhalf: hsl(240, 8%, 10.5%)
$color-main1: hsl(240, 8%, 14%)
$color-main1-transparent: hsla(240, 8%, 17%, 0.7)
$color-main2: hsl(240, 8%, 21%)
$color-main2-transparent: hsla(240, 8%, 24%, 0.7)
$color-main3: hsl(240, 8%, 28%)
$color-main4: hsl(240, 8%, 35%)
$color-main5: hsl(240, 8%, 42%)
$color-main6: hsl(240, 8%, 49%)
$color-main7: hsl(240, 8%, 56%) // Default
$color-main8: hsl(240, 8%, 63%)
$color-main9: hsl(240, 8%, 70%)
$color-main10: hsl(240, 8%, 77%)
$color-main11: hsl(240, 8%, 84%)
$color-main12: hsl(240, 8%, 91%)
$color-main13: hsl(240, 8%, 98%)
$opacity-entry3: 0.20
$opacity-entry4: 0.40
$opacity-entry5: 0.60
$opacity-entry6: 0.80
$color-green: hsl(120, 50%, 74%)
$color-green-dark: hsl(120, 50%, 35%)
frontend/src/lib/models/device.ts
+2
View File
@@ -61,3 +61,5 @@ export const BLANK_STATE: State = (Object.seal||(v=>v))({
intensity: null,
color: null,
});
export type DeviceEditOp = "assign" | "rename" | "change_icon" | "move_group"
frontend/src/routes/+layout.svelte
+5 -2
View File
@@ -1,10 +1,13 @@
<script lang="ts">
import SelectContext from "$lib/contexts/SelectContext.svelte";
import ModalContext from "$lib/contexts/ModalContext.svelte";
import SelectContext from "$lib/contexts/SelectContext.svelte";
import StateContext from "$lib/contexts/StateContext.svelte";
</script>
<StateContext>
<SelectContext>
<slot></slot>
<ModalContext>
<slot></slot>
</ModalContext>
</SelectContext>
</StateContext>
frontend/src/routes/+page.svelte
+4 -6
View File
@@ -1,14 +1,12 @@
<script lang="ts">
import DeviceIcon from "$lib/components/DeviceIcon.svelte";
import Lamp, { DARK_COLOR } from "$lib/components/Lamp.svelte";
import Lamp from "$lib/components/Lamp.svelte";
import MetaLamp from "$lib/components/MetaLamp.svelte";
import RoomHeader from "$lib/components/RoomHeader.svelte";
import { getSelectedContext } from "$lib/contexts/SelectContext.svelte";
import { getStateContext } from "$lib/contexts/StateContext.svelte";
import { rgb } from "$lib/models/color";
const {roomList} = getStateContext();
$: console.log($roomList);
const {selectedMasks} = getSelectedContext();
</script>
<div class="page">
@@ -25,8 +23,8 @@
{/each}
</div>
{/each}
</div>
<pre>{JSON.stringify($selectedMasks, null, 4)}</pre>
<style>
div.page {