# Afficher l'heure sur le dashboard

**URL:** <https://community.gladysassistant.com/t/afficher-lheure-sur-le-dashboard/7071>\
**Category:** Demandes livrées\
**Tags:** feature-core\
**Created:** [Mars 16, 2022, 10:41 UTC](https://community.gladysassistant.com/t/afficher-lheure-sur-le-dashboard/7071 "2022-03-16T22:41:04Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![jerome](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/jerome/32/7030_2.png) [@jerome](https://community.gladysassistant.com/u/jerome)\
**Post date:** [Mars 16, 2022, 10:41 UTC](https://community.gladysassistant.com/t/afficher-lheure-sur-le-dashboard/7071/1 "2022-03-16T22:41:04Z")

</div>

Bonjour @pierre-gilles et la communauté,

J’organise au fur et à mesure mon dashboard et je me suis rendu compte et peut être vous trouverez ça bête 😅 mais nous n’avons pas la possibilité d’afficher l’heure en gros ou une horloge tout simplement.

Sur ma page de garde j’ai en indicateur le temps de route vers mes différents lieux de travail et d’avoir l’heure à coté serait sympa.

Qu’en pensez-vous ?

---

<div class="post-metadata">

**Author:** ![Tlse-vins](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/tlse-vins/32/6054_2.png) [@Tlse-vins](https://community.gladysassistant.com/u/Tlse-vins)\
**Post date:** [Mars 17, 2022, 6:41 UTC](https://community.gladysassistant.com/t/afficher-lheure-sur-le-dashboard/7071/2 "2022-03-17T06:41:10Z")

</div>

Il n’y a pas une demande déjà pour ça ?

---

<div class="post-metadata">

**Author:** ![jerome](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/jerome/32/7030_2.png) [@jerome](https://community.gladysassistant.com/u/jerome)\
**Post date:** [Mars 17, 2022, 6:56 UTC](https://community.gladysassistant.com/t/afficher-lheure-sur-le-dashboard/7071/3 "2022-03-17T06:56:36Z")

</div>

J’ai regardé vite fait mais non j’ai pas vu.

Certains veulent l’heure de rafraîchissement d’un périphérique ou caméra mais simplement l’heure j’ai pas vu.

Trop basique comme demande. 🤣

---

<div class="post-metadata">

**Author:** ![Lokkye](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/lokkye/32/5881_2.png) [@Lokkye](https://community.gladysassistant.com/u/Lokkye)\
**Post date:** [Avril 19, 2022, 12:23 UTC](https://community.gladysassistant.com/t/afficher-lheure-sur-le-dashboard/7071/4 "2022-04-19T12:23:33Z")

</div>

Bonjour, j’ai commencé à travailler sur cette demande. Est ce que vous avez une idée du design ? Je comptais afficher l’heure mais aussi la date du jour, est ce que cela vous parez bon ? Je vais faire une PR dans quelque jours pour vous montrer ce que j’ai fait.

---

<div class="post-metadata">

**Author:** ![Lokkye](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/lokkye/32/5881_2.png) [@Lokkye](https://community.gladysassistant.com/u/Lokkye)\
**Post date:** [Avril 19, 2022, 3:39 UTC](https://community.gladysassistant.com/t/afficher-lheure-sur-le-dashboard/7071/5 "2022-04-19T15:39:10Z")

</div>

Voici la PR en question, avec des screenshot

> <https://github.com/GladysAssistant/Gladys/pull/1509>
>
> \### Pull Request check-list
> 
> To ensure your Pull Request can be accepted as fa…st as possible, make sure to review and check all of these items:
> 
> \- \[\] If your changes affects code, did your write the tests?
> \- \[x\] Are tests passing? (\`npm test\` on both front/server)
> \- \[x\] Is the linter passing? (\`npm run eslint\` on both front/server)
> \- \[x\] Did you run prettier? (\`npm run prettier\` on both front/server)
> \- \[x\] If you are adding a new features/services, did you run integration comparator? (\`npm run compare-translations\` on front)
> \- \[x\] Did you test this pull request in real life? With real devices? If this development is a big feature or a new service, we recommend that you provide a Docker image to \[the community\](https://community.gladysassistant.com/) for testing before merging.
> \- \[\] If your changes modify the API (REST or Node.js), did you modify the API documentation? (Documentation is based on comments in code)
> \- \[\] If you are adding a new features/services which needs explanation, did you modify the user documentation? See \[the GitHub repo\](https://github.com/GladysAssistant/v4-website) and the \[website\](https://gladysassistant.com).
> \- \[\] Did you add fake requests data for the demo mode (\`front/src/config/demo.js\`) so that the demo website is working without a backend? (if needed) See \[https://demo.gladysassistant.com\](https://demo.gladysassistant.com).
> 
> NOTE: these things are not required to open a PR and can be done afterwards / while the PR is open.
> 
> \### Description of change
> 
> The purpose of this PR is a proposal to add box on dashboard to display a clock.
> 
> \<img width="411" alt="Screenshot 2022-04-19 at 17 20 00" src="https://user-images.githubusercontent.com/11317212/164042013-0a0c9402-4fbe-4a0b-b875-7e0f9ac8c37e.png"\>
> \<img width="399" alt="Screenshot 2022-04-19 at 17 19 28" src="https://user-images.githubusercontent.com/11317212/164042020-9eaef41e-db9d-476f-9701-9d4f86af7929.png"\>
> \<img width="393" alt="Screenshot 2022-04-19 at 17 26 58" src="https://user-images.githubusercontent.com/11317212/164042036-fd9b8265-8b21-48b8-8f9c-7d3089977a5a.png"\>

---

<div class="post-metadata">

**Author:** ![Tlse-vins](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/tlse-vins/32/6054_2.png) [@Tlse-vins](https://community.gladysassistant.com/u/Tlse-vins)\
**Post date:** [Avril 19, 2022, 4:28 UTC](https://community.gladysassistant.com/t/afficher-lheure-sur-le-dashboard/7071/6 "2022-04-19T16:28:48Z")

</div>

Salut

- J’aurais bien vue le jour à côté de la date.
- Je trouve l’affiche de l’heure un peu petit.

---

<div class="post-metadata">

**Author:** ![jerome](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/jerome/32/7030_2.png) [@jerome](https://community.gladysassistant.com/u/jerome)\
**Post date:** [Avril 19, 2022, 9:37 UTC](https://community.gladysassistant.com/t/afficher-lheure-sur-le-dashboard/7071/7 "2022-04-19T21:37:51Z")

</div>

L’heure est en effet un petit je trouve également.

L’heure est plus important que la date il faudrait inversé la taille des caractères entre les deux.

Format simple mais efficace

---

<div class="post-metadata">

**Author:** ![Lokkye](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/lokkye/32/5881_2.png) [@Lokkye](https://community.gladysassistant.com/u/Lokkye)\
**Post date:** [Avril 22, 2022, 6:07 UTC](https://community.gladysassistant.com/t/afficher-lheure-sur-le-dashboard/7071/8 "2022-04-22T18:07:47Z")

</div>

@Tlse-vins et @jerome, merci pour vos retours.

J’ai agrandi la taille de l’heure, est ce que c’est mieux comme cela :  
 ![Screenshot 2022-04-22 at 20.05.42](https://gladys-assistant-community.b-cdn.net/uploads/default/original/2X/0/03b4a178712149a900bf907152bc4b228cce99a9.png)  
 ![Screenshot 2022-04-22 at 20.05.16](https://gladys-assistant-community.b-cdn.net/uploads/default/original/2X/9/93d06642f3948ecaf704b93a13c51c3df524b1a1.png)

Mais pour l’ajout du jour, la library dayjs que l’on utilise ne me permet pas de le faire ☹

---

<div class="post-metadata">

**Author:** ![Tlse-vins](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/tlse-vins/32/6054_2.png) [@Tlse-vins](https://community.gladysassistant.com/u/Tlse-vins)\
**Post date:** [Avril 22, 2022, 9:56 UTC](https://community.gladysassistant.com/t/afficher-lheure-sur-le-dashboard/7071/9 "2022-04-22T21:56:58Z")

</div>

Je trouve sur c’est plus claire.  
Dommage pour le jour.

---

<div class="post-metadata">

**Author:** ![damalgos](https://gladys-assistant-community.b-cdn.net/letter_avatar_proxy/v4/letter/d/e274bd/32.png) [@damalgos](https://community.gladysassistant.com/u/damalgos)\
**Post date:** [Avril 23, 2022, 6:47 UTC](https://community.gladysassistant.com/t/afficher-lheure-sur-le-dashboard/7071/10 "2022-04-23T18:47:03Z")

</div>

> [@Lokkye](#):
>
> Mais pour l’ajout du jour, la library dayjs que l’on utilise ne me permet pas de le faire ☹

Hello,

Pour le jour le calcul peut se faire à mon avis 🙂 plusieurs méthodes existent mais globalement je pense que tu peux le calculer facilement en passant par le timestamp / ou même la date

---

<div class="post-metadata">

**Author:** ![jerome](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/jerome/32/7030_2.png) [@jerome](https://community.gladysassistant.com/u/jerome)\
**Post date:** [Avril 23, 2022, 9:20 UTC](https://community.gladysassistant.com/t/afficher-lheure-sur-le-dashboard/7071/11 "2022-04-23T21:20:22Z")

</div>

salut @Lokkye

Je trouve ça nettement mieux pour ma part je valide. 😉 👍

---

<div class="post-metadata">

**Author:** ![Lokkye](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/lokkye/32/5881_2.png) [@Lokkye](https://community.gladysassistant.com/u/Lokkye)\
**Post date:** [Avril 24, 2022, 12:27 UTC](https://community.gladysassistant.com/t/afficher-lheure-sur-le-dashboard/7071/12 "2022-04-24T12:27:00Z")

</div>

Oui, j’y ai penser mais le formatage de la dateest différent d’une locale a une autre, je vais voir ce que je peux faire mais je voudrais éviter plus de développement lors que l’on rajoutera plus de langue dans gladys

---

<div class="post-metadata">

**Author:** ![valentinhttr](https://gladys-assistant-community.b-cdn.net/letter_avatar_proxy/v4/letter/v/9de0a6/32.png) [@valentinhttr](https://community.gladysassistant.com/u/valentinhttr)\
**Post date:** [Avril 25, 2022, 6:27 UTC](https://community.gladysassistant.com/t/afficher-lheure-sur-le-dashboard/7071/13 "2022-04-25T06:27:33Z")

</div>

Tu peux afficher le jour facilement en JS, pas besoin de lib…

```nohighlight
const d = new Date()
const locale = "fr-FR"
d.toLocaleString(locale, {weekday: 'long'})

```

Faut juste passer la bonne locale.

---

<div class="post-metadata">

**Author:** ![VonOx](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/vonox/32/10128_2.png) [@VonOx](https://community.gladysassistant.com/u/VonOx)\
**Post date:** [Avril 25, 2022, 10:07 UTC](https://community.gladysassistant.com/t/afficher-lheure-sur-le-dashboard/7071/14 "2022-04-25T10:07:37Z")

</div>

Un petit mock ( modif sauvage en html )

![image](https://gladys-assistant-community.b-cdn.net/uploads/default/original/2X/f/f5353064f9e2d4057593b4c1abf707a935aa152a.png)

---

<div class="post-metadata">

**Author:** ![pierre-gilles](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/pierre-gilles/32/5886_2.png) [@pierre-gilles](https://community.gladysassistant.com/u/pierre-gilles)\
**Post date:** [Avril 26, 2022, 4:56 UTC](https://community.gladysassistant.com/t/afficher-lheure-sur-le-dashboard/7071/15 "2022-04-26T16:56:09Z")

</div>

Effectivement je verrais quelque chose de beaucoup plus “design/visuel” comme l’a fait @VonOx.

On pourrait même voir pour aller sur quelque chose de encore plus design, genre cadran ou affichage façon horloge numérique ?

---

<div class="post-metadata">

**Author:** ![Lokkye](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/lokkye/32/5881_2.png) [@Lokkye](https://community.gladysassistant.com/u/Lokkye)\
**Post date:** [Avril 26, 2022, 5:24 UTC](https://community.gladysassistant.com/t/afficher-lheure-sur-le-dashboard/7071/16 "2022-04-26T17:24:31Z")

</div>

Merci @VonOx c’est vrai que c’est beaucoup plus jolie et compréhensible

@pierre-gilles on peux déjà faire un premier jet comme cela si ça te va et faire évoluer l’affiche mais j’y avais pensé pour le cadran mais je ne sais pas si cela lisible sur un petit écran

---

<div class="post-metadata">

**Author:** ![valentinhttr](https://gladys-assistant-community.b-cdn.net/letter_avatar_proxy/v4/letter/v/9de0a6/32.png) [@valentinhttr](https://community.gladysassistant.com/u/valentinhttr)\
**Post date:** [Avril 26, 2022, 6:50 UTC](https://community.gladysassistant.com/t/afficher-lheure-sur-le-dashboard/7071/17 "2022-04-26T18:50:14Z")

</div>

Une horloge QLOCKTWO ça pourrait être drôle 😄 ( [GitHub - ndpdev/qlocktwo: JavaScript implementation of Biegert & Funk's QLOCKTWO](https://github.com/ndpdev/qlocktwo) )

---

<div class="post-metadata">

**Author:** ![pierre-gilles](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/pierre-gilles/32/5886_2.png) [@pierre-gilles](https://community.gladysassistant.com/u/pierre-gilles)\
**Post date:** [Avril 27, 2022, 4:39 UTC](https://community.gladysassistant.com/t/afficher-lheure-sur-le-dashboard/7071/18 "2022-04-27T16:39:25Z")

</div>

@Lokkye A voir justement si c’est compliqué de faire un truc un peu plus léché ? Sans forcément réinventer la roue, des design existe déjà. Ca me parait juste un peu brut ^^

La proposition de @VonOx est déjà mieux, mais si ça prend 20 minutes de mettre en place un beau design, ce serait dommage 🙂

---

<div class="post-metadata">

**Author:** ![Lokkye](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/lokkye/32/5881_2.png) [@Lokkye](https://community.gladysassistant.com/u/Lokkye)\
**Post date:** [Avril 27, 2022, 7:22 UTC](https://community.gladysassistant.com/t/afficher-lheure-sur-le-dashboard/7071/19 "2022-04-27T19:22:59Z")

</div>

@pierre-gilles: J’ai intégré le design de @VonOx et j’ai rajouté un clock analogique. Je suis en train de voir pour la re-styliser un peu car je le trouve un peu fade.  
Qu’est ce que tu en penses ?

 ![Screenshot 2022-04-27 at 21.22.09](https://gladys-assistant-community.b-cdn.net/uploads/default/original/2X/c/c9f01d63a333e5e4dbccfff3818b0928a264c160.png)

 ![Screenshot 2022-04-27 at 21.21.59](https://gladys-assistant-community.b-cdn.net/uploads/default/original/2X/3/374a28bdd4d55b27ae744d3944c526eb4f7f4077.png)

---

<div class="post-metadata">

**Author:** ![jerome](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/jerome/32/7030_2.png) [@jerome](https://community.gladysassistant.com/u/jerome)\
**Post date:** [Avril 27, 2022, 8:33 UTC](https://community.gladysassistant.com/t/afficher-lheure-sur-le-dashboard/7071/20 "2022-04-27T20:33:23Z")

</div>

@Lokkye le design de @VonOx est simple mais efficace.

En ce qui concerne le clock analogique le retoucher peut être un peu en effet mais il faut rester sobre et épurer je pense pour rester dans le thème du dashboard de Gladys.

[Page suivante](https://community.gladysassistant.com/t/afficher-lheure-sur-le-dashboard/7071.md?page=2)
