Frontend card for hass-formulaoneapi

Overview

FormulaOne Card

GH-release GH-last-commit GH-code-size hacs_badge

Present the data of hass-formulaoneapi in a pretty way

Installation

Manually add formulaone-card.js to your <config>/www/ folder and add the following to the configuration.yaml file:

lovelace:
  resources:
    - url: /local/formulaone-card.js
      type: module

OR install using HACS and add this (if in YAML mode):

lovelace:
  resources:
    - url: /hacsfiles/formulaone-card/formulaone-card.js
      type: module

The above configuration can be managed directly in the Configuration -> Lovelace Dashboards -> Resources panel when not using YAML mode, or added by clicking the "Add to lovelace" button on the HACS dashboard after installing the plugin.

Configuration

Name Type Default Description
type string Required custom:formulaonecard
sensor string Required Entity ID of the sensor (must be one of the sensors of hass-formulaoneapi
card_type string Required The type of card you want to display (driver_standings,constructor_standings,next_race,schedule,last_result)
title string The header of the card ( hidden when null or empty)
date_locale string Override the locale used for the date and time formatting
image_clickable boolean false Click on image leads to wikipedia, or not
show_carnumber boolean false Show the number of the car
location_clickable boolean false Click on the location leads to wikipedia
previous_race enum Hide/strikethrough or make the past races italic options are (hide, strikethrough or italic)
type: custom:formulaone-card
card_type: next_race
sensor: sensor.formula_one_sensor_races
title: Next Race
date_locale: nl
image_clickable: false

image

type: custom:formulaone-card
card_type: constructor_standings
sensor: sensor.formula_one_sensor_constructors
title: Constructor Standings

image

type: custom:formulaone-card
card_type: driver_standings
sensor: sensor.formula_one_sensor_drivers
title: Driver Standings

image

type: custom:formulaone-card
card_type: schedule
sensor: sensor.formula_one_sensor_races
title: Schedule
date_locale: nl

image

type: custom:formulaone-card
card_type: last_result
sensor: sensor.formula_one_sensor_last_result
title: Last Result

image

Comments
  • no longer working

    no longer working

    Downloaded and installed the latest version as the next race wasn't showing:

    copied file to:

    config/www

    doublechecked the configuration.yaml for:

    lovelace: resources: - url: /local/formulaone-card.js type: module

    Even added the .js file as a card (sources through cards)

    this is the result:

    custom element doesn't exist formulaone-card.

    type: custom:formulaone-card card_type: next_race sensor: sensor.formula_one_sensor_races title: Next Race date_locale: nl image_clickable: false

    I see the following in the logs:

    2022-11-01 20:43:18.274 ERROR (MainThread) [frontend.js.latest.202209072] http://homeassistant.local:8123/local/formulaone-card.js:8:1 Uncaught SyntaxError: Unexpected token '<'

    Have tried to restore an older version of the .js file and rebooted HA several times, doesn't seem to help either.

    How can I install the integration using HACS and where is it listed?

    opened by madtraxx18 8
  • Error: Please pass the correct sensor (races)

    Error: Please pass the correct sensor (races)

    Describe the bug after adding the card, an error appears

    Expected behavior if state_attr('sensor.formula_one_sensor_races', 'next_race') == None show information that there is no information, not an error that there is no sensor

    Screenshots image

    Additional context

    type: custom:formulaone-card
    card_type: next_race
    sensor: sensor.formula_one_sensor_races
    title: Next Race
    date_locale: pl
    image_clickable: false
    
    bug 
    opened by Santanachia 5
  • TypeError: Cannot read properties of undefined (reading 'attributes')

    TypeError: Cannot read properties of undefined (reading 'attributes')

    Describe the bug Used HACS to install and created a schedule card:

    type: custom:formulaone-card
    card_type: schedule
    sensor: sensor.formula_one_sensor_races
    title: Schedule
    date_locale: gb
    

    Get the TypeError message:

    TypeError: Cannot read properties of undefined (reading 'attributes')
    

    I've checked everything is installed correctly and tried other card_types, but they all give the same error :-(

    Desktop (please complete the following information):

    • OS: [e.g. iOS] macOS 13.1
    • Browser [e.g. chrome, safari] Brave & Safari
    • Version [e.g. 22] 2022.12.8
    bug 
    opened by WizBangCrash 3
  • Error: Please pass the correct sensor (races)

    Error: Please pass the correct sensor (races)

    This minor bug is because there are no next races for this year 2022. I use the card type: next_race

    type: custom:formulaone-card card_type: next_race sensor: sensor.formula_one_sensor_races title: Next Race date_locale: nl image_clickable: false

    The sensor (sensor.formula_one_sensor_races) has al race of 2022 but not 2023.

    It's more correct to say: "Season is over. See you next year!" that is already implemented, if you use the card type: Schedule

    bug 
    opened by Dynamix72 2
  • Flags and teams

    Flags and teams

    Is your feature request related to a problem? Please describe. No

    Have you tried if it is already a feature? Have you checked the wiki? Yes

    Describe the solution you'd like As a feature request, could you include teamnames and flags in the driver standings?

    Describe alternatives you've considered None

    Additional context afbeelding

    Thank you very much in advance ;-)

    enhancement 
    opened by BebeMischa 2
  • Country Flags not loading

    Country Flags not loading

    Describe the bug Country flags in drivers' standings not loading.

    To Reproduce Add a card with the below config

    type: custom:formulaone-card
    card_type: driver_standings
    sensor: sensor.formula_one_sensor_drivers
    title: Driver Standings
    standings:
      show_flag: true
      show_team: true
    

    Expected behavior Country Flags should load.

    Screenshots image

    Desktop (please complete the following information):

    • not browser specific.

    Smartphone (please complete the following information):

    • not browser specific.

    Additional context Looks like the site https://www.countries-ofthe-world.com/ is down. May be a better way is to have the images locally, for quick loading?

    bug 
    opened by n00bcodr 1
  • Add cards translation

    Add cards translation

    Is your feature request related to a problem? Please describe. No

    Have you tried if it is already a feature? Have you checked the wiki? Yes

    Describe the solution you'd like

    Add the ability to translate cards into a language other than English.

    Describe alternatives you've considered Change the code.

    2E48A199-0D93-4E70-8DB9-73E0BC248154

    enhancement 
    opened by MichelJourdain 1
  • TypeError: Cannot read properties of undefined (reading 'date')

    TypeError: Cannot read properties of undefined (reading 'date')

    Describe the bug On: card_type: next_race sensor: sensor.formula_one_sensor_races we see the message: "TypeError: Cannot read properties of undefined (reading 'date')"

    Screenshots F1_issue 2022-11-01 092153 F1_issue 2022-11-01 092253

    Desktop (please complete the following information): ALL

    Smartphone (please complete the following information): ALL

    bug 
    opened by FlyProg 1
  • next race changing too soon

    next race changing too soon

    Next race already showing as Mexico, COTA race does not start for another 19hrs. Could you please edit so next race does not change prior to current one running? Thanks

    opened by marc115uk 1
  • Added booleans hiding races, link and carnumber

    Added booleans hiding races, link and carnumber

    • show_carnumber to show the car number behind the name of the driver
    • location_clickable to toggle the location leading to the wikipedia of the circuit
    • previous_race to hide/strikethrough or make the past races italic
    opened by marcokreeft87 1
  • Next race: Enlarge image instead of wikipedia

    Next race: Enlarge image instead of wikipedia

    Is your feature request related to a problem? Please describe. The option to disable the wikipedia URL when clicking the track image.

    Have you tried if it is already a feature? Have you checked the wiki? Yes, it's not.

    Describe the solution you'd like

    type: custom:formulaone-card
    card_type: next_race
    sensor: sensor.formula_one_sensor_races
    title: Volgende race
    date_locale: nl
    trackimage_wikipedia: false
    
    enhancement 
    opened by EvertJob 1
  • Request for new features: Countdown and Previous results.

    Request for new features: Countdown and Previous results.

    **Is your feature request related to a problem? Please describe it ** A clear and concise description of what the problem is. No.

    **Have you checked if it is already a feature, have you looked on the wiki? Yes.

    Describe the solution you would like I would like during this long wait, to be able to see the following features.

    1. I don't know if it is possible but using for example the "Last result" card to have a drop down on the race name and be able to select a previous race to see these previous results.

    2. I would also like a countdown of what is left for the next race. Usable to know when the next season will start and then to know when the next race is with a counter.

    This counter always if you can add the flag of the country for example.

    Thanks for your attention. Regards.

    enhancement todo 
    opened by jonathanathe 2
