Add step sequence (cycle) widget with Styleable support

.homeycompose/app.json

@@ -312,6 +312,10 @@
       "method": "GET",
       "path": "/icons"
     },
+    "setCycleLook": {
+      "method": "POST",
+      "path": "/cycles/look"
+    },
     "setEventLook": {
       "method": "POST",
       "path": "/events/look"

.homeycompose/locales/ar.json

@@ -92,6 +92,11 @@
             "color": "لون",
             "icon": "أيقونة"
         },
+        "cycles": {
+            "title": "التسلسلات",
+            "description": "تمر التسلسلات عبر سلسلة رقمية. استخدم إجراءات التسلسل والشروط والمحفزات في تدفقاتك للتنقل بين القيم والاستجابة عندما يصل التسلسل إلى خطوة معينة.",
+            "empty": "لم يتم إنشاء تسلسلات بعد."
+        },
         "events": {
             "title": "الأحداث",
             "description": "تتبع الأحداث متى ما يحدث شيء وتحتفظ بتاريخ الزمن. استخدم إجراءات الأحداث والشروط والمحفزات في تدفقاتك لتتبع الأحداث والتحقق من مدى تكرارها أو توقيتها.",
@@ -159,4 +164,4 @@
         "pink": "وردي",
         "rose": "وردي فاتح"
     }
-}
+}

.homeycompose/locales/da.json

@@ -92,6 +92,11 @@
             "color": "Farve",
             "icon": "Ikon"
         },
+        "cycles": {
+            "title": "Sekvenser",
+            "description": "Sekvenser gennemløber en numerisk sekvens. Brug sekvenshandlinger, betingelser og triggere i dine flows til at gennemgå værdier og reagere, når en sekvens når et bestemt trin.",
+            "empty": "Der er endnu ikke oprettet nogen sekvenser."
+        },
         "events": {
             "title": "Begivenheder",
             "description": "Begivenheder sporer hvornår noget sker og gemmer en historik af tidsstempler. Brug begivenhedshandlinger, betingelser og triggere i dine flows til at spore hændelser og kontrollere hvor ofte eller hvornår begivenheder skete.",
@@ -159,4 +164,4 @@
         "pink": "Pink",
         "rose": "Rosa"
     }
-}
+}

.homeycompose/locales/de.json

@@ -92,6 +92,11 @@
             "color": "Farbe",
             "icon": "Symbol"
         },
+        "cycles": {
+            "title": "Sequenzen",
+            "description": "Sequenzen durchlaufen eine numerische Abfolge. Verwenden Sie Sequenz-Aktionen, Bedingungen und Trigger in Ihren Flows, um durch Werte zu schalten und zu reagieren, wenn eine Sequenz einen bestimmten Schritt erreicht.",
+            "empty": "Es wurden noch keine Sequenzen erstellt."
+        },
         "events": {
             "title": "Ereignisse",
             "description": "Ereignisse verfolgen, wann etwas passiert, und speichern einen Verlauf von Zeitstempeln. Verwenden Sie Ereignis-Aktionen, Bedingungen und Trigger in Ihren Flows, um Vorkommen zu verfolgen und zu überprüfen, wie oft oder wann Ereignisse stattgefunden haben.",
@@ -159,4 +164,4 @@
         "pink": "Rosa",
         "rose": "Rosé"
     }
-}
+}

.homeycompose/locales/en.json

@@ -92,6 +92,11 @@
             "color": "Color",
             "icon": "Icon"
         },
+        "cycles": {
+            "title": "Sequences",
+            "description": "Sequences cycle through a numeric sequence. Use sequence actions, conditions, and triggers in your flows to step through values and respond when a sequence reaches a specific step.",
+            "empty": "No sequences have been created yet."
+        },
         "events": {
             "title": "Events",
             "description": "Events track when something happens and keep a history of timestamps. Use event actions, conditions, and triggers in your flows to track occurrences and check how often or when events happened.",
@@ -159,4 +164,4 @@
         "pink": "Pink",
         "rose": "Rose"
     }
-}
+}

.homeycompose/locales/es.json

@@ -92,6 +92,11 @@
             "color": "Color",
             "icon": "Icono"
         },
