Tankdressen sortiert anzeigen

[achim0302]

Hallo,

nachdem an anderer Stelle eine Lösung für die Markdown Karte gefunden wurde bin ich auf die folgende Idee gekommen.
Mitteln Button-Cards habe ich 8 verschiedene Karten für Tankstellen nach folgendem Schema angelegt:

type: custom:button-card
entity: sensor.aral_friedrich_ebert_strasse_14_super
show_icon: false
hold_action:
  action: more-info
tap_action:
  action: toggle
aspect_ratio: 3/1
name: false
show_name: false
show_state: false
styles:
  card:
    - background-color: "#4e5e78"
    - border-radius: 2%
    - padding: 5%
    - opacity: 0.7
    - font: 18px Cooper
    - border: 8px double var(--button-card-light-color)
  grid:
    - grid-template-areas: >
        ". . . . ." "price street_1 street_1 street_1 ." "price street_2
        street_2 street_2 ." "price street_3 street_3 street_3 richtung" "time .
        . . km" ". . . . ." 
    - grid-template-columns: 2fr 1fr 1fr 1fr 1fr
    - grid-template-rows: min-content 1fr 1fr 1fr 1fr min-content
  custom_fields:
    price:
      - align-self: start
    street_1: null
    street_2: null
    street_3: null
    time:
      - justify-self: start
      - margin-top: "-35px"
      - font-size: 13px
      - margin-left: 10px
    km:
      - align-self: start
      - justify-self: start
      - margin-top: "-25px"
      - font-size: 13px
    richtung:
      - align-self: start
      - justify-self: end
      - margin-right: 45px
      - margin-top: "-25px"
custom_fields:
  price:
    card:
      type: custom:button-card
      name: |
        [[[
        if (states['sensor.aral_friedrich_ebert_strasse_14_super'].state > 1)
          return ` ${states['sensor.aral_friedrich_ebert_strasse_14_super'].state}`;
        else 
          return '0,00';
        ]]]
      styles:
        card:
          - font-family: "-apple-system, digital-7"
          - color: yellow
          - font-size: 40px
  street_1:
    card:
      type: custom:button-card
      name: >-
        [[[ return
        `${states['sensor.aral_friedrich_ebert_strasse_14_super'].attributes.brand}`
        ]]]
      styles:
        card:
          - background-color: transparent
          - box-shadow: none
  street_2:
    card:
      type: custom:button-card
      name: >-
        [[[ return
        `${states['sensor.aral_friedrich_ebert_strasse_14_super'].attributes.street}
        ${states['sensor.aral_friedrich_ebert_strasse_14_super'].attributes.house_number}`
        ]]]
      styles:
        card:
          - background-color: transparent
          - box-shadow: none
  street_3:
    card:
      type: custom:button-card
      name: >-
        [[[ return
        `${states['sensor.aral_friedrich_ebert_strasse_14_super'].attributes.postcode}
        ${states['sensor.aral_friedrich_ebert_strasse_14_super'].attributes.city}`
        ]]]
      styles:
        card:
          - background-color: transparent
          - box-shadow: none
  time: |
    [[[
      if (states['sensor.aral_friedrich_ebert_strasse_14_super'].state > 1)
        return 'Geöffnet';
      else 
        return 'geschlossen';
    ]]]
  km: >-
    [[[ return `${states['sensor.mobiltelefon_entfernung_zur_friedrich'].state}
    km` ]]]
  richtung:
    card:
      type: custom:button-card
      icon: mdi:navigation-variant
      name: false
      show_name: false
      tap_action:
        action: navigate
        navigation_path: /map
      styles:
        card:
          - background-color: "#242e42"
          - height: 25px
          - width: 25px
          - box-shadow: none
        icon:
          - width: 15px

Ist es möglich, die Reihenfolge der Karten nach der Preisanzeige (aufsteigend) zu sortieren?

Vielen Dank im Voraus,
Achim

[sascha89]

Die Reihenfolge der Karten kann nach den Parametern die ich in der Doku gefunden habe nicht dynamisch angepasst werden. Somit ist der einzige Ausweg den Inhalt der Karten anzupassen was mit dem oberen Teil von jinja2 dann nach javascript übersetzt machbar sein sollte. Da ich mit Javascript im HA Umfeld noch nichts probiert habe kann ich aber nicht versprechen dass es damit möglich ist.

[achim0302]

Schau dir das in Ruhe an und melde dich dann wenn du möchtest.

[Bacardi]

Ich finde eigentlich die Markdownkarte gut genug, es sei denn man will beim Klicken den More-Info Dialog sehen. Aber der Mehraufwand und damit die Fehleranfälligkeit ist nicht gering.

Vorgehensweise:

