fredericalpers commented 4 months ago

Implementation of energy certificate with a scale

Introduction

The current presentation of energy performance certificate data on property websites is not particularly appealing or user-friendly, as it is only displayed in text/table form. In order to improve the user experience and better address potential customers, a standard graphical display for energy performance certificates is to be implemented.

User Story

As a real estate agent, I would like to have a more attractive presentation of the energy certificate data on my website. Currently, this data is only displayed as simple text/table, which is not very appealing. To improve the presentation, I would like to use a graphical representation for energy performance certificates. This will allow potential customers to see the energy efficiency of the property at a glance and process the information more easily. This visual representation will help to increase the attractiveness and professionalism of my website and increase the interest of potential customers.

Task & Requirements

[x] Development of the display and integration of the energy certificate data
[x] Selection option for activating the display in the plugin backend
[x] Carrying out tests to ensure that the graphical representation is displayed correctly on all device sizes, browsers etc. and accurately reflects the energy efficiency of the properties.

Design / Screenshots

Certificate of consumption: energieausweis PNG (3)

Demand certificate: energieausweis2 PNG (3)

yeneastgate commented 3 months ago

@fredericalpers After investigating the requirements, please confirm the following issues for us:

Is the Certificate of Consumption (Bedarfsausweis) energy certificate displayed like this image correct?
Is the Demand certificate(Verbrauchsausweis) energy certificate displayed like this image?
Currently on the onOffice system we see 2 types of energy certificates: Industrial requirement-oriented certificate (Bedarfsausweis Gewerbe) and Industrial energy consumption certificate (Verbrauchsausweis Gewerbe)

=> So do we need to implement them? => If you need to implement them, please provide us with the images of the UI scale.

yeneastgate commented 3 months ago

@fredericalpers Please confirm it for me so I can continue with the implementation. Thanks

fredericalpers commented 3 months ago

@yeneastgate the energycertificates for industrial (Gewerbe) will be implemented later, I will have to do some more research on these first.

The UI for the current implementation looks good so far. However I have a few minor adjustments.

[x] Appropriate gap between headline, scale and table. Recommendation for the scale. top margin: 1.5rem, bottom margin: 2rem or even 2.5rem.
[x] Use a more saturated green, as the light green can be hard to see on different screens.

yeneastgate commented 3 months ago

@yeneastgate the energycertificates for industrial (Gewerbe) will be implemented later, I will have to do some more research on these first.

The UI for the current implementation looks good so far. However I have a few minor adjustments.

[ ] Appropriate gap between headline, scale and table. Recommendation for the scale. top margin: 1.5rem, bottom margin: 2rem or even 2.5rem.

[ ] Use a more saturated green, as the light green can be hard to see on different screens.

@fredericalpers I got it. Thanks!

yeneastgate commented 3 months ago

@fredericalpers I have implemented it and this is demo video:

https://github.com/onOffice-Web-Org/oo-wp-plugin/assets/104892108/a6ac934d-a324-4729-8be5-b18bffdec389

Please check and let me know your opinion. Thanks!

fredericalpers commented 3 months ago

@yeneastgate this looks good to me! we will review it as soon as possible. thank you :)

onOffice-Web-Org / oo-wp-plugin