uid: frs_UV_list_item
tags:
  - list
  - uv
  - weather
props:
  parameters:
    - default: UV Index
      description: UV Index Title
      label: Title
      name: IndiceUVTitle
      required: false
      type: TEXT
      groupName: header
    - context: item
      description: UV Index Item
      label: Item
      name: CurrentIndiceUVItem
      required: false
      type: TEXT
      groupName: header
    - context: item
      description: Alert level Item
      label: Item
      name: CurrentAlerteUVItem
      required: false
      type: TEXT
      groupName: header
    - description: Hide Gauges
      label: hide
      name: HideGauges
      required: false
      type: BOOLEAN
      groupName: gauge
    - description: Hide Max UV Index label-item
      label: hide
      name: HideUVIndexMax
      required: false
      type: BOOLEAN
      groupName: UvMax
    - default: Max UV Index
      description: Max UV Index Title
      label: Title
      name: IndiceUVMaxTitle
      required: false
      type: TEXT
      groupName: UvMax
    - context: item
      description: Max UV Index Item
      label: Item
      name: IndiceUVMaxItem
      required: false
      type: TEXT
      groupName: UvMax
    - context: item
      description: UV Max time Item
      label: Item
      name: TimeUVMaxItem
      required: false
      type: TEXT
      groupName: UvMax
    - description: Hide Ozone level label-item
      label: hide
      name: HideOzoneLevel
      required: false
      type: BOOLEAN
      groupName: Ozone
    - default: Ozone level
      description: Ozone level Title
      label: Title
      name: OzoneTitle
      required: false
      type: TEXT
      groupName: Ozone
    - default: oh:ozone
      description: Ozone level Icon - Use f7:iconName (Framework7 icon), material:iconName (Material icon) or iconify:iconSet:iconName
      label: Icon
      name: IconOzone
      required: false
      type: TEXT
      groupName: Ozone
    - context: item
      description: Ozone level Item
      label: Item
      name: OzoneItem
      required: false
      type: TEXT
      groupName: Ozone
    - description: Hide Safe exposure time label-item
      label: hide
      name: HideSafeExposureTime
      required: false
      type: BOOLEAN
      groupName: Exposition
    - default: Safe exposure time
      description: Safe exposure time Title
      label: Title
      name: ExpositionTitle
      required: false
      type: TEXT
      groupName: Exposition
    - default: iconify:mdi:sunglasses
      description: Safe exposure time Icon - Use f7:iconName (Framework7 icon), material:iconName (Material icon) or iconify:iconSet:iconName
      label: Icon
      name: IconExposition
      required: false
      type: TEXT
      groupName: Exposition
    - context: item
      description: Safe exposure time Item
      label: Item
      name: ExpositionItem
      required: false
      type: TEXT
      groupName: Exposition
  parameterGroups:
    - name: header
      label: Header
    - name: gauge
      label: Gauge
    - name: UvMax
      label: UV Max
    - name: Ozone
      label: Ozone
    - name: Exposition
      label: Exposition
timestamp: Dec 18, 2023, 12:43:32 PM
component: oh-list-item
config:
  accordionList: true
  after: '=props.CurrentAlerteUVItem ? @props.CurrentAlerteUVItem : ""'
  icon: '=(Number.parseFloat(@props.CurrentIndiceUVItem) == "1") ? "iconify:meteocons:uv-index-1-fill" : (Number.parseFloat(@props.CurrentIndiceUVItem) == "2") ? "iconify:meteocons:uv-index-2-fill" : (Number.parseFloat(@props.CurrentIndiceUVItem) == "3") ? "iconify:meteocons:uv-index-3-fill" : (Number.parseFloat(@props.CurrentIndiceUVItem) == "4") ? "iconify:meteocons:uv-index-4-fill" : (Number.parseFloat(@props.CurrentIndiceUVItem) == "5") ? "iconify:meteocons:uv-index-5-fill" : (Number.parseFloat(@props.CurrentIndiceUVItem) == "6") ? "iconify:meteocons:uv-index-6-fill" : (Number.parseFloat(@props.CurrentIndiceUVItem) == "7") ? "iconify:meteocons:uv-index-7-fill" : (Number.parseFloat(@props.CurrentIndiceUVItem) == "8") ? "iconify:meteocons:uv-index-8-fill" : (Number.parseFloat(@props.CurrentIndiceUVItem) == "9") ? "iconify:meteocons:uv-index-9-fill" : (Number.parseFloat(@props.CurrentIndiceUVItem) == "10") ? "iconify:meteocons:uv-index-10-fill" : (Number.parseFloat(@props.CurrentIndiceUVItem) == "11") ? "iconify:meteocons:uv-index-11-fill" : "iconify:meteocons:uv-index"'
  mediaList: true
  style:
    --f7-list-item-after-font-size: 16px
    --f7-list-item-after-text-color: "=themeOptions.dark === 'dark' ? 'rgb(180,180,180)' : 'rgb(80,80,80)'"
  subtitle: =@props.CurrentIndiceUVItem
  title: =props.IndiceUVTitle