+        "cycles": {
+            "title": "Secuencias",
+            "description": "Las secuencias recorren una serie numérica. Utiliza acciones, condiciones y disparadores de secuencia en tus flujos para avanzar por los valores y responder cuando una secuencia alcanza un paso específico.",
+            "empty": "Aún no se han creado secuencias."
+        },
         "events": {
             "title": "Eventos",
             "description": "Los eventos rastrean cuándo sucede algo y mantienen un historial de marcas de tiempo. Utiliza acciones, condiciones y disparadores de eventos en tus flujos para rastrear ocurrencias y verificar con qué frecuencia o cuándo sucedieron los eventos.",
@@ -159,4 +164,4 @@
         "pink": "Rosa",
         "rose": "Rosa claro"
     }
-}
+}

.homeycompose/locales/fr.json

@@ -92,6 +92,11 @@
             "color": "Couleur",
             "icon": "Icône"
         },
+        "cycles": {
+            "title": "Séquences",
+            "description": "Les séquences parcourent une suite numérique. Utilisez les actions, conditions et déclencheurs de séquence dans vos flux pour passer en revue les valeurs et réagir quand une séquence atteint une étape spécifique.",
+            "empty": "Aucune séquence n'a encore été créée."
+        },
         "events": {
             "title": "Événements",
             "description": "Les événements enregistrent quand quelque chose se produit et conservent un historique d'horodatages. Utilisez les actions, conditions et déclencheurs d'événements dans vos flux pour suivre les occurrences et vérifier à quelle fréquence ou quand les événements se sont produits.",
@@ -159,4 +164,4 @@
         "pink": "Rose",
         "rose": "Rose pâle"
     }
-}
+}

.homeycompose/locales/it.json

@@ -92,6 +92,11 @@
             "color": "Colore",
             "icon": "Icona"
         },
+        "cycles": {
+            "title": "Sequenze",
+            "description": "Le sequenze scorrono una serie numerica. Usa azioni, condizioni e trigger delle sequenze nei tuoi flow per passare tra i valori e rispondere quando una sequenza raggiunge un passo specifico.",
+            "empty": "Nessuna sequenza è stata ancora creata."
+        },
         "events": {
             "title": "Eventi",
             "description": "Gli eventi registrano quando qualcosa accade e conservano una cronologia di timestamp. Usa azioni, condizioni e trigger degli eventi nei tuoi flow per tracciare le occorrenze e verificare quanto spesso o quando gli eventi si sono verificati.",
@@ -159,4 +164,4 @@
         "pink": "Rosa",
         "rose": "Rosa tenue"
     }
-}
+}

.homeycompose/locales/ko.json

@@ -92,6 +92,11 @@
             "color": "색상",
             "icon": "아이콘"
         },
+        "cycles": {
+            "title": "시퀀스",
+            "description": "시퀀스는 숫자 순서를 순환합니다. 플로우에서 시퀀스 작업, 조건, 트리거를 사용하여 값을 단계별로 이동하고 시퀀스가 특정 단계에 도달할 때 반응하세요.",
+            "empty": "아직 생성된 시퀀스가 없습니다."
+        },
         "events": {
             "title": "이벤트",
             "description": "이벤트는 무언가가 발생했을 때를 추적하고 타임스탬프 기록을 보관합니다. 플로우에서 이벤트 작업, 조건, 트리거를 사용하여 발생을 추적하고 이벤트가 얼마나 자주 또는 언제 발생했는지 확인하세요.",
@@ -159,4 +164,4 @@
         "pink": "핑크",
         "rose": "로즈"
     }
-}
+}

.homeycompose/locales/nl.json

@@ -92,6 +92,11 @@
             "color": "Kleur",
             "icon": "Icoon"
         },
+        "cycles": {
+            "title": "Stappenreeksen",
+            "description": "Stappenreeksen doorlopen een numerieke reeks. Gebruik stappenreeks-acties, -voorwaarden en -triggers in je flows om door waarden te stappen en te reageren wanneer een stappenreeks een specifieke stap bereikt.",
+            "empty": "Er zijn nog geen stappenreeksen aangemaakt."
+        },
         "events": {
             "title": "Gebeurtenissen",
             "description": "Gebeurtenissen houden bij wanneer iets gebeurt en bewaren een geschiedenis van tijdstempels. Gebruik gebeurtenis-acties, -voorwaarden en -triggers in je flows om voorvallen bij te houden en te controleren hoe vaak of wanneer gebeurtenissen plaatsvonden.",
@@ -159,4 +164,4 @@
         "pink": "Roze",
         "rose": "Roze (licht)"
     }
