# Lassen Sie uns über Gladys V4 sprechen

**URL:** <https://community.gladysassistant.com/t/parlons-de-gladys-v4/3578>\
**Category:** Développement\
**Created:** [20. Oktober 2018 um 21:24 UTC](https://community.gladysassistant.com/t/parlons-de-gladys-v4/3578 "2018-10-20T21:24:26Z")\
**Posts on this page:** 20\
**Page:** 10

<div class="post-metadata">

**Author:** ![MathieuA](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/mathieua/32/22211_2.png) [@MathieuA](https://community.gladysassistant.com/u/MathieuA)\
**Post date:** [19. März 2019 um 13:19 UTC](https://community.gladysassistant.com/t/parlons-de-gladys-v4/3578/226 "2019-03-19T13:19:34Z")

</div>

Ich mag CSS 😛

Aaaahhhh ja, das ist wirklich sauber! Ich habe über die Verbindungen nachgedacht, weil ich Angst habe, dass es sonst ein Chaos wird, aber wenn wir es gut durchdenken, gibt es keinen Grund, warum es nicht funktionieren sollte!

Ich bin heiß darauf, es auszuprobieren, wenn du willst!

---

<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:** [20. März 2019 um 01:07 UTC](https://community.gladysassistant.com/t/parlons-de-gladys-v4/3578/227 "2019-03-20T01:07:01Z")

</div>

> [@MathieuA](#):
>
> Ich habe gezögert, die Verbindungen zu verwenden, weil ich Angst habe, dass es ein Chaos wird, aber wenn wir es gut durchdenken, gibt es keinen Grund dafür!

Die Verbindungen sind nur visuell, verstehst du! Nichts, was der Benutzer auswählen kann, wir wollen keinen Knoten-Sack 😛

> [@MathieuA](#):
>
> Ich bin heiß darauf, einen Versuch zu machen, wenn du willst!

Auf jeden Fall, wenn du Bock hast 😃

---

<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:** [20. März 2019 um 10:15 UTC](https://community.gladysassistant.com/t/parlons-de-gladys-v4/3578/228 "2019-03-20T10:15:04Z")

</div>

Hallo zusammen!

Heute habe ich an zwei Dingen gearbeitet.

**1/ Der Startprozess von Gladys in der Produktion**

Ich habe ein kleines Docker-Build-POC erstellt (nur lokal, kein Multi-Arch, nur ein einfacher Build)

Das Ziel war es, einfache Punkte zu klären:

- Wann und wie werden die Datenbankmigrationen durchgeführt?
- Wie werden die Assets und das Frontend von Express bereitgestellt
- Wann wird das Frontend gebaut?
- Kleine Arbeit an der Optimierung der Build-Größe

Kurz gesagt, ich habe viel Zeit investiert, aber jetzt funktioniert es gut. Ich bin mit dem Ergebnis zufrieden!

Das Hauptziel war:

- Nichts wird beim Benutzer durchgeführt, ALLES wird beim Build erledigt
- Der Benutzer hat nichts zu tun, Gladys startet neu und verwaltet die Migrationen selbst
- Der Benutzer muss keine Umgebungsvariablen definieren. Das ist optional für bestimmte Fälle

**2/ Das Design des Dashboards**

Heute Nachmittag habe ich (ein bisschen) CSS gemacht

Man kann sagen, dass ich einen schlechten Nachmittag hatte aha 😂

Bisher bin ich von einem 3-Spalten-Raster wie beim Gateway ausgegangen.

Ich habe ein Set von Boxen definiert, bisher ist es nur ein erster Entwurf.

Ich finde, dass einige Boxen zu viel „Leerraum“ haben, aber ich weiß nicht genau, wie ich das füllen soll.

 ![19](https://gladys-assistant-community.b-cdn.net/uploads/default/original/2X/e/ea21786993f1399dea05211ee05d1f361c2fe769.jpeg)

Natürlich ist alles auf der Demo-Website verfügbar =\>

> **[Gladys Assistant](https://demo.gladysassistant.com/dashboard)**

---

<div class="post-metadata">

**Author:** ![AlexTrovato](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/alextrovato/32/10705_2.png) [@AlexTrovato](https://community.gladysassistant.com/u/AlexTrovato)\
**Post date:** [20. März 2019 um 10:50 UTC](https://community.gladysassistant.com/t/parlons-de-gladys-v4/3578/229 "2019-03-20T10:50:23Z")

</div>

Hallo,  
Meine persönliche Meinung: Es gibt nie zu viel Weiß. Ich finde das super. Jetzt könnte Multi-Theming dieses Geschmacksproblem beheben.  
Gute Arbeit 😉

---

<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:** [21. März 2019 um 07:47 UTC](https://community.gladysassistant.com/t/parlons-de-gladys-v4/3578/230 "2019-03-21T07:47:05Z")

</div>

Ehrlich gesagt, super gemacht, denn ich finde das richtig gut! Es ist nicht unbedingt zu „weiß“, es ist einfach nur gut und sauber.

Eine kleine Präzisierung zum Beispiel zur Raumtemperatur: Es wäre interessant, dieser einen Regler zuzuordnen, um die exakte Raumtemperatur und die Solltemperatur zu haben.

Was ich mir vorstelle, ist die Möglichkeit, darauf zu klicken und einen Regler zu haben (wie beim iPhone für die Helligkeit zum Beispiel).

Ansonsten gefällt es mir gut 🙂

---

<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:** [21. März 2019 um 11:06 UTC](https://community.gladysassistant.com/t/parlons-de-gladys-v4/3578/231 "2019-03-21T11:06:30Z")

</div>

> [@damalgos](#):
>
> Es wäre interessant, ihm einen Regler zuzuordnen, um die genaue Raumtemperatur und die Solltemperatur zu haben.

Gute Idee!

Mal sehen, wie wir das in diese kleine Box unterbringen könnten, es könnte einfach ein + und - Knopf sein, um die Helligkeit zu erhöhen/verringern.

Du bringst mich auf eine Sache, wir haben in Gladys noch nicht diese Vorstellung von Ist-Zustand und Soll-Zustand.

Ich weiß nicht, welche Form das annehmen könnte, ist es nur ein Zustandswechsel, der viel Zeit in Anspruch nimmt, oder eine Eigenschaft, die irgendwo gespeichert werden muss… Wenn jemand Rückmeldungen dazu hat, wie andere Plattformen das handhaben, interessiert mich das! 🙂

> [@damalgos](#):
>
> Ehrlich gesagt, herzlichen Glückwunsch, ich finde das super! Es ist nicht unbedingt zu „weiß“, es ist einfach gut und sauber.

Danke! 🙂

> [@AlexTrovato](#):
>
> Ich finde das super.

Danke auch, das freut mich! 😛

---

<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:** [21. März 2019 um 11:37 UTC](https://community.gladysassistant.com/t/parlons-de-gladys-v4/3578/232 "2019-03-21T11:37:59Z")

</div>

> Mal sehen, wie man das in dieses kleine Kästchen reinbekommt. Es könnte einfach ein + und - Knopf sein, um die Helligkeit zu erhöhen/verringern.

Aber Achtung, nicht zu viel reinpacken. Du könntest zum Beispiel einfach ein kleines Icon haben, auf das man klickt und ein Modal öffnet sich.

> Du erinnerst mich, wir haben in Gladys im Moment nicht diese Vorstellung von aktuellem Zustand und gewünschtem Zustand.

Tatsächlich, ich habe mit meinem Netatmo gesehen, dass ich zum Beispiel eine Einstellung vornehmen kann und das Ziel des Geräts ist, dieser Einstellung zu folgen. Genauso zum Beispiel beim Öffnen/Verschließen von Jalousien, all diese Dinge, die ein paar Sekunden dauern.

> Es ist einfach ein Zustandswechsel, der viel Zeit in Anspruch nimmt oder eine Eigenschaft, die irgendwo gespeichert werden muss

Das hängt davon ab, was du erreichen willst. Wenn das Ziel ist, dem Benutzer eine Metrik zu geben oder einfach einen Status wie „in Bearbeitung“, „Schließvorgang läuft“…

---

<div class="post-metadata">

**Author:** ![peb](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/peb/32/3480_2.png) [@peb](https://community.gladysassistant.com/u/peb)\
**Post date:** [21. März 2019 um 14:02 UTC](https://community.gladysassistant.com/t/parlons-de-gladys-v4/3578/233 "2019-03-21T14:02:56Z")

</div>

Hallo,

> [@pierre-gilles](#):
>
> Außer den Sequenzen (die tatsächlich ein spezieller Knopf sein können), ist der Rest wie bei Philips Hue, oder? Klar, die Formate sind nicht dieselben, aber sie machen genau das Gleiche wie Philips Hue, oder?

Im Großen und Ganzen alles gleich. Mit einigen kleinen Unterschieden: die Sequenzen natürlich und auch eine integrierte Weckfunktion mit Licht und andere On/Off-Funktionen in Bezug auf die Zeit. Aber das wäre eine spezifische Einstellung im Modul.

> [@pierre-gilles](#):
>
> Ich bin da nicht unbedingt derselben Meinung! Selbst wenn deine Lampe weiß ist, kannst du vielleicht Lust haben, deine Glühbirnen plötzlich gelb/rot zu machen, um eine gemütliche Atmosphäre zu schaffen?

Tatsächlich gibt es viele Steuerungen für eine Glühbirne, im Fall von RGBW hast du mindestens 5: Farbe und Helligkeit RGB, Temperatur und Helligkeit Weiß, und Ein/Aus. Das macht also 5 Zeilen in der Benutzeroberfläche, was schnell viel Platz einnimmt, wenn du die Glühbirnen multiplizierst.  
Man kann entweder Steuerungen ausblenden oder eine Modulgruppe (_Vorlage_) verwenden, wie zum Beispiel:

```auto
(o) ------o------- o
 | |
 o ---o---------- (o)

```

Der vertikale Schalter links würde es ermöglichen, zwischen Farbe und Weiß zu wechseln, der rechte wäre ein Ein/Aus-Knopf. Der obere _Seekbar_ für den Farbton oder die Temperatur in Abhängigkeit vom ersten Knopf, und der darunter für die Helligkeit in Farbe und Weiß.  
Der Schalter zum Wechseln von Farbe zu Weiß würde nur die sichtbaren Steuerungen ersetzen, von denen eines Modus zum anderen, ohne die Glühbirne selbst zu beeinflussen. (Daher würde der Wechsel von der Farbsteuerung zu Weiß die Glühbirne nicht sofort in Weiß setzen, solange der Benutzer nicht eingegriffen hat)  
Das _Vorlagen_-System könnte an andere Fälle von «&nbsp;komplexen&nbsp;» vernetzten Objekten angepasst werden. Dadurch würde die Benutzeroberfläche klarer werden.

Wenn ihr andere Ideen für komplexe Objekte habt, bin ich offen dafür! (Ich werde versuchen, schnell Skizzen zu machen, um euch eine etwas visuellere Vorstellung zu geben) 🙂

> [@pierre-gilles](#):
>
> Du erinnerst mich, wir haben in Gladys noch nicht diese Vorstellung von aktuellem Zustand und gewünschtem Zustand.

Im Fall einer Temperatur kann man sich einen _Seekbar_ mit einem halbtransparenten Marker für den aktuellen Wert, einen vollen Marker für den gewünschten Wert vorstellen. Dazwischen würde der _Seekbar_ eine Bewegung vom ersten zum zweiten Marker haben, um zu symbolisieren, dass es einen Vorgang gibt, um von einem Zustand zum anderen zu wechseln. Man könnte sogar den Abschnitt des _Seekbar_ rot färben, um zu sagen, dass man aufheizt, und umgekehrt blau, um abzukühlen 🙂

> [@pierre-gilles](#):
>
> Also, ich habe viel Zeit investiert, aber jetzt funktioniert es gut. Ich bin zufrieden mit dem Ergebnis!

Du kannst es sein, es ist toll! 👍

Beabsichtigst du, das Symbol eines Schalters (links neben den Zeilen) für alles, was Ein/Aus ist, beizubehalten, oder planst du, das Symbol des Typs des gesteuerten Objekts (ein Baum/Lichterkette, eine Glühbirne usw.) einzufügen?

Aber weiß ist schlecht, ich habe immer Dark Reader aktiviert 😛 daher wäre ein Nachtmodus (grau und/oder schwarz) cool! 😃

---

<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:** [23. März 2019 um 06:09 UTC](https://community.gladysassistant.com/t/parlons-de-gladys-v4/3578/234 "2019-03-23T06:09:19Z")

</div>

Hallo zusammen!

Heute gibt es eine kleine Diskussion über HTTPS in Gladys 4.

Ich habe über das Thema nachgedacht, und hier sind die verschiedenen Fälle, die ich identifiziert habe:

**Fall Nr. 1: Erste Installation von Gladys**

Der Benutzer greift über die IP-Adresse des Raspberry Pi auf seinen Raspberry Pi im lokalen Netzwerk zu und verbindet sich für die erste Anmeldung per HTTP. Dieser Ansatz birgt kein signifikantes Risiko, da er lokal ist und es sich um eine erste Verbindung handelt.

\*\*Fall Nr. 2: «&nbsp;Normalnutzer&nbsp;»

---

<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:** [23. März 2019 um 06:09 UTC](https://community.gladysassistant.com/t/parlons-de-gladys-v4/3578/235 "2019-03-23T06:09:23Z")

</div>

> [@peb](#):
>
> Beabsichtigst du, das Symbol eines Schalters (links neben den Zeilen) für alles, was Ein/Aus ist, beizubehalten, oder planst du, das Symbol des kontrollierten Objekttyps (ein Baum/eine Girlande, eine Glühbirne usw.) einzusetzen?

Bisher war ich noch nicht so weit, an den Baum zu denken, aber ich bin nicht abgeneigt von dieser Idee, wir könnten komplett benutzerdefinierte Icons (optional) hinzufügen 🙂

> [@peb](#):
>
> Gut, aber Weiß ist schlecht, ich habe Dark Reader immer aktiviert 😛 daher wäre ein Dunkler Modus (grau und/oder schwarz) cool! 😃

Für den Dunklen Modus sind wir vom Tabler-Theme abhängig, das ich verwende. Der Theme-Ersteller hat mitgeteilt, dass er den Dunklen Modus mit der Version 1.0.0 von Tabler starten wird 🙂

> <https://github.com/tabler/tabler/issues/241>
>
> Please make a dark css template file for it.

---

<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:** [23. März 2019 um 08:14 UTC](https://community.gladysassistant.com/t/parlons-de-gladys-v4/3578/236 "2019-03-23T08:14:21Z")

</div>

Telepathie, ich hatte das Thema noch nicht gelesen 😅

[https://community.gladysassistant.com/t/nouvelle-version-de-gladys-gladys-v3-13-0/4447/2?u=vonox](https://community.gladysassistant.com/t/nouvelle-version-de-gladys-gladys-v3-13-0/4447/2?u=vonox)

---

<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:** [25. März 2019 um 07:33 UTC](https://community.gladysassistant.com/t/parlons-de-gladys-v4/3578/237 "2019-03-25T07:33:26Z")

</div>

@VonOx Ich habe deine Nachricht zur Build-Optimierung gesehen, halte mich auf dem Laufenden, das ist super!

Ich frage mich, ob es nicht schneller gehen würde, wenn man CircleCI statt TravisCI verwendet.

Ich nutze CircleCI in vielen Projekten und es ist wirklich mächtig.

---

<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:** [25. März 2019 um 09:25 UTC](https://community.gladysassistant.com/t/parlons-de-gladys-v4/3578/238 "2019-03-25T09:25:07Z")

</div>

Alles muss auf circleci umgestellt werden, damit nur gebaut wird, wenn die Tests OK sind.

---

<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:** [25. März 2019 um 11:20 UTC](https://community.gladysassistant.com/t/parlons-de-gladys-v4/3578/239 "2019-03-25T11:20:00Z")

</div>

Ich sage nicht, dass wir zu CircleCI wechseln sollten, ich denke, wir sollten erstmal benchmarken 🙂 CircleCI ist mächtig, aber wir müssen schauen, ob es in diesem speziellen Fall schneller ist!

---

<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:** [25. März 2019 um 16:47 UTC](https://community.gladysassistant.com/t/parlons-de-gladys-v4/3578/240 "2019-03-25T16:47:04Z")

</div>

Ja, ich habe mich falsch ausgedrückt, wenn es erfolgreich ist, müssen wir alles auf Circle CI umstellen 😉

---

<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:** [26. März 2019 um 05:33 UTC](https://community.gladysassistant.com/t/parlons-de-gladys-v4/3578/241 "2019-03-26T05:33:54Z")

</div>

@MathieuA Gut, ich habe mit der Implementierung begonnen, das ist echtes HTML da!

**Szene bearbeiten**

 ![17](https://gladys-assistant-community.b-cdn.net/uploads/default/original/2X/4/4ee4edf1efe89dbd14392c1ab6c1d8e15bd87385.png)

**Szene-Liste**

 ![35](https://gladys-assistant-community.b-cdn.net/uploads/default/original/2X/9/9fe59fbe997a0c49405780f1792ef04fab9d9d57.png)

Zögern Sie nicht, mir Feedback zu geben 🙂

---

<div class="post-metadata">

**Author:** ![MathieuA](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/mathieua/32/22211_2.png) [@MathieuA](https://community.gladysassistant.com/u/MathieuA)\
**Post date:** [26. März 2019 um 05:45 UTC](https://community.gladysassistant.com/t/parlons-de-gladys-v4/3578/242 "2019-03-26T05:45:32Z")

</div>

Arf ich habe auch gestern Abend angefangen @pierre-gilles😛

 ![image](https://gladys-assistant-community.b-cdn.net/uploads/default/original/2X/0/002dc9bc42a74ff9873dc0887d1bbe073214e669.jpeg)

 ![image](https://gladys-assistant-community.b-cdn.net/uploads/default/original/2X/6/6a315dc92ccf0ce6cd75c563a86c04c5a8943d59.jpeg)

Es ist noch nicht sehr weit fortgeschritten, aber einige Dinge funktionieren schon ^^  
Möchtest du, dass ich dir einen PR mache, damit du das, was ich gemacht habe, übernehmen kannst?

---

<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:** [26. März 2019 um 05:51 UTC](https://community.gladysassistant.com/t/parlons-de-gladys-v4/3578/243 "2019-03-26T05:51:02Z")

</div>

Ich wäre dir dankbar, wenn du mir das HTML der Listenansicht schicken könntest!

Gute Arbeit, was du da gemacht hast 🙂

Kein Grund, sich wichtig zu machen, Dateien per PN reichen völlig.

Bei der Szenenbearbeitungsansicht habe ich das Gefühl, ich bin ein bisschen weiter gekommen, was meinst du?

---

<div class="post-metadata">

**Author:** ![MathieuA](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/mathieua/32/22211_2.png) [@MathieuA](https://community.gladysassistant.com/u/MathieuA)\
**Post date:** [26. März 2019 um 06:01 UTC](https://community.gladysassistant.com/t/parlons-de-gladys-v4/3578/244 "2019-03-26T06:01:22Z")

</div>

Bah sagen wir mal, ich habe nicht nur HTML gemacht XD  
Ich habe eine Liste von Szenen hinzugefügt, der Löschbutton funktioniert sowie die Suche auch…

Also ich habe es so richtig krachen lassen, wie du mit den Integrationen 😛

> [@pierre-gilles](#):
>
> Für die Szenenbearbeitungsansicht habe ich das Gefühl, dass ich ein bisschen weiter gegangen bin, was denkst du?

Ich gestehe, ich bin nicht begeistert, ich finde es ein bisschen zu viel ^^

Edit: das HTML

> **Zusammenfassung**
>
> > ```
> > import { connect } from 'unistore/preact';
> > import actions from '../../actions/scenes';
> > import style from './style.css';
> > 
> > const SceneList = connect('scenes,currentUrl,totalSize', actions)(
> > ({ scenes, currentUrl, totalSize, search, play, edit, remove }) => {
> > 
> > const removeScene = (scene) => () => remove(scene);
> > const editScene = (scene) => () => edit(scene);
> >  
> > return (
> > <div class="container">
> > <div class="page-header">
> > <h1 class="page-title">
> > Scenes
> > </h1>
> > <div class="page-subtitle">1 - {scenes.length} of {totalSize} of Scenes</div>
> > <div class="page-options d-flex">
> > <select class="form-control custom-select w-auto">
> > <option value="asc">A - Z</option>
> > <option value="desc">Z - A</option>
> > </select>
> > <div class="input-icon ml-2">
> > <span class="input-icon-addon">
> > <i class="fe fe-search" />
> > </span>
> > <input type="text" class="form-control w-10" placeholder="Search Scenes" onInput={search} />
> > </div>
> > <div class="ml-2">
> > <a href="#" class="btn btn-secondary"><i class="fe fe-plus" />New Scene</a>
> > </div>
> > </div>
> > </div>
> > <div class="row row-cards">
> > { scenes.map((scene) => (
> > 
> > <div class="col-sm-6 col-lg-3">
> > <div class="card h-100">
> > <div class="card-body p-3 text-center">
> > <div class="text-right text-green">
> > <a href="#" class="icon" data-toggle="card-remove" onClick={removeScene(scene)}><i class="fe fe-trash" /></a>
> > </div>
> > <div class={style.scene_icon}><i class={`fe fe-${scene.icon}`} /></div>
> > <h4>{scene.name}</h4>
> > <div class="text-muted">{scene.description}</div>
> > </div>
> > <div class="card-footer">
> > <div class="btn-list text-center">
> > <button class="btn btn-outline-primary btn-sm" onClick={editScene(scene)} id={scene.selector}><i class="fe fe-edit" />Edit</button>
> > <button type="button" class="btn btn-outline-success btn-sm" onClick={play} id={scene.selector}><i class="fe fe-play" />Play</button>
> > </div>
> > </div>
> > </div>
> > </div>
> >                 
> > ))}
> > </div>
> > </div>
> > );
> > });
> > 
> > export default SceneList;
> > 
> > ```

Und das CSS ^^

> **Zusammenfassung**
>
> > ```
> > .scene_icon{
> > font-size: 4rem !important;
> > margin: 0;
> > color: #9aa0ac !important;
> > }
> > 
> > ```

---

<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:** [26. März 2019 um 06:07 UTC](https://community.gladysassistant.com/t/parlons-de-gladys-v4/3578/245 "2019-03-26T06:07:30Z")

</div>

> [@MathieuA](#):
>
> Ich habe eine Liste von Szenen hinzugefügt, der Löschbutton funktioniert sowie die Suche auch…

Ah! Gut, schick mir die Dateien, ich werde mich schon irgendwie damit arrangieren 🙂

> [@MathieuA](#):
>
> Ich gebe zu, ich bin nicht begeistert, ich finde es ein bisschen klobig ^^

Ach? Ich mag es aber 😛

Ich mag die Idee, dass man direkt das gesamte Szenario sieht und es so bearbeiten kann, ohne dass man in eine Reihe von Modals gehen muss.

Bisher gibt es 0 Modals in Gladys 4, du hast es sicher bemerkt! Ich bin nicht gegen Modals, aber ich möchte, dass es viel weniger gibt als in Gladys 3, wo fast alles modal war ^^

[Vorherige Seite](https://community.gladysassistant.com/t/parlons-de-gladys-v4/3578.md?page=9)

[Nächste Seite](https://community.gladysassistant.com/t/parlons-de-gladys-v4/3578.md?page=11)
