openhab
diff --git a/‎…eb/src/assets/definitions/persistence.js‎ ‎…eb/src/assets/definitions/persistence.ts‎bundles/org.openhab.ui/web/src/assets/definitions/persistence.js renamed to bundles/org.openhab.ui/web/src/assets/definitions/persistence.ts
Lines changed: 65 additions & 12 deletions b/‎…eb/src/assets/definitions/persistence.js‎ ‎…eb/src/assets/definitions/persistence.ts‎bundles/org.openhab.ui/web/src/assets/definitions/persistence.js renamed to bundles/org.openhab.ui/web/src/assets/definitions/persistence.ts
Lines changed: 65 additions & 12 deletions
diff --git a/‎bundles/org.openhab.ui/web/src/components/persistence/item-persistence-details.vue‎
Lines changed: 1 addition & 1 deletion b/‎bundles/org.openhab.ui/web/src/components/persistence/item-persistence-details.vue‎
Lines changed: 1 addition & 1 deletion
diff --git a/‎bundles/org.openhab.ui/web/src/composables/useTabs.ts‎
Lines changed: 197 additions & 0 deletions b/‎bundles/org.openhab.ui/web/src/composables/useTabs.ts‎
Lines changed: 197 additions & 0 deletions
diff --git a/‎bundles/org.openhab.ui/web/src/css/app.styl‎
Lines changed: 22 additions & 0 deletions b/‎bundles/org.openhab.ui/web/src/css/app.styl‎
Lines changed: 22 additions & 0 deletions
@@ -1,6 +1,16 @@
-export const PredefinedStrategies = ['everyChange', 'everyUpdate', 'restoreOnStartup', 'forecast']
+import type { InjectionKey, Ref } from 'vue'
+import * as api from '@/api'
 