-}
+}

.homeycompose/locales/no.json

@@ -92,6 +92,11 @@
             "color": "Farge",
             "icon": "Ikon"
         },
+        "cycles": {
+            "title": "Sekvenser",
+            "description": "Sekvenser går gjennom en numerisk sekvens. Bruk sekvenshandlinger, betingelser og triggere i flytene dine for å trinn gjennom verdier og reagere når en sekvens når et spesifikt trinn.",
+            "empty": "Ingen sekvenser har blitt opprettet enda."
+        },
         "events": {
             "title": "Hendelser",
             "description": "Hendelser sporer når noe skjer og holder en historikk over tidsstempler. Bruk hendelseshandlinger, betingelser og triggere i flytene dine for å spore forekomster og sjekke hvor ofte eller når hendelser skjedde.",
@@ -159,4 +164,4 @@
         "pink": "Rosa",
         "rose": "Roserosa"
     }
-}
+}

.homeycompose/locales/pl.json

@@ -92,6 +92,11 @@
             "color": "Kolor",
             "icon": "Ikona"
         },
+        "cycles": {
+            "title": "Sekwencje",
+            "description": "Sekwencje przechodzą przez ciąg numeryczny. Używaj akcji, warunków i wyzwalaczy sekwencji w swoich przepływach, aby przechodzić przez wartości i reagować, gdy sekwencja osiągnie określony krok.",
+            "empty": "Nie utworzono jeszcze żadnych sekwencji."
+        },
         "events": {
             "title": "Zdarzenia",
             "description": "Zdarzenia śledzą, kiedy coś się dzieje i przechowują historię znaczników czasu. Używaj akcji, warunków i wyzwalaczy zdarzeń w swoich przepływach, aby śledzić wystąpienia i sprawdzać, jak często lub kiedy zdarzenia miały miejsce.",
@@ -159,4 +164,4 @@
         "pink": "Różowy",
         "rose": "Róż jasny"
     }
-}
+}

.homeycompose/locales/ru.json

@@ -92,6 +92,11 @@
             "color": "Цвет",
             "icon": "Иконка"
         },
+        "cycles": {
+            "title": "Последовательности",
+            "description": "Последовательности проходят числовую цепочку. Используйте действия, условия и триггеры последовательностей в ваших потоках для перебора значений и реагирования, когда последовательность достигает определённого шага.",
+            "empty": "Последовательности ещё не созданы."
+        },
         "events": {
             "title": "События",
             "description": "События отслеживают, когда что-то происходит, и хранят историю временных меток. Используйте действия, условия и триггеры событий в ваших потоках для отслеживания происшествий и проверки того, как часто или когда события произошли.",
@@ -159,4 +164,4 @@
         "pink": "Розовый",
         "rose": "Нежно-розовый"
     }
-}
+}

.homeycompose/locales/sv.json

@@ -92,6 +92,11 @@
             "color": "Färg",
             "icon": "Ikon"
         },
+        "cycles": {
+            "title": "Sekvenser",
+            "description": "Sekvenser genomlöper en numerisk sekvens. Använd sekvensåtgärder, villkor och triggers i dina flöden för att stega igenom värden och reagera när en sekvens når ett specifikt steg.",
+            "empty": "Inga sekvenser har skapats ännu."
+        },
         "events": {
             "title": "Händelser",
             "description": "Händelser spårar när något händer och bevarar en historik av tidsstämplar. Använd händelseåtgärder, villkor och triggers i dina flöden för att spåra händelser och kontrollera hur ofta eller när händelser inträffade.",
@@ -159,4 +164,4 @@
         "pink": "Rosa",
         "rose": "Rosé"
     }
-}
+}

api.ts

@@ -70,6 +70,10 @@ export async function getIcons(): Promise<Icon[]> {
     return icons;
 }
 
