refactor / single file components

[naltatis]

• Vue Code in einzelne Single-File-Komponenten umgebaut.
• Code-Formatierung mit Prettier und ESLint eingeführt.
• Fontawsome Icon Importe umgestellt (besseres Treeshaking, kleineres JS Bundle)

[naltatis]

@andig Kannst du mir erklären was der Compact-Mode ist? Habe gesehen, dass das scheinbar aus der URL gezogen wird. Habs hier erstmal auskommentiert weils die globale app Variable nicht mehr gibt.

[andig]

"compact" biegt die Darstellung auf den kompakteren "mehrere Ladepunkte" Modus um. Genutzt um das UI auf das 800x400 Display der OpenWB ohne scrollen zu bekommen. Das könnten wir auch später wieder einbauen.

Was ich aber nicht verstanden habe: warum das Du die app vom Singleton in eine Komponente verwandelt- ist Singleton nicht für die Root Komponente ok?

[naltatis]

Die globale app Instanzvariable hab ich entfernt weil man die eigentlich nicht braucht. Kommunikation innerhalb der App findet idR. durch Props und Events statt, nicht durch globale Referenzen. Macht das ganze auch einfacher nachvollziehbarer und testbar.

Die Toasts hätte ich auch gerne in die eigentliche App integriert, aber da das nicht ganz so trivial war hab ich's hier im PR erstmal sein gelassen und die Funktionalität über window.toasts wieder bereit gestellt.

[andig]

Das Naming scheint noch nicht konsistent: z.B. mode vs Mode. Gibts für die Komponenten ein best practice? Tags in gross im HTML sehen für mich sehr ungewohnt aus :O

[andig]

<pre> Format kaputt? Das könnten wir aber ggf auch ausbauen.

[naltatis]

Prettier geht bei Inhalt innerhalb von <pre> Tags auf Nummer sicher weil hier der Whitespace meaningful ist. Daher formatiert es das nicht um. Müssten wir dann händisch wieder einrücken.

[andig]

Bei kurzem Test kein Problem. Ich würde gerne ein Release schneiden und dann weiter sehen. Diskussion auf Slack?

[naltatis]

Das Naming scheint noch nicht konsistent: z.B. mode vs Mode. Gibts für die Komponenten ein best practice? Tags in gross im HTML sehen für mich sehr ungewohnt aus :O

Jein, eine wirkliche Best Practice gibts nicht. Auch die Doku nennt beide (Kebab und Pascal).
https://vuejs.org/v2/guide/components-registration.html#Name-Casing

Bei größeren Projekten und vor allem im Zusammenspiel mit ES-Modules hat die pascal-case Schreibweise Vorteil, dass der Komponentenname auch ein valider JS-Identifier ist. Mit Kebab-Case geht das nicht weil du dort den Bindestrich hast.

[naltatis]

🦑