hello
i’m working on a widget for delete database data
I have some problems:
-
I would like the graphic to adapt to the start and end selection with an offset
and for the start and end selection to be represented on the graph in this way Examples - Apache ECharts or Examples - Apache ECharts -
I can’t use dayjs to compare the start and end to prevent validation if the start is after the end
thanks in advance
uid: frs_persistence_list_items
tags:
- list
- persistence
props:
parameters:
- default: Delete data
description: Header Title
label: Title
name: HeaderTitle
required: false
type: TEXT
groupName: header
- default: InfuxDB
description: Header Subtitle
label: Subtitle
name: HeaderSubTitle
required: false
type: TEXT
groupName: header
- default: iconify:majesticons:analytics-delete-line
description: Header Icon - Use oh:iconName (openHAB icon), f7:iconName
(Framework7 icon), material:iconName (Material icon) or
iconify:iconSet:iconName
label: Icon
name: HeaderIcon
required: false
type: TEXT
groupName: header
- default: Data to be deleted
description: Data Title
label: Data Title
name: DataTitle
required: false
type: TEXT
groupName: content
- default: iconify:mdi:graph-box
description: Data Icon - Use oh:iconName (openHAB icon), f7:iconName (Framework7
icon), material:iconName (Material icon) or iconify:iconSet:iconName
label: Data Icon
name: DataIcon
required: false
type: TEXT
groupName: content
- default: Begin
description: Begin Title
label: Begin Title
name: BeginTitle
required: false
type: TEXT
groupName: content
- default: iconify:tabler:brackets-contain-start
description: Begin Icon - Use oh:iconName (openHAB icon), f7:iconName
(Framework7 icon), material:iconName (Material icon) or
iconify:iconSet:iconName
label: Begin Icon
name: BeginIcon
required: false
type: TEXT
groupName: content
- default: End
description: End Title
label: End Title
name: EndTitle
required: false
type: TEXT
groupName: content
- default: iconify:tabler:brackets-contain-end
description: End Icon - Use oh:iconName (openHAB icon), f7:iconName (Framework7
icon), material:iconName (Material icon) or iconify:iconSet:iconName
label: End Icon
name: EndIcon
required: false
type: TEXT
groupName: content
- default: Delete
description: Delete Title
label: Delete Title
name: DeleteTitle
required: false
type: TEXT
groupName: content
- default: Select data
description: Popup Header Title
label: Header Title
name: PopupHeaderTitle
required: false
type: TEXT
groupName: popup
- default: Search
description: Popup Search Title
label: Search Title
name: PopupSearchTitle
required: false
type: TEXT
groupName: popup
- default: Are you sure ?
description: Action Title
label: Action Title
name: ActionTitle
required: false
type: TEXT
groupName: action
- default: This action cannot be cancelled
description: Action SubTitle
label: Action SubTitle
name: ActionSubTitle
required: false
type: TEXT
groupName: action
- default: Missing information !
description: Missing Title
label: Missing Title
name: MissingTitle
required: false
type: TEXT
groupName: action
- default: Yes
description: Yes Title
label: Yes Title
name: YesTitle
required: false
type: TEXT
groupName: action
- default: Discard
description: Discard Title
label: Discard Title
name: DiscardTitle
required: false
type: TEXT
groupName: action
- context: item
default: Persistence
description: Groupe persistence items
label: Item
name: Persistenceitem
required: false
type: TEXT
- context: item
default: Influx_ItemVirtuelDelete
description: item trigger rule
label: item
name: vituelitem
required: false
type: TEXT
parameterGroups:
- name: header
label: Header
- name: content
label: Content
- name: popup
label: Popup
- name: action
label: Action
timestamp: Nov 16, 2024, 1:26:55 PM
component: f7-list-item
config:
accordionItem: true
mediaList: true
style:
--f7-list-item-after-font-size: 16px
subtitle: =props.HeaderSubTitle
title: =props.HeaderTitle
slots:
default:
- component: f7-accordion-content
slots:
default:
- component: f7-list
config:
mediaList: true
style:
background-color: "=themeOptions.dark === 'dark' ? 'rgb(35, 35, 35)' : 'rgb(247,
247, 247)'"
slots:
default:
- component: oh-list-item
config:
class:
- margin-left
subtitle: =vars.Selection
icon: =props.DataIcon
title: =props.DataTitle
slots:
after:
- component: oh-link
config:
iconF7: plus_circle_fill
popupOpen: .popup.add-item-pop
- component: oh-input-item
config:
icon: =props.BeginIcon
sendButton: true
title: =props.BeginTitle
type: datetime-local
variable: Debut
style:
--f7-typography-padding: 0px
margin-right: 3px
slots:
media:
- component: oh-icon
config:
color: "=themeOptions.dark === 'dark' ? 'white' : 'black'"
icon: f7:timer
- component: oh-input-item
config:
icon: =props.EndIcon
sendButton: true
title: =props.EndTitle
type: datetime-local
variable: Fin
style:
--f7-typography-padding: 0px
margin-right: 3px
slots:
media:
- component: oh-icon
config:
color: "=themeOptions.dark === 'dark' ? 'white' : 'black'"
icon: f7:timer
- component: f7-block
config:
key: =Math.random() + items.Influx_UIRefresh.state
style:
margin: 0
padding: 0
--f7-menu-item-height: 30px
slots:
default:
- component: oh-chart
config:
chartType: day
options:
backgroundColor: "=themeOptions.dark === 'dark' ? 'rgb(35, 35, 35)' :
'rgb(247,247, 247)'"
color:
- red
height: 350px
stylesheet: |
.f7-icons {
font-size: 16px;
}
slots:
dataZoom:
- component: oh-chart-datazoom
config:
bottom: 18px
show: true
type: slider
xAxisIndex:
- 0
- component: oh-chart-datazoom
config:
show: true
type: inside
xAxisIndex:
- 0
grid:
- component: oh-chart-page
config:
containLabel: true
height: 66%
left: 20px
right: 20px
show: false
top: 60px
series:
- component: oh-time-series
config:
gridIndex: 0
item: =vars.Selection
name: =vars.Selection
smooth: false
type: line
xAxisIndex: 0
yAxisIndex: 0
slots:
markArea:
- component: oh-mark-area
config:
item: =vars.Selection
name: =vars.Selection
tooltip:
- component: oh-chart-tooltip
config:
confine: true
orient: vertical
show: true
smartFormatter: true
trigger: axis
axisPointer:
type: cross
label:
backgroundColor: "#505765"
xAxis:
- component: oh-time-axis
config:
gridIndex: 0
yAxis:
- component: oh-value-axis
config:
gridIndex: 0
- component: f7-block
config:
style:
display: flex
flex-direction: row
height: 50px
justify-content: center
background-color: "=themeOptions.dark === 'dark' ? 'rgb(25, 25, 25)' : 'rgb(250,
250, 250)'"
slots:
default:
- component: f7-link
config:
iconF7: trash_fill
iconSize: 28px
color: red
actionsOpen: "=(!!vars.Debut && !!vars.Fin && !!vars.Selection) ||
(dayjs(vars.Debut).isBefore(dayjs(vars.Fin))) ?
'.confirm-actions' : '.error-actions'"
style:
margin-right: 6px
- component: oh-link
config:
actionsOpen: "=(!!vars.Debut && !!vars.Fin && !!vars.Selection) ||
(dayjs(Debut).isBefore(dayjs(Fin))) ?
'.confirm-actions' : '.error-actions'"
text: =props.DeleteTitle
color: red
- component: f7-actions
config:
class:
- error-actions
stylesheet: |
.actions-button-text {
white-space: wrap;
flex-wrap: wrap
}
slots:
default:
- component: f7-actions-group
slots:
default:
- component: f7-actions-label
config:
class:
- actions-button-text
slots:
default:
- component: oh-icon
config:
icon: f7:exclamationmark_octagon_fill
color: red
style:
fontSize: 30px
- component: Label
config:
class:
- actions-button-text
style:
font-size: 20px
font-weight: 600
color: "#ff3b30"
text: =props.MissingTitle
- component: f7-actions-group
slots:
default:
- component: f7-actions-button
config:
actionsClose: .error-actions
class:
- actions-button
- color-blue
slots:
default:
- component: Label
config:
class:
- actions-button-text
text: =props.DiscardTitle
- component: f7-actions
config:
class:
- confirm-actions
stylesheet: |
.actions-button-text {
white-space: wrap;
flex-wrap: wrap
}
slots:
default:
- component: f7-actions-group
slots:
default:
- component: f7-actions-label
config:
class:
- actions-button-text
slots:
default:
- component: oh-icon
config:
icon: f7:question_circle_fill
color: red
style:
fontSize: 30px
- component: Label
config:
class:
- actions-button-text
style:
font-size: 20px
font-weight: 600
color: "#ff3b30"
text: =props.ActionTitle
- component: Label
config:
class:
- actions-button-text
style:
font-size: 16px
font-weight: 600
color: "#ff3b30"
text: =props.ActionSubTitle
- component: oh-link
config:
action: command
actionCommand: =vars.Selection + ';' + vars.Debut + ';' + vars.Fin
actionItem: =props.vituelitem
actionsClose: .confirm-actions
class:
- actions-button
- color-blue
item: =props.vituelitem
slots:
default:
- component: Label
config:
class:
- actions-button-text
text: =props.YesTitle
- component: f7-actions-group
slots:
default:
- component: f7-actions-button
config:
actionsClose: .confirm-actions
class:
- actions-button
- color-blue
slots:
default:
- component: Label
config:
class:
- actions-button-text
text: =props.DiscardTitle
- component: f7-popup
config:
animate: true
backdrop: true
class:
- add-item-pop
closeByBackdropClick: true
push: true
style:
background: "=themeOptions.dark === 'dark' ? 'rgb(0, 0, 0)' : 'rgb(239, 239,
244)'"
stylesheet: |
.page-content::-webkit-scrollbar {
background-color:transparent;
width:16px
} .page-content::-webkit-scrollbar-track {
background-color:transparent
} .page-content::-webkit-scrollbar-track:hover {
background-color:transparent
} .page-content::-webkit-scrollbar-thumb {
background-clip: content-box;
background-color:#babac0;
border-radius:16px;
border:5px solid transparent
} .page-content::-webkit-scrollbar-thumb:hover {
background-clip: content-box;
background-color:#a0a0a5;
border:4px solid transparent
} .page-content::-webkit-scrollbar-button {
display:none}
body {
background-color:#000
} .page-content {
overflow-y: scroll
} .overflow {
min-height: 100vh
}
swipeToClose: to-bottom
slots:
default:
- component: f7-navbar
config:
transparent: true
slots:
left:
- component: Label
config:
style:
font-size: 16px
font-weight: 700
margin-left: 10px
text: =props.PopupHeaderTitle
right:
- component: f7-link
config:
color: gray
iconF7: xmark_circle_fill
iconSize: 28px
popupClose: .popup.add-item-pop
style:
margin-top: 5px
- component: f7-page-content
slots:
default:
- component: f7-col
config:
style:
background: transparent
margin-left: 0px
margin-right: 0px
margin-top: -66px
padding-bottom: 16px
slots:
default:
- component: f7-list
config:
class: elevation-1
inset: true
outline: false
style:
margin-left: 24px
margin-right: 16px
margin-bottom: 16px
slots:
default:
- component: f7-row
config:
style:
align-items: center
slots:
default:
- component: oh-icon
config:
color: gray
icon: f7:search
style:
margin-left: 20px
- component: oh-input
config:
clearButton: true
outline: false
placeholder: =props.PopupSearchTitle
style:
margin-left: 16px
margin-right: 20px
flex-grow: 10
type: text
variable: filterText
- component: f7-list
config:
class: elevation-2
inset: true
outline: false
mediaList: true
virtualList: true
style:
margin-left: 24px
margin-right: 16px
margin-top: 0px
slots:
default:
- component: oh-repeater
config:
fetchMetadata: semantics
filter: "(vars.filterText == 0 ) || (!!vars.filterText &&
loop.ohItem.name.includes(vars.filterText)) ?
true : false"
for: ohItem
fragment: true
groupItem: =props.Persistenceitem
sourceType: itemsInGroup
slots:
default:
- component: oh-list-item
config:
action: variable
actionVariable: Selection
actionVariableValue: =loop.ohItem.name
after: =loop.ohItem.label
icon: =loop.ohItem.category
popupClose: .popup.add-item-pop
title: =loop.ohItem.metadata.semantics.config.isPointOf
media:
- component: oh-icon
config:
height: 30px
icon: =props.HeaderIcon
width: 30px
Group Influx
String Influx_ItemVirtuelDelete (Influx)
DateTime Influx_UIRefresh (Influx)
configuration: {}
triggers:
- id: "1"
configuration:
itemName: Influx_ItemVirtuelDelete
type: core.ItemCommandTrigger
conditions: []
actions:
- inputs: {}
id: "3"
configuration:
blockSource: <xml
xmlns="https://developers.google.com/blockly/xml"><variables><variable
id="OpSC@Ti$Dwai7:!7K%I/">{listVariable}</variable></variables><block
type="variables_set" id="D(~#Me?rr/]oy)rTS1B$" x="282" y="212"><field
name="VAR" id="OpSC@Ti$Dwai7:!7K%I/">{listVariable}</field><value
name="VALUE"><block type="lists_split"
id="1(LDG!Mj`%Ubhubc-R:3"><mutation mode="SPLIT"></mutation><field
name="MODE">SPLIT</field><value name="INPUT"><block
type="oh_getitem_state" id="iuvdIY.9|nZis6Zg-O06"><value
name="itemName"><shadow type="oh_item"
id="hal6h2M44Wtx+QXfn3[h"><mutation itemName="MyItem"
itemLabel="MyItem"></mutation><field
name="itemName">MyItem</field></shadow><block type="oh_item"
id="1y`=W4NPMZlbOJoQ7/5l"><mutation itemName="Influx_ItemVirtuelDelete"
itemLabel="undefined"></mutation><field
name="itemName">Influx_ItemVirtuelDelete</field></block></value></block></value><value
name="DELIM"><shadow type="text" id="u4VVWarI:?lGF]PcUK5S"><field
name="TEXT">,</field></shadow><block type="text"
id="S:dKjf,v{`IH7]PvGN8D"><field
name="TEXT">;</field></block></value></block></value><next><block
type="oh_delete_persistedvalues" id="/(?lqSVhBCWD]n~9qqxM"><field
name="methodName">removeAllStatesBetween</field><value
name="itemName"><shadow type="oh_item"
id="wzh-44Kp,1.o6z-)!unL"><mutation itemName="MyItem"
itemLabel="MyItem"></mutation><field
name="itemName">MyItem</field></shadow><block type="text_join"
id="%m33i0;T9mrVWC74]k4g"><mutation items="1"></mutation><value
name="ADD0"><block type="lists_getIndex"
id="J|9Y]@73a^^UG34k5x8$"><mutation statement="false"
at="true"></mutation><field name="MODE">GET</field><field
name="WHERE">FROM_START</field><value name="VALUE"><block
type="variables_get" id="%U0UaWx`It!(9Uc|5WQi"><field name="VAR"
id="OpSC@Ti$Dwai7:!7K%I/">{listVariable}</field></block></value><value
name="AT"><block type="math_number" id="6i]HuCAx^i1?b$SLvft+"><field
name="NUM">1</field></block></value></block></value></block></value><value
name="dayInfoSince"><shadow type="oh_zdt_plusminus"
id="n)r;pId6?D5H[U%VV)^*"><field name="plusminus">minus</field><field
name="period">Hours</field><value name="offset"><shadow
type="math_number" id="(Tk:9I{jYw.~74mYK}F@"><field
name="NUM">1</field></shadow></value></shadow><block
type="oh_zdt_fromText" id="{8O_{7!#DY[kN-gt5=}x"><value
name="day"><shadow type="text" id="zRV(uzQ8$6wm+dyf0BE9"><field
name="TEXT">2024-11-07</field></shadow><block type="lists_getIndex"
id="c+uX[fNL3{KP_Fw72N6;"><mutation statement="false"
at="true"></mutation><field name="MODE">GET</field><field
name="WHERE">FROM_START</field><value name="VALUE"><block
type="variables_get" id="Tu/AdLWgJUSsWmH#f6@S"><field name="VAR"
id="OpSC@Ti$Dwai7:!7K%I/">{listVariable}</field></block></value><value
name="AT"><block type="math_number" id="hDpf^ACC$n(@T}M~qIip"><field
name="NUM">2</field></block></value></block></value></block></value><value
name="dayInfoUntil"><shadow type="oh_zdt_plusminus"
id="l~9lE9TWIk~yBPL}6py!"><field name="plusminus">plus</field><field
name="period">Hours</field><value name="offset"><shadow
type="math_number" id="]QxiuR|XG~3S+_7X!JS)"><field
name="NUM">1</field></shadow></value></shadow><block
type="oh_zdt_fromText" id="djY*FImuk63~IK#4^66}"><value
name="day"><shadow type="text" id="zRV(uzQ8$6wm+dyf0BE9"><field
name="TEXT">2024-11-07</field></shadow><block type="lists_getIndex"
id="Trra7`4$OHeUaEw]Jv9U"><mutation statement="false"
at="true"></mutation><field name="MODE">GET</field><field
name="WHERE">FROM_START</field><value name="VALUE"><block
type="variables_get" id="66ZeswaatGqes[;~`fc0"><field name="VAR"
id="OpSC@Ti$Dwai7:!7K%I/">{listVariable}</field></block></value><value
name="AT"><block type="math_number" id="dkFYUGB}Y?HlxiY9FaSP"><field
name="NUM">3</field></block></value></block></value></block></value><value
name="persistenceName"><shadow type="oh_persistence_dropdown"
id="?7/hs@NHR#2nHn+fbWzO"><field
name="persistence">default</field></shadow><block
type="oh_persistence_dropdown" id="ZL/!Z6S^U?mtiIYip08m"><field
name="persistence">influxdb</field></block></value><next><block
type="oh_event" id="l*TU_w#$wQO-%um.G2rs"><field
name="eventType">postUpdate</field><value name="value"><shadow
type="text" id=".o?]aQO_{1ttMv-}742p"><field
name="TEXT">value</field></shadow><block type="text"
id="|o{)3}SC![D%_b0l;@}s"><field
name="TEXT">0</field></block></value><value name="itemName"><shadow
type="oh_item" id="BkjxmHG#@GaIrf/2P2iU"><mutation itemName="MyItem"
itemLabel="MyItem"></mutation><field
name="itemName">MyItem</field></shadow><block type="oh_item"
id="8eBMF,e*3k`uhmF8./_f"><mutation itemName="Influx_ItemVirtuelDelete"
itemLabel="undefined"></mutation><field
name="itemName">Influx_ItemVirtuelDelete</field></block></value><next><block
type="oh_event" id="_k*1koJBfarH@h3oZsI%"><field
name="eventType">sendCommand</field><value name="value"><shadow
type="text" id="K|{4/+]e98J$_JNnwbmh"><field
name="TEXT">value</field></shadow><block type="oh_zdt_plusminus"
id="GiG]MhOV}g,}t:3^wkch"><field name="plusminus">plus</field><field
name="period">Seconds</field><value name="offset"><shadow
type="math_number" id="_Q{zO9jDb1eGXFzqNCJO"><field
name="NUM">0</field></shadow></value></block></value><value
name="itemName"><shadow type="oh_item"
id="E%SyCN!ye1!%iWTr^|q#"><mutation itemName="MyItem"
itemLabel="MyItem"></mutation><field
name="itemName">MyItem</field></shadow><block type="oh_item"
id=",BY9`_]$/qrv$P;Xeph4"><mutation itemName="Influx_UIRefresh"
itemLabel="undefined"></mutation><field
name="itemName">Influx_UIRefresh</field></block></value></block></next></block></next></block></next></block></xml>
type: application/javascript
script: >
var _7BlistVariable_7D;
_7BlistVariable_7D =
items.getItem('Influx_ItemVirtuelDelete').state.split(';');
items.getItem((String(_7BlistVariable_7D[0]))).persistence.removeAllStatesBetween(time.toZDT((_7BlistVariable_7D[1]))
,time.toZDT((_7BlistVariable_7D[2])), 'influxdb');
items.getItem('Influx_ItemVirtuelDelete').postUpdate('0');
items.getItem('Influx_UIRefresh').sendCommand(time.ZonedDateTime.now().plusSeconds(0));
type: script.ScriptAction