-export const CommonCronStrategies = [
+export const persistenceKey: InjectionKey<Ref<api.PersistenceServiceConfiguration>> = Symbol('persistence')
+
+export const PredefinedStrategies: api.PersistenceStrategy[] = [
+  { name: 'everyChange' },
+  { name: 'everyUpdate' },
+  { name: 'restoreOnStartup' },
+  { name: 'forecast' }
+]
+
+export const CommonCronStrategies: api.PersistenceCronStrategy[] = [
   {
     name: 'everyMinute',
     cronExpression: '0 * * ? * *'
@@ -23,18 +33,45 @@ const filterInvertedParameter = {
   name: 'inverted',
   required: false,
   type: 'BOOLEAN'
+} satisfies api.ConfigDescriptionParameter
+
+export interface FilterType {
+  footerFn: (f: api.PersistenceFilter) => string
+  configDescriptionParameters: api.ConfigDescriptionParameter[]
+  name: string
+  icon: string
+  label: string
+}
+
+export enum FilterTypeName {
+  ThresholdFilters = 'thresholdFilters',
+  TimeFilters = 'timeFilters',
+  EqualsFilters = 'equalsFilters',
+  IncludeFilters = 'includeFilters'
+}
+
+export interface FiltersDefinition {
+  [FilterTypeName.ThresholdFilters]: api.PersistenceFilter[]
+  [FilterTypeName.TimeFilters]: api.PersistenceFilter[]
+  [FilterTypeName.EqualsFilters]: api.PersistenceFilter[]
+  [FilterTypeName.IncludeFilters]: api.PersistenceFilter[]
+}
+
+export interface Filter {
+  filterTypeName: FilterTypeName
+  filter: api.PersistenceFilter
 }
 
 /**
  * Filter configuration is completely based on these definitions.
  * However, please note that some for some filter types validation and checks are added to persistence-edit.vue in editFilter(), saveFilter() and filter-popup.vue.
  *
- * @type {[{footerFn: (function(*): string|*), configDescriptionParameters: [{advanced: boolean, name: string, description: string, label: string, type: string, required: boolean},{advanced: boolean, name: string, description: string, label: string, type: string, required: boolean},{advanced: boolean, name: string, description: string, label: string, type: string, required: boolean}], name: string, label: string},{footerFn: (function(*): string), configDescriptionParameters: [{advanced: boolean, name: string, description: string, label: string, type: string, required: boolean},{limitToOptions: boolean, advanced: boolean, multiple: boolean, name: string, options: [{label: string, value: string},{label: string, value: string},{label: string, value: string},{label: string, value: string}], description: string, label: string, type: string, required: boolean}], name: string, label: string},{footerFn: (function(*): string), configDescriptionParameters: [{advanced: boolean, name: string, description: string, label: string, type: string, required: boolean},{advanced: boolean, name: string, description: string, label: string, type: string, required: boolean}], name: string, label: string},{footerFn: (function(*): string), configDescriptionParameters: [{advanced: boolean, name: string, description: string, label: string, type: string, required: boolean},{advanced: boolean, name: string, description: string, label: string, type: string, required: boolean},{advanced: boolean, name: string, description: string, label: string, type: string, required: boolean},{advanced: boolean, name: string, description: string, label: string, type: string, required: boolean}], name: string, label: string}]}
  */
-export const FilterTypes = [
-  {
+export const FilterTypes: Record<FilterTypeName, FilterType> = {
+  [FilterTypeName.ThresholdFilters]: {
     name: 'thresholdFilters',
     label: 'Threshold',
+    icon: 'arrow_up_right_circle',
     configDescriptionParameters: [
       {
         advanced: false,
@@ -61,11 +98,12 @@ export const FilterTypes = [
         type: 'TEXT'
       }
     ],
-    footerFn: (f) => (f.relative ? f.value + ' %' : f.unit ? f.value + ' ' + f.unit : f.value)
+    footerFn: (f) => (f.relative ? `${f.value} %` : f.unit ? `${f.value} ${f.unit}` : `${f.value ?? ''}`)
   },
-  {
+  [FilterTypeName.TimeFilters]: {
     name: 'timeFilters',
     label: 'Time',
+    icon: 'clock',
     configDescriptionParameters: [
       {
         advanced: false,
@@ -94,9 +132,10 @@ export const FilterTypes = [
     ],
     footerFn: (f) => f.value + ' ' + (f.unit || 's')
   },
-  {
+  [FilterTypeName.EqualsFilters]: {
     name: 'equalsFilters',
     label: 'Equals/Not Equals',
+    icon: 'equal_circle',
     configDescriptionParameters: [
       {
         advanced: false,
@@ -105,15 +144,16 @@ export const FilterTypes = [
         label: 'Values',
         name: 'values',
         required: true,
-        type: ''
+        type: 'TEXT'
       },
       filterInvertedParameter
     ],
-    footerFn: (f) => (f.inverted === true ? 'not ' : '') + 'equals ' + f.values.join(', ')
+    footerFn: (f) => (f.inverted === true ? 'not ' : '') + 'equals ' + f.values?.join(', ')
   },
-  {
+  [FilterTypeName.IncludeFilters]: {
     name: 'includeFilters',
     label: 'Include/Exclude',
+    icon: 'arrow_left_right_square',
     configDescriptionParameters: [
       {
         advanced: false,
@@ -144,4 +184,17 @@ export const FilterTypes = [
     footerFn: (f) =>
       (f.inverted === true ? ']' : '[') + f.lower + ';' + f.upper + (f.inverted === true ? '[' : ']' + (f.unit ? ' ' + f.unit : ''))
   }
-]
+}
+
+export const emptyPersistenceServiceConfig = {
+  serviceId: '',
+  configs: [],
+  aliases: {},
+  cronStrategies: [],
+  defaults: [],
+  timeFilters: [],
+  equalsFilters: [],
+  thresholdFilters: [],
+  includeFilters: [],
+  editable: true
+} satisfies api.PersistenceServiceConfiguration
@@ -114,7 +114,7 @@ const loadService = async (service: api.PersistenceService): Promise<Persistence
 
   let itemsPersisted: api.PersistenceItemInfo | 'not_persisted' | 'unsupported' = 'unsupported'
   try {
-    itemsPersisted = (await api.getItemsForPersistenceService({ serviceId: service.id, itemName: props.item.name }))![0] ?? 'not_persisted'
+    itemsPersisted = (await api.getItemsForPersistenceService({ serviceId: service.id, itemName: props.item.name }))![0]!
   } catch (err: unknown) {
     if (err instanceof ApiError && err.response.status === 404) {
       itemsPersisted = 'not_persisted'
 
@@ -0,0 +1,197 @@
+import { onBeforeUnmount, onMounted, ref, shallowRef, useTemplateRef } from 'vue'
+import { f7 } from 'framework7-vue'
+import Dom7 from 'dom7'
+
+import { showConfirmDialog } from '@/js/dialog-promises'
+
+type TemplateRefTarget = HTMLElement | { $el?: unknown; el?: unknown } | null | undefined
+
+// Use this helper on pages that have both a design/object tab and a code tab.
+// It keeps both representations in sync by converting to code before entering
+// the code tab and parsing code back into object state when leaving it.
+export async function confirmCodeSwitch(toCode: () => void, fromCode: () => void, tabTo: string, tabFrom: string): Promise<boolean> {
+  if (tabTo === 'code') {
+    toCode()
+    return true
+  } else if (tabFrom === 'code') {
+    try {
+      fromCode()
+    } catch (e: unknown) {
+      return await showConfirmDialog(
+        'Error parsing code - switching tabs will discard changes. Do you want to continue?<BR><BR>' +
+          (e instanceof Error ? e.message : String(e)),
+        'Error parsing code'
+      )
+    }
+  }
+  return true
+}
+
+// To use useTabs, ensure the tabbar has a ref and the tab links have oh-tab-link attributes instead of the default tab-link attributes. Example:
+// <f7-toolbar ref="myTabs" tabbar position="top">
+//   <f7-link oh-tab-link="#design" tab-link-active> Design </f7-link>
+//   <f7-link oh-tab-link="#code"> Code </f7-link>
+// </f7-toolbar>
+export function useTabs(
+  canSwitchTo: (tabTo: string, tabFrom: string) => Promise<boolean> | boolean = () => true,
+  tabbarRefOrName: string | TemplateRefTarget
+) {
+  const currentTab = ref<string | null>(null)
+  const tabbarRef =
+    typeof tabbarRefOrName === 'string'
+      ? useTemplateRef<TemplateRefTarget>(tabbarRefOrName)
+      : shallowRef<TemplateRefTarget>(tabbarRefOrName)
+
+  let highlightEl: HTMLElement | null = null
+  let tabbarEl: HTMLElement | null = null
+  let tabElements: HTMLElement[] = []
+  let tabbarClickHandler: ((event: Event) => void) | null = null
+
+  function normalizeTabSelector(tab: string): string {
+    return tab.startsWith('#') ? tab : `#${tab}`
+  }
+
+  function getTabsScopeElement(): ParentNode {
+    if (!tabbarEl) return document
+    return tabbarEl.closest('.page') || document
+  }
+
+  function isActiveTab(tabSelector: string): boolean {
+    const activeTabEl = getActiveTab()
+    return !!activeTabEl && activeTabEl.getAttribute('id') === tabSelector.slice(1)
+  }
+
+  function getActiveTab(): Element | null {
+    const tabsScopeEl = getTabsScopeElement()
+
+    for (const tabLinkEl of tabElements) {
+      const tabSelector = getTabSelectorFromLinkEl(tabLinkEl)
+      if (!tabSelector) continue
+      const targetTabEl = Dom7(tabsScopeEl).find(tabSelector)
+      if (targetTabEl.length > 0 && targetTabEl.hasClass('tab-active')) {
+        return targetTabEl[0] || null
+      }
+    }
+
+    const activeTabEl = Dom7(tabsScopeEl).find('.tab.tab-active')
+    if (activeTabEl.length > 0) {
+      return activeTabEl[0] || null
+    }
+    return null
+  }
+
+  function getTabSelectorFromLinkEl(tabLinkEl: HTMLElement): string | null {
+    const tabTarget = tabLinkEl.getAttribute('oh-tab-link')
+    if (!tabTarget || !tabTarget.startsWith('#')) return null
+    return tabTarget ? normalizeTabSelector(tabTarget) : null
+  }
+
+  function getTabLinkElement(tabSelector: string): HTMLElement | null {
+    const normalizedSelector = normalizeTabSelector(tabSelector)
+
+    return tabElements.find((el) => normalizeTabSelector(el.getAttribute('oh-tab-link') || '') === normalizedSelector) || null
+  }
+
+  function resolveElement(target: TemplateRefTarget): HTMLElement | null {
+    if (target instanceof HTMLElement) return target
+    if (!target || typeof target !== 'object') return null
+    if (target.$el instanceof HTMLElement) return target.$el
+    if (target.el instanceof HTMLElement) return target.el
+    return null
+  }
+
+  const setupHighlightBar = () => {
+    if (!tabbarEl) return
+
+    highlightEl = document.createElement('div')
+    highlightEl.className = 'oh-tab-highlight'
+    const initialSelector = currentTab.value ? normalizeTabSelector(currentTab.value) : '#'
+    const initialTabLinkEl = getTabLinkElement(initialSelector) || tabElements[0]
+    Object.assign(highlightEl.style, getHighlightStyle(initialSelector, initialTabLinkEl))
+
+    tabbarEl.insertBefore(highlightEl, tabbarEl.firstChild)
+  }
+
+  const getHighlightStyle = (tabSelector: string, tabLinkEl?: HTMLElement) => {
+    const count = tabElements.length || 1
+    const width = 100 / count
+    const resolvedTabLinkEl = tabLinkEl || getTabLinkElement(tabSelector)
+    const index = resolvedTabLinkEl ? Math.max(0, tabElements.indexOf(resolvedTabLinkEl)) : 0
+    const isBottom = tabbarEl?.getAttribute('position') === 'bottom'
+
+    return {
+      left: `${index * width}%`,
+      width: `${width}%`,
+      top: isBottom ? '0' : 'auto',
+      bottom: isBottom ? 'auto' : '0'
+    }
+  }
+
+  const updateHighlight = (tabSelector: string, tabLinkEl?: HTMLElement) => {
+    if (!highlightEl) return
+    const style = getHighlightStyle(tabSelector, tabLinkEl)
+    highlightEl.style.left = style.left
+    highlightEl.style.width = style.width
+    highlightEl.style.top = style.top
+    highlightEl.style.bottom = style.bottom
+  }
+
+  async function switchTab(tab: HTMLElement | string) {
+    let tabSelector: string | null = typeof tab === 'string' ? normalizeTabSelector(tab) : getTabSelectorFromLinkEl(tab)
+    const targetTabLinkEl = typeof tab === 'string' ? getTabLinkElement(tabSelector || '') : tab
+    if (!targetTabLinkEl || !tabSelector) return
+
+    if (isActiveTab(tabSelector)) {
+      return
+    }
+
+    if (canSwitchTo && (await canSwitchTo(tabSelector.slice(1), currentTab.value || ''))) {
+      currentTab.value = tabSelector.slice(1)
+      f7.tab.show(tabSelector, targetTabLinkEl)
+      updateHighlight(tabSelector, targetTabLinkEl)
+    }
+  }
+
+  onMounted(() => {
+    tabbarEl = resolveElement(tabbarRef.value)
+    if (!tabbarEl) {
+      console.warn(
+        `[useTabs] Tabbar ref "${typeof tabbarRefOrName === 'string' ? tabbarRefOrName : '(element)'}" did not resolve to an element.`
+      )
+      return
+    }
+
+    tabElements = Array.from(tabbarEl.querySelectorAll('[oh-tab-link]'))
+    currentTab.value = getActiveTab()?.getAttribute('id') || null
+
+    // We render our own tab highlight instead of using Framework7's built-in
+    // tab-link handling. F7 needs link-tab metadata to style/animate the active
+    // tab, but that also triggers automatic tab switching on click, which bypasses
+    // canSwitchTo and prevents us from validating/parsing before switching.
+    if (f7.theme !== 'ios') {
+      setupHighlightBar()
+    }
+
+    tabbarClickHandler = (event: Event) => {
+      const clickedEl = (event.target as HTMLElement | null)?.closest('[oh-tab-link]')
+      if (!(clickedEl instanceof HTMLElement)) return
+      if (!tabbarEl?.contains(clickedEl)) return
+
+      event.preventDefault()
+      void switchTab(clickedEl)
+    }
+
+    tabbarEl.addEventListener('click', tabbarClickHandler)
+  })
+
+  onBeforeUnmount(() => {
+    if (tabbarEl && tabbarClickHandler) {
+      tabbarEl.removeEventListener('click', tabbarClickHandler)
+    }
+  })
+
+  return {
+    currentTab,
+    switchTab
+  }
+}
@@ -63,6 +63,8 @@ html
   --f7-table-card-header-height 48px
   --f7-table-head-cell-height 48px
   --f7-table-body-cell-height 40px
+  // toast
+  --f7-toast-font-size 16px
 
 /* Fixes for desktop devices */
 .device-desktop
@@ -254,6 +256,12 @@ html
   --f7-bars-link-color #fff
   --f7-tabbar-link-inactive-color rgba(255,255,255,0.54)
 
+// Color to autoselect - use as color="auto-dark" on elements where the color should be auto switched between black and white based on dark mode
+.color-auto-dark
+  --f7-theme-color #000
+
+.dark .auto-dark-text
+  --f7-theme-color #fff
 
 .ios .contextual-toolbar
    .delete
@@ -452,3 +460,17 @@ html
 
 .advanced-label + .advanced-label
   margin-left 5px
+
+.toast .toast-content
+  justify-content:  center
+
+.oh-tabbar
+  position relative
+  overflow hidden
+
+.oh-tab-highlight
+  position absolute
+  height 2px
+  left 0
+  background-color var(--f7-theme-color, #007AFF)
+  transition left 0.3s ease-out, width 0.3s ease-out