1. Einen Template Sensor schaffen, der zum einen aus den 8 Kandidaten die Top1 ermittelt und die EntityID ausgibt, zum Beispiel sensor.aral_friedrich_ebert_strasse_14_super. Die Logik aus Deiner Markdwonkarte kann sicherlich entsprechend angepaßt werden.
2. Das gleiche für Top2 und Top3
3. Nutzen eines HACS custom:vertical-stack-in-card Karte ODER der HACS custom:swipe-card in der Du dann als Entitäten die Sensoren für Top1-3 verwendest.

type: custom:vertical-stack-in-card
cards:
  - type: custom:button-card
    entity: sensor.top1
    name: " "
    icon: mdi:numeric-1-circle-outline
    size: 20%
    styles:
      icon:
        - color: "#94D4E9"
      card:
        - color: "#94D4E9"
        - font-size: 18px
        - font-weight: bold
        - background-color: "#13323E"
  - type: custom:button-card
    entity: sensor.top2
    name: " "
    icon: mdi:numeric-2-circle-outline
    size: 20%
    styles:
      icon:
        - color: "#94D4E9"
      card:
        - color: "#94D4E9"
        - font-size: 18px
        - font-weight: bold
        - background-color: "#13323E"
  - type: custom:button-card
    entity: sensor.top3
    name: " "
    icon: mdi:numeric-3-circle-outline
    size: 20%
    styles:
      icon:
        - color: "#94D4E9"
      card:
        - color: "#94D4E9"
        - font-size: 18px
        - font-weight: bold
        - background-color: "#13323E"

Warum ich die Swipe Karte überhaupt anführe? Weil sie mir als erstes einfiel und erst danach kam ich auf den vertikalen Stapel. Und ich wollte den Beispiel Code nicht einfach wegwerfen.

type: custom:swipe-card
cards:
  - type: custom:button-card
    entity: sensor.top1
    name: " "
    icon: mdi:numeric-1-circle-outline
    size: 40%
    styles:
      icon:
        - color: "#94D4E9"
      card:
        - color: "#94D4E9"
        - font-size: 18px
        - font-weight: bold
        - background-color: "#13323E"
  - type: custom:button-card
    entity: sensor.top2
    name: " "
    icon: mdi:numeric-2-circle-outline
    size: 30%
    styles:
      icon:
        - color: "#94D4E9"
      card:
        - color: "#94D4E9"
        - font-size: 18px
        - font-weight: bold
        - background-color: "#13323E"
  - type: custom:button-card
    entity: sensor.top3
    name: " "
    icon: mdi:numeric-3-circle-outline
    size: 20%
    styles:
      icon:
        - color: "#94D4E9"
      card:
        - color: "#94D4E9"
        - font-size: 18px
        - font-weight: bold
        - background-color: "#13323E"

Gutes Gelingen!

EDIT:
Nur ein paar Kleinigkeiten wie meine Testsensorennamen aus dem Code entfernt.

EDIT2:
Ich bin kurz davor, meinen Vorschlag zurückzuziehen. Ich war gerade duschen und da fiel mir ein, daß ich die entscheidende Stelle des Konstrukts nur angenommen aber nicht getestet habe.

Der Sensorname “sensor.aral_friedrich_ebert_strasse_14_super” im sensor.top1 wird in der Button Card so nicht interpretiert.

Wenn ich im Template Sensor “sensor.test_top1” allerdings gleich den Status des zweiten Sensors abfrage wie

{{ states('sensor.aral_friedrich_ebert_strasse_14_super') }}

dann in der Custom Button-Card setze

type: custom:button-card
entity: sensor.test_top1
name: Status über zweiten Sensor

dann geht es.
Ob Deine komplette Button Card geht oder Du Kompromisse eingehen mußt, kannst Du nur durch Ausprobieren herausfinden.

Solltest Du zu einer guten Lösung kommen, poste diese hier bitte. Ich bin gespannt.

EDIT3
Ich bin gerade an einem Kalenderprojekt von mir in Gange schau so im Internet nach Ideen und stieß auf smarterkram.de und da kam mir doch der Avatar so bekannt vor

Was sehe ich denn her auf Deiner Seite https://smarterkram.de/1222/

Ist das Deine Markdown Karte?

[achim0302]

Nein, ist es nicht.
Schön, dass du beim Duschen an meine Frage denkst. Deine Vorschläge werden ich in aller Ruhe mal ausprobieren. Ich bin selbst noch nicht so lange in HA unterwegs und benötige noch sehr oft Unterstützung.

[tarag]

Ich habe hier mal etwas aussortiert.

Danke für den Hinweis bezgl. des Profilbildes. Urheberrechtsverstöße werden hier nicht geduldet. Ich habe es daher entfernt und eine entsprechende Verwarnung vermerkt.

Update: Der Nutzer hat in dem Zusammenhang mitgeteilt, hier zukünftig nicht mehr aktiv sein zu wollen.