+export async function setCycleLook({homey: {app}, body}: ApiRequest<FlowBitsApp, BodyLook>): Promise<boolean> {
+    return await app.api.setCycleLook(body.name, body.color, body.icon);
+}
+
 export async function setEventLook({homey: {app}, body}: ApiRequest<FlowBitsApp, BodyLook>): Promise<boolean> {
     return await app.api.setEventLook(body.name, body.color, body.icon);
 }

settings-ui/src/App.vue

@@ -6,6 +6,13 @@
     <Form>
         <Documentation/>
 
+        <Category
+            :title="t('settings.cycles.title')"
+            :description="t('settings.cycles.description')"
+            :empty="t('settings.cycles.empty')"
+            :items="cycles"
+            @edit="onEditCycle"/>
+
         <Category
             :title="t('settings.modes.title')"
             :description="t('settings.modes.description')"
@@ -66,12 +73,13 @@
     setup>
     import { onMounted, ref, unref } from 'vue';
     import { Category, Documentation, Edit, Form, Statistics, Top } from './components';
-    import { composeEdit, composeSave, useColors, useEvents, useFlags, useIcons, useLabels, useModes, useSets, useTimers, useTranslate } from './composables';
+    import { composeEdit, composeSave, useColors, useCycles, useEvents, useFlags, useIcons, useLabels, useModes, useSets, useTimers, useTranslate } from './composables';
     import type { FeatureType, FormLook, Item } from './types';
 
     const t = useTranslate();
     const {load: loadColors} = useColors();
     const {load: loadIcons} = useIcons();
+    const {items: cycles, load: loadCycles} = useCycles();
     const {items: events, load: loadEvents} = useEvents();
     const {items: flags, load: loadFlags} = useFlags();
     const {items: labels, load: loadLabels} = useLabels();
@@ -83,13 +91,15 @@
     const editingType = ref<FeatureType | null>(null);
     const isSaving = ref(false);
 
+    const onEditCycle = composeEdit('cycle', editingItem, editingType);
     const onEditEvent = composeEdit('event', editingItem, editingType);
     const onEditFlag = composeEdit('flag', editingItem, editingType);
     const onEditLabel = composeEdit('label', editingItem, editingType);
     const onEditMode = composeEdit('mode', editingItem, editingType);
     const onEditSet = composeEdit('set', editingItem, editingType);
     const onEditTimer = composeEdit('timer', editingItem, editingType);
 
+    const onSaveCycle = composeSave('/cycles/look', editingItem, editingType, isSaving, loadCycles);
     const onSaveEvent = composeSave('/events/look', editingItem, editingType, isSaving, loadEvents);
     const onSaveFlag = composeSave('/flags/look', editingItem, editingType, isSaving, loadFlags);
     const onSaveLabel = composeSave('/labels/look', editingItem, editingType, isSaving, loadLabels);
@@ -104,6 +114,7 @@
         ]);
 
         await Promise.allSettled([
+            loadCycles(),
             loadEvents(),
             loadFlags(),
             loadLabels(),
@@ -122,6 +133,9 @@
 
     function onSaveItem(name: string, look: FormLook) {
         switch (unref(editingType)) {
+            case 'cycle':
+                return onSaveCycle(name, look);
+
             case 'event':
                 return onSaveEvent(name, look);
 

settings-ui/src/composables.ts

@@ -1,7 +1,7 @@
 import type { Color, Icon } from '@basmilius/homey-common';
 import { provide, type Ref, ref } from 'vue';
 import { COLORS, ICONS } from './symbols';
-import type { BitSet, Event, FeatureType, Flag, FormLook, Item, Label, Mode, Statistics, Timer } from './types';
+import type { BitSet, Cycle, Event, FeatureType, Flag, FormLook, Item, Label, Mode, Statistics, Timer } from './types';
 
 const EMPTY_STATISTICS: Statistics = {
     currentFlags: [],
@@ -63,6 +63,10 @@ export function useIcons() {
     };
 }
 
+export function useCycles() {
+    return composeList<Cycle>('/cycles');
+}
+
 export function useEvents() {
     return composeList<Event>('/events');
 }

settings-ui/src/types.ts

@@ -16,6 +16,7 @@ export type {
 } from '../../src/types';
 
 export type FeatureType =
+    | 'cycle'
     | 'event'
     | 'flag'
     | 'label'