slots:
  accordion:
    - component: f7-list
      config:
        mediaList: true
        style:
          background-color: "=themeOptions.dark === 'dark' ? 'rgb(35, 35, 35)' : 'rgb(247, 247, 247)'"
      slots:
        default:
          - component: f7-block
            config:
              visible: =!props.HideGauges
              style:
                margin-top: -20px
                margin-left: 0px
                margin-right: 0px
                margin-bottom: 0px
                padding: 10px
            slots:
              default:
                - component: oh-chart
                  config:
                    options:
                      backgroundColor: transparent
                  slots:
                    series:
                      - component: oh-data-series
                        config:
                          axisLabel:
                            show: false
                          axisLine:
                            lineStyle:
                              color:
                                - - 0.2
                                  - "#4cd964"
                                - - 0.4
                                  - "#ffcc00"
                                - - 0.6
                                  - "#ff9500"
                                - - 0.8
                                  - "#ff3b30"
                                - - 1
                                  - "#9c27b0"
                              width: 20
                          axisTick:
                            show: false
                          data:
                            - value: =Number.parseFloat(@@props.CurrentIndiceUVItem)
                          detail:
                            fontSize: 20
                            formatter: =@props.CurrentAlerteUVItem
                            offsetCenter:
                              - 0
                              - 30%
                            valueAnimation: true
                          itemStyle:
                            borderCap: round
                            borderJoin: miter
                          max: 15
                          min: 0
                          pointer:
                            icon: path://M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10s10-4.48 10-10S17.52 2 12 2
                            itemStyle:
                              color: "=themeOptions.dark === 'dark' ? 'white' : 'black'"
                              shadowBlur: 6
                              shadowColor: "=themeOptions.dark === 'dark' ? 'black' : 'white'"
                            length: 18%
                            offsetCenter:
                              - 0
                              - -83%
                            width: 22px
                          radius: 82%
                          splitLine:
                            show: false
                          splitNumber: 15
                          title:
                            fontSize: 26
                            offsetCenter:
                              - 0
                              - -35%
                          type: gauge
                          startAngle: 180
                          endAngle: 0
                - component: f7-row
                  config:
                    class:
                      - text-align-center
                    style:
                      margin-top: -224px
                      margin-bottom: 70px
                  slots:
                    default:
                      - component: f7-col
                        config:
                          style:
                            background: rgba(233, 196, 106, 0)
                        slots:
                          default:
                            - component: oh-icon
                              config:
                                height: 50px
                                icon: '=(Number.parseFloat(@props.CurrentIndiceUVItem) == "1") ? "iconify:meteocons:uv-index-1-fill" : (Number.parseFloat(@props.CurrentIndiceUVItem) == "2") ? "iconify:meteocons:uv-index-2-fill" : (Number.parseFloat(@props.CurrentIndiceUVItem) == "3") ? "iconify:meteocons:uv-index-3-fill" : (Number.parseFloat(@props.CurrentIndiceUVItem) == "4") ? "iconify:meteocons:uv-index-4-fill" : (Number.parseFloat(@props.CurrentIndiceUVItem) == "5") ? "iconify:meteocons:uv-index-5-fill" : (Number.parseFloat(@props.CurrentIndiceUVItem) == "6") ? "iconify:meteocons:uv-index-6-fill" : (Number.parseFloat(@props.CurrentIndiceUVItem) == "7") ? "iconify:meteocons:uv-index-7-fill" : (Number.parseFloat(@props.CurrentIndiceUVItem) == "8") ? "iconify:meteocons:uv-index-8-fill" : (Number.parseFloat(@props.CurrentIndiceUVItem) == "9") ? "iconify:meteocons:uv-index-9-fill" : (Number.parseFloat(@props.CurrentIndiceUVItem) == "10") ? "iconify:meteocons:uv-index-10-fill" : (Number.parseFloat(@props.CurrentIndiceUVItem) == "11") ? "iconify:meteocons:uv-index-11-fill" : "iconify:meteocons:uv-index"'
          - component: oh-label-item
            config:
              icon: '=(Number.parseFloat(@props.IndiceUVMaxItem) == "1") ? "iconify:meteocons:uv-index-1-fill" : (Number.parseFloat(@props.IndiceUVMaxItem) == "2") ? "iconify:meteocons:uv-index-2-fill" : (Number.parseFloat(@props.IndiceUVMaxItem) == "3") ? "iconify:meteocons:uv-index-3-fill" : (Number.parseFloat(@props.IndiceUVMaxItem) == "4") ? "iconify:meteocons:uv-index-4-fill" : (Number.parseFloat(@props.IndiceUVMaxItem) == "5") ? "iconify:meteocons:uv-index-5-fill" : (Number.parseFloat(@props.IndiceUVMaxItem) == "6") ? "iconify:meteocons:uv-index-6-fill" : (Number.parseFloat(@props.IndiceUVMaxItem) == "7") ? "iconify:meteocons:uv-index-7-fill" : (Number.parseFloat(@props.IndiceUVMaxItem) == "8") ? "iconify:meteocons:uv-index-8-fill" : (Number.parseFloat(@props.IndiceUVMaxItem) == "9") ? "iconify:meteocons:uv-index-9-fill" : (Number.parseFloat(@props.IndiceUVMaxItem) == "10") ? "iconify:meteocons:uv-index-10-fill" : (Number.parseFloat(@props.IndiceUVMaxItem) == "11") ? "iconify:meteocons:uv-index-11-fill" : "iconify:meteocons:uv-index"'
              item: =props.IndiceUVMaxItem
              style:
                --f7-list-item-after-font-size: 15px
                --f7-list-item-after-text-color: "=themeOptions.dark === 'dark' ? 'rgb(180,180,180)' : 'rgb(100,100,100)'"
                --f7-list-item-subtitle-font-size: 14px
                --f7-list-item-subtitle-text-color: "=themeOptions.dark === 'dark' ? 'rgb(180,180,180)' : 'rgb(100,100,100)'"
                --f7-list-item-title-font-size: 15px
                --f7-list-item-title-text-color: "=themeOptions.dark === 'dark' ? 'rgb(180,180,180)' : 'rgb(100,100,100)'"
              subtitle: =@props.TimeUVMaxItem
              title: =props.IndiceUVMaxTitle
              visible: =!props.HideUVIndexMax
          - component: oh-label-item
            config:
              action: analyzer
              actionAnalyzerChartType: month
              actionAnalyzerCoordSystem: aggregate
              actionAnalyzerItems: =[props.OzoneItem]
              icon: =props.IconOzone
              item: =props.OzoneItem
              style:
                --f7-list-item-after-font-size: 15px
                --f7-list-item-after-text-color: "=themeOptions.dark === 'dark' ? 'rgb(180,180,180)' : 'rgb(100,100,100)'"
                --f7-list-item-title-font-size: 15px
                --f7-list-item-title-line-height: 32px
                --f7-list-item-title-text-color: "=themeOptions.dark === 'dark' ? 'rgb(180,180,180)' : 'rgb(100,100,100)'"
              title: =props.OzoneTitle
              visible: =!props.HideOzoneLevel
          - component: oh-label-item
            config:
              icon: =props.IconExposition
              iconColor: gray
              item: =props.ExpositionItem
              style:
                --f7-list-item-after-font-size: 15px
                --f7-list-item-after-text-color: "=themeOptions.dark === 'dark' ? 'rgb(180,180,180)' : 'rgb(100,100,100)'"
                --f7-list-item-title-font-size: 15px
                --f7-list-item-title-line-height: 32px
                --f7-list-item-title-text-color: "=themeOptions.dark === 'dark' ? 'rgb(180,180,180)' : 'rgb(100,100,100)'"
              title: =props.ExpositionTitle
              visible: =!props.HideSafeExposureTime