Aufgabe

Weihnachten naht und damit der große Reibach des Jahres. Eine besondere Geschäftsidee: ein individuell geschmückter Weihnachtsbaum, im Web vom Kunden selbst konfiguriert, wird ihm fix und fertig nach Hause geliefert! :christmas_tree:

Entwickeln Sie den Weihnachtsbaumkonfigurator als Online-Formular. Dabei stehen den Kunden eine große Auswahl an Schmuckartikeln wie Glaskugeln und Lametta, sowie verschiedene Kerzentypen zur Verfügung. All dies kann er in unterschiedlicher Anzahl wählen und kombinieren. Weiterhin gibt es verschiedene Baumarten sowie Halterungen. Zudem kann der Kunde zwischen verschiedenen Lieferoptionen wählen und muss dazu natürlich auch seine Adresse angeben. Alles hat seinen Preis, bei jedem Artikel ist dieser individuell. :moneybag:

Während der Kunde seinen Weihnachtsbaum konfiguriert, wird ihm ständig eine Zusammenfassung der Bestellung und der daraus berechnete aktuelle Preis übersichtlich in einem eigenen Bereich auf der Seite angezeigt. Auch wenn die Bestellung noch nicht verschickt werden kann, ist auf der Seite schon ein Button zur Prüfung der Bestellung vorhanden. Bei einem Klick darauf erhält der Kunde Information über fehlende oder invalide Daten in seiner Bestellung. :heavy_check_mark:

Das Formular wird teilweise dynamisch per TS/JS aufgebaut. Die erforderlichen Daten zu veränderlichen Teilen des Angebots, wie z.B. die Artikel und Preise, sind in einer eigenen TS/JS-Datei mit Hilfe geeigneter und erweiterbarer Datenstrukturen definiert. Die Händlerin pflegt die Daten zu den angegebenen Artikeln, indem sie lediglich diese eine Datei mit Hilfe eines gewöhnlichen Texteditors modifiziert. Hierfür ist sie ausreichend qualifiziert. Dabei kann sie auch Artikel in den verschiedenen Gruppen (Baumart, Schmuck, Kerzen, Lieferservice) löschen und neue hinzu fügen. Somit kann sie das Angebot des Weihnachtsbaumkonfigurators anpassen, ohne dass ein Eingriff in andere Dateien erforderlich wäre. :pencil:

Konzeption

1. Beginnen Sie wie üblich mit dem Anwendungsfalldiagramm und stellen Sie darin das System, die Anwendungsfälle und deren Verbindung zu den Akteuren dar.
2. Skizzieren Sie dann das Screenlayout und und markieren Sie wieder die zu verwendenden Auszeichnungen und Attribute. Halten Sie zudem fest, welche Teile statisch in der HTML-Datei definiert, und welche dynamisch erzeugt werden sollen.
3. Skizzieren Sie auf einem Extra-Blatt, wie die Datenstrukturen aufgebaut sein sollen, welche der Händlerin zur Modifikation zur Verfügung gestellt werden.
4. Erstellen Sie Ablaufdiagramme für die dynamische Generierung des Formulars sowie für die Interaktion des Kunden und die Anzeige der Zusammenfassung.
   Tipp: Lassen Sie bei jeder Interaktion mit dem Formular die Berechnung und Darstellung der Zusammenfassung komplett neu durchführen! (Dies können Sie bereits im Anwendungsfalldiagramm als Inklusion angeben)

Das Konzept soll eine Qualität aufweisen, wie sie für die Produktion des Weihnachtsbaumkonfigurators durch andere Personen (Grafiker, Programmierer) erforderlich ist, ohne dass diese die Aufgabenstellung im Detail kennen müssen.

Produktion

Setzen Sie die Seite syntaktisch korrekt und lauffähig unter strikter Berücksichtigung der EIA2-CodingStyles um. Beachten Sie zudem folgende Hinweise:

• Coden Sie, wie bei der Konzeption, vom Groben ins Feine. Die Hauptfunktion soll oben stehen, darunter Funktionen, die von ihr aufgerufen werden und darunter weitere Funktionen, die von den aufgerufenen Funktionen wiederum aufgerufen werden usw.
• Funktionen innerhalb von Funktionen sind derzeit nicht erlaubt.
• EventListener sollen möglichst weit oben im Code installiert werden, so dass man gleich erkennt, bei welcher Interaktion welche Funktionen aufgerufen werden.
• Bringen Sie die Daten, welche die Händlerin bearbeiten soll, in einer eigenen TS-Datei unter, so dass sie nichts mit den anderen Dateien zu tun haben muss. Um diese Datei mit einzubinden ist es lediglich erforderlich, darin den gleichen Namespace anzugeben und sie in der HTML-Datei ebenso zu referenzieren. Damit ein Programmteil, der in einer anderen Datei definiert ist, auf die Daten zugreifen kann, muss diesen in der Deklaration das Schlüsselwort export vorangestellt werden.

Recherchehinweise

• JSON
• Number.toFixed()
• Type Assertion (in TypeScript)
• export (in TypeScript)