Releases(0.2.0)
  • 0.2.0(Dec 27, 2022)

    • 409c18d Merge e58ca42c681b2337103fb34f90b057c2b4a9a7fe into 6ae95c43c86a40cbb3722432561dc048acf1c990
    • e58ca42 Added option to translate texts
    • 6ae95c4 38 sergio pérez mexico flag (#39)
    Source code(tar.gz)
    Source code(zip)
  • 0.1.9(Dec 26, 2022)

    • 00d989c Merge 709b060b62271f853cea437b4861a788029731ab into 38bb09bd8fc653cd010f1684b4bb7449b6a12bfc
    • 709b060 FIx test
    • 4eef729 Upped version
    • ca29267 Fix for mexican flag
    • 38bb09b Changed url for the flags to CDN (#37)
    Source code(tar.gz)
    Source code(zip)
  • 0.1.8(Dec 25, 2022)

    • 9d90ece Merge 9ee883a1500cb795498db3bdd405519a37c85485 into 959266cc56ddc5ff82425575eb72df2c1d734b6b
    • 9ee883a Fix tests
    • d26390f Changed url for the flags to CDN
    • 959266c Changed the url (#34)
    • 909d64c Add card size (#36)
    Source code(tar.gz)
    Source code(zip)
  • 0.1.7(Dec 24, 2022)

    • ec8b349 Merge 97684a462e6e648e8d2383d3225081f16725b769 into 5d4585f9866628b59a3cdbf61039847d2becfab7
    • 97684a4 Added cardsize for correct layout
    • 7bd567a Added cardsize method
    • 5d4585f Update README.md (#30)
    • 98808ad End of season (#27)
    Source code(tar.gz)
    Source code(zip)
  • 0.1.6(Nov 22, 2022)

    • db4693d Merge 410158148ae1eefdaedc1a726f20ed9c4af64e04 into 8413316638c0edc06420f2673fa6a50865b6bbca
    • 4101581 Fixed end of season error
    • 6d33d29 -
    • 665185f Fixed end of season displaying error
    • 8413316 Fixed country flag and circuit image for UAE (#24)
    Source code(tar.gz)
    Source code(zip)
  • 0.1.4(Nov 14, 2022)

    • a3d2e49 Merge 8bb1c56f54a1866cd4d59a1af20a5a6fca849f3f into f7e0ec2289fd917d28d771feaf5a2f21e2f5438f
    • 8bb1c56 Fixed country flag and circuit image for UAE
    • f7e0ec2 Flag and team (#20)
    Source code(tar.gz)
    Source code(zip)
  • 0.1.3(Nov 1, 2022)

  • 0.1.2(Oct 31, 2022)

    • 6fc077d Merge 657ef57997977937e99af7d8bc15f14e7a89241d into 5b50443e8734fb27452f2825c20f1084aa49db7e
    • 657ef57 Upped version
    • 5b50443 Fix next race when next is sprint race (#18)
    • ec93cbc Merge branch 'main' of https://github.com/marcokreeft87/formulaone-card
    • c996ede Fix next race when next is sprint race
    • 1630eb2 Fixed styling for schedule and last result (#15)
    Source code(tar.gz)
    Source code(zip)
  • 0.1.1(Oct 25, 2022)

    • 13edd4d Merge 4e30bbcbb852d44f2bbf60150f7bc26150f6533d into 7adeff559a889f50eef5829fc45b492f79c466ac
    • 4e30bbc Fixed tests
    • c69fc35 Fixed styling for schedule and last result
    • 7adeff5 Update README.md
    • d5bc523 Added booleans hiding races, link and carnumber (#13)
    Source code(tar.gz)
    Source code(zip)
  • 0.1.0(Oct 15, 2022)

    This release adds the following config option:

    • Show_carnumber to show the car number behind the name of the driver
    • Location_clickable to toggle the location leading to the wikipedia of the circuit
    • Previous_race to hide/strikethrough or make the past races italic

    Full Changelog: https://github.com/marcokreeft87/formulaone-card/compare/v0.0.3...0.1.0

    Source code(tar.gz)
    Source code(zip)
  • v0.0.3(Oct 12, 2022)

    • Fixed issue with flag not displaying correctly for for example USA

    What's Changed

    • code coverage 100% by @marcokreeft87 in https://github.com/marcokreeft87/formulaone-card/pull/10
    • Country flag correction by @marcokreeft87 in https://github.com/marcokreeft87/formulaone-card/pull/12

    Full Changelog: https://github.com/marcokreeft87/formulaone-card/compare/v0.0.2...v0.0.3

    Source code(tar.gz)
    Source code(zip)
  • v0.0.2(Oct 7, 2022)

    The click action behind the image in next_race and last_result can now be toggle on/of

    What's Changed

    • Update README.md by @marcokreeft87 in https://github.com/marcokreeft87/formulaone-card/pull/2
    • Update README.md by @marcokreeft87 in https://github.com/marcokreeft87/formulaone-card/pull/3
    • Coverage corrected by @marcokreeft87 in https://github.com/marcokreeft87/formulaone-card/pull/4
    • Toggle image of next_race/last_result clickable by @marcokreeft87 in https://github.com/marcokreeft87/formulaone-card/pull/8
    • Fixed tests by @marcokreeft87 in https://github.com/marcokreeft87/formulaone-card/pull/9

    New Contributors

    • @marcokreeft87 made their first contribution in https://github.com/marcokreeft87/formulaone-card/pull/2

    Full Changelog: https://github.com/marcokreeft87/formulaone-card/compare/v0.0.1...v0.0.2

    Source code(tar.gz)
    Source code(zip)
  • v0.0.1(Oct 5, 2022)

Owner
Marco Kreeft
Marco Kreeft
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 2023
O objetivo dessa aplicação era criar um frontend feito totalmente em Javascript, sem nenhum arquivo HTML ou CSS pré-criado. Além disso, esse projeto também é o frontend da minha API 100% NodeJS.

Projeto HTML 100% Javascript Front-end feito "sem HTML" Conteúdos ➜ Sobre o projeto ➜ O que aprendi ➜ Como usar ?? Sobre o projeto Voltar ao topo O ob

João Victor Negreiros 19 Aug 3, 2021
Cardmatchinggamebyercan - A card-matching game made with Flutter.

card_matching_game_by_ercan A card-matching game. Working Demo: https://confident-austin-19dbd2.netlify.app Getting Started This project is a starting

Ercan Tomac 17 Dec 14, 2022
Venni backend - The backend of the Venni client apps implementing the credit card payments, matching algorithms, bank transfers, trip rating system, and more.

Cloud Functions Description This repository contains the cloud functions used in the Firebase backend of the Venni apps. Local Development Setup For t

Abrantes 1 Jan 3, 2022
Create a card layout that let your user flip through it like you see on Google Tips

#Tip Cards by Pete R. Create an animated card layout that let your viewer flip through it like you see on Google Tips Page. Created by Pete R., Founde

Pete R. 213 Nov 5, 2022
A card for Home Assistant Lovelace for exploring the history of your entities interactively and in real time.

History explorer card This is a custom history card for Home Assistant. This card offers a highly interactive and configurable way to view the history

null 165 Dec 31, 2022
Different Types of Monsters Card of Popular anime. Build in React tech.

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: ya

Abhishek Tiwari 5 Mar 19, 2022
A website for detecting name of bank from card number, supported all Iranian banks

Detect Iranian Bank Web A website for detecting name of bank from card number, supported all Iranian banks. This package contains SVG logo and brand c

Max Base 12 Oct 2, 2022
A Tailwind plugin that allows to create multiple groups utilities such as group-card or group-1 and works with Tailwind 3 features and all variations.

Tailwind Labeled Groups A plugin that allows to create multiple groups utilities such as group-card or group-1 and works with Tailwind 3 features and

Max 18 Nov 21, 2022
Yu-Gi-Oh! Card Search Engine

Yu-Gi-Oh! Card Search Engine Buscador de cartas de Yu-Gi-Oh, os resultados são apresentados em PT-BR. Algumas cartas podem não ser encontradas devido

Evandro Fadul 11 Apr 14, 2022
Benefit cards API, create and store card data and log transactions

Valex ?? Benefit cards for companies and employees! ?? Tech used Overview An API to store benefit cards from companies to employees and log transactio

Felipe Ventura 2 Apr 25, 2022
Card IDE (CIDEr) - Design game cards using HTML/Handlebars, CSS, and tabular data

CIDEr Card IDE (CIDEr) - Design game cards using HTML/Handlebars, CSS, and tabular data. Website: Start using Cider About CIDEr Cider was created to f

Oatear 37 Dec 10, 2022
Yu-Gi-Oh! Card Search Engine

Yu-Gi-Oh! Card Search Engine Buscador de cartas de Yu-Gi-Oh, os resultados são apresentados em PT-BR. Algumas cartas podem não ser encontradas devido

Evandro Fadul 11 Apr 14, 2022
A minimalistic area card with sensors and buttons.

Minimalistic Area Card A minimalistic area card to have a control panel of your house on your dashboard. This card will show numeric sensors with its

Marcos Junior 36 Jan 6, 2023
A pokemon card battle app that can evolve them and see their battle history.

BattlePoke ?? About An application of an Pokemon card battle game where each player initially receives 3 cards and can start to battle and gain evolut

Mateus Cruz Rossetto 3 Jun 17, 2022
A minimalistic card for Home Assistant Lovelace UI which shows how many days it has been between any input_datetime and today.

Datetime Card A minimalistic card for Home Assistant Lovelace UI which shows how many days it has been between any input_datetime and today. Useful to

Antonino Piazza 12 Aug 12, 2022
Hourly weather card for Home Assistant. Visualize upcoming weather conditions as a colored horizontal bar.

Hourly Weather Card by @decompil3d An hourly weather card for Home Assistant. Visualize upcoming weather conditions as a colored horizontal bar. Can y

Jonathan Keslin 49 Dec 29, 2022
A jQuery-free general purpose library for building credit card forms, validating inputs and formatting numbers.

A jQuery-free general purpose library for building credit card forms, validating inputs and formatting numbers.

Jesse Pollak 528 Dec 30, 2022